Implement timer for next video to not play automatically

Author: kommunarr

src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.js

@@ -106,12 +106,17 @@ export default defineComponent({
     vrProjection: {
       type: String,
       default: null
+    },
+    blockVideoAutoplay: {
+      type: Boolean,
+      default: false
     }
   },
   emits: [
     'error',
     'loaded',
     'ended',
+    'reset-autoplay-interruption-timeout',
     'timeupdate',
     'toggle-theatre-mode'
   ],
@@ -155,6 +160,15 @@ export default defineComponent({
      */
     let sortedCaptions
 
+    const blockAutoplay = props.blockVideoAutoplay
+    if (blockAutoplay) {
+      resetAutoplayInterruptionTimeout()
+    }
+
+    function resetAutoplayInterruptionTimeout() {
+      emit('reset-autoplay-interruption-timeout')
+    }
+
     // we don't need to sort if we only have one caption or don't have any
     if (props.captions.length > 1) {
       // theoretically we would resort when the language changes, but we can't remove captions that we already added to the player
@@ -1959,6 +1973,8 @@ export default defineComponent({
      * @param {KeyboardEvent} event
      */
     function keyboardShortcutHandler(event) {
+      resetAutoplayInterruptionTimeout()
+
       if (!player || !hasLoaded.value) {
         return
       }
@@ -2365,6 +2381,9 @@ export default defineComponent({
       document.removeEventListener('keydown', keyboardShortcutHandler)
       document.addEventListener('keydown', keyboardShortcutHandler)
 
+      document.removeEventListener('click', resetAutoplayInterruptionTimeout)
+      document.addEventListener('click', resetAutoplayInterruptionTimeout)
+
       player.addEventListener('loading', () => {
         hasLoaded.value = false
       })
@@ -2673,6 +2692,7 @@ export default defineComponent({
       document.body.classList.remove('playerFullWindow')
 
       document.removeEventListener('keydown', keyboardShortcutHandler)
+      document.removeEventListener('click', resetAutoplayInterruptionTimeout)
 
       if (resizeObserver) {
         resizeObserver.disconnect()
@@ -2768,6 +2788,7 @@ export default defineComponent({
       stats,
 
       autoplayVideos,
+      blockAutoplay,
       sponsorBlockShowSkippedToast,
 
       skippedSponsorBlockSegments,

src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.vue

@@ -14,7 +14,7 @@
       preload="auto"
       crossorigin="anonymous"
       playsinline
-      :autoplay="autoplayVideos ? true : null"
+      :autoplay="autoplayVideos && !blockAutoplay ? true : null"
       :poster="thumbnail"
       @play="handlePlay"
       @pause="handlePause"

src/renderer/components/player-settings/player-settings.js

@@ -95,6 +95,10 @@ export default defineComponent({
       return this.backendPreference !== 'invidious' && !this.backendFallback
     },
 
+    defaultAutoplayInterruptionInterval: function () {
+      return parseInt(this.$store.getters.getDefaultAutoplayInterruptionInterval)
+    },
+
     defaultSkipInterval: function () {
       return parseInt(this.$store.getters.getDefaultSkipInterval)
     },
@@ -286,6 +290,7 @@ export default defineComponent({
     ...mapActions([
       'updateAutoplayVideos',
       'updateAutoplayPlaylists',
+      'updateDefaultAutoplayInterruptionInterval',
       'updatePlayNextVideo',
       'updateEnableSubtitlesByDefault',
       'updateProxyVideos',

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="defaultAutoplayInterruptionInterval"
+        :min-value="1"
+        :max-value="12"
+        :step="1"
+        value-extension="h"
+        @change="updateDefaultAutoplayInterruptionInterval"
+      />
+      <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"

src/renderer/store/modules/settings.js

@@ -172,6 +172,7 @@ const state = {
   baseTheme: 'system',
   mainColor: 'Red',
   secColor: 'Blue',
+  defaultAutoplayInterruptionInterval: 3,
   defaultCaptionSettings: '{}',
   defaultInterval: 5,
   defaultPlayback: 1,

src/renderer/views/Watch/Watch.js

@@ -117,6 +117,8 @@ export default defineComponent({
       playNextCountDownIntervalId: null,
       infoAreaSticky: true,
       commentsEnabled: true,
+      blockVideoAutoplay: false,
+      autoplayInterruptionTimeout: null,
 
       onMountedRun: false,
 
@@ -158,6 +160,9 @@ export default defineComponent({
     proxyVideos: function () {
       return this.$store.getters.getProxyVideos
     },
+    defaultAutoplayInterruptionInterval: function () {
+      return this.$store.getters.getDefaultAutoplayInterruptionInterval
+    },
     defaultInterval: function () {
       return this.$store.getters.getDefaultInterval
     },
@@ -320,6 +325,7 @@ export default defineComponent({
       }
 
       window.addEventListener('beforeunload', this.handleWatchProgress)
+      this.resetAutoplayInterruptionTimeout()
     },
 
     changeTimestamp: function (timestamp) {
@@ -1619,6 +1625,12 @@ export default defineComponent({
       this.updatePlaylistLastPlayedAt({ _id: playlist._id })
     },
 
+    resetAutoplayInterruptionTimeout() {
+      clearTimeout(this.autoplayInterruptionTimeout)
+      this.autoplayInterruptionTimeout = setTimeout(() => { this.blockVideoAutoplay = true }, this.defaultAutoplayInterruptionInterval * 3_600_000)
+      this.blockVideoAutoplay = false
+    },
+
     ...mapActions([
       'updateHistory',
       'updateWatchProgress',

src/renderer/views/Watch/Watch.vue

@@ -34,11 +34,13 @@
           :theatre-possible="theatrePossible"
           :use-theatre-mode="useTheatreMode"
           :vr-projection="vrProjection"
+          :block-video-autoplay="blockVideoAutoplay"
           class="videoPlayer"
           @error="handlePlayerError"
           @loaded="handleVideoLoaded"
           @timeupdate="updateCurrentChapter"
           @ended="handleVideoEnded"
+          @reset-autoplay-interruption-timeout="resetAutoplayInterruptionTimeout"
           @toggle-theatre-mode="useTheatreMode = !useTheatreMode"
         />
         <div

static/locales/en-US.yaml

@@ -408,7 +408,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