@livepeer-frameworks/player-svelte 0.0.3 → 0.1.0

package/dist/stores/playerController.js

@@ -52,7 +52,7 @@ const initialState = {
  *   let containerEl: HTMLElement;
  *
  *   const playerStore = createPlayerControllerStore({
- *     contentId: 'my-stream',
+ *     contentId: 'pk_...',
  *     contentType: 'live',
  *     gatewayUrl: 'https://gateway.example.com/graphql',
  *   });
@@ -122,6 +122,7 @@ export function createPlayerControllerStore(config) {
             store.update(prev => ({
                 ...prev,
                 streamState,
+                metadata: controller.getMetadata(),
                 isEffectivelyLive: controller.isEffectivelyLive(),
                 shouldShowIdleScreen: controller.shouldShowIdleScreen(),
             }));
@@ -152,7 +153,11 @@ export function createPlayerControllerStore(config) {
             }));
             // Add video event listeners for state sync
             const video = videoElement;
-            const handleVideoEvent = () => syncState();
+            const handleVideoEvent = () => {
+                if (controller?.shouldSuppressVideoEvents?.())
+                    return;
+                syncState();
+            };
             video.addEventListener('play', handleVideoEvent);
             video.addEventListener('pause', handleVideoEvent);
             video.addEventListener('waiting', handleVideoEvent);
@@ -164,7 +169,7 @@ export function createPlayerControllerStore(config) {
                 video.removeEventListener('playing', handleVideoEvent);
             });
         }));
-        unsubscribers.push(controller.on('playerSelected', ({ player, source }) => {
+        unsubscribers.push(controller.on('playerSelected', ({ player: _player, source }) => {
             store.update(prev => ({
                 ...prev,
                 currentPlayerInfo: controller.getCurrentPlayerInfo(),

package/dist/stores/streamState.d.ts

@@ -28,7 +28,7 @@ export interface StreamStateStore extends Readable<StreamState> {
  *
  *   const streamState = createStreamStateManager({
  *     mistBaseUrl: 'https://mist.example.com',
- *     streamName: 'my-stream',
+ *     streamName: 'pk_...', // playbackId (view key)
  *   });
  *
  *   // Access values

package/dist/stores/streamState.js

@@ -65,7 +65,7 @@ const initialState = {
  *
  *   const streamState = createStreamStateManager({
  *     mistBaseUrl: 'https://mist.example.com',
- *     streamName: 'my-stream',
+ *     streamName: 'pk_...', // playbackId (view key)
  *   });
  *
  *   // Access values

package/dist/stores/viewerEndpoints.d.ts

@@ -4,11 +4,11 @@
  * Port of useViewerEndpoints.ts React hook to Svelte 5 stores.
  */
 import { type Readable } from 'svelte/store';
-import type { ContentEndpoints, EndpointInfo, ContentMetadata, ContentType } from '@livepeer-frameworks/player-core';
+import type { ContentEndpoints, ContentType } from '@livepeer-frameworks/player-core';
 export interface ViewerEndpointsOptions {
     gatewayUrl: string;
-    contentType: ContentType;
     contentId: string;
+    contentType?: ContentType;
     authToken?: string;
 }
 export type EndpointStatus = 'idle' | 'loading' | 'ready' | 'error';
@@ -32,7 +32,7 @@ export interface ViewerEndpointsStore extends Readable<ViewerEndpointsState> {
  *   const resolver = createEndpointResolver({
  *     gatewayUrl: 'https://gateway.example.com/graphql',
  *     contentType: 'live',
- *     contentId: 'my-stream',
+ *     contentId: 'pk_...',
  *   });
  *
  *   $: endpoints = $resolver.endpoints;
@@ -42,7 +42,7 @@ export interface ViewerEndpointsStore extends Readable<ViewerEndpointsState> {
  */
 export declare function createEndpointResolver(options: ViewerEndpointsOptions): ViewerEndpointsStore;
 export declare function createDerivedEndpoints(store: ViewerEndpointsStore): Readable<ContentEndpoints | null>;
-export declare function createDerivedPrimaryEndpoint(store: ViewerEndpointsStore): Readable<EndpointInfo | null>;
-export declare function createDerivedMetadata(store: ViewerEndpointsStore): Readable<ContentMetadata | null>;
+export declare function createDerivedPrimaryEndpoint(store: ViewerEndpointsStore): Readable<import("@livepeer-frameworks/player-core").EndpointInfo | null>;
+export declare function createDerivedMetadata(store: ViewerEndpointsStore): Readable<import("@livepeer-frameworks/player-core").ContentMetadata | null>;
 export declare function createDerivedStatus(store: ViewerEndpointsStore): Readable<EndpointStatus>;
 export default createEndpointResolver;

package/dist/stores/viewerEndpoints.js

@@ -48,7 +48,7 @@ const initialState = {
  *   const resolver = createEndpointResolver({
  *     gatewayUrl: 'https://gateway.example.com/graphql',
  *     contentType: 'live',
- *     contentId: 'my-stream',
+ *     contentId: 'pk_...',
  *   });
  *
  *   $: endpoints = $resolver.endpoints;
@@ -65,7 +65,7 @@ export function createEndpointResolver(options) {
      * Fetch endpoints from Gateway
      */
     async function fetchEndpoints() {
-        if (!gatewayUrl || !contentType || !contentId || !mounted)
+        if (!gatewayUrl || !contentId || !mounted)
             return;
         // Abort previous request
         abortController?.abort();
@@ -74,8 +74,8 @@ export function createEndpointResolver(options) {
         try {
             const graphqlEndpoint = gatewayUrl.replace(/\/$/, '');
             const query = `
-        query ResolveViewer($contentType: String!, $contentId: String!) {
-          resolveViewerEndpoint(contentType: $contentType, contentId: $contentId) {
+        query ResolveViewer($contentId: String!) {
+          resolveViewerEndpoint(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 }
@@ -88,7 +88,7 @@ export function createEndpointResolver(options) {
                     'Content-Type': 'application/json',
                     ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
                 },
-                body: JSON.stringify({ query, variables: { contentType, contentId } }),
+                body: JSON.stringify({ query, variables: { contentId } }),
                 signal: abortController.signal,
             });
             if (!res.ok)

package/dist/ui/Slider.svelte

@@ -27,7 +27,7 @@
     trackClassName = "",
     thumbClassName = "",
     showTrack = true,
-    hoverThumb = false,
+    hoverThumb: _hoverThumb = false,
     accentColor = false,
     oninput = undefined,
     ...rest

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livepeer-frameworks/player-svelte",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "type": "module",
   "description": "Svelte 5 components for FrameWorks streaming player",
   "svelte": "./dist/index.js",

package/src/DevModePanel.svelte

@@ -11,8 +11,6 @@
     type MistStreamInfo,
     type PlaybackMode,
   } from '@livepeer-frameworks/player-core';
-  import Button from './ui/Button.svelte';
-  import Badge from './ui/Badge.svelte';
 
   /** Short labels for source types */
   const SOURCE_TYPE_LABELS: Record<string, string> = {
@@ -56,7 +54,7 @@
     videoElement = null,
     protocol = undefined,
     nodeId = undefined,
-    isVisible = true,
+    isVisible: _isVisible = true,
     isOpen: controlledIsOpen = undefined,
     onOpenChange = undefined,
   }: Props = $props();
@@ -258,22 +256,7 @@
   });
 </script>
 
-{#if !isOpen}
-  <button
-    type="button"
-    onclick={() => setIsOpen(true)}
-    class={cn(
-      'fw-dev-toggle',
-      isVisible ? '' : 'fw-dev-toggle--hidden'
-    )}
-    title="Advanced Settings"
-    aria-label="Open advanced settings panel"
-  >
-    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-      <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
-    </svg>
-  </button>
-{:else}
+{#if isOpen}
   <div class="fw-dev-panel">
     <!-- Header with tabs -->
     <div class="fw-dev-header">

package/src/IdleScreen.svelte

@@ -299,7 +299,7 @@
     }
   }
 
-  let statusLabel = $derived(getStatusLabel(status));
+  let _statusLabel = $derived(getStatusLabel(status));
   let showRetry = $derived((status === 'ERROR' || status === 'INVALID') && onRetry);
   let showProgress = $derived(status === 'INITIALIZING' && percentage !== undefined);
   let displayMessage = $derived(error || message);
@@ -633,7 +633,7 @@
   {/each}
 
   <!-- Floating particles -->
-  {#each particles as particle, i}
+  {#each particles as particle, _i}
     <div
       class="particle"
       style="
@@ -648,7 +648,7 @@
   {/each}
 
   <!-- Animated bubbles -->
-  {#each bubbles as bubble, i}
+  {#each bubbles as bubble, _i}
     <div
       class="bubble"
       style="

package/src/LoadingScreen.svelte

@@ -608,7 +608,7 @@
   {/each}
 
   <!-- Floating particles -->
-  {#each particles as particle, i}
+  {#each particles as particle, _i}
     <div
       class="particle"
       style="
@@ -623,7 +623,7 @@
   {/each}
 
   <!-- Animated bubbles -->
-  {#each bubbles as bubble, i}
+  {#each bubbles as bubble, _i}
     <div
       class="bubble"
       style="

package/src/Player.svelte

@@ -3,9 +3,8 @@
   Thin wrapper over PlayerController from @livepeer-frameworks/player-core
 -->
 <script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
+  import { onMount } from 'svelte';
   import IdleScreen from './IdleScreen.svelte';
-  import LoadingScreen from './LoadingScreen.svelte';
   import SubtitleRenderer from './SubtitleRenderer.svelte';
   import PlayerControls from './PlayerControls.svelte';
   import SpeedIndicator from './SpeedIndicator.svelte';
@@ -22,7 +21,7 @@
     ContextMenuSeparator,
   } from './ui/context-menu';
   import { StatsIcon, SettingsIcon, PictureInPictureIcon } from './icons';
-  import { cn, type PlaybackMode, type ContentEndpoints, type ContentMetadata, type PlayerState, type PlayerStateContext, type ContentType, type EndpointInfo } from '@livepeer-frameworks/player-core';
+  import { cn, type PlaybackMode, type ContentEndpoints, type PlayerState, type PlayerStateContext, type ContentType, type EndpointInfo, type PlayerMetadata } from '@livepeer-frameworks/player-core';
   import { createPlayerControllerStore, type PlayerControllerStore } from './stores/playerController';
   import type { SkipDirection } from './SkipIndicator.svelte';
 
@@ -48,15 +47,17 @@
       playbackMode?: PlaybackMode;
     };
     onStateChange?: (state: PlayerState, context?: PlayerStateContext) => void;
+    onMetadata?: (metadata: PlayerMetadata) => void;
   }
 
   let {
     contentId,
-    contentType = 'live',
+    contentType,
     thumbnailUrl = null,
     endpoints = undefined,
     options = {},
     onStateChange = undefined,
+    onMetadata = undefined,
   }: Props = $props();
 
   // ============================================================================
@@ -141,12 +142,18 @@
     debug('playerStore created');
 
     // Subscribe to store state
+    let prevMetadata: PlayerMetadata | null = null;
     const unsubscribe = playerStore.subscribe(state => {
       storeState = state;
       // Forward state changes to prop callback
       if (onStateChange && state.state) {
         onStateChange(state.state);
       }
+      // Forward metadata changes to prop callback
+      if (onMetadata && state.metadata && state.metadata !== prevMetadata) {
+        prevMetadata = state.metadata;
+        onMetadata(state.metadata);
+      }
     });
 
     return () => {
@@ -277,19 +284,7 @@
             isOpen={isStatsOpen}
             onClose={() => isStatsOpen = false}
             {metadata}
-            streamState={storeState.streamState?.isOnline ? {
-              status: storeState.streamState.status,
-              viewers: metadata?.viewers,
-              tracks: storeState.streamState.streamInfo?.meta?.tracks
-                ? Object.values(storeState.streamState.streamInfo.meta.tracks).map((t: any) => ({
-                    type: t.type,
-                    codec: t.codec,
-                    width: t.width,
-                    height: t.height,
-                    bps: t.bps,
-                  }))
-                : [],
-            } : null}
+            streamState={storeState.streamState}
             quality={storeState.playbackQuality}
             videoElement={storeState.videoElement}
             protocol={primaryEndpoint?.protocol}

package/src/PlayerControls.svelte

@@ -6,7 +6,6 @@
       type PlaybackMode,
       // Seeking utilities from core
       SPEED_PRESETS,
-      getLatencyTier,
       isMediaStreamSource,
       supportsPlaybackRate as coreSupportsPlaybackRate,
       calculateSeekableRange,
@@ -15,7 +14,6 @@
       calculateIsNearLive,
       isLiveContent,
       // Time formatting from core
-      formatTime,
       formatTimeDisplay,
     } from '@livepeer-frameworks/player-core';
 	  import SeekBar from './SeekBar.svelte';
@@ -119,7 +117,7 @@
   let showSettingsMenu = $state(false);
   let isNearLiveState = $state(true);
   let buffered: TimeRanges | undefined = $state(undefined);
-  let hasSeekToLive = false; // Track if we've auto-seeked to live
+  let _hasSeekToLive = false; // Track if we've auto-seeked to live
   let qualityValue = $state('auto');
   let captionValue = $state('none');
 
@@ -287,7 +285,7 @@
   // Reset seek-to-live flag when video element changes
   $effect(() => {
     if (video) {
-      hasSeekToLive = false;
+      _hasSeekToLive = false;
     }
   });
 
@@ -311,7 +309,7 @@
   }));
 
   // Seek value for slider
-  let seekValue = $derived.by(() => {
+  let _seekValue = $derived.by(() => {
     if (isLive) {
       const window = liveEdge - seekableStart;
       if (window <= 0) return 1000;
@@ -387,26 +385,6 @@
     isMuted = next === 0;
   }
 
-  function handleSeekChange(val: number) {
-    if (disabled || !video) return;
-    if (isLive) {
-      const window = liveEdge - seekableStart;
-      const newTime = seekableStart + (val / 1000) * window;
-      if (onseek) {
-        onseek(newTime);
-      } else {
-        video.currentTime = newTime;
-      }
-    } else if (Number.isFinite(duration)) {
-      const newTime = (val / 1000) * duration;
-      if (onseek) {
-        onseek(newTime);
-      } else {
-        video.currentTime = newTime;
-      }
-    }
-  }
-
   function handleFullscreen() {
     if (disabled) return;
     const container = document.querySelector('[data-player-container="true"]') as HTMLElement | null;

package/src/SeekBar.svelte

@@ -240,7 +240,7 @@
     isDragging && 'fw-seek-track--active'
   )}>
     <!-- Buffered segments -->
-    {#each bufferedSegments as segment, index}
+    {#each bufferedSegments as segment, _index}
       <div
         class="fw-seek-buffered"
         style="left: {segment.startPercent}%; width: {segment.endPercent - segment.startPercent}%;"

package/src/StatsPanel.svelte

@@ -3,27 +3,14 @@
   Port of src/components/StatsPanel.tsx
 -->
 <script lang="ts">
-  import { cn, type ContentMetadata, type PlaybackQuality } from '@livepeer-frameworks/player-core';
+  import { cn, type ContentMetadata, type PlaybackQuality, type StreamState } from '@livepeer-frameworks/player-core';
   import Button from './ui/Button.svelte';
 
-  interface StreamStateInfo {
-    status?: string;
-    viewers?: number;
-    tracks?: Array<{
-      type: string;
-      codec: string;
-      width?: number;
-      height?: number;
-      bps?: number;
-      channels?: number;
-    }>;
-  }
-
   interface Props {
     isOpen: boolean;
     onClose: () => void;
     metadata?: ContentMetadata | null;
-    streamState?: StreamStateInfo | null;
+    streamState?: StreamState | null;
     quality?: PlaybackQuality | null;
     videoElement?: HTMLVideoElement | null;
     protocol?: string;
@@ -59,17 +46,38 @@
   let latency = $derived(quality?.latency ? `${Math.round(quality.latency)} ms` : '—');
 
   // Stream state stats
-  let viewers = $derived(streamState?.viewers ?? metadata?.viewers ?? '—');
+  let viewers = $derived(metadata?.viewers ?? '—');
   let streamStatus = $derived(streamState?.status ?? metadata?.status ?? '—');
 
+  const mistInfo = $derived(metadata?.mist ?? streamState?.streamInfo);
+
+  function deriveTracksFromMist() {
+    const mistTracks = mistInfo?.meta?.tracks;
+    if (!mistTracks) return undefined;
+    return Object.values(mistTracks).map((t: any) => ({
+      type: t.type,
+      codec: t.codec,
+      width: t.width,
+      height: t.height,
+      bitrate: typeof t.bps === 'number' ? Math.round(t.bps) : undefined,
+      fps: typeof t.fpks === 'number' ? t.fpks / 1000 : undefined,
+      channels: t.channels,
+      sampleRate: t.rate,
+    }));
+  }
+
   // Format track info
   function formatTracks(): string {
-    if (!streamState?.tracks?.length) return '—';
-    return streamState.tracks.map(t => {
+    const tracks = metadata?.tracks ?? deriveTracksFromMist();
+    if (!tracks?.length) return '—';
+    return tracks.map(t => {
       if (t.type === 'video') {
-        return `${t.codec} ${t.width}x${t.height}@${t.bps ? Math.round(t.bps / 1000) + 'kbps' : '?'}`;
+        const resolution = t.width && t.height ? `${t.width}x${t.height}` : '?';
+        const bitrate = t.bitrate ? `${Math.round(t.bitrate / 1000)}kbps` : '?';
+        return `${t.codec ?? '?'} ${resolution}@${bitrate}`;
       }
-      return `${t.codec} ${t.channels}ch`;
+      const channels = t.channels ? `${t.channels}ch` : '?';
+      return `${t.codec ?? '?'} ${channels}`;
     }).join(', ');
   }
 
@@ -96,6 +104,15 @@
       { label: 'Viewers', value: String(viewers) },
       { label: 'Status', value: streamStatus },
       { label: 'Tracks', value: formatTracks() },
+      { label: 'Mist Type', value: mistInfo?.type ?? '—' },
+      {
+        label: 'Mist Buffer Window',
+        value: mistInfo?.meta?.buffer_window != null
+          ? String(mistInfo.meta.buffer_window)
+          : '—',
+      },
+      { label: 'Mist Lastms', value: mistInfo?.lastms != null ? String(mistInfo.lastms) : '—' },
+      { label: 'Mist Unixoffset', value: mistInfo?.unixoffset != null ? String(mistInfo.unixoffset) : '—' },
     );
 
     if (metadata?.durationSeconds) {

package/src/SubtitleRenderer.svelte

@@ -78,7 +78,7 @@
   // State
   let liveCues = $state<SubtitleCue[]>([]);
   let displayedText = $state<string>('');
-  let lastCueId: string | null = null;
+  let _lastCueId: string | null = null;
   let unsubscribe: (() => void) | null = null;
 
   // Merged style
@@ -166,10 +166,10 @@
 
     if (activeCue) {
       displayedText = activeCue.text;
-      lastCueId = activeCue.id;
+      _lastCueId = activeCue.id;
     } else {
       displayedText = '';
-      lastCueId = null;
+      _lastCueId = null;
     }
   });
 

package/src/components/VolumeIcons.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   let {
     size = 16,
-    color = 'currentColor',
+    color: _color = 'currentColor',
     className = '',
     isMuted = false,
     volume = 1 // 0-1 range

package/src/index.ts

@@ -12,11 +12,11 @@
  * @example
  * ```svelte
  * <script>
- *   import { Player } from '@livepeer-frameworks/player/svelte';
+ *   import { Player } from '@livepeer-frameworks/player-svelte';
  * </script>
  *
  * <Player
- *   contentId="my-stream"
+ *   contentId="pk_..."
  *   contentType="live"
  *   options={{ gatewayUrl: "https://gateway.example.com/graphql", devMode: true }}
  *   autoplay

package/src/stores/playbackQuality.ts

@@ -19,16 +19,6 @@ export interface PlaybackQualityStore extends Readable<PlaybackQuality | null> {
   destroy: () => void;
 }
 
-const initialQuality: PlaybackQuality = {
-  score: 100,
-  bitrate: 0,
-  bufferedAhead: 0,
-  frameDropRate: 0,
-  stallCount: 0,
-  latency: 0,
-  timestamp: Date.now(),
-};
-
 /**
  * Create a playback quality monitoring store.
  *

package/src/stores/playerContext.ts

@@ -4,7 +4,7 @@
  * Port of PlayerContext.tsx React context to Svelte 5 stores.
  */
 
-import { writable, derived, type Readable, type Writable } from 'svelte/store';
+import { writable, derived, type Readable } from 'svelte/store';
 import { getContext, setContext } from 'svelte';
 import { globalPlayerManager, type StreamInfo, type IPlayer } from '@livepeer-frameworks/player-core';
 

package/src/stores/playerController.ts

@@ -3,13 +3,12 @@
  * for declarative usage in Svelte 5 components.
  */
 
-import { writable, derived, type Readable, type Writable } from 'svelte/store';
+import { writable, derived, type Readable } from 'svelte/store';
 import {
   PlayerController,
   type PlayerControllerConfig,
   type PlayerState,
   type StreamState,
-  type StreamSource,
   type PlaybackQuality,
   type ContentEndpoints,
   type ContentMetadata,
@@ -192,7 +191,7 @@ const initialState: PlayerControllerState = {
  *   let containerEl: HTMLElement;
  *
  *   const playerStore = createPlayerControllerStore({
- *     contentId: 'my-stream',
+ *     contentId: 'pk_...',
  *     contentType: 'live',
  *     gatewayUrl: 'https://gateway.example.com/graphql',
  *   });
@@ -270,6 +269,7 @@ export function createPlayerControllerStore(
       store.update(prev => ({
         ...prev,
         streamState,
+        metadata: controller!.getMetadata(),
         isEffectivelyLive: controller!.isEffectivelyLive(),
         shouldShowIdleScreen: controller!.shouldShowIdleScreen(),
       }));
@@ -321,7 +321,7 @@ export function createPlayerControllerStore(
       });
     }));
 
-    unsubscribers.push(controller.on('playerSelected', ({ player, source }) => {
+    unsubscribers.push(controller.on('playerSelected', ({ player: _player, source }) => {
       store.update(prev => ({
         ...prev,
         currentPlayerInfo: controller!.getCurrentPlayerInfo(),

package/src/stores/streamState.ts

@@ -82,7 +82,7 @@ const initialState: StreamState = {
  *
  *   const streamState = createStreamStateManager({
  *     mistBaseUrl: 'https://mist.example.com',
- *     streamName: 'my-stream',
+ *     streamName: 'pk_...', // playbackId (view key)
  *   });
  *
  *   // Access values

package/src/stores/viewerEndpoints.ts

@@ -5,12 +5,12 @@
  */
 
 import { writable, derived, type Readable } from 'svelte/store';
-import type { ContentEndpoints, EndpointInfo, ContentMetadata, ContentType } from '@livepeer-frameworks/player-core';
+import type { ContentEndpoints, ContentType } from '@livepeer-frameworks/player-core';
 
 export interface ViewerEndpointsOptions {
   gatewayUrl: string;
-  contentType: ContentType;
   contentId: string;
+  contentType?: ContentType;
   authToken?: string;
 }
 
@@ -82,7 +82,7 @@ const initialState: ViewerEndpointsState = {
  *   const resolver = createEndpointResolver({
  *     gatewayUrl: 'https://gateway.example.com/graphql',
  *     contentType: 'live',
- *     contentId: 'my-stream',
+ *     contentId: 'pk_...',
  *   });
  *
  *   $: endpoints = $resolver.endpoints;
@@ -101,7 +101,7 @@ export function createEndpointResolver(options: ViewerEndpointsOptions): ViewerE
    * Fetch endpoints from Gateway
    */
   async function fetchEndpoints() {
-    if (!gatewayUrl || !contentType || !contentId || !mounted) return;
+    if (!gatewayUrl || !contentId || !mounted) return;
 
     // Abort previous request
     abortController?.abort();
@@ -112,8 +112,8 @@ export function createEndpointResolver(options: ViewerEndpointsOptions): ViewerE
     try {
       const graphqlEndpoint = gatewayUrl.replace(/\/$/, '');
       const query = `
-        query ResolveViewer($contentType: String!, $contentId: String!) {
-          resolveViewerEndpoint(contentType: $contentType, contentId: $contentId) {
+        query ResolveViewer($contentId: String!) {
+          resolveViewerEndpoint(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 }
@@ -127,7 +127,7 @@ export function createEndpointResolver(options: ViewerEndpointsOptions): ViewerE
           'Content-Type': 'application/json',
           ...(authToken ? { Authorization: `Bearer ${authToken}` } : {}),
         },
-        body: JSON.stringify({ query, variables: { contentType, contentId } }),
+        body: JSON.stringify({ query, variables: { contentId } }),
         signal: abortController.signal,
       });