@livepeer-frameworks/player-svelte 0.1.2 → 0.2.1

package/LICENSE.md

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

package/README.md

@@ -2,7 +2,7 @@
 
 Svelte wrapper for the FrameWorks player. Resolves endpoints via Gateway or Mist and renders the best available player (WebCodecs, HLS, etc).
 
-**Docs:** `docs.frameworks.network`
+**Docs:** `logbook.frameworks.network`
 
 ## Install
 
@@ -35,7 +35,11 @@ Notes:
 ### Direct MistServer Node (mistUrl)
 
 ```svelte
-<Player contentType="live" contentId="pk_..." options={{ mistUrl: "https://edge.example.com" }} />
+<Player
+  contentType="live"
+  contentId="pk_..."
+  options={{ mistUrl: "https://edge-egress.example.com" }}
+/>
 ```
 
 ### Styles

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
@@ -387,7 +385,10 @@
                   class="fw-dev-combo"
                   role="listitem"
                   onmouseenter={(e) => handleComboHover(index, e)}
-                  onmouseleave={() => (hoveredComboIndex = null)}
+                  onmouseleave={() => {
+                    hoveredComboIndex = null;
+                    tooltipPos = null;
+                  }}
                 >
                   <button
                     type="button"
@@ -446,12 +447,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>
@@ -467,7 +466,8 @@
                       {#if combo.compatible && combo.scoreBreakdown}
                         <div class="fw-dev-tooltip-score">Score: {combo.score.toFixed(2)}</div>
                         <div class="fw-dev-tooltip-row">
-                          Tracks: <span class="fw-dev-tooltip-value"
+                          Tracks [{combo.scoreBreakdown.trackTypes.join(", ")}]:
+                          <span class="fw-dev-tooltip-value"
                             >{combo.scoreBreakdown.trackScore.toFixed(2)}</span
                           >
                           <span class="fw-dev-tooltip-weight"
@@ -490,6 +490,43 @@
                             >x{combo.scoreBreakdown.weights.source}</span
                           >
                         </div>
+                        {#if combo.scoreBreakdown.reliabilityScore !== undefined}
+                          <div class="fw-dev-tooltip-row">
+                            Reliability: <span class="fw-dev-tooltip-value"
+                              >{combo.scoreBreakdown.reliabilityScore.toFixed(2)}</span
+                            >
+                            <span class="fw-dev-tooltip-weight"
+                              >x{combo.scoreBreakdown.weights.reliability ?? 0}</span
+                            >
+                          </div>
+                        {/if}
+                        {#if combo.scoreBreakdown.modeBonus !== undefined && combo.scoreBreakdown.modeBonus !== 0}
+                          <div class="fw-dev-tooltip-row">
+                            Mode ({playbackMode}):
+                            <span class="fw-dev-tooltip-bonus"
+                              >+{combo.scoreBreakdown.modeBonus.toFixed(2)}</span
+                            >
+                            <span class="fw-dev-tooltip-weight"
+                              >x{combo.scoreBreakdown.weights.mode ?? 0}</span
+                            >
+                          </div>
+                        {/if}
+                        {#if combo.scoreBreakdown.routingBonus !== undefined && combo.scoreBreakdown.routingBonus !== 0}
+                          <div class="fw-dev-tooltip-row">
+                            Routing: <span
+                              class={combo.scoreBreakdown.routingBonus > 0
+                                ? "fw-dev-tooltip-bonus"
+                                : "fw-dev-tooltip-penalty"}
+                            >
+                              {combo.scoreBreakdown.routingBonus > 0
+                                ? "+"
+                                : ""}{combo.scoreBreakdown.routingBonus.toFixed(2)}
+                            </span>
+                            <span class="fw-dev-tooltip-weight"
+                              >x{combo.scoreBreakdown.weights.routing ?? 0}</span
+                            >
+                          </div>
+                        {/if}
                       {:else}
                         <div class="fw-dev-tooltip-error">
                           {combo.incompatibleReason || "Incompatible"}

package/dist/IdleScreen.svelte

@@ -13,7 +13,9 @@
   - Status overlay at bottom
 -->
 <script lang="ts">
-  import { onMount, onDestroy } from "svelte";
+  import { onMount, onDestroy, 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";
   import DvdLogo from "./DvdLogo.svelte";
   import logomarkAsset from "./assets/logomark.svg";
@@ -26,14 +28,20 @@
     onRetry?: () => void;
   }
 
+  const translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
+  const fallbackT = createTranslator({ locale: "en" });
+  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+
   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 +324,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 +530,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>
 
@@ -619,7 +627,7 @@
     }
   }
 
-  .fw-player-root .idle-container {
+  .idle-container {
     position: absolute;
     inset: 0;
     z-index: 5;
@@ -644,7 +652,7 @@
     -webkit-user-select: none;
   }
 
-  .fw-player-root .bubble {
+  .bubble {
     position: absolute;
     border-radius: 50%;
     transition: opacity 1s ease-in-out;
@@ -654,7 +662,7 @@
             user-select: none;
   }
 
-  .fw-player-root .particle {
+  .particle {
     position: absolute;
     border-radius: 50%;
     opacity: 0;
@@ -665,7 +673,7 @@
             user-select: none;
   }
 
-  .fw-player-root .center-logo {
+  .center-logo {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -679,7 +687,7 @@
             user-select: none;
   }
 
-  .fw-player-root .logo-pulse {
+  .logo-pulse {
     position: absolute;
     border-radius: 50%;
     background: rgba(122, 162, 247, 0.15);
@@ -691,18 +699,18 @@
     transition: transform 0.3s ease-out;
   }
 
-  .fw-player-root .logo-pulse.hovered {
+  .logo-pulse.hovered {
     animation: logoPulse 1s ease-in-out infinite;
     transform: scale(1.2);
   }
 
-  .fw-player-root .logo-button {
+  .logo-button {
     all: unset;
     cursor: pointer;
     display: block;
   }
 
-  .fw-player-root .logo-image {
+  .logo-image {
     position: relative;
     z-index: 1;
     filter: drop-shadow(0 4px 8px rgba(36, 40, 59, 0.3));
@@ -714,13 +722,13 @@
     -webkit-touch-callout: none;
   }
 
-  .fw-player-root .logo-image.hovered {
+  .logo-image.hovered {
     filter: drop-shadow(0 6px 12px rgba(36, 40, 59, 0.4)) brightness(1.1);
     transform: scale(1.1);
     cursor: pointer;
   }
 
-  .fw-player-root .overlay-texture {
+  .overlay-texture {
     position: absolute;
     top: 0;
     left: 0;
@@ -736,7 +744,7 @@
             user-select: none;
   }
 
-  .fw-player-root .hitmarker {
+  .hitmarker {
     position: absolute;
     transform: translate(-50%, -50%);
     pointer-events: none;
@@ -745,7 +753,7 @@
     height: 40px;
   }
 
-  .fw-player-root .hitmarker-line {
+  .hitmarker-line {
     position: absolute;
     width: 12px;
     height: 3px;
@@ -754,31 +762,31 @@
     border-radius: 1px;
   }
 
-  .fw-player-root .hitmarker-line.tl {
+  .hitmarker-line.tl {
     top: 25%;
     left: 25%;
     animation: hitmarkerFade45 0.6s ease-out forwards;
   }
 
-  .fw-player-root .hitmarker-line.tr {
+  .hitmarker-line.tr {
     top: 25%;
     left: 75%;
     animation: hitmarkerFadeNeg45 0.6s ease-out forwards;
   }
 
-  .fw-player-root .hitmarker-line.bl {
+  .hitmarker-line.bl {
     top: 75%;
     left: 25%;
     animation: hitmarkerFadeNeg45 0.6s ease-out forwards;
   }
 
-  .fw-player-root .hitmarker-line.br {
+  .hitmarker-line.br {
     top: 75%;
     left: 75%;
     animation: hitmarkerFade45 0.6s ease-out forwards;
   }
 
-  .fw-player-root .status-overlay {
+  .status-overlay {
     position: absolute;
     bottom: 16px;
     left: 50%;
@@ -792,7 +800,7 @@
     text-align: center;
   }
 
-  .fw-player-root .status-indicator {
+  .status-indicator {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -801,16 +809,16 @@
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   }
 
-  .fw-player-root .status-icon {
+  .status-icon {
     width: 20px;
     height: 20px;
   }
 
-  .fw-player-root .status-icon.spinning {
+  .status-icon.spinning {
     animation: spin 1s linear infinite;
   }
 
-  .fw-player-root .progress-bar {
+  .progress-bar {
     width: 160px;
     height: 4px;
     background: rgba(65, 72, 104, 0.4);
@@ -818,13 +826,13 @@
     overflow: hidden;
   }
 
-  .fw-player-root .progress-fill {
+  .progress-fill {
     height: 100%;
     background: hsl(var(--tn-cyan, 193 100% 75%));
     transition: width 0.3s ease-out;
   }
 
-  .fw-player-root .retry-button {
+  .retry-button {
     padding: 6px 16px;
     background: transparent;
     border: 1px solid rgba(122, 162, 247, 0.4);
@@ -837,7 +845,7 @@
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   }
 
-  .fw-player-root .retry-button:hover {
+  .retry-button:hover {
     background: rgba(122, 162, 247, 0.1);
   }
 </style>