@livepeer-frameworks/player-wc 0.1.8 → 0.2.1

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>
     `;

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

@@ -1,8 +1,17 @@
 import { LitElement, html, css } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
+import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
 
 @customElement("fw-loading-spinner")
 export class FwLoadingSpinner extends LitElement {
+  @property({ attribute: false }) translator?: TranslateFn;
+
+  private _defaultTranslator: TranslateFn = createTranslator({ locale: "en" });
+
+  private get _t(): TranslateFn {
+    return this.translator ?? this._defaultTranslator;
+  }
+
   static styles = css`
     :host {
       display: contents;
@@ -13,7 +22,7 @@ export class FwLoadingSpinner extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: rgb(0 0 0 / 0.4);
+      background: hsl(var(--fw-surface-deep, 235 21% 11%) / 0.85);
       backdrop-filter: blur(4px);
       z-index: 20;
     }
@@ -22,18 +31,18 @@ export class FwLoadingSpinner extends LitElement {
       align-items: center;
       gap: 0.75rem;
       border-radius: 0.5rem;
-      border: 1px solid rgb(255 255 255 / 0.1);
-      background: rgb(0 0 0 / 0.7);
+      border: 1px solid hsl(var(--fw-text, 229 73% 86%) / 0.1);
+      background: hsl(var(--fw-surface-deep, 235 21% 11%) / 0.9);
       padding: 0.75rem 1rem;
       font-size: 0.875rem;
-      color: white;
-      box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+      color: hsl(var(--fw-text, 229 73% 86%));
+      box-shadow: 0 10px 15px -3px hsl(var(--fw-shadow-color, 0 0% 0%) / 0.1);
     }
     .spinner {
       width: 1rem;
       height: 1rem;
-      border: 2px solid rgb(255 255 255 / 0.3);
-      border-top-color: white;
+      border: 2px solid hsl(var(--fw-text-faint, 228 15% 45%) / 0.3);
+      border-top-color: hsl(var(--fw-accent, 218 79% 73%));
       border-radius: 50%;
       animation: _fw-spin 1s linear infinite;
     }
@@ -49,7 +58,7 @@ export class FwLoadingSpinner extends LitElement {
       <div class="overlay" role="status" aria-live="polite">
         <div class="pill">
           <div class="spinner"></div>
-          <span>Buffering...</span>
+          <span>${this._t("buffering")}</span>
         </div>
       </div>
     `;

package/src/components/fw-player-controls.ts

@@ -3,7 +3,7 @@
  * Parity port of React/Svelte control behavior.
  */
 import { LitElement, html, css, nothing, type PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { sharedStyles } from "../styles/shared-styles.js";
 import { utilityStyles } from "../styles/utility-styles.js";
@@ -28,6 +28,7 @@ import {
   isMediaStreamSource,
   type MistStreamInfo,
   type PlaybackMode,
+  type FwLocale,
 } from "@livepeer-frameworks/player-core";
 import type { PlayerControllerHost } from "../controllers/player-controller-host.js";
 
@@ -51,10 +52,12 @@ export class FwPlayerControls extends LitElement {
   @property({ type: Boolean, attribute: "dev-mode" }) devMode = false;
   @property({ type: Boolean, attribute: "show-stats-button" }) showStatsButton = false;
   @property({ type: Boolean, attribute: "is-stats-open" }) isStatsOpen = false;
+  @property({ attribute: "active-locale" }) activeLocale?: FwLocale;
 
   @state() private _settingsOpen = false;
   @state() private _isNearLiveState = true;
   @state() private _buffered: TimeRanges | null = null;
+  @query(".fw-settings-anchor") private _settingsAnchorEl!: HTMLElement | null;
 
   private _boundVideo: HTMLVideoElement | null = null;
   private _onBufferedUpdate: (() => void) | null = null;
@@ -150,15 +153,15 @@ export class FwPlayerControls extends LitElement {
 
   private _onWindowClick = (event: MouseEvent): void => {
     const path = event.composedPath();
-    const insideControls = path.some((entry) => {
-      if (!(entry instanceof HTMLElement)) {
-        return false;
-      }
-      return (
-        entry.classList.contains("fw-settings-anchor") ||
-        entry.classList.contains("fw-settings-menu")
-      );
-    });
+    const anchor = this._settingsAnchorEl;
+    const insideControls =
+      anchor !== null &&
+      path.some((entry) => {
+        if (!(entry instanceof Node)) {
+          return false;
+        }
+        return anchor.contains(entry);
+      });
 
     if (!insideControls) {
       this._settingsOpen = false;
@@ -331,13 +334,13 @@ export class FwPlayerControls extends LitElement {
       seekableStart: context.seekableStart,
       unixoffset: context.mistStreamInfo?.unixoffset,
     });
+    const showTimeDisplay = !(context.isLive && timeDisplay === "LIVE");
 
     const liveButtonDisabled = !context.hasDvrWindow || this._isNearLiveState;
 
     return html`
       <div
         class=${classMap({
-          "fw-player-surface": true,
           "fw-controls-wrapper": true,
           "fw-controls-wrapper--visible": shouldShowControls,
           "fw-controls-wrapper--hidden": !shouldShowControls,
@@ -370,7 +373,7 @@ export class FwPlayerControls extends LitElement {
                   type="button"
                   class="fw-btn-flush"
                   ?disabled=${disabled}
-                  aria-label=${state.isPlaying ? "Pause" : "Play"}
+                  aria-label=${state.isPlaying ? this.pc.t("pause") : this.pc.t("play")}
                   @click=${() => this.pc.togglePlay()}
                 >
                   ${state.isPlaying ? pauseIcon(18) : playIcon(18)}
@@ -382,7 +385,7 @@ export class FwPlayerControls extends LitElement {
                         type="button"
                         class="fw-btn-flush hidden sm:flex"
                         ?disabled=${disabled}
-                        aria-label="Skip back 10 seconds"
+                        aria-label=${this.pc.t("skipBackward")}
                         @click=${() => this.pc.seekBy(-10)}
                       >
                         ${skipBackIcon(16)}
@@ -391,7 +394,7 @@ export class FwPlayerControls extends LitElement {
                         type="button"
                         class="fw-btn-flush hidden sm:flex"
                         ?disabled=${disabled}
-                        aria-label="Skip forward 10 seconds"
+                        aria-label=${this.pc.t("skipForward")}
                         @click=${() => this.pc.seekBy(10)}
                       >
                         ${skipForwardIcon(16)}
@@ -404,10 +407,13 @@ export class FwPlayerControls extends LitElement {
                 <fw-volume-control .pc=${this.pc}></fw-volume-control>
               </div>
 
-              <div class="fw-control-group">
-                <span class="fw-time-display">${timeDisplay}</span>
-              </div>
-
+              ${showTimeDisplay
+                ? html`
+                    <div class="fw-control-group">
+                      <span class="fw-time-display">${timeDisplay}</span>
+                    </div>
+                  `
+                : nothing}
               ${context.isLive
                 ? html`
                     <div class="fw-control-group">
@@ -421,12 +427,12 @@ export class FwPlayerControls extends LitElement {
                           "fw-live-badge--behind": !liveButtonDisabled,
                         })}
                         title=${!context.hasDvrWindow
-                          ? "Live only"
+                          ? this.pc.t("live")
                           : this._isNearLiveState
-                            ? "At live edge"
-                            : "Jump to live"}
+                            ? this.pc.t("live")
+                            : this.pc.t("live")}
                       >
-                        LIVE
+                        ${this.pc.t("live").toUpperCase()}
                         ${!this._isNearLiveState && context.hasDvrWindow
                           ? seekToLiveIcon(10)
                           : nothing}
@@ -446,8 +452,8 @@ export class FwPlayerControls extends LitElement {
                           "fw-btn-flush": true,
                           "fw-btn-flush--active": this.isStatsOpen,
                         })}
-                        aria-label="Toggle stats"
-                        title="Stats"
+                        aria-label=${this.pc.t("showStats")}
+                        title=${this.pc.t("showStats")}
                         @click=${() =>
                           this.dispatchEvent(
                             new CustomEvent("fw-stats-toggle", {
@@ -469,10 +475,11 @@ export class FwPlayerControls extends LitElement {
                     group: true,
                     "fw-btn-flush--active": this._settingsOpen,
                   })}
-                  aria-label="Settings"
-                  title="Settings"
+                  aria-label=${this.pc.t("settings")}
+                  title=${this.pc.t("settings")}
                   ?disabled=${disabled}
-                  @click=${() => {
+                  @click=${(event: MouseEvent) => {
+                    event.stopPropagation();
                     if (disabled) {
                       return;
                     }
@@ -489,6 +496,8 @@ export class FwPlayerControls extends LitElement {
                   .open=${this._settingsOpen}
                   .playbackMode=${this.playbackMode}
                   .isContentLive=${this.isContentLive}
+                  .activeLocale=${this.activeLocale}
+                  @click=${(event: MouseEvent) => event.stopPropagation()}
                   @fw-close=${() => {
                     this._settingsOpen = false;
                   }}
@@ -501,7 +510,9 @@ export class FwPlayerControls extends LitElement {
                   type="button"
                   class="fw-btn-flush"
                   ?disabled=${disabled}
-                  aria-label=${state.isFullscreen ? "Exit fullscreen" : "Fullscreen"}
+                  aria-label=${state.isFullscreen
+                    ? this.pc.t("exitFullscreen")
+                    : this.pc.t("fullscreen")}
                   @click=${() => this.pc.toggleFullscreen()}
                 >
                   ${state.isFullscreen ? fullscreenExitIcon(16) : fullscreenIcon(16)}