From 6f7795d64894e3de326c440f462db33d3742db42 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 14 Oct 2024 09:23:37 -0500
Subject: [PATCH 1/9] Add autoplay toggle to the video player

---
 .../WatchVideoRecommendations.css             |  6 --
 .../WatchVideoRecommendations.vue             | 26 -------
 .../ft-shaka-video-player.js                  | 40 ++++++++++
 .../player-components/AutoplayToggle.js       | 77 +++++++++++++++++++
 src/renderer/views/Watch/Watch.js             | 56 ++++++++++----
 src/renderer/views/Watch/Watch.vue            |  4 +-
 static/locales/en-US.yaml                     |  2 +
 7 files changed, 164 insertions(+), 47 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 103422236a555..7bee84c22cd41 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,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" />
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 4c3c10f968b80..2b01d0c1633fe 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
@@ -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()
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..09aef4440ee61
--- /dev/null
+++ b/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')
+  }
+}
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 71f0c454c2ca2..40fa70c72fdff 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -167,6 +167,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
     },
@@ -200,6 +203,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.getPlaylistPauseOnCurrent() && !this.$refs.watchVideoPlaylist?.shouldStopDueToPlaylistEnd)
+    },
     currentLocale: function () {
       return this.$i18n.locale
     },
@@ -230,6 +237,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
@@ -1182,7 +1194,7 @@ export default defineComponent({
     },
 
     handleVideoEnded: function () {
-      if ((!this.watchingPlaylist || !this.autoplayPlaylists) && !this.playNextVideo) {
+      if (!this.autoplayEnabled) {
         return
       }
 
@@ -1199,11 +1211,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
         }
@@ -1213,7 +1221,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 {
@@ -1223,6 +1231,7 @@ export default defineComponent({
             showToast(this.$t('Playing Next Video'))
           }
         }
+        this.playNextTimeout = null
       }, nextVideoInterval * 1000)
 
       let countDownTimeLeftInSecond = nextVideoInterval
@@ -1237,11 +1246,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
@@ -1251,9 +1256,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.handleWatchProgress()
@@ -1593,7 +1607,7 @@ export default defineComponent({
     },
 
     getPlaylistPauseOnCurrent: function () {
-      return this.$refs.watchVideoPlaylist ? this.$refs.watchVideoPlaylist.pauseOnCurrentVideo : false
+      return this.$refs.watchVideoPlaylist?.pauseOnCurrentVideo ?? false
     },
 
     disablePlaylistPauseOnCurrent: function () {
@@ -1612,6 +1626,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 }
 
@@ -1621,6 +1647,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 e9c60192c8322..1f83e6c03b83d 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"
           class="videoPlayer"
           @error="handlePlayerError"
@@ -40,6 +42,7 @@
           @timeupdate="updateCurrentChapter"
           @ended="handleVideoEnded"
           @toggle-theatre-mode="useTheatreMode = !useTheatreMode"
+          @toggle-autoplay="toggleAutoplay"
         />
         <div
           v-if="!isLoading && (isUpcoming || errorMessage)"
@@ -201,7 +204,6 @@
       />
       <watch-video-recommendations
         v-if="!isLoading && !hideRecommendedVideos"
-        :show-autoplay="!watchingPlaylist"
         :data="recommendedVideos"
         class="watchVideoSideBar watchVideoRecommendations"
         :class="{
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 154162be958e9..31990708c2a3e 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -889,6 +889,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

From d246be7c2c19278f90fa906041cd229d80f1725e Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 14 Oct 2024 09:44:20 -0500
Subject: [PATCH 2/9] Fix (pre-existing) bug where mobile Shaka overflow menu
 overflows into top nav bar

---
 .../ft-shaka-video-player/ft-shaka-video-player.css          | 5 +++++
 1 file changed, 5 insertions(+)

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 f6afe74816f02..b3a83ab74c992 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
@@ -37,6 +37,11 @@
   flex-direction: column-reverse;
 }
 
+:deep(.shaka-overflow-menu),
+:deep(.shaka-settings-menu) {
+  max-height: 200px;
+}
+
 .sixteenByNine {
   aspect-ratio: 16 / 9;
 }

From 4317f3e0dc0c0ade04335461246adad1595f0f6c Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 14 Oct 2024 10:31:50 -0500
Subject: [PATCH 3/9] Update confusing autoplay labels to use consistent
 language

---
 .../components/player-settings/player-settings.vue | 14 +++++++-------
 static/locales/en-US.yaml                          |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
index 0c736a398c539..347b7f90fb254 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/static/locales/en-US.yaml b/static/locales/en-US.yaml
index 31990708c2a3e..4daf8020eabb6 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -397,11 +397,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

From 5c5349e9e4b7bd7bb2bb179ea03d27c265084c3c Mon Sep 17 00:00:00 2001
From: Jason <84899178+kommunarr@users.noreply.github.com>
Date: Mon, 14 Oct 2024 16:40:30 +0000
Subject: [PATCH 4/9] Update
 src/renderer/components/ft-shaka-video-player/player-components/AutoplayToggle.js

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
---
 .../ft-shaka-video-player/player-components/AutoplayToggle.js    | 1 +
 1 file changed, 1 insertion(+)

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
index 09aef4440ee61..5655ca2a6e2bd 100644
--- a/src/renderer/components/ft-shaka-video-player/player-components/AutoplayToggle.js
+++ b/src/renderer/components/ft-shaka-video-player/player-components/AutoplayToggle.js
@@ -4,6 +4,7 @@ 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

From dba83e37d35f49f1fd3ca863651bdf4c003cd5ca Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 14 Oct 2024 12:26:48 -0500
Subject: [PATCH 5/9] Have autoplay toggle value update when setting updates
 elsewhere, e.g., in another window

---
 .../ft-shaka-video-player/ft-shaka-video-player.js    | 11 +++++++++++
 .../player-components/AutoplayToggle.js               |  7 ++++---
 2 files changed, 15 insertions(+), 3 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 2b01d0c1633fe..c154b177909fb 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
@@ -334,6 +334,9 @@ export default defineComponent({
       return store.getters.getSponsorBlockShowSkippedToast
     })
 
+    /** @type {import('vue').ComputedRef<boolean>} */
+    const autoplayEnabled = computed(() => props.autoplayEnabled)
+
     const sponsorSkips = computed(() => {
       // save some work when sponsorblock is disabled
       if (!useSponsorBlock.value) {
@@ -966,6 +969,14 @@ export default defineComponent({
       }
     })
 
+    watch(autoplayEnabled, (newValue, oldValue) => {
+      if (newValue !== oldValue) {
+        events.dispatchEvent(new CustomEvent('setAutoplay', {
+          detail: newValue
+        }))
+      }
+    })
+
     /** @type {ResizeObserver|null} */
     let resizeObserver = null
 
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
index 09aef4440ee61..2f2a664f2579a 100644
--- a/src/renderer/components/ft-shaka-video-player/player-components/AutoplayToggle.js
+++ b/src/renderer/components/ft-shaka-video-player/player-components/AutoplayToggle.js
@@ -51,11 +51,12 @@ export class AutoplayToggle extends shaka.ui.Element {
       }))
     })
 
-    this.eventManager.listen(events, 'toggleAutoplay', (/** @type {CustomEvent} */ event) => {
+    const handleAutoplayValueChange = (/** @type {CustomEvent} */ event) => {
       this.autoplayEnabled_ = event.detail
-
       this.updateLocalisedStrings_()
-    })
+    }
+
+    this.eventManager.listen(events, 'setAutoplay', handleAutoplayValueChange)
 
     this.eventManager.listen(events, 'localeChanged', () => {
       this.updateLocalisedStrings_()

From 2b17208ef2da3a211da6e528bdc927e49bf6ce49 Mon Sep 17 00:00:00 2001
From: Jason <84899178+kommunarr@users.noreply.github.com>
Date: Mon, 14 Oct 2024 19:51:27 +0000
Subject: [PATCH 6/9] Apply suggestions from code review

Co-authored-by: absidue <48293849+absidue@users.noreply.github.com>
---
 .../ft-shaka-video-player/ft-shaka-video-player.js           | 5 +----
 1 file changed, 1 insertion(+), 4 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 c154b177909fb..26480059c7005 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
@@ -334,9 +334,6 @@ export default defineComponent({
       return store.getters.getSponsorBlockShowSkippedToast
     })
 
-    /** @type {import('vue').ComputedRef<boolean>} */
-    const autoplayEnabled = computed(() => props.autoplayEnabled)
-
     const sponsorSkips = computed(() => {
       // save some work when sponsorblock is disabled
       if (!useSponsorBlock.value) {
@@ -969,7 +966,7 @@ export default defineComponent({
       }
     })
 
-    watch(autoplayEnabled, (newValue, oldValue) => {
+    watch(() => props.autoplayEnabled, (newValue, oldValue) => {
       if (newValue !== oldValue) {
         events.dispatchEvent(new CustomEvent('setAutoplay', {
           detail: newValue

From 3a55565d94c022188d2335cfbc85666ace32bb88 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Mon, 14 Oct 2024 16:04:50 -0500
Subject: [PATCH 7/9] Remove now-redundant playlist pause feature

---
 .../watch-video-playlist.js                   | 11 ----------
 .../watch-video-playlist.vue                  | 12 -----------
 src/renderer/main.js                          |  2 --
 src/renderer/views/Watch/Watch.js             | 21 +------------------
 static/locales/en-GB.yaml                     |  4 ----
 static/locales/en-US.yaml                     |  2 --
 6 files changed, 1 insertion(+), 51 deletions(-)

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 bfe449b6eb0ec..3bf5e39b284fd 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 0725d4b0a4b29..501ea1b3bcee1 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -73,7 +73,6 @@ import {
   faNetworkWired,
   faNewspaper,
   faPalette,
-  faPause,
   faPhotoFilm,
   faPlay,
   faPlus,
@@ -185,7 +184,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 40fa70c72fdff..a1d71c3f5ea77 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -205,7 +205,7 @@ export default defineComponent({
     },
     autoplayPossible: function () {
       return (!this.watchingPlaylist && !this.hideRecommendedVideos && !!this.nextRecommendedVideo) ||
-      (this.watchingPlaylist && !this.getPlaylistPauseOnCurrent() && !this.$refs.watchVideoPlaylist?.shouldStopDueToPlaylistEnd)
+      (this.watchingPlaylist && !this.$refs.watchVideoPlaylist?.shouldStopDueToPlaylistEnd)
     },
     currentLocale: function () {
       return this.$i18n.locale
@@ -1083,10 +1083,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
@@ -1198,11 +1194,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()
@@ -1606,16 +1597,6 @@ export default defineComponent({
       return this.$refs.watchVideoPlaylist ? this.$refs.watchVideoPlaylist.loopEnabled : false
     },
 
-    getPlaylistPauseOnCurrent: function () {
-      return this.$refs.watchVideoPlaylist?.pauseOnCurrentVideo ?? false
-    },
-
-    disablePlaylistPauseOnCurrent: function () {
-      if (this.$refs.watchVideoPlaylist) {
-        this.$refs.watchVideoPlaylist.pauseOnCurrentVideo = false
-      }
-    },
-
     updateTitle: function () {
       document.title = `${this.videoTitle} - ${packageDetails.productName}`
     },
diff --git a/static/locales/en-GB.yaml b/static/locales/en-GB.yaml
index 587aae689c78a..f45a9097eedf2 100644
--- a/static/locales/en-GB.yaml
+++ b/static/locales/en-GB.yaml
@@ -1218,10 +1218,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 4daf8020eabb6..798461607a28e 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -1093,8 +1093,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
 

From 1f2369ac8947197bd80a5473aa2deefb7e2e55c1 Mon Sep 17 00:00:00 2001
From: Jason Henriquez <jasonhenriquez@protonmail.com>
Date: Sun, 29 Dec 2024 10:29:38 -0600
Subject: [PATCH 8/9] Update overflow width threshold

---
 .../components/ft-shaka-video-player/ft-shaka-video-player.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 7ab28894da1bb..194f3753780a5 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
@@ -35,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

From 86ed464227ab7aa0788aeb734e317fe0679bb09e Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Mon, 30 Dec 2024 10:00:36 +0800
Subject: [PATCH 9/9] * Update play next recommended video setting to be "by
 default"

---
 src/renderer/views/Watch/Watch.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 4d7e17c80d413..413cd077bdbdb 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -111,6 +111,8 @@ export default defineComponent({
       captions: [],
       /** @type {'EQUIRECTANGULAR' | 'EQUIRECTANGULAR_THREED_TOP_BOTTOM' | 'MESH'| null} */
       vrProjection: null,
+      autoplayNextRecommendedVideo: false,
+      autoplayNextPlaylistVideo: false,
       recommendedVideos: [],
       downloadLinks: [],
       watchingPlaylist: false,
@@ -179,15 +181,15 @@ export default defineComponent({
       return this.$store.getters.getDefaultVideoFormat
     },
     autoplayEnabled: function () {
-      return this.watchingPlaylist ? this.autoplayPlaylists : this.playNextVideo
+      return this.watchingPlaylist ? this.autoplayNextPlaylistVideo : this.autoplayNextRecommendedVideo
     },
     thumbnailPreference: function () {
       return this.$store.getters.getThumbnailPreference
     },
-    playNextVideo: function () {
+    autoplayNextRecommendedVideoByDefault: function () {
       return this.$store.getters.getPlayNextVideo
     },
-    autoplayPlaylists: function () {
+    autoplayNextPlaylistVideoByDefault: function () {
       return this.$store.getters.getAutoplayPlaylists
     },
     hideRecommendedVideos: function () {
@@ -316,6 +318,9 @@ export default defineComponent({
   created: function () {
     this.videoId = this.$route.params.id
     this.activeFormat = this.defaultVideoFormat
+    // So that the value for this session remains unchanged even if setting changed
+    this.autoplayNextRecommendedVideo = this.autoplayNextRecommendedVideoByDefault
+    this.autoplayNextPlaylistVideo = this.autoplayNextPlaylistVideoByDefault
 
     this.checkIfTimestamp()
     this.currentPlaybackRate = this.$store.getters.getDefaultPlayback
@@ -1651,9 +1656,9 @@ export default defineComponent({
       }
 
       if (this.watchingPlaylist) {
-        this.updateAutoplayPlaylists(!this.autoplayEnabled)
+        this.autoplayNextPlaylistVideo = !this.autoplayEnabled
       } else {
-        this.updatePlayNextVideo(!this.autoplayEnabled)
+        this.autoplayNextRecommendedVideo = !this.autoplayEnabled
       }
     },
 
@@ -1676,8 +1681,6 @@ export default defineComponent({
 
     ...mapActions([
       'updateHistory',
-      'updateAutoplayPlaylists',
-      'updatePlayNextVideo',
       'updateWatchProgress',
       'updateLastViewedPlaylist',
       'updatePlaylistLastPlayedAt',