@livepeer-frameworks/player-svelte 0.0.3 → 0.1.0

package/README.md

@@ -0,0 +1,78 @@
+# @livepeer-frameworks/player-svelte
+
+Svelte wrapper for the FrameWorks player. Resolves endpoints via Gateway or Mist and renders the best available player (WebCodecs, HLS, etc).
+
+**Docs:** `docs.frameworks.network`
+
+## Install
+
+```bash
+pnpm add @livepeer-frameworks/player-svelte
+# or
+npm i @livepeer-frameworks/player-svelte
+```
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Player } from '@livepeer-frameworks/player-svelte';
+</script>
+
+<div style="width: 100%; height: 500px;">
+  <Player
+    contentType="live"
+    contentId="pk_..." // playbackId
+    options={{ gatewayUrl: 'https://your-bridge/graphql' }}
+  />
+</div>
+```
+
+Notes:
+- There is **no default gateway**; provide `gatewayUrl` unless you pass `endpoints` or `mistUrl`.
+
+### Direct MistServer Node (mistUrl)
+
+```svelte
+<Player
+  contentType="live"
+  contentId="pk_..."
+  options={{ mistUrl: 'https://edge.example.com' }}
+/>
+```
+
+### Styles
+
+```ts
+import '@livepeer-frameworks/player-svelte/player.css';
+```
+
+## Controls & Shortcuts
+
+The player ships with keyboard/mouse shortcuts when the player is focused (click/tap once).
+
+**Keyboard**
+| Shortcut | Action | Notes |
+|---|---|---|
+| Space | Play/Pause | Hold = 2x speed (when seekable) |
+| K | Play/Pause | YouTube-style |
+| J / Left | Skip back 10s | Disabled on live-only |
+| L / Right | Skip forward 10s | Disabled on live-only |
+| Up / Down | Volume +/-10% | - |
+| M | Mute/Unmute | - |
+| F | Fullscreen toggle | - |
+| C | Captions toggle | - |
+| 0-9 | Seek to 0-90% | Disabled on live-only |
+| , / . | Prev/Next frame (paused) | WebCodecs = true step; others = buffered-only |
+
+**Mouse / Touch**
+| Gesture | Action | Notes |
+|---|---|---|
+| Double-click | Fullscreen toggle | Desktop |
+| Double-tap (left/right) | Skip +/-10s | Touch only, disabled on live-only |
+| Click/Tap and hold | 2x speed | Disabled on live-only |
+
+**Constraints**
+- Live-only streams disable seeking/skip/2x hold and frame-step.
+- Live with DVR buffer enables the same shortcuts as VOD.
+- Frame stepping only moves within already buffered ranges (no network seek). WebCodecs supports true frame stepping when paused.

package/dist/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/dist/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);
@@ -646,7 +646,7 @@
   {/each}
 
   <!-- Floating particles -->
-  {#each particles as particle, i}
+  {#each particles as particle, _i}
     <div
       class="particle"
       style="
@@ -661,7 +661,7 @@
   {/each}
 
   <!-- Animated bubbles -->
-  {#each bubbles as bubble, i}
+  {#each bubbles as bubble, _i}
     <div
       class="bubble"
       style="

package/dist/LoadingScreen.svelte

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

package/dist/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}
@@ -420,6 +415,7 @@
               isStatsOpen={isStatsOpen}
               onStatsToggle={() => isStatsOpen = !isStatsOpen}
               isContentLive={storeState.isEffectivelyLive}
+              onJumpToLive={() => playerStore?.getController()?.jumpToLive()}
             />
           {/if}
         </div>

package/dist/Player.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type PlaybackMode, type ContentEndpoints, type PlayerState, type PlayerStateContext, type ContentType } from '@livepeer-frameworks/player-core';
+import { type PlaybackMode, type ContentEndpoints, type PlayerState, type PlayerStateContext, type ContentType, type PlayerMetadata } from '@livepeer-frameworks/player-core';
 interface Props {
     contentId: string;
     contentType?: ContentType;
@@ -20,6 +20,7 @@ interface Props {
         playbackMode?: PlaybackMode;
     };
     onStateChange?: (state: PlayerState, context?: PlayerStateContext) => void;
+    onMetadata?: (metadata: PlayerMetadata) => void;
 }
 declare const Player: import("svelte").Component<Props, {}, "">;
 type Player = ReturnType<typeof Player>;

package/dist/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';
@@ -49,6 +47,8 @@
     onStatsToggle?: () => void;
     /** Content-type based live flag (for mode selector visibility, separate from seek bar isLive) */
     isContentLive?: boolean;
+    /** Jump to live edge callback */
+    onJumpToLive?: () => void;
   }
 
   let {
@@ -65,6 +65,7 @@
     isStatsOpen = false,
     onStatsToggle = undefined,
     isContentLive = undefined,
+    onJumpToLive = undefined,
   }: Props = $props();
 
   // Video element discovery
@@ -116,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');
 
@@ -193,6 +194,10 @@
     return null;
   }
 
+  const allowMediaStreamDvr = isMediaStreamSource(video)
+    && (bufferWindowMs !== undefined && bufferWindowMs > 0)
+    && (sourceType !== 'whep' && sourceType !== 'webrtc');
+
   // Seekable range using core calculation (allow player override)
   let seekableRange = $derived.by(() => getPlayerSeekableRange() ?? calculateSeekableRange({
     isLive,
@@ -200,6 +205,7 @@
     mistStreamInfo,
     currentTime,
     duration,
+    allowMediaStreamDvr,
   }));
   let seekableStart = $derived(seekableRange.seekableStart);
   let liveEdge = $derived(seekableRange.liveEdge);
@@ -210,7 +216,7 @@
   let liveThresholds = $derived(calculateLiveThresholds(sourceType, isWebRTC, bufferWindowMs));
 
   // Can seek - check player's canSeek method first (for WebCodecs, MEWS server-side seeking)
-  let canSeek = $derived.by(() => {
+  let baseCanSeek = $derived.by(() => {
     // Check if current player has canSeek method
     const player = globalPlayerManager.getCurrentPlayer();
     if (player && typeof (player as any).canSeek === 'function') {
@@ -224,12 +230,17 @@
       bufferWindowMs,
     });
   });
+  let canSeek = $derived(baseCanSeek && (!isLive || hasDvrWindow));
 
   // Update state from video events
   $effect(() => {
     if (!video) return;
 
-    function updatePlayingState() { isPlaying = !video!.paused; }
+    function updatePlayingState() {
+      const player = globalPlayerManager.getCurrentPlayer();
+      const paused = player?.isPaused?.() ?? video!.paused;
+      isPlaying = !paused;
+    }
     function updateMutedState() {
       isMuted = video!.muted || video!.volume === 0;
       const vol = video!.volume;
@@ -274,7 +285,7 @@
   // Reset seek-to-live flag when video element changes
   $effect(() => {
     if (video) {
-      hasSeekToLive = false;
+      _hasSeekToLive = false;
     }
   });
 
@@ -298,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;
@@ -374,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;
@@ -407,6 +398,10 @@
 
   function handleGoLive() {
     if (disabled || !video) return;
+    if (onJumpToLive) {
+      onJumpToLive();
+      return;
+    }
     globalPlayerManager.getCurrentPlayer()?.jumpToLive?.();
   }
 
@@ -573,15 +568,11 @@
               disabled={!hasDvrWindow || isNearLiveState}
               class={cn(
                 'fw-live-badge',
-                (!hasDvrWindow || isNearLiveState) ? 'fw-live-badge--active' : 'fw-live-badge--behind',
-                !hasDvrWindow && 'fw-live-badge--nodvr'
+                (!hasDvrWindow || isNearLiveState) ? 'fw-live-badge--active' : 'fw-live-badge--behind'
               )}
-              title={!hasDvrWindow ? 'Live only (DVR disabled)' : (isNearLiveState ? 'At live edge' : 'Jump to live')}
+              title={!hasDvrWindow ? 'Live only' : (isNearLiveState ? 'At live edge' : 'Jump to live')}
             >
               LIVE
-              {#if !hasDvrWindow}
-                <span class="fw-live-badge__nodvr">NO DVR</span>
-              {/if}
               {#if !isNearLiveState && hasDvrWindow}
                 <SeekToLiveIcon size={10} />
               {/if}

package/dist/PlayerControls.svelte.d.ts

@@ -14,6 +14,8 @@ interface Props {
     onStatsToggle?: () => void;
     /** Content-type based live flag (for mode selector visibility, separate from seek bar isLive) */
     isContentLive?: boolean;
+    /** Jump to live edge callback */
+    onJumpToLive?: () => void;
 }
 declare const PlayerControls: import("svelte").Component<Props, {}, "">;
 type PlayerControls = ReturnType<typeof PlayerControls>;

package/dist/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/dist/SpeedIndicator.svelte

@@ -15,22 +15,21 @@
 </script>
 
 <div
-  class="fw-speed-indicator absolute inset-0 z-30 pointer-events-none
-         flex items-center justify-center
+  class="fw-speed-indicator absolute top-3 right-3 z-30 pointer-events-none
          transition-opacity duration-150
          {isVisible ? 'opacity-100' : 'opacity-0'}
          {className}"
 >
   <div
-    class="bg-black/80 text-white px-4 py-2 rounded-full
-           text-lg font-semibold tabular-nums
+    class="bg-black/60 text-white px-2.5 py-1 rounded-md
+           text-xs font-semibold tabular-nums
            flex items-center gap-2
-           backdrop-blur-sm border border-white/20
+           border border-white/15
            transform transition-transform duration-150
            {isVisible ? 'scale-100' : 'scale-90'}"
   >
     <!-- Fast-forward icon -->
-    <svg viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5" aria-hidden="true">
+    <svg viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4" aria-hidden="true">
       <path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" />
     </svg>
     <span>{speed}x</span>

package/dist/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/dist/StatsPanel.svelte.d.ts

@@ -1,21 +1,9 @@
-import { type ContentMetadata, type PlaybackQuality } from '@livepeer-frameworks/player-core';
-interface StreamStateInfo {
-    status?: string;
-    viewers?: number;
-    tracks?: Array<{
-        type: string;
-        codec: string;
-        width?: number;
-        height?: number;
-        bps?: number;
-        channels?: number;
-    }>;
-}
+import { type ContentMetadata, type PlaybackQuality, type StreamState } from '@livepeer-frameworks/player-core';
 interface Props {
     isOpen: boolean;
     onClose: () => void;
     metadata?: ContentMetadata | null;
-    streamState?: StreamStateInfo | null;
+    streamState?: StreamState | null;
     quality?: PlaybackQuality | null;
     videoElement?: HTMLVideoElement | null;
     protocol?: string;

package/dist/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/dist/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/dist/index.d.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/dist/index.js

@@ -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/dist/stores/playbackQuality.js

@@ -5,15 +5,6 @@
  */
 import { writable, derived } from 'svelte/store';
 import { QualityMonitor } from '@livepeer-frameworks/player-core';
-const initialQuality = {
-    score: 100,
-    bitrate: 0,
-    bufferedAhead: 0,
-    frameDropRate: 0,
-    stallCount: 0,
-    latency: 0,
-    timestamp: Date.now(),
-};
 /**
  * Create a playback quality monitoring store.
  *

package/dist/stores/playerController.d.ts

@@ -145,7 +145,7 @@ export interface PlayerControllerStore extends Readable<PlayerControllerState> {
  *   let containerEl: HTMLElement;
  *
  *   const playerStore = createPlayerControllerStore({
- *     contentId: 'my-stream',
+ *     contentId: 'pk_...',
  *     contentType: 'live',
  *     gatewayUrl: 'https://gateway.example.com/graphql',
  *   });