@livepeer-frameworks/player-svelte 0.0.3

package/src/stores/viewerEndpoints.ts

@@ -0,0 +1,224 @@
+/**
+ * Svelte store for Gateway GraphQL endpoint resolution with retry logic.
+ *
+ * Port of useViewerEndpoints.ts React hook to Svelte 5 stores.
+ */
+
+import { writable, derived, type Readable } from 'svelte/store';
+import type { ContentEndpoints, EndpointInfo, ContentMetadata, ContentType } from '@livepeer-frameworks/player-core';
+
+export interface ViewerEndpointsOptions {
+  gatewayUrl: string;
+  contentType: ContentType;
+  contentId: string;
+  authToken?: string;
+}
+
+export type EndpointStatus = 'idle' | 'loading' | 'ready' | 'error';
+
+export interface ViewerEndpointsState {
+  endpoints: ContentEndpoints | null;
+  status: EndpointStatus;
+  error: string | null;
+}
+
+export interface ViewerEndpointsStore extends Readable<ViewerEndpointsState> {
+  refetch: () => void;
+  destroy: () => void;
+}
+
+const MAX_RETRIES = 3;
+const INITIAL_DELAY_MS = 500;
+
+/**
+ * Fetch with exponential backoff retry
+ */
+async function fetchWithRetry(
+  url: string,
+  options: RequestInit,
+  maxRetries: number = MAX_RETRIES,
+  initialDelay: number = INITIAL_DELAY_MS
+): Promise<Response> {
+  let lastError: Error | null = 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: ViewerEndpointsState = {
+  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: ViewerEndpointsOptions): ViewerEndpointsStore {
+  const { gatewayUrl, contentType, contentId, authToken } = options;
+
+  const store = writable<ViewerEndpointsState>(initialState);
+  let abortController: AbortController | null = 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: any) => {
+          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: ViewerEndpointsStore) {
+  return derived(store, $state => $state.endpoints);
+}
+
+export function createDerivedPrimaryEndpoint(store: ViewerEndpointsStore) {
+  return derived(store, $state => $state.endpoints?.primary ?? null);
+}
+
+export function createDerivedMetadata(store: ViewerEndpointsStore) {
+  return derived(store, $state => $state.endpoints?.metadata ?? null);
+}
+
+export function createDerivedStatus(store: ViewerEndpointsStore) {
+  return derived(store, $state => $state.status);
+}
+
+export default createEndpointResolver;

package/src/types.ts

@@ -0,0 +1,6 @@
+/**
+ * Svelte-specific type exports
+ */
+
+// Re-export SkipDirection type for external consumers
+export type SkipDirection = 'back' | 'forward' | null;

package/src/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/src/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/src/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/src/ui/badge.ts

@@ -0,0 +1,20 @@
+export const badgeVariants = (variant: BadgeVariant = "default", className?: string) => {
+  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 || ""}`;
+};
+
+export type BadgeVariant = "default" | "secondary" | "outline";
+
+export type BadgeProps = {
+  variant?: BadgeVariant;
+  className?: string;
+};

package/src/ui/button.ts

@@ -0,0 +1,35 @@
+export const buttonVariants = (variant: ButtonVariant = "default", size: ButtonSize = "default", className?: string) => {
+  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 || ""}`;
+};
+
+export type ButtonVariant = "default" | "secondary" | "ghost" | "outline" | "destructive" | "subtle" | "link";
+export type ButtonSize = "default" | "sm" | "lg" | "icon";
+
+// For type inference with svelte components, similar to VariantProps
+export type ButtonProps = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+};

package/src/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/src/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/src/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/src/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/src/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/src/ui/context-menu/ContextMenuRadioItem.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { ContextMenu } from "bits-ui";
+  import { cn } from "@livepeer-frameworks/player-core";
+
+  let {
+    class: className,
+    value,
+    ...rest
+  }: { class?: string; value: string } & Record<string, any> = $props();
+</script>
+
+<ContextMenu.RadioItem
+  class={cn("fw-context-menu-checkbox", className)}
+  {value}
+  {...rest}
+>
+  <div class="fw-context-menu-indicator">
+    <!-- Indicator state is managed by the underlying ContextMenu.RadioGroup. -->
+  </div>
+  <slot />
+</ContextMenu.RadioItem>

package/src/ui/context-menu/ContextMenuSeparator.svelte

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

package/src/ui/context-menu/ContextMenuShortcut.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { cn } from "@livepeer-frameworks/player-core";
+
+  let {
+    children,
+    class: className,
+    ...rest
+  }: { children?: any; class?: string } = $props();
+</script>
+
+<span
+  class={cn(
+    "ml-auto text-xs tracking-widest text-muted-foreground",
+    className
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</span>

package/src/ui/context-menu/ContextMenuSubContent.svelte

@@ -0,0 +1,20 @@
+<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.SubContent
+  class={cn(
+    "z-50 min-w-[8rem] overflow-hidden rounded border border-[#5a607f]/30 bg-[#1a1b26] p-0 text-[#a9b1d6] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+    className
+  )}
+  {...rest}
+>
+  {@render children?.()}
+</ContextMenu.SubContent>

package/src/ui/context-menu/ContextMenuSubTrigger.svelte

@@ -0,0 +1,34 @@
+<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 } = $props();
+</script>
+
+<ContextMenu.SubTrigger
+  class={cn(
+    "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-[#292e42] focus:text-[#c0caf5] data-[state=open]:bg-[#292e42] data-[state=open]:text-[#c0caf5] data-[highlighted]:bg-[#292e42] data-[highlighted]:text-[#c0caf5]",
+    inset && "pl-8",
+    className
+  )}
+  {...rest}
+>
+  {@render children?.()}
+  <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="ml-auto h-4 w-4"
+  >
+    <polyline points="9 18 15 12 9 6" />
+  </svg>
+</ContextMenu.SubTrigger>