fix(player): track playback rate in storage

closes #1121
vidstack · Jan 31, 2024 · a0379ae · a0379ae
1 parent 7671c89
commit a0379ae
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/packages/vidstack/src/core/state/media-player-delegate.ts b/packages/vidstack/src/core/state/media-player-delegate.ts
@@ -73,7 +73,7 @@ export class MediaPlayerDelegate {
 
       let provider = this._media.$provider(),
         { storage } = this._media,
-        { muted, volume, clipStartTime } = this._media.$props;
+        { muted, volume, clipStartTime, playbackRate } = this._media.$props;
 
       const remotePlaybackTime = remotePlaybackInfo()?.savedState?.currentTime,
         wasRemotePlaying = remotePlaybackInfo()?.savedState?.paused === false,
@@ -83,6 +83,7 @@ export class MediaPlayerDelegate {
       if (provider) {
         provider.setVolume((await storage?.getVolume()) ?? volume());
         provider.setMuted((await storage?.getMuted()) ?? muted());
+        provider.setPlaybackRate?.((await storage?.getPlaybackRate()) ?? playbackRate());
         provider.setPlaysInline?.(playsInline());
         if (startTime > 0) provider.setCurrentTime(startTime);
       }

diff --git a/packages/vidstack/src/core/state/media-state-manager.ts b/packages/vidstack/src/core/state/media-state-manager.ts
@@ -302,8 +302,15 @@ export class MediaStateManager extends MediaPlayerController {
   }
 
   ['rate-change'](event: ME.MediaRateChangeEvent) {
+    const { storage } = this._media,
+      { canPlay } = this.$state;
+
     this.$state.playbackRate.set(event.detail);
     this._satisfyRequest('media-rate-change-request', event);
+
+    if (canPlay()) {
+      storage?.setPlaybackRate?.(event.detail);
+    }
   }
 
   ['remote-playback-change'](event: ME.MediaRemotePlaybackChangeEvent) {

diff --git a/packages/vidstack/src/core/state/media-storage.ts b/packages/vidstack/src/core/state/media-storage.ts
@@ -19,6 +19,9 @@ export interface MediaStorage {
   getCaptions(): Promise<boolean | null>;
   setCaptions?(captions: boolean): Promise<void>;
 
+  getPlaybackRate(): Promise<number | null>;
+  setPlaybackRate?(rate: number): Promise<void>;
+
   /**
    * Called when the `mediaId` has changed. This method can return a function to be called
    * before the next change.
@@ -48,6 +51,7 @@ export class LocalMediaStorage implements MediaStorage {
     time: null,
     lang: null,
     captions: null,
+    rate: null,
   };
 
   async getVolume() {
@@ -95,6 +99,15 @@ export class LocalMediaStorage implements MediaStorage {
     this.save();
   }
 
+  async getPlaybackRate() {
+    return this._data.rate;
+  }
+
+  async setPlaybackRate(rate) {
+    this._data.rate = rate;
+    this.save();
+  }
+
   onChange(src: MediaSrc, mediaId: string | null, playerId = 'vds-player') {
     const savedData = playerId ? localStorage.getItem(playerId) : null,
       savedTime = mediaId ? localStorage.getItem(mediaId) : null;
@@ -131,4 +144,5 @@ interface SavedMediaData {
   time: number | null;
   lang: string | null;
   captions: boolean | null;
+  rate: number | null;
 }