@livepeer-frameworks/player-svelte 0.1.3 → 0.2.1

package/dist/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;
@@ -611,8 +667,8 @@
           <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}
           >
@@ -634,7 +690,7 @@
               oninput={handleVolumeChange}
               orientation="horizontal"
               className="w-full"
-              aria-label="Volume"
+              aria-label={t("volume")}
               disabled={!hasAudio}
             />
           </div>
@@ -656,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}
@@ -678,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}
             >
@@ -691,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}
           >
@@ -700,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
@@ -718,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>
@@ -728,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
@@ -750,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(
@@ -759,7 +815,7 @@
                       )}
                       onclick={() => handleQualityChange("auto")}
                     >
-                      Auto
+                      {t("auto")}
                     </button>
                     {#each qualities as q}
                       <button
@@ -779,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(
@@ -788,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 === 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",
-                          captionValue === t.id && "fw-settings-list-item--active"
+                          activeLocale === loc && "fw-settings-list-item--active"
                         )}
-                        onclick={() => handleCaptionChange(t.id)}
+                        onclick={() => onLocaleChange(loc)}
                       >
-                        {t.label || t.id}
+                        {getLocaleDisplayName(loc)}
                       </button>
                     {/each}
                   </div>
@@ -812,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/dist/PlayerControls.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type MistStreamInfo, type PlaybackMode } from "@livepeer-frameworks/player-core";
+import type { FwLocale } from "@livepeer-frameworks/player-core";
 interface Props {
     currentTime: number;
     duration: number;
@@ -16,6 +17,8 @@ interface Props {
     isContentLive?: boolean;
     /** Jump to live edge callback */
     onJumpToLive?: () => void;
+    activeLocale?: FwLocale;
+    onLocaleChange?: (locale: FwLocale) => void;
 }
 declare const PlayerControls: import("svelte").Component<Props, {}, "">;
 type PlayerControls = ReturnType<typeof PlayerControls>;

package/dist/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/dist/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/dist/controls/FullscreenButton.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const FullscreenButton: import("svelte").Component<Record<string, never>, {}, "">;
+type FullscreenButton = ReturnType<typeof FullscreenButton>;
+export default FullscreenButton;

package/dist/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/dist/controls/LiveBadge.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const LiveBadge: import("svelte").Component<Record<string, never>, {}, "">;
+type LiveBadge = ReturnType<typeof LiveBadge>;
+export default LiveBadge;

package/dist/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/dist/controls/PlayButton.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const PlayButton: import("svelte").Component<Record<string, never>, {}, "">;
+type PlayButton = ReturnType<typeof PlayButton>;
+export default PlayButton;