Add auto play next video and fix watch progress issue on route change

src/renderer/components/ft-toggle-switch/ft-toggle-switch.sass

@@ -23,7 +23,6 @@
 .switch-label
   position: relative
   display: inline-block
-  min-width: 112px
   cursor: pointer
   font-weight: 500
   text-align: left

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

@@ -29,10 +29,7 @@ export default Vue.extend({
         360,
         480,
         720,
-        1080,
-        1440,
-        2160,
-        4320
+        1080
       ]
     }
   },
@@ -97,10 +94,7 @@ export default Vue.extend({
         this.$t('Settings.Player Settings.Default Quality.360p'),
         this.$t('Settings.Player Settings.Default Quality.480p'),
         this.$t('Settings.Player Settings.Default Quality.720p'),
-        this.$t('Settings.Player Settings.Default Quality.1080p'),
-        this.$t('Settings.Player Settings.Default Quality.1440p'),
-        this.$t('Settings.Player Settings.Default Quality.4k'),
-        this.$t('Settings.Player Settings.Default Quality.8k')
+        this.$t('Settings.Player Settings.Default Quality.1080p')
       ]
     }
   },

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

@@ -28,6 +28,12 @@
           :default-value="proxyVideos"
           @change="updateProxyVideos"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Player Settings.Enable Theatre Mode by Default')"
+          :compact="true"
+          :default-value="defaultTheatreMode"
+          @change="updateDefaultTheatreMode"
+        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch
@@ -43,18 +49,11 @@
           @change="updateAutoplayPlaylists"
         />
         <ft-toggle-switch
-          v-if="false"
           :label="$t('Settings.Player Settings.Play Next Video')"
           :compact="true"
           :default-value="playNextVideo"
           @change="updatePlayNextVideo"
         />
-        <ft-toggle-switch
-          :label="$t('Settings.Player Settings.Enable Theatre Mode by Default')"
-          :compact="true"
-          :default-value="defaultTheatreMode"
-          @change="updateDefaultTheatreMode"
-        />
       </div>
     </div>
     <ft-flex-box>

src/renderer/components/watch-video-recommendations/watch-video-recommendations.css

@@ -1,4 +1,15 @@
+.relative {
+	position: relative;
+}
+
 .watchVideoRecommendations {
 	display: grid;
 	grid-gap: 8px;
 }
+
+.autoPlayToggle {
+	width: 120px;
+	position: absolute;
+	top: 10px;
+	right: 0px;
+}

src/renderer/components/watch-video-recommendations/watch-video-recommendations.js

@@ -1,22 +1,37 @@
 import Vue from 'vue'
+import { mapActions } from 'vuex'
 import FtCard from '../ft-card/ft-card.vue'
 import FtListVideo from '../ft-list-video/ft-list-video.vue'
+import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 
 export default Vue.extend({
   name: 'WatchVideoRecommendations',
   components: {
     'ft-card': FtCard,
-    'ft-list-video': FtListVideo
+    'ft-list-video': FtListVideo,
+    'ft-toggle-switch': FtToggleSwitch
   },
   props: {
     data: {
       type: Array,
       required: true
+    },
+    watchingPlaylist: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
     listType: function () {
       return this.$store.getters.getListType
+    },
+    playNextVideo: function () {
+      return this.$store.getters.getPlayNextVideo
     }
+  },
+  methods: {
+    ...mapActions([
+      'updatePlayNextVideo'
+    ])
   }
 })

src/renderer/components/watch-video-recommendations/watch-video-recommendations.vue

@@ -3,6 +3,14 @@
     <h3>
       {{ $t("Up Next") }}
     </h3>
+    <ft-toggle-switch
+      v-if="!watchingPlaylist"
+      class="autoPlayToggle"
+      :label="$t('Video.Autoplay')"
+      :compact="true"
+      :default-value="playNextVideo"
+      @change="updatePlayNextVideo"
+    />
     <ft-list-video
       v-for="(video, index) in data"
       :key="index"

src/renderer/views/Watch/Watch.js

@@ -70,54 +70,45 @@ export default Vue.extend({
     isDev: function () {
       return process.env.NODE_ENV === 'development'
     },
-
     usingElectron: function () {
       return this.$store.getters.getUsingElectron
     },
-
     historyCache: function () {
       return this.$store.getters.getHistoryCache
     },
-
     rememberHistory: function () {
       return this.$store.getters.getRememberHistory
     },
-
     saveWatchedProgress: function () {
       return this.$store.getters.getSaveWatchedProgress
     },
-
     backendPreference: function () {
       return this.$store.getters.getBackendPreference
     },
-
     backendFallback: function () {
       return this.$store.getters.getBackendFallback
     },
-
     invidiousInstance: function () {
       return this.$store.getters.getInvidiousInstance
     },
-
     proxyVideos: function () {
       return this.$store.getters.getProxyVideos
     },
-
     defaultTheatreMode: function () {
       return this.$store.getters.getDefaultTheatreMode
     },
-
     defaultVideoFormat: function () {
       return this.$store.getters.getDefaultVideoFormat
     },
-
     forceLocalBackendForLegacy: function () {
       return this.$store.getters.getForceLocalBackendForLegacy
     },
-
     thumbnailPreference: function () {
       return this.$store.getters.getThumbnailPreference
     },
+    playNextVideo: function () {
+      return this.$store.getters.getPlayNextVideo
+    },
 
     thumbnail: function () {
       let baseUrl
@@ -145,6 +136,7 @@ export default Vue.extend({
   },
   watch: {
     $route() {
+      this.handleRouteChange()
       // react to route changes...
       this.videoId = this.$route.params.id
 
@@ -586,6 +578,46 @@ export default Vue.extend({
             })
           }
         })
+      } else if (this.playNextVideo) {
+        const timeout = setTimeout(() => {
+          const nextVideoId = this.recommendedVideos[0].videoId
+          this.$router.push(
+            {
+              path: `/watch/${nextVideoId}`
+            }
+          )
+          this.showToast({
+            message: this.$t('Playing Next Video')
+          })
+        }, 5000)
+
+        this.showToast({
+          message: this.$t('Playing next video in 5 seconds.  Click to cancel'),
+          time: 5500,
+          action: () => {
+            clearTimeout(timeout)
+            this.showToast({
+              message: this.$t('Canceled next video autoplay')
+            })
+          }
+        })
+      }
+    },
+
+    handleRouteChange: function () {
+      if (this.rememberHistory && !this.isLoading && !this.isLive) {
+        const player = this.$refs.videoPlayer.player
+
+        if (player !== null && this.saveWatchedProgress) {
+          const currentTime = this.$refs.videoPlayer.player.currentTime()
+          const payload = {
+            videoId: this.videoId,
+            watchProgress: currentTime
+          }
+
+          console.log('update watch progress')
+          this.updateWatchProgress(payload)
+        }
       }
     },
 
@@ -739,21 +771,7 @@ export default Vue.extend({
     ])
   },
   beforeRouteLeave: function (to, from, next) {
-    if (this.rememberHistory && !this.isLoading && !this.isLive) {
-      const player = this.$refs.videoPlayer.player
-
-      if (player !== null && this.saveWatchedProgress) {
-        const currentTime = this.$refs.videoPlayer.player.currentTime()
-        const payload = {
-          videoId: this.videoId,
-          watchProgress: currentTime
-        }
-
-        console.log('update watch progress')
-        this.updateWatchProgress(payload)
-      }
-    }
-
+    this.handleRouteChange()
     next()
   }
 })

src/renderer/views/Watch/Watch.vue

@@ -80,6 +80,7 @@
       />
       <watch-video-recommendations
         v-if="!isLoading"
+        :watching-playlist="watchingPlaylist"
         :data="recommendedVideos"
         class="watchVideoSideBar watchVideoRecommendations"
         :class="{

static/locales/en-US.yaml

@@ -338,6 +338,7 @@ Video:
   # Context is "X People Watching"
   Watching: Watching
   Watched: Watched
+  Autoplay: Autoplay
   # As in a Live Video
   Live: Live
   Live Now: Live Now