@livepeer-frameworks/player-wc 0.1.0

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

@@ -0,0 +1,457 @@
+/**
+ * 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;
+}
+
+const initialState: PlayerControllerHostState = {
+  state: "booting",
+  streamState: null,
+  endpoints: null,
+  metadata: null,
+  videoElement: null,
+  currentTime: 0,
+  duration: NaN,
+  isPlaying: false,
+  isPaused: true,
+  isBuffering: false,
+  isMuted: true,
+  volume: 1,
+  error: null,
+  errorDetails: null,
+  isPassiveError: false,
+  hasPlaybackStarted: false,
+  isHoldingSpeed: false,
+  holdSpeed: 2,
+  isHovering: false,
+  shouldShowControls: false,
+  isLoopEnabled: false,
+  isFullscreen: false,
+  isPiPActive: false,
+  isEffectivelyLive: false,
+  shouldShowIdleScreen: true,
+  currentPlayerInfo: null,
+  currentSourceInfo: null,
+  playbackQuality: null,
+  subtitlesEnabled: false,
+  qualities: [],
+  textTracks: [],
+  streamInfo: null,
+  toast: null,
+};
+
+type HostElement = ReactiveControllerHost & HTMLElement;
+
+export class PlayerControllerHost implements ReactiveController {
+  host: HostElement;
+  private controller: PlayerController | null = null;
+  private unsubs: Array<() => void> = [];
+  private currentConfig: PlayerControllerConfig | null = null;
+
+  s: PlayerControllerHostState = { ...initialState };
+
+  constructor(host: HostElement) {
+    this.host = host;
+    host.addController(this);
+  }
+
+  // ---- Configuration & Lifecycle ----
+
+  configure(config: PlayerControllerConfig) {
+    this.currentConfig = config;
+  }
+
+  async attach(container: HTMLDivElement) {
+    if (!this.currentConfig) return;
+    this.teardown();
+
+    const controller = new PlayerController({
+      contentId: this.currentConfig.contentId,
+      contentType: this.currentConfig.contentType,
+      endpoints: this.currentConfig.endpoints,
+      gatewayUrl: this.currentConfig.gatewayUrl,
+      mistUrl: this.currentConfig.mistUrl,
+      authToken: this.currentConfig.authToken,
+      autoplay: this.currentConfig.autoplay,
+      muted: this.currentConfig.muted,
+      controls: this.currentConfig.controls,
+      poster: this.currentConfig.poster,
+      debug: this.currentConfig.debug,
+    });
+
+    this.controller = controller;
+    this.subscribeToEvents(controller);
+
+    this.update({ isLoopEnabled: controller.isLoopEnabled() });
+
+    try {
+      await controller.attach(container);
+    } catch (err) {
+      console.warn("[PlayerControllerHost] Attach failed:", err);
+    }
+  }
+
+  hostConnected() {
+    // Controller attachment happens in firstUpdated of the host element
+  }
+
+  hostDisconnected() {
+    this.teardown();
+    this.s = { ...initialState };
+  }
+
+  private teardown() {
+    this.unsubs.forEach((fn) => fn());
+    this.unsubs = [];
+    this.controller?.destroy();
+    this.controller = null;
+  }
+
+  // ---- State Updates ----
+
+  private update(partial: Partial<PlayerControllerHostState>) {
+    Object.assign(this.s, partial);
+    this.host.requestUpdate();
+  }
+
+  private syncState() {
+    if (!this.controller) return;
+    const c = this.controller;
+    this.update({
+      isPlaying: c.isPlaying(),
+      isPaused: c.isPaused(),
+      isBuffering: c.isBuffering(),
+      isMuted: c.isMuted(),
+      volume: c.getVolume(),
+      hasPlaybackStarted: c.hasPlaybackStarted(),
+      shouldShowControls: c.shouldShowControls(),
+      shouldShowIdleScreen: c.shouldShowIdleScreen(),
+      playbackQuality: c.getPlaybackQuality(),
+      isLoopEnabled: c.isLoopEnabled(),
+      subtitlesEnabled: c.isSubtitlesEnabled(),
+      qualities: c.getQualities(),
+      streamInfo: c.getStreamInfo(),
+    });
+  }
+
+  // ---- Event Subscriptions (mirrors usePlayerController exactly) ----
+
+  private subscribeToEvents(controller: PlayerController) {
+    const u = this.unsubs;
+
+    u.push(
+      controller.on("stateChange", ({ state }) => {
+        this.update({ state });
+        this.dispatchEvent("fw-state-change", { state });
+      })
+    );
+
+    u.push(
+      controller.on("streamStateChange", ({ state: streamState }) => {
+        this.update({
+          streamState,
+          metadata: controller.getMetadata(),
+          isEffectivelyLive: controller.isEffectivelyLive(),
+          shouldShowIdleScreen: controller.shouldShowIdleScreen(),
+        });
+        this.dispatchEvent("fw-stream-state", { state: streamState });
+      })
+    );
+
+    u.push(
+      controller.on("timeUpdate", ({ currentTime, duration }) => {
+        this.update({ currentTime, duration });
+        this.dispatchEvent("fw-time-update", { currentTime, duration });
+      })
+    );
+
+    u.push(
+      controller.on("error", ({ error }) => {
+        this.update({
+          error,
+          isPassiveError: controller.isPassiveError(),
+        });
+        this.dispatchEvent("fw-error", { error });
+      })
+    );
+
+    u.push(
+      controller.on("errorCleared", () => {
+        this.update({ error: null, isPassiveError: false });
+      })
+    );
+
+    u.push(
+      controller.on("ready", ({ videoElement }) => {
+        this.update({
+          videoElement,
+          endpoints: controller.getEndpoints(),
+          metadata: controller.getMetadata(),
+          streamInfo: controller.getStreamInfo(),
+          isEffectivelyLive: controller.isEffectivelyLive(),
+          shouldShowIdleScreen: controller.shouldShowIdleScreen(),
+          currentPlayerInfo: controller.getCurrentPlayerInfo(),
+          currentSourceInfo: controller.getCurrentSourceInfo(),
+          qualities: controller.getQualities(),
+        });
+        this.dispatchEvent("fw-ready", { videoElement });
+
+        const handleVideoEvent = () => {
+          if (this.controller?.shouldSuppressVideoEvents?.()) return;
+          this.syncState();
+        };
+        videoElement.addEventListener("play", handleVideoEvent);
+        videoElement.addEventListener("pause", handleVideoEvent);
+        videoElement.addEventListener("waiting", handleVideoEvent);
+        videoElement.addEventListener("playing", handleVideoEvent);
+        u.push(() => {
+          videoElement.removeEventListener("play", handleVideoEvent);
+          videoElement.removeEventListener("pause", handleVideoEvent);
+          videoElement.removeEventListener("waiting", handleVideoEvent);
+          videoElement.removeEventListener("playing", handleVideoEvent);
+        });
+      })
+    );
+
+    u.push(
+      controller.on("playerSelected", ({ player: _player, source }) => {
+        this.update({
+          currentPlayerInfo: controller.getCurrentPlayerInfo(),
+          currentSourceInfo: { url: source.url, type: source.type },
+          qualities: controller.getQualities(),
+        });
+      })
+    );
+
+    u.push(
+      controller.on("volumeChange", ({ volume, muted }) => {
+        this.update({ volume, isMuted: muted });
+        this.dispatchEvent("fw-volume-change", { volume, muted });
+      })
+    );
+
+    u.push(
+      controller.on("loopChange", ({ isLoopEnabled }) => {
+        this.update({ isLoopEnabled });
+      })
+    );
+
+    u.push(
+      controller.on("fullscreenChange", ({ isFullscreen }) => {
+        this.update({ isFullscreen });
+        this.dispatchEvent("fw-fullscreen-change", { isFullscreen });
+      })
+    );
+
+    u.push(
+      controller.on("pipChange", ({ isPiP }) => {
+        this.update({ isPiPActive: isPiP });
+        this.dispatchEvent("fw-pip-change", { isPiP });
+      })
+    );
+
+    u.push(
+      controller.on("holdSpeedStart", ({ speed }) => {
+        this.update({ isHoldingSpeed: true, holdSpeed: speed });
+      })
+    );
+
+    u.push(
+      controller.on("holdSpeedEnd", () => {
+        this.update({ isHoldingSpeed: false });
+      })
+    );
+
+    u.push(
+      controller.on("hoverStart", () => {
+        this.update({ isHovering: true, shouldShowControls: true });
+      })
+    );
+
+    u.push(
+      controller.on("hoverEnd", () => {
+        this.update({
+          isHovering: false,
+          shouldShowControls: controller.shouldShowControls(),
+        });
+      })
+    );
+
+    u.push(
+      controller.on("captionsChange", ({ enabled }) => {
+        this.update({ subtitlesEnabled: enabled });
+      })
+    );
+
+    u.push(
+      controller.on("protocolSwapped", (data) => {
+        const message = `Switched to ${data.toProtocol}`;
+        this.update({ toast: { message, timestamp: Date.now() } });
+        this.dispatchEvent("fw-protocol-swapped", data);
+      })
+    );
+
+    u.push(
+      controller.on("playbackFailed", (data) => {
+        this.update({
+          error: data.message,
+          errorDetails: data.details ?? null,
+          isPassiveError: false,
+        });
+        this.dispatchEvent("fw-playback-failed", {
+          code: data.code,
+          message: data.message,
+        });
+      })
+    );
+  }
+
+  // ---- Event Dispatching ----
+
+  private dispatchEvent(name: string, detail: unknown) {
+    this.host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+  }
+
+  // ---- Action Methods ----
+
+  async play() {
+    await this.controller?.play();
+  }
+  pause() {
+    this.controller?.pause();
+  }
+  togglePlay() {
+    this.controller?.togglePlay();
+  }
+  seek(time: number) {
+    this.controller?.seek(time);
+  }
+  seekBy(delta: number) {
+    this.controller?.seekBy(delta);
+  }
+  jumpToLive() {
+    this.controller?.jumpToLive();
+  }
+  setVolume(volume: number) {
+    this.controller?.setVolume(volume);
+  }
+  toggleMute() {
+    this.controller?.toggleMute();
+  }
+  toggleLoop() {
+    this.controller?.toggleLoop();
+  }
+  async toggleFullscreen() {
+    await this.controller?.toggleFullscreen();
+  }
+  async togglePiP() {
+    await this.controller?.togglePictureInPicture();
+  }
+  toggleSubtitles() {
+    this.controller?.toggleSubtitles();
+  }
+
+  clearError() {
+    this.controller?.clearError();
+    this.update({ error: null, errorDetails: null, isPassiveError: false });
+  }
+
+  dismissToast() {
+    this.update({ toast: null });
+  }
+
+  async retry() {
+    await this.controller?.retry();
+  }
+  async reload() {
+    await this.controller?.reload();
+  }
+
+  getQualities() {
+    return this.controller?.getQualities() ?? [];
+  }
+  selectQuality(id: string) {
+    this.controller?.selectQuality(id);
+  }
+
+  handleMouseEnter() {
+    this.controller?.handleMouseEnter();
+  }
+  handleMouseLeave() {
+    this.controller?.handleMouseLeave();
+  }
+  handleMouseMove() {
+    this.controller?.handleMouseMove();
+  }
+  handleTouchStart() {
+    this.controller?.handleTouchStart();
+  }
+
+  async setDevModeOptions(options: {
+    forcePlayer?: string;
+    forceType?: string;
+    forceSource?: number;
+    playbackMode?: "auto" | "low-latency" | "quality" | "vod";
+  }) {
+    await this.controller?.setDevModeOptions(options);
+  }
+
+  getController(): PlayerController | null {
+    return this.controller;
+  }
+}

package/src/define.ts

@@ -0,0 +1,43 @@
+/**
+ * Side-effect import that registers all custom elements.
+ * Usage: import '@livepeer-frameworks/player-wc/define';
+ */
+import { FwPlayer } from "./components/fw-player.js";
+import { FwPlayerControls } from "./components/fw-player-controls.js";
+import { FwSeekBar } from "./components/fw-seek-bar.js";
+import { FwVolumeControl } from "./components/fw-volume-control.js";
+import { FwSettingsMenu } from "./components/fw-settings-menu.js";
+import { FwIdleScreen } from "./components/fw-idle-screen.js";
+import { FwLoadingSpinner } from "./components/fw-loading-spinner.js";
+import { FwTitleOverlay } from "./components/fw-title-overlay.js";
+import { FwErrorOverlay } from "./components/fw-error-overlay.js";
+import { FwToast } from "./components/fw-toast.js";
+import { FwStatsPanel } from "./components/fw-stats-panel.js";
+import { FwDevModePanel } from "./components/fw-dev-mode-panel.js";
+import { FwSubtitleRenderer } from "./components/fw-subtitle-renderer.js";
+import { FwSkipIndicator } from "./components/fw-skip-indicator.js";
+import { FwSpeedIndicator } from "./components/fw-speed-indicator.js";
+import { FwContextMenu } from "./components/fw-context-menu.js";
+
+function safeDefine(name: string, ctor: CustomElementConstructor) {
+  if (!customElements.get(name)) {
+    customElements.define(name, ctor);
+  }
+}
+
+safeDefine("fw-player", FwPlayer);
+safeDefine("fw-player-controls", FwPlayerControls);
+safeDefine("fw-seek-bar", FwSeekBar);
+safeDefine("fw-volume-control", FwVolumeControl);
+safeDefine("fw-settings-menu", FwSettingsMenu);
+safeDefine("fw-idle-screen", FwIdleScreen);
+safeDefine("fw-loading-spinner", FwLoadingSpinner);
+safeDefine("fw-title-overlay", FwTitleOverlay);
+safeDefine("fw-error-overlay", FwErrorOverlay);
+safeDefine("fw-toast", FwToast);
+safeDefine("fw-stats-panel", FwStatsPanel);
+safeDefine("fw-dev-mode-panel", FwDevModePanel);
+safeDefine("fw-subtitle-renderer", FwSubtitleRenderer);
+safeDefine("fw-skip-indicator", FwSkipIndicator);
+safeDefine("fw-speed-indicator", FwSpeedIndicator);
+safeDefine("fw-context-menu", FwContextMenu);

package/src/icons/index.ts

@@ -0,0 +1,209 @@
+/**
+ * SVG icons as Lit html template functions.
+ * Port of Icons.tsx from player-react.
+ */
+import { html, svg, type TemplateResult } from "lit";
+
+type IconTemplate = (size?: number, color?: string) => TemplateResult;
+
+export const playIcon: IconTemplate = (size = 16, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M8 5v14l11-7z" fill="${color}" />
+  </svg>
+`;
+
+export const pauseIcon: IconTemplate = (size = 16, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <rect x="6" y="4" width="4" height="16" fill="${color}" />
+    <rect x="14" y="4" width="4" height="16" fill="${color}" />
+  </svg>
+`;
+
+export const skipBackIcon: IconTemplate = (size = 16, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path
+      d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"
+      fill="${color}"
+    />
+    ${svg`<text x="12" y="15" font-size="7" font-weight="bold" fill="${color}" text-anchor="middle">10</text>`}
+  </svg>
+`;
+
+export const skipForwardIcon: IconTemplate = (size = 16, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path
+      d="M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"
+      fill="${color}"
+    />
+    ${svg`<text x="12" y="15" font-size="7" font-weight="bold" fill="${color}" text-anchor="middle">10</text>`}
+  </svg>
+`;
+
+export const volumeUpIcon: IconTemplate = (size = 16, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <polygon points="11,5 6,9 2,9 2,15 6,15 11,19" fill="${color}" />
+    <path
+      d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"
+      stroke="${color}"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;
+
+export const volumeOffIcon: IconTemplate = (size = 16, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <polygon points="11,5 6,9 2,9 2,15 6,15 11,19" fill="${color}" />
+    <line
+      x1="23"
+      y1="9"
+      x2="17"
+      y2="15"
+      stroke="${color}"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+    <line
+      x1="17"
+      y1="9"
+      x2="23"
+      y2="15"
+      stroke="${color}"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+  </svg>
+`;
+
+export const fullscreenIcon: IconTemplate = (size = 16, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path
+      d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3"
+      stroke="${color}"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;
+
+export const fullscreenExitIcon: IconTemplate = (size = 16, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path
+      d="M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3"
+      stroke="${color}"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;
+
+export const pictureInPictureIcon: IconTemplate = (size = 16, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <rect
+      x="2"
+      y="3"
+      width="20"
+      height="14"
+      rx="2"
+      ry="2"
+      stroke="${color}"
+      stroke-width="2"
+      fill="none"
+    />
+    <rect x="8" y="10" width="10" height="6" rx="1" ry="1" fill="${color}" />
+  </svg>
+`;
+
+export const closedCaptionsIcon: IconTemplate = (size = 16, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <rect
+      x="2"
+      y="4"
+      width="20"
+      height="16"
+      rx="2"
+      ry="2"
+      stroke="${color}"
+      stroke-width="2"
+      fill="none"
+    />
+    <path
+      d="M8 10c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v4c0 .6-.4 1-1 1H9c-.6 0-1-.4-1-1v-4zM14 10c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v4c0 .6-.4 1-1 1h-1c-.6 0-1-.4-1-1v-4z"
+      fill="${color}"
+    />
+  </svg>
+`;
+
+export const liveIcon: IconTemplate = (size = 16, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <circle cx="12" cy="12" r="3" fill="${color}" />
+    <path
+      d="M12 1v6M12 17v6M4.22 4.22l4.24 4.24M15.54 15.54l4.24 4.24M1 12h6M17 12h6M4.22 19.78l4.24-4.24M15.54 8.46l4.24-4.24"
+      stroke="${color}"
+      stroke-width="2"
+      stroke-linecap="round"
+    />
+  </svg>
+`;
+
+export const settingsIcon: IconTemplate = (size = 16, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path
+      d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+      stroke="${color}"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1Z"
+      stroke="${color}"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;
+
+export const statsIcon: IconTemplate = (size = 16, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <rect x="4" y="13" width="4" height="7" fill="${color}" />
+    <rect x="10" y="9" width="4" height="11" fill="${color}" />
+    <rect x="16" y="4" width="4" height="16" fill="${color}" />
+  </svg>
+`;
+
+export const seekToLiveIcon: IconTemplate = (size = 16, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+    <path d="M5 5v14l11-7z" fill="${color}" />
+    <rect x="17" y="5" width="3" height="14" fill="${color}" />
+  </svg>
+`;
+
+export const closeIcon: IconTemplate = (size = 12, color = "currentColor") => html`
+  <svg width="${size}" height="${size}" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+    <path d="M9 3L3 9M3 3L9 9" stroke="${color}" stroke-width="1.5" stroke-linecap="round" />
+  </svg>
+`;
+
+export const loopIcon: IconTemplate = (size = 14, color = "currentColor") => html`
+  <svg
+    width="${size}"
+    height="${size}"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="${color}"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    <polyline points="17 1 21 5 17 9"></polyline>
+    <path d="M3 11V9a4 4 0 0 1 4-4h14"></path>
+    <polyline points="7 23 3 19 7 15"></polyline>
+    <path d="M21 13v2a4 4 0 0 1-4 4H3"></path>
+  </svg>
+`;