@livepeer-frameworks/player-svelte 0.1.3 → 0.2.3

package/src/controls/LiveBadge.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { readable } from "svelte/store";
+  import type { Readable } from "svelte/store";
+  import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
+  import { SeekToLiveIcon } from "../icons";
+
+  let pc: any = getContext("fw-player-controller");
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
+</script>
+
+{#if pc?.isEffectivelyLive}
+  <button
+    type="button"
+    class="fw-live-badge fw-live-badge--active"
+    onclick={() => pc?.jumpToLive()}
+    aria-label={t("live")}
+  >
+    {t("live").toUpperCase()}
+    <SeekToLiveIcon size={10} />
+  </button>
+{/if}

package/src/controls/PlayButton.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { readable } from "svelte/store";
+  import type { Readable } from "svelte/store";
+  import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
+  import { PlayIcon, PauseIcon } from "../icons";
+
+  let pc: any = getContext("fw-player-controller");
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
+</script>
+
+<button
+  type="button"
+  class="fw-btn-flush"
+  aria-label={pc?.isPlaying ? t("pause") : t("play")}
+  aria-pressed={pc?.isPlaying ?? false}
+  title={pc?.isPlaying ? t("pause") : t("play")}
+  onclick={() => pc?.togglePlay()}
+>
+  {#if pc?.isPlaying}
+    <PauseIcon size={18} />
+  {:else}
+    <PlayIcon size={18} />
+  {/if}
+</button>

package/src/controls/SettingsMenu.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { readable } from "svelte/store";
+  import type { Readable } from "svelte/store";
+  import { SettingsIcon } from "../icons";
+  import {
+    SPEED_PRESETS,
+    getAvailableLocales,
+    getLocaleDisplayName,
+    createTranslator,
+    type TranslateFn,
+  } from "@livepeer-frameworks/player-core";
+  import type { FwLocale } from "@livepeer-frameworks/player-core";
+
+  interface Props {
+    qualities?: Array<{ id: string; label: string; active?: boolean }>;
+    activeQuality?: string;
+    onSelectQuality?: (id: string) => void;
+    textTracks?: Array<{ id: string; label: string; active?: boolean }>;
+    activeCaption?: string;
+    onSelectCaption?: (id: string) => void;
+    playbackRate?: number;
+    onSpeedChange?: (rate: number) => void;
+    supportsSpeed?: boolean;
+    playbackMode?: "auto" | "low-latency" | "quality";
+    onModeChange?: (mode: "auto" | "low-latency" | "quality") => void;
+    showModeSelector?: boolean;
+    activeLocale?: FwLocale;
+    onLocaleChange?: (locale: FwLocale) => void;
+  }
+
+  let {
+    qualities: propQualities,
+    activeQuality,
+    onSelectQuality,
+    textTracks: propTextTracks,
+    activeCaption,
+    onSelectCaption,
+    playbackRate = 1,
+    onSpeedChange,
+    supportsSpeed = true,
+    playbackMode,
+    onModeChange,
+    showModeSelector = false,
+    activeLocale = undefined,
+    onLocaleChange = undefined,
+  }: Props = $props();
+
+  let availableLocales = getAvailableLocales();
+
+  let controller: any = getContext("fw-player-controller");
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
+  let isOpen = $state(false);
+
+  let qualities = $derived(propQualities ?? controller?.getQualities?.() ?? []);
+  let qualityValue = $derived(activeQuality ?? qualities.find((q: any) => q.active)?.id ?? "auto");
+  let textTracks = $derived(propTextTracks ?? []);
+  let captionValue = $derived(activeCaption ?? textTracks.find((t: any) => t.active)?.id ?? "none");
+
+  function selectQuality(id: string) {
+    if (onSelectQuality) onSelectQuality(id);
+    else controller?.selectQuality?.(id);
+    isOpen = false;
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      isOpen = false;
+      e.preventDefault();
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const menu = e.currentTarget as HTMLElement;
+      const items = menu.querySelectorAll<HTMLButtonElement>("button");
+      if (!items.length) return;
+      const current = Array.from(items).indexOf(document.activeElement as HTMLButtonElement);
+      const next =
+        e.key === "ArrowDown"
+          ? (current + 1) % items.length
+          : (current - 1 + items.length) % items.length;
+      items[next]?.focus();
+    }
+  }
+</script>
+
+<div class="fw-control-group" style="position: relative">
+  <button
+    type="button"
+    class="fw-btn-flush group"
+    class:fw-btn-flush--active={isOpen}
+    aria-label={t("settings")}
+    title={t("settings")}
+    onclick={() => (isOpen = !isOpen)}
+  >
+    <SettingsIcon size={16} />
+  </button>
+
+  {#if isOpen}
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <div class="fw-settings-menu" role="menu" aria-label={t("settings")} onkeydown={handleKeyDown}>
+      {#if showModeSelector && onModeChange}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("mode")}</div>
+          <div class="fw-settings-options">
+            {#each ["auto", "low-latency", "quality"] as mode}
+              <button
+                class="fw-settings-btn"
+                class:fw-settings-btn--active={playbackMode === mode}
+                onclick={() => {
+                  onModeChange?.(mode as any);
+                  isOpen = false;
+                }}
+              >
+                {mode === "low-latency" ? t("fast") : mode === "quality" ? t("stable") : t("auto")}
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if supportsSpeed}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("speed")}</div>
+          <div class="fw-settings-options fw-settings-options--wrap">
+            {#each SPEED_PRESETS as rate}
+              <button
+                class="fw-settings-btn"
+                class:fw-settings-btn--active={playbackRate === rate}
+                onclick={() => {
+                  onSpeedChange?.(rate);
+                  isOpen = false;
+                }}
+              >
+                {rate}x
+              </button>
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if qualities.length > 0}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("quality")}</div>
+          <div class="fw-settings-list">
+            <button
+              class="fw-settings-list-item"
+              class:fw-settings-list-item--active={qualityValue === "auto"}
+              onclick={() => selectQuality("auto")}>{t("auto")}</button
+            >
+            {#each qualities as q}
+              <button
+                class="fw-settings-list-item"
+                class:fw-settings-list-item--active={qualityValue === q.id}
+                onclick={() => selectQuality(q.id)}>{q.label}</button
+              >
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if textTracks.length > 0}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("captions")}</div>
+          <div class="fw-settings-list">
+            <button
+              class="fw-settings-list-item"
+              class:fw-settings-list-item--active={captionValue === "none"}
+              onclick={() => {
+                onSelectCaption?.("none");
+                isOpen = false;
+              }}>{t("captionsOff")}</button
+            >
+            {#each textTracks as tt}
+              <button
+                class="fw-settings-list-item"
+                class:fw-settings-list-item--active={captionValue === tt.id}
+                onclick={() => {
+                  onSelectCaption?.(tt.id);
+                  isOpen = false;
+                }}>{tt.label || tt.id}</button
+              >
+            {/each}
+          </div>
+        </div>
+      {/if}
+
+      {#if onLocaleChange}
+        <div class="fw-settings-section">
+          <div class="fw-settings-label">{t("language")}</div>
+          <div class="fw-settings-list">
+            {#each availableLocales as l}
+              <button
+                class="fw-settings-list-item"
+                class:fw-settings-list-item--active={activeLocale === l}
+                onclick={() => {
+                  onLocaleChange?.(l);
+                  isOpen = false;
+                }}>{getLocaleDisplayName(l)}</button
+              >
+            {/each}
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>

package/src/controls/SkipButton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { readable } from "svelte/store";
+  import type { Readable } from "svelte/store";
+  import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
+  import { SkipBackIcon, SkipForwardIcon } from "../icons";
+
+  interface Props {
+    direction: "back" | "forward";
+    seconds?: number;
+  }
+
+  let { direction, seconds = 10 }: Props = $props();
+  let pc: any = getContext("fw-player-controller");
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
+
+  let label = $derived(direction === "back" ? t("skipBackward") : t("skipForward"));
+</script>
+
+<button
+  type="button"
+  class="fw-btn-flush"
+  aria-label={label}
+  title={label}
+  onclick={() =>
+    pc?.seek((pc?.currentTime ?? 0) + (direction === "back" ? -seconds * 1000 : seconds * 1000))}
+>
+  {#if direction === "back"}
+    <SkipBackIcon size={16} />
+  {:else}
+    <SkipForwardIcon size={16} />
+  {/if}
+</button>

package/src/controls/TimeDisplay.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { formatTimeDisplay } from "@livepeer-frameworks/player-core";
+
+  let pc: any = getContext("fw-player-controller");
+
+  let timeText = $derived(
+    formatTimeDisplay({
+      isLive: pc?.isEffectivelyLive ?? false,
+      currentTime: pc?.currentTime ?? 0,
+      duration: pc?.duration ?? NaN,
+      liveEdge: pc?.duration ?? 0,
+      seekableStart: 0,
+    })
+  );
+</script>
+
+<span class="fw-time-display">{timeText}</span>

package/src/controls/VolumeControl.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import { readable } from "svelte/store";
+  import type { Readable } from "svelte/store";
+  import { createTranslator, type TranslateFn } from "@livepeer-frameworks/player-core";
+  import { VolumeUpIcon, VolumeOffIcon } from "../icons";
+
+  let pc: any = getContext("fw-player-controller");
+  const translatorStore: Readable<TranslateFn> =
+    getContext<Readable<TranslateFn> | undefined>("fw-translator") ??
+    readable(createTranslator({ locale: "en" }));
+  let t: TranslateFn = $derived($translatorStore);
+</script>
+
+<button
+  type="button"
+  class="fw-btn-flush"
+  aria-label={pc?.isMuted ? t("unmute") : t("mute")}
+  aria-pressed={pc?.isMuted ?? false}
+  title={pc?.isMuted ? t("unmute") : t("mute")}
+  onclick={() => pc?.toggleMute()}
+>
+  {#if pc?.isMuted}
+    <VolumeOffIcon size={16} />
+  {:else}
+    <VolumeUpIcon size={16} />
+  {/if}
+</button>

package/src/controls/index.ts

@@ -0,0 +1,7 @@
+export { default as PlayButton } from "./PlayButton.svelte";
+export { default as SkipButton } from "./SkipButton.svelte";
+export { default as VolumeControl } from "./VolumeControl.svelte";
+export { default as TimeDisplay } from "./TimeDisplay.svelte";
+export { default as LiveBadge } from "./LiveBadge.svelte";
+export { default as FullscreenButton } from "./FullscreenButton.svelte";
+export { default as SettingsMenu } from "./SettingsMenu.svelte";

package/src/index.ts

@@ -48,6 +48,9 @@ export { default as ThumbnailOverlay } from "./ThumbnailOverlay.svelte";
 export { default as StatsPanel } from "./StatsPanel.svelte";
 export { default as DevModePanel } from "./DevModePanel.svelte";
 
+// Composable control components
+export * from "./controls";
+
 // Icon components
 export * from "./icons";
 
@@ -65,6 +68,9 @@ export {
   PlayerController,
   PlayerManager,
   globalPlayerManager,
+  createTranslator,
+  getAvailableLocales,
+  getLocaleDisplayName,
 } from "@livepeer-frameworks/player-core";
 export type {
   PlayerControllerConfig,
@@ -88,4 +94,8 @@ export type {
   PlayerCombination,
   PlayerManagerOptions,
   PlayerManagerEvents,
+  FwLocale,
+  TranslateFn,
+  TranslationStrings,
+  I18nConfig,
 } from "@livepeer-frameworks/player-core";

package/src/stores/i18n.ts

@@ -0,0 +1,7 @@
+import { writable, derived } from "svelte/store";
+import { createTranslator, type FwLocale } from "@livepeer-frameworks/player-core";
+
+export const localeStore = writable<FwLocale>("en");
+export const translatorStore = derived(localeStore, ($locale) =>
+  createTranslator({ locale: $locale })
+);

package/src/stores/index.ts

@@ -71,6 +71,9 @@ export {
   type PlayerSelectionStore,
 } from "./playerSelection";
 
+// i18n (locale + translator)
+export { localeStore, translatorStore } from "./i18n";
+
 // PlayerController store (central orchestrator)
 export {
   createPlayerControllerStore,

package/src/stores/playerController.ts

@@ -35,9 +35,9 @@ export interface PlayerControllerState {
   metadata: ContentMetadata | null;
   /** Video element (null if not ready) */
   videoElement: HTMLVideoElement | null;
-  /** Current time */
+  /** Current time in milliseconds */
   currentTime: number;
-  /** Duration */
+  /** Duration in milliseconds */
   duration: number;
   /** Is playing */
   isPlaying: boolean;
@@ -102,9 +102,9 @@ export interface PlayerControllerStore extends Readable<PlayerControllerState> {
   pause: () => void;
   /** Toggle play/pause */
   togglePlay: () => void;
-  /** Seek to time */
+  /** Seek to time (milliseconds) */
   seek: (time: number) => void;
-  /** Seek by delta */
+  /** Seek by delta (milliseconds) */
   seekBy: (delta: number) => void;
   /** Jump to live edge (for live streams) */
   jumpToLive: () => void;
@@ -164,7 +164,7 @@ const initialState: PlayerControllerState = {
   isPlaying: false,
   isPaused: true,
   isBuffering: false,
-  isMuted: true,
+  isMuted: false,
   volume: 1,
   error: null,
   errorDetails: null,