@livepeer-frameworks/player-svelte 0.1.3 → 0.2.3

package/dist/DevModePanel.svelte

@@ -67,7 +67,7 @@
   let internalIsOpen = $state(false);
   let activeTab = $state<"config" | "stats">("config");
   let hoveredComboIndex = $state<number | null>(null);
-  let tooltipAbove = $state(false);
+  let tooltipPos = $state<{ top: number; left: number } | null>(null);
   let showDisabledPlayers = $state(false);
   let comboListRef: HTMLDivElement | undefined = $state();
 
@@ -163,14 +163,12 @@
 
   function handleComboHover(index: number, e: MouseEvent) {
     hoveredComboIndex = index;
-    if (comboListRef) {
-      const container = comboListRef;
-      const row = e.currentTarget as HTMLElement;
-      const containerRect = container.getBoundingClientRect();
-      const rowRect = row.getBoundingClientRect();
-      const relativePosition = (rowRect.top - containerRect.top) / containerRect.height;
-      tooltipAbove = relativePosition > 0.6;
-    }
+    const row = e.currentTarget as HTMLElement;
+    const rowRect = row.getBoundingClientRect();
+    tooltipPos = {
+      top: Math.max(8, Math.min(rowRect.top, window.innerHeight - 200)),
+      left: Math.max(8, rowRect.left - 228),
+    };
   }
 
   // Quality monitoring
@@ -377,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()}
@@ -387,7 +387,10 @@
                   class="fw-dev-combo"
                   role="listitem"
                   onmouseenter={(e) => handleComboHover(index, e)}
-                  onmouseleave={() => (hoveredComboIndex = null)}
+                  onmouseleave={() => {
+                    hoveredComboIndex = null;
+                    tooltipPos = null;
+                  }}
                 >
                   <button
                     type="button"
@@ -395,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 -->
@@ -405,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">
@@ -421,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>
@@ -430,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"
@@ -446,12 +449,10 @@
                   </button>
 
                   <!-- Tooltip -->
-                  {#if hoveredComboIndex === index}
+                  {#if hoveredComboIndex === index && tooltipPos}
                     <div
-                      class={cn(
-                        "fw-dev-tooltip",
-                        tooltipAbove ? "fw-dev-tooltip--above" : "fw-dev-tooltip--below"
-                      )}
+                      class="fw-dev-tooltip"
+                      style="top: {tooltipPos.top}px; left: {tooltipPos.left}px;"
                     >
                       <div class="fw-dev-tooltip-header">
                         <div class="fw-dev-tooltip-title">{combo.playerName}</div>
@@ -464,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

@@ -13,7 +13,10 @@
   - Status overlay at bottom
 -->
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
+  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";
   import DvdLogo from "./DvdLogo.svelte";
   import logomarkAsset from "./assets/logomark.svg";
@@ -26,14 +29,21 @@
     onRetry?: () => void;
   }
 
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
+
   let {
     status = "OFFLINE",
-    message = "Waiting for stream...",
+    message = undefined,
     percentage = undefined,
     error = undefined,
     onRetry = undefined,
   }: Props = $props();
 
+  let effectiveMessage = $derived(message ?? t("waitingForStream"));
+
   // Container ref for mouse tracking
   let containerRef: HTMLDivElement | undefined = $state();
 
@@ -316,7 +326,7 @@
   let _statusLabel = $derived(getStatusLabel(status));
   let showRetry = $derived((status === "ERROR" || status === "INVALID") && onRetry);
   let showProgress = $derived(status === "INITIALIZING" && percentage !== undefined);
-  let displayMessage = $derived(error || message);
+  let displayMessage = $derived(error || effectiveMessage);
   let isLoading = $derived(
     status === "INITIALIZING" || status === "BOOTING" || status === "WAITING_FOR_DATA" || !status
   );
@@ -522,7 +532,7 @@
 
     <!-- Retry button -->
     {#if showRetry}
-      <button type="button" class="retry-button" onclick={onRetry}> Retry </button>
+      <button type="button" class="retry-button" onclick={onRetry}> {t("retry")} </button>
     {/if}
   </div>
 

package/dist/LoadingScreen.svelte

@@ -12,16 +12,25 @@
   - Animated background gradient shifts
 -->
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
+  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 translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
+
   interface Props {
     message?: string;
     logoSrc?: string;
   }
 
-  let { message = "Waiting for source...", logoSrc }: Props = $props();
+  let { message = undefined, logoSrc }: Props = $props();
+  let effectiveMessage = $derived(message ?? t("waitingForSource"));
 
   // Use imported asset as default if logoSrc not provided
   let effectiveLogoSrc = $derived(logoSrc || logomarkAsset);
@@ -42,35 +51,10 @@
   let offset = $state({ x: 0, y: 0 });
   let isHovered = $state(false);
 
-  // Tokyo Night inspired pastel colors for bubbles
-  const bubbleColors = [
-    "rgba(122, 162, 247, 0.2)", // Terminal Blue
-    "rgba(187, 154, 247, 0.2)", // Terminal Magenta
-    "rgba(158, 206, 106, 0.2)", // Strings/CSS classes
-    "rgba(115, 218, 202, 0.2)", // Terminal Green
-    "rgba(125, 207, 255, 0.2)", // Terminal Cyan
-    "rgba(247, 118, 142, 0.2)", // Keywords/Terminal Red
-    "rgba(224, 175, 104, 0.2)", // Terminal Yellow
-    "rgba(42, 195, 222, 0.2)", // Language functions
-  ];
-
-  // Particle colors
-  const particleColors = [
-    "#7aa2f7", // Terminal Blue
-    "#bb9af7", // Terminal Magenta
-    "#9ece6a", // Strings/CSS classes
-    "#73daca", // Terminal Green
-    "#7dcfff", // Terminal Cyan
-    "#f7768e", // Keywords/Terminal Red
-    "#e0af68", // Terminal Yellow
-    "#2ac3de", // Language functions
-  ];
-
   // Generate random particles
-  const particles = Array.from({ length: 12 }, (_, i) => ({
+  const particles = Array.from({ length: 12 }, () => ({
     left: Math.random() * 100,
     size: Math.random() * 4 + 2,
-    color: particleColors[i % 8],
     duration: 8 + Math.random() * 4,
     delay: Math.random() * 8,
   }));
@@ -80,16 +64,14 @@
     position: { top: number; left: number };
     size: number;
     opacity: number;
-    color: string;
     timeoutId: ReturnType<typeof setTimeout> | null;
   }
 
   let bubbles = $state<BubbleState[]>(
-    Array.from({ length: 8 }, (_, i) => ({
+    Array.from({ length: 8 }, () => ({
       position: { top: Math.random() * 80 + 10, left: Math.random() * 80 + 10 },
       size: Math.random() * 60 + 30,
       opacity: 0,
-      color: bubbleColors[i % bubbleColors.length],
       timeoutId: null,
     }))
   );
@@ -361,7 +343,7 @@
   bind:this={containerRef}
   class="loading-container fw-player-root"
   role="status"
-  aria-label="Loading"
+  aria-label={t("loading")}
   onmousemove={handleMouseMove}
   onmouseleave={handleMouseLeave}
 >
@@ -383,7 +365,6 @@
         left: {particle.left}%;
         width: {particle.size}px;
         height: {particle.size}px;
-        background: {particle.color};
         animation-duration: {particle.duration}s;
         animation-delay: {particle.delay}s;
       "
@@ -399,7 +380,6 @@
         left: {bubble.position.left}%;
         width: {bubble.size}px;
         height: {bubble.size}px;
-        background: {bubble.color};
         opacity: {bubble.opacity};
       "
     ></div>
@@ -435,7 +415,7 @@
 
   <!-- Message -->
   <div class="message">
-    {message}
+    {effectiveMessage}
   </div>
 
   <!-- Subtle overlay texture -->
@@ -544,11 +524,11 @@
     min-height: 300px;
     background: linear-gradient(
       135deg,
-      hsl(var(--tn-bg-dark, 235 21% 11%)) 0%,
-      hsl(var(--tn-bg, 233 23% 17%)) 25%,
-      hsl(var(--tn-bg-dark, 235 21% 11%)) 50%,
-      hsl(var(--tn-bg, 233 23% 17%)) 75%,
-      hsl(var(--tn-bg-dark, 235 21% 11%)) 100%
+      hsl(var(--fw-surface-deep, 235 21% 11%)) 0%,
+      hsl(var(--fw-surface, 233 23% 17%)) 25%,
+      hsl(var(--fw-surface-deep, 235 21% 11%)) 50%,
+      hsl(var(--fw-surface, 233 23% 17%)) 75%,
+      hsl(var(--fw-surface-deep, 235 21% 11%)) 100%
     );
     background-size: 400% 400%;
     animation: gradientShift 16s ease-in-out infinite;
@@ -584,6 +564,56 @@
             user-select: none;
   }
 
+  .particle:nth-child(8n + 1) {
+    background: hsl(var(--fw-accent, 218 79% 73%));
+  }
+  .particle:nth-child(8n + 2) {
+    background: hsl(var(--fw-accent-secondary, 268 75% 76%));
+  }
+  .particle:nth-child(8n + 3) {
+    background: hsl(var(--fw-success, 97 52% 51%));
+  }
+  .particle:nth-child(8n + 4) {
+    background: hsl(var(--fw-info, 197 95% 74%));
+  }
+  .particle:nth-child(8n + 5) {
+    background: hsl(var(--fw-danger, 352 86% 71%));
+  }
+  .particle:nth-child(8n + 6) {
+    background: hsl(var(--fw-warning, 33 81% 64%));
+  }
+  .particle:nth-child(8n + 7) {
+    background: hsl(var(--fw-accent, 218 79% 73%) / 0.8);
+  }
+  .particle:nth-child(8n + 8) {
+    background: hsl(var(--fw-accent-secondary, 268 75% 76%) / 0.8);
+  }
+
+  .bubble:nth-child(8n + 1) {
+    background: hsl(var(--fw-accent, 218 79% 73%) / 0.2);
+  }
+  .bubble:nth-child(8n + 2) {
+    background: hsl(var(--fw-accent-secondary, 268 75% 76%) / 0.2);
+  }
+  .bubble:nth-child(8n + 3) {
+    background: hsl(var(--fw-success, 97 52% 51%) / 0.2);
+  }
+  .bubble:nth-child(8n + 4) {
+    background: hsl(var(--fw-info, 197 95% 74%) / 0.2);
+  }
+  .bubble:nth-child(8n + 5) {
+    background: hsl(var(--fw-danger, 352 86% 71%) / 0.2);
+  }
+  .bubble:nth-child(8n + 6) {
+    background: hsl(var(--fw-warning, 33 81% 64%) / 0.2);
+  }
+  .bubble:nth-child(8n + 7) {
+    background: hsl(var(--fw-accent, 218 79% 73%) / 0.15);
+  }
+  .bubble:nth-child(8n + 8) {
+    background: hsl(var(--fw-accent-secondary, 268 75% 76%) / 0.15);
+  }
+
   .center-logo {
     position: absolute;
     top: 50%;
@@ -601,7 +631,7 @@
   .logo-pulse {
     position: absolute;
     border-radius: 50%;
-    background: rgba(122, 162, 247, 0.15);
+    background: hsl(var(--fw-accent, 218 79% 73%) / 0.15);
     animation: logoPulse 3s ease-in-out infinite;
     -webkit-user-select: none;
        -moz-user-select: none;
@@ -624,7 +654,7 @@
   .logo-image {
     position: relative;
     z-index: 1;
-    filter: drop-shadow(0 4px 8px rgba(36, 40, 59, 0.3));
+    filter: drop-shadow(0 4px 8px hsl(var(--fw-surface-deep, 235 21% 11%) / 0.3));
     transition: all 0.3s ease-out;
     -webkit-user-select: none;
        -moz-user-select: none;
@@ -634,7 +664,7 @@
   }
 
   .logo-image.hovered {
-    filter: drop-shadow(0 6px 12px rgba(36, 40, 59, 0.4)) brightness(1.1);
+    filter: drop-shadow(0 6px 12px hsl(var(--fw-surface-deep, 235 21% 11%) / 0.4)) brightness(1.1);
     transform: scale(1.1);
     cursor: pointer;
   }
@@ -644,12 +674,12 @@
     bottom: 20%;
     left: 50%;
     transform: translateX(-50%);
-    color: #a9b1d6;
+    color: hsl(var(--fw-text-muted, 227 24% 74%));
     font-size: 16px;
     font-weight: 500;
     text-align: center;
     animation: fadeInOut 2s ease-in-out infinite;
-    text-shadow: 0 2px 4px rgba(36, 40, 59, 0.5);
+    text-shadow: 0 2px 4px hsl(var(--fw-surface-deep, 235 21% 11%) / 0.5);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     -webkit-user-select: none;
        -moz-user-select: none;
@@ -664,9 +694,21 @@
     right: 0;
     bottom: 0;
     background:
-      radial-gradient(circle at 20% 80%, rgba(122, 162, 247, 0.03) 0%, transparent 50%),
-      radial-gradient(circle at 80% 20%, rgba(187, 154, 247, 0.03) 0%, transparent 50%),
-      radial-gradient(circle at 40% 40%, rgba(158, 206, 106, 0.02) 0%, transparent 50%);
+      radial-gradient(
+        circle at 20% 80%,
+        hsl(var(--fw-accent, 218 79% 73%) / 0.03) 0%,
+        transparent 50%
+      ),
+      radial-gradient(
+        circle at 80% 20%,
+        hsl(var(--fw-accent-secondary, 268 75% 76%) / 0.03) 0%,
+        transparent 50%
+      ),
+      radial-gradient(
+        circle at 40% 40%,
+        hsl(var(--fw-success, 97 52% 51%) / 0.02) 0%,
+        transparent 50%
+      );
     pointer-events: none;
     -webkit-user-select: none;
        -moz-user-select: none;
@@ -686,8 +728,8 @@
     position: absolute;
     width: 12px;
     height: 3px;
-    background-color: #ffffff;
-    box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
+    background-color: hsl(var(--fw-text-bright, 220 13% 91%));
+    box-shadow: 0 0 8px hsl(var(--fw-text-bright, 220 13% 91%) / 0.8);
     border-radius: 1px;
   }