Add autoplay toggle to the video player

src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.css

@@ -7,12 +7,6 @@
   grid-gap: 8px;
 }
 
-.autoPlayToggle {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
-
 .VideoRecommendationsTopBar {
   display: flex;
   justify-content: space-between;

src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.vue

@@ -6,14 +6,6 @@
       <h3>
         {{ $t("Up Next") }}
       </h3>
-      <FtToggleSwitch
-        v-if="showAutoplay"
-        class="autoPlayToggle"
-        :label="$t('Video.Autoplay')"
-        :compact="true"
-        :default-value="playNextVideo"
-        @change="updatePlayNextVideo"
-      />
     </div>
     <FtListVideoLazy
       v-for="(video, index) in data"
@@ -27,35 +19,17 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
 
 import FtCard from '../ft-card/ft-card.vue'
 import FtListVideoLazy from '../ft-list-video-lazy/ft-list-video-lazy.vue'
-import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 
-import store from '../../store/index'
 
 defineProps({
   data: {
     type: Array,
     required: true
-  },
-  showAutoplay: {
-    type: Boolean,
-    default: false
   }
 })
-
-const playNextVideo = computed(() => {
-  return store.getters.getPlayNextVideo
-})
-
-/**
- * @param {boolean} value
- */
-function updatePlayNextVideo(value) {
-  store.dispatch('updatePlayNextVideo', value)
-}
 </script>
 
 <style scoped src="./WatchVideoRecommendations.css" />

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

@@ -37,6 +37,11 @@
   flex-direction: column-reverse;
 }
 
+:deep(.shaka-overflow-menu),
+:deep(.shaka-settings-menu) {
+  max-height: 200px;
+}
+
 .sixteenByNine {
   aspect-ratio: 16 / 9;
 }

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

@@ -14,6 +14,7 @@ import { LegacyQualitySelection } from './player-components/LegacyQualitySelecti
 import { ScreenshotButton } from './player-components/ScreenshotButton'
 import { StatsButton } from './player-components/StatsButton'
 import { TheatreModeButton } from './player-components/TheatreModeButton'
+import { AutoplayToggle } from './player-components/AutoplayToggle'
 import {
   findMostSimilarAudioBandwidth,
   getSponsorBlockSegments,
@@ -103,6 +104,14 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    autoplayPossible: {
+      type: Boolean,
+      default: false
+    },
+    autoplayEnabled: {
+      type: Boolean,
+      default: false
+    },
     vrProjection: {
       type: String,
       default: null
@@ -113,6 +122,7 @@ export default defineComponent({
     'loaded',
     'ended',
     'timeupdate',
+    'toggle-autoplay',
     'toggle-theatre-mode'
   ],
   setup: function (props, { emit, expose }) {
@@ -726,6 +736,7 @@ export default defineComponent({
       if (useOverFlowMenu.value) {
         uiConfig.overflowMenuButtons = [
           'ft_screenshot',
+          'ft_autoplay_toggle',
           'playback_rate',
           'loop',
           'ft_audio_tracks',
@@ -745,6 +756,7 @@ export default defineComponent({
           'recenter_vr',
           'toggle_stereoscopic',
           'ft_screenshot',
+          'ft_autoplay_toggle',
           'playback_rate',
           'loop',
           'ft_audio_tracks',
@@ -773,6 +785,11 @@ export default defineComponent({
         }
       }
 
+      if (!props.autoplayPossible) {
+        const index = elementList.indexOf('ft_autoplay_toggle')
+        elementList.splice(index, 1)
+      }
+
       if (props.format === 'audio') {
         const index = elementList.indexOf('picture_in_picture')
         elementList.splice(index, 1)
@@ -1627,6 +1644,24 @@ export default defineComponent({
       shakaOverflowMenu.registerElement('ft_audio_tracks', new AudioTrackSelectionFactory())
     }
 
+    function registerAutoplayToggle() {
+      events.addEventListener('toggleAutoplay', () => {
+        emit('toggle-autoplay')
+      })
+
+      /**
+       * @implements {shaka.extern.IUIElement.Factory}
+       */
+      class AutoplayToggleFactory {
+        create(rootElement, controls) {
+          return new AutoplayToggle(props.autoplayEnabled, events, rootElement, controls)
+        }
+      }
+
+      shakaControls.registerElement('ft_autoplay_toggle', new AutoplayToggleFactory())
+      shakaOverflowMenu.registerElement('ft_autoplay_toggle', new AutoplayToggleFactory())
+    }
+
     function registerTheatreModeButton() {
       events.addEventListener('toggleTheatreMode', () => {
         emit('toggle-theatre-mode')
@@ -1756,6 +1791,9 @@ export default defineComponent({
       shakaControls.registerElement('ft_audio_tracks', null)
       shakaOverflowMenu.registerElement('ft_audio_tracks', null)
 
+      shakaControls.registerElement('ft_autoplay_toggle', null)
+      shakaOverflowMenu.registerElement('ft_autoplay_toggle', null)
+
       shakaControls.registerElement('ft_theatre_mode', null)
       shakaOverflowMenu.registerElement('ft_theatre_mode', null)
 
@@ -2345,6 +2383,8 @@ export default defineComponent({
         registerScreenshotButton()
       }
       registerAudioTrackSelection()
+      registerAutoplayToggle()
+
       registerTheatreModeButton()
       registerFullWindowButton()
       registerLegacyQualitySelection()

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

@@ -0,0 +1,77 @@
+import shaka from 'shaka-player'
+
+import i18n from '../../../i18n/index'
+
+export class AutoplayToggle extends shaka.ui.Element {
+  /**
+   * @param {EventTarget} events
+   * @param {HTMLElement} parent
+   * @param {shaka.ui.Controls} controls
+   */
+  constructor(autoplayEnabled, events, parent, controls) {
+    super(parent, controls)
+
+    /** @private */
+    this.button_ = document.createElement('button')
+    this.button_.classList.add('autoplay-toggle')
+    this.button_.classList.add('shaka-tooltip')
+
+    /** @private */
+    this.icon_ = document.createElement('i')
+    this.icon_.classList.add('material-icons-round')
+    this.icon_.textContent = 'pause_circle'
+
+    this.button_.appendChild(this.icon_)
+
+    const label = document.createElement('label')
+    label.classList.add('shaka-overflow-button-label')
+    label.classList.add('shaka-overflow-menu-only')
+
+    /** @private */
+    this.nameSpan_ = document.createElement('span')
+    label.appendChild(this.nameSpan_)
+
+    /** @private */
+    this.currentState_ = document.createElement('span')
+    this.currentState_.classList.add('shaka-current-selection-span')
+    label.appendChild(this.currentState_)
+
+    this.button_.appendChild(label)
+
+    this.parent.appendChild(this.button_)
+
+    /** @private */
+    this.autoplayEnabled_ = autoplayEnabled
+
+    // listeners
+
+    this.eventManager.listen(this.button_, 'click', () => {
+      events.dispatchEvent(new CustomEvent('toggleAutoplay', {
+        detail: !this.autoplayEnabled_
+      }))
+    })
+
+    this.eventManager.listen(events, 'toggleAutoplay', (/** @type {CustomEvent} */ event) => {
+      this.autoplayEnabled_ = event.detail
+
+      this.updateLocalisedStrings_()
+    })
+
+    this.eventManager.listen(events, 'localeChanged', () => {
+      this.updateLocalisedStrings_()
+    })
+
+    this.updateLocalisedStrings_()
+  }
+
+  /** @private */
+  updateLocalisedStrings_() {
+    this.nameSpan_.textContent = i18n.t('Video.Autoplay')
+
+    this.icon_.textContent = this.autoplayEnabled_ ? 'play_circle' : 'pause_circle'
+
+    this.currentState_.textContent = this.localization.resolve(this.autoplayEnabled_ ? 'ON' : 'OFF')
+
+    this.button_.ariaLabel = this.autoplayEnabled_ ? i18n.t('Video.Player.Autoplay is on') : i18n.t('Video.Player.Autoplay is off')
+  }
+}

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

@@ -49,10 +49,11 @@
       </div>
       <div class="switchColumn">
         <ft-toggle-switch
-          :label="$t('Settings.Player Settings.Autoplay Videos')"
+          :label="$t('Settings.Player Settings.Play Next Video')"
           :compact="true"
-          :default-value="autoplayVideos"
-          @change="updateAutoplayVideos"
+          :disabled="hideRecommendedVideos"
+          :default-value="playNextVideo"
+          @change="updatePlayNextVideo"
         />
         <ft-toggle-switch
           :label="$t('Settings.Player Settings.Autoplay Playlists')"
@@ -61,11 +62,10 @@
           @change="updateAutoplayPlaylists"
         />
         <ft-toggle-switch
-          :label="$t('Settings.Player Settings.Play Next Video')"
+          :label="$t('Settings.Player Settings.Autoplay Videos')"
           :compact="true"
-          :disabled="hideRecommendedVideos"
-          :default-value="playNextVideo"
-          @change="updatePlayNextVideo"
+          :default-value="autoplayVideos"
+          @change="updateAutoplayVideos"
         />
         <ft-toggle-switch
           :label="$t('Settings.Player Settings.Display Play Button In Video Player')"