@hyperframes/studio 0.7.54 → 0.7.56

package/src/components/nle/useTimelineEditCallbacks.ts

@@ -0,0 +1,217 @@
+import { useCallback, useMemo } from "react";
+import type { TimelineElement } from "../../player";
+import { usePlayerStore } from "../../player/store/playerStore";
+import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
+import type { TimelineEditCallbacks } from "../../player/components/timelineCallbacks";
+import { useStudioShellContext } from "../../contexts/StudioContext";
+import {
+  useDomEditActionsContext,
+  useDomEditSelectionContext,
+} from "../../contexts/DomEditContext";
+import { resolveTweenStart, resolveTweenDuration } from "../../utils/globalTimeCompiler";
+import { resolveClipTimingBasis } from "../../hooks/useGsapTweenCache";
+import { resolveKeyframeRetime } from "../editor/keyframeRetime";
+import type { TimelineMoveOperation } from "../../hooks/timelineMoveAdapter";
+
+export interface TimelineEditCallbackDeps {
+  handleTimelineElementMove: (
+    element: TimelineElement,
+    updates: Pick<TimelineElement, "start" | "track">,
+  ) => Promise<void> | void;
+  handleTimelineElementsMove: (
+    edits: Array<{ element: TimelineElement; updates: Pick<TimelineElement, "start" | "track"> }>,
+    coalesceKey?: string,
+    operation?: TimelineMoveOperation,
+  ) => Promise<void> | void;
+  handleTimelineElementResize: (
+    element: TimelineElement,
+    updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
+  ) => Promise<void> | void;
+  handleTimelineGroupResize: NonNullable<TimelineEditCallbacks["onResizeElements"]>;
+  handleToggleTrackHidden: (track: number, hidden: boolean) => Promise<void> | void;
+  handleBlockedTimelineEdit: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
+  handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void> | void;
+  handleRazorSplit: (element: TimelineElement, splitTime: number) => Promise<void> | void;
+  handleRazorSplitAll: (splitTime: number) => Promise<void> | void;
+}
+
+/**
+ * Builds the timeline edit callback bag (move/resize/split/razor plus the
+ * keyframe-diamond callbacks) provided to `<Timeline>` via TimelineEditProvider.
+ * The keyframe callbacks resolve the dragged diamond back to its GSAP anim id +
+ * tween-relative percentage, reading DOM-edit selection state from context.
+ */
+// fallow-ignore-next-line complexity
+export function useTimelineEditCallbacks({
+  handleTimelineElementMove,
+  handleTimelineElementsMove,
+  handleTimelineElementResize,
+  handleTimelineGroupResize,
+  handleToggleTrackHidden,
+  handleBlockedTimelineEdit,
+  handleTimelineElementSplit,
+  handleRazorSplit,
+  handleRazorSplitAll,
+}: TimelineEditCallbackDeps): TimelineEditCallbacks {
+  const { projectId, activeCompPath } = useStudioShellContext();
+  const { domEditSelection, selectedGsapAnimations } = useDomEditSelectionContext();
+  const {
+    handleGsapRemoveKeyframe,
+    handleGsapMoveKeyframeToPlayhead,
+    handleGsapMoveKeyframe,
+    handleGsapResizeKeyframedTween,
+    handleGsapUpdateMeta,
+    handleGsapAddKeyframe,
+    handleGsapConvertToKeyframes,
+    handleGsapRemoveAllKeyframes,
+    buildDomSelectionForTimelineElement,
+  } = useDomEditActionsContext();
+
+  // Resolve a timeline-diamond callback's clip-% to the keyframe's anim id + its
+  // tween-relative percentage (shared by the delete/move keyframe callbacks): the
+  // diamond reports a clip-% but the script ops key on the tween-%. Prefers the
+  // anim in the keyframe's property group, falling back to the first keyframed one.
+  const resolveKeyframeTarget = useCallback(
+    // fallow-ignore-next-line complexity
+    (pct: number): { animId: string; tweenPct: number } | null => {
+      const cached = usePlayerStore.getState().keyframeCache.get(domEditSelection?.id ?? "");
+      const kf = cached?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
+      const group = kf?.propertyGroup;
+      const anim =
+        (group ? selectedGsapAnimations.find((a) => a.propertyGroup === group) : undefined) ??
+        selectedGsapAnimations.find((a) => a.keyframes);
+      return anim ? { animId: anim.id, tweenPct: kf?.tweenPercentage ?? pct } : null;
+    },
+    [domEditSelection?.id, selectedGsapAnimations],
+  );
+
+  return useMemo(
+    () => ({
+      onMoveElement: handleTimelineElementMove,
+      onMoveElements: handleTimelineElementsMove,
+      onResizeElement: handleTimelineElementResize,
+      onResizeElements: handleTimelineGroupResize,
+      onToggleTrackHidden: handleToggleTrackHidden,
+      onBlockedEditAttempt: handleBlockedTimelineEdit,
+      onSplitElement: handleTimelineElementSplit,
+      onRazorSplit: handleRazorSplit,
+      onRazorSplitAll: handleRazorSplitAll,
+      onDeleteAllKeyframes: () => {
+        // Hold the element where it is (collapse keyframes to a static set) rather
+        // than deleting the whole animation — deleting strands a stale GSAP base
+        // that the next drag adds to, flinging the element off-screen.
+        const anim = selectedGsapAnimations.find((a) => a.keyframes);
+        if (!anim) return;
+        handleGsapRemoveAllKeyframes(anim.id);
+      },
+      onDeleteKeyframe: (_elId: string, pct: number) => {
+        const target = resolveKeyframeTarget(pct);
+        if (target) handleGsapRemoveKeyframe(target.animId, target.tweenPct);
+      },
+      // Retime the keyframe to the playhead, preserving its value + ease.
+      onMoveKeyframeToPlayhead: (_elId: string, pct: number) => {
+        const target = resolveKeyframeTarget(pct);
+        if (target) handleGsapMoveKeyframeToPlayhead(target.animId, target.tweenPct);
+      },
+      // Drag-to-retime. The diamond reports clip-%s; resolveKeyframeTarget gives
+      // the dragged keyframe's anim + tween-%. We convert the clip-% drop to an
+      // absolute time (via the clip's timing basis) and let resolveKeyframeRetime
+      // decide: a drop inside the tween window is a plain move (re-key tween-%); a
+      // drop past the boundary (last keyframe past the end, first before the start)
+      // resizes the tween — position/duration grow so the dragged keyframe lands at
+      // the drop while every other keyframe keeps its absolute time (value+ease too).
+      // fallow-ignore-next-line complexity
+      onMoveKeyframe: (_elId: string, fromClipPct: number, toClipPct: number) => {
+        const target = resolveKeyframeTarget(fromClipPct);
+        const sel = domEditSelection;
+        if (!target || !sel) return;
+        const anim = selectedGsapAnimations.find((a) => a.id === target.animId);
+        const tweenStart = anim ? resolveTweenStart(anim) : null;
+        if (!anim || tweenStart === null) return;
+        const tweenDuration = anim.duration ?? resolveTweenDuration(anim);
+        const sourceFile = sel.sourceFile || activeCompPath || "index.html";
+        const { elements, domClipChildren } = usePlayerStore.getState();
+        const { elStart, elDuration } = resolveClipTimingBasis(
+          sel.id ?? "",
+          sourceFile,
+          elements,
+          domClipChildren,
+        );
+        const dropAbsTime = elStart + (toClipPct / 100) * elDuration;
+        const decision = resolveKeyframeRetime({
+          keyframes: anim.keyframes?.keyframes ?? [],
+          draggedTweenPct: target.tweenPct,
+          tweenStart,
+          tweenDuration,
+          dropAbsTime,
+        });
+        if (decision.kind === "move" && decision.toTweenPct != null) {
+          handleGsapMoveKeyframe(target.animId, target.tweenPct, decision.toTweenPct);
+        } else if (
+          decision.kind === "resize" &&
+          decision.pctRemap &&
+          decision.position != null &&
+          decision.duration != null
+        ) {
+          handleGsapResizeKeyframedTween(
+            target.animId,
+            decision.position,
+            decision.duration,
+            decision.pctRemap,
+          );
+        }
+      },
+      onChangeKeyframeEase: (_elId: string, _pct: number, ease: string) => {
+        for (const anim of selectedGsapAnimations) {
+          if (anim.keyframes) handleGsapUpdateMeta(anim.id, { ease });
+        }
+      },
+      // fallow-ignore-next-line complexity
+      onToggleKeyframeAtPlayhead: (el: TimelineElement) => {
+        const currentTime = usePlayerStore.getState().currentTime;
+        const pct =
+          el.duration > 0
+            ? Math.max(0, Math.min(100, Math.round(((currentTime - el.start) / el.duration) * 100)))
+            : 0;
+        const anim = selectedGsapAnimations.find((a) => a.keyframes);
+        if (anim?.keyframes) {
+          const existing = anim.keyframes.keyframes.find((k) => Math.abs(k.percentage - pct) <= 1);
+          if (existing) {
+            handleGsapRemoveKeyframe(anim.id, existing.percentage);
+          } else {
+            handleGsapAddKeyframe(anim.id, pct, "x", 0);
+          }
+        } else {
+          const flatAnim = selectedGsapAnimations.find((a) => !a.keyframes);
+          if (flatAnim) handleGsapConvertToKeyframes(flatAnim.id);
+        }
+      },
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      handleTimelineElementMove,
+      handleTimelineElementsMove,
+      handleTimelineElementResize,
+      handleTimelineGroupResize,
+      handleToggleTrackHidden,
+      handleBlockedTimelineEdit,
+      handleTimelineElementSplit,
+      handleRazorSplit,
+      handleRazorSplitAll,
+      handleGsapRemoveAllKeyframes,
+      resolveKeyframeTarget,
+      selectedGsapAnimations,
+      handleGsapRemoveKeyframe,
+      handleGsapMoveKeyframeToPlayhead,
+      handleGsapMoveKeyframe,
+      handleGsapResizeKeyframedTween,
+      handleGsapUpdateMeta,
+      handleGsapAddKeyframe,
+      handleGsapConvertToKeyframes,
+      buildDomSelectionForTimelineElement,
+      projectId,
+      activeCompPath,
+      domEditSelection,
+    ],
+  );
+}

package/src/components/sidebar/AssetCard.tsx

@@ -0,0 +1,326 @@
+/**
+ * AssetCard and FontRow — visual asset tile / row components for the Assets panel.
+ * Extracted from AssetsTab.tsx to keep that file under the 600-line CI gate.
+ */
+import { useState, useEffect, useRef, useCallback } from "react";
+import { VideoFrameThumbnail } from "../ui/VideoFrameThumbnail";
+import { VIDEO_EXT, IMAGE_EXT } from "../../utils/mediaTypes";
+import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
+import { ContextMenu } from "./AssetContextMenu";
+import { usePlayerStore } from "../../player/store/playerStore";
+import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
+import { findClipForAsset, isPointerClick } from "../../utils/assetClickBehavior";
+import { basename, ext, truncateMiddle, formatDuration } from "./assetHelpers";
+import { resolveMediaPreviewUrl } from "../../player/components/thumbnailUtils";
+
+/** Drag payload writer shared by the asset tile and the font row: copy effect
+ *  plus the timeline-asset MIME and a plain-text path fallback. */
+function writeAssetDragData(e: React.DragEvent, asset: string): void {
+  e.dataTransfer.effectAllowed = "copy";
+  e.dataTransfer.setData(TIMELINE_ASSET_MIME, JSON.stringify({ path: asset }));
+  e.dataTransfer.setData("text/plain", asset);
+}
+
+/** Open the row/tile context menu at the pointer, shared by asset tile + font row. */
+function openAssetContextMenu(
+  e: React.MouseEvent,
+  setContextMenu: (menu: { x: number; y: number }) => void,
+): void {
+  e.preventDefault();
+  setContextMenu({ x: e.clientX, y: e.clientY });
+}
+
+/**
+ * Lazily probe a video/audio URL for its duration via a hidden HTMLVideoElement
+ * (`preload="metadata"`). The manifest only covers ~/.media assets, so project
+ * assets in assets/ have no manifest entry — this fills the gap.
+ * Returns `undefined` until the probe completes; `null` if it failed.
+ */
+function useProbedDuration(src: string, skip: boolean): number | null | undefined {
+  const [duration, setDuration] = useState<number | null | undefined>(undefined);
+  useEffect(() => {
+    if (skip) return;
+    let cancelled = false;
+    let retryTimer: ReturnType<typeof setTimeout> | undefined;
+    // The in-flight probe element, so unmount cleanup can abort its network
+    // fetch (clearing `src`) instead of leaving it to finish in the background.
+    let liveVid: HTMLVideoElement | null = null;
+
+    function teardown(vid: HTMLVideoElement) {
+      vid.onloadedmetadata = null;
+      vid.onerror = null;
+      vid.src = "";
+    }
+
+    function probe(attempt: number) {
+      if (cancelled) return;
+      const vid = document.createElement("video");
+      liveVid = vid;
+      vid.preload = "metadata";
+      vid.muted = true;
+      vid.onloadedmetadata = () => {
+        const d = Number.isFinite(vid.duration) && vid.duration > 0 ? vid.duration : null;
+        teardown(vid);
+        if (!cancelled) setDuration(d);
+      };
+      vid.onerror = () => {
+        teardown(vid);
+        if (!cancelled) {
+          if (attempt < 1) retryTimer = setTimeout(() => probe(attempt + 1), 50);
+          else setDuration(null);
+        }
+      };
+      vid.src = src;
+    }
+
+    probe(0);
+    return () => {
+      cancelled = true;
+      if (retryTimer) clearTimeout(retryTimer);
+      if (liveVid) teardown(liveVid);
+    };
+  }, [src, skip]);
+  return duration;
+}
+
+export interface AssetCardProps {
+  projectId: string;
+  asset: string;
+  used: boolean;
+  duration?: number;
+  onCopy: (path: string) => void;
+  isCopied: boolean;
+  onDelete?: (path: string) => void;
+  onRename?: (oldPath: string, newPath: string) => void;
+  onAddAssetToTimeline?: (path: string) => void;
+}
+
+/**
+ * Thumbnail card for images and video assets. Renders in a 2-col grid.
+ *
+ * Click behaviour (CapCut-style):
+ *   - Already added  → selects the clip on the timeline (setSelectedElementId).
+ *   - Not yet added  → opens the asset preview overlay over the canvas.
+ * Drag behaviour is preserved: a pointer movement exceeding DRAG_THRESHOLD_PX
+ * before pointerup is treated as drag-start, not a click.
+ */
+// fallow-ignore-next-line complexity
+export function AssetCard({
+  projectId,
+  asset,
+  used,
+  duration,
+  onCopy,
+  isCopied,
+  onDelete,
+  onRename,
+  onAddAssetToTimeline,
+}: AssetCardProps) {
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
+  const [hovered, setHovered] = useState(false);
+  const fullName = asset.split("/").pop() ?? asset;
+  const name = basename(asset);
+  const extension = ext(asset);
+  const serveUrl = resolveMediaPreviewUrl(asset, projectId);
+  const isVideo = VIDEO_EXT.test(asset);
+  const isImage = IMAGE_EXT.test(asset);
+  const probedDuration = useProbedDuration(serveUrl, !isVideo || duration != null);
+  const resolvedDuration = duration ?? probedDuration ?? undefined;
+  const durationLabel = formatDuration(resolvedDuration ?? 0);
+
+  // Drag-threshold click gate: track pointer-down position so we can ignore
+  // pointer-up events that followed a real drag gesture.
+  const pointerDownRef = useRef<{ x: number; y: number } | null>(null);
+
+  const setSelectedElementId = usePlayerStore((s) => s.setSelectedElementId);
+  const elements = usePlayerStore((s) => s.elements);
+  const setPreviewAsset = useAssetPreviewStore((s) => s.setPreviewAsset);
+
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    pointerDownRef.current = { x: e.clientX, y: e.clientY };
+  }, []);
+
+  const handlePointerUp = useCallback(
+    (e: React.PointerEvent) => {
+      const origin = pointerDownRef.current;
+      pointerDownRef.current = null;
+      if (!origin) return;
+      if (!isPointerClick(e.clientX - origin.x, e.clientY - origin.y)) return;
+      // Treat as click
+      if (used) {
+        const clip = findClipForAsset(elements, asset);
+        if (clip) {
+          setSelectedElementId(clip.key ?? clip.id);
+          return;
+        }
+      }
+      // Not added (or no matching clip found) → preview overlay
+      setPreviewAsset(asset, projectId);
+    },
+    [used, elements, asset, projectId, setSelectedElementId, setPreviewAsset],
+  );
+
+  return (
+    <>
+      <div
+        draggable
+        onPointerDown={handlePointerDown}
+        onPointerUp={handlePointerUp}
+        onDragStart={(e) => writeAssetDragData(e, asset)}
+        onContextMenu={(e) => openAssetContextMenu(e, setContextMenu)}
+        onPointerEnter={() => setHovered(true)}
+        onPointerLeave={() => setHovered(false)}
+        className={`flex flex-col gap-1 cursor-pointer rounded-md p-1 transition-colors ${
+          isCopied ? "bg-studio-accent/10" : "hover:bg-neutral-800/40"
+        }`}
+      >
+        {/* Thumbnail */}
+        <div className="w-full aspect-video rounded overflow-hidden bg-neutral-900 relative">
+          {isImage && (
+            <img
+              src={serveUrl}
+              alt={name}
+              loading="lazy"
+              className="w-full h-full object-cover"
+              onError={(e) => {
+                (e.target as HTMLImageElement).style.display = "none";
+              }}
+            />
+          )}
+          {isVideo && (
+            <>
+              <VideoFrameThumbnail src={serveUrl} />
+              {hovered && (
+                <video
+                  src={serveUrl}
+                  autoPlay
+                  muted
+                  loop
+                  playsInline
+                  className="absolute inset-0 w-full h-full object-cover"
+                />
+              )}
+            </>
+          )}
+          {!isImage && !isVideo && (
+            <div className="w-full h-full flex items-center justify-center">
+              <span className="text-[10px] font-medium text-neutral-600">{extension}</span>
+            </div>
+          )}
+
+          {/* "Added" badge — top-left */}
+          {used && (
+            <span className="absolute top-1 left-1 text-[9px] font-semibold leading-none px-1.5 py-[3px] rounded bg-neutral-950/80 text-panel-text-1">
+              Added
+            </span>
+          )}
+
+          {/* Duration badge — top-right, media only */}
+          {durationLabel && (
+            <span className="absolute top-1 right-1 text-[9px] font-medium leading-none px-1.5 py-[3px] rounded bg-neutral-950/80 text-panel-text-2 tabular-nums">
+              {durationLabel}
+            </span>
+          )}
+        </div>
+
+        {/* Filename caption */}
+        <span
+          className={`text-[10px] leading-tight text-center block w-full ${
+            used ? "text-panel-text-2" : "text-panel-text-4"
+          }`}
+          title={fullName}
+        >
+          {truncateMiddle(fullName, 22)}
+        </span>
+      </div>
+
+      {contextMenu && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          asset={asset}
+          onClose={() => setContextMenu(null)}
+          onCopy={onCopy}
+          onDelete={onDelete}
+          onRename={onRename}
+          onAddAtPlayhead={onAddAssetToTimeline}
+        />
+      )}
+    </>
+  );
+}
+
+export interface FontRowProps {
+  asset: string;
+  used: boolean;
+  onCopy: (path: string) => void;
+  isCopied: boolean;
+  onDelete?: (path: string) => void;
+  onRename?: (oldPath: string, newPath: string) => void;
+  onAddAssetToTimeline?: (path: string) => void;
+}
+
+/**
+ * Compact row for font assets (no meaningful thumbnail; show ext badge + name).
+ */
+export function FontRow({
+  asset,
+  used,
+  onCopy,
+  isCopied,
+  onDelete,
+  onRename,
+  onAddAssetToTimeline,
+}: FontRowProps) {
+  const [contextMenu, setContextMenu] = useState<{ x: number; y: number } | null>(null);
+  const name = basename(asset);
+  const extension = ext(asset);
+
+  return (
+    <>
+      <div
+        draggable
+        onClick={() => onCopy(asset)}
+        onDragStart={(e) => writeAssetDragData(e, asset)}
+        onContextMenu={(e) => openAssetContextMenu(e, setContextMenu)}
+        className={`px-2.5 py-1.5 flex items-center gap-2.5 cursor-pointer transition-colors ${
+          isCopied
+            ? "bg-studio-accent/10 border-l-2 border-studio-accent"
+            : "border-l-2 border-transparent hover:bg-neutral-800/50"
+        }`}
+      >
+        <div className="w-[50px] h-[32px] rounded overflow-hidden bg-neutral-900 flex-shrink-0 flex items-center justify-center">
+          <span className="text-[9px] font-medium text-neutral-700">{extension}</span>
+        </div>
+        <div className="min-w-0 flex-1">
+          <span
+            className={`text-xs font-medium truncate block ${used ? "text-panel-text-1" : "text-panel-text-3"}`}
+          >
+            {name}
+          </span>
+          <div className="flex items-center gap-1.5">
+            <span className="text-[10px] text-neutral-600 truncate">{extension}</span>
+            {used && (
+              <span className="text-[9px] font-medium text-panel-accent bg-panel-accent/10 px-1.5 py-px rounded">
+                in use
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {contextMenu && (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          asset={asset}
+          onClose={() => setContextMenu(null)}
+          onCopy={onCopy}
+          onDelete={onDelete}
+          onRename={onRename}
+          onAddAtPlayhead={onAddAssetToTimeline}
+        />
+      )}
+    </>
+  );
+}

package/src/components/sidebar/AssetContextMenu.tsx

@@ -6,6 +6,7 @@ export function ContextMenu({
   onCopy,
   onDelete,
   onRename,
+  onAddAtPlayhead,
 }: {
   x: number;
   y: number;
@@ -14,6 +15,7 @@ export function ContextMenu({
   onCopy: (path: string) => void;
   onDelete?: (path: string) => void;
   onRename?: (oldPath: string, newPath: string) => void;
+  onAddAtPlayhead?: (path: string) => void;
 }) {
   return (
     <div
@@ -28,6 +30,19 @@ export function ContextMenu({
         className="absolute bg-neutral-900 border border-neutral-700 rounded-lg shadow-xl py-1 min-w-[140px] text-xs"
         style={{ left: x, top: y }}
       >
+        {onAddAtPlayhead && (
+          <button
+            type="button"
+            onClick={(e) => {
+              e.stopPropagation();
+              onAddAtPlayhead(asset);
+              onClose();
+            }}
+            className="w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 transition-colors"
+          >
+            Add at playhead
+          </button>
+        )}
         <button
           onClick={(e) => {
             e.stopPropagation();
@@ -65,33 +80,3 @@ export function ContextMenu({
     </div>
   );
 }
-
-export function DeleteConfirm({
-  name,
-  onConfirm,
-  onCancel,
-}: {
-  name: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-}) {
-  return (
-    <div className="px-2 py-1.5 bg-red-950/30 border-l-2 border-red-500 flex items-center justify-between gap-2">
-      <span className="text-[10px] text-red-400 truncate">Delete {name}?</span>
-      <div className="flex items-center gap-1 flex-shrink-0">
-        <button
-          onClick={onConfirm}
-          className="px-2 py-0.5 text-[10px] rounded bg-red-600 text-white hover:bg-red-500 transition-colors"
-        >
-          Delete
-        </button>
-        <button
-          onClick={onCancel}
-          className="px-2 py-0.5 text-[10px] rounded text-neutral-400 hover:text-neutral-200 transition-colors"
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
-  );
-}