fix(player): playsinline not initializing correctly

closes #994
vidstack · Nov 7, 2023 · dbf7785 · dbf7785
1 parent 2f7c0d4
commit dbf7785
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 36 deletions.
diff --git a/packages/vidstack/src/components/player.ts b/packages/vidstack/src/components/player.ts
@@ -524,33 +524,6 @@ export class MediaPlayer
     this.canPlayQueue._enqueue('volume', () => (this._provider!.volume = clampedVolume));
   }
 
-  @prop
-  get playsinline() {
-    return this._provider?.playsinline ?? false;
-  }
-
-  set playsinline(inline) {
-    this._queuePlaysinlineUpdate(inline);
-    this.$state.playsinline.set(inline);
-  }
-
-  @prop
-  get playsInline() {
-    return this.playsinline;
-  }
-
-  set playsInline(inline) {
-    this.playsinline = inline;
-  }
-
-  private _watchPlaysinline() {
-    this._queuePlaysinlineUpdate(this.$props.playsinline());
-  }
-
-  private _queuePlaysinlineUpdate(inline: boolean) {
-    this.canPlayQueue._enqueue('playsinline', () => (this._provider!.playsinline = inline));
-  }
-
   @prop
   get playbackRate() {
     return this._provider?.playbackRate ?? 1;
@@ -568,6 +541,14 @@ export class MediaPlayer
     this.canPlayQueue._enqueue('rate', () => (this._provider!.playbackRate = rate));
   }
 
+  private _watchPlaysinline() {
+    this._queuePlaysinlineUpdate(this.$props.playsinline());
+  }
+
+  private _queuePlaysinlineUpdate(inline: boolean) {
+    this.canPlayQueue._enqueue('playsinline', () => (this._provider!.playsinline = inline));
+  }
+
   /**
    * Begins/resumes playback of the media. If this method is called programmatically before the
    * user has interacted with the player, the promise may be rejected subject to the browser's

diff --git a/packages/vidstack/src/components/provider/provider.ts b/packages/vidstack/src/components/provider/provider.ts
@@ -93,8 +93,20 @@ export class MediaProvider extends Component<MediaProviderProps, MediaProviderSt
 
     loader.load(this._media).then((provider) => {
       if (!this.scope) return;
+
       // The src/loader might've changed by the time we load the provider.
       if (peek(this.$state.loader) !== loader) return;
+
+      // Initialize some props.
+      if (provider) {
+        peek(() => {
+          const { muted, volume, playsinline } = this._media.$state;
+          provider.muted = muted();
+          provider.volume = volume();
+          provider.playsinline = playsinline();
+        });
+      }
+
       this._media.delegate._dispatch('provider-change', {
         detail: provider,
       });

diff --git a/packages/vidstack/src/core/api/player-props.ts b/packages/vidstack/src/core/api/player-props.ts
@@ -35,10 +35,7 @@ export const mediaPlayerProps: MediaPlayerProps = {
 };
 
 export interface MediaStateAccessors
-  extends Pick<
-    MediaState,
-    'paused' | 'muted' | 'volume' | 'currentTime' | 'playsinline' | 'playbackRate'
-  > {}
+  extends Pick<MediaState, 'paused' | 'muted' | 'volume' | 'currentTime' | 'playbackRate'> {}
 
 export type MediaSrc =
   | MediaResource

diff --git a/packages/vidstack/src/providers/html/provider.ts b/packages/vidstack/src/providers/html/provider.ts
@@ -25,11 +25,6 @@ export class HTMLMediaProvider implements MediaProviderAdapter {
 
     if ('audioTracks' in this.media) new NativeAudioTracks(this, context);
 
-    const { muted, volume, playsinline } = context.$state;
-    this.muted = muted();
-    this.volume = volume();
-    this.playsinline = playsinline();
-
     onDispose(() => {
       // Dispose of media.
       this._media.setAttribute('src', '');