@livepeer-frameworks/player-react 0.0.3

package/src/components/DvdLogo.tsx

@@ -0,0 +1,201 @@
+import React, { useEffect, useRef, useState } from "react";
+import { DvdLogoProps } from "../types";
+
+type Point = { top: number; left: number };
+type Velocity = { x: number; y: number };
+type Size = { width: number; height: number };
+
+const ORIGINAL_WIDTH = 153;
+const ORIGINAL_HEIGHT = 69;
+const ASPECT_RATIO = ORIGINAL_WIDTH / ORIGINAL_HEIGHT;
+
+const COLORS = [
+  "#7aa2f7",
+  "#bb9af7",
+  "#9ece6a",
+  "#73daca",
+  "#7dcfff",
+  "#f7768e",
+  "#e0af68",
+  "#2ac3de",
+];
+
+const pickNextColor = (current?: string): string => {
+  if (COLORS.length === 0) {
+    return current ?? "#ffffff";
+  }
+
+  if (COLORS.length === 1) {
+    return COLORS[0];
+  }
+
+  let next: string;
+  do {
+    next = COLORS[Math.floor(Math.random() * COLORS.length)];
+  } while (next === current);
+
+  return next;
+};
+
+const DvdLogo: React.FC<DvdLogoProps> = ({ parentRef, scale = 0.15 }) => {
+  const [position, setPosition] = useState<Point>({ top: 0, left: 0 });
+  const positionRef = useRef<Point>(position);
+  useEffect(() => {
+    positionRef.current = position;
+  }, [position]);
+
+  const [dimensions, setDimensions] = useState<Size>({
+    width: ORIGINAL_WIDTH,
+    height: ORIGINAL_HEIGHT,
+  });
+  const dimensionsRef = useRef<Size>(dimensions);
+  useEffect(() => {
+    dimensionsRef.current = dimensions;
+  }, [dimensions]);
+
+  const velocityRef = useRef<Velocity>({ x: 1.8, y: 1.6 });
+  const [color, setColor] = useState<string>(pickNextColor());
+
+  const recalculateDimensions = React.useCallback(() => {
+    const parent = parentRef.current;
+    if (!parent) {
+      return;
+    }
+
+    const parentWidth = parent.clientWidth;
+    const parentHeight = parent.clientHeight;
+    if (parentWidth === 0 || parentHeight === 0) {
+      return;
+    }
+
+    const maxWidth = parentWidth * scale;
+    const maxHeight = parentHeight * scale;
+
+    let width = maxWidth;
+    let height = width / ASPECT_RATIO;
+
+    if (height > maxHeight) {
+      height = maxHeight;
+      width = height * ASPECT_RATIO;
+    }
+
+    const nextDimensions: Size = {
+      width: Math.max(20, width),
+      height: Math.max(20, height),
+    };
+
+    dimensionsRef.current = nextDimensions;
+    setDimensions(nextDimensions);
+
+    const maxTop = Math.max(0, parentHeight - nextDimensions.height);
+    const maxLeft = Math.max(0, parentWidth - nextDimensions.width);
+
+    const startPosition: Point = {
+      top: Math.random() * maxTop,
+      left: Math.random() * maxLeft,
+    };
+
+    positionRef.current = startPosition;
+    setPosition(startPosition);
+
+    const baseSpeed = Math.max(1.2, Math.min(nextDimensions.width, nextDimensions.height) / 70);
+    velocityRef.current = {
+      x: baseSpeed * (Math.random() > 0.5 ? 1 : -1),
+      y: baseSpeed * (Math.random() > 0.5 ? 1 : -1),
+    };
+  }, [parentRef, scale]);
+
+  useEffect(() => {
+    if (!parentRef.current) {
+      return;
+    }
+
+    recalculateDimensions();
+
+    if (typeof ResizeObserver !== "undefined") {
+      const observer = new ResizeObserver(() => recalculateDimensions());
+      observer.observe(parentRef.current);
+      return () => observer.disconnect();
+    }
+
+    const onResize = () => recalculateDimensions();
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [parentRef, recalculateDimensions]);
+
+  useEffect(() => {
+    let animationFrame: number;
+    let lastTimestamp = performance.now();
+
+    const animate = (timestamp: number) => {
+      const parent = parentRef.current;
+      const dims = dimensionsRef.current;
+
+      if (!parent || dims.width === 0 || dims.height === 0) {
+        animationFrame = requestAnimationFrame(animate);
+        return;
+      }
+
+      const deltaMs = timestamp - lastTimestamp;
+      lastTimestamp = timestamp;
+      const speedMultiplier = Math.min(deltaMs / 16, 2);
+
+      const maxTop = parent.clientHeight - dims.height;
+      const maxLeft = parent.clientWidth - dims.width;
+
+      let { top, left } = positionRef.current;
+      let { x, y } = velocityRef.current;
+      let bounced = false;
+
+      top += y * speedMultiplier;
+      left += x * speedMultiplier;
+
+      if (top <= 0 || top >= maxTop) {
+        y = -y;
+        top = Math.max(0, Math.min(maxTop, top));
+        bounced = true;
+      }
+
+      if (left <= 0 || left >= maxLeft) {
+        x = -x;
+        left = Math.max(0, Math.min(maxLeft, left));
+        bounced = true;
+      }
+
+      velocityRef.current = { x, y };
+      const nextPosition = { top, left };
+      positionRef.current = nextPosition;
+      setPosition(nextPosition);
+
+      if (bounced) {
+        setColor((current) => pickNextColor(current));
+      }
+
+      animationFrame = requestAnimationFrame(animate);
+    };
+
+    animationFrame = requestAnimationFrame(animate);
+
+    return () => cancelAnimationFrame(animationFrame);
+  }, [parentRef]);
+
+  return (
+    <div
+      className="fw-player-dvd"
+      style={{
+        top: `${position.top}px`,
+        left: `${position.left}px`,
+        width: `${dimensions.width}px`,
+        height: `${dimensions.height}px`,
+      }}
+    >
+      <svg width="100%" height="100%" viewBox="0 0 153 69" fill={color} className="select-none">
+        <g>
+          <path d="M140.186,63.52h-1.695l-0.692,5.236h-0.847l0.77-5.236h-1.693l0.076-0.694h4.158L140.186,63.52L140.186,63.52z M146.346,68.756h-0.848v-4.545l0,0l-2.389,4.545l-1-4.545l0,0l-1.462,4.545h-0.771l1.924-5.931h0.695l0.924,4.006l2.078-4.006 h0.848V68.756L146.346,68.756z M126.027,0.063H95.352c0,0-8.129,9.592-9.654,11.434c-8.064,9.715-9.523,12.32-9.779,13.02 c0.063-0.699-0.256-3.304-3.686-13.148C71.282,8.7,68.359,0.062,68.359,0.062H57.881V0L32.35,0.063H13.169l-1.97,8.131 l14.543,0.062h3.365c9.336,0,15.055,3.747,13.467,10.354c-1.717,7.24-9.91,10.416-18.545,10.416h-3.24l4.191-17.783H10.502 L4.34,37.219h20.578c15.432,0,30.168-8.13,32.709-18.608c0.508-1.906,0.443-6.67-0.764-9.527c0-0.127-0.063-0.191-0.127-0.444 c-0.064-0.063-0.127-0.509,0.127-0.571c0.128-0.062,0.383,0.189,0.445,0.254c0.127,0.317,0.19,0.57,0.19,0.57l13.083,36.965 l33.344-37.6h14.1h3.365c9.337,0,15.055,3.747,13.528,10.354c-1.778,7.24-9.972,10.416-18.608,10.416h-3.238l4.191-17.783h-14.481 l-6.159,25.976h20.576c15.434,0,30.232-8.13,32.709-18.608C152.449,8.193,141.523,0.063,126.027,0.063L126.027,0.063z M71.091,45.981c-39.123,0-70.816,4.512-70.816,10.035c0,5.59,31.693,10.034,70.816,10.034c39.121,0,70.877-4.444,70.877-10.034 C141.968,50.493,110.212,45.981,71.091,45.981L71.091,45.981z M68.55,59.573c-8.956,0-16.196-1.523-16.196-3.365 c0-1.84,7.239-3.303,16.196-3.303c8.955,0,16.195,1.463,16.195,3.303C84.745,58.050,77.505,59.573,68.55,59.573L68.55,59.573z" />
+        </g>
+      </svg>
+    </div>
+  );
+};
+
+export default DvdLogo;

package/src/components/Icons.tsx

@@ -0,0 +1,282 @@
+import React from 'react';
+
+interface IconProps {
+  size?: number;
+  color?: string;
+  className?: string;
+}
+
+export const PlayIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+  >
+    <path
+      d="M8 5v14l11-7z"
+      fill={color}
+    />
+  </svg>
+);
+
+export const PauseIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+  >
+    <rect x="6" y="4" width="4" height="16" fill={color} />
+    <rect x="14" y="4" width="4" height="16" fill={color} />
+  </svg>
+);
+
+export const SkipBackIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+  >
+    {/* Circular rewind arrow */}
+    <path
+      d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"
+      fill={color}
+    />
+    <text x="12" y="15" fontSize="7" fontWeight="bold" fill={color} textAnchor="middle">10</text>
+  </svg>
+);
+
+export const SkipForwardIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+  >
+    {/* Circular forward arrow */}
+    <path
+      d="M12 5V1l5 5-5 5V7c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6h2c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8z"
+      fill={color}
+    />
+    <text x="12" y="15" fontSize="7" fontWeight="bold" fill={color} textAnchor="middle">10</text>
+  </svg>
+);
+
+export const VolumeUpIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+  >
+    <polygon points="11,5 6,9 2,9 2,15 6,15 11,19" fill={color} />
+    <path
+      d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const VolumeOffIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+  >
+    <polygon points="11,5 6,9 2,9 2,15 6,15 11,19" fill={color} />
+    <line x1="23" y1="9" x2="17" y2="15" stroke={color} strokeWidth="2" strokeLinecap="round" />
+    <line x1="17" y1="9" x2="23" y2="15" stroke={color} strokeWidth="2" strokeLinecap="round" />
+  </svg>
+);
+
+export const FullscreenIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+  >
+    <path
+      d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const FullscreenExitIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+  >
+    <path
+      d="M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const PictureInPictureIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+  >
+    <rect x="2" y="3" width="20" height="14" rx="2" ry="2" stroke={color} strokeWidth="2" fill="none" />
+    <rect x="8" y="10" width="10" height="6" rx="1" ry="1" fill={color} />
+  </svg>
+);
+
+export const ClosedCaptionsIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+  >
+    <rect x="2" y="4" width="20" height="16" rx="2" ry="2" stroke={color} strokeWidth="2" fill="none" />
+    <path
+      d="M8 10c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v4c0 .6-.4 1-1 1H9c-.6 0-1-.4-1-1v-4zM14 10c0-.6.4-1 1-1h1c.6 0 1 .4 1 1v4c0 .6-.4 1-1 1h-1c-.6 0-1-.4-1-1v-4z"
+      fill={color}
+    />
+  </svg>
+);
+
+export const LiveIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+  >
+    <circle cx="12" cy="12" r="3" fill={color} />
+    <path
+      d="M12 1v6M12 17v6M4.22 4.22l4.24 4.24M15.54 15.54l4.24 4.24M1 12h6M17 12h6M4.22 19.78l4.24-4.24M15.54 8.46l4.24-4.24"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+
+export const SettingsIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+  >
+    <path
+      d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1Z"
+      stroke={color}
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+// Compound PlayPause icon that switches based on state
+interface PlayPauseIconProps extends IconProps {
+  isPlaying?: boolean;
+}
+
+export const PlayPauseIcon: React.FC<PlayPauseIconProps> = ({ isPlaying, ...props }) => {
+  return isPlaying ? <PauseIcon {...props} /> : <PlayIcon {...props} />;
+};
+
+// Volume icon that switches based on mute state
+interface VolumeIconProps extends IconProps {
+  isMuted?: boolean;
+}
+
+export const VolumeIcon: React.FC<VolumeIconProps> = ({ isMuted, ...props }) => {
+  return isMuted ? <VolumeOffIcon {...props} /> : <VolumeUpIcon {...props} />;
+};
+
+// Fullscreen icon that switches based on fullscreen state
+interface FullscreenToggleIconProps extends IconProps {
+  isFullscreen?: boolean;
+}
+
+export const FullscreenToggleIcon: React.FC<FullscreenToggleIconProps> = ({ isFullscreen, ...props }) => {
+  return isFullscreen ? <FullscreenExitIcon {...props} /> : <FullscreenIcon {...props} />;
+};
+
+// Stats icon (bar chart style - recognizable for "stats for nerds")
+export const StatsIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+  >
+    <rect x="4" y="13" width="4" height="7" fill={color} />
+    <rect x="10" y="9" width="4" height="11" fill={color} />
+    <rect x="16" y="4" width="4" height="16" fill={color} />
+  </svg>
+);
+
+// Seek to live/end icon (skip-to-end style: play triangle + bar)
+export const SeekToLiveIcon: React.FC<IconProps> = ({ size = 16, color = 'currentColor', className = '' }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    className={className}
+    aria-hidden="true"
+  >
+    {/* Play triangle */}
+    <path d="M5 5v14l11-7z" fill={color} />
+    {/* End bar */}
+    <rect x="17" y="5" width="3" height="14" fill={color} />
+  </svg>
+);