@livepeer-frameworks/player-wc 0.1.9 → 0.2.1

package/src/components/fw-settings-menu.ts

@@ -9,8 +9,10 @@ import { utilityStyles } from "../styles/utility-styles.js";
 import {
   SPEED_PRESETS,
   supportsPlaybackRate as coreSupportsPlaybackRate,
+  getAvailableLocales,
+  getLocaleDisplayName,
 } from "@livepeer-frameworks/player-core";
-import type { PlaybackMode } from "@livepeer-frameworks/player-core";
+import type { PlaybackMode, FwLocale } from "@livepeer-frameworks/player-core";
 import type { PlayerControllerHost } from "../controllers/player-controller-host.js";
 
 @customElement("fw-settings-menu")
@@ -23,6 +25,7 @@ export class FwSettingsMenu extends LitElement {
   @property({ type: String, attribute: "quality-value" }) qualityValue?: string;
   @property({ type: String, attribute: "caption-value" }) captionValue?: string;
   @property({ type: Boolean, attribute: "supports-playback-rate" }) supportsPlaybackRate?: boolean;
+  @property({ attribute: "active-locale" }) activeLocale?: FwLocale;
 
   @state() private _playbackRate = 1;
 
@@ -109,6 +112,16 @@ export class FwSettingsMenu extends LitElement {
     this._close();
   }
 
+  private _handleLocaleChange(locale: FwLocale): void {
+    this.dispatchEvent(
+      new CustomEvent("fw-locale-change", {
+        detail: { locale },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   private _deriveFallbackQualities(): Array<{
     id: string;
     label: string;
@@ -166,11 +179,11 @@ export class FwSettingsMenu extends LitElement {
       this.supportsPlaybackRate ?? coreSupportsPlaybackRate(state.videoElement);
 
     return html`
-      <div class="fw-player-surface fw-settings-menu" role="menu" aria-label="Player settings">
+      <div class="fw-settings-menu" role="menu" aria-label=${this.pc.t("settings")}>
         ${this.isContentLive
           ? html`
               <div class="fw-settings-section">
-                <div class="fw-settings-label">Mode</div>
+                <div class="fw-settings-label">${this.pc.t("mode")}</div>
                 <div class="fw-settings-options">
                   ${(["auto", "low-latency", "quality"] as const).map(
                     (mode) => html`
@@ -182,7 +195,11 @@ export class FwSettingsMenu extends LitElement {
                         })}
                         @click=${() => this._handleModeChange(mode)}
                       >
-                        ${mode === "low-latency" ? "Fast" : mode === "quality" ? "Stable" : "Auto"}
+                        ${mode === "low-latency"
+                          ? this.pc.t("fast")
+                          : mode === "quality"
+                            ? this.pc.t("stable")
+                            : this.pc.t("auto")}
                       </button>
                     `
                   )}
@@ -193,7 +210,7 @@ export class FwSettingsMenu extends LitElement {
         ${supportsPlaybackRate
           ? html`
               <div class="fw-settings-section">
-                <div class="fw-settings-label">Speed</div>
+                <div class="fw-settings-label">${this.pc.t("speed")}</div>
                 <div class="fw-settings-options fw-settings-options--wrap">
                   ${SPEED_PRESETS.map(
                     (rate) => html`
@@ -216,7 +233,7 @@ export class FwSettingsMenu extends LitElement {
         ${qualities.length > 0
           ? html`
               <div class="fw-settings-section">
-                <div class="fw-settings-label">Quality</div>
+                <div class="fw-settings-label">${this.pc.t("quality")}</div>
                 <div class="fw-settings-list">
                   <button
                     type="button"
@@ -226,7 +243,7 @@ export class FwSettingsMenu extends LitElement {
                     })}
                     @click=${() => this._handleQualityChange("auto")}
                   >
-                    Auto
+                    ${this.pc.t("auto")}
                   </button>
                   ${qualities.map(
                     (quality) => html`
@@ -249,7 +266,7 @@ export class FwSettingsMenu extends LitElement {
         ${textTracks.length > 0
           ? html`
               <div class="fw-settings-section">
-                <div class="fw-settings-label">Captions</div>
+                <div class="fw-settings-label">${this.pc.t("captions")}</div>
                 <div class="fw-settings-list">
                   <button
                     type="button"
@@ -259,7 +276,7 @@ export class FwSettingsMenu extends LitElement {
                     })}
                     @click=${() => this._handleCaptionChange("none")}
                   >
-                    Off
+                    ${this.pc.t("captionsOff")}
                   </button>
                   ${textTracks.map(
                     (track) => html`
@@ -279,6 +296,29 @@ export class FwSettingsMenu extends LitElement {
               </div>
             `
           : nothing}
+        ${this.activeLocale !== undefined
+          ? html`
+              <div class="fw-settings-section">
+                <div class="fw-settings-label">${this.pc.t("language")}</div>
+                <div class="fw-settings-list">
+                  ${getAvailableLocales().map(
+                    (loc) => html`
+                      <button
+                        type="button"
+                        class=${classMap({
+                          "fw-settings-list-item": true,
+                          "fw-settings-list-item--active": this.activeLocale === loc,
+                        })}
+                        @click=${() => this._handleLocaleChange(loc)}
+                      >
+                        ${getLocaleDisplayName(loc)}
+                      </button>
+                    `
+                  )}
+                </div>
+              </div>
+            `
+          : nothing}
       </div>
     `;
   }

package/src/components/fw-stream-state-overlay.ts

@@ -1,6 +1,7 @@
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import type { StreamStatus } from "@livepeer-frameworks/player-core";
+import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
 import { sharedStyles } from "../styles/shared-styles.js";
 
 @customElement("fw-stream-state-overlay")
@@ -11,6 +12,13 @@ export class FwStreamStateOverlay extends LitElement {
   @property({ type: Boolean }) visible = true;
   @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;
+  }
 
   static styles = [
     sharedStyles,
@@ -294,15 +302,15 @@ export class FwStreamStateOverlay extends LitElement {
                 `
               : nothing}
             ${this.status === "OFFLINE"
-              ? html`<p class="hint">The stream will start when the broadcaster goes live</p>`
+              ? html`<p class="hint">${this._t("broadcasterGoLive")}</p>`
               : nothing}
             ${this.status === "BOOTING" || this.status === "WAITING_FOR_DATA"
-              ? html`<p class="hint">Please wait while the stream prepares...</p>`
+              ? html`<p class="hint">${this._t("streamPreparing")}</p>`
               : nothing}
             ${!showRetry
               ? html`<div class="polling-indicator">
                   <span class="polling-dot"></span>
-                  <span>Checking stream status...</span>
+                  <span>${this._t("checkingStatus")}</span>
                 </div>`
               : nothing}
           </div>
@@ -312,9 +320,9 @@ export class FwStreamStateOverlay extends LitElement {
                   type="button"
                   class="btn-flush"
                   @click=${this._handleRetry}
-                  aria-label="Retry connection"
+                  aria-label=${this._t("retryConnection")}
                 >
-                  Retry Connection
+                  ${this._t("retryConnection")}
                 </button>
               </div>`
             : nothing}

package/src/components/fw-toast.ts

@@ -1,10 +1,18 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { closeIcon } from "../icons/index.js";
+import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
 
 @customElement("fw-toast")
 export class FwToast extends LitElement {
   @property({ type: String }) message = "";
+  @property({ attribute: false }) translator?: TranslateFn;
+
+  private _defaultTranslator: TranslateFn = createTranslator({ locale: "en" });
+
+  private get _t(): TranslateFn {
+    return this.translator ?? this._defaultTranslator;
+  }
 
   static styles = css`
     :host {
@@ -53,7 +61,9 @@ export class FwToast extends LitElement {
     return html`
       <div class="toast">
         <span>${this.message}</span>
-        <button type="button" @click=${this._dismiss} aria-label="Dismiss">${closeIcon()}</button>
+        <button type="button" @click=${this._dismiss} aria-label=${this._t("dismiss")}>
+          ${closeIcon()}
+        </button>
       </div>
     `;
   }

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

@@ -76,6 +76,13 @@ export class FwVolumeControl extends LitElement {
   }
 
   private _updateHasAudio(): void {
+    // Primary: trust MistServer stream metadata (matches ddvtech embed approach)
+    const mistHasAudio = this.pc?.s.streamState?.streamInfo?.hasAudio;
+    if (mistHasAudio !== undefined) {
+      this._hasAudio = mistHasAudio;
+      return;
+    }
+
     const video = this.pc?.s.videoElement;
     if (!video) {
       this._hasAudio = true;
@@ -260,8 +267,12 @@ export class FwVolumeControl extends LitElement {
             }
           }}
           ?disabled=${!this._hasAudio}
-          aria-label=${!this._hasAudio ? "No audio" : isMuted ? "Unmute" : "Mute"}
-          title=${!this._hasAudio ? "No audio" : isMuted ? "Unmute" : "Mute"}
+          aria-label=${!this._hasAudio
+            ? "No audio"
+            : isMuted
+              ? this.pc.t("unmute")
+              : this.pc.t("mute")}
+          title=${!this._hasAudio ? "No audio" : isMuted ? this.pc.t("unmute") : this.pc.t("mute")}
         >
           ${isMuted || !this._hasAudio ? volumeOffIcon(16) : volumeUpIcon(16)}
         </button>
@@ -276,7 +287,7 @@ export class FwVolumeControl extends LitElement {
           <div
             class="slider"
             role="slider"
-            aria-label="Volume"
+            aria-label=${this.pc.t("volume")}
             aria-valuemin="0"
             aria-valuemax="100"
             aria-valuenow=${Math.round(displayVolume * 100)}

package/src/controllers/player-controller-host.ts

@@ -5,6 +5,7 @@
 import type { ReactiveController, ReactiveControllerHost } from "lit";
 import {
   PlayerController,
+  createTranslator,
   type PlayerControllerConfig,
   type PlayerState,
   type StreamState,
@@ -13,6 +14,8 @@ import {
   type ContentEndpoints,
   type ContentMetadata,
   type ClassifiedError,
+  type TranslateFn,
+  type I18nConfig,
 } from "@livepeer-frameworks/player-core";
 
 export interface PlayerControllerHostState {
@@ -105,11 +108,20 @@ export class PlayerControllerHost implements ReactiveController {
 
   s: PlayerControllerHostState = { ...initialState };
 
+  /** Translation function, updated when locale changes. */
+  t: TranslateFn = createTranslator({ locale: "en" });
+
   constructor(host: HostElement) {
     this.host = host;
     host.addController(this);
   }
 
+  /** Rebuild the translator when locale or custom translations change. */
+  updateTranslator(config: I18nConfig) {
+    this.t = createTranslator(config);
+    this.host.requestUpdate();
+  }
+
   // ---- Configuration & Lifecycle ----
 
   configure(config: PlayerControllerConfig) {
@@ -434,6 +446,12 @@ export class PlayerControllerHost implements ReactiveController {
   async retry() {
     await this.controller?.retry();
   }
+  async tryNextSource() {
+    await this.controller?.retryWithFallback();
+  }
+  canAttemptFallback(): boolean {
+    return this.controller?.canAttemptFallback() ?? false;
+  }
   async reload() {
     await this.controller?.reload();
   }

package/src/index.ts

@@ -30,6 +30,16 @@ export { FwSkipIndicator } from "./components/fw-skip-indicator.js";
 export { FwSpeedIndicator } from "./components/fw-speed-indicator.js";
 export { FwContextMenu } from "./components/fw-context-menu.js";
 
+// Composable control elements
+export {
+  FwPlayButton,
+  FwSkipButton,
+  FwVolumeControl as FwVolumeButton,
+  FwTimeDisplay,
+  FwLiveBadge,
+  FwFullscreenButton,
+} from "./components/controls/index.js";
+
 // Controller
 export { PlayerControllerHost } from "./controllers/player-controller-host.js";
 export type { PlayerControllerHostState } from "./controllers/player-controller-host.js";