@livepeer-frameworks/player-wc 0.1.9 → 0.2.1

package/src/components/controls/fw-skip-button.ts

@@ -0,0 +1,59 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
+
+@customElement("fw-skip-button")
+export class FwSkipButton extends LitElement {
+  @property({ type: String }) direction: "back" | "forward" = "forward";
+  @property({ type: Number }) seconds = 10;
+  private _player: any = null;
+
+  private get _t(): TranslateFn {
+    return this._player?.pc?.t ?? createTranslator({ locale: "en" });
+  }
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+  `;
+
+  private _resolvePlayer(): HTMLElement | null {
+    const forId = this.getAttribute("for");
+    if (forId) return document.getElementById(forId);
+    return this.closest("fw-player");
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._player = this._resolvePlayer();
+  }
+
+  private handleClick() {
+    const delta = this.direction === "back" ? -this.seconds : this.seconds;
+    this._player?.pc?.seekBy(delta);
+  }
+
+  render() {
+    const label = this.direction === "back" ? this._t("skipBackward") : this._t("skipForward");
+    const icon = this.direction === "back" ? "\u23EA" : "\u23E9";
+    const shortcut = this.direction === "back" ? "j" : "l";
+
+    return html`<button
+      type="button"
+      class="fw-btn-flush"
+      aria-label=${label}
+      title="${label} (${shortcut})"
+      @click=${this.handleClick}
+    >
+      ${icon} ${this.seconds}s
+    </button>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-skip-button": FwSkipButton;
+  }
+}

package/src/components/controls/fw-time-display.ts

@@ -0,0 +1,74 @@
+import { LitElement, html, css } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { formatTimeDisplay } from "@livepeer-frameworks/player-core";
+
+@customElement("fw-time-display")
+export class FwTimeDisplay extends LitElement {
+  @state() private display = "";
+  private _player: any = null;
+  private _cleanup: (() => void) | null = null;
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      font-variant-numeric: tabular-nums;
+    }
+    span {
+      white-space: nowrap;
+      font-size: 0.75rem;
+    }
+  `;
+
+  private _resolvePlayer(): HTMLElement | null {
+    const forId = this.getAttribute("for");
+    if (forId) return document.getElementById(forId);
+    return this.closest("fw-player");
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._player = this._resolvePlayer();
+    if (!this._player) return;
+    const pc = this._player.pc;
+    if (!pc) return;
+
+    this.updateDisplay();
+    const handler = () => this.updateDisplay();
+    this._player.addEventListener("fw-time-update", handler);
+    this._player.addEventListener("fw-ready", handler);
+    this._cleanup = () => {
+      this._player?.removeEventListener("fw-time-update", handler);
+      this._player?.removeEventListener("fw-ready", handler);
+    };
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._cleanup?.();
+    this._cleanup = null;
+  }
+
+  private updateDisplay() {
+    const pc = this._player?.pc;
+    if (!pc) return;
+    const s = pc.s;
+    this.display = formatTimeDisplay({
+      isLive: s.isEffectivelyLive,
+      currentTime: s.currentTime,
+      duration: s.duration,
+      liveEdge: pc.getLiveEdge?.() ?? s.duration,
+      seekableStart: pc.getSeekableStart?.() ?? 0,
+    });
+  }
+
+  render() {
+    return html`<span>${this.display}</span>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-time-display": FwTimeDisplay;
+  }
+}

package/src/components/controls/fw-volume-control.ts

@@ -0,0 +1,75 @@
+import { LitElement, html, css } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
+
+@customElement("fw-volume-button")
+export class FwVolumeControl extends LitElement {
+  @state() private isMuted = false;
+  private _player: any = null;
+  private _cleanup: (() => void) | null = null;
+
+  private get _t(): TranslateFn {
+    return this._player?.pc?.t ?? createTranslator({ locale: "en" });
+  }
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+  `;
+
+  private _resolvePlayer(): HTMLElement | null {
+    const forId = this.getAttribute("for");
+    if (forId) return document.getElementById(forId);
+    return this.closest("fw-player");
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._player = this._resolvePlayer();
+    if (!this._player) return;
+    const pc = this._player.pc;
+    if (!pc) return;
+
+    this.isMuted = pc.s.isMuted;
+    const handler = () => {
+      this.isMuted = this._player.pc.s.isMuted;
+    };
+    this._player.addEventListener("fw-volume-change", handler);
+    this._player.addEventListener("fw-ready", handler);
+    this._cleanup = () => {
+      this._player?.removeEventListener("fw-volume-change", handler);
+      this._player?.removeEventListener("fw-ready", handler);
+    };
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._cleanup?.();
+    this._cleanup = null;
+  }
+
+  private handleClick() {
+    this._player?.pc?.toggleMute();
+  }
+
+  render() {
+    return html`<button
+      type="button"
+      class="fw-btn-flush"
+      aria-label=${this.isMuted ? this._t("unmute") : this._t("mute")}
+      aria-pressed=${this.isMuted}
+      title=${this.isMuted ? this._t("unmute") : this._t("mute")}
+      @click=${this.handleClick}
+    >
+      ${this.isMuted ? "\uD83D\uDD07" : "\uD83D\uDD0A"}
+    </button>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-volume-button": FwVolumeControl;
+  }
+}

package/src/components/controls/index.ts

@@ -0,0 +1,6 @@
+export { FwPlayButton } from "./fw-play-button";
+export { FwSkipButton } from "./fw-skip-button";
+export { FwVolumeControl } from "./fw-volume-control";
+export { FwTimeDisplay } from "./fw-time-display";
+export { FwLiveBadge } from "./fw-live-badge";
+export { FwFullscreenButton } from "./fw-fullscreen-button";

package/src/components/fw-dev-mode-panel.ts

@@ -36,7 +36,7 @@ export class FwDevModePanel extends LitElement {
 
   @state() private _activeTab: "config" | "stats" = "config";
   @state() private _hoveredComboIndex: number | null = null;
-  @state() private _tooltipAbove = false;
+  @state() private _tooltipPos: { top: number; left: number } | null = null;
   @state() private _showDisabledPlayers = false;
 
   @state() private _playbackScore = 1;
@@ -219,18 +219,12 @@ export class FwDevModePanel extends LitElement {
 
   private _handleComboMouseEnter(index: number, event: MouseEvent): void {
     this._hoveredComboIndex = index;
-
-    const container = this.renderRoot.querySelector(".fw-dev-body") as HTMLElement | null;
-    if (!container) {
-      return;
-    }
-
     const row = event.currentTarget as HTMLElement;
-    const containerRect = container.getBoundingClientRect();
     const rowRect = row.getBoundingClientRect();
-    const relativePosition = (rowRect.top - containerRect.top) / containerRect.height;
-
-    this._tooltipAbove = relativePosition > 0.6;
+    this._tooltipPos = {
+      top: Math.max(8, Math.min(rowRect.top, window.innerHeight - 200)),
+      left: Math.max(8, rowRect.left - 228),
+    };
   }
 
   private _handleModeChange(mode: "auto" | "low-latency" | "quality"): void {
@@ -764,6 +758,7 @@ export class FwDevModePanel extends LitElement {
                         this._handleComboMouseEnter(index, event)}
                       @mouseleave=${() => {
                         this._hoveredComboIndex = null;
+                        this._tooltipPos = null;
                       }}
                     >
                       <button
@@ -804,14 +799,12 @@ export class FwDevModePanel extends LitElement {
                         >
                       </button>
 
-                      ${this._hoveredComboIndex === index
+                      ${this._hoveredComboIndex === index && this._tooltipPos
                         ? html`
                             <div
-                              class=${classMap({
-                                "fw-dev-tooltip": true,
-                                "fw-dev-tooltip--above": this._tooltipAbove,
-                                "fw-dev-tooltip--below": !this._tooltipAbove,
-                              })}
+                              class="fw-dev-tooltip"
+                              style="top: ${this._tooltipPos.top}px; left: ${this._tooltipPos
+                                .left}px;"
                             >
                               <div class="fw-dev-tooltip-header">
                                 <div class="fw-dev-tooltip-title">${combo.playerName}</div>

package/src/components/fw-error-overlay.ts

@@ -4,11 +4,19 @@ import { classMap } from "lit/directives/class-map.js";
 import { sharedStyles } from "../styles/shared-styles.js";
 import { utilityStyles } from "../styles/utility-styles.js";
 import { closeIcon } from "../icons/index.js";
+import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
 
 @customElement("fw-error-overlay")
 export class FwErrorOverlay extends LitElement {
   @property({ type: String }) error: string | null = null;
   @property({ type: Boolean, attribute: "is-passive" }) isPassive = false;
+  @property({ attribute: false }) translator?: TranslateFn;
+
+  private _defaultTranslator: TranslateFn = createTranslator({ locale: "en" });
+
+  private get _t(): TranslateFn {
+    return this.translator ?? this._defaultTranslator;
+  }
 
   static styles = [
     sharedStyles,
@@ -51,28 +59,28 @@ export class FwErrorOverlay extends LitElement {
                 "fw-error-title--warning": this.isPassive,
                 "fw-error-title--error": !this.isPassive,
               })}
-              >${this.isPassive ? "Warning" : "Error"}</span
+              >${this.isPassive ? this._t("warning") : this._t("error")}</span
             >
             <button
               type="button"
               class="fw-error-close"
               @click=${this._clearError}
-              aria-label="Dismiss"
+              aria-label=${this._t("dismiss")}
             >
               ${closeIcon()}
             </button>
           </div>
           <div class="fw-error-body">
-            <p class="fw-error-message">Playback issue</p>
+            <p class="fw-error-message">${this.error || this._t("playbackIssue")}</p>
           </div>
           <div class="fw-error-actions">
             <button
               type="button"
               class="fw-error-btn"
-              aria-label="Retry playback"
+              aria-label=${this._t("retry")}
               @click=${this._retry}
             >
-              Retry
+              ${this._t("retry")}
             </button>
           </div>
         </div>

package/src/components/fw-idle-screen.ts

@@ -4,6 +4,7 @@ import { sharedStyles } from "../styles/shared-styles.js";
 import { utilityStyles } from "../styles/utility-styles.js";
 import { LOGOMARK_DATA_URL } from "../constants/media-assets.js";
 import { playHitmarkerSound } from "./shared/hitmarker-audio.js";
+import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
 import "./fw-dvd-logo.js";
 
 interface ParticleState {
@@ -59,6 +60,13 @@ export class FwIdleScreen extends LitElement {
   @property({ type: String, attribute: "logo-src" }) logoSrc?: string;
   @property({ type: Boolean, attribute: "retry-enabled" }) retryEnabled = false;
   @property({ attribute: false }) onRetry?: () => void;
+  @property({ attribute: false }) translator?: TranslateFn;
+
+  private _defaultTranslator: TranslateFn = createTranslator({ locale: "en" });
+
+  private get _t(): TranslateFn {
+    return this.translator ?? this._defaultTranslator;
+  }
   @query(".idle-container") private _containerEl?: HTMLDivElement;
 
   @state() private _logoSize = 100;
@@ -552,7 +560,7 @@ export class FwIdleScreen extends LitElement {
   }
 
   private get _displayMessage() {
-    return this.error || this.message || "Waiting for stream...";
+    return this.error || this.message || this._t("waitingForStream");
   }
 
   private _renderStatusIcon() {
@@ -744,7 +752,7 @@ export class FwIdleScreen extends LitElement {
             : nothing}
           ${this._showRetry
             ? html`<button type="button" class="retry-btn" @click=${this._handleRetry}>
-                Retry
+                ${this._t("retry")}
               </button>`
             : nothing}
         </div>

package/src/components/fw-loading-screen.ts

@@ -4,12 +4,12 @@ import { sharedStyles } from "../styles/shared-styles.js";
 import { utilityStyles } from "../styles/utility-styles.js";
 import { LOGOMARK_DATA_URL } from "../constants/media-assets.js";
 import { playHitmarkerSound } from "./shared/hitmarker-audio.js";
+import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
 import "./fw-dvd-logo.js";
 
 interface ParticleState {
   left: number;
   size: number;
-  color: string;
   duration: number;
   delay: number;
 }
@@ -19,7 +19,6 @@ interface BubbleState {
   left: number;
   size: number;
   opacity: number;
-  color: string;
 }
 
 interface Hitmarker {
@@ -28,32 +27,13 @@ interface Hitmarker {
   y: number;
 }
 
-const BUBBLE_COLORS = [
-  "rgba(122, 162, 247, 0.2)",
-  "rgba(187, 154, 247, 0.2)",
-  "rgba(158, 206, 106, 0.2)",
-  "rgba(115, 218, 202, 0.2)",
-  "rgba(125, 207, 255, 0.2)",
-  "rgba(247, 118, 142, 0.2)",
-  "rgba(224, 175, 104, 0.2)",
-  "rgba(42, 195, 222, 0.2)",
-];
-
-const PARTICLE_COLORS = [
-  "#7aa2f7",
-  "#bb9af7",
-  "#9ece6a",
-  "#73daca",
-  "#7dcfff",
-  "#f7768e",
-  "#e0af68",
-  "#2ac3de",
-];
-
 @customElement("fw-loading-screen")
 export class FwLoadingScreen extends LitElement {
-  @property({ type: String }) message = "Waiting for source...";
+  @property({ type: String }) message?: string;
   @property({ type: String, attribute: "logo-src" }) logoSrc?: string;
+  @property({ attribute: false }) translator?: TranslateFn;
+
+  private _defaultTranslator: TranslateFn = createTranslator({ locale: "en" });
   @query(".loading-container") private _containerEl?: HTMLDivElement;
 
   @state() private _logoSize = 100;
@@ -85,11 +65,11 @@ export class FwLoadingScreen extends LitElement {
         user-select: none;
         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: _fw-gradient-shift 16s ease-in-out infinite;
@@ -115,6 +95,56 @@ export class FwLoadingScreen extends LitElement {
         transition: opacity 1s ease-in-out;
       }
 
+      .particle:nth-child(8n + 1) {
+        background: hsl(var(--fw-accent, 218 79% 73%));
+      }
+      .particle:nth-child(8n + 2) {
+        background: hsl(var(--fw-accent-secondary, 178 64% 63%));
+      }
+      .particle:nth-child(8n + 3) {
+        background: hsl(var(--fw-success, 95 53% 55%));
+      }
+      .particle:nth-child(8n + 4) {
+        background: hsl(var(--fw-info, 178 64% 63%));
+      }
+      .particle:nth-child(8n + 5) {
+        background: hsl(var(--fw-danger, 348 74% 64%));
+      }
+      .particle:nth-child(8n + 6) {
+        background: hsl(var(--fw-warning, 35 79% 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, 178 64% 63%) / 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, 178 64% 63%) / 0.2);
+      }
+      .bubble:nth-child(8n + 3) {
+        background: hsl(var(--fw-success, 95 53% 55%) / 0.2);
+      }
+      .bubble:nth-child(8n + 4) {
+        background: hsl(var(--fw-info, 178 64% 63%) / 0.2);
+      }
+      .bubble:nth-child(8n + 5) {
+        background: hsl(var(--fw-danger, 348 74% 64%) / 0.2);
+      }
+      .bubble:nth-child(8n + 6) {
+        background: hsl(var(--fw-warning, 35 79% 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, 178 64% 63%) / 0.15);
+      }
+
       .center-logo {
         position: absolute;
         top: 50%;
@@ -127,7 +157,7 @@ export class FwLoadingScreen extends LitElement {
       .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: _fw-logo-pulse 3s ease-in-out infinite;
         pointer-events: none;
       }
@@ -156,7 +186,8 @@ export class FwLoadingScreen extends LitElement {
 
       .logo-mark.hovered {
         transform: scale(1.1);
-        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);
       }
 
       .message {
@@ -165,11 +196,11 @@ export class FwLoadingScreen extends LitElement {
         left: 50%;
         transform: translateX(-50%);
         z-index: 8;
-        color: #a9b1d6;
+        color: hsl(var(--fw-text-muted, 224 16% 53%));
         font-size: 16px;
         font-weight: 500;
         text-align: center;
-        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);
         animation: _fw-fade-in-out 2s ease-in-out infinite;
         pointer-events: none;
       }
@@ -179,9 +210,21 @@ export class FwLoadingScreen extends LitElement {
         inset: 0;
         pointer-events: none;
         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, 178 64% 63%) / 0.03) 0%,
+            transparent 50%
+          ),
+          radial-gradient(
+            circle at 40% 40%,
+            hsl(var(--fw-success, 95 53% 55%) / 0.02) 0%,
+            transparent 50%
+          );
       }
 
       .hitmarker {
@@ -197,8 +240,8 @@ export class FwLoadingScreen extends LitElement {
         position: absolute;
         width: 12px;
         height: 3px;
-        background-color: #fff;
-        box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
+        background-color: hsl(var(--fw-text-bright, 0 0% 100%));
+        box-shadow: 0 0 8px hsl(var(--fw-text-bright, 0 0% 100%) / 0.8);
         border-radius: 1px;
       }
 
@@ -331,22 +374,20 @@ export class FwLoadingScreen extends LitElement {
   }
 
   private _createParticles(): ParticleState[] {
-    return Array.from({ length: 12 }, (_, index) => ({
+    return Array.from({ length: 12 }, () => ({
       left: Math.random() * 100,
       size: Math.random() * 4 + 2,
-      color: PARTICLE_COLORS[index % PARTICLE_COLORS.length],
       duration: 8 + Math.random() * 4,
       delay: Math.random() * 8,
     }));
   }
 
   private _createBubbles(): BubbleState[] {
-    return Array.from({ length: 8 }, (_, index) => ({
+    return Array.from({ length: 8 }, () => ({
       top: Math.random() * 80 + 10,
       left: Math.random() * 80 + 10,
       size: Math.random() * 60 + 30,
       opacity: 0,
-      color: BUBBLE_COLORS[index % BUBBLE_COLORS.length],
     }));
   }
 
@@ -449,8 +490,13 @@ export class FwLoadingScreen extends LitElement {
     }, 600);
   };
 
+  private get _t(): TranslateFn {
+    return this.translator ?? this._defaultTranslator;
+  }
+
   protected render() {
     const logoSrc = this.logoSrc || LOGOMARK_DATA_URL;
+    const displayMessage = this.message ?? this._t("waitingForSource");
     return html`
       <div
         class="loading-container fw-player-root"
@@ -477,7 +523,6 @@ export class FwLoadingScreen extends LitElement {
                   left:${particle.left}%;
                   width:${particle.size}px;
                   height:${particle.size}px;
-                  background:${particle.color};
                   animation-duration:${particle.duration}s;
                   animation-delay:${particle.delay}s;
                 "
@@ -496,7 +541,6 @@ export class FwLoadingScreen extends LitElement {
                   left:${bubble.left}%;
                   width:${bubble.size}px;
                   height:${bubble.size}px;
-                  background:${bubble.color};
                   opacity:${bubble.opacity};
                 "
               ></div>
@@ -526,7 +570,7 @@ export class FwLoadingScreen extends LitElement {
 
         <fw-dvd-logo .parentRef=${this._containerEl ?? null} .scale=${0.08}></fw-dvd-logo>
 
-        <div class="message">${this.message}</div>
+        <div class="message">${displayMessage}</div>
         <div class="overlay-texture"></div>
       </div>
     `;