@hyperframes/studio 0.1.10 → 0.1.11

package/src/player/components/PlayerControls.tsx

@@ -1,17 +1,11 @@
 import { useRef, useState, useCallback, memo } from "react";
+import { useMountEffect } from "../../hooks/useMountEffect";
 import { formatTime } from "../lib/time";
 import { usePlayerStore, liveTime } from "../store/playerStore";
-import { useMountEffect } from "../lib/useMountEffect";
 
 const SPEED_OPTIONS = [0.25, 0.5, 1, 1.5, 2] as const;
 
 interface PlayerControlsProps {
-  /** @deprecated Pass via store — kept for backwards compat */
-  isPlaying?: boolean;
-  /** @deprecated Pass via store — kept for backwards compat */
-  duration?: number;
-  /** @deprecated Pass via store — kept for backwards compat */
-  timelineReady?: boolean;
   onTogglePlay: () => void;
   onSeek: (time: number) => void;
 }
@@ -19,20 +13,15 @@ interface PlayerControlsProps {
 export const PlayerControls = memo(function PlayerControls({
   onTogglePlay,
   onSeek,
-  ...overrides
 }: PlayerControlsProps) {
   // Subscribe to only the fields we render — each selector prevents cascading re-renders
-  const storeIsPlaying = usePlayerStore((s) => s.isPlaying);
-  const storeDuration = usePlayerStore((s) => s.duration);
-  const storeTimelineReady = usePlayerStore((s) => s.timelineReady);
+  const isPlaying = usePlayerStore((s) => s.isPlaying);
+  const duration = usePlayerStore((s) => s.duration);
+  const timelineReady = usePlayerStore((s) => s.timelineReady);
   const playbackRate = usePlayerStore((s) => s.playbackRate);
   const setPlaybackRate = usePlayerStore.getState().setPlaybackRate;
   const [showSpeedMenu, setShowSpeedMenu] = useState(false);
 
-  const isPlaying = overrides.isPlaying ?? storeIsPlaying;
-  const duration = overrides.duration ?? storeDuration;
-  const timelineReady = overrides.timelineReady ?? storeTimelineReady;
-
   const progressFillRef = useRef<HTMLDivElement>(null);
   const progressThumbRef = useRef<HTMLDivElement>(null);
   const timeDisplayRef = useRef<HTMLSpanElement>(null);
@@ -43,15 +32,32 @@ export const PlayerControls = memo(function PlayerControls({
   const durationRef = useRef(duration);
   durationRef.current = duration;
   useMountEffect(() => {
-    const unsub = liveTime.subscribe((t) => {
+    const updateProgress = (t: number) => {
       currentTimeRef.current = t;
       const dur = durationRef.current;
-      const pct = dur > 0 ? (t / dur) * 100 : 0;
+      const pct = dur > 0 ? Math.min(100, (t / dur) * 100) : 0;
       if (progressFillRef.current) progressFillRef.current.style.width = `${pct}%`;
       if (progressThumbRef.current) progressThumbRef.current.style.left = `${pct}%`;
       if (timeDisplayRef.current) timeDisplayRef.current.textContent = formatTime(t);
-    });
-    return unsub;
+    };
+    const unsub = liveTime.subscribe(updateProgress);
+    updateProgress(usePlayerStore.getState().currentTime);
+
+    // Also poll every 500ms as a fallback in case liveTime doesn't fire
+    const interval = setInterval(() => {
+      const t = usePlayerStore.getState().currentTime;
+      const dur = usePlayerStore.getState().duration;
+      if (dur > 0 && t > 0) {
+        const pct = Math.min(100, (t / dur) * 100);
+        if (progressFillRef.current) progressFillRef.current.style.width = `${pct}%`;
+        if (progressThumbRef.current) progressThumbRef.current.style.left = `${pct}%`;
+      }
+    }, 500);
+
+    return () => {
+      unsub();
+      clearInterval(interval);
+    };
   });
 
   const seekFromClientX = useCallback(
@@ -60,6 +66,10 @@ export const PlayerControls = memo(function PlayerControls({
       if (!bar || duration <= 0) return;
       const rect = bar.getBoundingClientRect();
       const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+      // Immediately update progress bar visuals (don't wait for liveTime round-trip)
+      const pct = percent * 100;
+      if (progressFillRef.current) progressFillRef.current.style.width = `${pct}%`;
+      if (progressThumbRef.current) progressThumbRef.current.style.left = `${pct}%`;
       onSeek(percent * duration);
     },
     [duration, onSeek],
@@ -102,32 +112,42 @@ export const PlayerControls = memo(function PlayerControls({
   );
 
   return (
-    <div className="px-3 py-2 flex items-center gap-3">
+    <div
+      className="px-4 py-2 flex items-center gap-3"
+      style={{ borderTop: "1px solid rgba(255,255,255,0.04)" }}
+    >
+      {/* Play/Pause button */}
       <button
         type="button"
         aria-label={isPlaying ? "Pause" : "Play"}
         onClick={onTogglePlay}
         disabled={!timelineReady}
-        className="flex-shrink-0 w-7 h-7 flex items-center justify-center rounded-md text-neutral-300 hover:text-white hover:bg-neutral-800 disabled:opacity-40 disabled:pointer-events-none transition-colors"
+        className="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-lg disabled:opacity-30 disabled:pointer-events-none transition-colors"
+        style={{ background: "rgba(255,255,255,0.06)" }}
       >
         {isPlaying ? (
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="#FAFAFA" aria-hidden="true">
             <rect x="6" y="4" width="4" height="16" rx="1" />
             <rect x="14" y="4" width="4" height="16" rx="1" />
           </svg>
         ) : (
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-            <path d="M8 5v14l11-7z" />
+          <svg width="12" height="12" viewBox="0 0 24 24" fill="#FAFAFA" aria-hidden="true">
+            <polygon points="6,3 20,12 6,21" />
           </svg>
         )}
       </button>
 
-      <span className="text-neutral-500 font-mono text-xs tabular-nums flex-shrink-0 min-w-[80px]">
+      {/* Time display */}
+      <span
+        className="font-mono text-[11px] tabular-nums flex-shrink-0 min-w-[72px]"
+        style={{ color: "#A1A1AA" }}
+      >
         <span ref={timeDisplayRef}>{formatTime(0)}</span>
-        <span className="text-neutral-700 mx-0.5">/</span>
-        <span className="text-neutral-600">{formatTime(duration)}</span>
+        <span style={{ color: "#3F3F46", margin: "0 2px" }}>/</span>
+        <span style={{ color: "#52525B" }}>{formatTime(duration)}</span>
       </span>
 
+      {/* Seek bar — teal progress fill */}
       <div
         ref={seekBarRef}
         role="slider"
@@ -141,16 +161,24 @@ export const PlayerControls = memo(function PlayerControls({
         onMouseDown={handleMouseDown}
         onKeyDown={handleKeyDown}
       >
-        <div className="w-full h-[3px] bg-neutral-800 rounded-full relative">
+        <div
+          className="w-full rounded-full relative"
+          style={{ background: "rgba(255,255,255,0.15)", height: "3px" }}
+        >
+          {/* Progress fill — width is controlled imperatively via ref to avoid React re-render resets */}
           <div
             ref={progressFillRef}
-            className="absolute inset-y-0 left-0 bg-white/80 rounded-full"
-            style={{ width: 0 }}
+            className="absolute top-0 bottom-0 left-0 z-[1] rounded-full"
+            style={{ background: "linear-gradient(90deg, var(--hf-accent, #3CE6AC), #2BBFA0)" }}
           />
+          {/* Playhead thumb — left is controlled imperatively via ref */}
           <div
             ref={progressThumbRef}
-            className="absolute top-1/2 w-2 h-2 bg-white rounded-full -translate-y-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity"
-            style={{ left: 0 }}
+            className="absolute top-1/2 z-[2] w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 transition-transform group-hover:scale-125"
+            style={{
+              background: "var(--hf-accent, #3CE6AC)",
+              boxShadow: "0 0 6px rgba(60,230,172,0.4), 0 1px 4px rgba(0,0,0,0.4)",
+            }}
           />
         </div>
       </div>
@@ -160,12 +188,16 @@ export const PlayerControls = memo(function PlayerControls({
         <button
           type="button"
           onClick={() => setShowSpeedMenu((v) => !v)}
-          className="px-1.5 py-0.5 rounded text-[11px] font-mono tabular-nums text-neutral-500 hover:text-neutral-200 hover:bg-neutral-800 transition-colors"
+          className="px-2 py-1 rounded-md text-[10px] font-mono tabular-nums transition-colors"
+          style={{ color: "#71717A", background: "rgba(255,255,255,0.04)" }}
         >
           {playbackRate === 1 ? "1x" : `${playbackRate}x`}
         </button>
         {showSpeedMenu && (
-          <div className="absolute bottom-full right-0 mb-1 py-1 bg-neutral-900 border border-neutral-700 rounded-lg shadow-xl z-50 min-w-[60px]">
+          <div
+            className="absolute bottom-full right-0 mb-1.5 rounded-lg shadow-xl z-50 min-w-[56px] overflow-hidden"
+            style={{ background: "#161618", border: "1px solid rgba(255,255,255,0.08)" }}
+          >
             {SPEED_OPTIONS.map((rate) => (
               <button
                 key={rate}
@@ -173,11 +205,18 @@ export const PlayerControls = memo(function PlayerControls({
                   setPlaybackRate(rate);
                   setShowSpeedMenu(false);
                 }}
-                className={`block w-full px-3 py-1 text-xs text-left font-mono tabular-nums transition-colors ${
-                  rate === playbackRate
-                    ? "text-white bg-neutral-800"
-                    : "text-neutral-400 hover:text-white hover:bg-neutral-800"
-                }`}
+                className="block w-full px-3 py-1.5 text-[11px] text-left font-mono tabular-nums transition-colors"
+                style={{
+                  color: rate === playbackRate ? "#FAFAFA" : "#71717A",
+                  background: rate === playbackRate ? "rgba(255,255,255,0.06)" : "transparent",
+                }}
+                onMouseEnter={(e) => {
+                  if (rate !== playbackRate)
+                    e.currentTarget.style.background = "rgba(255,255,255,0.04)";
+                }}
+                onMouseLeave={(e) => {
+                  if (rate !== playbackRate) e.currentTarget.style.background = "transparent";
+                }}
               >
                 {rate}x
               </button>

package/src/player/components/Timeline.test.ts

@@ -0,0 +1,110 @@
+import { describe, it, expect } from "vitest";
+import { generateTicks } from "./Timeline";
+import { formatTime } from "../lib/time";
+
+describe("generateTicks", () => {
+  it("returns empty arrays for duration <= 0", () => {
+    expect(generateTicks(0)).toEqual({ major: [], minor: [] });
+    expect(generateTicks(-5)).toEqual({ major: [], minor: [] });
+  });
+
+  it("generates ticks for a short duration (3 seconds)", () => {
+    const { major } = generateTicks(3);
+    expect(major.length).toBeGreaterThan(0);
+    expect(major[0]).toBe(0);
+    expect(major).toContain(0);
+    expect(major).toContain(1);
+    expect(major).toContain(2);
+    expect(major).toContain(3);
+  });
+
+  it("generates ticks for a medium duration (10 seconds)", () => {
+    const { major, minor } = generateTicks(10);
+    expect(major).toContain(0);
+    expect(major).toContain(2);
+    expect(major).toContain(4);
+    expect(major).toContain(6);
+    expect(major).toContain(8);
+    expect(major).toContain(10);
+    expect(minor).toContain(1);
+    expect(minor).toContain(3);
+    expect(minor).toContain(5);
+  });
+
+  it("generates ticks for a long duration (120 seconds)", () => {
+    const { major, minor } = generateTicks(120);
+    expect(major).toContain(0);
+    expect(major).toContain(30);
+    expect(major).toContain(60);
+    expect(major).toContain(90);
+    expect(major).toContain(120);
+    expect(minor).toContain(15);
+    expect(minor).toContain(45);
+  });
+
+  it("generates ticks for a very long duration (500 seconds)", () => {
+    const { major } = generateTicks(500);
+    expect(major).toContain(0);
+    expect(major).toContain(60);
+    expect(major).toContain(120);
+  });
+
+  it("major and minor ticks do not overlap", () => {
+    const { major, minor } = generateTicks(30);
+    for (const t of minor) {
+      expect(major).not.toContain(t);
+    }
+  });
+
+  it("all tick values are non-negative", () => {
+    const { major, minor } = generateTicks(60);
+    for (const t of [...major, ...minor]) {
+      expect(t).toBeGreaterThanOrEqual(0);
+    }
+  });
+
+  it("major ticks always start at 0", () => {
+    for (const d of [1, 5, 10, 30, 60, 120, 300]) {
+      const { major } = generateTicks(d);
+      expect(major[0]).toBe(0);
+    }
+  });
+});
+
+describe("formatTime", () => {
+  it("formats 0 seconds as 0:00", () => {
+    expect(formatTime(0)).toBe("0:00");
+  });
+
+  it("formats seconds below a minute", () => {
+    expect(formatTime(5)).toBe("0:05");
+    expect(formatTime(30)).toBe("0:30");
+    expect(formatTime(59)).toBe("0:59");
+  });
+
+  it("formats exactly one minute", () => {
+    expect(formatTime(60)).toBe("1:00");
+  });
+
+  it("formats minutes and seconds", () => {
+    expect(formatTime(90)).toBe("1:30");
+    expect(formatTime(125)).toBe("2:05");
+  });
+
+  it("floors fractional seconds", () => {
+    expect(formatTime(5.7)).toBe("0:05");
+    expect(formatTime(59.9)).toBe("0:59");
+    expect(formatTime(90.5)).toBe("1:30");
+  });
+
+  it("handles large values", () => {
+    expect(formatTime(600)).toBe("10:00");
+    expect(formatTime(3661)).toBe("61:01");
+  });
+
+  it("zero-pads seconds to two digits", () => {
+    expect(formatTime(1)).toBe("0:01");
+    expect(formatTime(9)).toBe("0:09");
+    expect(formatTime(61)).toBe("1:01");
+  });
+});