@livepeer-frameworks/player-svelte 0.0.3

package/dist/stores/viewerEndpoints.js

@@ -0,0 +1,178 @@
+/**
+ * Svelte store for Gateway GraphQL endpoint resolution with retry logic.
+ *
+ * Port of useViewerEndpoints.ts React hook to Svelte 5 stores.
+ */
+import { writable, derived } from 'svelte/store';
+const MAX_RETRIES = 3;
+const INITIAL_DELAY_MS = 500;
+/**
+ * Fetch with exponential backoff retry
+ */
+async function fetchWithRetry(url, options, maxRetries = MAX_RETRIES, initialDelay = INITIAL_DELAY_MS) {
+    let lastError = null;
+    for (let attempt = 0; attempt < maxRetries; attempt++) {
+        try {
+            const response = await fetch(url, options);
+            return response;
+        }
+        catch (e) {
+            lastError = e instanceof Error ? e : new Error('Fetch failed');
+            // Don't retry on abort
+            if (options.signal?.aborted) {
+                throw lastError;
+            }
+            // Wait before retrying (exponential backoff)
+            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));
+            }
+        }
+    }
+    throw lastError ?? new Error('Gateway unreachable after retries');
+}
+const initialState = {
+    endpoints: null,
+    status: 'idle',
+    error: null,
+};
+/**
+ * Create a viewer endpoints resolver store for Gateway GraphQL queries.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createEndpointResolver } from './stores/viewerEndpoints';
+ *
+ *   const resolver = createEndpointResolver({
+ *     gatewayUrl: 'https://gateway.example.com/graphql',
+ *     contentType: 'live',
+ *     contentId: 'my-stream',
+ *   });
+ *
+ *   $: endpoints = $resolver.endpoints;
+ *   $: status = $resolver.status;
+ * </script>
+ * ```
+ */
+export function createEndpointResolver(options) {
+    const { gatewayUrl, contentType, contentId, authToken } = options;
+    const store = writable(initialState);
+    let abortController = null;
+    let mounted = true;
+    /**
+     * Fetch endpoints from Gateway
+     */
+    async function fetchEndpoints() {
+        if (!gatewayUrl || !contentType || !contentId || !mounted)
+            return;
+        // Abort previous request
+        abortController?.abort();
+        abortController = new AbortController();
+        store.update(s => ({ ...s, status: 'loading', error: null }));
+        try {
+            const graphqlEndpoint = gatewayUrl.replace(/\/$/, '');
+            const query = `
+        query ResolveViewer($contentType: String!, $contentId: String!) {
+          resolveViewerEndpoint(contentType: $contentType, contentId: $contentId) {
+            primary { nodeId baseUrl protocol url geoDistance loadScore outputs }
+            fallbacks { nodeId baseUrl protocol url geoDistance loadScore outputs }
+            metadata { contentType contentId title description durationSeconds status isLive viewers recordingSizeBytes clipSource createdAt }
+          }
+        }
+      `;
+            const res = await fetchWithRetry(graphqlEndpoint, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
+                },
+                body: JSON.stringify({ query, variables: { contentType, contentId } }),
+                signal: abortController.signal,
+            });
+            if (!res.ok)
+                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');
+            }
+            const resp = payload.data?.resolveViewerEndpoint;
+            const primary = resp?.primary;
+            const fallbacks = Array.isArray(resp?.fallbacks) ? resp.fallbacks : [];
+            if (!primary)
+                throw new Error('No endpoints');
+            // Parse outputs JSON string (GraphQL returns JSON scalar as string)
+            if (primary.outputs && typeof primary.outputs === 'string') {
+                try {
+                    primary.outputs = JSON.parse(primary.outputs);
+                }
+                catch { }
+            }
+            if (fallbacks) {
+                fallbacks.forEach((fb) => {
+                    if (fb.outputs && typeof fb.outputs === 'string') {
+                        try {
+                            fb.outputs = JSON.parse(fb.outputs);
+                        }
+                        catch { }
+                    }
+                });
+            }
+            store.set({
+                endpoints: { primary, fallbacks, metadata: resp?.metadata },
+                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);
+            store.set({
+                endpoints: null,
+                status: 'error',
+                error: message,
+            });
+        }
+    }
+    /**
+     * Manual refetch
+     */
+    function refetch() {
+        fetchEndpoints();
+    }
+    /**
+     * Cleanup
+     */
+    function destroy() {
+        mounted = false;
+        abortController?.abort();
+        abortController = null;
+        store.set(initialState);
+    }
+    // Auto-fetch on creation if params are valid
+    if (gatewayUrl && contentType && contentId) {
+        fetchEndpoints();
+    }
+    return {
+        subscribe: store.subscribe,
+        refetch,
+        destroy,
+    };
+}
+// Convenience derived stores
+export function createDerivedEndpoints(store) {
+    return derived(store, $state => $state.endpoints);
+}
+export function createDerivedPrimaryEndpoint(store) {
+    return derived(store, $state => $state.endpoints?.primary ?? null);
+}
+export function createDerivedMetadata(store) {
+    return derived(store, $state => $state.endpoints?.metadata ?? null);
+}
+export function createDerivedStatus(store) {
+    return derived(store, $state => $state.status);
+}
+export default createEndpointResolver;

package/dist/types.d.ts

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

package/dist/types.js

@@ -0,0 +1,4 @@
+/**
+ * Svelte-specific type exports
+ */
+export {};

package/dist/ui/Badge.svelte

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

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

@@ -0,0 +1,32 @@
+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>;
+export default Badge;

package/dist/ui/Button.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { cn } from '@livepeer-frameworks/player-core';
+  import { buttonVariants, type ButtonSize, type ButtonVariant } from './button';
+  import { getContext, setContext } from 'svelte';
+
+  type $$Props = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    class?: string;
+    asChild?: boolean;
+    type?: "button" | "submit" | "reset";
+  } & Record<string, any>;
+
+  let {
+    variant = "default",
+    size = "default",
+    class: className = "",
+    asChild = false,
+    type = "button",
+    ...rest
+  }: $$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 mergedClasses = $derived(cn(buttonVariants(variant, size, className)));
+</script>
+
+{#if asChild}
+  <svelte:element this={Comp} class={mergedClasses} {...rest}>
+    <slot />
+  </svelte:element>
+{:else}
+  <button class={mergedClasses} type={type} {...rest}>
+    <slot />
+  </button>
+{/if}

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

@@ -0,0 +1,35 @@
+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>;
+export default Button;

package/dist/ui/Slider.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { Slider as BitsSlider } from "bits-ui";
+  import { cn } from "@livepeer-frameworks/player-core";
+
+  type $$Props = {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+    showTrack?: boolean;
+    trackClassName?: string;
+    thumbClassName?: string;
+    hoverThumb?: boolean;
+    accentColor?: boolean;
+    oninput?: (value: number) => void;
+  } & Record<string, any>;
+
+  let {
+    min = 0,
+    max = 100,
+    step = 1,
+    value = 0,
+    orientation = "horizontal",
+    className = "",
+    trackClassName = "",
+    thumbClassName = "",
+    showTrack = true,
+    hoverThumb = false,
+    accentColor = false,
+    oninput = undefined,
+    ...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)) {
+        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="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>

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

@@ -0,0 +1,17 @@
+type $$Props = {
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+    showTrack?: boolean;
+    trackClassName?: string;
+    thumbClassName?: string;
+    hoverThumb?: boolean;
+    accentColor?: boolean;
+    oninput?: (value: number) => void;
+} & Record<string, any>;
+declare const Slider: import("svelte").Component<$$Props, {}, "">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/ui/badge.d.ts

@@ -0,0 +1,6 @@
+export declare const badgeVariants: (variant?: BadgeVariant, className?: string) => string;
+export type BadgeVariant = "default" | "secondary" | "outline";
+export type BadgeProps = {
+    variant?: BadgeVariant;
+    className?: string;
+};

package/dist/ui/badge.js

@@ -0,0 +1,10 @@
+export const badgeVariants = (variant = "default", className) => {
+    const baseClasses = "inline-flex items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ring-offset-background";
+    const variants = {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "border-border text-foreground"
+    };
+    const selectedVariant = variants[variant] || variants.default;
+    return `${baseClasses} ${selectedVariant} ${className || ""}`;
+};

package/dist/ui/button.d.ts

@@ -0,0 +1,8 @@
+export declare const buttonVariants: (variant?: ButtonVariant, size?: ButtonSize, className?: string) => string;
+export type ButtonVariant = "default" | "secondary" | "ghost" | "outline" | "destructive" | "subtle" | "link";
+export type ButtonSize = "default" | "sm" | "lg" | "icon";
+export type ButtonProps = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    className?: string;
+};

package/dist/ui/button.js

@@ -0,0 +1,21 @@
+export const buttonVariants = (variant = "default", size = "default", className) => {
+    const baseClasses = "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ring-offset-background";
+    const variants = {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        outline: "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        subtle: "bg-muted text-muted-foreground hover:bg-muted/80",
+        link: "text-primary underline-offset-4 hover:underline"
+    };
+    const sizes = {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-9 w-9"
+    };
+    const selectedVariant = variants[variant] || variants.default;
+    const selectedSize = sizes[size] || sizes.default;
+    return `${baseClasses} ${selectedVariant} ${selectedSize} ${className || ""}`;
+};

package/dist/ui/context-menu/ContextMenuCheckboxItem.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { ContextMenu } from "bits-ui";
+  import { cn } from "@livepeer-frameworks/player-core";
+
+  let {
+    class: className,
+    checked = false,
+    ...rest
+  }: { class?: string; checked?: boolean } & Record<string, any> = $props();
+</script>
+
+<ContextMenu.CheckboxItem
+  class={cn("fw-context-menu-checkbox", className)}
+  {checked}
+  {...rest}
+>
+  <div class="fw-context-menu-indicator">
+    {#if checked}
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="h-4 w-4"
+      >
+        <polyline points="20 6 9 17 4 12" />
+      </svg>
+    {/if}
+  </div>
+  <slot />
+</ContextMenu.CheckboxItem>

package/dist/ui/context-menu/ContextMenuCheckboxItem.svelte.d.ts

@@ -0,0 +1,31 @@
+type $$ComponentProps = {
+    class?: string;
+    checked?: boolean;
+} & 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 ContextMenuCheckboxItem: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<$$ComponentProps, {
+    default: {};
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, "">;
+type ContextMenuCheckboxItem = InstanceType<typeof ContextMenuCheckboxItem>;
+export default ContextMenuCheckboxItem;

package/dist/ui/context-menu/ContextMenuContent.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { ContextMenu } from "bits-ui";
+  import { cn } from "@livepeer-frameworks/player-core";
+
+  let {
+    children,
+    class: className,
+    ...rest
+  }: { children?: any; class?: string } = $props();
+</script>
+
+<ContextMenu.Content
+  class={cn("fw-player-surface fw-context-menu", className)}
+  {...rest}
+>
+  {@render children?.()}
+</ContextMenu.Content>

package/dist/ui/context-menu/ContextMenuContent.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    children?: any;
+    class?: string;
+};
+declare const ContextMenuContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextMenuContent = ReturnType<typeof ContextMenuContent>;
+export default ContextMenuContent;

package/dist/ui/context-menu/ContextMenuItem.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { ContextMenu } from "bits-ui";
+  import { cn } from "@livepeer-frameworks/player-core";
+
+  let {
+    children,
+    class: className,
+    inset = false,
+    ...rest
+  }: { children?: any; class?: string; inset?: boolean } & Record<string, any> = $props();
+</script>
+
+<ContextMenu.Item
+  class={cn(
+    "fw-context-menu-item",
+    inset && "fw-context-menu-item--inset",
+    className
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</ContextMenu.Item>

package/dist/ui/context-menu/ContextMenuItem.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    children?: any;
+    class?: string;
+    inset?: boolean;
+} & Record<string, any>;
+declare const ContextMenuItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextMenuItem = ReturnType<typeof ContextMenuItem>;
+export default ContextMenuItem;

package/dist/ui/context-menu/ContextMenuLabel.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { ContextMenu } from "bits-ui";
+  import { cn } from "@livepeer-frameworks/player-core";
+
+  let {
+    children,
+    class: className,
+    inset = false,
+    ...rest
+  }: { children?: any; class?: string; inset?: boolean } & Record<string, any> = $props();
+</script>
+
+<ContextMenu.GroupHeading
+  class={cn(
+    "fw-context-menu-label",
+    inset && "fw-context-menu-item--inset",
+    className
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</ContextMenu.GroupHeading>

package/dist/ui/context-menu/ContextMenuLabel.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    children?: any;
+    class?: string;
+    inset?: boolean;
+} & Record<string, any>;
+declare const ContextMenuLabel: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextMenuLabel = ReturnType<typeof ContextMenuLabel>;
+export default ContextMenuLabel;

package/dist/ui/context-menu/ContextMenuPortal.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { ContextMenu } from "bits-ui";
+
+  let { children, ...rest }: { children?: any } = $props();
+</script>
+
+<ContextMenu.Portal {...rest}>
+  <div class="fw-player-surface">
+    {@render children?.()}
+  </div>
+</ContextMenu.Portal>

package/dist/ui/context-menu/ContextMenuPortal.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    children?: any;
+};
+declare const ContextMenuPortal: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextMenuPortal = ReturnType<typeof ContextMenuPortal>;
+export default ContextMenuPortal;