From b4217ef8522403cb5748e480f387ef83fa07a9a3 Mon Sep 17 00:00:00 2001
From: Jason <84899178+kommunarr@users.noreply.github.com>
Date: Fri, 6 Dec 2024 17:39:29 +0000
Subject: [PATCH] Autoplay time limit (#5871)

* Implement timer for next video to not play automatically

* Update implementation to block next video autoplay

i.e., instead of 'start video automatically' autoplay

* Update variable name and add keyboard handling for ending timeout

* Change autoplay timeout message to be more descriptive, and increase duration to 1 hr
---
 .../ft-shaka-video-player.js                  |  2 +-
 .../player-settings/player-settings.js        |  5 +++
 .../player-settings/player-settings.vue       | 27 ++++++++++------
 src/renderer/store/modules/settings.js        |  1 +
 src/renderer/views/Watch/Watch.js             | 31 +++++++++++++++++++
 static/locales/en-US.yaml                     |  4 ++-
 6 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
index 473f1005d9146..aa5e50467c85d 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js
@@ -122,7 +122,7 @@ export default defineComponent({
     vrProjection: {
       type: String,
       default: null
-    }
+    },
   },
   emits: [
     'error',
diff --git a/src/renderer/components/player-settings/player-settings.js b/src/renderer/components/player-settings/player-settings.js
index 4705f5ec3a612..358c1b6ae9e71 100644
--- a/src/renderer/components/player-settings/player-settings.js
+++ b/src/renderer/components/player-settings/player-settings.js
@@ -95,6 +95,10 @@ export default defineComponent({
       return this.backendPreference !== 'invidious' && !this.backendFallback
     },
 
+    defaultAutoplayInterruptionIntervalHours: function () {
+      return parseInt(this.$store.getters.getDefaultAutoplayInterruptionIntervalHours)
+    },
+
     defaultSkipInterval: function () {
       return parseInt(this.$store.getters.getDefaultSkipInterval)
     },
@@ -286,6 +290,7 @@ export default defineComponent({
     ...mapActions([
       'updateAutoplayVideos',
       'updateAutoplayPlaylists',
+      'updateDefaultAutoplayInterruptionIntervalHours',
       'updatePlayNextVideo',
       'updateEnableSubtitlesByDefault',
       'updateProxyVideos',
diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
index 0c736a398c539..e105e5ac7ee67 100644
--- a/src/renderer/components/player-settings/player-settings.vue
+++ b/src/renderer/components/player-settings/player-settings.vue
@@ -82,15 +82,6 @@
       </div>
     </div>
     <ft-flex-box>
-      <ft-slider
-        :label="$t('Settings.Player Settings.Fast-Forward / Rewind Interval')"
-        :default-value="defaultSkipInterval"
-        :min-value="1"
-        :max-value="70"
-        :step="1"
-        value-extension="s"
-        @change="updateDefaultSkipInterval"
-      />
       <ft-slider
         :label="$t('Settings.Player Settings.Next Video Interval')"
         :default-value="defaultInterval"
@@ -100,6 +91,24 @@
         value-extension="s"
         @change="updateDefaultInterval"
       />
+      <ft-slider
+        :label="$t('Settings.Player Settings.Autoplay Interruption Timer')"
+        :default-value="defaultAutoplayInterruptionIntervalHours"
+        :min-value="1"
+        :max-value="12"
+        :step="1"
+        value-extension="h"
+        @change="updateDefaultAutoplayInterruptionIntervalHours"
+      />
+      <ft-slider
+        :label="$t('Settings.Player Settings.Fast-Forward / Rewind Interval')"
+        :default-value="defaultSkipInterval"
+        :min-value="1"
+        :max-value="70"
+        :step="1"
+        value-extension="s"
+        @change="updateDefaultSkipInterval"
+      />
       <ft-slider
         :label="$t('Settings.Player Settings.Default Volume')"
         :default-value="defaultVolume"
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 6704450a948a1..4979b9cc534c6 100644
--- a/src/renderer/store/modules/settings.js
+++ b/src/renderer/store/modules/settings.js
@@ -172,6 +172,7 @@ const state = {
   baseTheme: 'system',
   mainColor: 'Red',
   secColor: 'Blue',
+  defaultAutoplayInterruptionIntervalHours: 3,
   defaultCaptionSettings: '{}',
   defaultInterval: 5,
   defaultPlayback: 1,
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index e9ff3c753a49e..040c616ddefe1 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -57,6 +57,8 @@ export default defineComponent({
   beforeRouteLeave: async function (to, from, next) {
     this.handleRouteChange()
     window.removeEventListener('beforeunload', this.handleWatchProgress)
+    document.removeEventListener('keydown', this.resetAutoplayInterruptionTimeout)
+    document.removeEventListener('click', this.resetAutoplayInterruptionTimeout)
 
     if (this.$refs.player) {
       await this.$refs.player.destroyPlayer()
@@ -119,6 +121,8 @@ export default defineComponent({
       playNextTimeout: null,
       playNextCountDownIntervalId: null,
       infoAreaSticky: true,
+      blockVideoAutoplay: false,
+      autoplayInterruptionTimeout: null,
 
       onMountedRun: false,
 
@@ -160,6 +164,9 @@ export default defineComponent({
     proxyVideos: function () {
       return this.$store.getters.getProxyVideos
     },
+    defaultAutoplayInterruptionIntervalHours: function () {
+      return this.$store.getters.getDefaultAutoplayInterruptionIntervalHours
+    },
     defaultInterval: function () {
       return this.$store.getters.getDefaultInterval
     },
@@ -321,7 +328,13 @@ export default defineComponent({
         this.getVideoInformationLocal()
       }
 
+      document.removeEventListener('keydown', this.resetAutoplayInterruptionTimeout)
+      document.removeEventListener('click', this.resetAutoplayInterruptionTimeout)
+      document.addEventListener('keydown', this.resetAutoplayInterruptionTimeout)
+      document.addEventListener('click', this.resetAutoplayInterruptionTimeout)
+
       window.addEventListener('beforeunload', this.handleWatchProgress)
+      this.resetAutoplayInterruptionTimeout()
     },
 
     changeTimestamp: function (timestamp) {
@@ -1233,6 +1246,18 @@ export default defineComponent({
         return
       }
 
+      if (this.blockVideoAutoplay) {
+        showToast(this.$t('Autoplay Interruption Timer',
+          this.defaultAutoplayInterruptionIntervalHours,
+          {
+            autoplayInterruptionIntervalHours: this.defaultAutoplayInterruptionIntervalHours
+          }),
+        3_600_000
+        )
+        this.resetAutoplayInterruptionTimeout()
+        return
+      }
+
       if (this.watchingPlaylist && this.getPlaylistPauseOnCurrent()) {
         this.disablePlaylistPauseOnCurrent()
         return
@@ -1639,6 +1664,12 @@ export default defineComponent({
       this.updatePlaylistLastPlayedAt({ _id: playlist._id })
     },
 
+    resetAutoplayInterruptionTimeout() {
+      clearTimeout(this.autoplayInterruptionTimeout)
+      this.autoplayInterruptionTimeout = setTimeout(() => { this.blockVideoAutoplay = true }, this.defaultAutoplayInterruptionIntervalHours * 3_600_000)
+      this.blockVideoAutoplay = false
+    },
+
     ...mapActions([
       'setAppTitle',
       'updateHistory',
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index de8959107d572..5abc95fb17867 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -416,7 +416,8 @@ Settings:
     Skip by Scrolling Over Video Player: Skip by Scrolling Over Video Player
     Display Play Button In Video Player: Display Play Button In Video Player
     Enter Fullscreen on Display Rotate: Enter Fullscreen on Display Rotate
-    Next Video Interval: Next Video Interval
+    Next Video Interval: Autoplay Countdown Timer
+    Autoplay Interruption Timer: Autoplay Interruption Timer
     Fast-Forward / Rewind Interval: Fast-Forward / Rewind Interval
     Default Volume: Default Volume
     Default Playback Rate: Default Playback Rate
@@ -1079,6 +1080,7 @@ Playlist will not pause when current video is finished: Playlist will not pause
 Playlist will pause when current video is finished: Playlist will pause when current video is finished
 Playing Next Video Interval: Playing next video in no time. Click to cancel. | Playing next video in {nextVideoInterval} second. Click to cancel. | Playing next video in {nextVideoInterval} seconds. Click to cancel.
 Canceled next video autoplay: Canceled next video autoplay
+Autoplay Interruption Timer: Autoplay canceled due to {autoplayInterruptionIntervalHours} hours of inactivity
 
 Default Invidious instance has been set to {instance}: Default Invidious instance has been set to {instance}
 Default Invidious instance has been cleared: Default Invidious instance has been cleared