From 6202b600bf51cc18a16274d4dd36a7f441213758 Mon Sep 17 00:00:00 2001
From: PikachuEXE <git@pikachuexe.net>
Date: Tue, 17 Dec 2024 10:22:47 +0800
Subject: [PATCH] * Update play next recommended video setting to be "by
 default"

---
 .../WatchVideoRecommendations.vue             | 19 +++++++--------
 src/renderer/views/Watch/Watch.js             | 23 +++++++++++++++++--
 src/renderer/views/Watch/Watch.vue            |  2 ++
 static/locales/en-GB.yaml                     |  2 +-
 static/locales/en-US.yaml                     |  2 +-
 5 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.vue b/src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.vue
index 44e5ffe3c4e1f..63f7774b06fed 100644
--- a/src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.vue
+++ b/src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.vue
@@ -11,7 +11,7 @@
         class="autoPlayToggle"
         :label="$t('Video.Autoplay')"
         :compact="true"
-        :default-value="playNextVideo"
+        :default-value="playNextRecommendedVideo"
         @change="updatePlayNextVideo"
       />
     </div>
@@ -27,14 +27,10 @@
 </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,
@@ -43,19 +39,20 @@ defineProps({
   showAutoplay: {
     type: Boolean,
     default: false
-  }
+  },
+  playNextRecommendedVideo: {
+    type: Boolean,
+    required: true
+  },
 })
 
-/** @type {import('vue').ComputedRef<boolean>} */
-const playNextVideo = computed(() => {
-  return store.getters.getPlayNextVideo
-})
+const emit = defineEmits(['play-next-recommended-video-update'])
 
 /**
  * @param {boolean} value
  */
 function updatePlayNextVideo(value) {
-  store.dispatch('updatePlayNextVideo', value)
+  emit('play-next-recommended-video-update', value)
 }
 </script>
 
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 5624d979a2308..bac1ab0e8dd35 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -64,6 +64,9 @@ export default defineComponent({
       await this.$refs.player.destroyPlayer()
     }
 
+    // Leave page = no longer remember the value
+    sessionStorage.removeItem('Watch/playNextRecommendedVideo')
+
     next()
   },
   data: function () {
@@ -110,6 +113,7 @@ export default defineComponent({
       captions: [],
       /** @type {'EQUIRECTANGULAR' | 'EQUIRECTANGULAR_THREED_TOP_BOTTOM' | 'MESH'| null} */
       vrProjection: null,
+      playNextRecommendedVideo: false,
       recommendedVideos: [],
       downloadLinks: [],
       watchingPlaylist: false,
@@ -179,9 +183,17 @@ export default defineComponent({
     thumbnailPreference: function () {
       return this.$store.getters.getThumbnailPreference
     },
-    playNextVideo: function () {
+    playNextRecommendedVideoByDefault: function () {
       return this.$store.getters.getPlayNextVideo
     },
+    playNextRecommendedVideoForThisSession: function () {
+      const oldValue = sessionStorage.getItem('Watch/playNextRecommendedVideo')
+      if (oldValue !== null) {
+        return oldValue === 'true'
+      }
+
+      return this.playNextRecommendedVideoByDefault
+    },
     autoplayPlaylists: function () {
       return this.$store.getters.getAutoplayPlaylists
     },
@@ -302,6 +314,8 @@ 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.updatePlayNextRecommendedVideoForThisSession(this.playNextRecommendedVideoForThisSession)
 
     this.checkIfTimestamp()
   },
@@ -1242,7 +1256,7 @@ export default defineComponent({
     },
 
     handleVideoEnded: function () {
-      if ((!this.watchingPlaylist || !this.autoplayPlaylists) && !this.playNextVideo) {
+      if ((!this.watchingPlaylist || !this.autoplayPlaylists) && !this.playNextRecommendedVideo) {
         return
       }
 
@@ -1670,6 +1684,11 @@ export default defineComponent({
       this.blockVideoAutoplay = false
     },
 
+    updatePlayNextRecommendedVideoForThisSession(value) {
+      this.playNextRecommendedVideo = value
+      sessionStorage.setItem('Watch/playNextRecommendedVideo', value.toString())
+    },
+
     ...mapActions([
       'setAppTitle',
       'updateHistory',
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index 42e2fd3d55bbf..2613b3abb11d0 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/src/renderer/views/Watch/Watch.vue
@@ -203,12 +203,14 @@
         v-if="!isLoading && !hideRecommendedVideos"
         :show-autoplay="!watchingPlaylist"
         :data="recommendedVideos"
+        :play-next-recommended-video="playNextRecommendedVideo"
         class="watchVideoSideBar watchVideoRecommendations"
         :class="{
           theatreRecommendations: useTheatreMode,
           watchVideoRecommendationsLowerCard: watchingPlaylist || isLive,
           watchVideoRecommendationsNoCard: !watchingPlaylist || !isLive
         }"
+        @play-next-recommended-video-update="updatePlayNextRecommendedVideoForThisSession"
       />
     </div>
   </div>
diff --git a/static/locales/en-GB.yaml b/static/locales/en-GB.yaml
index edb3eb0de337e..68663bc88f61c 100644
--- a/static/locales/en-GB.yaml
+++ b/static/locales/en-GB.yaml
@@ -392,7 +392,7 @@ Settings:
     Hide FreeTube Header Logo: Hide FreeTube header logo
   Player Settings:
     Player Settings: 'Player'
-    Play Next Video: 'Play next video'
+    Play Next Video: 'Autoplay Recommended Videos by Default'
     Turn on Subtitles by Default: 'Turn on subtitles by default'
     Autoplay Videos: 'Autoplay Videos'
     Proxy Videos Through Invidious: 'Proxy Videos Through Invidious'
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index f27e20676b2b0..9b5c8025d0c8b 100644
--- a/static/locales/en-US.yaml
+++ b/static/locales/en-US.yaml
@@ -405,7 +405,7 @@ Settings:
         #* Main Color Theme
   Player Settings:
     Player Settings: Player
-    Play Next Video: Play Next Video
+    Play Next Video: Autoplay Recommended Videos by Default
     Turn on Subtitles by Default: Turn on Subtitles by Default
     Autoplay Videos: Autoplay Videos
     Proxy Videos Through Invidious: Proxy Videos Through Invidious