@hyperframes/studio 0.4.17 → 0.4.18

package/src/player/components/Timeline.tsx

@@ -27,6 +27,7 @@ import {
   type TimelineTheme,
 } from "./timelineTheme";
 import { getTimelinePixelsPerSecond } from "./timelineZoom";
+import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
 
 /* ── Layout ─────────────────────────────────────────────────────── */
 const GUTTER = 32;
@@ -140,6 +141,70 @@ export function getTimelineCanvasHeight(trackCount: number): number {
   return RULER_H + Math.max(0, trackCount) * TRACK_H + TIMELINE_SCROLL_BUFFER;
 }
 
+export function shouldHandleTimelineDeleteKey(input: {
+  key: string;
+  metaKey?: boolean;
+  ctrlKey?: boolean;
+  altKey?: boolean;
+  target?: EventTarget | null;
+}): boolean {
+  if (input.key !== "Delete" && input.key !== "Backspace") return false;
+  if (input.metaKey || input.ctrlKey || input.altKey) return false;
+  const target =
+    input.target && typeof input.target === "object"
+      ? (input.target as {
+          tagName?: string;
+          isContentEditable?: boolean;
+          closest?: (selector: string) => Element | null;
+        })
+      : null;
+  if (target) {
+    const tag = target.tagName?.toLowerCase() ?? "";
+    if (target.isContentEditable) return false;
+    if (["input", "textarea", "select"].includes(tag)) return false;
+    if (typeof target.closest === "function" && target.closest("[contenteditable='true']")) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function getDefaultDroppedTrack(trackOrder: number[], rowIndex?: number): number {
+  if (trackOrder.length === 0) return 0;
+  if (rowIndex == null || rowIndex < 0) return trackOrder[0];
+  if (rowIndex >= trackOrder.length) {
+    return Math.max(...trackOrder) + 1;
+  }
+  return trackOrder[rowIndex] ?? trackOrder[trackOrder.length - 1] ?? 0;
+}
+
+export function resolveTimelineAssetDrop(
+  input: {
+    rectLeft: number;
+    rectTop: number;
+    scrollLeft: number;
+    scrollTop: number;
+    pixelsPerSecond: number;
+    duration: number;
+    trackHeight: number;
+    trackOrder: number[];
+  },
+  clientX: number,
+  clientY: number,
+): { start: number; track: number } {
+  const x = clientX - input.rectLeft + input.scrollLeft - GUTTER;
+  const y = clientY - input.rectTop + input.scrollTop - RULER_H;
+  const start = Math.max(
+    0,
+    Math.min(input.duration, Math.round((x / Math.max(input.pixelsPerSecond, 1)) * 100) / 100),
+  );
+  const rowIndex = Math.floor(y / Math.max(input.trackHeight, 1));
+  return {
+    start,
+    track: getDefaultDroppedTrack(input.trackOrder, rowIndex),
+  };
+}
+
 /* ── Component ──────────────────────────────────────────────────── */
 interface TimelineProps {
   /** Called when user seeks via ruler/track click or playhead drag */
@@ -154,8 +219,19 @@ interface TimelineProps {
   /** Optional overlay renderer for clips (e.g. badges, cursors) */
   renderClipOverlay?: (element: import("../store/playerStore").TimelineElement) => ReactNode;
   /** Called when files are dropped onto the empty timeline */
-  onFileDrop?: (files: File[]) => void;
+  onFileDrop?: (
+    files: File[],
+    placement?: { start: number; track: number },
+  ) => Promise<void> | void;
+  /** Called when an existing asset is dropped from the Assets tab */
+  onAssetDrop?: (
+    assetPath: string,
+    placement: { start: number; track: number },
+  ) => Promise<void> | void;
   /** Persist a clip move back into source HTML */
+  onDeleteElement?: (
+    element: import("../store/playerStore").TimelineElement,
+  ) => Promise<void> | void;
   onMoveElement?: (
     element: import("../store/playerStore").TimelineElement,
     updates: Pick<import("../store/playerStore").TimelineElement, "start" | "track">,
@@ -213,6 +289,8 @@ export const Timeline = memo(function Timeline({
   renderClipContent,
   renderClipOverlay,
   onFileDrop,
+  onAssetDrop,
+  onDeleteElement,
   onMoveElement,
   onResizeElement,
   onBlockedEditAttempt,
@@ -263,10 +341,13 @@ export const Timeline = memo(function Timeline({
   const resizingClipRef = useRef<ResizingClipState | null>(null);
   resizingClipRef.current = resizingClip;
   const blockedClipRef = useRef<BlockedClipState | null>(null);
+  const deleteInFlightRef = useRef(false);
   const onMoveElementRef = useRef(onMoveElement);
   onMoveElementRef.current = onMoveElement;
   const onResizeElementRef = useRef(onResizeElement);
   onResizeElementRef.current = onResizeElement;
+  const onDeleteElementRef = useRef(onDeleteElement);
+  onDeleteElementRef.current = onDeleteElement;
   const suppressClickRef = useRef(false);
   const [showPopover, setShowPopover] = useState(false);
   const [viewportWidth, setViewportWidth] = useState(0);
@@ -337,6 +418,12 @@ export const Timeline = memo(function Timeline({
     }
     return [...trackOrder, draggedClip.previewTrack].sort((a, b) => a - b);
   }, [draggedClip, trackOrder]);
+  const selectedElement = useMemo(
+    () => elements.find((element) => (element.key ?? element.id) === selectedElementId) ?? null,
+    [elements, selectedElementId],
+  );
+  const selectedElementRef = useRef<TimelineElement | null>(selectedElement);
+  selectedElementRef.current = selectedElement;
 
   // Calculate effective pixels per second
   // In fit mode, use clientWidth (excludes scrollbar) with a small padding
@@ -743,6 +830,28 @@ export const Timeline = memo(function Timeline({
     };
   });
 
+  useMountEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!shouldHandleTimelineDeleteKey(event)) return;
+      const selected = selectedElementRef.current;
+      const onDelete = onDeleteElementRef.current;
+      if (!selected || !onDelete || deleteInFlightRef.current) return;
+      event.preventDefault();
+      deleteInFlightRef.current = true;
+      suppressClickRef.current = true;
+      setShowPopover(false);
+      setRangeSelection(null);
+      Promise.resolve(onDelete(selected)).finally(() => {
+        deleteInFlightRef.current = false;
+        requestAnimationFrame(() => {
+          suppressClickRef.current = false;
+        });
+      });
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  });
+
   const handlePointerDown = useCallback(
     (e: React.PointerEvent) => {
       if (e.button !== 0) return;
@@ -833,6 +942,74 @@ export const Timeline = memo(function Timeline({
   );
 
   const [isDragOver, setIsDragOver] = useState(false);
+  const handleAssetDragOver = useCallback((e: React.DragEvent) => {
+    const hasFiles = e.dataTransfer.files.length > 0;
+    const hasAsset = Array.from(e.dataTransfer.types).includes(TIMELINE_ASSET_MIME);
+    if (!hasFiles && !hasAsset) return;
+    e.preventDefault();
+    if (hasAsset) {
+      e.dataTransfer.dropEffect = "copy";
+    }
+    setIsDragOver(true);
+  }, []);
+
+  const handleAssetDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      if (onFileDrop && e.dataTransfer.files.length > 0) {
+        const scroll = scrollRef.current;
+        const rect = scroll?.getBoundingClientRect();
+        const placement =
+          scroll && rect
+            ? resolveTimelineAssetDrop(
+                {
+                  rectLeft: rect.left,
+                  rectTop: rect.top,
+                  scrollLeft: scroll.scrollLeft,
+                  scrollTop: scroll.scrollTop,
+                  pixelsPerSecond: ppsRef.current,
+                  duration: durationRef.current,
+                  trackHeight: TRACK_H,
+                  trackOrder: trackOrderRef.current,
+                },
+                e.clientX,
+                e.clientY,
+              )
+            : undefined;
+        void onFileDrop(Array.from(e.dataTransfer.files), placement);
+        return;
+      }
+
+      const assetPayload = e.dataTransfer.getData(TIMELINE_ASSET_MIME);
+      if (!assetPayload || !onAssetDrop) return;
+      try {
+        const parsed = JSON.parse(assetPayload) as { path?: string };
+        if (!parsed.path) return;
+        const scroll = scrollRef.current;
+        const rect = scroll?.getBoundingClientRect();
+        if (!scroll || !rect) return;
+        const placement = resolveTimelineAssetDrop(
+          {
+            rectLeft: rect.left,
+            rectTop: rect.top,
+            scrollLeft: scroll.scrollLeft,
+            scrollTop: scroll.scrollTop,
+            pixelsPerSecond: ppsRef.current,
+            duration: durationRef.current,
+            trackHeight: TRACK_H,
+            trackOrder: trackOrderRef.current,
+          },
+          e.clientX,
+          e.clientY,
+        );
+        void onAssetDrop(parsed.path, placement);
+      } catch {
+        // ignore malformed drag payloads
+      }
+    },
+    [onAssetDrop, onFileDrop],
+  );
 
   if (!timelineReady || elements.length === 0) {
     return (
@@ -840,18 +1017,9 @@ export const Timeline = memo(function Timeline({
         className={`h-full border-t bg-[#0a0a0b] flex flex-col select-none transition-colors duration-150 ${
           isDragOver ? "border-studio-accent/50 bg-studio-accent/[0.03]" : "border-neutral-800/50"
         }`}
-        onDragOver={(e) => {
-          e.preventDefault();
-          setIsDragOver(true);
-        }}
+        onDragOver={handleAssetDragOver}
         onDragLeave={() => setIsDragOver(false)}
-        onDrop={(e) => {
-          e.preventDefault();
-          setIsDragOver(false);
-          if (onFileDrop && e.dataTransfer.files.length > 0) {
-            onFileDrop(Array.from(e.dataTransfer.files));
-          }
-        }}
+        onDrop={handleAssetDrop}
       >
         {/* Ruler */}
         <div
@@ -1015,6 +1183,9 @@ export const Timeline = memo(function Timeline({
       <div
         ref={scrollRef}
         className={`${zoomMode === "fit" ? "overflow-x-hidden" : "overflow-x-auto"} overflow-y-auto h-full`}
+        onDragOver={handleAssetDragOver}
+        onDragLeave={() => setIsDragOver(false)}
+        onDrop={handleAssetDrop}
         onPointerDown={handlePointerDown}
         onPointerMove={handlePointerMove}
         onPointerUp={handlePointerUp}

package/src/utils/timelineAssetDrop.test.ts

@@ -0,0 +1,80 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildTimelineFileDropPlacements,
+  buildTimelineAssetInsertHtml,
+  getTimelineAssetKind,
+  insertTimelineAssetIntoSource,
+  resolveTimelineAssetSrc,
+} from "./timelineAssetDrop";
+
+describe("getTimelineAssetKind", () => {
+  it("detects image, video, and audio assets", () => {
+    expect(getTimelineAssetKind("assets/photo.png")).toBe("image");
+    expect(getTimelineAssetKind("assets/clip.mp4")).toBe("video");
+    expect(getTimelineAssetKind("assets/music.wav")).toBe("audio");
+  });
+});
+
+describe("buildTimelineAssetInsertHtml", () => {
+  it("builds an image clip with explicit timing and track", () => {
+    expect(
+      buildTimelineAssetInsertHtml({
+        id: "photo_asset",
+        assetPath: "assets/photo.png",
+        kind: "image",
+        start: 1.25,
+        duration: 3,
+        track: 2,
+        zIndex: 4,
+      }),
+    ).toContain('img id="photo_asset"');
+  });
+
+  it("builds an audio clip without visual layout styles", () => {
+    const html = buildTimelineAssetInsertHtml({
+      id: "music_asset",
+      assetPath: "assets/music.wav",
+      kind: "audio",
+      start: 0.5,
+      duration: 5,
+      track: 0,
+      zIndex: 1,
+    });
+    expect(html).toContain("<audio");
+    expect(html).not.toContain("object-fit");
+  });
+});
+
+describe("resolveTimelineAssetSrc", () => {
+  it("keeps project-root asset paths for index.html", () => {
+    expect(resolveTimelineAssetSrc("index.html", "assets/photo.png")).toBe("assets/photo.png");
+  });
+
+  it("rewrites asset paths relative to sub-compositions", () => {
+    expect(resolveTimelineAssetSrc("compositions/scene-a.html", "assets/photo.png")).toBe(
+      "../assets/photo.png",
+    );
+  });
+});
+
+describe("buildTimelineFileDropPlacements", () => {
+  it("uses the dropped start and stacks multiple files onto successive tracks", () => {
+    expect(buildTimelineFileDropPlacements({ start: 1.5, track: 2 }, 3)).toEqual([
+      { start: 1.5, track: 2 },
+      { start: 1.5, track: 3 },
+      { start: 1.5, track: 4 },
+    ]);
+  });
+});
+
+describe("insertTimelineAssetIntoSource", () => {
+  it("appends the new asset inside the root composition", () => {
+    const source = `<!doctype html><html><body><div id="root" data-composition-id="main"></div></body></html>`;
+    const html = insertTimelineAssetIntoSource(
+      source,
+      '<img id="photo_asset" data-start="0" data-duration="3" />',
+    );
+
+    expect(html).toContain('<div id="root" data-composition-id="main"><img id="photo_asset"');
+  });
+});

package/src/utils/timelineAssetDrop.ts

@@ -0,0 +1,87 @@
+import { AUDIO_EXT, IMAGE_EXT, VIDEO_EXT } from "./mediaTypes";
+
+export const TIMELINE_ASSET_MIME = "application/x-hyperframes-asset";
+
+export type TimelineAssetKind = "image" | "video" | "audio";
+
+export function getTimelineAssetKind(assetPath: string): TimelineAssetKind | null {
+  if (IMAGE_EXT.test(assetPath)) return "image";
+  if (VIDEO_EXT.test(assetPath)) return "video";
+  if (AUDIO_EXT.test(assetPath)) return "audio";
+  return null;
+}
+
+export function buildTimelineAssetId(assetPath: string, existingIds: Iterable<string>): string {
+  const baseName = assetPath.split("/").pop() ?? "asset";
+  const normalized = baseName
+    .replace(/\.[^.]+$/, "")
+    .replace(/[^a-zA-Z0-9_-]+/g, "_")
+    .replace(/^_+|_+$/g, "")
+    .toLowerCase();
+  const baseId = normalized || "asset";
+  const ids = new Set(existingIds);
+  if (!ids.has(baseId)) return baseId;
+  let suffix = 2;
+  while (ids.has(`${baseId}_${suffix}`)) suffix += 1;
+  return `${baseId}_${suffix}`;
+}
+
+export function resolveTimelineAssetSrc(targetPath: string, assetPath: string): string {
+  const targetDir = targetPath.includes("/")
+    ? targetPath.slice(0, targetPath.lastIndexOf("/"))
+    : "";
+  if (!targetDir) return assetPath;
+
+  const fromParts = targetDir.split("/").filter(Boolean);
+  const toParts = assetPath.split("/").filter(Boolean);
+  while (fromParts.length > 0 && toParts.length > 0 && fromParts[0] === toParts[0]) {
+    fromParts.shift();
+    toParts.shift();
+  }
+
+  const up = fromParts.map(() => "..");
+  const relative = [...up, ...toParts].join("/");
+  return relative || assetPath.split("/").pop() || assetPath;
+}
+
+export function buildTimelineFileDropPlacements(
+  placement: { start: number; track: number },
+  count: number,
+): Array<{ start: number; track: number }> {
+  return Array.from({ length: Math.max(0, count) }, (_, index) => ({
+    start: placement.start,
+    track: placement.track + index,
+  }));
+}
+
+export function buildTimelineAssetInsertHtml(input: {
+  id: string;
+  assetPath: string;
+  kind: TimelineAssetKind;
+  start: number;
+  duration: number;
+  track: number;
+  zIndex: number;
+}): string {
+  const sharedAttrs = `id="${input.id}" class="clip" src="${input.assetPath}" data-start="${input.start}" data-duration="${input.duration}" data-track-index="${input.track}"`;
+
+  if (input.kind === "image") {
+    return `<img ${sharedAttrs} style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: ${input.zIndex}" />`;
+  }
+
+  if (input.kind === "video") {
+    return `<video ${sharedAttrs} muted playsinline style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: ${input.zIndex}"></video>`;
+  }
+
+  return `<audio ${sharedAttrs} style="z-index: ${input.zIndex}"></audio>`;
+}
+
+export function insertTimelineAssetIntoSource(source: string, assetHtml: string): string {
+  const rootOpenTag = /<[^>]*data-composition-id="[^"]+"[^>]*>/i;
+  const match = rootOpenTag.exec(source);
+  if (!match || match.index == null) {
+    throw new Error("No composition root found in target source");
+  }
+  const insertAt = match.index + match[0].length;
+  return `${source.slice(0, insertAt)}${assetHtml}${source.slice(insertAt)}`;
+}