@livepeer-frameworks/player-svelte 0.2.1 → 0.2.3

package/dist/DevModePanel.svelte

@@ -375,7 +375,9 @@
           {:else}
             {#each allCombinations as combo, index}
               {@const isCodecIncompat = (combo as any).codecIncompatible === true}
-              {@const shouldShow = combo.compatible || isCodecIncompat || showDisabledPlayers}
+              {@const isPartial = ((combo as any).missingTracks?.length ?? 0) > 0}
+              {@const isWarn = isCodecIncompat || isPartial}
+              {@const shouldShow = combo.compatible || isWarn || showDisabledPlayers}
               {@const isActive = activeComboIndex === index}
               {@const typeLabel =
                 SOURCE_TYPE_LABELS[combo.sourceType] || combo.sourceType.split("/").pop()}
@@ -396,8 +398,8 @@
                     class={cn(
                       "fw-dev-combo-btn",
                       isActive && "fw-dev-combo-btn--active",
-                      !combo.compatible && !isCodecIncompat && "fw-dev-combo-btn--disabled",
-                      isCodecIncompat && "fw-dev-combo-btn--codec-warn"
+                      !combo.compatible && !isWarn && "fw-dev-combo-btn--disabled",
+                      isWarn && "fw-dev-combo-btn--codec-warn"
                     )}
                   >
                     <!-- Rank -->
@@ -406,14 +408,14 @@
                         "fw-dev-combo-rank",
                         isActive
                           ? "fw-dev-combo-rank--active"
-                          : !combo.compatible && !isCodecIncompat
+                          : !combo.compatible && !isWarn
                             ? "fw-dev-combo-rank--disabled"
-                            : isCodecIncompat
+                            : isWarn
                               ? "fw-dev-combo-rank--warn"
                               : ""
                       )}
                     >
-                      {combo.compatible ? index + 1 : isCodecIncompat ? "⚠" : "—"}
+                      {combo.compatible && !isPartial ? index + 1 : isWarn ? "⚠" : "—"}
                     </span>
                     <!-- Player + Protocol -->
                     <span class="fw-dev-combo-name">
@@ -422,8 +424,8 @@
                       <span
                         class={cn(
                           "fw-dev-combo-type",
-                          isCodecIncompat && "fw-dev-combo-type--warn",
-                          !combo.compatible && !isCodecIncompat && "fw-dev-combo-type--disabled"
+                          isWarn && "fw-dev-combo-type--warn",
+                          !combo.compatible && !isWarn && "fw-dev-combo-type--disabled"
                         )}>{typeLabel}</span
                       >
                     </span>
@@ -431,9 +433,9 @@
                     <span
                       class={cn(
                         "fw-dev-combo-score",
-                        !combo.compatible && !isCodecIncompat
+                        !combo.compatible && !isWarn
                           ? "fw-dev-combo-score--disabled"
-                          : isCodecIncompat
+                          : isWarn
                             ? "fw-dev-combo-score--low"
                             : combo.score >= 2
                               ? "fw-dev-combo-score--high"
@@ -463,6 +465,14 @@
                           </div>
                         {/if}
                       </div>
+                      {#if combo.note}
+                        <div class="fw-dev-tooltip-note">{combo.note}</div>
+                      {/if}
+                      {#if isPartial}
+                        <div class="fw-dev-tooltip-note">
+                          No compatible {(combo as any).missingTracks.join(", ")} codec
+                        </div>
+                      {/if}
                       {#if combo.compatible && combo.scoreBreakdown}
                         <div class="fw-dev-tooltip-score">Score: {combo.score.toFixed(2)}</div>
                         <div class="fw-dev-tooltip-row">

package/dist/IdleScreen.svelte

@@ -14,6 +14,7 @@
 -->
 <script lang="ts">
   import { onMount, onDestroy, getContext } from "svelte";
+  import { readable } from "svelte/store";
   import type { Readable } from "svelte/store";
   import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
   import type { StreamStatus } from "@livepeer-frameworks/player-core";
@@ -28,9 +29,10 @@
     onRetry?: () => void;
   }
 
-  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
-  const fallbackT = createTranslator({ locale: "en" });
-  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
 
   let {
     status = "OFFLINE",

package/dist/LoadingScreen.svelte

@@ -13,14 +13,16 @@
 -->
 <script lang="ts">
   import { onMount, onDestroy, getContext } from "svelte";
+  import { readable } from "svelte/store";
   import type { Readable } from "svelte/store";
   import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
   import DvdLogo from "./DvdLogo.svelte";
   import logomarkAsset from "./assets/logomark.svg";
 
-  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
-  const fallbackT = createTranslator({ locale: "en" });
-  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
 
   interface Props {
     message?: string;

package/dist/Player.svelte

@@ -202,7 +202,7 @@
     isPlaying: false,
     isPaused: true,
     isBuffering: false,
-    isMuted: true,
+    isMuted: false,
     volume: 1,
     error: null as string | null,
     isPassiveError: false,
@@ -247,7 +247,7 @@
       mistUrl: options?.mistUrl,
       authToken: options?.authToken,
       autoplay: options?.autoplay !== false,
-      muted: options?.muted !== false,
+      muted: options?.muted === true,
       controls: options?.stockControls === true,
       poster: thumbnailUrl || undefined,
       debug: options?.debug,
@@ -587,7 +587,7 @@
                   >
                     {$translatorStore("retry")}
                   </button>
-                  {#if playerStore?.getController()?.canAttemptFallback()}
+                  {#if options?.devMode && playerStore?.getController()?.canAttemptFallback()}
                     <button
                       type="button"
                       class="fw-error-btn fw-error-btn--secondary"
@@ -600,17 +600,19 @@
                       {$translatorStore("tryNext")}
                     </button>
                   {/if}
-                  <button
-                    type="button"
-                    class="fw-error-btn fw-error-btn--secondary"
-                    onclick={() => {
-                      playerStore?.clearError();
-                      playerStore?.reload();
-                    }}
-                    aria-label={$translatorStore("reloadPlayer")}
-                  >
-                    {$translatorStore("reloadPlayer")}
-                  </button>
+                  {#if options?.devMode}
+                    <button
+                      type="button"
+                      class="fw-error-btn fw-error-btn--secondary"
+                      onclick={() => {
+                        playerStore?.clearError();
+                        playerStore?.reload();
+                      }}
+                      aria-label={$translatorStore("reloadPlayer")}
+                    >
+                      {$translatorStore("reloadPlayer")}
+                    </button>
+                  {/if}
                 </div>
               </div>
             </div>
@@ -665,6 +667,8 @@
               onStatsToggle={() => (isStatsOpen = !isStatsOpen)}
               isContentLive={storeState.isEffectivelyLive}
               onJumpToLive={() => playerStore?.getController()?.jumpToLive()}
+              controllerSeekableStart={playerStore?.getController()?.getSeekableStart()}
+              controllerLiveEdge={playerStore?.getController()?.getLiveEdge()}
               {activeLocale}
               onLocaleChange={(l) => {
                 activeLocale = l;

package/dist/PlayerControls.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getContext } from "svelte";
+  import { readable } from "svelte/store";
   import type { Readable } from "svelte/store";
   import {
     cn,
@@ -39,9 +40,10 @@
   } from "./icons";
 
   // i18n: get translator from context, fall back to default English
-  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
-  const fallbackT = createTranslator({ locale: "en" });
-  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
 
   // Props - aligned with React PlayerControls
   interface Props {
@@ -63,6 +65,10 @@
     onJumpToLive?: () => void;
     activeLocale?: FwLocale;
     onLocaleChange?: (locale: FwLocale) => void;
+    /** Controller-derived seekable start (ms) — preferred over player direct */
+    controllerSeekableStart?: number;
+    /** Controller-derived live edge (ms) — preferred over player direct */
+    controllerLiveEdge?: number;
   }
 
   let {
@@ -82,6 +88,8 @@
     onJumpToLive = undefined,
     activeLocale = undefined,
     onLocaleChange = undefined,
+    controllerSeekableStart = undefined,
+    controllerLiveEdge = undefined,
   }: Props = $props();
 
   // Video element discovery
@@ -224,16 +232,22 @@
   let isWebRTC = $derived(isMediaStreamSource(video));
   let supportsPlaybackRate = $derived(coreSupportsPlaybackRate(video));
   function deriveBufferWindowMs(
-    tracks?: Record<string, { firstms?: number; lastms?: number }>
+    tracks?: Record<string, { type?: string; firstms?: number; lastms?: number }>
   ): number | undefined {
     if (!tracks) return undefined;
-    const list = Object.values(tracks);
-    if (list.length === 0) return undefined;
-    const firstmsValues = list.map((t) => t.firstms).filter((v): v is number => v !== undefined);
-    const lastmsValues = list.map((t) => t.lastms).filter((v): v is number => v !== undefined);
+    const trackValues = Object.values(tracks).filter(
+      (t) => t.type !== "meta" && (t.lastms === undefined || t.lastms > 0)
+    );
+    if (trackValues.length === 0) return undefined;
+    const firstmsValues = trackValues
+      .map((t) => t.firstms)
+      .filter((v): v is number => v !== undefined);
+    const lastmsValues = trackValues
+      .map((t) => t.lastms)
+      .filter((v): v is number => v !== undefined);
     if (firstmsValues.length === 0 || lastmsValues.length === 0) return undefined;
-    const firstms = Math.max(...firstmsValues);
-    const lastms = Math.min(...lastmsValues);
+    const firstms = Math.min(...firstmsValues);
+    const lastms = Math.max(...lastmsValues);
     const window = lastms - firstms;
     if (!Number.isFinite(window) || window <= 0) return undefined;
     return window;
@@ -243,27 +257,11 @@
     mistStreamInfo?.meta?.buffer_window ??
       deriveBufferWindowMs(
         mistStreamInfo?.meta?.tracks as
-          | Record<string, { firstms?: number; lastms?: number }>
+          | Record<string, { type?: string; firstms?: number; lastms?: number }>
           | undefined
       )
   );
 
-  function getPlayerSeekableRange(): { seekableStart: number; liveEdge: number } | null {
-    const player = globalPlayerManager.getCurrentPlayer();
-    if (player && typeof (player as any).getSeekableRange === "function") {
-      const range = (player as any).getSeekableRange();
-      if (
-        range &&
-        Number.isFinite(range.start) &&
-        Number.isFinite(range.end) &&
-        range.end >= range.start
-      ) {
-        return { seekableStart: range.start, liveEdge: range.end };
-      }
-    }
-    return null;
-  }
-
   let allowMediaStreamDvr = $derived(
     isMediaStreamSource(video) &&
       bufferWindowMs !== undefined &&
@@ -272,19 +270,29 @@
       sourceType !== "webrtc"
   );
 
-  // Seekable range using core calculation (allow player override)
-  let seekableRange = $derived.by(
-    () =>
-      getPlayerSeekableRange() ??
-      calculateSeekableRange({
-        isLive,
-        video,
-        mistStreamInfo,
-        currentTime,
-        duration,
-        allowMediaStreamDvr,
-      })
+  // Seekable range: prefer controller-derived values (same pattern as React/WC)
+  let calcRange = $derived(
+    calculateSeekableRange({
+      isLive,
+      video,
+      mistStreamInfo,
+      currentTime,
+      duration,
+      allowMediaStreamDvr,
+    })
+  );
+  let useControllerRange = $derived(
+    Number.isFinite(controllerSeekableStart) &&
+      Number.isFinite(controllerLiveEdge) &&
+      (controllerLiveEdge as number) >= (controllerSeekableStart as number) &&
+      ((controllerLiveEdge as number) > 0 || (controllerSeekableStart as number) > 0)
   );
+  let seekableRange = $derived({
+    seekableStart: useControllerRange
+      ? (controllerSeekableStart as number)
+      : calcRange.seekableStart,
+    liveEdge: useControllerRange ? (controllerLiveEdge as number) : calcRange.liveEdge,
+  });
   let seekableStart = $derived(seekableRange.seekableStart);
   let liveEdge = $derived(seekableRange.liveEdge);
   let hasDvrWindow = $derived(
@@ -422,24 +430,24 @@
   }
 
   function handleSkipBack() {
-    const newTime = Math.max(0, currentTime - 10);
+    const newTime = Math.max(0, currentTime - 10000);
     if (onseek) {
       onseek(newTime);
       return;
     }
     const v = findVideoElement();
-    if (v) v.currentTime = newTime;
+    if (v) v.currentTime = newTime / 1000;
   }
 
   function handleSkipForward() {
-    const maxTime = Number.isFinite(duration) ? duration : currentTime + 10;
-    const newTime = Math.min(maxTime, currentTime + 10);
+    const maxTime = Number.isFinite(duration) ? duration : currentTime + 10000;
+    const newTime = Math.min(maxTime, currentTime + 10000);
     if (onseek) {
       onseek(newTime);
       return;
     }
     const v = findVideoElement();
-    if (v) v.currentTime = newTime;
+    if (v) v.currentTime = newTime / 1000;
   }
 
   function handleMute() {
@@ -592,7 +600,7 @@
             if (onseek) {
               onseek(time);
             } else if (video) {
-              video.currentTime = time;
+              video.currentTime = time / 1000;
             }
           }}
         />

package/dist/PlayerControls.svelte.d.ts

@@ -19,6 +19,10 @@ interface Props {
     onJumpToLive?: () => void;
     activeLocale?: FwLocale;
     onLocaleChange?: (locale: FwLocale) => void;
+    /** Controller-derived seekable start (ms) — preferred over player direct */
+    controllerSeekableStart?: number;
+    /** Controller-derived live edge (ms) — preferred over player direct */
+    controllerLiveEdge?: number;
 }
 declare const PlayerControls: import("svelte").Component<Props, {}, "">;
 type PlayerControls = ReturnType<typeof PlayerControls>;

package/dist/SeekBar.svelte

@@ -6,9 +6,9 @@
   import { cn } from "@livepeer-frameworks/player-core";
 
   interface Props {
-    /** Current playback time in seconds */
+    /** Current playback time in milliseconds */
     currentTime: number;
-    /** Total duration in seconds */
+    /** Total duration in milliseconds */
     duration: number;
     /** Buffered time ranges from video element */
     buffered?: TimeRanges;
@@ -20,9 +20,9 @@
     class?: string;
     /** Whether this is a live stream */
     isLive?: boolean;
-    /** For live: start of seekable DVR window (seconds) */
+    /** For live: start of seekable DVR window (ms) */
     seekableStart?: number;
-    /** For live: current live edge position (seconds) */
+    /** For live: current live edge position (ms) */
     liveEdge?: number;
     /** Defer seeking until drag release */
     commitOnRelease?: boolean;
@@ -80,8 +80,9 @@
 
     const segments: Array<{ startPercent: number; endPercent: number }> = [];
     for (let i = 0; i < buffered.length; i++) {
-      const start = buffered.start(i);
-      const end = buffered.end(i);
+      // buffered TimeRanges are in seconds (browser API), convert to ms
+      const start = buffered.start(i) * 1000;
+      const end = buffered.end(i) * 1000;
 
       const relativeStart = start - rangeStart;
       const relativeEnd = end - rangeStart;
@@ -95,9 +96,9 @@
   });
 
   // Format time as MM:SS or HH:MM:SS
-  function formatTime(seconds: number): string {
-    if (!Number.isFinite(seconds) || seconds < 0) return "0:00";
-    const total = Math.floor(seconds);
+  function formatTime(ms: number): string {
+    if (!Number.isFinite(ms) || ms < 0) return "0:00";
+    const total = Math.floor(ms / 1000);
     const hours = Math.floor(total / 3600);
     const minutes = Math.floor((total % 3600) / 60);
     const secs = total % 60;
@@ -108,10 +109,10 @@
   }
 
   // Format relative time for live streams
-  function formatLiveTime(seconds: number, edge: number): string {
-    const behindSeconds = edge - seconds;
-    if (behindSeconds < 1) return "LIVE";
-    const total = Math.floor(behindSeconds);
+  function formatLiveTime(ms: number, edgeMs: number): string {
+    const behindMs = edgeMs - ms;
+    if (behindMs < 1000) return "LIVE";
+    const total = Math.floor(behindMs / 1000);
     const hours = Math.floor(total / 3600);
     const minutes = Math.floor((total % 3600) / 60);
     const secs = total % 60;
@@ -218,7 +219,7 @@
   // Handle keyboard navigation for accessibility
   function handleKeyDown(e: KeyboardEvent) {
     if (disabled) return;
-    const step = e.shiftKey ? 10 : 5; // 5s default, 10s with shift
+    const step = e.shiftKey ? 10000 : 5000;
     const rangeEnd = isLive ? effectiveLiveEdge : duration;
     const rangeStart = isLive ? seekableStart : 0;
 

package/dist/SeekBar.svelte.d.ts

@@ -1,7 +1,7 @@
 interface Props {
-    /** Current playback time in seconds */
+    /** Current playback time in milliseconds */
     currentTime: number;
-    /** Total duration in seconds */
+    /** Total duration in milliseconds */
     duration: number;
     /** Buffered time ranges from video element */
     buffered?: TimeRanges;
@@ -13,9 +13,9 @@ interface Props {
     class?: string;
     /** Whether this is a live stream */
     isLive?: boolean;
-    /** For live: start of seekable DVR window (seconds) */
+    /** For live: start of seekable DVR window (ms) */
     seekableStart?: number;
-    /** For live: current live edge position (seconds) */
+    /** For live: current live edge position (ms) */
     liveEdge?: number;
     /** Defer seeking until drag release */
     commitOnRelease?: boolean;

package/dist/StreamStateOverlay.svelte

@@ -11,6 +11,7 @@
 -->
 <script lang="ts">
   import { getContext } from "svelte";
+  import { readable } from "svelte/store";
   import type { Readable } from "svelte/store";
   import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
   import type { StreamStatus } from "@livepeer-frameworks/player-core";
@@ -39,9 +40,10 @@
     class: className = "",
   }: Props = $props();
 
-  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
-  const fallbackT = createTranslator({ locale: "en" });
-  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
 
   // Computed states
   let showRetry = $derived(status === "ERROR" || status === "INVALID" || status === "OFFLINE");
@@ -136,7 +138,7 @@
         {#if showProgress && percentage !== undefined}
           <div style="margin-top: 0.75rem;">
             <div class="progress-bar">
-              <div class="progress-fill" style="width: {Math.min(100, percentage)};"></div>
+              <div class="progress-fill" style="width: {Math.min(100, percentage)}%;"></div>
             </div>
             <p
               style="margin-top: 0.375rem; font-size: 0.75rem; font-family: monospace; color: hsl(var(--tn-fg-dark, 233 23% 60%));"

package/dist/SubtitleRenderer.svelte

@@ -37,7 +37,7 @@
   }
 
   interface Props {
-    /** Current video playback time in seconds */
+    /** Current video playback time in milliseconds */
     currentTime: number;
     /** Whether subtitles are enabled */
     enabled?: boolean;
@@ -160,7 +160,7 @@
       return;
     }
 
-    const currentTimeMs = currentTime * 1000;
+    const currentTimeMs = currentTime;
     const activeCue = allCues.find((cue) => {
       const start = cue.startTime;
       const end = cue.endTime;
@@ -178,7 +178,7 @@
 
   // Clean up expired cues
   $effect(() => {
-    const currentTimeMs = currentTime * 1000;
+    const currentTimeMs = currentTime;
 
     liveCues = liveCues.filter((cue) => {
       const endTime = cue.endTime === Infinity ? cue.startTime + 10000 : cue.endTime;

package/dist/SubtitleRenderer.svelte.d.ts

@@ -21,7 +21,7 @@ interface SubtitleStyle {
     borderRadius?: string;
 }
 interface Props {
-    /** Current video playback time in seconds */
+    /** Current video playback time in milliseconds */
     currentTime: number;
     /** Whether subtitles are enabled */
     enabled?: boolean;

package/dist/controls/FullscreenButton.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import { getContext } from "svelte";
+  import { readable } from "svelte/store";
   import type { Readable } from "svelte/store";
   import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
   import { FullscreenIcon, FullscreenExitIcon } from "../icons";
 
   let pc: any = getContext("fw-player-controller");
-  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
-  const fallbackT = createTranslator({ locale: "en" });
-  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
 </script>
 
 <button

package/dist/controls/LiveBadge.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import { getContext } from "svelte";
+  import { readable } from "svelte/store";
   import type { Readable } from "svelte/store";
   import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
   import { SeekToLiveIcon } from "../icons";
 
   let pc: any = getContext("fw-player-controller");
-  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
-  const fallbackT = createTranslator({ locale: "en" });
-  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
 </script>
 
 {#if pc?.isEffectivelyLive}

package/dist/controls/PlayButton.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import { getContext } from "svelte";
+  import { readable } from "svelte/store";
   import type { Readable } from "svelte/store";
   import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
   import { PlayIcon, PauseIcon } from "../icons";
 
   let pc: any = getContext("fw-player-controller");
-  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
-  const fallbackT = createTranslator({ locale: "en" });
-  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
 </script>
 
 <button

package/dist/controls/SettingsMenu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getContext } from "svelte";
+  import { readable } from "svelte/store";
   import type { Readable } from "svelte/store";
   import { SettingsIcon } from "../icons";
   import {
@@ -48,9 +49,10 @@
   let availableLocales = getAvailableLocales();
 
   let controller: any = getContext("fw-player-controller");
-  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
-  const fallbackT = createTranslator({ locale: "en" });
-  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
   let isOpen = $state(false);
 
   let qualities = $derived(propQualities ?? controller?.getQualities?.() ?? []);

package/dist/controls/SkipButton.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getContext } from "svelte";
+  import { readable } from "svelte/store";
   import type { Readable } from "svelte/store";
   import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
   import { SkipBackIcon, SkipForwardIcon } from "../icons";
@@ -11,9 +12,10 @@
 
   let { direction, seconds = 10 }: Props = $props();
   let pc: any = getContext("fw-player-controller");
-  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
-  const fallbackT = createTranslator({ locale: "en" });
-  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
 
   let label = $derived(direction === "back" ? t("skipBackward") : t("skipForward"));
 </script>
@@ -23,7 +25,8 @@
   class="fw-btn-flush"
   aria-label={label}
   title={label}
-  onclick={() => pc?.seek((pc?.currentTime ?? 0) + (direction === "back" ? -seconds : seconds))}
+  onclick={() =>
+    pc?.seek((pc?.currentTime ?? 0) + (direction === "back" ? -seconds * 1000 : seconds * 1000))}
 >
   {#if direction === "back"}
     <SkipBackIcon size={16} />