@livepeer-frameworks/player-svelte 0.2.3 → 0.2.5

package/README.md

@@ -16,14 +16,15 @@ npm i @livepeer-frameworks/player-svelte
 
 ```svelte
 <script lang="ts">
-  import { Player } from '@livepeer-frameworks/player-svelte';
+  import { Player } from "@livepeer-frameworks/player-svelte";
 </script>
 
 <div style="width: 100%; height: 500px;">
   <Player
     contentType="live"
-    contentId="pk_..." // playbackId
-    options={{ gatewayUrl: 'https://your-bridge/graphql' }}
+    contentId="pk_..."
+    // playbackId
+    options={{ gatewayUrl: "https://your-bridge/graphql" }}
   />
 </div>
 ```

package/dist/Player.svelte

@@ -90,8 +90,12 @@
   let isDevPanelOpen = $state(false);
   let skipDirection: SkipDirection = $state(null);
 
-  let activeTheme = $state<FwThemePreset>(options?.theme ?? "default");
-  let activeLocale = $state<FwLocale>(options?.locale ?? "en");
+  let activeTheme = $state<FwThemePreset>("default");
+  let activeLocale = $state<FwLocale>("en");
+  $effect(() => {
+    if (options.theme) activeTheme = options.theme;
+    if (options.locale) activeLocale = options.locale;
+  });
 
   // Sync locale state to i18n store and provide translator context
   $effect(() => {
@@ -221,6 +225,10 @@
     playbackQuality: null as any,
     subtitlesEnabled: false,
     toast: null as { message: string; timestamp: number } | null,
+    controllerSeekableStart: 0,
+    controllerLiveEdge: 0,
+    controllerCanSeek: false,
+    controllerHasAudio: true,
   });
 
   // Track if we've already attached to prevent double-attach race
@@ -667,8 +675,8 @@
               onStatsToggle={() => (isStatsOpen = !isStatsOpen)}
               isContentLive={storeState.isEffectivelyLive}
               onJumpToLive={() => playerStore?.getController()?.jumpToLive()}
-              controllerSeekableStart={playerStore?.getController()?.getSeekableStart()}
-              controllerLiveEdge={playerStore?.getController()?.getLiveEdge()}
+              controllerSeekableStart={storeState?.controllerSeekableStart ?? 0}
+              controllerLiveEdge={storeState?.controllerLiveEdge ?? 0}
               {activeLocale}
               onLocaleChange={(l) => {
                 activeLocale = l;

package/dist/PlayerControls.svelte

@@ -149,40 +149,77 @@
 
   // Audio detection: trust MistServer metadata first, then DOM fallback
   $effect(() => {
-    // Primary: trust MistServer stream metadata (matches ddvtech embed approach)
-    if (mistStreamInfo?.hasAudio !== undefined) {
-      hasAudio = mistStreamInfo.hasAudio;
-      return;
-    }
-
     if (!video) {
       hasAudio = true;
       return;
     }
+    const currentVideo = video;
+
+    let boundStream: MediaStream | null = null;
+    let streamListener: (() => void) | null = null;
+
+    const unbindStream = () => {
+      if (boundStream && streamListener) {
+        boundStream.removeEventListener("addtrack", streamListener);
+        boundStream.removeEventListener("removetrack", streamListener);
+      }
+      boundStream = null;
+      streamListener = null;
+    };
 
     const checkAudio = () => {
-      if (video!.srcObject instanceof MediaStream) {
-        hasAudio = video!.srcObject.getAudioTracks().length > 0;
+      // Prefer actual MediaStream tracks over metadata to avoid phantom controls.
+      if (currentVideo.srcObject instanceof MediaStream) {
+        const stream = currentVideo.srcObject;
+        if (stream !== boundStream) {
+          unbindStream();
+          boundStream = stream;
+          streamListener = () => {
+            hasAudio = stream.getAudioTracks().length > 0;
+          };
+          stream.addEventListener("addtrack", streamListener);
+          stream.addEventListener("removetrack", streamListener);
+        }
+        hasAudio = stream.getAudioTracks().length > 0;
         return;
       }
-      const videoAny = video as any;
+
+      unbindStream();
+
+      // Fallback: metadata for non-MediaStream sources.
+      if (mistStreamInfo?.hasAudio !== undefined) {
+        hasAudio = mistStreamInfo.hasAudio;
+        return;
+      }
+
+      const videoAny = currentVideo as any;
       if (videoAny.audioTracks && videoAny.audioTracks.length !== undefined) {
         hasAudio = videoAny.audioTracks.length > 0;
         return;
       }
+
       hasAudio = true;
     };
+
     checkAudio();
-    video.addEventListener("loadedmetadata", checkAudio);
-    // Safari: audioTracks may be populated after loadedmetadata for HLS streams
-    const audioTracks = (video as any).audioTracks;
+    currentVideo.addEventListener("loadedmetadata", checkAudio);
+    currentVideo.addEventListener("loadeddata", checkAudio);
+    currentVideo.addEventListener("durationchange", checkAudio);
+
+    const audioTracks = (currentVideo as any).audioTracks;
     if (audioTracks?.addEventListener) {
       audioTracks.addEventListener("addtrack", checkAudio);
+      audioTracks.addEventListener("removetrack", checkAudio);
     }
+
     return () => {
-      video!.removeEventListener("loadedmetadata", checkAudio);
+      unbindStream();
+      currentVideo.removeEventListener("loadedmetadata", checkAudio);
+      currentVideo.removeEventListener("loadeddata", checkAudio);
+      currentVideo.removeEventListener("durationchange", checkAudio);
       if (audioTracks?.removeEventListener) {
         audioTracks.removeEventListener("addtrack", checkAudio);
+        audioTracks.removeEventListener("removetrack", checkAudio);
       }
     };
   });
@@ -263,11 +300,7 @@
   );
 
   let allowMediaStreamDvr = $derived(
-    isMediaStreamSource(video) &&
-      bufferWindowMs !== undefined &&
-      bufferWindowMs > 0 &&
-      sourceType !== "whep" &&
-      sourceType !== "webrtc"
+    isMediaStreamSource(video) && bufferWindowMs !== undefined && bufferWindowMs > 0
   );
 
   // Seekable range: prefer controller-derived values (same pattern as React/WC)

package/dist/controls/SettingsMenu.svelte

@@ -101,7 +101,13 @@
 
   {#if isOpen}
     <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-    <div class="fw-settings-menu" role="menu" aria-label={t("settings")} onkeydown={handleKeyDown}>
+    <div
+      class="fw-settings-menu"
+      role="menu"
+      aria-label={t("settings")}
+      onkeydown={handleKeyDown}
+      tabindex="-1"
+    >
       {#if showModeSelector && onModeChange}
         <div class="fw-settings-section">
           <div class="fw-settings-label">{t("mode")}</div>

package/dist/stores/playerController.d.ts

@@ -78,6 +78,14 @@ export interface PlayerControllerState {
         message: string;
         timestamp: number;
     } | null;
+    /** Controller-derived seekable start (ms) — reactively updated via seekingStateChange */
+    controllerSeekableStart: number;
+    /** Controller-derived live edge (ms) — reactively updated via seekingStateChange */
+    controllerLiveEdge: number;
+    /** Controller-derived canSeek — reactively updated via seekingStateChange */
+    controllerCanSeek: boolean;
+    /** Controller-derived hasAudio — reactively updated via seekingStateChange */
+    controllerHasAudio: boolean;
 }
 export interface PlayerControllerStore extends Readable<PlayerControllerState> {
     /** Get controller instance */

package/dist/stores/playerController.js

@@ -38,6 +38,10 @@ const initialState = {
     playbackQuality: null,
     subtitlesEnabled: false,
     toast: null,
+    controllerSeekableStart: 0,
+    controllerLiveEdge: 0,
+    controllerCanSeek: false,
+    controllerHasAudio: true,
 };
 // ============================================================================
 // Store Factory
@@ -209,6 +213,15 @@ export function createPlayerControllerStore(config) {
         unsubscribers.push(controller.on("captionsChange", ({ enabled }) => {
             store.update((prev) => ({ ...prev, subtitlesEnabled: enabled }));
         }));
+        unsubscribers.push(controller.on("seekingStateChange", (data) => {
+            store.update((prev) => ({
+                ...prev,
+                controllerSeekableStart: data.seekableStart,
+                controllerLiveEdge: data.liveEdge,
+                controllerCanSeek: data.canSeek,
+                controllerHasAudio: data.hasAudio,
+            }));
+        }));
         // Error handling events - show toasts/modals
         unsubscribers.push(controller.on("protocolSwapped", (data) => {
             const message = `Switched to ${data.toProtocol}`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer-frameworks/player-svelte",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "description": "Svelte 5 components for FrameWorks streaming player",
   "svelte": "./dist/index.js",
@@ -21,8 +21,8 @@
     "./player.css": "./src/player.css"
   },
   "dependencies": {
-    "bits-ui": "^2.15.5",
-    "@livepeer-frameworks/player-core": "0.2.3"
+    "bits-ui": "^2.16.2",
+    "@livepeer-frameworks/player-core": "0.2.5"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -33,8 +33,8 @@
     "@testing-library/svelte": "^5.3.1",
     "@vitest/coverage-v8": "^4.0.18",
     "jsdom": "^28.1.0",
-    "svelte": "^5.51.2",
-    "svelte-check": "^4.4.0",
+    "svelte": "^5.53.6",
+    "svelte-check": "^4.4.4",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.18"

package/src/Player.svelte

@@ -90,8 +90,12 @@
   let isDevPanelOpen = $state(false);
   let skipDirection: SkipDirection = $state(null);
 
-  let activeTheme = $state<FwThemePreset>(options?.theme ?? "default");
-  let activeLocale = $state<FwLocale>(options?.locale ?? "en");
+  let activeTheme = $state<FwThemePreset>("default");
+  let activeLocale = $state<FwLocale>("en");
+  $effect(() => {
+    if (options.theme) activeTheme = options.theme;
+    if (options.locale) activeLocale = options.locale;
+  });
 
   // Sync locale state to i18n store and provide translator context
   $effect(() => {
@@ -221,6 +225,10 @@
     playbackQuality: null as any,
     subtitlesEnabled: false,
     toast: null as { message: string; timestamp: number } | null,
+    controllerSeekableStart: 0,
+    controllerLiveEdge: 0,
+    controllerCanSeek: false,
+    controllerHasAudio: true,
   });
 
   // Track if we've already attached to prevent double-attach race
@@ -667,8 +675,8 @@
               onStatsToggle={() => (isStatsOpen = !isStatsOpen)}
               isContentLive={storeState.isEffectivelyLive}
               onJumpToLive={() => playerStore?.getController()?.jumpToLive()}
-              controllerSeekableStart={playerStore?.getController()?.getSeekableStart()}
-              controllerLiveEdge={playerStore?.getController()?.getLiveEdge()}
+              controllerSeekableStart={storeState?.controllerSeekableStart ?? 0}
+              controllerLiveEdge={storeState?.controllerLiveEdge ?? 0}
               {activeLocale}
               onLocaleChange={(l) => {
                 activeLocale = l;

package/src/PlayerControls.svelte

@@ -149,40 +149,77 @@
 
   // Audio detection: trust MistServer metadata first, then DOM fallback
   $effect(() => {
-    // Primary: trust MistServer stream metadata (matches ddvtech embed approach)
-    if (mistStreamInfo?.hasAudio !== undefined) {
-      hasAudio = mistStreamInfo.hasAudio;
-      return;
-    }
-
     if (!video) {
       hasAudio = true;
       return;
     }
+    const currentVideo = video;
+
+    let boundStream: MediaStream | null = null;
+    let streamListener: (() => void) | null = null;
+
+    const unbindStream = () => {
+      if (boundStream && streamListener) {
+        boundStream.removeEventListener("addtrack", streamListener);
+        boundStream.removeEventListener("removetrack", streamListener);
+      }
+      boundStream = null;
+      streamListener = null;
+    };
 
     const checkAudio = () => {
-      if (video!.srcObject instanceof MediaStream) {
-        hasAudio = video!.srcObject.getAudioTracks().length > 0;
+      // Prefer actual MediaStream tracks over metadata to avoid phantom controls.
+      if (currentVideo.srcObject instanceof MediaStream) {
+        const stream = currentVideo.srcObject;
+        if (stream !== boundStream) {
+          unbindStream();
+          boundStream = stream;
+          streamListener = () => {
+            hasAudio = stream.getAudioTracks().length > 0;
+          };
+          stream.addEventListener("addtrack", streamListener);
+          stream.addEventListener("removetrack", streamListener);
+        }
+        hasAudio = stream.getAudioTracks().length > 0;
         return;
       }
-      const videoAny = video as any;
+
+      unbindStream();
+
+      // Fallback: metadata for non-MediaStream sources.
+      if (mistStreamInfo?.hasAudio !== undefined) {
+        hasAudio = mistStreamInfo.hasAudio;
+        return;
+      }
+
+      const videoAny = currentVideo as any;
       if (videoAny.audioTracks && videoAny.audioTracks.length !== undefined) {
         hasAudio = videoAny.audioTracks.length > 0;
         return;
       }
+
       hasAudio = true;
     };
+
     checkAudio();
-    video.addEventListener("loadedmetadata", checkAudio);
-    // Safari: audioTracks may be populated after loadedmetadata for HLS streams
-    const audioTracks = (video as any).audioTracks;
+    currentVideo.addEventListener("loadedmetadata", checkAudio);
+    currentVideo.addEventListener("loadeddata", checkAudio);
+    currentVideo.addEventListener("durationchange", checkAudio);
+
+    const audioTracks = (currentVideo as any).audioTracks;
     if (audioTracks?.addEventListener) {
       audioTracks.addEventListener("addtrack", checkAudio);
+      audioTracks.addEventListener("removetrack", checkAudio);
     }
+
     return () => {
-      video!.removeEventListener("loadedmetadata", checkAudio);
+      unbindStream();
+      currentVideo.removeEventListener("loadedmetadata", checkAudio);
+      currentVideo.removeEventListener("loadeddata", checkAudio);
+      currentVideo.removeEventListener("durationchange", checkAudio);
       if (audioTracks?.removeEventListener) {
         audioTracks.removeEventListener("addtrack", checkAudio);
+        audioTracks.removeEventListener("removetrack", checkAudio);
       }
     };
   });
@@ -263,11 +300,7 @@
   );
 
   let allowMediaStreamDvr = $derived(
-    isMediaStreamSource(video) &&
-      bufferWindowMs !== undefined &&
-      bufferWindowMs > 0 &&
-      sourceType !== "whep" &&
-      sourceType !== "webrtc"
+    isMediaStreamSource(video) && bufferWindowMs !== undefined && bufferWindowMs > 0
   );
 
   // Seekable range: prefer controller-derived values (same pattern as React/WC)

package/src/controls/SettingsMenu.svelte

@@ -101,7 +101,13 @@
 
   {#if isOpen}
     <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-    <div class="fw-settings-menu" role="menu" aria-label={t("settings")} onkeydown={handleKeyDown}>
+    <div
+      class="fw-settings-menu"
+      role="menu"
+      aria-label={t("settings")}
+      onkeydown={handleKeyDown}
+      tabindex="-1"
+    >
       {#if showModeSelector && onModeChange}
         <div class="fw-settings-section">
           <div class="fw-settings-label">{t("mode")}</div>

package/src/stores/playerController.ts

@@ -85,6 +85,14 @@ export interface PlayerControllerState {
   subtitlesEnabled: boolean;
   /** Toast message to display (auto-dismisses) */
   toast: { message: string; timestamp: number } | null;
+  /** Controller-derived seekable start (ms) — reactively updated via seekingStateChange */
+  controllerSeekableStart: number;
+  /** Controller-derived live edge (ms) — reactively updated via seekingStateChange */
+  controllerLiveEdge: number;
+  /** Controller-derived canSeek — reactively updated via seekingStateChange */
+  controllerCanSeek: boolean;
+  /** Controller-derived hasAudio — reactively updated via seekingStateChange */
+  controllerHasAudio: boolean;
 }
 
 export interface PlayerControllerStore extends Readable<PlayerControllerState> {
@@ -184,6 +192,10 @@ const initialState: PlayerControllerState = {
   playbackQuality: null,
   subtitlesEnabled: false,
   toast: null,
+  controllerSeekableStart: 0,
+  controllerLiveEdge: 0,
+  controllerCanSeek: false,
+  controllerHasAudio: true,
 };
 
 // ============================================================================
@@ -412,6 +424,18 @@ export function createPlayerControllerStore(
       })
     );
 
+    unsubscribers.push(
+      controller.on("seekingStateChange", (data) => {
+        store.update((prev) => ({
+          ...prev,
+          controllerSeekableStart: data.seekableStart,
+          controllerLiveEdge: data.liveEdge,
+          controllerCanSeek: data.canSeek,
+          controllerHasAudio: data.hasAudio,
+        }));
+      })
+    );
+
     // Error handling events - show toasts/modals
     unsubscribers.push(
       controller.on("protocolSwapped", (data) => {