@hyperframes/studio 0.7.70 → 0.7.72

package/src/player/components/PlayerControls.tsx

@@ -1,15 +1,13 @@
-import { useRef, useCallback, useEffect, memo } from "react";
+import { useRef, useEffect, memo } from "react";
 import gsap from "gsap";
 import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
-import { formatFrameTime, formatTime, stepFrameTime } from "../lib/time";
-import { usePlayerStore } from "../store/playerStore";
+import { formatFrameTime, formatTime } from "../lib/time";
+import { liveTime, usePlayerStore } from "../store/playerStore";
 import { trackStudioEvent } from "../../utils/studioTelemetry";
 import { Tooltip } from "../../components/ui";
+import { useMountEffect } from "../../hooks/useMountEffect";
 import { ShortcutsPanel } from "./ShortcutsPanel";
 import { SpeedMenu } from "./SpeedMenu";
-import { useSeekBarDrag, resolveSeekPercent } from "./useSeekBarDrag";
-
-export { resolveSeekPercent };
 
 /* ── Icon sub-components ─────────────────────────────────────────── */
 
@@ -78,10 +76,8 @@ const MuteButton = memo(function MuteButton({
         disabled={controlsDisabled}
         aria-label={label}
         aria-pressed={audioMuted}
-        className={`h-7 w-7 flex-shrink-0 flex items-center justify-center rounded-md border transition-colors disabled:pointer-events-none ${
-          audioMuted
-            ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-            : "border-neutral-700 text-neutral-400 hover:border-neutral-500 hover:bg-neutral-800"
+        className={`flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md transition-colors disabled:pointer-events-none disabled:opacity-30 ${
+          audioMuted ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"
         }`}
       >
         <svg
@@ -131,10 +127,8 @@ const LoopButton = memo(function LoopButton({
           setLoopEnabled(!loopEnabled);
         }}
         disabled={disabled}
-        className={`h-7 w-7 flex items-center justify-center rounded-md border transition-colors ${
-          loopEnabled
-            ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-            : "border-neutral-700 text-neutral-400 hover:border-neutral-500 hover:bg-neutral-800"
+        className={`flex h-7 w-7 items-center justify-center rounded-md transition-colors disabled:opacity-30 ${
+          loopEnabled ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"
         }`}
         aria-label={loopEnabled ? "Disable loop playback" : "Enable loop playback"}
         aria-pressed={loopEnabled}
@@ -175,10 +169,8 @@ const FullscreenButton = memo(function FullscreenButton({
           trackStudioEvent("playback", { action: "fullscreen_toggle", active: !isFullscreen });
           onToggleFullscreen();
         }}
-        className={`h-7 w-7 flex-shrink-0 flex items-center justify-center rounded-md border transition-colors ${
-          isFullscreen
-            ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-            : "border-neutral-700 text-neutral-400 hover:border-neutral-500 hover:bg-neutral-800"
+        className={`flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md transition-colors ${
+          isFullscreen ? "text-studio-accent" : "text-neutral-500 hover:text-neutral-200"
         }`}
         aria-label={isFullscreen ? "Exit fullscreen" : "Enter fullscreen"}
       >
@@ -214,118 +206,6 @@ const FullscreenButton = memo(function FullscreenButton({
   );
 });
 
-/* ── Seek bar sub-component ──────────────────────────────────────── */
-
-function SeekBarMarker({ position, duration }: { position: number; duration: number }) {
-  if (duration <= 0) return null;
-  return (
-    <div
-      className="absolute z-[3] pointer-events-none"
-      style={{
-        left: `${Math.min(100, (position / duration) * 100)}%`,
-        top: "50%",
-        transform: "translate(-50%, -50%)",
-        width: "2px",
-        height: "10px",
-        background: "#3CE6AC",
-        borderRadius: "1px",
-      }}
-    />
-  );
-}
-
-function WorkAreaOverlay({
-  inPoint,
-  outPoint,
-  duration,
-}: {
-  inPoint: number | null;
-  outPoint: number | null;
-  duration: number;
-}) {
-  if ((inPoint === null && outPoint === null) || duration <= 0) return null;
-  return (
-    <>
-      <div
-        className="absolute top-0 bottom-0 pointer-events-none"
-        style={{
-          left: `${inPoint !== null ? Math.min(100, (inPoint / duration) * 100) : 0}%`,
-          right: `${outPoint !== null ? 100 - Math.min(100, (outPoint / duration) * 100) : 0}%`,
-          background: "rgba(60,230,172,0.15)",
-        }}
-      />
-      {inPoint !== null && <SeekBarMarker position={inPoint} duration={duration} />}
-      {outPoint !== null && <SeekBarMarker position={outPoint} duration={duration} />}
-    </>
-  );
-}
-
-const SeekBar = memo(function SeekBar({
-  disabled,
-  duration,
-  inPoint,
-  outPoint,
-  progressFillRef,
-  progressThumbRef,
-  seekBarRef,
-  sliderRef,
-  onPointerDown,
-  onKeyDown,
-}: {
-  disabled: boolean;
-  duration: number;
-  inPoint: number | null;
-  outPoint: number | null;
-  progressFillRef: React.RefObject<HTMLDivElement | null>;
-  progressThumbRef: React.RefObject<HTMLDivElement | null>;
-  seekBarRef: React.RefObject<HTMLDivElement | null>;
-  sliderRef: React.RefObject<HTMLDivElement | null>;
-  onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;
-  onKeyDown: (e: React.KeyboardEvent) => void;
-}) {
-  return (
-    <div
-      ref={(el) => {
-        (seekBarRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
-        (sliderRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
-      }}
-      role="slider"
-      tabIndex={disabled ? -1 : 0}
-      aria-label="Seek"
-      aria-disabled={disabled || undefined}
-      aria-valuemin={0}
-      aria-valuemax={Math.round(duration)}
-      aria-valuenow={0}
-      className={`min-w-[96px] flex-1 h-6 flex items-center group outline-none focus-visible:ring-1 focus-visible:ring-white/30 focus-visible:rounded ${
-        disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-      }`}
-      style={{ touchAction: "none" }}
-      onPointerDown={onPointerDown}
-      onKeyDown={onKeyDown}
-    >
-      <div
-        className="w-full rounded-full relative"
-        style={{ background: "rgba(255,255,255,0.15)", height: "3px" }}
-      >
-        <WorkAreaOverlay inPoint={inPoint} outPoint={outPoint} duration={duration} />
-        <div
-          ref={progressFillRef}
-          className="absolute top-0 bottom-0 left-0 z-[1] rounded-full"
-          style={{ background: "linear-gradient(90deg, var(--hf-accent, #3CE6AC), #2BBFA0)" }}
-        />
-        <div
-          ref={progressThumbRef}
-          className="absolute top-1/2 z-[4] 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>
-  );
-});
-
 /* ── Main component ──────────────────────────────────────────────── */
 
 interface PlayerControlsProps {
@@ -359,12 +239,7 @@ export const PlayerControls = memo(function PlayerControls({
   const timeDisplayMode = usePlayerStore((s) => s.timeDisplayMode);
   const setTimeDisplayMode = usePlayerStore.getState().setTimeDisplayMode;
 
-  const progressFillRef = useRef<HTMLDivElement>(null);
-  const progressThumbRef = useRef<HTMLDivElement>(null);
   const timeDisplayRef = useRef<HTMLSpanElement>(null);
-  const seekBarRef = useRef<HTMLDivElement>(null);
-  const sliderRef = useRef<HTMLDivElement>(null);
-  const isDraggingRef = useRef(false);
   const currentTimeRef = useRef(0);
   const timeDisplayModeRef = useRef(timeDisplayMode);
   timeDisplayModeRef.current = timeDisplayMode;
@@ -380,64 +255,29 @@ export const PlayerControls = memo(function PlayerControls({
       timeDisplayMode === "frame" ? formatFrameTime(t, duration) : formatTime(t);
   }, [duration, timeDisplayMode]);
 
-  const { handlePointerDown } = useSeekBarDrag(
-    {
-      seekBarRef,
-      progressFillRef,
-      progressThumbRef,
-      sliderRef,
-      timeDisplayRef,
-      isDraggingRef,
-      durationRef,
-      currentTimeRef,
-      timeDisplayModeRef,
-    },
-    onSeek,
-    disabled,
-    duration,
-  );
-
-  const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (disabled || !timelineReady || duration <= 0) return;
-      const step = e.shiftKey ? 10 : 1;
-      if (e.key === "ArrowLeft") {
-        e.preventDefault();
-        onSeek(stepFrameTime(currentTimeRef.current, -step));
-      } else if (e.key === "ArrowRight") {
-        e.preventDefault();
-        onSeek(Math.min(duration, stepFrameTime(currentTimeRef.current, step)));
-      }
-    },
-    [disabled, timelineReady, duration, onSeek],
-  );
+  useMountEffect(() => {
+    const updateTime = (time: number) => {
+      currentTimeRef.current = time;
+      if (!timeDisplayRef.current) return;
+      const currentDuration = durationRef.current;
+      timeDisplayRef.current.textContent =
+        timeDisplayModeRef.current === "frame"
+          ? formatFrameTime(time, currentDuration)
+          : formatTime(time);
+    };
+    const unsubscribe = liveTime.subscribe(updateTime);
+    updateTime(usePlayerStore.getState().currentTime);
+    return unsubscribe;
+  });
 
   return (
     <div
-      // No own background/border: the transport blends into the preview
-      // panel's surface — buttons carry their own chrome.
-      className="px-4 py-2 flex flex-wrap items-center gap-x-2 gap-y-1"
+      className="grid h-10 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center px-3"
       aria-disabled={disabled || undefined}
       style={{
-        paddingBottom: "calc(0.5rem + env(safe-area-inset-bottom))",
+        paddingBottom: "env(safe-area-inset-bottom)",
       }}
     >
-      <Tooltip label={isPlaying ? "Pause" : "Play"}>
-        <button
-          type="button"
-          aria-label={isPlaying ? "Pause" : "Play"}
-          onClick={() => {
-            trackStudioEvent("playback", { action: isPlaying ? "pause" : "play" });
-            onTogglePlay();
-          }}
-          disabled={controlsDisabled}
-          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)" }}
-        >
-          <PlayPauseMorphIcon playing={isPlaying} />
-        </button>
-      </Tooltip>
-
       <Tooltip
         label={timeDisplayMode === "time" ? "Switch to frame display" : "Switch to time display"}
       >
@@ -445,59 +285,58 @@ export const PlayerControls = memo(function PlayerControls({
           type="button"
           onClick={() => setTimeDisplayMode(timeDisplayMode === "time" ? "frame" : "time")}
           disabled={disabled}
-          className="font-mono text-[11px] tabular-nums flex-shrink-0 w-[118px] text-left transition-colors disabled:pointer-events-none hover:opacity-80"
-          style={{ color: "#A1A1AA", cursor: "pointer" }}
+          className="min-w-0 justify-self-start whitespace-nowrap font-mono text-[11px] tabular-nums text-neutral-400 transition-colors hover:text-neutral-200 disabled:pointer-events-none"
         >
           <span ref={timeDisplayRef}>{formatTime(0)}</span>
           {timeDisplayMode === "time" ? (
             <>
-              <span style={{ color: "#3F3F46", margin: "0 2px" }}>/</span>
-              <span style={{ color: "#52525B" }}>{formatTime(duration)}</span>
+              <span className="mx-0.5 text-neutral-700">/</span>
+              <span className="text-neutral-600">{formatTime(duration)}</span>
             </>
           ) : null}
         </button>
       </Tooltip>
 
-      <SeekBar
-        disabled={disabled}
-        duration={duration}
-        inPoint={inPoint}
-        outPoint={outPoint}
-        progressFillRef={progressFillRef}
-        progressThumbRef={progressThumbRef}
-        seekBarRef={seekBarRef}
-        sliderRef={sliderRef}
-        onPointerDown={handlePointerDown}
-        onKeyDown={handleKeyDown}
-      />
-
-      <MuteButton
-        audioMuted={audioMuted}
-        controlsDisabled={controlsDisabled}
-        setAudioMuted={setAudioMuted}
-      />
-
-      <SpeedMenu
-        playbackRate={playbackRate}
-        setPlaybackRate={setPlaybackRate}
-        disabled={disabled}
-      />
-
-      <LoopButton loopEnabled={loopEnabled} disabled={disabled} setLoopEnabled={setLoopEnabled} />
-
-      {onToggleFullscreen && (
-        <FullscreenButton isFullscreen={isFullscreen} onToggleFullscreen={onToggleFullscreen} />
-      )}
+      <Tooltip label={isPlaying ? "Pause" : "Play"}>
+        <button
+          type="button"
+          aria-label={isPlaying ? "Pause" : "Play"}
+          onClick={() => {
+            trackStudioEvent("playback", { action: isPlaying ? "pause" : "play" });
+            onTogglePlay();
+          }}
+          disabled={controlsDisabled}
+          className="flex h-8 w-8 items-center justify-center justify-self-center rounded-md text-neutral-100 transition-colors hover:text-white disabled:pointer-events-none disabled:opacity-30"
+        >
+          <PlayPauseMorphIcon playing={isPlaying} />
+        </button>
+      </Tooltip>
 
-      <ShortcutsPanel
-        disabled={disabled}
-        duration={duration}
-        inPoint={inPoint}
-        outPoint={outPoint}
-        setInPoint={setInPoint}
-        setOutPoint={setOutPoint}
-        onSeek={onSeek}
-      />
+      <div className="flex min-w-0 items-center justify-self-end">
+        <MuteButton
+          audioMuted={audioMuted}
+          controlsDisabled={controlsDisabled}
+          setAudioMuted={setAudioMuted}
+        />
+        <SpeedMenu
+          playbackRate={playbackRate}
+          setPlaybackRate={setPlaybackRate}
+          disabled={disabled}
+        />
+        <LoopButton loopEnabled={loopEnabled} disabled={disabled} setLoopEnabled={setLoopEnabled} />
+        {onToggleFullscreen && (
+          <FullscreenButton isFullscreen={isFullscreen} onToggleFullscreen={onToggleFullscreen} />
+        )}
+        <ShortcutsPanel
+          disabled={disabled}
+          duration={duration}
+          inPoint={inPoint}
+          outPoint={outPoint}
+          setInPoint={setInPoint}
+          setOutPoint={setOutPoint}
+          onSeek={onSeek}
+        />
+      </div>
     </div>
   );
 });

package/src/player/components/ShortcutsPanel.tsx

@@ -153,10 +153,8 @@ export const ShortcutsPanel = memo(function ShortcutsPanel({
         <button
           type="button"
           onClick={() => setShowShortcuts((v) => !v)}
-          className={`w-6 h-6 flex items-center justify-center rounded border transition-colors ${
-            showShortcuts
-              ? "border-neutral-600 text-neutral-200 bg-neutral-800"
-              : "border-neutral-800 text-neutral-600 hover:text-neutral-300 hover:border-neutral-600"
+          className={`flex h-7 w-7 items-center justify-center rounded-md transition-colors ${
+            showShortcuts ? "text-neutral-200" : "text-neutral-600 hover:text-neutral-300"
           }`}
           aria-label="Shortcuts and tools"
           aria-expanded={showShortcuts}

package/src/player/components/SpeedMenu.tsx

@@ -41,8 +41,7 @@ export const SpeedMenu = memo(function SpeedMenu({
           type="button"
           onClick={() => setShowSpeedMenu((v) => !v)}
           disabled={disabled}
-          className="w-10 px-2 py-1 rounded-md text-[10px] font-mono tabular-nums transition-colors"
-          style={{ color: "#71717A", background: "rgba(255,255,255,0.04)" }}
+          className="h-7 w-8 rounded-md font-mono text-[10px] tabular-nums text-neutral-500 transition-colors hover:text-neutral-200 disabled:opacity-30"
         >
           {playbackRate === 1 ? "1x" : `${playbackRate}x`}
         </button>

package/src/telemetry/events.test.ts

@@ -12,6 +12,7 @@ const {
   trackStudioRenderStart,
   trackStudioRazorSplit,
   trackStudioExpandedClipEdit,
+  trackStudioSegmentEaseEdit,
   trackStudioFeedback,
 } = await import("./events");
 
@@ -71,6 +72,14 @@ describe("studio telemetry events", () => {
     expect(trackEvent).toHaveBeenCalledWith("studio_expanded_clip_edit", { action: "resize" });
   });
 
+  it("trackStudioSegmentEaseEdit emits 'studio_segment_ease_edit' with action and ease", () => {
+    trackStudioSegmentEaseEdit({ ease: "power2.out" });
+    expect(trackEvent).toHaveBeenCalledWith("studio_segment_ease_edit", {
+      action: "commit",
+      ease: "power2.out",
+    });
+  });
+
   it.each([0, 10])("trackStudioFeedback preserves NPS boundary %i and its scale", (rating) => {
     trackStudioFeedback({ rating });
 

package/src/telemetry/events.ts

@@ -63,6 +63,11 @@ export function trackStudioExpandedClipEdit(props: {
   trackEvent("studio_expanded_clip_edit", { action: props.action });
 }
 
+// Adoption signal for committing an edit to a segment's ease.
+export function trackStudioSegmentEaseEdit(props: { ease: string }): void {
+  trackEvent("studio_segment_ease_edit", { action: "commit", ease: props.ease });
+}
+
 export function trackStudioFeedback(props: { rating: number; comment?: string }): void {
   trackEvent("survey sent", {
     $survey_id: "studio_experience",

package/src/utils/blockInstaller.test.ts

@@ -0,0 +1,67 @@
+// @vitest-environment happy-dom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { addBlockToProject } from "./blockInstaller";
+
+afterEach(() => {
+  vi.unstubAllGlobals();
+});
+
+describe("addBlockToProject", () => {
+  it("uses an explicit selected-media duration and track for a Registry overlay block", async () => {
+    const componentPath = "compositions/camcorder-hud.html";
+    const targetPath = "compositions/scene.html";
+    const files = new Map([
+      [
+        componentPath,
+        `<body><div data-composition-id="camcorder-hud"><div class="hud"></div></div></body>`,
+      ],
+      [
+        targetPath,
+        `<main data-composition-id="scene" data-duration="10" data-width="1920" data-height="1080"></main>`,
+      ],
+    ]);
+    vi.stubGlobal(
+      "fetch",
+      vi.fn().mockResolvedValue({
+        ok: true,
+        json: async () => ({
+          written: [componentPath],
+          block: {
+            name: "camcorder-hud",
+            title: "Camcorder HUD",
+            description: "HUD",
+            type: "hyperframes:block",
+            files: [],
+            dimensions: { width: 1920, height: 1080 },
+            duration: 4,
+          },
+        }),
+      }),
+    );
+    const writeProjectFile = vi.fn(async (path: string, content: string) => {
+      files.set(path, content);
+    });
+
+    const result = await addBlockToProject({
+      projectId: "project",
+      blockName: "camcorder-hud",
+      activeCompPath: targetPath,
+      placement: { start: 2.5, duration: 4.25, track: 3 },
+      timelineElements: [],
+      readProjectFile: async (path) => files.get(path) ?? "",
+      writeProjectFile,
+      recordEdit: vi.fn().mockResolvedValue(undefined),
+      refreshFileTree: vi.fn().mockResolvedValue(undefined),
+      reloadPreview: vi.fn(),
+      showToast: vi.fn(),
+    });
+
+    expect(result?.block.name).toBe("camcorder-hud");
+    const source = files.get(targetPath);
+    expect(source).toContain('data-composition-src="compositions/camcorder-hud.html"');
+    expect(source).toContain('data-start="2.5"');
+    expect(source).toContain('data-duration="4.25"');
+    expect(source).toContain('data-track-index="3"');
+  });
+});