@livepeer-frameworks/player-svelte 0.1.1 → 0.1.3

package/dist/stores/streamState.js

@@ -3,56 +3,56 @@
  *
  * Port of useStreamState.ts React hook to Svelte 5 stores.
  */
-import { writable, derived } from 'svelte/store';
+import { writable, derived } from "svelte/store";
 /**
  * Parse MistServer error string into StreamStatus enum
  */
 function parseErrorToStatus(error) {
     const lowerError = error.toLowerCase();
-    if (lowerError.includes('offline'))
-        return 'OFFLINE';
-    if (lowerError.includes('initializing'))
-        return 'INITIALIZING';
-    if (lowerError.includes('booting'))
-        return 'BOOTING';
-    if (lowerError.includes('waiting for data'))
-        return 'WAITING_FOR_DATA';
-    if (lowerError.includes('shutting down'))
-        return 'SHUTTING_DOWN';
-    if (lowerError.includes('invalid'))
-        return 'INVALID';
-    return 'ERROR';
+    if (lowerError.includes("offline"))
+        return "OFFLINE";
+    if (lowerError.includes("initializing"))
+        return "INITIALIZING";
+    if (lowerError.includes("booting"))
+        return "BOOTING";
+    if (lowerError.includes("waiting for data"))
+        return "WAITING_FOR_DATA";
+    if (lowerError.includes("shutting down"))
+        return "SHUTTING_DOWN";
+    if (lowerError.includes("invalid"))
+        return "INVALID";
+    return "ERROR";
 }
 /**
  * Get human-readable message for stream status
  */
 function getStatusMessage(status, percentage) {
     switch (status) {
-        case 'ONLINE':
-            return 'Stream is online';
-        case 'OFFLINE':
-            return 'Stream is offline';
-        case 'INITIALIZING':
+        case "ONLINE":
+            return "Stream is online";
+        case "OFFLINE":
+            return "Stream is offline";
+        case "INITIALIZING":
             return percentage !== undefined
                 ? `Initializing... ${Math.round(percentage * 10) / 10}%`
-                : 'Stream is initializing';
-        case 'BOOTING':
-            return 'Stream is starting up';
-        case 'WAITING_FOR_DATA':
-            return 'Waiting for stream data';
-        case 'SHUTTING_DOWN':
-            return 'Stream is shutting down';
-        case 'INVALID':
-            return 'Stream status is invalid';
-        case 'ERROR':
+                : "Stream is initializing";
+        case "BOOTING":
+            return "Stream is starting up";
+        case "WAITING_FOR_DATA":
+            return "Waiting for stream data";
+        case "SHUTTING_DOWN":
+            return "Stream is shutting down";
+        case "INVALID":
+            return "Stream status is invalid";
+        case "ERROR":
         default:
-            return 'Stream error';
+            return "Stream error";
     }
 }
 const initialState = {
-    status: 'OFFLINE',
+    status: "OFFLINE",
     isOnline: false,
-    message: 'Connecting...',
+    message: "Connecting...",
     lastUpdate: 0,
 };
 /**
@@ -93,7 +93,7 @@ export function createStreamStateManager(options) {
         if (data.error) {
             const status = parseErrorToStatus(data.error);
             const message = data.on_error || getStatusMessage(status, data.perc);
-            store.update(prev => ({
+            store.update((prev) => ({
                 status,
                 isOnline: false,
                 message,
@@ -105,7 +105,7 @@ export function createStreamStateManager(options) {
         }
         else {
             // Stream is online with valid metadata
-            store.update(prev => {
+            store.update((prev) => {
                 const mergedStreamInfo = {
                     ...prev.streamInfo,
                     ...data,
@@ -117,9 +117,9 @@ export function createStreamStateManager(options) {
                     },
                 };
                 return {
-                    status: 'ONLINE',
+                    status: "ONLINE",
                     isOnline: true,
-                    message: 'Stream is online',
+                    message: "Stream is online",
                     lastUpdate: Date.now(),
                     streamInfo: mergedStreamInfo,
                 };
@@ -133,11 +133,11 @@ export function createStreamStateManager(options) {
         if (!mounted || !enabled)
             return;
         try {
-            const baseUrl = `${mistBaseUrl.replace(/\/$/, '')}/json_${encodeURIComponent(streamName)}.js`;
+            const baseUrl = `${mistBaseUrl.replace(/\/$/, "")}/json_${encodeURIComponent(streamName)}.js`;
             const url = `${baseUrl}?metaeverywhere=1&inclzero=1`;
             const response = await fetch(url, {
-                method: 'GET',
-                headers: { 'Accept': 'application/json' },
+                method: "GET",
+                headers: { Accept: "application/json" },
             });
             if (!response.ok) {
                 throw new Error(`HTTP ${response.status}`);
@@ -154,13 +154,13 @@ export function createStreamStateManager(options) {
         catch (error) {
             if (!mounted)
                 return;
-            store.update(prev => ({
+            store.update((prev) => ({
                 ...prev,
-                status: 'ERROR',
+                status: "ERROR",
                 isOnline: false,
-                message: error instanceof Error ? error.message : 'Connection failed',
+                message: error instanceof Error ? error.message : "Connection failed",
                 lastUpdate: Date.now(),
-                error: error instanceof Error ? error.message : 'Unknown error',
+                error: error instanceof Error ? error.message : "Unknown error",
             }));
         }
         // Schedule next poll
@@ -185,22 +185,22 @@ export function createStreamStateManager(options) {
         }
         try {
             const wsUrl = mistBaseUrl
-                .replace(/^http:/, 'ws:')
-                .replace(/^https:/, 'wss:')
-                .replace(/\/$/, '');
+                .replace(/^http:/, "ws:")
+                .replace(/^https:/, "wss:")
+                .replace(/\/$/, "");
             const url = `${wsUrl}/json_${encodeURIComponent(streamName)}.js?metaeverywhere=1&inclzero=1`;
             const socket = new WebSocket(url);
             ws = socket;
             // Timeout: if no message within 5 seconds, fall back to HTTP
             wsTimeout = setTimeout(() => {
                 if (socket.readyState <= WebSocket.OPEN) {
-                    console.debug('[streamState] WebSocket timeout (5s), falling back to HTTP');
+                    console.debug("[streamState] WebSocket timeout (5s), falling back to HTTP");
                     socket.close();
                     pollHttp();
                 }
             }, WS_TIMEOUT_MS);
             socket.onopen = () => {
-                console.debug('[streamState] WebSocket connected');
+                console.debug("[streamState] WebSocket connected");
                 socketReady.set(true);
             };
             socket.onmessage = (event) => {
@@ -213,11 +213,11 @@ export function createStreamStateManager(options) {
                     processStreamInfo(data);
                 }
                 catch (e) {
-                    console.warn('[streamState] Failed to parse WebSocket message:', e);
+                    console.warn("[streamState] Failed to parse WebSocket message:", e);
                 }
             };
             socket.onerror = () => {
-                console.warn('[streamState] WebSocket error, falling back to HTTP');
+                console.warn("[streamState] WebSocket error, falling back to HTTP");
                 if (wsTimeout) {
                     clearTimeout(wsTimeout);
                     wsTimeout = null;
@@ -229,12 +229,12 @@ export function createStreamStateManager(options) {
                 socketReady.set(false);
                 if (!mounted || !enabled)
                     return;
-                console.debug('[streamState] WebSocket closed, starting HTTP polling');
+                console.debug("[streamState] WebSocket closed, starting HTTP polling");
                 pollHttp();
             };
         }
         catch (error) {
-            console.warn('[streamState] WebSocket connection failed:', error);
+            console.warn("[streamState] WebSocket connection failed:", error);
             pollHttp();
         }
     }
@@ -281,7 +281,7 @@ export function createStreamStateManager(options) {
     if (enabled && mistBaseUrl && streamName) {
         store.set({
             ...initialState,
-            message: 'Connecting...',
+            message: "Connecting...",
             lastUpdate: Date.now(),
         });
         // Initial HTTP poll then WebSocket
@@ -303,12 +303,12 @@ export function createStreamStateManager(options) {
 }
 // Convenience derived stores for common values
 export function createDerivedStreamStatus(store) {
-    return derived(store, $state => $state.status);
+    return derived(store, ($state) => $state.status);
 }
 export function createDerivedIsOnline(store) {
-    return derived(store, $state => $state.isOnline);
+    return derived(store, ($state) => $state.isOnline);
 }
 export function createDerivedStreamInfo(store) {
-    return derived(store, $state => $state.streamInfo);
+    return derived(store, ($state) => $state.streamInfo);
 }
 export default createStreamStateManager;

package/dist/stores/viewerEndpoints.d.ts

@@ -3,15 +3,15 @@
  *
  * Port of useViewerEndpoints.ts React hook to Svelte 5 stores.
  */
-import { type Readable } from 'svelte/store';
-import type { ContentEndpoints, ContentType } from '@livepeer-frameworks/player-core';
+import { type Readable } from "svelte/store";
+import type { ContentEndpoints, ContentType } from "@livepeer-frameworks/player-core";
 export interface ViewerEndpointsOptions {
     gatewayUrl: string;
     contentId: string;
     contentType?: ContentType;
     authToken?: string;
 }
-export type EndpointStatus = 'idle' | 'loading' | 'ready' | 'error';
+export type EndpointStatus = "idle" | "loading" | "ready" | "error";
 export interface ViewerEndpointsState {
     endpoints: ContentEndpoints | null;
     status: EndpointStatus;

package/dist/stores/viewerEndpoints.js

@@ -3,7 +3,7 @@
  *
  * Port of useViewerEndpoints.ts React hook to Svelte 5 stores.
  */
-import { writable, derived } from 'svelte/store';
+import { writable, derived } from "svelte/store";
 const MAX_RETRIES = 3;
 const INITIAL_DELAY_MS = 500;
 /**
@@ -17,7 +17,7 @@ async function fetchWithRetry(url, options, maxRetries = MAX_RETRIES, initialDel
             return response;
         }
         catch (e) {
-            lastError = e instanceof Error ? e : new Error('Fetch failed');
+            lastError = e instanceof Error ? e : new Error("Fetch failed");
             // Don't retry on abort
             if (options.signal?.aborted) {
                 throw lastError;
@@ -26,15 +26,15 @@ async function fetchWithRetry(url, options, maxRetries = MAX_RETRIES, initialDel
             if (attempt < maxRetries - 1) {
                 const delay = initialDelay * Math.pow(2, attempt);
                 console.warn(`[viewerEndpoints] Retry ${attempt + 1}/${maxRetries - 1} after ${delay}ms`);
-                await new Promise(resolve => setTimeout(resolve, delay));
+                await new Promise((resolve) => setTimeout(resolve, delay));
             }
         }
     }
-    throw lastError ?? new Error('Gateway unreachable after retries');
+    throw lastError ?? new Error("Gateway unreachable after retries");
 }
 const initialState = {
     endpoints: null,
-    status: 'idle',
+    status: "idle",
     error: null,
 };
 /**
@@ -70,9 +70,9 @@ export function createEndpointResolver(options) {
         // Abort previous request
         abortController?.abort();
         abortController = new AbortController();
-        store.update(s => ({ ...s, status: 'loading', error: null }));
+        store.update((s) => ({ ...s, status: "loading", error: null }));
         try {
-            const graphqlEndpoint = gatewayUrl.replace(/\/$/, '');
+            const graphqlEndpoint = gatewayUrl.replace(/\/$/, "");
             const query = `
         query ResolveViewer($contentId: String!) {
           resolveViewerEndpoint(contentId: $contentId) {
@@ -83,9 +83,9 @@ export function createEndpointResolver(options) {
         }
       `;
             const res = await fetchWithRetry(graphqlEndpoint, {
-                method: 'POST',
+                method: "POST",
                 headers: {
-                    'Content-Type': 'application/json',
+                    "Content-Type": "application/json",
                     ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
                 },
                 body: JSON.stringify({ query, variables: { contentId } }),
@@ -95,15 +95,15 @@ export function createEndpointResolver(options) {
                 throw new Error(`Gateway GQL error ${res.status}`);
             const payload = await res.json();
             if (payload.errors?.length) {
-                throw new Error(payload.errors[0]?.message || 'GraphQL error');
+                throw new Error(payload.errors[0]?.message || "GraphQL error");
             }
             const resp = payload.data?.resolveViewerEndpoint;
             const primary = resp?.primary;
             const fallbacks = Array.isArray(resp?.fallbacks) ? resp.fallbacks : [];
             if (!primary)
-                throw new Error('No endpoints');
+                throw new Error("No endpoints");
             // Parse outputs JSON string (GraphQL returns JSON scalar as string)
-            if (primary.outputs && typeof primary.outputs === 'string') {
+            if (primary.outputs && typeof primary.outputs === "string") {
                 try {
                     primary.outputs = JSON.parse(primary.outputs);
                 }
@@ -111,7 +111,7 @@ export function createEndpointResolver(options) {
             }
             if (fallbacks) {
                 fallbacks.forEach((fb) => {
-                    if (fb.outputs && typeof fb.outputs === 'string') {
+                    if (fb.outputs && typeof fb.outputs === "string") {
                         try {
                             fb.outputs = JSON.parse(fb.outputs);
                         }
@@ -121,18 +121,18 @@ export function createEndpointResolver(options) {
             }
             store.set({
                 endpoints: { primary, fallbacks, metadata: resp?.metadata },
-                status: 'ready',
+                status: "ready",
                 error: null,
             });
         }
         catch (e) {
             if (abortController?.signal.aborted || !mounted)
                 return;
-            const message = e instanceof Error ? e.message : 'Unknown gateway error';
-            console.error('[viewerEndpoints] Gateway resolution failed:', message);
+            const message = e instanceof Error ? e.message : "Unknown gateway error";
+            console.error("[viewerEndpoints] Gateway resolution failed:", message);
             store.set({
                 endpoints: null,
-                status: 'error',
+                status: "error",
                 error: message,
             });
         }
@@ -164,15 +164,15 @@ export function createEndpointResolver(options) {
 }
 // Convenience derived stores
 export function createDerivedEndpoints(store) {
-    return derived(store, $state => $state.endpoints);
+    return derived(store, ($state) => $state.endpoints);
 }
 export function createDerivedPrimaryEndpoint(store) {
-    return derived(store, $state => $state.endpoints?.primary ?? null);
+    return derived(store, ($state) => $state.endpoints?.primary ?? null);
 }
 export function createDerivedMetadata(store) {
-    return derived(store, $state => $state.endpoints?.metadata ?? null);
+    return derived(store, ($state) => $state.endpoints?.metadata ?? null);
 }
 export function createDerivedStatus(store) {
-    return derived(store, $state => $state.status);
+    return derived(store, ($state) => $state.status);
 }
 export default createEndpointResolver;

package/dist/types.d.ts

@@ -1,4 +1,4 @@
 /**
  * Svelte-specific type exports
  */
-export type SkipDirection = 'back' | 'forward' | null;
+export type SkipDirection = "back" | "forward" | null;

package/dist/ui/Badge.svelte

@@ -1,21 +1,20 @@
 <script lang="ts">
-  import { cn } from '@livepeer-frameworks/player-core';
-  import { badgeVariants, type BadgeVariant } from './badge';
+  import type { Snippet } from "svelte";
+  import { cn } from "@livepeer-frameworks/player-core";
+  import { badgeVariants, type BadgeVariant } from "./badge";
 
-  type $$Props = {
+  type Props = {
     variant?: BadgeVariant;
     class?: string;
-  } & Record<string, any>;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
 
-  let {
-    variant = "default",
-    class: className = "",
-    ...rest
-  }: $$Props = $props();
+  let { variant = "default", class: className = "", children, ...rest }: Props = $props();
 
   let mergedClasses = $derived(cn(badgeVariants(variant, className)));
 </script>
 
 <div class={mergedClasses} {...rest}>
-  <slot />
+  {@render children?.()}
 </div>

package/dist/ui/Badge.svelte.d.ts

@@ -1,32 +1,11 @@
-import { type BadgeVariant } from './badge';
-type $$Props = {
+import type { Snippet } from "svelte";
+import { type BadgeVariant } from "./badge";
+type Props = {
     variant?: BadgeVariant;
     class?: string;
-} & Record<string, any>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<$$Props, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, "">;
-type Badge = InstanceType<typeof Badge>;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Badge: import("svelte").Component<Props, {}, "">;
+type Badge = ReturnType<typeof Badge>;
 export default Badge;

package/dist/ui/Button.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
-  import { cn } from '@livepeer-frameworks/player-core';
-  import { buttonVariants, type ButtonSize, type ButtonVariant } from './button';
-  import { getContext, setContext } from 'svelte';
+  import type { Snippet } from "svelte";
+  import { cn } from "@livepeer-frameworks/player-core";
+  import { buttonVariants, type ButtonSize, type ButtonVariant } from "./button";
+  import { getContext } from "svelte";
 
-  type $$Props = {
+  type Props = {
     variant?: ButtonVariant;
     size?: ButtonSize;
     class?: string;
     asChild?: boolean;
     type?: "button" | "submit" | "reset";
-  } & Record<string, any>;
+    children?: Snippet;
+    [key: string]: unknown;
+  };
 
   let {
     variant = "default",
@@ -17,26 +20,23 @@
     class: className = "",
     asChild = false,
     type = "button",
+    children,
     ...rest
-  }: $$Props = $props();
+  }: Props = $props();
 
-  let Comp: string = "button";
-  if (asChild) {
-    Comp = getContext('__svelte_slot_element') || 'div';
-  }
-
-  // Set context for potential nested slots (though less common for Button)
-  setContext('__svelte_slot_element', Comp);
+  let Comp = $derived(
+    asChild ? (getContext("__svelte_slot_element") as string) || "div" : "button"
+  );
 
   let mergedClasses = $derived(cn(buttonVariants(variant, size, className)));
 </script>
 
 {#if asChild}
   <svelte:element this={Comp} class={mergedClasses} {...rest}>
-    <slot />
+    {@render children?.()}
   </svelte:element>
 {:else}
-  <button class={mergedClasses} type={type} {...rest}>
-    <slot />
+  <button class={mergedClasses} {type} {...rest}>
+    {@render children?.()}
   </button>
 {/if}

package/dist/ui/Button.svelte.d.ts

@@ -1,35 +1,14 @@
-import { type ButtonSize, type ButtonVariant } from './button';
-type $$Props = {
+import type { Snippet } from "svelte";
+import { type ButtonSize, type ButtonVariant } from "./button";
+type Props = {
     variant?: ButtonVariant;
     size?: ButtonSize;
     class?: string;
     asChild?: boolean;
     type?: "button" | "submit" | "reset";
-} & Record<string, any>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<$$Props, {
-    default: {};
-}>, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, "">;
-type Button = InstanceType<typeof Button>;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/ui/Slider.svelte

@@ -33,68 +33,34 @@
     ...rest
   }: $$Props = $props();
 
-  // Colors based on accentColor prop
-  const rangeColorClass = $derived(accentColor ? "bg-[hsl(var(--tn-cyan,195_100%_50%))]" : "bg-white/90");
-  const thumbColorClass = $derived(accentColor ? "bg-[hsl(var(--tn-cyan,195_100%_50%))]" : "bg-white");
-
   function handleValueChange(newValue: number) {
     value = newValue;
     if (oninput) {
-      // Defensive: ensure we pass a valid finite number (prevents NaN propagation)
-      if (typeof newValue === 'number' && Number.isFinite(newValue)) {
+      if (typeof newValue === "number" && Number.isFinite(newValue)) {
         oninput(newValue);
       }
     }
   }
 </script>
 
-<div
-  class={cn(
-    "group relative flex touch-none select-none items-center cursor-pointer",
-    orientation === "horizontal" ? "w-full h-5" : "h-full flex-col w-5",
-    className
-  )}
+<BitsSlider.Root
+  type="single"
+  {min}
+  {max}
+  {step}
+  {value}
+  onValueChange={handleValueChange}
+  {orientation}
+  class={cn("fw-slider", orientation === "vertical" && "fw-slider--vertical", className)}
+  {...rest}
 >
-  <BitsSlider.Root
-    type="single"
-    {min}
-    {max}
-    {step}
-    {value}
-    onValueChange={handleValueChange}
-    {orientation}
-    class="w-full h-full relative flex items-center"
-    {...rest}
-  >
-    {#if showTrack}
-      <div
-        class={cn(
-          "absolute rounded-full bg-white/30 transition-all duration-150",
-          orientation === "horizontal"
-            ? "inset-x-0 h-1 group-hover:h-1.5"
-            : "inset-y-0 w-1 group-hover:w-1.5",
-          trackClassName
-        )}
-      >
-        <BitsSlider.Range
-          class={cn(
-            "absolute rounded-full transition-all duration-150",
-            orientation === "horizontal" ? "h-full" : "w-full bottom-0",
-            rangeColorClass
-          )}
-        />
-      </div>
-    {/if}
-    <BitsSlider.Thumb
-      index={0}
-      class={cn(
-        "block rounded-full border-0 cursor-pointer shadow-md transition-all duration-150",
-        "w-2.5 h-2.5 group-hover:w-3.5 group-hover:h-3.5",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50",
-        "disabled:pointer-events-none disabled:opacity-50",
-        thumbColorClass,
-        thumbClassName
-      )}
-    />
-  </BitsSlider.Root>
-</div>
+  {#if showTrack}
+    <div class={cn("fw-slider-track", trackClassName)}>
+      <BitsSlider.Range class={cn("fw-slider-range", accentColor && "fw-slider-range--accent")} />
+    </div>
+  {/if}
+  <BitsSlider.Thumb
+    index={0}
+    class={cn("fw-slider-thumb", accentColor && "fw-slider-thumb--accent", thumbClassName)}
+  />
+</BitsSlider.Root>