@livepeer-frameworks/player-react 0.1.0 → 0.1.1

package/src/components/StreamStateOverlay.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import type { StreamStatus } from '../types';
+import React from "react";
+import type { StreamStatus } from "../types";
 
 export interface StreamStateOverlayProps {
   /** Current stream status */
@@ -23,43 +23,93 @@ function StatusIcon({ status }: { status: StreamStatus }) {
   const iconClass = "w-5 h-5";
 
   switch (status) {
-    case 'ONLINE':
+    case "ONLINE":
       return (
-        <svg className={`${iconClass} fw-status-online`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <svg
+          className={`${iconClass} fw-status-online`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
         </svg>
       );
 
-    case 'OFFLINE':
+    case "OFFLINE":
       return (
-        <svg className={`${iconClass} fw-status-offline`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414" />
+        <svg
+          className={`${iconClass} fw-status-offline`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M18.364 5.636a9 9 0 010 12.728m0 0l-2.829-2.829m2.829 2.829L21 21M15.536 8.464a5 5 0 010 7.072m0 0l-2.829-2.829m-4.243 2.829a4.978 4.978 0 01-1.414-2.83m-1.414 5.658a9 9 0 01-2.167-9.238m7.824 2.167a1 1 0 111.414 1.414m-1.414-1.414L3 3m8.293 8.293l1.414 1.414"
+          />
         </svg>
       );
 
-    case 'INITIALIZING':
-    case 'BOOTING':
-    case 'WAITING_FOR_DATA':
+    case "INITIALIZING":
+    case "BOOTING":
+    case "WAITING_FOR_DATA":
       return (
-        <svg className={`${iconClass} fw-status-warning animate-spin`} fill="none" viewBox="0 0 24 24">
-          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+        <svg
+          className={`${iconClass} fw-status-warning animate-spin`}
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          />
         </svg>
       );
 
-    case 'SHUTTING_DOWN':
+    case "SHUTTING_DOWN":
       return (
-        <svg className={`${iconClass} fw-status-warning`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+        <svg
+          className={`${iconClass} fw-status-warning`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M13 10V3L4 14h7v7l9-11h-7z"
+          />
         </svg>
       );
 
-    case 'ERROR':
-    case 'INVALID':
+    case "ERROR":
+    case "INVALID":
     default:
       return (
-        <svg className={`${iconClass} fw-status-offline`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+        <svg
+          className={`${iconClass} fw-status-offline`}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
         </svg>
       );
   }
@@ -70,15 +120,24 @@ function StatusIcon({ status }: { status: StreamStatus }) {
  */
 function getStatusLabel(status: StreamStatus): string {
   switch (status) {
-    case 'ONLINE': return 'ONLINE';
-    case 'OFFLINE': return 'OFFLINE';
-    case 'INITIALIZING': return 'INITIALIZING';
-    case 'BOOTING': return 'STARTING';
-    case 'WAITING_FOR_DATA': return 'WAITING';
-    case 'SHUTTING_DOWN': return 'ENDING';
-    case 'ERROR': return 'ERROR';
-    case 'INVALID': return 'INVALID';
-    default: return 'STATUS';
+    case "ONLINE":
+      return "ONLINE";
+    case "OFFLINE":
+      return "OFFLINE";
+    case "INITIALIZING":
+      return "INITIALIZING";
+    case "BOOTING":
+      return "STARTING";
+    case "WAITING_FOR_DATA":
+      return "WAITING";
+    case "SHUTTING_DOWN":
+      return "ENDING";
+    case "ERROR":
+      return "ERROR";
+    case "INVALID":
+      return "INVALID";
+    default:
+      return "STATUS";
   }
 }
 
@@ -94,26 +153,26 @@ export const StreamStateOverlay: React.FC<StreamStateOverlayProps> = ({
   percentage,
   onRetry,
   visible = true,
-  className = '',
+  className = "",
 }) => {
-  if (!visible || status === 'ONLINE') {
+  if (!visible || status === "ONLINE") {
     return null;
   }
 
-  const showRetry = status === 'ERROR' || status === 'INVALID' || status === 'OFFLINE';
-  const showProgress = status === 'INITIALIZING' && percentage !== undefined;
+  const showRetry = status === "ERROR" || status === "INVALID" || status === "OFFLINE";
+  const showProgress = status === "INITIALIZING" && percentage !== undefined;
 
   return (
     <div
       className={`absolute inset-0 z-20 flex items-center justify-center ${className}`}
-      style={{ backgroundColor: 'hsl(var(--tn-bg-dark) / 0.8)', backdropFilter: 'blur(4px)' }}
+      style={{ backgroundColor: "hsl(var(--tn-bg-dark) / 0.8)", backdropFilter: "blur(4px)" }}
       role="status"
       aria-live="polite"
     >
       {/* Slab container - no rounded corners, seam borders */}
       <div
         className="fw-slab w-[280px] max-w-[90%]"
-        style={{ backgroundColor: 'hsl(var(--tn-bg) / 0.95)' }}
+        style={{ backgroundColor: "hsl(var(--tn-bg) / 0.95)" }}
       >
         {/* Slab header - status label with icon */}
         <div className="fw-slab-header flex items-center gap-2">
@@ -123,7 +182,7 @@ export const StreamStateOverlay: React.FC<StreamStateOverlayProps> = ({
 
         {/* Slab body - message and progress */}
         <div className="fw-slab-body">
-          <p className="text-sm" style={{ color: 'hsl(var(--tn-fg))' }}>
+          <p className="text-sm" style={{ color: "hsl(var(--tn-fg))" }}>
             {message}
           </p>
 
@@ -132,33 +191,30 @@ export const StreamStateOverlay: React.FC<StreamStateOverlayProps> = ({
               {/* Progress bar - no rounded corners */}
               <div
                 className="h-1.5 w-full overflow-hidden"
-                style={{ backgroundColor: 'hsl(var(--tn-bg-visual))' }}
+                style={{ backgroundColor: "hsl(var(--tn-bg-visual))" }}
               >
                 <div
                   className="h-full transition-all duration-300"
                   style={{
                     width: `${Math.min(100, percentage)}%`,
-                    backgroundColor: 'hsl(var(--tn-yellow))',
+                    backgroundColor: "hsl(var(--tn-yellow))",
                   }}
                 />
               </div>
-              <p
-                className="mt-1.5 text-xs font-mono"
-                style={{ color: 'hsl(var(--tn-fg-dark))' }}
-              >
+              <p className="mt-1.5 text-xs font-mono" style={{ color: "hsl(var(--tn-fg-dark))" }}>
                 {Math.round(percentage)}%
               </p>
             </div>
           )}
 
-          {status === 'OFFLINE' && (
-            <p className="mt-2 text-xs" style={{ color: 'hsl(var(--tn-fg-dark))' }}>
+          {status === "OFFLINE" && (
+            <p className="mt-2 text-xs" style={{ color: "hsl(var(--tn-fg-dark))" }}>
               The stream will start when the broadcaster goes live
             </p>
           )}
 
-          {(status === 'BOOTING' || status === 'WAITING_FOR_DATA') && (
-            <p className="mt-2 text-xs" style={{ color: 'hsl(var(--tn-fg-dark))' }}>
+          {(status === "BOOTING" || status === "WAITING_FOR_DATA") && (
+            <p className="mt-2 text-xs" style={{ color: "hsl(var(--tn-fg-dark))" }}>
               Please wait while the stream prepares...
             </p>
           )}
@@ -167,11 +223,11 @@ export const StreamStateOverlay: React.FC<StreamStateOverlayProps> = ({
           {!showRetry && (
             <div
               className="mt-3 flex items-center gap-2 text-xs"
-              style={{ color: 'hsl(var(--tn-fg-dark))' }}
+              style={{ color: "hsl(var(--tn-fg-dark))" }}
             >
               <span
                 className="h-1.5 w-1.5 animate-pulse"
-                style={{ backgroundColor: 'hsl(var(--tn-cyan))' }}
+                style={{ backgroundColor: "hsl(var(--tn-cyan))" }}
               />
               <span>Checking stream status...</span>
             </div>
@@ -185,7 +241,7 @@ export const StreamStateOverlay: React.FC<StreamStateOverlayProps> = ({
               type="button"
               onClick={onRetry}
               className="fw-btn-flush py-2.5 text-xs font-medium uppercase tracking-wide"
-              style={{ color: 'hsl(var(--tn-blue))' }}
+              style={{ color: "hsl(var(--tn-blue))" }}
               aria-label="Retry connection"
             >
               Retry Connection

package/src/components/SubtitleRenderer.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState, useRef } from 'react';
-import type { SubtitleCue, MetaTrackEvent } from '../types';
+import React, { useEffect, useState, useRef } from "react";
+import type { SubtitleCue, MetaTrackEvent } from "../types";
 
 export interface SubtitleRendererProps {
   /** Current video playback time in seconds */
@@ -40,48 +40,48 @@ export interface SubtitleStyle {
 }
 
 const DEFAULT_STYLE: SubtitleStyle = {
-  fontSize: '1.5rem',
-  fontFamily: 'system-ui, -apple-system, sans-serif',
-  color: 'white',
-  backgroundColor: 'rgba(0, 0, 0, 0.75)',
-  textShadow: '2px 2px 4px rgba(0, 0, 0, 0.5)',
-  bottom: '5%',
-  maxWidth: '90%',
-  padding: '0.5em 1em',
-  borderRadius: '4px',
+  fontSize: "1.5rem",
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  color: "white",
+  backgroundColor: "rgba(0, 0, 0, 0.75)",
+  textShadow: "2px 2px 4px rgba(0, 0, 0, 0.5)",
+  bottom: "5%",
+  maxWidth: "90%",
+  padding: "0.5em 1em",
+  borderRadius: "4px",
 };
 
 /**
  * Parse subtitle cue from meta track event data
  */
 function parseSubtitleCue(data: unknown): SubtitleCue | null {
-  if (typeof data !== 'object' || data === null) return null;
+  if (typeof data !== "object" || data === null) return null;
 
   const obj = data as Record<string, unknown>;
 
   // Extract text
-  const text = typeof obj.text === 'string' ? obj.text : String(obj.text ?? '');
+  const text = typeof obj.text === "string" ? obj.text : String(obj.text ?? "");
   if (!text) return null;
 
   // Extract timing
   let startTime = 0;
   let endTime = Infinity;
 
-  if ('startTime' in obj) startTime = Number(obj.startTime);
-  else if ('start' in obj) startTime = Number(obj.start);
+  if ("startTime" in obj) startTime = Number(obj.startTime);
+  else if ("start" in obj) startTime = Number(obj.start);
 
-  if ('endTime' in obj) endTime = Number(obj.endTime);
-  else if ('end' in obj) endTime = Number(obj.end);
+  if ("endTime" in obj) endTime = Number(obj.endTime);
+  else if ("end" in obj) endTime = Number(obj.end);
 
   // Extract ID
-  const id = typeof obj.id === 'string' ? obj.id : String(Date.now());
+  const id = typeof obj.id === "string" ? obj.id : String(Date.now());
 
   return {
     id,
     text,
     startTime,
     endTime,
-    lang: typeof obj.lang === 'string' ? obj.lang : undefined,
+    lang: typeof obj.lang === "string" ? obj.lang : undefined,
   };
 }
 
@@ -121,10 +121,10 @@ export const SubtitleRenderer: React.FC<SubtitleRendererProps> = ({
   subscribeToMetaTrack,
   metaTrackId,
   style: customStyle,
-  className = '',
+  className = "",
 }) => {
   const [liveCues, setLiveCues] = useState<SubtitleCue[]>([]);
-  const [displayedText, setDisplayedText] = useState<string>('');
+  const [displayedText, setDisplayedText] = useState<string>("");
   const lastCueIdRef = useRef<string | null>(null);
 
   const style = { ...DEFAULT_STYLE, ...customStyle };
@@ -139,12 +139,12 @@ export const SubtitleRenderer: React.FC<SubtitleRendererProps> = ({
     }
 
     const handleMetaEvent = (event: MetaTrackEvent) => {
-      if (event.type === 'subtitle') {
+      if (event.type === "subtitle") {
         const cue = parseSubtitleCue(event.data);
         if (cue) {
-          setLiveCues(prev => {
+          setLiveCues((prev) => {
             // Deduplicate by ID
-            const existing = prev.find(c => c.id === cue.id);
+            const existing = prev.find((c) => c.id === cue.id);
             if (existing) return prev;
 
             // Keep last 50 cues max
@@ -165,13 +165,13 @@ export const SubtitleRenderer: React.FC<SubtitleRendererProps> = ({
   // Find active cue based on current time
   useEffect(() => {
     if (!enabled) {
-      setDisplayedText('');
+      setDisplayedText("");
       return;
     }
 
     // Find cue that matches current time
     const currentTimeMs = currentTime * 1000; // Convert to ms if needed
-    const activeCue = allCues.find(cue => {
+    const activeCue = allCues.find((cue) => {
       const start = cue.startTime;
       const end = cue.endTime;
       return currentTimeMs >= start && currentTimeMs < end;
@@ -181,7 +181,7 @@ export const SubtitleRenderer: React.FC<SubtitleRendererProps> = ({
       setDisplayedText(activeCue.text);
       lastCueIdRef.current = activeCue.id;
     } else {
-      setDisplayedText('');
+      setDisplayedText("");
       lastCueIdRef.current = null;
     }
   }, [enabled, currentTime, allCues]);
@@ -190,9 +190,9 @@ export const SubtitleRenderer: React.FC<SubtitleRendererProps> = ({
   useEffect(() => {
     const currentTimeMs = currentTime * 1000;
 
-    setLiveCues(prev => {
+    setLiveCues((prev) => {
       // Remove cues that are more than 30 seconds old
-      return prev.filter(cue => {
+      return prev.filter((cue) => {
         const endTime = cue.endTime === Infinity ? cue.startTime + 10000 : cue.endTime;
         return endTime >= currentTimeMs - 30000;
       });

package/src/components/ThumbnailOverlay.tsx

@@ -9,7 +9,7 @@ const ThumbnailOverlay: React.FC<ThumbnailOverlayProps> = ({
   message,
   showUnmuteMessage = false,
   style,
-  className
+  className,
 }) => {
   const handleClick = (e: React.MouseEvent | React.KeyboardEvent) => {
     e.stopPropagation();
@@ -29,8 +29,9 @@ const ThumbnailOverlay: React.FC<ThumbnailOverlayProps> = ({
       }}
       style={style}
       className={cn(
-        "fw-player-thumbnail relative flex h-full min-h-[280px] w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-slate-950 text-foreground outline-none transition focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background"
-      , className)}
+        "fw-player-thumbnail relative flex h-full min-h-[280px] w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-slate-950 text-foreground outline-none transition focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        className
+      )}
     >
       {thumbnailUrl && (
         <div
@@ -73,9 +74,7 @@ const ThumbnailOverlay: React.FC<ThumbnailOverlayProps> = ({
               </svg>
             </Button>
             <div className="w-full rounded-lg border border-white/10 bg-black/70 p-5 text-white shadow-inner backdrop-blur">
-              <p className="text-base font-semibold text-primary">
-                {message ?? "Click to play"}
-              </p>
+              <p className="text-base font-semibold text-primary">{message ?? "Click to play"}</p>
               <p className="mt-1 text-xs text-white/70">
                 {message ? "Start streaming instantly" : "Jump into the live feed"}
               </p>

package/src/components/TitleOverlay.tsx

@@ -31,15 +31,9 @@ const TitleOverlay: React.FC<TitleOverlayProps> = ({
         className
       )}
     >
-      {title && (
-        <h2 className="text-white text-sm font-medium truncate max-w-[80%]">
-          {title}
-        </h2>
-      )}
+      {title && <h2 className="text-white text-sm font-medium truncate max-w-[80%]">{title}</h2>}
       {description && (
-        <p className="text-white/70 text-xs mt-0.5 line-clamp-2 max-w-[70%]">
-          {description}
-        </p>
+        <p className="text-white/70 text-xs mt-0.5 line-clamp-2 max-w-[70%]">{description}</p>
       )}
     </div>
   );

package/src/components/players/DashJsPlayer.tsx

@@ -5,8 +5,8 @@
  * The implementation is in @livepeer-frameworks/player-core.
  */
 
-import React, { useEffect, useRef } from 'react';
-import { DashJsPlayerImpl } from '@livepeer-frameworks/player-core';
+import React, { useEffect, useRef } from "react";
+import { DashJsPlayerImpl } from "@livepeer-frameworks/player-core";
 
 // Re-export the implementation from core for backwards compatibility
 export { DashJsPlayerImpl };
@@ -25,7 +25,7 @@ const DashJsPlayer: React.FC<Props> = ({
   muted = true,
   autoPlay = true,
   controls = true,
-  onError
+  onError,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<DashJsPlayerImpl | null>(null);
@@ -36,13 +36,15 @@ const DashJsPlayer: React.FC<Props> = ({
     const player = new DashJsPlayerImpl();
     playerRef.current = player;
 
-    player.initialize(
-      containerRef.current,
-      { url: src, type: 'dash/video/mp4' },
-      { autoplay: autoPlay, muted, controls }
-    ).catch((e) => {
-      onError?.(e instanceof Error ? e : new Error(String(e)));
-    });
+    player
+      .initialize(
+        containerRef.current,
+        { url: src, type: "dash/video/mp4" },
+        { autoplay: autoPlay, muted, controls }
+      )
+      .catch((e) => {
+        onError?.(e instanceof Error ? e : new Error(String(e)));
+      });
 
     return () => {
       player.destroy();
@@ -50,7 +52,7 @@ const DashJsPlayer: React.FC<Props> = ({
     };
   }, [src, muted, autoPlay, controls, onError]);
 
-  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
+  return <div ref={containerRef} style={{ width: "100%", height: "100%" }} />;
 };
 
 export default DashJsPlayer;

package/src/components/players/HlsJsPlayer.tsx

@@ -5,8 +5,8 @@
  * The implementation is in @livepeer-frameworks/player-core.
  */
 
-import React, { useEffect, useRef } from 'react';
-import { HlsJsPlayerImpl } from '@livepeer-frameworks/player-core';
+import React, { useEffect, useRef } from "react";
+import { HlsJsPlayerImpl } from "@livepeer-frameworks/player-core";
 
 // Re-export the implementation from core for backwards compatibility
 export { HlsJsPlayerImpl };
@@ -25,7 +25,7 @@ const HlsJsPlayer: React.FC<Props> = ({
   muted = true,
   autoPlay = true,
   controls = true,
-  onError
+  onError,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<HlsJsPlayerImpl | null>(null);
@@ -36,13 +36,15 @@ const HlsJsPlayer: React.FC<Props> = ({
     const player = new HlsJsPlayerImpl();
     playerRef.current = player;
 
-    player.initialize(
-      containerRef.current,
-      { url: src, type: 'html5/application/vnd.apple.mpegurl' },
-      { autoplay: autoPlay, muted, controls }
-    ).catch((e) => {
-      onError?.(e instanceof Error ? e : new Error(String(e)));
-    });
+    player
+      .initialize(
+        containerRef.current,
+        { url: src, type: "html5/application/vnd.apple.mpegurl" },
+        { autoplay: autoPlay, muted, controls }
+      )
+      .catch((e) => {
+        onError?.(e instanceof Error ? e : new Error(String(e)));
+      });
 
     return () => {
       player.destroy();
@@ -50,7 +52,7 @@ const HlsJsPlayer: React.FC<Props> = ({
     };
   }, [src, muted, autoPlay, controls, onError]);
 
-  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
+  return <div ref={containerRef} style={{ width: "100%", height: "100%" }} />;
 };
 
 export default HlsJsPlayer;

package/src/components/players/MewsWsPlayer/index.tsx

@@ -5,8 +5,8 @@
  * The implementation is in @livepeer-frameworks/player-core.
  */
 
-import React, { useEffect, useRef } from 'react';
-import { MewsWsPlayerImpl } from '@livepeer-frameworks/player-core';
+import React, { useEffect, useRef } from "react";
+import { MewsWsPlayerImpl } from "@livepeer-frameworks/player-core";
 
 // Re-export the implementation from core for backwards compatibility
 export { MewsWsPlayerImpl };
@@ -25,7 +25,7 @@ const MewsWsPlayer: React.FC<Props> = ({
   muted = true,
   autoPlay = true,
   controls = true,
-  onError
+  onError,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<MewsWsPlayerImpl | null>(null);
@@ -36,13 +36,15 @@ const MewsWsPlayer: React.FC<Props> = ({
     const player = new MewsWsPlayerImpl();
     playerRef.current = player;
 
-    player.initialize(
-      containerRef.current,
-      { url: wsUrl, type: 'ws/video/mp4' },
-      { autoplay: autoPlay, muted, controls }
-    ).catch((e) => {
-      onError?.(e instanceof Error ? e : new Error(String(e)));
-    });
+    player
+      .initialize(
+        containerRef.current,
+        { url: wsUrl, type: "ws/video/mp4" },
+        { autoplay: autoPlay, muted, controls }
+      )
+      .catch((e) => {
+        onError?.(e instanceof Error ? e : new Error(String(e)));
+      });
 
     return () => {
       player.destroy();
@@ -50,7 +52,7 @@ const MewsWsPlayer: React.FC<Props> = ({
     };
   }, [wsUrl, muted, autoPlay, controls, onError]);
 
-  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
+  return <div ref={containerRef} style={{ width: "100%", height: "100%" }} />;
 };
 
 export default MewsWsPlayer;

package/src/components/players/MistPlayer.tsx

@@ -5,8 +5,8 @@
  * The implementation is in @livepeer-frameworks/player-core.
  */
 
-import React, { useEffect, useRef } from 'react';
-import { MistPlayerImpl } from '@livepeer-frameworks/player-core';
+import React, { useEffect, useRef } from "react";
+import { MistPlayerImpl } from "@livepeer-frameworks/player-core";
 
 // Re-export the implementation from core for backwards compatibility
 export { MistPlayerImpl };
@@ -29,7 +29,7 @@ const MistPlayer: React.FC<Props> = ({
   autoPlay = true,
   controls = true,
   devMode = false,
-  onError
+  onError,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
   const playerRef = useRef<MistPlayerImpl | null>(null);
@@ -40,13 +40,15 @@ const MistPlayer: React.FC<Props> = ({
     const player = new MistPlayerImpl();
     playerRef.current = player;
 
-    player.initialize(
-      containerRef.current,
-      { url: src, type: 'mist/legacy', streamName },
-      { autoplay: autoPlay, muted, controls, devMode }
-    ).catch((e) => {
-      onError?.(e instanceof Error ? e : new Error(String(e)));
-    });
+    player
+      .initialize(
+        containerRef.current,
+        { url: src, type: "mist/legacy", streamName },
+        { autoplay: autoPlay, muted, controls, devMode }
+      )
+      .catch((e) => {
+        onError?.(e instanceof Error ? e : new Error(String(e)));
+      });
 
     return () => {
       player.destroy();
@@ -54,7 +56,7 @@ const MistPlayer: React.FC<Props> = ({
     };
   }, [src, streamName, muted, autoPlay, controls, devMode, onError]);
 
-  return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />;
+  return <div ref={containerRef} style={{ width: "100%", height: "100%" }} />;
 };
 
 export default MistPlayer;