@livepeer-frameworks/player-svelte 0.1.2 → 0.1.3

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

@@ -467,7 +467,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 +491,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

@@ -619,7 +619,7 @@
     }
   }
 
-  .fw-player-root .idle-container {
+  .idle-container {
     position: absolute;
     inset: 0;
     z-index: 5;
@@ -644,7 +644,7 @@
     -webkit-user-select: none;
   }
 
-  .fw-player-root .bubble {
+  .bubble {
     position: absolute;
     border-radius: 50%;
     transition: opacity 1s ease-in-out;
@@ -654,7 +654,7 @@
             user-select: none;
   }
 
-  .fw-player-root .particle {
+  .particle {
     position: absolute;
     border-radius: 50%;
     opacity: 0;
@@ -665,7 +665,7 @@
             user-select: none;
   }
 
-  .fw-player-root .center-logo {
+  .center-logo {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -679,7 +679,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 +691,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 +714,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 +736,7 @@
             user-select: none;
   }
 
-  .fw-player-root .hitmarker {
+  .hitmarker {
     position: absolute;
     transform: translate(-50%, -50%);
     pointer-events: none;
@@ -745,7 +745,7 @@
     height: 40px;
   }
 
-  .fw-player-root .hitmarker-line {
+  .hitmarker-line {
     position: absolute;
     width: 12px;
     height: 3px;
@@ -754,31 +754,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 +792,7 @@
     text-align: center;
   }
 
-  .fw-player-root .status-indicator {
+  .status-indicator {
     display: flex;
     align-items: center;
     gap: 8px;
@@ -801,16 +801,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 +818,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 +837,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>

package/dist/LoadingScreen.svelte

@@ -537,7 +537,7 @@
     }
   }
 
-  .fw-player-root .loading-container {
+  .loading-container {
     position: relative;
     width: 100%;
     height: 100%;
@@ -563,7 +563,7 @@
     -webkit-user-select: none;
   }
 
-  .fw-player-root .bubble {
+  .bubble {
     position: absolute;
     border-radius: 50%;
     transition: opacity 1s ease-in-out;
@@ -573,7 +573,7 @@
             user-select: none;
   }
 
-  .fw-player-root .particle {
+  .particle {
     position: absolute;
     border-radius: 50%;
     opacity: 0;
@@ -584,7 +584,7 @@
             user-select: none;
   }
 
-  .fw-player-root .center-logo {
+  .center-logo {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -598,7 +598,7 @@
             user-select: none;
   }
 
-  .fw-player-root .logo-pulse {
+  .logo-pulse {
     position: absolute;
     border-radius: 50%;
     background: rgba(122, 162, 247, 0.15);
@@ -610,18 +610,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));
@@ -633,13 +633,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 .message {
+  .message {
     position: absolute;
     bottom: 20%;
     left: 50%;
@@ -657,7 +657,7 @@
     pointer-events: none;
   }
 
-  .fw-player-root .overlay-texture {
+  .overlay-texture {
     position: absolute;
     top: 0;
     left: 0;
@@ -673,7 +673,7 @@
             user-select: none;
   }
 
-  .fw-player-root .hitmarker {
+  .hitmarker {
     position: absolute;
     transform: translate(-50%, -50%);
     pointer-events: none;
@@ -682,7 +682,7 @@
     height: 40px;
   }
 
-  .fw-player-root .hitmarker-line {
+  .hitmarker-line {
     position: absolute;
     width: 12px;
     height: 3px;
@@ -691,25 +691,25 @@
     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;

package/dist/PlayerControls.svelte

@@ -602,6 +602,11 @@
           onfocusout={(e) => {
             if (!e.currentTarget.contains(e.relatedTarget as Node)) isVolumeFocused = false;
           }}
+          onpointerup={(e) => {
+            if (hasAudio && e.target === e.currentTarget) {
+              handleMute();
+            }
+          }}
         >
           <button
             type="button"

package/dist/StreamStateOverlay.svelte

@@ -177,7 +177,7 @@
 {/if}
 
 <style>
-  .fw-player-root .overlay-backdrop {
+  .overlay-backdrop {
     position: absolute;
     inset: 0;
     z-index: 20;
@@ -188,14 +188,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 +208,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 +230,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 +273,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 +296,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/stores/playerController.d.ts

@@ -98,6 +98,8 @@ export interface PlayerControllerStore extends Readable<PlayerControllerState> {
     seek: (time: number) => void;
     /** Seek by delta */
     seekBy: (delta: number) => void;
+    /** Jump to live edge (for live streams) */
+    jumpToLive: () => void;
     /** Set volume */
     setVolume: (volume: number) => void;
     /** Toggle mute */

package/dist/stores/playerController.js

@@ -267,6 +267,9 @@ export function createPlayerControllerStore(config) {
     function seekBy(delta) {
         controller?.seekBy(delta);
     }
+    function jumpToLive() {
+        controller?.jumpToLive();
+    }
     function setVolume(volume) {
         controller?.setVolume(volume);
     }
@@ -338,6 +341,7 @@ export function createPlayerControllerStore(config) {
         togglePlay,
         seek,
         seekBy,
+        jumpToLive,
         setVolume,
         toggleMute,
         toggleLoop,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer-frameworks/player-svelte",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "description": "Svelte 5 components for FrameWorks streaming player",
   "svelte": "./dist/index.js",
@@ -20,17 +20,9 @@
     },
     "./player.css": "./src/player.css"
   },
-  "scripts": {
-    "build": "svelte-package -i src -o dist",
-    "build:watch": "svelte-package -i src -o dist --watch",
-    "type-check": "svelte-check",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
-  },
   "dependencies": {
-    "@livepeer-frameworks/player-core": "workspace:*",
-    "bits-ui": "^2.15.5"
+    "bits-ui": "^2.15.5",
+    "@livepeer-frameworks/player-core": "0.1.3"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -55,5 +47,13 @@
     "video"
   ],
   "author": "Livepeer FrameWorks",
-  "license": "Unlicense"
-}
+  "license": "Unlicense",
+  "scripts": {
+    "build": "svelte-package -i src -o dist",
+    "build:watch": "svelte-package -i src -o dist --watch",
+    "type-check": "svelte-check",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  }
+}

package/src/DevModePanel.svelte

@@ -467,7 +467,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 +491,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/src/PlayerControls.svelte

@@ -602,6 +602,11 @@
           onfocusout={(e) => {
             if (!e.currentTarget.contains(e.relatedTarget as Node)) isVolumeFocused = false;
           }}
+          onpointerup={(e) => {
+            if (hasAudio && e.target === e.currentTarget) {
+              handleMute();
+            }
+          }}
         >
           <button
             type="button"

package/src/stores/playerController.ts

@@ -106,6 +106,8 @@ export interface PlayerControllerStore extends Readable<PlayerControllerState> {
   seek: (time: number) => void;
   /** Seek by delta */
   seekBy: (delta: number) => void;
+  /** Jump to live edge (for live streams) */
+  jumpToLive: () => void;
   /** Set volume */
   setVolume: (volume: number) => void;
   /** Toggle mute */
@@ -485,6 +487,10 @@ export function createPlayerControllerStore(
     controller?.seekBy(delta);
   }
 
+  function jumpToLive(): void {
+    controller?.jumpToLive();
+  }
+
   function setVolume(volume: number): void {
     controller?.setVolume(volume);
   }
@@ -579,6 +585,7 @@ export function createPlayerControllerStore(
     togglePlay,
     seek,
     seekBy,
+    jumpToLive,
     setVolume,
     toggleMute,
     toggleLoop,