fix(player/react): updating current time on page transitions throws

vidstack · Nov 30, 2023 · ed8b646 · ed8b646
1 parent 1b72abc
commit ed8b646
Showing 1 changed file with 23 additions and 18 deletions.
diff --git a/packages/vidstack/src/components/player.ts b/packages/vidstack/src/components/player.ts
@@ -451,7 +451,9 @@ export class MediaPlayer
   }
 
   private _queueMutedUpdate(muted: boolean) {
-    this.canPlayQueue._enqueue('muted', () => this._provider!.setMuted(muted));
+    this.canPlayQueue._enqueue('muted', () => {
+      if (this._provider) this._provider.setMuted(muted);
+    });
   }
 
   @prop
@@ -469,17 +471,17 @@ export class MediaPlayer
 
   private _queueCurrentTimeUpdate(time: number) {
     this.canPlayQueue._enqueue('currentTime', () => {
-      const adapter = this._provider;
-      if (time !== peek(this.$state.currentTime)) {
-        peek(() => {
-          const boundTime = Math.min(
-            Math.max(this.$state.seekableStart() + 0.1, time),
-            this.$state.seekableEnd() - 0.1,
-          );
-
-          if (Number.isFinite(boundTime)) adapter!.setCurrentTime(boundTime);
-        });
-      }
+      if (time === peek(this.$state.currentTime)) return;
+      peek(() => {
+        if (!this._provider) return;
+
+        const boundTime = Math.min(
+          Math.max(this.$state.seekableStart() + 0.1, time),
+          this.$state.seekableEnd() - 0.1,
+        );
+
+        if (Number.isFinite(boundTime)) this._provider.setCurrentTime(boundTime);
+      });
     });
   }
 
@@ -498,7 +500,9 @@ export class MediaPlayer
 
   private _queueVolumeUpdate(volume: number) {
     const clampedVolume = clampNumber(0, volume, 1);
-    this.canPlayQueue._enqueue('volume', () => this._provider!.setVolume(clampedVolume));
+    this.canPlayQueue._enqueue('volume', () => {
+      if (this._provider) this._provider.setVolume(clampedVolume);
+    });
   }
 
   @prop
@@ -515,18 +519,19 @@ export class MediaPlayer
   }
 
   private _queuePlaybackRateUpdate(rate: number) {
-    this.canPlayQueue._enqueue('rate', () => this._provider!.setPlaybackRate?.(rate));
+    this.canPlayQueue._enqueue('rate', () => {
+      if (this._provider) this._provider.setPlaybackRate?.(rate);
+    });
   }
 
   private _watchPlaysinline() {
     this._queuePlaysinlineUpdate(this.$props.playsinline());
   }
 
   private _queuePlaysinlineUpdate(inline: boolean) {
-    this.canPlayQueue._enqueue(
-      'playsinline',
-      () => (this._provider as MediaProviderAdapter).setPlaysinline?.(inline),
-    );
+    this.canPlayQueue._enqueue('playsinline', () => {
+      if (this._provider) (this._provider as MediaProviderAdapter).setPlaysinline?.(inline);
+    });
   }
 
   /**