@livepeer-frameworks/player-wc 0.1.0

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

@@ -0,0 +1,15 @@
+/**
+ * <fw-context-menu> — Placeholder for right-click context menu.
+ * The actual context menu is rendered inline by <fw-player> since it needs
+ * to be positioned relative to mouse coordinates. This component exists
+ * for the module export and define.ts registration.
+ */
+import { LitElement } from "lit";
+export declare class FwContextMenu extends LitElement {
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-context-menu": FwContextMenu;
+    }
+}

package/dist/types/components/fw-dev-mode-panel.d.ts

@@ -0,0 +1,24 @@
+/**
+ * <fw-dev-mode-panel> — Developer mode panel for forcing player/source selection.
+ * Port of DevModePanel.tsx from player-react.
+ */
+import { LitElement } from "lit";
+import type { PlayerControllerHost } from "../controllers/player-controller-host.js";
+import type { PlaybackMode } from "@livepeer-frameworks/player-core";
+export declare class FwDevModePanel extends LitElement {
+    pc: PlayerControllerHost;
+    playbackMode: PlaybackMode;
+    private _activeTab;
+    static styles: import("lit").CSSResult[];
+    private _modes;
+    protected render(): import("lit").TemplateResult<1>;
+    private _renderConfig;
+    private _renderStats;
+    private _resolution;
+    private _row;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-dev-mode-panel": FwDevModePanel;
+    }
+}

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

@@ -0,0 +1,14 @@
+import { LitElement } from "lit";
+export declare class FwErrorOverlay extends LitElement {
+    error: string | null;
+    isPassive: boolean;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit").TemplateResult<1>;
+    private _clearError;
+    private _retry;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-error-overlay": FwErrorOverlay;
+    }
+}

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

@@ -0,0 +1,13 @@
+import { LitElement } from "lit";
+export declare class FwIdleScreen extends LitElement {
+    status?: string;
+    message?: string;
+    percentage?: number;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-idle-screen": FwIdleScreen;
+    }
+}

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

@@ -0,0 +1,10 @@
+import { LitElement } from "lit";
+export declare class FwLoadingSpinner extends LitElement {
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-loading-spinner": FwLoadingSpinner;
+    }
+}

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

@@ -0,0 +1,23 @@
+/**
+ * <fw-player-controls> — Control bar with play/pause, seek, volume, quality, fullscreen.
+ * Port of PlayerControls.tsx from player-react.
+ */
+import { LitElement } from "lit";
+import type { PlayerControllerHost } from "../controllers/player-controller-host.js";
+import type { PlaybackMode } from "@livepeer-frameworks/player-core";
+export declare class FwPlayerControls extends LitElement {
+    pc: PlayerControllerHost;
+    playbackMode: PlaybackMode;
+    isContentLive: boolean;
+    isStatsOpen: boolean;
+    private _settingsOpen;
+    static styles: import("lit").CSSResult[];
+    private _formatTime;
+    private get _isNearLive();
+    protected render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-player-controls": FwPlayerControls;
+    }
+}

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

@@ -0,0 +1,74 @@
+/**
+ * <fw-player> — Main player web component.
+ * Port of Player.tsx / PlayerInner from player-react.
+ */
+import { LitElement, type PropertyValues } from "lit";
+import { PlayerControllerHost } from "../controllers/player-controller-host.js";
+import type { ContentEndpoints, PlaybackMode } from "@livepeer-frameworks/player-core";
+export declare class FwPlayer extends LitElement {
+    contentId: string;
+    contentType?: "live" | "dvr" | "clip" | "vod";
+    gatewayUrl?: string;
+    mistUrl?: string;
+    authToken?: string;
+    autoplay: boolean;
+    muted: boolean;
+    controls: boolean;
+    debug: boolean;
+    devMode: boolean;
+    thumbnailUrl?: string;
+    playbackMode: PlaybackMode;
+    endpoints?: ContentEndpoints;
+    private _isStatsOpen;
+    private _isDevPanelOpen;
+    private _skipDirection;
+    private _contextMenuOpen;
+    private _contextMenuX;
+    private _contextMenuY;
+    private _containerEl;
+    pc: PlayerControllerHost;
+    static styles: import("lit").CSSResult[];
+    protected willUpdate(changed: PropertyValues): void;
+    protected firstUpdated(): void;
+    disconnectedCallback(): void;
+    private _handleContextMenu;
+    private _handleDocumentClick;
+    private _handleDocumentContextMenu;
+    private _toastTimer?;
+    protected updated(changed: PropertyValues): void;
+    private get _showTitleOverlay();
+    private get _showBufferingSpinner();
+    private get _showWaitingForEndpoint();
+    private get _useStockControls();
+    play(): Promise<void>;
+    pause(): void;
+    togglePlay(): void;
+    seek(time: number): void;
+    seekBy(delta: number): void;
+    jumpToLive(): void;
+    setVolume(volume: number): void;
+    toggleMute(): void;
+    toggleLoop(): void;
+    toggleFullscreen(): Promise<void>;
+    togglePiP(): Promise<void>;
+    toggleSubtitles(): void;
+    retry(): Promise<void>;
+    reload(): Promise<void>;
+    getQualities(): {
+        id: string;
+        label: string;
+        bitrate?: number;
+        width?: number;
+        height?: number;
+        isAuto?: boolean;
+        active?: boolean;
+    }[];
+    selectQuality(id: string): void;
+    destroy(): void;
+    protected render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-player": FwPlayer;
+    }
+}

package/dist/types/components/fw-seek-bar.d.ts

@@ -0,0 +1,33 @@
+/**
+ * <fw-seek-bar> — Video seek bar with buffer visualization, drag, tooltips.
+ * Port of SeekBar.tsx from player-react.
+ */
+import { LitElement } from "lit";
+export declare class FwSeekBar extends LitElement {
+    currentTime: number;
+    duration: number;
+    disabled: boolean;
+    isLive: boolean;
+    private _hovering;
+    private _dragging;
+    private _hoverPct;
+    private _dragPct;
+    private _trackEl;
+    static styles: import("lit").CSSResult[];
+    private _pctFromEvent;
+    private _timeFromPct;
+    private _formatTime;
+    private _handlePointerDown;
+    private _handlePointerMove;
+    private _handlePointerUp;
+    private _handleClick;
+    private _handleMouseEnter;
+    private _handleMouseLeave;
+    private get _progressPct();
+    protected render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-seek-bar": FwSeekBar;
+    }
+}

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

@@ -0,0 +1,16 @@
+/**
+ * <fw-settings-menu> — Quality, speed, and captions settings popup.
+ */
+import { LitElement, nothing } from "lit";
+import type { PlayerControllerHost } from "../controllers/player-controller-host.js";
+export declare class FwSettingsMenu extends LitElement {
+    pc: PlayerControllerHost;
+    open: boolean;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-settings-menu": FwSettingsMenu;
+    }
+}

package/dist/types/components/fw-skip-indicator.d.ts

@@ -0,0 +1,18 @@
+import { LitElement, nothing } from "lit";
+export type SkipDirection = "back" | "forward" | null;
+export declare class FwSkipIndicator extends LitElement {
+    direction: SkipDirection;
+    seconds: number;
+    private _visible;
+    private _timer?;
+    static styles: import("lit").CSSResult;
+    protected updated(): void;
+    private _renderRewind;
+    private _renderForward;
+    protected render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-skip-indicator": FwSkipIndicator;
+    }
+}

package/dist/types/components/fw-speed-indicator.d.ts

@@ -0,0 +1,11 @@
+import { LitElement } from "lit";
+export declare class FwSpeedIndicator extends LitElement {
+    speed: number;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-speed-indicator": FwSpeedIndicator;
+    }
+}

package/dist/types/components/fw-stats-panel.d.ts

@@ -0,0 +1,18 @@
+/**
+ * <fw-stats-panel> — Stats for nerds overlay.
+ * Port of StatsPanel.tsx from player-react.
+ */
+import { LitElement } from "lit";
+import type { PlayerControllerHost } from "../controllers/player-controller-host.js";
+export declare class FwStatsPanel extends LitElement {
+    pc: PlayerControllerHost;
+    static styles: import("lit").CSSResult[];
+    private _resolution;
+    private _stat;
+    protected render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-stats-panel": FwStatsPanel;
+    }
+}

package/dist/types/components/fw-subtitle-renderer.d.ts

@@ -0,0 +1,21 @@
+import { LitElement, nothing } from "lit";
+interface SubtitleCue {
+    id?: string;
+    startTime: number;
+    endTime: number;
+    text: string;
+}
+export declare class FwSubtitleRenderer extends LitElement {
+    currentTime: number;
+    enabled: boolean;
+    cues: SubtitleCue[];
+    static styles: import("lit").CSSResult;
+    private get _activeCue();
+    protected render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-subtitle-renderer": FwSubtitleRenderer;
+    }
+}
+export {};

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

@@ -0,0 +1,12 @@
+import { LitElement, nothing } from "lit";
+export declare class FwTitleOverlay extends LitElement {
+    title: string;
+    description: string | null;
+    static styles: import("lit").CSSResult[];
+    protected render(): import("lit").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-title-overlay": FwTitleOverlay;
+    }
+}

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

@@ -0,0 +1,12 @@
+import { LitElement, nothing } from "lit";
+export declare class FwToast extends LitElement {
+    message: string;
+    static styles: import("lit").CSSResult;
+    protected render(): import("lit").TemplateResult<1> | typeof nothing;
+    private _dismiss;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-toast": FwToast;
+    }
+}

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

@@ -0,0 +1,18 @@
+/**
+ * <fw-volume-control> — Mute toggle + volume slider.
+ */
+import { LitElement } from "lit";
+import type { PlayerControllerHost } from "../controllers/player-controller-host.js";
+export declare class FwVolumeControl extends LitElement {
+    pc: PlayerControllerHost;
+    private _expanded;
+    static styles: import("lit").CSSResult[];
+    private _handleSliderClick;
+    private _handleSliderDrag;
+    protected render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "fw-volume-control": FwVolumeControl;
+    }
+}

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

@@ -0,0 +1,119 @@
+/**
+ * PlayerControllerHost — Lit ReactiveController wrapping the headless PlayerController.
+ * 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";
+export interface PlayerControllerHostState {
+    state: PlayerState;
+    streamState: StreamState | null;
+    endpoints: ContentEndpoints | null;
+    metadata: ContentMetadata | null;
+    videoElement: HTMLVideoElement | null;
+    currentTime: number;
+    duration: number;
+    isPlaying: boolean;
+    isPaused: boolean;
+    isBuffering: boolean;
+    isMuted: boolean;
+    volume: number;
+    error: string | null;
+    errorDetails: ClassifiedError["details"] | null;
+    isPassiveError: boolean;
+    hasPlaybackStarted: boolean;
+    isHoldingSpeed: boolean;
+    holdSpeed: number;
+    isHovering: boolean;
+    shouldShowControls: boolean;
+    isLoopEnabled: boolean;
+    isFullscreen: boolean;
+    isPiPActive: boolean;
+    isEffectivelyLive: boolean;
+    shouldShowIdleScreen: boolean;
+    currentPlayerInfo: {
+        name: string;
+        shortname: string;
+    } | null;
+    currentSourceInfo: {
+        url: string;
+        type: string;
+    } | null;
+    playbackQuality: PlaybackQuality | null;
+    subtitlesEnabled: boolean;
+    qualities: Array<{
+        id: string;
+        label: string;
+        bitrate?: number;
+        width?: number;
+        height?: number;
+        isAuto?: boolean;
+        active?: boolean;
+    }>;
+    textTracks: Array<{
+        id: string;
+        label: string;
+        language?: string;
+        active: boolean;
+    }>;
+    streamInfo: StreamInfo | null;
+    toast: {
+        message: string;
+        timestamp: number;
+    } | null;
+}
+type HostElement = ReactiveControllerHost & HTMLElement;
+export declare class PlayerControllerHost implements ReactiveController {
+    host: HostElement;
+    private controller;
+    private unsubs;
+    private currentConfig;
+    s: PlayerControllerHostState;
+    constructor(host: HostElement);
+    configure(config: PlayerControllerConfig): void;
+    attach(container: HTMLDivElement): Promise<void>;
+    hostConnected(): void;
+    hostDisconnected(): void;
+    private teardown;
+    private update;
+    private syncState;
+    private subscribeToEvents;
+    private dispatchEvent;
+    play(): Promise<void>;
+    pause(): void;
+    togglePlay(): void;
+    seek(time: number): void;
+    seekBy(delta: number): void;
+    jumpToLive(): void;
+    setVolume(volume: number): void;
+    toggleMute(): void;
+    toggleLoop(): void;
+    toggleFullscreen(): Promise<void>;
+    togglePiP(): Promise<void>;
+    toggleSubtitles(): void;
+    clearError(): void;
+    dismissToast(): void;
+    retry(): Promise<void>;
+    reload(): Promise<void>;
+    getQualities(): {
+        id: string;
+        label: string;
+        bitrate?: number;
+        width?: number;
+        height?: number;
+        isAuto?: boolean;
+        active?: boolean;
+    }[];
+    selectQuality(id: string): void;
+    handleMouseEnter(): void;
+    handleMouseLeave(): void;
+    handleMouseMove(): void;
+    handleTouchStart(): void;
+    setDevModeOptions(options: {
+        forcePlayer?: string;
+        forceType?: string;
+        forceSource?: number;
+        playbackMode?: "auto" | "low-latency" | "quality" | "vod";
+    }): Promise<void>;
+    getController(): PlayerController | null;
+}
+export {};

package/dist/types/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/icons/index.d.ts

@@ -0,0 +1,23 @@
+/**
+ * SVG icons as Lit html template functions.
+ * Port of Icons.tsx from player-react.
+ */
+import { type TemplateResult } from "lit";
+type IconTemplate = (size?: number, color?: string) => TemplateResult;
+export declare const playIcon: IconTemplate;
+export declare const pauseIcon: IconTemplate;
+export declare const skipBackIcon: IconTemplate;
+export declare const skipForwardIcon: IconTemplate;
+export declare const volumeUpIcon: IconTemplate;
+export declare const volumeOffIcon: IconTemplate;
+export declare const fullscreenIcon: IconTemplate;
+export declare const fullscreenExitIcon: IconTemplate;
+export declare const pictureInPictureIcon: IconTemplate;
+export declare const closedCaptionsIcon: IconTemplate;
+export declare const liveIcon: IconTemplate;
+export declare const settingsIcon: IconTemplate;
+export declare const statsIcon: IconTemplate;
+export declare const seekToLiveIcon: IconTemplate;
+export declare const closeIcon: IconTemplate;
+export declare const loopIcon: IconTemplate;
+export {};

package/dist/types/iife-entry.d.ts

@@ -0,0 +1,11 @@
+/**
+ * IIFE entry point for CDN usage.
+ * Bundles Lit + player-core + all components into a single self-registering script.
+ *
+ * Usage:
+ *   <script src="https://cdn.example.com/@livepeer-frameworks/player-wc/dist/fw-player.iife.js"></script>
+ *   <fw-player content-id="my-stream" gateway-url="https://..." muted autoplay></fw-player>
+ */
+import "./define.js";
+export { FwPlayer } from "./components/fw-player.js";
+export { PlayerControllerHost } from "./controllers/player-controller-host.js";

package/dist/types/index.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @livepeer-frameworks/player-wc
+ *
+ * Lit Web Components for FrameWorks streaming player.
+ * Import this for class access without auto-registration.
+ * Import './define' or use the IIFE bundle for auto-registration.
+ */
+export { FwPlayer } from "./components/fw-player.js";
+export { FwPlayerControls } from "./components/fw-player-controls.js";
+export { FwSeekBar } from "./components/fw-seek-bar.js";
+export { FwVolumeControl } from "./components/fw-volume-control.js";
+export { FwSettingsMenu } from "./components/fw-settings-menu.js";
+export { FwIdleScreen } from "./components/fw-idle-screen.js";
+export { FwLoadingSpinner } from "./components/fw-loading-spinner.js";
+export { FwTitleOverlay } from "./components/fw-title-overlay.js";
+export { FwErrorOverlay } from "./components/fw-error-overlay.js";
+export { FwToast } from "./components/fw-toast.js";
+export { FwStatsPanel } from "./components/fw-stats-panel.js";
+export { FwDevModePanel } from "./components/fw-dev-mode-panel.js";
+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 { PlayerControllerHost } from "./controllers/player-controller-host.js";
+export type { PlayerControllerHostState } from "./controllers/player-controller-host.js";

package/dist/types/styles/shared-styles.d.ts

@@ -0,0 +1 @@
+export declare const sharedStyles: import("lit").CSSResult;

package/dist/types/styles/utility-styles.d.ts

@@ -0,0 +1 @@
+export declare const utilityStyles: import("lit").CSSResult;

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@livepeer-frameworks/player-wc",
+  "version": "0.1.0",
+  "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",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    },
+    "./define": {
+      "source": "./src/define.ts",
+      "types": "./dist/types/define.d.ts",
+      "import": "./dist/esm/define.js",
+      "require": "./dist/cjs/define.js"
+    },
+    "./fw-player.js": {
+      "default": "./dist/fw-player.iife.js"
+    }
+  },
+  "scripts": {
+    "build": "pnpm run build:css && pnpm run build:types && NODE_ENV=production rollup -c",
+    "build:watch": "NODE_ENV=development rollup -c --watch",
+    "build:css": "node scripts/generate-shared-styles.js",
+    "build:types": "tsc --noEmit false --emitDeclarationOnly --outDir dist/types",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "dependencies": {
+    "@livepeer-frameworks/player-core": "workspace:*",
+    "lit": "^3.2.0"
+  },
+  "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",
+    "@vitest/coverage-v8": "^4.0.18",
+    "rollup": "^4.57.1",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.2",
+    "vitest": "^4.0.18"
+  },
+  "keywords": [
+    "web-components",
+    "lit",
+    "streaming",
+    "player",
+    "video",
+    "custom-elements"
+  ],
+  "author": "Livepeer FrameWorks",
+  "license": "Unlicense"
+}

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

@@ -0,0 +1,23 @@
+/**
+ * <fw-context-menu> — Placeholder for right-click context menu.
+ * The actual context menu is rendered inline by <fw-player> since it needs
+ * to be positioned relative to mouse coordinates. This component exists
+ * for the module export and define.ts registration.
+ */
+import { LitElement, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("fw-context-menu")
+export class FwContextMenu extends LitElement {
+  static styles = css`
+    :host {
+      display: none;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "fw-context-menu": FwContextMenu;
+  }
+}