@hyperframes/studio 0.6.31 → 0.6.33

package/src/components/nle/NLELayout.tsx

@@ -13,6 +13,7 @@ import type { TimelineElement } from "../../player";
 import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
 import { NLEPreview } from "./NLEPreview";
 import { CompositionBreadcrumb } from "./CompositionBreadcrumb";
+import { usePreviewBlockDrop } from "./usePreviewBlockDrop";
 import { useCompositionStack } from "./useCompositionStack";
 import {
   TIMELINE_TOGGLE_SHORTCUT_LABEL,
@@ -54,6 +55,10 @@ interface NLELayoutProps {
     blockName: string,
     placement: Pick<TimelineElement, "start" | "track">,
   ) => Promise<void> | void;
+  onPreviewBlockDrop?: (
+    blockName: string,
+    position: { left: number; top: number },
+  ) => Promise<void> | void;
   /** Persist timeline move actions back into source HTML */
   onMoveElement?: (
     element: TimelineElement,
@@ -107,6 +112,7 @@ export const NLELayout = memo(function NLELayout({
   onDeleteElement,
   onAssetDrop,
   onBlockDrop,
+  onPreviewBlockDrop,
   onMoveElement,
   onResizeElement,
   onBlockedEditAttempt,
@@ -131,10 +137,26 @@ export const NLELayout = memo(function NLELayout({
     usePlayerStore.getState().reset();
   }
 
+  const stageRefForDrop = useRef<HTMLDivElement | null>(null);
+  const handleStageRef = useCallback((ref: React.RefObject<HTMLDivElement | null>) => {
+    stageRefForDrop.current = ref.current;
+  }, []);
+
+  const {
+    isDragOver: previewDragOver,
+    handleDragOver: handlePreviewDragOver,
+    handleDragLeave: handlePreviewDragLeave,
+    handleDrop: handlePreviewDrop,
+  } = usePreviewBlockDrop({
+    portrait,
+    stageRef: stageRefForDrop as React.RefObject<HTMLDivElement | null>,
+    onBlockDrop: onPreviewBlockDrop,
+  });
+
   // Lightweight reload: change iframe src instead of destroying the Player.
   // refreshPlayer() saves the seek position and appends a cache-busting _t
-  // param, avoiding the full web-component teardown + crossfade that the
-  // key-based path uses.
+  // param — the Player instance stays alive so the adapter is available for
+  // saveSeekPosition() to read the current time before the reload.
   const prevRefreshKeyRef = useRef(refreshKey);
   useEffect(() => {
     if (refreshKey === prevRefreshKeyRef.current) return;
@@ -344,7 +366,13 @@ export const NLELayout = memo(function NLELayout({
     >
       {/* Preview + player controls */}
       <div className="flex-1 min-h-0 flex flex-col">
-        <div className="flex-1 min-h-0 relative" data-preview-pan-surface="true">
+        <div
+          className="flex-1 min-h-0 relative"
+          data-preview-pan-surface="true"
+          onDragOver={handlePreviewDragOver}
+          onDragLeave={handlePreviewDragLeave}
+          onDrop={handlePreviewDrop}
+        >
           <NLEPreview
             projectId={projectId}
             iframeRef={iframeRef}
@@ -352,9 +380,12 @@ export const NLELayout = memo(function NLELayout({
             onCompositionLoadingChange={setCompositionLoading}
             portrait={portrait}
             directUrl={directUrl}
-            refreshKey={refreshKey}
             suppressLoadingOverlay={hasLoadedOnceRef.current}
+            onStageRef={handleStageRef}
           />
+          {previewDragOver && (
+            <div className="absolute inset-2 z-40 rounded-lg border-2 border-dashed border-studio-accent/50 bg-studio-accent/[0.04] pointer-events-none" />
+          )}
           {!isFullscreen && previewOverlay}
         </div>
         <div className="bg-neutral-950 border-t border-neutral-800/50 flex-shrink-0">

package/src/components/nle/NLEPreview.test.ts

@@ -112,17 +112,9 @@ function renderPreview() {
 }
 
 describe("getPreviewPlayerKey", () => {
-  it("keeps the same player identity when only refreshKey changes", () => {
-    expect(
-      getPreviewPlayerKey({
-        projectId: "timeline-edit-playground",
-        refreshKey: 1,
-      }),
-    ).toBe(
-      getPreviewPlayerKey({
-        projectId: "timeline-edit-playground",
-        refreshKey: 2,
-      }),
+  it("uses projectId as key when no directUrl", () => {
+    expect(getPreviewPlayerKey({ projectId: "timeline-edit-playground" })).toBe(
+      "timeline-edit-playground",
     );
   });
 

package/src/components/nle/NLEPreview.tsx

@@ -12,7 +12,6 @@ import {
   type PreviewZoomState,
 } from "./previewZoom";
 import { readStudioUiPreferences, writeStudioUiPreferences } from "../../utils/studioUiPreferences";
-
 interface NLEPreviewProps {
   projectId: string;
   iframeRef: Ref<HTMLIFrameElement>;
@@ -20,8 +19,8 @@ interface NLEPreviewProps {
   onCompositionLoadingChange?: (loading: boolean) => void;
   portrait?: boolean;
   directUrl?: string;
-  refreshKey?: number;
   suppressLoadingOverlay?: boolean;
+  onStageRef?: (ref: React.RefObject<HTMLDivElement | null>) => void;
 }
 
 export function getPreviewPlayerKey({
@@ -30,7 +29,6 @@ export function getPreviewPlayerKey({
 }: {
   projectId: string;
   directUrl?: string;
-  refreshKey?: number;
 }): string {
   return directUrl ?? projectId;
 }
@@ -91,16 +89,16 @@ export const NLEPreview = memo(function NLEPreview({
   onCompositionLoadingChange,
   portrait,
   directUrl,
-  refreshKey,
   suppressLoadingOverlay,
+  onStageRef,
 }: NLEPreviewProps) {
-  const baseKey = getPreviewPlayerKey({ projectId, directUrl, refreshKey });
-  const prevRefreshKeyRef = useRef(refreshKey);
+  const activeKey = getPreviewPlayerKey({ projectId, directUrl });
   const viewportRef = useRef<HTMLDivElement>(null);
   const stageRef = useRef<HTMLDivElement>(null);
-  const [retiringKey, setRetiringKey] = useState<string | null>(null);
+  useEffect(() => {
+    onStageRef?.(stageRef);
+  }, [onStageRef]);
   const [stageSize, setStageSize] = useState(() => resolvePreviewStageSize(0, 0, portrait));
-  const retiringTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const zoomRef = useRef<PreviewZoomState>(loadInitialZoom());
   const [settledZoom, setSettledZoom] = useState<PreviewZoomState>(() => zoomRef.current);
@@ -120,7 +118,6 @@ export const NLEPreview = memo(function NLEPreview({
     return () => {
       if (settleTimerRef.current) clearTimeout(settleTimerRef.current);
       if (hudTimerRef.current) clearTimeout(hudTimerRef.current);
-      if (retiringTimerRef.current) clearTimeout(retiringTimerRef.current);
     };
   }, []);
 
@@ -205,14 +202,6 @@ export const NLEPreview = memo(function NLEPreview({
     [applyTransform],
   );
 
-  if (refreshKey !== prevRefreshKeyRef.current) {
-    const oldKey = `${baseKey}:${prevRefreshKeyRef.current ?? 0}`;
-    prevRefreshKeyRef.current = refreshKey;
-    setRetiringKey(oldKey);
-  }
-
-  const activeKey = `${baseKey}:${refreshKey ?? 0}`;
-
   const applyInitialZoom = useCallback(() => {
     const z = zoomRef.current;
     if (Math.abs(z.zoomPercent - 100) > 0.5 || Math.abs(z.panX) > 0.1 || Math.abs(z.panY) > 0.1) {
@@ -220,16 +209,6 @@ export const NLEPreview = memo(function NLEPreview({
     }
   }, [writeTransform]);
 
-  const handleNewPlayerLoad = () => {
-    onIframeLoad();
-    applyInitialZoom();
-    if (retiringTimerRef.current) clearTimeout(retiringTimerRef.current);
-    retiringTimerRef.current = setTimeout(() => {
-      setRetiringKey(null);
-      retiringTimerRef.current = null;
-    }, 160);
-  };
-
   useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
@@ -412,14 +391,14 @@ export const NLEPreview = memo(function NLEPreview({
             }}
             data-testid="preview-zoom-stage"
           >
-            {retiringKey && (
+            {directUrl?.includes("/components/") && (
               <Player
-                key={retiringKey}
-                projectId={directUrl ? undefined : projectId}
-                directUrl={directUrl}
+                key={`backdrop-${projectId}`}
+                projectId={projectId}
                 onLoad={() => {}}
                 portrait={portrait}
-                style={{ position: "absolute", inset: 0, zIndex: 0, opacity: 1 }}
+                suppressLoadingOverlay
+                style={{ position: "absolute", inset: 0, zIndex: 0 }}
               />
             )}
             <Player
@@ -427,18 +406,18 @@ export const NLEPreview = memo(function NLEPreview({
               ref={iframeRef}
               projectId={directUrl ? undefined : projectId}
               directUrl={directUrl}
-              onLoad={
-                retiringKey
-                  ? handleNewPlayerLoad
-                  : () => {
-                      onIframeLoad();
-                      applyInitialZoom();
-                    }
-              }
+              onLoad={() => {
+                onIframeLoad();
+                applyInitialZoom();
+              }}
               onCompositionLoadingChange={onCompositionLoadingChange}
               portrait={portrait}
-              style={retiringKey ? { position: "absolute", inset: 0, zIndex: 1 } : undefined}
               suppressLoadingOverlay={suppressLoadingOverlay}
+              style={
+                directUrl?.includes("/components/")
+                  ? { position: "absolute", inset: 0, zIndex: 1 }
+                  : undefined
+              }
             />
           </div>
         </div>

package/src/components/nle/usePreviewBlockDrop.ts

@@ -0,0 +1,109 @@
+import { useCallback, useState, type RefObject } from "react";
+import { TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
+
+interface UsePreviewBlockDropOptions {
+  portrait?: boolean;
+  stageRef: RefObject<HTMLDivElement | null>;
+  onBlockDrop?: (blockName: string, position: { left: number; top: number }) => void;
+}
+
+interface BlockDropPayload {
+  name: string;
+  dimensions?: { width: number; height: number };
+}
+
+function parseBlockPayload(raw: string): BlockDropPayload | null {
+  try {
+    const parsed = JSON.parse(raw) as {
+      name?: string;
+      dimensions?: { width: number; height: number };
+    };
+    return parsed.name ? (parsed as BlockDropPayload) : null;
+  } catch {
+    return null;
+  }
+}
+
+function resolveCompositionPosition(
+  clientX: number,
+  clientY: number,
+  stageRect: DOMRect,
+  portrait: boolean | undefined,
+): { left: number; top: number } | null {
+  if (stageRect.width === 0 || stageRect.height === 0) return null;
+
+  const normalizedX = (clientX - stageRect.left) / stageRect.width;
+  const normalizedY = (clientY - stageRect.top) / stageRect.height;
+
+  const compWidth = portrait ? 1080 : 1920;
+  const compHeight = portrait ? 1920 : 1080;
+
+  return {
+    left: Math.max(0, Math.min(normalizedX * compWidth, compWidth)),
+    top: Math.max(0, Math.min(normalizedY * compHeight, compHeight)),
+  };
+}
+
+function centerBlockAtPosition(
+  pos: { left: number; top: number },
+  block: BlockDropPayload,
+): { left: number; top: number } {
+  const blockW = block.dimensions?.width ?? 0;
+  const blockH = block.dimensions?.height ?? 0;
+  return {
+    left: Math.max(0, pos.left - blockW / 2),
+    top: Math.max(0, pos.top - blockH / 2),
+  };
+}
+
+export function usePreviewBlockDrop({
+  portrait,
+  stageRef,
+  onBlockDrop,
+}: UsePreviewBlockDropOptions) {
+  const [isDragOver, setIsDragOver] = useState(false);
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent) => {
+      if (!onBlockDrop) return;
+      if (!e.dataTransfer.types.includes(TIMELINE_BLOCK_MIME)) return;
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "copy";
+      setIsDragOver(true);
+    },
+    [onBlockDrop],
+  );
+
+  const handleDragLeave = useCallback(() => {
+    setIsDragOver(false);
+  }, []);
+
+  // fallow-ignore-next-line complexity
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      setIsDragOver(false);
+      if (!onBlockDrop) return;
+
+      const payload = e.dataTransfer.getData(TIMELINE_BLOCK_MIME);
+      if (!payload) return;
+      e.preventDefault();
+
+      const block = parseBlockPayload(payload);
+      const stage = stageRef.current;
+      if (!block || !stage) return;
+
+      const pos = resolveCompositionPosition(
+        e.clientX,
+        e.clientY,
+        stage.getBoundingClientRect(),
+        portrait,
+      );
+      if (!pos) return;
+
+      onBlockDrop(block.name, centerBlockAtPosition(pos, block));
+    },
+    [onBlockDrop, stageRef, portrait],
+  );
+
+  return { isDragOver, handleDragOver, handleDragLeave, handleDrop };
+}