Merge branch 'feature/play-next-by-default-w-toggle' into custom-buil…

…ds/tmp * feature/play-next-by-default-w-toggle: local watch next * Update setting label text $ Name props/emits better * Ensure autoplayPlaylists on watch page is a local state (even though no control to change it yet) * Update play next recommended video setting to be "by default"
PikachuEXE · Dec 21, 2024 · a4393ca · a4393ca
2 parents 3fe78d0 + 1ceb50a
commit a4393ca
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 63 deletions.
diff --git a/src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.vue b/src/renderer/components/WatchVideoRecommendations/WatchVideoRecommendations.vue
@@ -11,8 +11,8 @@
         class="autoPlayToggle"
         :label="$t('Video.Autoplay')"
         :compact="true"
-        :default-value="playNextVideo"
-        @change="updatePlayNextVideo"
+        :default-value="autoplayNextRecommendedVideo"
+        @change="updateAutoplayNextVideo"
       />
     </div>
     <FtListVideoLazy
@@ -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
-  }
+  },
+  autoplayNextRecommendedVideo: {
+    type: Boolean,
+    required: true
+  },
 })
 
-/** @type {import('vue').ComputedRef<boolean>} */
-const playNextVideo = computed(() => {
-  return store.getters.getPlayNextVideo
-})
+const emit = defineEmits(['autoplay-next-recommended-video-update'])
 
 /**
  * @param {boolean} value
  */
-function updatePlayNextVideo(value) {
-  store.dispatch('updatePlayNextVideo', value)
+function updateAutoplayNextVideo(value) {
+  emit('autoplay-next-recommended-video-update', value)
 }
 </script>
 

diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.css b/src/renderer/components/watch-video-playlist/watch-video-playlist.css
@@ -1,3 +1,8 @@
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+}
+
 .playlistTitle {
   text-overflow: ellipsis;
   overflow: hidden;
@@ -47,6 +52,12 @@
   background-color: var(--secondary-text-color);
 }
 
+.autoPlayToggle {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
 .playlistIcon {
   block-size: 20px;
   inline-size: 20px;
@@ -110,3 +121,13 @@
   position: relative;
   inset-block-end: 7px;
 }
+
+@media only screen and (width <=680px) {
+  .top-bar {
+    display: block;
+  }
+
+  .autoPlayToggle {
+    justify-content: unset;
+  }
+}
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.js b/src/renderer/components/watch-video-playlist/watch-video-playlist.js
@@ -3,6 +3,7 @@ import { mapMutations } from 'vuex'
 import FtLoader from '../ft-loader/ft-loader.vue'
 import FtCard from '../ft-card/ft-card.vue'
 import FtListVideoNumbered from '../ft-list-video-numbered/ft-list-video-numbered.vue'
+import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import { copyToClipboard, showToast } from '../../helpers/utils'
 import {
   getLocalPlaylist,
@@ -17,7 +18,8 @@ export default defineComponent({
   components: {
     'ft-loader': FtLoader,
     'ft-card': FtCard,
-    'ft-list-video-numbered': FtListVideoNumbered
+    'ft-list-video-numbered': FtListVideoNumbered,
+    'ft-toggle-switch': FtToggleSwitch,
   },
   props: {
     playlistId: {
@@ -40,8 +42,12 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    autoplayPlaylists: {
+      type: Boolean,
+      required: true,
+    },
   },
-  emits: ['pause-player'],
+  emits: ['pause-player', 'autoplay-next-playlist-video-update'],
   data: function () {
     return {
       isLoading: true,
@@ -545,6 +551,10 @@ export default defineComponent({
       this.$emit('pause-player')
     },
 
+    updatePlayNextVideo(value) {
+      this.$emit('autoplay-next-playlist-video-update', value)
+    },
+
     ...mapMutations([
       'setCachedPlaylist'
     ])

diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
@@ -6,48 +6,59 @@
     <div
       v-else
     >
-      <h3
-        class="playlistTitle"
-        :title="playlistTitle"
-      >
-        <router-link
-          class="playlistTitleLink"
-          :to="playlistPageLinkTo"
-        >
-          {{ playlistTitle }}
-        </router-link>
-      </h3>
-      <template
-        v-if="channelName !== ''"
-      >
-        <router-link
-          v-if="channelId"
-          class="channelName"
-          :to="`/channel/${channelId}`"
-        >
-          {{ channelName }} -
-        </router-link>
-        <span
-          v-else
-          class="channelName"
-        >
-          {{ channelName }} -
-        </span>
-      </template>
-      <span
-        class="playlistIndex"
-      >
-        <label for="playlistProgressBar">
-          {{ currentVideoIndexOneBased }} / {{ playlistVideoCount }}
-        </label>
-        <progress
-          v-if="!shuffleEnabled && !reversePlaylist"
-          id="playlistProgressBar"
-          class="playlistProgressBar"
-          :value="currentVideoIndexOneBased"
-          :max="playlistVideoCount"
+      <div class="top-bar">
+        <div class="top-info">
+          <h3
+            class="playlistTitle"
+            :title="playlistTitle"
+          >
+            <router-link
+              class="playlistTitleLink"
+              :to="playlistPageLinkTo"
+            >
+              {{ playlistTitle }}
+            </router-link>
+          </h3>
+          <template
+            v-if="channelName !== ''"
+          >
+            <router-link
+              v-if="channelId"
+              class="channelName"
+              :to="`/channel/${channelId}`"
+            >
+              {{ channelName }} -
+            </router-link>
+            <span
+              v-else
+              class="channelName"
+            >
+              {{ channelName }} -
+            </span>
+          </template>
+          <span
+            class="playlistIndex"
+          >
+            <label for="playlistProgressBar">
+              {{ currentVideoIndexOneBased }} / {{ playlistVideoCount }}
+            </label>
+            <progress
+              v-if="!shuffleEnabled && !reversePlaylist"
+              id="playlistProgressBar"
+              class="playlistProgressBar"
+              :value="currentVideoIndexOneBased"
+              :max="playlistVideoCount"
+            />
+          </span>
+        </div>
+        <ft-toggle-switch
+          class="autoPlayToggle"
+          :label="$t('Video.Autoplay')"
+          :compact="true"
+          :default-value="autoplayPlaylists"
+          @change="updatePlayNextVideo"
         />
-      </span>
+      </div>
       <p>
         <font-awesome-icon
           class="playlistIcon"

diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
@@ -110,6 +110,8 @@ export default defineComponent({
       captions: [],
       /** @type {'EQUIRECTANGULAR' | 'EQUIRECTANGULAR_THREED_TOP_BOTTOM' | 'MESH'| null} */
       vrProjection: null,
+      autoplayNextRecommendedVideo: false,
+      autoplayPlaylists: false,
       recommendedVideos: [],
       downloadLinks: [],
       watchingPlaylist: false,
@@ -179,10 +181,10 @@ export default defineComponent({
     thumbnailPreference: function () {
       return this.$store.getters.getThumbnailPreference
     },
-    playNextVideo: function () {
+    autoplayNextRecommendedVideoByDefault: function () {
       return this.$store.getters.getPlayNextVideo
     },
-    autoplayPlaylists: function () {
+    autoplayPlaylistsByDefault: function () {
       return this.$store.getters.getAutoplayPlaylists
     },
     hideRecommendedVideos: function () {
@@ -302,6 +304,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.autoplayPlaylists = this.autoplayPlaylistsByDefault
 
     this.checkIfTimestamp()
   },
@@ -1242,7 +1247,7 @@ export default defineComponent({
     },
 
     handleVideoEnded: function () {
-      if ((!this.watchingPlaylist || !this.autoplayPlaylists) && !this.playNextVideo) {
+      if ((!this.watchingPlaylist || !this.autoplayPlaylists) && !this.autoplayNextRecommendedVideo) {
         return
       }
 

diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
@@ -195,20 +195,24 @@
         :playlist-type="playlistType"
         :video-id="videoId"
         :playlist-item-id="playlistItemId"
+        :autoplay-playlists="autoplayPlaylists"
         class="watchVideoSideBar watchVideoPlaylist"
         :class="{ theatrePlaylist: useTheatreMode }"
         @pause-player="pausePlayer"
+        @autoplay-next-playlist-video-update="(v) => autoplayPlaylists = v"
       />
       <watch-video-recommendations
         v-if="!isLoading && !hideRecommendedVideos"
         :show-autoplay="!watchingPlaylist"
         :data="recommendedVideos"
+        :autoplay-next-recommended-video="autoplayNextRecommendedVideo"
         class="watchVideoSideBar watchVideoRecommendations"
         :class="{
           theatreRecommendations: useTheatreMode,
           watchVideoRecommendationsLowerCard: watchingPlaylist || isLive,
           watchVideoRecommendationsNoCard: !watchingPlaylist || !isLive
         }"
+        @autoplay-next-recommended-video-update="(v) => autoplayNextRecommendedVideo = v"
       />
     </div>
   </div>

diff --git a/static/locales/en-GB.yaml b/static/locales/en-GB.yaml
@@ -392,11 +392,11 @@ 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'
-    Autoplay Playlists: 'Autoplay Playlists'
+    Autoplay Playlists: 'Autoplay Playlist Videos by Default'
     Enable Theatre Mode by Default: 'Enable Theatre Mode by Default'
     Scroll Volume Over Video Player: 'Scroll Volume Over Video Player'
     Default Volume: 'Default volume'

diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
@@ -405,11 +405,11 @@ 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
-    Autoplay Playlists: Autoplay Playlists
+    Autoplay Playlists: Autoplay Playlist Videos by Default
     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