@livepeer-frameworks/player-wc 0.1.9 → 0.2.1

package/dist/types/components/controls/fw-fullscreen-button.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+export declare class FwFullscreenButton extends LitElement {
+    private isFullscreen;
+    private _player;
+    private _cleanup;
+    private get _t();
+    static styles: import("lit").CSSResult;
+    private _resolvePlayer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-fullscreen-button": FwFullscreenButton;
+    }
+}

package/dist/types/components/controls/fw-live-badge.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from "lit";
+export declare class FwLiveBadge extends LitElement {
+    private isLive;
+    private _player;
+    private _cleanup;
+    private get _t();
+    static styles: import("lit").CSSResult;
+    private _resolvePlayer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private syncLive;
+    private handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-live-badge": FwLiveBadge;
+    }
+}

package/dist/types/components/controls/fw-play-button.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+export declare class FwPlayButton extends LitElement {
+    private isPlaying;
+    private _player;
+    private _cleanup;
+    private get _t();
+    static styles: import("lit").CSSResult;
+    private _resolvePlayer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-play-button": FwPlayButton;
+    }
+}

package/dist/types/components/controls/fw-skip-button.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+export declare class FwSkipButton extends LitElement {
+    direction: "back" | "forward";
+    seconds: number;
+    private _player;
+    private get _t();
+    static styles: import("lit").CSSResult;
+    private _resolvePlayer;
+    connectedCallback(): void;
+    private handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-skip-button": FwSkipButton;
+    }
+}

package/dist/types/components/controls/fw-time-display.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+export declare class FwTimeDisplay extends LitElement {
+    private display;
+    private _player;
+    private _cleanup;
+    static styles: import("lit").CSSResult;
+    private _resolvePlayer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private updateDisplay;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-time-display": FwTimeDisplay;
+    }
+}

package/dist/types/components/controls/fw-volume-control.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from "lit";
+export declare class FwVolumeControl extends LitElement {
+    private isMuted;
+    private _player;
+    private _cleanup;
+    private get _t();
+    static styles: import("lit").CSSResult;
+    private _resolvePlayer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-volume-button": FwVolumeControl;
+    }
+}

package/dist/types/components/controls/index.d.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/dist/types/components/fw-dev-mode-panel.d.ts

@@ -10,7 +10,7 @@ export declare class FwDevModePanel extends LitElement {
     playbackMode: PlaybackMode;
     private _activeTab;
     private _hoveredComboIndex;
-    private _tooltipAbove;
+    private _tooltipPos;
     private _showDisabledPlayers;
     private _playbackScore;
     private _qualityScore;

package/dist/types/components/fw-error-overlay.d.ts

@@ -1,7 +1,11 @@
 import { LitElement } from "lit";
+import { type TranslateFn } from "@livepeer-frameworks/player-core";
 export declare class FwErrorOverlay extends LitElement {
     error: string | null;
     isPassive: boolean;
+    translator?: TranslateFn;
+    private _defaultTranslator;
+    private get _t();
     static styles: import("lit").CSSResult[];
     protected render(): import("lit").TemplateResult<1>;
     private _clearError;

package/dist/types/components/fw-idle-screen.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from "lit";
+import { type TranslateFn } from "@livepeer-frameworks/player-core";
 import "./fw-dvd-logo.js";
 export declare class FwIdleScreen extends LitElement {
     status?: string;
@@ -8,6 +9,9 @@ export declare class FwIdleScreen extends LitElement {
     logoSrc?: string;
     retryEnabled: boolean;
     onRetry?: () => void;
+    translator?: TranslateFn;
+    private _defaultTranslator;
+    private get _t();
     private _containerEl?;
     private _logoSize;
     private _logoOffset;

package/dist/types/components/fw-loading-screen.d.ts

@@ -1,8 +1,11 @@
 import { LitElement } from "lit";
+import { type TranslateFn } from "@livepeer-frameworks/player-core";
 import "./fw-dvd-logo.js";
 export declare class FwLoadingScreen extends LitElement {
-    message: string;
+    message?: string;
     logoSrc?: string;
+    translator?: TranslateFn;
+    private _defaultTranslator;
     private _containerEl?;
     private _logoSize;
     private _logoOffset;
@@ -27,6 +30,7 @@ export declare class FwLoadingScreen extends LitElement {
     private _handleMouseMove;
     private _handleMouseLeave;
     private _handleLogoClick;
+    private get _t();
     protected render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/types/components/fw-loading-spinner.d.ts

@@ -1,5 +1,9 @@
 import { LitElement } from "lit";
+import { type TranslateFn } from "@livepeer-frameworks/player-core";
 export declare class FwLoadingSpinner extends LitElement {
+    translator?: TranslateFn;
+    private _defaultTranslator;
+    private get _t();
     static styles: import("lit").CSSResult;
     protected render(): import("lit").TemplateResult<1>;
 }

package/dist/types/components/fw-player-controls.d.ts

@@ -3,7 +3,7 @@
  * Parity port of React/Svelte control behavior.
  */
 import { LitElement, type PropertyValues } from "lit";
-import { type PlaybackMode } from "@livepeer-frameworks/player-core";
+import { type PlaybackMode, type FwLocale } from "@livepeer-frameworks/player-core";
 import type { PlayerControllerHost } from "../controllers/player-controller-host.js";
 export declare class FwPlayerControls extends LitElement {
     pc: PlayerControllerHost;
@@ -12,6 +12,7 @@ export declare class FwPlayerControls extends LitElement {
     devMode: boolean;
     showStatsButton: boolean;
     isStatsOpen: boolean;
+    activeLocale?: FwLocale;
     private _settingsOpen;
     private _isNearLiveState;
     private _buffered;

package/dist/types/components/fw-player.d.ts

@@ -4,7 +4,7 @@
  */
 import { LitElement, type PropertyValues } from "lit";
 import { PlayerControllerHost } from "../controllers/player-controller-host.js";
-import type { ContentEndpoints, PlaybackMode } from "@livepeer-frameworks/player-core";
+import type { ContentEndpoints, PlaybackMode, FwThemePreset, FwThemeOverrides, FwLocale } from "@livepeer-frameworks/player-core";
 export declare class FwPlayer extends LitElement {
     contentId: string;
     contentType?: "live" | "dvr" | "clip" | "vod";
@@ -20,12 +20,19 @@ export declare class FwPlayer extends LitElement {
     devMode: boolean;
     thumbnailUrl?: string;
     playbackMode: PlaybackMode;
+    theme?: FwThemePreset;
+    themeOverrides?: FwThemeOverrides;
+    locale?: FwLocale;
     endpoints?: ContentEndpoints;
     private _isStatsOpen;
     private _isDevPanelOpen;
     private _skipDirection;
     private _contextMenuOpen;
     private _contextMenuMounted;
+    private _displayedError;
+    private _displayedIsPassive;
+    private _isErrorDismissing;
+    private _errorDismissTimer;
     private _contextMenuState;
     private _contextMenuSide;
     private _contextMenuX;
@@ -64,6 +71,8 @@ export declare class FwPlayer extends LitElement {
     private get _showWaitingForEndpoint();
     private get _waitingMessage();
     private get _useStockControls();
+    /** Expose the PlayerControllerHost for composable controls */
+    get controller(): PlayerControllerHost;
     play(): Promise<void>;
     pause(): void;
     togglePlay(): void;

package/dist/types/components/fw-settings-menu.d.ts

@@ -2,7 +2,7 @@
  * <fw-settings-menu> — Mode, speed, quality, and captions settings popup.
  */
 import { LitElement, nothing } from "lit";
-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";
 export declare class FwSettingsMenu extends LitElement {
     pc: PlayerControllerHost;
@@ -13,6 +13,7 @@ export declare class FwSettingsMenu extends LitElement {
     qualityValue?: string;
     captionValue?: string;
     supportsPlaybackRate?: boolean;
+    activeLocale?: FwLocale;
     private _playbackRate;
     static styles: import("lit").CSSResult[];
     protected updated(): void;
@@ -21,6 +22,7 @@ export declare class FwSettingsMenu extends LitElement {
     private _handleSpeedChange;
     private _handleQualityChange;
     private _handleCaptionChange;
+    private _handleLocaleChange;
     private _deriveFallbackQualities;
     protected render(): import("lit").TemplateResult<1> | typeof nothing;
 }

package/dist/types/components/fw-stream-state-overlay.d.ts

@@ -1,5 +1,6 @@
 import { LitElement, nothing } from "lit";
 import type { StreamStatus } from "@livepeer-frameworks/player-core";
+import { type TranslateFn } from "@livepeer-frameworks/player-core";
 export declare class FwStreamStateOverlay extends LitElement {
     status: StreamStatus;
     message: string;
@@ -7,6 +8,9 @@ export declare class FwStreamStateOverlay extends LitElement {
     visible: boolean;
     retryEnabled: boolean;
     onRetry?: () => void;
+    translator?: TranslateFn;
+    private _defaultTranslator;
+    private get _t();
     static styles: import("lit").CSSResult[];
     private _getStatusLabel;
     private _renderStatusIcon;

package/dist/types/components/fw-toast.d.ts

@@ -1,6 +1,10 @@
 import { LitElement, nothing } from "lit";
+import { type TranslateFn } from "@livepeer-frameworks/player-core";
 export declare class FwToast extends LitElement {
     message: string;
+    translator?: TranslateFn;
+    private _defaultTranslator;
+    private get _t();
     static styles: import("lit").CSSResult;
     protected render(): import("lit").TemplateResult<1> | typeof nothing;
     private _dismiss;

package/dist/types/controllers/player-controller-host.d.ts

@@ -3,7 +3,7 @@
  * Direct port of usePlayerController.ts from player-react.
  */
 import type { ReactiveController, ReactiveControllerHost } from "lit";
-import { PlayerController, type PlayerControllerConfig, type PlayerState, type StreamState, type StreamInfo, type PlaybackQuality, type ContentEndpoints, type ContentMetadata, type ClassifiedError } from "@livepeer-frameworks/player-core";
+import { PlayerController, type PlayerControllerConfig, type PlayerState, type StreamState, type StreamInfo, type PlaybackQuality, type ContentEndpoints, type ContentMetadata, type ClassifiedError, type TranslateFn, type I18nConfig } from "@livepeer-frameworks/player-core";
 export interface PlayerControllerHostState {
     state: PlayerState;
     streamState: StreamState | null;
@@ -68,7 +68,11 @@ export declare class PlayerControllerHost implements ReactiveController {
     private unsubs;
     private currentConfig;
     s: PlayerControllerHostState;
+    /** Translation function, updated when locale changes. */
+    t: TranslateFn;
     constructor(host: HostElement);
+    /** Rebuild the translator when locale or custom translations change. */
+    updateTranslator(config: I18nConfig): void;
     configure(config: PlayerControllerConfig): void;
     attach(container: HTMLDivElement): Promise<void>;
     hostConnected(): void;
@@ -93,6 +97,8 @@ export declare class PlayerControllerHost implements ReactiveController {
     clearError(): void;
     dismissToast(): void;
     retry(): Promise<void>;
+    tryNextSource(): Promise<void>;
+    canAttemptFallback(): boolean;
     reload(): Promise<void>;
     getQualities(): {
         id: string;

package/dist/types/index.d.ts

@@ -25,5 +25,6 @@ export { FwSubtitleRenderer } from "./components/fw-subtitle-renderer.js";
 export { FwSkipIndicator } from "./components/fw-skip-indicator.js";
 export { FwSpeedIndicator } from "./components/fw-speed-indicator.js";
 export { FwContextMenu } from "./components/fw-context-menu.js";
+export { FwPlayButton, FwSkipButton, FwVolumeControl as FwVolumeButton, FwTimeDisplay, FwLiveBadge, FwFullscreenButton, } from "./components/controls/index.js";
 export { PlayerControllerHost } from "./controllers/player-controller-host.js";
 export type { PlayerControllerHostState } from "./controllers/player-controller-host.js";

package/package.json

@@ -1,10 +1,9 @@
 {
   "name": "@livepeer-frameworks/player-wc",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "type": "module",
   "description": "Lit Web Components for FrameWorks streaming player — <fw-player> custom element with full UI",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "files": [
     "dist",
@@ -14,32 +13,30 @@
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/index.d.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
+      "default": "./dist/esm/index.js"
     },
     "./define": {
       "source": "./src/define.ts",
       "types": "./dist/types/define.d.ts",
-      "import": "./dist/esm/define.js",
-      "require": "./dist/cjs/define.js"
+      "default": "./dist/esm/define.js"
     },
     "./fw-player.js": {
       "default": "./dist/fw-player.iife.js"
     }
   },
   "dependencies": {
-    "lit": "^3.2.0",
-    "@livepeer-frameworks/player-core": "0.1.5"
+    "lit": "^3.3.2",
+    "@livepeer-frameworks/player-core": "0.2.1"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^29.0.0",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-terser": "^0.4.0",
-    "@rollup/plugin-typescript": "^12.1.4",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
     "@vitest/coverage-v8": "^4.0.18",
     "rollup": "^4.57.1",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.2",
+    "typescript": "^5.9.3",
     "vitest": "^4.0.18"
   },
   "keywords": [

package/src/components/controls/fw-fullscreen-button.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-fullscreen-button")
+export class FwFullscreenButton extends LitElement {
+  @state() private isFullscreen = 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.isFullscreen = pc.s.isFullscreen;
+    const handler = () => {
+      this.isFullscreen = this._player.pc.s.isFullscreen;
+    };
+    this._player.addEventListener("fw-fullscreen-change", handler);
+    this._player.addEventListener("fw-ready", handler);
+    this._cleanup = () => {
+      this._player?.removeEventListener("fw-fullscreen-change", handler);
+      this._player?.removeEventListener("fw-ready", handler);
+    };
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._cleanup?.();
+    this._cleanup = null;
+  }
+
+  private handleClick() {
+    this._player?.pc?.toggleFullscreen();
+  }
+
+  render() {
+    return html`<button
+      type="button"
+      class="fw-btn-flush"
+      aria-label=${this.isFullscreen ? this._t("exitFullscreen") : this._t("fullscreen")}
+      aria-pressed=${this.isFullscreen}
+      title=${this.isFullscreen ? this._t("exitFullscreen") : this._t("fullscreen")}
+      @click=${this.handleClick}
+    >
+      ${this.isFullscreen ? "\u2716" : "\u26F6"}
+    </button>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-fullscreen-button": FwFullscreenButton;
+  }
+}

package/src/components/controls/fw-live-badge.ts

@@ -0,0 +1,109 @@
+import { LitElement, html, css } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
+
+@customElement("fw-live-badge")
+export class FwLiveBadge extends LitElement {
+  @state() private isLive = 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;
+    }
+    button {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.25rem;
+      border: none;
+      background: none;
+      cursor: pointer;
+      padding: 0.125rem 0.375rem;
+      border-radius: 0.25rem;
+      font-size: 0.625rem;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: inherit;
+    }
+    .dot {
+      width: 0.375rem;
+      height: 0.375rem;
+      border-radius: 50%;
+      background: #ef4444;
+    }
+    :host([live]) .dot {
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.4;
+      }
+    }
+  `;
+
+  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.syncLive();
+    const handler = () => this.syncLive();
+    this._player.addEventListener("fw-state-change", handler);
+    this._player.addEventListener("fw-stream-state", handler);
+    this._player.addEventListener("fw-ready", handler);
+    this._cleanup = () => {
+      this._player?.removeEventListener("fw-state-change", handler);
+      this._player?.removeEventListener("fw-stream-state", handler);
+      this._player?.removeEventListener("fw-ready", handler);
+    };
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._cleanup?.();
+    this._cleanup = null;
+  }
+
+  private syncLive() {
+    const live = this._player?.pc?.s?.isEffectivelyLive ?? false;
+    this.isLive = live;
+    this.toggleAttribute("live", live);
+  }
+
+  private handleClick() {
+    this._player?.pc?.jumpToLive();
+  }
+
+  render() {
+    if (!this.isLive) return html``;
+
+    return html`<button type="button" aria-label=${this._t("live")} @click=${this.handleClick}>
+      <span class="dot"></span> ${this._t("live").toUpperCase()}
+    </button>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-live-badge": FwLiveBadge;
+  }
+}

package/src/components/controls/fw-play-button.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-play-button")
+export class FwPlayButton extends LitElement {
+  @state() private isPlaying = 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.isPlaying = pc.s.isPlaying;
+    const handler = () => {
+      this.isPlaying = pc.s.isPlaying;
+    };
+    this._player.addEventListener("fw-state-change", handler);
+    this._player.addEventListener("fw-ready", handler);
+    this._cleanup = () => {
+      this._player?.removeEventListener("fw-state-change", handler);
+      this._player?.removeEventListener("fw-ready", handler);
+    };
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._cleanup?.();
+    this._cleanup = null;
+  }
+
+  private handleClick() {
+    this._player?.pc?.togglePlay();
+  }
+
+  render() {
+    return html`<button
+      type="button"
+      class="fw-btn-flush"
+      aria-label=${this.isPlaying ? this._t("pause") : this._t("play")}
+      aria-pressed=${this.isPlaying}
+      title=${this.isPlaying ? this._t("pause") : this._t("play")}
+      @click=${this.handleClick}
+    >
+      ${this.isPlaying ? "\u23F8" : "\u25B6"}
+    </button>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-play-button": FwPlayButton;
+  }
+}