From 67102f1dee92bd08ee3282b6684798e185d1dd75 Mon Sep 17 00:00:00 2001
From: Jason <84899178+kommunarr@users.noreply.github.com>
Date: Tue, 14 Jan 2025 22:34:45 +0000
Subject: [PATCH] Add autoplay toggle to the video player (#5866)

* Add autoplay toggle to the video player

* Fix (pre-existing) bug where mobile Shaka overflow menu overflows into top nav bar

* Update confusing autoplay labels to use consistent language

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

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

* Have autoplay toggle value update when setting updates elsewhere, e.g., in another window

* Apply suggestions from code review

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>

* Remove now-redundant playlist pause feature

* Update overflow width threshold

---------

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
---
 .../WatchVideoRecommendations.css             |  6 --
 .../WatchVideoRecommendations.vue             | 28 -------
 .../ft-shaka-video-player.css                 |  2 +
 .../ft-shaka-video-player.js                  | 50 +++++++++++-
 .../player-components/AutoplayToggle.js       | 79 +++++++++++++++++++
 .../player-settings/player-settings.vue       | 14 ++--
 .../watch-video-playlist.js                   | 11 ---
 .../watch-video-playlist.vue                  | 12 ---
 src/renderer/main.js                          |  2 -
 src/renderer/views/Watch/Watch.js             | 73 +++++++++--------
 src/renderer/views/Watch/Watch.vue            |  4 +-
 static/locales/en-GB.yaml                     |  4 -
 static/locales/en-US.yaml                     | 10 +--
 13 files changed, 186 insertions(+), 109 deletions(-)
 create mode 100644 src/renderer/components/ft-shaka-video-player/player-components/AutoplayToggle.js

diff --git a/src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.css b/src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.css
index cc99e998ff906..b00a7feb4000b 100644
--- a/src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.css
+++ b/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;
diff --git a/src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.vue b/src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.vue
index 44e5ffe3c4e1f..754da4ae75a0b 100644
--- a/src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.vue
+++ b/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,36 +19,16 @@
 </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
   }
 })
-
-/** @type {import('vue').ComputedRef<boolean>} */
-const playNextVideo = computed(() => {
-  return store.getters.getPlayNextVideo
-})
-
-/**
- * @param {boolean} value
- */
-function updatePlayNextVideo(value) {
-  store.dispatch('updatePlayNextVideo', value)
-}
 </script>
 
 <style scoped src="./WatchVideoRecommendations.css" />
diff --git a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css
index f12e64ddf2605..b2ff59b54ec14 100644
--- a/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css
+++ b/src/renderer/components/ft-shaka-video-player/ft-shaka-video-player.css
@@ -54,6 +54,8 @@
 :deep(.shaka-overflow-menu),
 :deep(.shaka-settings-menu) {
   background: var(--card-bg-color) !important;
+  max-height: 200px;
+
 }
 
 :deep(.shaka-overflow-menu button),
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 b0fe16ca32095..7fded01010dcd 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
@@ -13,6 +13,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,
@@ -34,7 +35,7 @@ import { pathExists } from '../../helpers/filesystem'
 // The UTF-8 characters "h", "t", "t", and "p".
 const HTTP_IN_HEX = 0x68747470
 
-const USE_OVERFLOW_MENU_WIDTH_THRESHOLD = 600
+const USE_OVERFLOW_MENU_WIDTH_THRESHOLD = 634
 
 const RequestType = shaka.net.NetworkingEngine.RequestType
 const AdvancedRequestType = shaka.net.NetworkingEngine.AdvancedRequestType
@@ -119,6 +120,14 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    autoplayPossible: {
+      type: Boolean,
+      default: false
+    },
+    autoplayEnabled: {
+      type: Boolean,
+      default: false
+    },
     vrProjection: {
       type: String,
       default: null
@@ -133,6 +142,7 @@ export default defineComponent({
     'loaded',
     'ended',
     'timeupdate',
+    'toggle-autoplay',
     'toggle-theatre-mode',
     'playback-rate-updated'
   ],
@@ -751,6 +761,7 @@ export default defineComponent({
       if (useOverFlowMenu.value) {
         uiConfig.overflowMenuButtons = [
           'ft_screenshot',
+          'ft_autoplay_toggle',
           'playback_rate',
           'loop',
           'ft_audio_tracks',
@@ -770,6 +781,7 @@ export default defineComponent({
           'recenter_vr',
           'toggle_stereoscopic',
           'ft_screenshot',
+          'ft_autoplay_toggle',
           'playback_rate',
           'loop',
           'ft_audio_tracks',
@@ -798,6 +810,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)
@@ -975,6 +992,14 @@ export default defineComponent({
       }
     })
 
+    watch(() => props.autoplayEnabled, (newValue, oldValue) => {
+      if (newValue !== oldValue) {
+        events.dispatchEvent(new CustomEvent('setAutoplay', {
+          detail: newValue
+        }))
+      }
+    })
+
     /** @type {ResizeObserver|null} */
     let resizeObserver = null
 
@@ -1643,6 +1668,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')
@@ -1772,6 +1815,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)
 
@@ -2394,6 +2440,8 @@ export default defineComponent({
 
       registerScreenshotButton()
       registerAudioTrackSelection()
+      registerAutoplayToggle()
+
       registerTheatreModeButton()
       registerFullWindowButton()
       registerLegacyQualitySelection()
diff --git a/src/renderer/components/ft-shaka-video-player/player-components/AutoplayToggle.js b/src/renderer/components/ft-shaka-video-player/player-components/AutoplayToggle.js
new file mode 100644
index 0000000000000..119d355d8ca50
--- /dev/null
+++ b/src/renderer/components/ft-shaka-video-player/player-components/AutoplayToggle.js
@@ -0,0 +1,79 @@
+import shaka from 'shaka-player'
+
+import i18n from '../../../i18n/index'
+
+export class AutoplayToggle extends shaka.ui.Element {
+  /**
+   * @param {boolean} autoplayEnabled
+   * @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_
+      }))
+    })
+
+    const handleAutoplayValueChange = (/** @type {CustomEvent} */ event) => {
+      this.autoplayEnabled_ = event.detail
+      this.updateLocalisedStrings_()
+    }
+
+    this.eventManager.listen(events, 'setAutoplay', handleAutoplayValueChange)
+
+    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')
+  }
+}
diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
index 54c10c2b3ec2f..57002920b8e61 100644
--- a/src/renderer/components/player-settings/player-settings.vue
+++ b/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')"
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.js b/src/renderer/components/watch-video-playlist/watch-video-playlist.js
index e0d424bad8b62..aa17bd78c3140 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.js
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.js
@@ -48,7 +48,6 @@ export default defineComponent({
       shuffleEnabled: false,
       loopEnabled: false,
       reversePlaylist: false,
-      pauseOnCurrentVideo: false,
       prevVideoBeforeDeletion: null,
       channelName: '',
       channelId: '',
@@ -294,16 +293,6 @@ export default defineComponent({
       })
     },
 
-    togglePauseOnCurrentVideo: function () {
-      if (this.pauseOnCurrentVideo) {
-        this.pauseOnCurrentVideo = false
-        showToast(this.$t('Playlist will not pause when current video is finished'))
-      } else {
-        this.pauseOnCurrentVideo = true
-        showToast(this.$t('Playlist will pause when current video is finished'))
-      }
-    },
-
     playNextVideo: function () {
       const playlistInfo = {
         playlistId: this.playlistId,
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
index 85abbd3efb880..f3d01b0efd1e9 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
@@ -105,18 +105,6 @@
           @keydown.enter.prevent="playNextVideo"
           @keydown.space.prevent="playNextVideo"
         />
-        <font-awesome-icon
-          class="playlistIcon"
-          :class="{ playlistIconActive: pauseOnCurrentVideo }"
-          :icon="['fas', 'pause']"
-          :title="$t('Video.Pause on Current Video')"
-          role="button"
-          tabindex="0"
-          :aria-pressed="pauseOnCurrentVideo"
-          @click="togglePauseOnCurrentVideo"
-          @keydown.enter.prevent="togglePauseOnCurrentVideo"
-          @keydown.space.prevent="togglePauseOnCurrentVideo"
-        />
       </p>
       <div
         v-if="!isLoading"
diff --git a/src/renderer/main.js b/src/renderer/main.js
index bbf6886870d5a..521233f25bbeb 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -80,7 +80,6 @@ import {
   faNetworkWired,
   faNewspaper,
   faPalette,
-  faPause,
   faPhotoFilm,
   faPlay,
   faPlus,
@@ -204,7 +203,6 @@ library.add(
   faNetworkWired,
   faNewspaper,
   faPalette,
-  faPause,
   faPhotoFilm,
   faPlay,
   faPlus,
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 4aa81703c13f8..3f00082828b72 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -178,6 +178,9 @@ export default defineComponent({
     defaultVideoFormat: function () {
       return this.$store.getters.getDefaultVideoFormat
     },
+    autoplayEnabled: function () {
+      return this.watchingPlaylist ? this.autoplayPlaylists : this.playNextVideo
+    },
     thumbnailPreference: function () {
       return this.$store.getters.getThumbnailPreference
     },
@@ -211,6 +214,10 @@ export default defineComponent({
     theatrePossible: function () {
       return !this.hideRecommendedVideos || (!this.hideLiveChat && this.isLive) || this.watchingPlaylist
     },
+    autoplayPossible: function () {
+      return (!this.watchingPlaylist && !this.hideRecommendedVideos && !!this.nextRecommendedVideo) ||
+      (this.watchingPlaylist && !this.$refs.watchVideoPlaylist?.shouldStopDueToPlaylistEnd)
+    },
     currentLocale: function () {
       return this.$i18n.locale
     },
@@ -241,6 +248,11 @@ export default defineComponent({
 
       return this.$store.getters.getPlaylist(this.playlistId)
     },
+    nextRecommendedVideo: function () {
+      return this.recommendedVideos.find((video) =>
+        !this.isHiddenVideo(this.forbiddenTitles, this.channelsHidden, video)
+      )
+    },
     startTimeSeconds: function () {
       if (this.isLoading || this.isLive) {
         return null
@@ -1133,10 +1145,6 @@ export default defineComponent({
     },
 
     checkIfPlaylist: function () {
-      // On the off chance that user selected pause on current video
-      // Then clicks on another video in the playlist
-      this.disablePlaylistPauseOnCurrent()
-
       if (this.$route.query == null) {
         this.watchingPlaylist = false
         return
@@ -1244,7 +1252,7 @@ export default defineComponent({
     },
 
     handleVideoEnded: function () {
-      if ((!this.watchingPlaylist || !this.autoplayPlaylists) && !this.playNextVideo) {
+      if (!this.autoplayEnabled) {
         return
       }
 
@@ -1260,11 +1268,6 @@ export default defineComponent({
         return
       }
 
-      if (this.watchingPlaylist && this.getPlaylistPauseOnCurrent()) {
-        this.disablePlaylistPauseOnCurrent()
-        return
-      }
-
       if (this.watchingPlaylist && this.$refs.watchVideoPlaylist?.shouldStopDueToPlaylistEnd) {
         // Let `watchVideoPlaylist` handle end of playlist, no countdown needed
         this.$refs.watchVideoPlaylist.playNextVideo()
@@ -1273,11 +1276,7 @@ export default defineComponent({
 
       let nextVideoId = null
       if (!this.watchingPlaylist) {
-        const forbiddenTitles = this.forbiddenTitles
-        const channelsHidden = this.channelsHidden
-        nextVideoId = this.recommendedVideos.find((video) =>
-          !this.isHiddenVideo(forbiddenTitles, channelsHidden, video)
-        )?.videoId
+        nextVideoId = this.nextRecommendedVideo?.videoId
         if (!nextVideoId) {
           return
         }
@@ -1287,7 +1286,7 @@ export default defineComponent({
       this.playNextTimeout = setTimeout(() => {
         const player = this.$refs.player
 
-        if (player && player.isPaused()) {
+        if (player?.isPaused()) {
           if (this.watchingPlaylist) {
             this.$refs.watchVideoPlaylist.playNextVideo()
           } else {
@@ -1297,6 +1296,7 @@ export default defineComponent({
             showToast(this.$t('Playing Next Video'))
           }
         }
+        this.playNextTimeout = null
       }, nextVideoInterval * 1000)
 
       let countDownTimeLeftInSecond = nextVideoInterval
@@ -1311,11 +1311,7 @@ export default defineComponent({
         // To avoid message flashing
         // `time` is manually tested to be 700
         const message = this.$tc('Playing Next Video Interval', countDownTimeLeftInSecond, { nextVideoInterval: countDownTimeLeftInSecond })
-        showToast(message, 700, () => {
-          clearTimeout(this.playNextTimeout)
-          clearInterval(this.playNextCountDownIntervalId)
-          showToast(this.$t('Canceled next video autoplay'))
-        })
+        showToast(message, 700, this.abortAutoplayCountdown)
 
         // At least this var should be updated AFTER showing the message
         countDownTimeLeftInSecond = countDownTimeLeftInSecond - 1
@@ -1325,9 +1321,18 @@ export default defineComponent({
       this.playNextCountDownIntervalId = setInterval(showCountDownMessage, 1000)
     },
 
-    handleRouteChange: function () {
+    abortAutoplayCountdown: function (hideToast = false) {
       clearTimeout(this.playNextTimeout)
       clearInterval(this.playNextCountDownIntervalId)
+      this.playNextTimeout = null
+
+      if (!hideToast) {
+        showToast(this.$t('Canceled next video autoplay'))
+      }
+    },
+
+    handleRouteChange: function () {
+      this.abortAutoplayCountdown(true)
       this.videoChapters = []
       this.videoChaptersKind = 'chapters'
 
@@ -1639,16 +1644,6 @@ export default defineComponent({
       return this.$refs.watchVideoPlaylist ? this.$refs.watchVideoPlaylist.loopEnabled : false
     },
 
-    getPlaylistPauseOnCurrent: function () {
-      return this.$refs.watchVideoPlaylist ? this.$refs.watchVideoPlaylist.pauseOnCurrentVideo : false
-    },
-
-    disablePlaylistPauseOnCurrent: function () {
-      if (this.$refs.watchVideoPlaylist) {
-        this.$refs.watchVideoPlaylist.pauseOnCurrentVideo = false
-      }
-    },
-
     updateTitle: function () {
       this.setAppTitle(`${this.videoTitle} - ${packageDetails.productName}`)
     },
@@ -1659,6 +1654,18 @@ export default defineComponent({
         forbiddenTitles.some((text) => video.title?.toLowerCase().includes(text.toLowerCase()))
     },
 
+    toggleAutoplay: function() {
+      if (this.autoplayEnabled && this.playNextTimeout) {
+        this.abortAutoplayCountdown()
+      }
+
+      if (this.watchingPlaylist) {
+        this.updateAutoplayPlaylists(!this.autoplayEnabled)
+      } else {
+        this.updatePlayNextVideo(!this.autoplayEnabled)
+      }
+    },
+
     updateLocalPlaylistLastPlayedAtSometimes() {
       if (this.selectedUserPlaylist == null) { return }
 
@@ -1678,6 +1685,8 @@ export default defineComponent({
 
     ...mapActions([
       'updateHistory',
+      'updateAutoplayPlaylists',
+      'updatePlayNextVideo',
       'updateWatchProgress',
       'updateLastViewedPlaylist',
       'updatePlaylistLastPlayedAt',
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index 80e9e63a5a545..00f3cf6b44673 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -33,6 +33,8 @@
           :title="videoTitle"
           :theatre-possible="theatrePossible"
           :use-theatre-mode="useTheatreMode"
+          :autoplay-possible="autoplayPossible"
+          :autoplay-enabled="autoplayEnabled"
           :vr-projection="vrProjection"
           :current-playback-rate="currentPlaybackRate"
           class="videoPlayer"
@@ -41,6 +43,7 @@
           @timeupdate="updateCurrentChapter"
           @ended="handleVideoEnded"
           @toggle-theatre-mode="useTheatreMode = !useTheatreMode"
+          @toggle-autoplay="toggleAutoplay"
           @playback-rate-updated="updatePlaybackRate"
         />
         <div
@@ -204,7 +207,6 @@
       />
       <watch-video-recommendations
         v-if="!isLoading && !hideRecommendedVideos"
-        :show-autoplay="!watchingPlaylist"
         :data="recommendedVideos"
         class="watchVideoSideBar watchVideoRecommendations"
         :class="{
diff --git a/static/locales/en-GB.yaml b/static/locales/en-GB.yaml
index 2f2ed93509240..ad4f71009ad35 100644
--- a/static/locales/en-GB.yaml
+++ b/static/locales/en-GB.yaml
@@ -1144,10 +1144,6 @@ Hashtag:
   Hashtag: Hashtag
   This hashtag does not currently have any videos: This hashtag does not currently
     have any videos
-Playlist will pause when current video is finished: Playlist will pause when current
-  video is finished
-Playlist will not pause when current video is finished: Playlist will not pause when
-  current video is finished
 Go to page: Go to {page}
 Tag already exists: ‘{tagName}’ tag already exists
 Close Banner: Close Banner
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 8d1545711ce0b..ceb7175dbe2a3 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -414,11 +414,11 @@ Settings:
         #* Main Color Theme
   Player Settings:
     Player Settings: Player
-    Play Next Video: Play Next Video
+    Play Next Video: Autoplay Recommended Videos
+    Autoplay Playlists: Autoplay Playlist Videos
+    Autoplay Videos: Start Videos Automatically
     Turn on Subtitles by Default: Turn on Subtitles by Default
-    Autoplay Videos: Autoplay Videos
     Proxy Videos Through Invidious: Proxy Videos Through Invidious
-    Autoplay Playlists: Autoplay Playlists
     Enable Theatre Mode by Default: Enable Theatre Mode by Default
     Scroll Volume Over Video Player: Scroll Volume Over Video Player
     Scroll Playback Rate Over Video Player: Scroll Playback Rate Over Video Player
@@ -883,6 +883,8 @@ Video:
   Player:
     TranslatedCaptionTemplate: '{language} (translated from "{originalLanguage}")'
     Audio Tracks: Audio Tracks
+    Autoplay is off: Autoplay is off
+    Autoplay is on: Autoplay is on
     Theatre Mode: Theater Mode
     Exit Theatre Mode: Exit Theater Mode
     Full Window: Full Window
@@ -1075,8 +1077,6 @@ Shuffle is now enabled: Shuffle is now enabled
 The playlist has been reversed: The playlist has been reversed
 Playing Next Video: Playing Next Video
 Playing Previous Video: Playing Previous Video
-Playlist will not pause when current video is finished: Playlist will not pause when current video is finished
-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