fix(player): initialize muted/volume correctly when using instance se…

…tters
vidstack · Dec 9, 2023 · 87561b2 · 87561b2
1 parent 4ca23a8
commit 87561b2
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/packages/vidstack/src/components/player.ts b/packages/vidstack/src/components/player.ts
@@ -10,6 +10,7 @@ import {
   provideContext,
   scoped,
   signal,
+  type WriteSignalRecord,
 } from 'maverick.js';
 import type { ElementAttributesRecord } from 'maverick.js/element';
 import {
@@ -466,7 +467,8 @@ export class MediaPlayer
   }
 
   set muted(muted) {
-    this._queueMutedUpdate(muted);
+    const $props = this.$props as unknown as WriteSignalRecord<any>;
+    $props.muted.set(muted);
   }
 
   private _watchMuted() {
@@ -514,7 +516,8 @@ export class MediaPlayer
   }
 
   set volume(volume) {
-    this._queueVolumeUpdate(volume);
+    const $props = this.$props as unknown as WriteSignalRecord<any>;
+    $props.volume.set(volume);
   }
 
   private _watchVolume() {

diff --git a/packages/vidstack/src/core/state/media-player-delegate.ts b/packages/vidstack/src/core/state/media-player-delegate.ts
@@ -61,7 +61,7 @@ export class MediaPlayerDelegate {
     }
 
     const provider = peek(this._media.$provider),
-      { muted, volume, playsinline } = this._media.$state;
+      { muted, volume, playsinline } = this._media.$props;
 
     if (provider) {
       provider.setVolume(peek(volume));

diff --git a/packages/vidstack/src/providers/html/html–media-events.ts b/packages/vidstack/src/providers/html/html–media-events.ts
@@ -60,6 +60,7 @@ export class HTMLMediaEvents {
     this._attachEventListener('abort', this._onAbort);
     this._attachEventListener('emptied', this._onEmptied);
     this._attachEventListener('error', this._onError);
+    this._attachEventListener('volumechange', this._onVolumeChange);
     if (__DEV__) this._ctx.logger?.debug('attached initial media event listeners');
   }
 
@@ -99,7 +100,6 @@ export class HTMLMediaEvents {
       this._attachEventListener('seeked', this._onSeeked),
       this._attachEventListener('seeking', this._onSeeking),
       this._attachEventListener('ended', this._onEnded),
-      this._attachEventListener('volumechange', this._onVolumeChange),
       this._attachEventListener('waiting', this._onWaiting),
     );
     this._attachedCanPlay = true;