@livepeer-frameworks/player-react 0.1.0 → 0.1.2

package/src/components/IdleScreen.tsx

@@ -29,16 +29,19 @@ const AnimatedBubble: React.FC<AnimatedBubbleProps> = ({ index }) => {
 
     const animationCycle = () => {
       setOpacity(0.15);
-      setTimeout(() => {
-        setOpacity(0);
-        setTimeout(() => {
-          setPosition(getRandomPosition());
-          setSize(getRandomSize());
+      setTimeout(
+        () => {
+          setOpacity(0);
           setTimeout(() => {
-            animationCycle();
-          }, 200);
-        }, 1500);
-      }, 4000 + Math.random() * 3000);
+            setPosition(getRandomPosition());
+            setSize(getRandomSize());
+            setTimeout(() => {
+              animationCycle();
+            }, 200);
+          }, 1500);
+        },
+        4000 + Math.random() * 3000
+      );
     };
 
     const timeout = setTimeout(animationCycle, index * 500);
@@ -58,19 +61,21 @@ const AnimatedBubble: React.FC<AnimatedBubbleProps> = ({ index }) => {
 
   return (
     <div
-      style={{
-        position: "absolute",
-        top: `${position.top}%`,
-        left: `${position.left}%`,
-        width: `${size}px`,
-        height: `${size}px`,
-        borderRadius: "50%",
-        background: bubbleColors[index % bubbleColors.length],
-        opacity,
-        transition: "opacity 1s ease-in-out",
-        pointerEvents: "none",
-        userSelect: "none",
-      } as React.CSSProperties}
+      style={
+        {
+          position: "absolute",
+          top: `${position.top}%`,
+          left: `${position.left}%`,
+          width: `${size}px`,
+          height: `${size}px`,
+          borderRadius: "50%",
+          background: bubbleColors[index % bubbleColors.length],
+          opacity,
+          transition: "opacity 1s ease-in-out",
+          pointerEvents: "none",
+          userSelect: "none",
+        } as React.CSSProperties
+      }
     />
   );
 };
@@ -138,11 +143,11 @@ const CenterLogo: React.FC<CenterLogoProps> = ({ containerRef, scale = 0.2, onHi
   useEffect(() => {
     if (containerRef.current) {
       const container = containerRef.current;
-      container.addEventListener('mousemove', handleMouseMove);
-      container.addEventListener('mouseleave', handleMouseLeave);
+      container.addEventListener("mousemove", handleMouseMove);
+      container.addEventListener("mouseleave", handleMouseLeave);
       return () => {
-        container.removeEventListener('mousemove', handleMouseMove);
-        container.removeEventListener('mouseleave', handleMouseLeave);
+        container.removeEventListener("mousemove", handleMouseMove);
+        container.removeEventListener("mouseleave", handleMouseLeave);
       };
     }
   }, [logoSize, containerRef]);
@@ -169,7 +174,9 @@ const CenterLogo: React.FC<CenterLogoProps> = ({ containerRef, scale = 0.2, onHi
           height: `${logoSize * 1.4}px`,
           borderRadius: "50%",
           background: "rgba(122, 162, 247, 0.15)",
-          animation: isHovered ? "logoPulse 1s ease-in-out infinite" : "logoPulse 3s ease-in-out infinite",
+          animation: isHovered
+            ? "logoPulse 1s ease-in-out infinite"
+            : "logoPulse 3s ease-in-out infinite",
           transform: isHovered ? "scale(1.2)" : "scale(1)",
           transition: "transform 0.3s ease-out",
           pointerEvents: "none",
@@ -179,20 +186,22 @@ const CenterLogo: React.FC<CenterLogoProps> = ({ containerRef, scale = 0.2, onHi
         src={logomarkAsset}
         alt="FrameWorks Logo"
         onClick={handleLogoClick}
-        style={{
-          width: `${logoSize}px`,
-          height: `${logoSize}px`,
-          position: "relative",
-          zIndex: 1,
-          filter: isHovered
-            ? "drop-shadow(0 6px 12px rgba(36, 40, 59, 0.4)) brightness(1.1)"
-            : "drop-shadow(0 4px 8px rgba(36, 40, 59, 0.3))",
-          transform: isHovered ? "scale(1.1)" : "scale(1)",
-          transition: "all 0.3s ease-out",
-          cursor: isHovered ? "pointer" : "default",
-          userSelect: "none",
-          WebkitUserDrag: "none",
-        } as React.CSSProperties}
+        style={
+          {
+            width: `${logoSize}px`,
+            height: `${logoSize}px`,
+            position: "relative",
+            zIndex: 1,
+            filter: isHovered
+              ? "drop-shadow(0 6px 12px rgba(36, 40, 59, 0.4)) brightness(1.1)"
+              : "drop-shadow(0 4px 8px rgba(36, 40, 59, 0.3))",
+            transform: isHovered ? "scale(1.1)" : "scale(1)",
+            transition: "all 0.3s ease-out",
+            cursor: isHovered ? "pointer" : "default",
+            userSelect: "none",
+            WebkitUserDrag: "none",
+          } as React.CSSProperties
+        }
       />
     </div>
   );
@@ -214,45 +223,103 @@ function StatusIcon({ status }: { status?: StreamStatus }) {
   const iconClass = "w-5 h-5";
 
   // Spinner for loading states
-  if (status === 'INITIALIZING' || status === 'BOOTING' || status === 'WAITING_FOR_DATA' || !status) {
+  if (
+    status === "INITIALIZING" ||
+    status === "BOOTING" ||
+    status === "WAITING_FOR_DATA" ||
+    !status
+  ) {
     return (
-      <svg className={`${iconClass} animate-spin`} fill="none" viewBox="0 0 24 24" style={{ color: 'hsl(var(--tn-yellow, 40 95% 64%))' }}>
-        <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} animate-spin`}
+        fill="none"
+        viewBox="0 0 24 24"
+        style={{ color: "hsl(var(--tn-yellow, 40 95% 64%))" }}
+      >
+        <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>
     );
   }
 
   // Offline icon
-  if (status === 'OFFLINE') {
+  if (status === "OFFLINE") {
     return (
-      <svg className={iconClass} fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: 'hsl(var(--tn-red, 348 100% 72%))' }}>
-        <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}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        style={{ color: "hsl(var(--tn-red, 348 100% 72%))" }}
+      >
+        <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>
     );
   }
 
   // Error icon
-  if (status === 'ERROR' || status === 'INVALID') {
+  if (status === "ERROR" || status === "INVALID") {
     return (
-      <svg className={iconClass} fill="none" viewBox="0 0 24 24" stroke="currentColor" style={{ color: 'hsl(var(--tn-red, 348 100% 72%))' }}>
-        <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}
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        style={{ color: "hsl(var(--tn-red, 348 100% 72%))" }}
+      >
+        <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>
     );
   }
 
   // Default spinner
   return (
-    <svg className={`${iconClass} animate-spin`} fill="none" viewBox="0 0 24 24" style={{ color: 'hsl(var(--tn-cyan, 193 100% 75%))' }}>
+    <svg
+      className={`${iconClass} animate-spin`}
+      fill="none"
+      viewBox="0 0 24 24"
+      style={{ color: "hsl(var(--tn-cyan, 193 100% 75%))" }}
+    >
       <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" />
+      <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>
   );
 }
 
-const StatusOverlay: React.FC<StatusOverlayProps> = ({ status, message, percentage, error, onRetry }) => {
-  const showRetry = (status === 'ERROR' || status === 'INVALID') && onRetry;
-  const showProgress = status === 'INITIALIZING' && percentage !== undefined;
+const StatusOverlay: React.FC<StatusOverlayProps> = ({
+  status,
+  message,
+  percentage,
+  error,
+  onRetry,
+}) => {
+  const showRetry = (status === "ERROR" || status === "INVALID") && onRetry;
+  const showProgress = status === "INITIALIZING" && percentage !== undefined;
   const displayMessage = error || message;
 
   return (
@@ -352,50 +419,51 @@ interface Hitmarker {
 const playHitmarkerSound = () => {
   try {
     // Embedded hitmarker sound as base64 data URL
-    const hitmarkerDataUrl = 'data:audio/mpeg;base64,SUQzBAAAAAAANFRDT04AAAAHAAADT3RoZXIAVFNTRQAAAA8AAANMYXZmNTcuODMuMTAwAAAAAAAAAAAA' +
-      'AAD/+1QAAAAAAAAAAAAAAAAAAAAA' +
-      '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' +
-      'qqqqqqqqqqqqqqqqqqqqqqqqqqo=';
+    const hitmarkerDataUrl =
+      "data:audio/mpeg;base64,SUQzBAAAAAAANFRDT04AAAAHAAADT3RoZXIAVFNTRQAAAA8AAANMYXZmNTcuODMuMTAwAAAAAAAAAAAA" +
+      "AAD/+1QAAAAAAAAAAAAAAAAAAAAA" +
+      "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" +
+      "qqqqqqqqqqqqqqqqqqqqqqqqqqo=";
 
     const audio = new Audio(hitmarkerDataUrl);
     audio.volume = 0.3;
@@ -425,8 +493,8 @@ const createSyntheticHitmarkerSound = () => {
     oscillator2.frequency.setValueAtTime(3600, audioContext.currentTime);
     oscillator2.frequency.exponentialRampToValueAtTime(1800, audioContext.currentTime + 0.04);
 
-    oscillator1.type = 'triangle';
-    oscillator2.type = 'sine';
+    oscillator1.type = "triangle";
+    oscillator2.type = "sine";
 
     gainNode1.gain.setValueAtTime(0, audioContext.currentTime);
     gainNode1.gain.linearRampToValueAtTime(0.4, audioContext.currentTime + 0.002);
@@ -490,19 +558,19 @@ export const IdleScreen: React.FC<IdleScreenProps> = ({
       y,
     };
 
-    setHitmarkers(prev => [...prev, newHitmarker]);
+    setHitmarkers((prev) => [...prev, newHitmarker]);
     playHitmarkerSound();
 
     setTimeout(() => {
-      setHitmarkers(prev => prev.filter(h => h.id !== newHitmarker.id));
+      setHitmarkers((prev) => prev.filter((h) => h.id !== newHitmarker.id));
     }, 600);
   };
 
   // Inject CSS animations
   useEffect(() => {
-    const styleId = 'idle-screen-animations';
+    const styleId = "idle-screen-animations";
     if (!document.getElementById(styleId)) {
-      const style = document.createElement('style');
+      const style = document.createElement("style");
       style.id = styleId;
       style.textContent = `
         @keyframes fadeInOut {
@@ -542,11 +610,12 @@ export const IdleScreen: React.FC<IdleScreenProps> = ({
     <div
       ref={containerRef}
       className="fw-player-root"
-      style={{
-        position: "absolute",
-        inset: 0,
-        zIndex: 5,
-        background: `
+      style={
+        {
+          position: "absolute",
+          inset: 0,
+          zIndex: 5,
+          background: `
           linear-gradient(135deg,
             hsl(var(--tn-bg-dark, 235 21% 11%)) 0%,
             hsl(var(--tn-bg, 233 23% 17%)) 25%,
@@ -555,19 +624,20 @@ export const IdleScreen: React.FC<IdleScreenProps> = ({
             hsl(var(--tn-bg-dark, 235 21% 11%)) 100%
           )
         `,
-        backgroundSize: "400% 400%",
-        animation: "gradientShift 16s ease-in-out infinite",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        justifyContent: "center",
-        overflow: "hidden",
-        borderRadius: "0",
-        userSelect: "none",
-      } as React.CSSProperties}
+          backgroundSize: "400% 400%",
+          animation: "gradientShift 16s ease-in-out infinite",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          overflow: "hidden",
+          borderRadius: "0",
+          userSelect: "none",
+        } as React.CSSProperties
+      }
     >
       {/* Hitmarkers */}
-      {hitmarkers.map(hitmarker => (
+      {hitmarkers.map((hitmarker) => (
         <div
           key={hitmarker.id}
           style={{
@@ -581,10 +651,62 @@ export const IdleScreen: React.FC<IdleScreenProps> = ({
             height: "40px",
           }}
         >
-          <div style={{ position: "absolute", top: "25%", left: "25%", width: "12px", height: "3px", backgroundColor: "#ffffff", transform: "translate(-50%, -50%) rotate(45deg)", animation: "hitmarkerFade45 0.6s ease-out forwards", boxShadow: "0 0 8px rgba(255, 255, 255, 0.8)", borderRadius: "1px" }} />
-          <div style={{ position: "absolute", top: "25%", left: "75%", width: "12px", height: "3px", backgroundColor: "#ffffff", transform: "translate(-50%, -50%) rotate(-45deg)", animation: "hitmarkerFadeNeg45 0.6s ease-out forwards", boxShadow: "0 0 8px rgba(255, 255, 255, 0.8)", borderRadius: "1px" }} />
-          <div style={{ position: "absolute", top: "75%", left: "25%", width: "12px", height: "3px", backgroundColor: "#ffffff", transform: "translate(-50%, -50%) rotate(-45deg)", animation: "hitmarkerFadeNeg45 0.6s ease-out forwards", boxShadow: "0 0 8px rgba(255, 255, 255, 0.8)", borderRadius: "1px" }} />
-          <div style={{ position: "absolute", top: "75%", left: "75%", width: "12px", height: "3px", backgroundColor: "#ffffff", transform: "translate(-50%, -50%) rotate(45deg)", animation: "hitmarkerFade45 0.6s ease-out forwards", boxShadow: "0 0 8px rgba(255, 255, 255, 0.8)", borderRadius: "1px" }} />
+          <div
+            style={{
+              position: "absolute",
+              top: "25%",
+              left: "25%",
+              width: "12px",
+              height: "3px",
+              backgroundColor: "#ffffff",
+              transform: "translate(-50%, -50%) rotate(45deg)",
+              animation: "hitmarkerFade45 0.6s ease-out forwards",
+              boxShadow: "0 0 8px rgba(255, 255, 255, 0.8)",
+              borderRadius: "1px",
+            }}
+          />
+          <div
+            style={{
+              position: "absolute",
+              top: "25%",
+              left: "75%",
+              width: "12px",
+              height: "3px",
+              backgroundColor: "#ffffff",
+              transform: "translate(-50%, -50%) rotate(-45deg)",
+              animation: "hitmarkerFadeNeg45 0.6s ease-out forwards",
+              boxShadow: "0 0 8px rgba(255, 255, 255, 0.8)",
+              borderRadius: "1px",
+            }}
+          />
+          <div
+            style={{
+              position: "absolute",
+              top: "75%",
+              left: "25%",
+              width: "12px",
+              height: "3px",
+              backgroundColor: "#ffffff",
+              transform: "translate(-50%, -50%) rotate(-45deg)",
+              animation: "hitmarkerFadeNeg45 0.6s ease-out forwards",
+              boxShadow: "0 0 8px rgba(255, 255, 255, 0.8)",
+              borderRadius: "1px",
+            }}
+          />
+          <div
+            style={{
+              position: "absolute",
+              top: "75%",
+              left: "75%",
+              width: "12px",
+              height: "3px",
+              backgroundColor: "#ffffff",
+              transform: "translate(-50%, -50%) rotate(45deg)",
+              animation: "hitmarkerFade45 0.6s ease-out forwards",
+              boxShadow: "0 0 8px rgba(255, 255, 255, 0.8)",
+              borderRadius: "1px",
+            }}
+          />
         </div>
       ))}
 
@@ -598,7 +720,16 @@ export const IdleScreen: React.FC<IdleScreenProps> = ({
             width: `${Math.random() * 4 + 2}px`,
             height: `${Math.random() * 4 + 2}px`,
             borderRadius: "50%",
-            background: ["#7aa2f7", "#bb9af7", "#9ece6a", "#73daca", "#7dcfff", "#f7768e", "#e0af68", "#2ac3de"][index % 8],
+            background: [
+              "#7aa2f7",
+              "#bb9af7",
+              "#9ece6a",
+              "#73daca",
+              "#7dcfff",
+              "#f7768e",
+              "#e0af68",
+              "#2ac3de",
+            ][index % 8],
             opacity: 0,
             animation: `floatUp ${8 + Math.random() * 4}s linear infinite`,
             animationDelay: `${Math.random() * 8}s`,
@@ -613,7 +744,10 @@ export const IdleScreen: React.FC<IdleScreenProps> = ({
       ))}
 
       {/* Center logo */}
-      <CenterLogo containerRef={containerRef as React.RefObject<HTMLDivElement>} onHitmarker={createHitmarker} />
+      <CenterLogo
+        containerRef={containerRef as React.RefObject<HTMLDivElement>}
+        onHitmarker={createHitmarker}
+      />
 
       {/* DVD Logo */}
       <DvdLogo parentRef={containerRef as React.RefObject<HTMLDivElement>} scale={0.08} />