@livepeer-frameworks/player-svelte 0.1.2 → 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;
@@ -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/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}
@@ -177,7 +189,7 @@
 {/if}
 
 <style>
-  .fw-player-root .overlay-backdrop {
+  .overlay-backdrop {
     position: absolute;
     inset: 0;
     z-index: 20;
@@ -188,14 +200,14 @@
     backdrop-filter: blur(4px);
   }
 
-  .fw-player-root .slab {
+  .slab {
     width: 280px;
     max-width: 90%;
     background-color: hsl(var(--tn-bg, 233 23% 17%) / 0.95);
     border: 1px solid hsl(var(--tn-border, 233 23% 25%) / 0.3);
   }
 
-  .fw-player-root .slab-header {
+  .slab-header {
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -208,15 +220,15 @@
     color: hsl(var(--tn-fg-dark, 233 23% 60%));
   }
 
-  .fw-player-root .slab-body {
+  .slab-body {
     padding: 1rem;
   }
 
-  .fw-player-root .slab-actions {
+  .slab-actions {
     border-top: 1px solid hsl(var(--tn-border, 233 23% 25%) / 0.3);
   }
 
-  .fw-player-root .btn-flush {
+  .btn-flush {
     width: 100%;
     padding: 0.625rem 1rem;
     background: none;
@@ -230,41 +242,41 @@
     transition: background-color 0.15s;
   }
 
-  .fw-player-root .btn-flush:hover {
+  .btn-flush:hover {
     background-color: hsl(var(--tn-bg-visual, 233 23% 20%) / 0.5);
   }
 
-  .fw-player-root .progress-bar {
+  .progress-bar {
     height: 0.375rem;
     width: 100%;
     overflow: hidden;
     background-color: hsl(var(--tn-bg-visual, 233 23% 20%));
   }
 
-  .fw-player-root .progress-fill {
+  .progress-fill {
     height: 100%;
     transition: width 0.3s ease;
     background-color: hsl(var(--tn-yellow, 40 70% 64%));
   }
 
-  .fw-player-root .icon {
+  .icon {
     width: 1.25rem;
     height: 1.25rem;
   }
 
-  .fw-player-root .icon-online {
+  .icon-online {
     color: hsl(var(--tn-green, 115 54% 57%));
   }
 
-  .fw-player-root .icon-offline {
+  .icon-offline {
     color: hsl(var(--tn-red, 355 68% 65%));
   }
 
-  .fw-player-root .icon-warning {
+  .icon-warning {
     color: hsl(var(--tn-yellow, 40 70% 64%));
   }
 
-  .fw-player-root .polling-indicator {
+  .polling-indicator {
     display: flex;
     align-items: center;
     gap: 0.5rem;
@@ -273,7 +285,7 @@
     color: hsl(var(--tn-fg-dark, 233 23% 60%));
   }
 
-  .fw-player-root .polling-dot {
+  .polling-dot {
     width: 0.375rem;
     height: 0.375rem;
     background-color: hsl(var(--tn-cyan, 192 78% 73%));
@@ -296,7 +308,7 @@
     }
   }
 
-  .fw-player-root .animate-spin {
+  .animate-spin {
     animation: spin 1s linear infinite;
   }
 </style>

package/dist/SubtitleRenderer.svelte

@@ -221,7 +221,7 @@
 {/if}
 
 <style>
-  .fw-player-root .subtitle-container {
+  .subtitle-container {
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
@@ -230,7 +230,7 @@
     pointer-events: none;
   }
 
-  .fw-player-root .subtitle-text {
+  .subtitle-text {
     display: inline-block;
     white-space: pre-wrap;
   }

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;