Feature: remember playback rate in watch session (FreeTubeApp#6449)

* feat: use state in Watch for playback rate value instead defaultPlayback store value directly

* refactor: update playback rate handling in ft-shaka-video-player and Watch components

- Changed default playback rate from 1.0 to 1 in ft-shaka-video-player.js
- Renamed event from 'current-playback-rate-update' to 'playback-rate-updated' in ft-shaka-video-player.js and Watch.vue
- Updated Watch.js to initialize currentPlaybackRate to null and set it based on store value in mounted lifecycle hook

* refactor: simplify playback rate initialization in ft-shaka-video-player and Watch components

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

@@ -123,13 +123,18 @@ export default defineComponent({
       type: String,
       default: null
     },
+    currentPlaybackRate: {
+      type: Number,
+      default: 1
+    },
   },
   emits: [
     'error',
     'loaded',
     'ended',
     'timeupdate',
-    'toggle-theatre-mode'
+    'toggle-theatre-mode',
+    'playback-rate-updated'
   ],
   setup: function (props, { emit, expose }) {
     const { locale, t } = useI18n()
@@ -235,11 +240,6 @@ export default defineComponent({
       })
     })
 
-    /** @type {import('vue').ComputedRef<number>} */
-    const defaultPlayback = computed(() => {
-      return store.getters.getDefaultPlayback
-    })
-
     /** @type {import('vue').ComputedRef<number>} */
     const defaultSkipInterval = computed(() => {
       return store.getters.getDefaultSkipInterval
@@ -901,8 +901,8 @@ export default defineComponent({
         // stop shaka-player's click handler firing
         event.stopPropagation()
 
-        video.value.playbackRate = defaultPlayback.value
-        video.value.defaultPlaybackRate = defaultPlayback.value
+        video.value.playbackRate = props.currentPlaybackRate
+        video.value.defaultPlaybackRate = props.currentPlaybackRate
       }
     }
 
@@ -2310,8 +2310,8 @@ export default defineComponent({
         videoElement.muted = (muted === 'true')
       }
 
-      videoElement.playbackRate = defaultPlayback.value
-      videoElement.defaultPlaybackRate = defaultPlayback.value
+      videoElement.playbackRate = props.currentPlaybackRate
+      videoElement.defaultPlaybackRate = props.currentPlaybackRate
 
       const localPlayer = new shaka.Player()
 
@@ -2413,6 +2413,10 @@ export default defineComponent({
       container.value.classList.add('no-cursor')
 
       await performFirstLoad()
+
+      player.addEventListener('ratechange', () => {
+        emit('playback-rate-updated', player.getPlaybackRate())
+      })
     })
 
     async function performFirstLoad() {

src/renderer/views/Watch/Watch.js

@@ -133,7 +133,8 @@ export default defineComponent({
       customErrorIcon: null,
       videoGenreIsMusic: false,
       /** @type {Date|null} */
-      streamingDataExpiryDate: null
+      streamingDataExpiryDate: null,
+      currentPlaybackRate: null,
     }
   },
   computed: {
@@ -304,6 +305,7 @@ export default defineComponent({
     this.activeFormat = this.defaultVideoFormat
 
     this.checkIfTimestamp()
+    this.currentPlaybackRate = this.$store.getters.getDefaultPlayback
   },
   mounted: function () {
     this.onMountedDependOnLocalStateLoading()
@@ -1657,6 +1659,10 @@ export default defineComponent({
       this.blockVideoAutoplay = false
     },
 
+    updatePlaybackRate(newRate) {
+      this.currentPlaybackRate = newRate
+    },
+
     ...mapActions([
       'updateHistory',
       'updateWatchProgress',

src/renderer/views/Watch/Watch.vue

@@ -34,12 +34,14 @@
           :theatre-possible="theatrePossible"
           :use-theatre-mode="useTheatreMode"
           :vr-projection="vrProjection"
+          :current-playback-rate="currentPlaybackRate"
           class="videoPlayer"
           @error="handlePlayerError"
           @loaded="handleVideoLoaded"
           @timeupdate="updateCurrentChapter"
           @ended="handleVideoEnded"
           @toggle-theatre-mode="useTheatreMode = !useTheatreMode"
+          @playback-rate-updated="updatePlaybackRate"
         />
         <div
           v-if="!isLoading && (isUpcoming || errorMessage)"