@livepeer-frameworks/player-svelte 0.1.2 → 0.2.1

package/src/controls/SkipButton.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  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 translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
+  const fallbackT = createTranslator({ locale: "en" });
+  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+
+  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 : seconds))}
+>
+  {#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,26 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  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 translatorCtx = getContext<Readable<TranslateFn> | undefined>("fw-translator");
+  const fallbackT = createTranslator({ locale: "en" });
+  let t: TranslateFn = $derived(translatorCtx ? $translatorCtx : fallbackT);
+</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

@@ -106,6 +106,8 @@ export interface PlayerControllerStore extends Readable<PlayerControllerState> {
   seek: (time: number) => void;
   /** Seek by delta */
   seekBy: (delta: number) => void;
+  /** Jump to live edge (for live streams) */
+  jumpToLive: () => void;
   /** Set volume */
   setVolume: (volume: number) => void;
   /** Toggle mute */
@@ -485,6 +487,10 @@ export function createPlayerControllerStore(
     controller?.seekBy(delta);
   }
 
+  function jumpToLive(): void {
+    controller?.jumpToLive();
+  }
+
   function setVolume(volume: number): void {
     controller?.setVolume(volume);
   }
@@ -579,6 +585,7 @@ export function createPlayerControllerStore(
     togglePlay,
     seek,
     seekBy,
+    jumpToLive,
     setVolume,
     toggleMute,
     toggleLoop,