fix(player): maintain volume state across provider changes

closes #1039

Author: mihar-22

packages/vidstack/src/components/provider/provider.ts

@@ -103,16 +103,6 @@ export class MediaProvider extends Component<MediaProviderProps, MediaProviderSt
       // 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.setMuted(muted());
-          provider.setVolume(volume());
-          provider.setPlaysinline?.(playsinline());
-        });
-      }
-
       this._media.delegate._notify('provider-change', provider);
     });
   }

packages/vidstack/src/core/state/media-player-delegate.ts

@@ -60,6 +60,15 @@ export class MediaPlayerDelegate {
         .dispatch();
     }
 
+    const provider = peek(this._media.$provider),
+      { muted, volume, playsinline } = this._media.$state;
+
+    if (provider) {
+      provider.setVolume(peek(volume));
+      provider.setMuted(peek(muted));
+      provider.setPlaysinline?.(peek(playsinline));
+    }
+
     if ($state.canPlay() && $state.autoplay() && !$state.started()) {
       await this._attemptAutoplay(trigger);
     }

packages/vidstack/src/providers/embed/EmbedProvider.ts

@@ -55,6 +55,7 @@ export abstract class EmbedProvider<Message> {
   }
 
   protected _postMessage(message: any, target?: string) {
+    if (__SERVER__) return;
     this._iframe.contentWindow?.postMessage(JSON.stringify(message), target ?? '*');
   }
 

packages/vidstack/src/providers/html/html–media-events.ts

@@ -167,16 +167,6 @@ export class HTMLMediaEvents {
   private _onLoadedMetadata(event: Event) {
     this._attachCanPlayListeners();
 
-    // Sync volume state before metadata.
-    this._notify(
-      'volume-change',
-      {
-        volume: this._media.volume,
-        muted: this._media.muted,
-      },
-      event,
-    );
-
     this._notify('loaded-metadata', undefined, event);
 
     // Native HLS does not reliably fire `canplay` event.

packages/vidstack/src/providers/vimeo/provider.ts

@@ -183,6 +183,8 @@ export class VimeoProvider
 
   setVolume(volume) {
     this._remote('setVolume', volume);
+    // Always update muted after volume because setting volume resets muted state.
+    this._remote('setMuted', peek(this._ctx.$state.muted));
   }
 
   setPlaybackRate(rate) {
@@ -296,7 +298,7 @@ export class VimeoProvider
   protected override _buildParams(): VimeoParams {
     const { $iosControls } = this._ctx,
       { keyDisabled } = this._ctx.$props,
-      { controls, muted, playsinline } = this._ctx.$state,
+      { controls, playsinline } = this._ctx.$state,
       showControls = controls() || $iosControls();
     return {
       title: this.title,
@@ -307,7 +309,6 @@ export class VimeoProvider
       h: this.hash,
       keyboard: showControls && !keyDisabled(),
       transparent: true,
-      muted: muted(),
       playsinline: playsinline(),
       dnt: !this.cookies,
     };
@@ -352,7 +353,10 @@ export class VimeoProvider
       .then((info) => {
         if (!info) return;
 
-        const { title, poster, duration, pro } = info;
+        const { title, poster, duration, pro } = info,
+          { $iosControls } = this._ctx,
+          { controls } = this._ctx.$state,
+          showControls = controls() || $iosControls();
 
         this._timeRAF._start();
         this._pro.set(pro);
@@ -369,10 +373,6 @@ export class VimeoProvider
 
         this._ctx.delegate._ready(detail, trigger);
 
-        const { $iosControls } = this._ctx,
-          { controls } = this._ctx.$state,
-          showControls = controls() || $iosControls();
-
         if (!showControls) {
           this._remote('_hideOverlay');
         }