@livepeer-frameworks/player-svelte 0.1.2 → 0.2.1

package/src/PlayerControls.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
+  import { getContext } from "svelte";
+  import type { Readable } from "svelte/store";
   import {
     cn,
     globalPlayerManager,
+    createTranslator,
     type MistStreamInfo,
     type PlaybackMode,
+    type TranslateFn,
     // Seeking utilities from core
     SPEED_PRESETS,
     isMediaStreamSource,
@@ -15,7 +19,10 @@
     isLiveContent,
     // Time formatting from core
     formatTimeDisplay,
+    getAvailableLocales,
+    getLocaleDisplayName,
   } from "@livepeer-frameworks/player-core";
+  import type { FwLocale } from "@livepeer-frameworks/player-core";
   import SeekBar from "./SeekBar.svelte";
   import Slider from "./ui/Slider.svelte";
   import VolumeIcons from "./components/VolumeIcons.svelte";
@@ -31,6 +38,11 @@
     SeekToLiveIcon,
   } 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);
+
   // Props - aligned with React PlayerControls
   interface Props {
     currentTime: number;
@@ -49,6 +61,8 @@
     isContentLive?: boolean;
     /** Jump to live edge callback */
     onJumpToLive?: () => void;
+    activeLocale?: FwLocale;
+    onLocaleChange?: (locale: FwLocale) => void;
   }
 
   let {
@@ -66,6 +80,8 @@
     onStatsToggle = undefined,
     isContentLive = undefined,
     onJumpToLive = undefined,
+    activeLocale = undefined,
+    onLocaleChange = undefined,
   }: Props = $props();
 
   // Video element discovery
@@ -123,6 +139,46 @@
   let qualityValue = $state("auto");
   let captionValue = $state("none");
 
+  // 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 checkAudio = () => {
+      if (video!.srcObject instanceof MediaStream) {
+        hasAudio = video!.srcObject.getAudioTracks().length > 0;
+        return;
+      }
+      const videoAny = video 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;
+    if (audioTracks?.addEventListener) {
+      audioTracks.addEventListener("addtrack", checkAudio);
+    }
+    return () => {
+      video!.removeEventListener("loadedmetadata", checkAudio);
+      if (audioTracks?.removeEventListener) {
+        audioTracks.removeEventListener("addtrack", checkAudio);
+      }
+    };
+  });
+
   // Text tracks from player
   let textTracks = $derived.by(() => {
     return globalPlayerManager.getCurrentPlayer()?.getTextTracks?.() ?? [];
@@ -507,7 +563,7 @@
 
 <div
   class={cn(
-    "fw-player-surface fw-controls-wrapper",
+    "fw-controls-wrapper",
     isVisible ? "fw-controls-wrapper--visible" : "fw-controls-wrapper--hidden"
   )}
 >
@@ -551,7 +607,7 @@
           <button
             type="button"
             class="fw-btn-flush"
-            aria-label={isPlaying ? "Pause" : "Play"}
+            aria-label={isPlaying ? t("pause") : t("play")}
             onclick={handlePlayPause}
             {disabled}
           >
@@ -565,7 +621,7 @@
             <button
               type="button"
               class="fw-btn-flush hidden sm:flex"
-              aria-label="Skip back 10s"
+              aria-label={t("skipBackward")}
               onclick={handleSkipBack}
               {disabled}
             >
@@ -574,7 +630,7 @@
             <button
               type="button"
               class="fw-btn-flush hidden sm:flex"
-              aria-label="Skip forward 10s"
+              aria-label={t("skipForward")}
               onclick={handleSkipForward}
               {disabled}
             >
@@ -592,7 +648,7 @@
             !hasAudio && "fw-volume-group--disabled"
           )}
           role="group"
-          aria-label="Volume controls"
+          aria-label={t("volume")}
           onmouseenter={() => hasAudio && (isVolumeHovered = true)}
           onmouseleave={() => {
             isVolumeHovered = false;
@@ -602,12 +658,17 @@
           onfocusout={(e) => {
             if (!e.currentTarget.contains(e.relatedTarget as Node)) isVolumeFocused = false;
           }}
+          onpointerup={(e) => {
+            if (hasAudio && e.target === e.currentTarget) {
+              handleMute();
+            }
+          }}
         >
           <button
             type="button"
             class="fw-volume-btn"
-            aria-label={!hasAudio ? "No audio" : isMuted ? "Unmute" : "Mute"}
-            title={!hasAudio ? "No audio" : isMuted ? "Unmute" : "Mute"}
+            aria-label={!hasAudio ? t("muted") : isMuted ? t("unmute") : t("mute")}
+            title={!hasAudio ? t("muted") : isMuted ? t("unmute") : t("mute")}
             onclick={handleMute}
             disabled={!hasAudio}
           >
@@ -629,7 +690,7 @@
               oninput={handleVolumeChange}
               orientation="horizontal"
               className="w-full"
-              aria-label="Volume"
+              aria-label={t("volume")}
               disabled={!hasAudio}
             />
           </div>
@@ -651,13 +712,9 @@
                 "fw-live-badge",
                 !hasDvrWindow || isNearLiveState ? "fw-live-badge--active" : "fw-live-badge--behind"
               )}
-              title={!hasDvrWindow
-                ? "Live only"
-                : isNearLiveState
-                  ? "At live edge"
-                  : "Jump to live"}
+              title={t("live")}
             >
-              LIVE
+              {t("live").toUpperCase()}
               {#if !isNearLiveState && hasDvrWindow}
                 <SeekToLiveIcon size={10} />
               {/if}
@@ -673,8 +730,8 @@
             <button
               type="button"
               class={cn("fw-btn-flush", isStatsOpen && "fw-btn-flush--active")}
-              aria-label="Toggle stats"
-              title="Stats"
+              aria-label={t("showStats")}
+              title={t("showStats")}
               onclick={onStatsToggle}
               {disabled}
             >
@@ -686,8 +743,8 @@
           <button
             type="button"
             class={cn("fw-btn-flush group", showSettingsMenu && "fw-btn-flush--active")}
-            aria-label="Settings"
-            title="Settings"
+            aria-label={t("settings")}
+            title={t("settings")}
             onclick={() => (showSettingsMenu = !showSettingsMenu)}
             {disabled}
           >
@@ -695,11 +752,11 @@
           </button>
 
           {#if showSettingsMenu}
-            <div class="fw-player-surface fw-settings-menu">
+            <div class="fw-settings-menu">
               <!-- Playback Mode - only show for live content (not VOD/clips) -->
               {#if onModeChange && isContentLive !== false}
                 <div class="fw-settings-section">
-                  <div class="fw-settings-label">Mode</div>
+                  <div class="fw-settings-label">{t("mode")}</div>
                   <div class="fw-settings-options">
                     {#each ["auto", "low-latency", "quality"] as mode}
                       <button
@@ -713,7 +770,11 @@
                           showSettingsMenu = false;
                         }}
                       >
-                        {mode === "low-latency" ? "Fast" : mode === "quality" ? "Stable" : "Auto"}
+                        {mode === "low-latency"
+                          ? t("fast")
+                          : mode === "quality"
+                            ? t("stable")
+                            : t("auto")}
                       </button>
                     {/each}
                   </div>
@@ -723,7 +784,7 @@
               <!-- Speed (hidden for WebRTC MediaStream) -->
               {#if supportsPlaybackRate}
                 <div class="fw-settings-section">
-                  <div class="fw-settings-label">Speed</div>
+                  <div class="fw-settings-label">{t("speed")}</div>
                   <div class="fw-settings-options fw-settings-options--wrap">
                     {#each SPEED_PRESETS as rate}
                       <button
@@ -745,7 +806,7 @@
               <!-- Quality -->
               {#if qualities.length > 0}
                 <div class="fw-settings-section">
-                  <div class="fw-settings-label">Quality</div>
+                  <div class="fw-settings-label">{t("quality")}</div>
                   <div class="fw-settings-list">
                     <button
                       class={cn(
@@ -754,7 +815,7 @@
                       )}
                       onclick={() => handleQualityChange("auto")}
                     >
-                      Auto
+                      {t("auto")}
                     </button>
                     {#each qualities as q}
                       <button
@@ -774,7 +835,7 @@
               <!-- Captions -->
               {#if textTracks.length > 0}
                 <div class="fw-settings-section">
-                  <div class="fw-settings-label">Captions</div>
+                  <div class="fw-settings-label">{t("captions")}</div>
                   <div class="fw-settings-list">
                     <button
                       class={cn(
@@ -783,17 +844,38 @@
                       )}
                       onclick={() => handleCaptionChange("none")}
                     >
-                      Off
+                      {t("captionsOff")}
                     </button>
-                    {#each textTracks as t}
+                    {#each textTracks as tt}
                       <button
                         class={cn(
                           "fw-settings-list-item",
-                          captionValue === t.id && "fw-settings-list-item--active"
+                          captionValue === tt.id && "fw-settings-list-item--active"
+                        )}
+                        onclick={() => handleCaptionChange(tt.id)}
+                      >
+                        {tt.label || tt.id}
+                      </button>
+                    {/each}
+                  </div>
+                </div>
+              {/if}
+
+              <!-- Locale -->
+              {#if onLocaleChange}
+                <div class="fw-settings-section">
+                  <div class="fw-settings-label">{t("language")}</div>
+                  <div class="fw-settings-list">
+                    {#each getAvailableLocales() as loc}
+                      <button
+                        type="button"
+                        class={cn(
+                          "fw-settings-list-item",
+                          activeLocale === loc && "fw-settings-list-item--active"
                         )}
-                        onclick={() => handleCaptionChange(t.id)}
+                        onclick={() => onLocaleChange(loc)}
                       >
-                        {t.label || t.id}
+                        {getLocaleDisplayName(loc)}
                       </button>
                     {/each}
                   </div>
@@ -807,8 +889,8 @@
           <button
             type="button"
             class="fw-btn-flush"
-            aria-label="Toggle fullscreen"
-            title="Fullscreen"
+            aria-label={isFullscreen ? t("exitFullscreen") : t("fullscreen")}
+            title={t("fullscreen")}
             onclick={handleFullscreen}
             {disabled}
           >

package/src/StreamStateOverlay.svelte

@@ -10,6 +10,9 @@
   - Retry button for errors
 -->
 <script lang="ts">
+  import { getContext } from "svelte";
+  import type { Readable } from "svelte/store";
+  import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
   import type { StreamStatus } from "@livepeer-frameworks/player-core";
 
   interface Props {
@@ -36,6 +39,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);
+
   // Computed states
   let showRetry = $derived(status === "ERROR" || status === "INVALID" || status === "OFFLINE");
   let showProgress = $derived(status === "INITIALIZING" && percentage !== undefined);
@@ -143,7 +150,7 @@
           <p
             style="margin-top: 0.5rem; font-size: 0.75rem; color: hsl(var(--tn-fg-dark, 233 23% 60%));"
           >
-            The stream will start when the broadcaster goes live
+            {t("broadcasterGoLive")}
           </p>
         {/if}
 
@@ -151,7 +158,7 @@
           <p
             style="margin-top: 0.5rem; font-size: 0.75rem; color: hsl(var(--tn-fg-dark, 233 23% 60%));"
           >
-            Please wait while the stream prepares...
+            {t("streamPreparing")}
           </p>
         {/if}
 
@@ -159,7 +166,7 @@
         {#if !showRetry}
           <div class="polling-indicator">
             <span class="polling-dot"></span>
-            <span>Checking stream status...</span>
+            <span>{t("checkingStatus")}</span>
           </div>
         {/if}
       </div>
@@ -167,8 +174,13 @@
       <!-- Slab actions - flush retry button -->
       {#if showRetry && onRetry}
         <div class="slab-actions">
-          <button type="button" class="btn-flush" onclick={onRetry} aria-label="Retry connection">
-            Retry Connection
+          <button
+            type="button"
+            class="btn-flush"
+            onclick={onRetry}
+            aria-label={t("retryConnection")}
+          >
+            {t("retryConnection")}
           </button>
         </div>
       {/if}

package/src/controls/FullscreenButton.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  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);
+</script>
+
+<button
+  type="button"
+  class="fw-btn-flush"
+  aria-label={pc?.isFullscreen ? t("exitFullscreen") : t("fullscreen")}
+  aria-pressed={pc?.isFullscreen ?? false}
+  title={pc?.isFullscreen ? t("exitFullscreen") : t("fullscreen")}
+  onclick={() => pc?.toggleFullscreen()}
+>
+  {#if pc?.isFullscreen}
+    <FullscreenExitIcon size={16} />
+  {:else}
+    <FullscreenIcon size={16} />
+  {/if}
+</button>

package/src/controls/LiveBadge.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  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);
+</script>
+
+{#if pc?.isEffectivelyLive}
+  <button
+    type="button"
+    class="fw-live-badge fw-live-badge--active"
+    onclick={() => pc?.jumpToLive()}
+    aria-label={t("live")}
+  >
+    {t("live").toUpperCase()}
+    <SeekToLiveIcon size={10} />
+  </button>
+{/if}

package/src/controls/PlayButton.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  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);
+</script>
+
+<button
+  type="button"
+  class="fw-btn-flush"
+  aria-label={pc?.isPlaying ? t("pause") : t("play")}
+  aria-pressed={pc?.isPlaying ?? false}
+  title={pc?.isPlaying ? t("pause") : t("play")}
+  onclick={() => pc?.togglePlay()}
+>
+  {#if pc?.isPlaying}
+    <PauseIcon size={18} />
+  {:else}
+    <PlayIcon size={18} />
+  {/if}
+</button>

package/src/controls/SettingsMenu.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { Readable } from "svelte/store";
+  import { SettingsIcon } from "../icons";
+  import {
+    SPEED_PRESETS,
+    getAvailableLocales,
+    getLocaleDisplayName,
+    createTranslator,
+    type TranslateFn,
+  } from "@livepeer-frameworks/player-core";
+  import type { FwLocale } from "@livepeer-frameworks/player-core";
+
+  interface Props {
+    qualities?: Array<{ id: string; label: string; active?: boolean }>;
+    activeQuality?: string;
+    onSelectQuality?: (id: string) => void;
+    textTracks?: Array<{ id: string; label: string; active?: boolean }>;
+    activeCaption?: string;
+    onSelectCaption?: (id: string) => void;
+    playbackRate?: number;
+    onSpeedChange?: (rate: number) => void;
+    supportsSpeed?: boolean;
+    playbackMode?: "auto" | "low-latency" | "quality";
+    onModeChange?: (mode: "auto" | "low-latency" | "quality") => void;
+    showModeSelector?: boolean;
+    activeLocale?: FwLocale;
+    onLocaleChange?: (locale: FwLocale) => void;
+  }
+
+  let {
+    qualities: propQualities,
+    activeQuality,
+    onSelectQuality,
+    textTracks: propTextTracks,
+    activeCaption,
+    onSelectCaption,
+    playbackRate = 1,
+    onSpeedChange,
+    supportsSpeed = true,
+    playbackMode,
+    onModeChange,
+    showModeSelector = false,
+    activeLocale = undefined,
+    onLocaleChange = undefined,
+  }: Props = $props();
+
+  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);
+  let isOpen = $state(false);
+
+  let qualities = $derived(propQualities ?? controller?.getQualities?.() ?? []);
+  let qualityValue = $derived(activeQuality ?? qualities.find((q: any) => q.active)?.id ?? "auto");
+  let textTracks = $derived(propTextTracks ?? []);
+  let captionValue = $derived(activeCaption ?? textTracks.find((t: any) => t.active)?.id ?? "none");
+
+  function selectQuality(id: string) {
+    if (onSelectQuality) onSelectQuality(id);
+    else controller?.selectQuality?.(id);
+    isOpen = false;
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      isOpen = false;
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const menu = e.currentTarget as HTMLElement;
+      const items = menu.querySelectorAll<HTMLButtonElement>("button");
+      if (!items.length) return;
+      const current = Array.from(items).indexOf(document.activeElement as HTMLButtonElement);
+      const next =
+        e.key === "ArrowDown"
+          ? (current + 1) % items.length
+          : (current - 1 + items.length) % items.length;
+      items[next]?.focus();
+    }
+  }
+</script>
+
+<div class="fw-control-group" style="position: relative">
+  <button
+    type="button"
+    class="fw-btn-flush group"
+    class:fw-btn-flush--active={isOpen}
+    aria-label={t("settings")}
+    title={t("settings")}
+    onclick={() => (isOpen = !isOpen)}
+  >
+    <SettingsIcon size={16} />
+  </button>
+
+  {#if isOpen}
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <div class="fw-settings-menu" role="menu" aria-label={t("settings")} onkeydown={handleKeyDown}>
+      {#if showModeSelector && onModeChange}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("mode")}</div>
+          <div class="fw-settings-options">
+            {#each ["auto", "low-latency", "quality"] as mode}
+              <button
+                class="fw-settings-btn"
+                class:fw-settings-btn--active={playbackMode === mode}
+                onclick={() => {
+                  onModeChange?.(mode as any);
+                  isOpen = false;
+                }}
+              >
+                {mode === "low-latency" ? t("fast") : mode === "quality" ? t("stable") : t("auto")}
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if supportsSpeed}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("speed")}</div>
+          <div class="fw-settings-options fw-settings-options--wrap">
+            {#each SPEED_PRESETS as rate}
+              <button
+                class="fw-settings-btn"
+                class:fw-settings-btn--active={playbackRate === rate}
+                onclick={() => {
+                  onSpeedChange?.(rate);
+                  isOpen = false;
+                }}
+              >
+                {rate}x
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if qualities.length > 0}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("quality")}</div>
+          <div class="fw-settings-list">
+            <button
+              class="fw-settings-list-item"
+              class:fw-settings-list-item--active={qualityValue === "auto"}
+              onclick={() => selectQuality("auto")}>{t("auto")}</button
+            >
+            {#each qualities as q}
+              <button
+                class="fw-settings-list-item"
+                class:fw-settings-list-item--active={qualityValue === q.id}
+                onclick={() => selectQuality(q.id)}>{q.label}</button
+              >
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if textTracks.length > 0}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("captions")}</div>
+          <div class="fw-settings-list">
+            <button
+              class="fw-settings-list-item"
+              class:fw-settings-list-item--active={captionValue === "none"}
+              onclick={() => {
+                onSelectCaption?.("none");
+                isOpen = false;
+              }}>{t("captionsOff")}</button
+            >
+            {#each textTracks as tt}
+              <button
+                class="fw-settings-list-item"
+                class:fw-settings-list-item--active={captionValue === tt.id}
+                onclick={() => {
+                  onSelectCaption?.(tt.id);
+                  isOpen = false;
+                }}>{tt.label || tt.id}</button
+              >
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if onLocaleChange}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("language")}</div>
+          <div class="fw-settings-list">
+            {#each availableLocales as l}
+              <button
+                class="fw-settings-list-item"
+                class:fw-settings-list-item--active={activeLocale === l}
+                onclick={() => {
+                  onLocaleChange?.(l);
+                  isOpen = false;
+                }}>{getLocaleDisplayName(l)}</button
+              >
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>