npm - @hyperframes/studio - Versions diffs - 0.4.12 → 0.4.13-alpha.1 - Mend

@hyperframes/studio 0.4.12 → 0.4.13-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (33) hide show

package/dist/assets/hyperframes-player-BOs_kypk.js +198 -0
package/dist/assets/index-BKkR67xb.css +1 -0
package/dist/assets/index-rN5doSq1.js +93 -0
package/dist/index.html +2 -2
package/package.json +4 -4
package/src/App.tsx +289 -11
package/src/components/nle/NLELayout.tsx +24 -7
package/src/components/nle/NLEPreview.test.ts +32 -0
package/src/components/nle/NLEPreview.tsx +12 -1
package/src/player/components/CompositionThumbnail.tsx +94 -17
package/src/player/components/EditModal.tsx +48 -29
package/src/player/components/Player.tsx +5 -2
package/src/player/components/PlayerControls.test.ts +20 -0
package/src/player/components/PlayerControls.tsx +12 -1
package/src/player/components/Timeline.test.ts +44 -1
package/src/player/components/Timeline.tsx +686 -169
package/src/player/components/TimelineClip.tsx +112 -16
package/src/player/components/timelineEditing.test.ts +310 -0
package/src/player/components/timelineEditing.ts +213 -0
package/src/player/components/timelineTheme.test.ts +56 -0
package/src/player/components/timelineTheme.ts +141 -0
package/src/player/components/timelineZoom.test.ts +62 -0
package/src/player/components/timelineZoom.ts +38 -0
package/src/player/hooks/useTimelinePlayer.test.ts +96 -0
package/src/player/hooks/useTimelinePlayer.ts +313 -59
package/src/player/store/playerStore.test.ts +30 -12
package/src/player/store/playerStore.ts +23 -9
package/src/types/hyperframes-player.d.ts +1 -0
package/src/utils/sourcePatcher.test.ts +84 -0
package/src/utils/sourcePatcher.ts +143 -0
package/dist/assets/hyperframes-player-5iD9BZnx.js +0 -198
package/dist/assets/index-CVDXfFQ6.js +0 -93
package/dist/assets/index-jmDaI2F7.css +0 -1

package/dist/index.html CHANGED Viewed

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-CVDXfFQ6.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-jmDaI2F7.css">
+    <script type="module" crossorigin src="/assets/index-rN5doSq1.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BKkR67xb.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.4.12",
+  "version": "0.4.13-alpha.1",
   "description": "",
   "repository": {
     "type": "git",
@@ -32,8 +32,8 @@
     "@phosphor-icons/react": "^2.1.10",
     "codemirror": "^6.0.1",
     "motion": "^12.38.0",
-    "@hyperframes/core": "0.4.12",
-    "@hyperframes/player": "0.4.12"
+    "@hyperframes/core": "0.4.13-alpha.1",
+    "@hyperframes/player": "0.4.13-alpha.1"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
@@ -47,7 +47,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.4.12"
+    "@hyperframes/producer": "0.4.13-alpha.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/App.tsx CHANGED Viewed

@@ -5,7 +5,7 @@ import { SourceEditor } from "./components/editor/SourceEditor";
 import { LeftSidebar } from "./components/sidebar/LeftSidebar";
 import { RenderQueue } from "./components/renders/RenderQueue";
 import { useRenderQueue } from "./components/renders/useRenderQueue";
-import { CompositionThumbnail, VideoThumbnail } from "./player";
+import { CompositionThumbnail, VideoThumbnail, usePlayerStore } from "./player";
 import { AudioWaveform } from "./player/components/AudioWaveform";
 import type { TimelineElement } from "./player";
 import { LintModal } from "./components/LintModal";
@@ -18,6 +18,15 @@ import { CaptionTimeline } from "./captions/components/CaptionTimeline";
 import { useCaptionStore } from "./captions/store";
 import { useCaptionSync } from "./captions/hooks/useCaptionSync";
 import { parseCaptionComposition } from "./captions/parser";
+import { applyPatchByTarget, readAttributeByTarget } from "./utils/sourcePatcher";
+import {
+  buildTrackZIndexMap,
+  formatTimelineAttributeNumber,
+} from "./player/components/timelineEditing";
+import {
+  getNextTimelineZoomPercent,
+  getTimelineZoomPercent,
+} from "./player/components/timelineZoom";
 interface EditingFile {
   path: string;
@@ -186,7 +195,7 @@ export function StudioApp() {
   }, [captionHasSelection, captionEditMode]);
   const [globalDragOver, setGlobalDragOver] = useState(false);
   const [uploadToast, setUploadToast] = useState<string | null>(null);
-  const [timelineVisible, setTimelineVisible] = useState(false);
+  const [timelineVisible, setTimelineVisible] = useState(true);
   const dragCounterRef = useRef(0);
   const panelDragRef = useRef<{
     side: "left" | "right";
@@ -198,6 +207,23 @@ export function StudioApp() {
   const activePreviewUrl = activeCompPath
     ? `/api/projects/${projectId}/preview/comp/${activeCompPath}`
     : null;
+  const zoomMode = usePlayerStore((s) => s.zoomMode);
+  const manualZoomPercent = usePlayerStore((s) => s.manualZoomPercent);
+  const setZoomMode = usePlayerStore((s) => s.setZoomMode);
+  const setManualZoomPercent = usePlayerStore((s) => s.setManualZoomPercent);
+  const timelineElements = usePlayerStore((s) => s.elements);
+  const timelineDuration = usePlayerStore((s) => s.duration);
+  const effectiveTimelineDuration = useMemo(() => {
+    const maxEnd =
+      timelineElements.length > 0
+        ? Math.max(...timelineElements.map((element) => element.start + element.duration))
+        : 0;
+    return Math.max(timelineDuration, maxEnd);
+  }, [timelineDuration, timelineElements]);
+  const displayedTimelineZoomPercent = useMemo(
+    () => getTimelineZoomPercent(zoomMode, manualZoomPercent),
+    [zoomMode, manualZoomPercent],
+  );
   const renderClipContent = useCallback(
     (el: TimelineElement, style: { clip: string; label: string }): ReactNode => {
@@ -222,6 +248,8 @@ export function StudioApp() {
             previewUrl={`/api/projects/${pid}/preview/comp/${compSrc}`}
             label={el.id || el.tag}
             labelColor={style.label}
+            accentColor={style.clip}
+            selector={el.selector}
             seekTime={0}
             duration={el.duration}
           />
@@ -236,12 +264,20 @@ export function StudioApp() {
             previewUrl={activePreviewUrl}
             label={el.id || el.tag}
             labelColor={style.label}
+            accentColor={style.clip}
+            selector={el.selector}
             seekTime={el.start}
             duration={el.duration}
           />
         );
       }
+      const htmlPreviewEligible =
+        el.duration > 0 &&
+        effectiveTimelineDuration > 0 &&
+        el.duration < effectiveTimelineDuration * 0.92 &&
+        !/(backdrop|background|overlay|scrim|mask)/i.test(el.id);
       // Audio clips — waveform visualization
       if (el.tag === "audio") {
         const audioUrl = el.src
@@ -268,14 +304,14 @@ export function StudioApp() {
         );
       }
-      // HTML scene elements — render from the master preview at the scene's time
-      if (el.tag === "div" && el.duration > 0) {
-        const previewUrl = `/api/projects/${pid}/preview`;
+      if (htmlPreviewEligible) {
         return (
           <CompositionThumbnail
-            previewUrl={previewUrl}
+            previewUrl={`/api/projects/${pid}/preview`}
             label={el.id || el.tag}
             labelColor={style.label}
+            accentColor={style.clip}
+            selector={el.selector}
             seekTime={el.start}
             duration={el.duration}
           />
@@ -284,7 +320,53 @@ export function StudioApp() {
       return null;
     },
-    [compIdToSrc, activePreviewUrl],
+    [compIdToSrc, activePreviewUrl, effectiveTimelineDuration],
+  );
+  const timelineToolbar = (
+    <div className="flex items-center justify-between px-3 py-2 border-b border-neutral-800/40 bg-neutral-950/96">
+      <div className="text-[10px] font-medium uppercase tracking-[0.16em] text-neutral-500">
+        Timeline
+      </div>
+      <div className="flex items-center gap-1">
+        <button
+          type="button"
+          onClick={() => setZoomMode("fit")}
+          className={`h-7 px-2.5 rounded-md border text-[11px] font-medium transition-colors ${
+            zoomMode === "fit"
+              ? "border-studio-accent/30 bg-studio-accent/10 text-studio-accent"
+              : "border-neutral-800 text-neutral-400 hover:border-neutral-700 hover:text-neutral-200"
+          }`}
+          title="Fit timeline to width"
+        >
+          Fit
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            setZoomMode("manual");
+            setManualZoomPercent(getNextTimelineZoomPercent("out", zoomMode, manualZoomPercent));
+          }}
+          className="h-7 w-7 rounded-md border border-neutral-800 text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200"
+          title="Zoom out"
+        >
+          -
+        </button>
+        <div className="min-w-[58px] text-center text-[10px] font-medium tabular-nums text-neutral-500">
+          {`${displayedTimelineZoomPercent}%`}
+        </div>
+        <button
+          type="button"
+          onClick={() => {
+            setZoomMode("manual");
+            setManualZoomPercent(getNextTimelineZoomPercent("in", zoomMode, manualZoomPercent));
+          }}
+          className="h-7 w-7 rounded-md border border-neutral-800 text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200"
+          title="Zoom in"
+        >
+          +
+        </button>
+      </div>
+    </div>
   );
   const [lintModal, setLintModal] = useState<LintFinding[] | null>(null);
   const [consoleErrors, setConsoleErrors] = useState<LintFinding[] | null>(null);
@@ -378,6 +460,195 @@ export function StudioApp() {
     }, 600);
   }, []);
+  const handleTimelineElementMove = useCallback(
+    async (element: TimelineElement, updates: Pick<TimelineElement, "start" | "track">) => {
+      const pid = projectIdRef.current;
+      if (!pid) throw new Error("No active project");
+      const targetPath = element.sourceFile || activeCompPath || "index.html";
+      const response = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`);
+      if (!response.ok) {
+        throw new Error(`Failed to read ${targetPath}`);
+      }
+      const data = (await response.json()) as { content?: string };
+      const originalContent = data.content;
+      if (typeof originalContent !== "string") {
+        throw new Error(`Missing file contents for ${targetPath}`);
+      }
+      const patchTarget = element.domId
+        ? { id: element.domId, selector: element.selector, selectorIndex: element.selectorIndex }
+        : element.selector
+          ? { selector: element.selector, selectorIndex: element.selectorIndex }
+          : null;
+      if (!patchTarget) {
+        throw new Error(`Timeline element ${element.id} is missing a patchable target`);
+      }
+      const resolvedTargetPath = targetPath || "index.html";
+      const relevantElements = timelineElements
+        .map((timelineElement) =>
+          (timelineElement.key ?? timelineElement.id) === (element.key ?? element.id)
+            ? { ...timelineElement, start: updates.start, track: updates.track }
+            : timelineElement,
+        )
+        .filter(
+          (timelineElement) =>
+            (timelineElement.sourceFile || activeCompPath || "index.html") === resolvedTargetPath,
+        );
+      const trackZIndices = buildTrackZIndexMap(
+        relevantElements.map((timelineElement) => timelineElement.track),
+      );
+      let patchedContent = applyPatchByTarget(originalContent, patchTarget, {
+        type: "attribute",
+        property: "start",
+        value: formatTimelineAttributeNumber(updates.start),
+      });
+      patchedContent = applyPatchByTarget(patchedContent, patchTarget, {
+        type: "attribute",
+        property: "track-index",
+        value: String(updates.track),
+      });
+      for (const timelineElement of relevantElements) {
+        const elementTarget = timelineElement.domId
+          ? {
+              id: timelineElement.domId,
+              selector: timelineElement.selector,
+              selectorIndex: timelineElement.selectorIndex,
+            }
+          : timelineElement.selector
+            ? {
+                selector: timelineElement.selector,
+                selectorIndex: timelineElement.selectorIndex,
+              }
+            : null;
+        if (!elementTarget) continue;
+        const nextZIndex = trackZIndices.get(timelineElement.track);
+        if (nextZIndex == null) continue;
+        patchedContent = applyPatchByTarget(patchedContent, elementTarget, {
+          type: "inline-style",
+          property: "z-index",
+          value: String(nextZIndex),
+        });
+      }
+      if (patchedContent === originalContent) {
+        throw new Error(`Unable to patch timeline element ${element.id} in ${targetPath}`);
+      }
+      const saveResponse = await fetch(
+        `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`,
+        {
+          method: "PUT",
+          headers: { "Content-Type": "text/plain" },
+          body: patchedContent,
+        },
+      );
+      if (!saveResponse.ok) {
+        throw new Error(`Failed to save ${targetPath}`);
+      }
+      if (editingPathRef.current === targetPath) {
+        setEditingFile({ path: targetPath, content: patchedContent });
+      }
+      setRefreshKey((k) => k + 1);
+    },
+    [activeCompPath, timelineElements],
+  );
+  const handleTimelineElementResize = useCallback(
+    async (
+      element: TimelineElement,
+      updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
+    ) => {
+      const pid = projectIdRef.current;
+      if (!pid) throw new Error("No active project");
+      const targetPath = element.sourceFile || activeCompPath || "index.html";
+      const response = await fetch(`/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`);
+      if (!response.ok) {
+        throw new Error(`Failed to read ${targetPath}`);
+      }
+      const data = (await response.json()) as { content?: string };
+      const originalContent = data.content;
+      if (typeof originalContent !== "string") {
+        throw new Error(`Missing file contents for ${targetPath}`);
+      }
+      const patchTarget = element.domId
+        ? { id: element.domId, selector: element.selector, selectorIndex: element.selectorIndex }
+        : element.selector
+          ? { selector: element.selector, selectorIndex: element.selectorIndex }
+          : null;
+      if (!patchTarget) {
+        throw new Error(`Timeline element ${element.id} is missing a patchable target`);
+      }
+      const playbackStartAttrName =
+        element.playbackStartAttr === "playback-start" ? "playback-start" : "media-start";
+      const currentPlaybackStartValue =
+        readAttributeByTarget(originalContent, patchTarget, "playback-start") ??
+        readAttributeByTarget(originalContent, patchTarget, "media-start");
+      const currentPlaybackStart =
+        currentPlaybackStartValue != null ? parseFloat(currentPlaybackStartValue) : undefined;
+      const trimDelta = updates.start - element.start;
+      const fallbackPlaybackStart =
+        updates.playbackStart == null &&
+        trimDelta !== 0 &&
+        Number.isFinite(currentPlaybackStart) &&
+        currentPlaybackStart != null
+          ? Math.max(0, currentPlaybackStart + trimDelta * Math.max(element.playbackRate ?? 1, 0.1))
+          : undefined;
+      const nextPlaybackStart = updates.playbackStart ?? fallbackPlaybackStart;
+      let patchedContent = originalContent;
+      patchedContent = applyPatchByTarget(patchedContent, patchTarget, {
+        type: "attribute",
+        property: "start",
+        value: formatTimelineAttributeNumber(updates.start),
+      });
+      patchedContent = applyPatchByTarget(patchedContent, patchTarget, {
+        type: "attribute",
+        property: "duration",
+        value: formatTimelineAttributeNumber(updates.duration),
+      });
+      if (nextPlaybackStart != null) {
+        patchedContent = applyPatchByTarget(patchedContent, patchTarget, {
+          type: "attribute",
+          property: playbackStartAttrName,
+          value: formatTimelineAttributeNumber(nextPlaybackStart),
+        });
+      }
+      if (patchedContent === originalContent) {
+        throw new Error(`Unable to patch timeline element ${element.id} in ${targetPath}`);
+      }
+      const saveResponse = await fetch(
+        `/api/projects/${pid}/files/${encodeURIComponent(targetPath)}`,
+        {
+          method: "PUT",
+          headers: { "Content-Type": "text/plain" },
+          body: patchedContent,
+        },
+      );
+      if (!saveResponse.ok) {
+        throw new Error(`Failed to save ${targetPath}`);
+      }
+      if (editingPathRef.current === targetPath) {
+        setEditingFile({ path: targetPath, content: patchedContent });
+      }
+      setRefreshKey((k) => k + 1);
+    },
+    [activeCompPath],
+  );
   // ── File Management Handlers ──
   const refreshFileTree = useCallback(async () => {
@@ -780,12 +1051,14 @@ export function StudioApp() {
         {/* Left resize handle */}
         {!leftCollapsed && (
           <div
-            className="w-1 flex-shrink-0 bg-neutral-800 hover:bg-studio-accent cursor-col-resize transition-colors active:bg-studio-accent/80"
+            className="group w-2 flex-shrink-0 cursor-col-resize flex items-center justify-center"
             style={{ touchAction: "none" }}
             onPointerDown={(e) => handlePanelResizeStart("left", e)}
             onPointerMove={handlePanelResizeMove}
             onPointerUp={handlePanelResizeEnd}
-          />
+          >
+            <div className="h-[52px] w-px bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
+          </div>
         )}
         {/* Center: Preview */}
@@ -794,7 +1067,10 @@ export function StudioApp() {
             projectId={projectId}
             refreshKey={refreshKey}
             activeCompositionPath={activeCompPath}
+            timelineToolbar={timelineToolbar}
             renderClipContent={renderClipContent}
+            onMoveElement={handleTimelineElementMove}
+            onResizeElement={handleTimelineElementResize}
             onCompIdToSrcChange={setCompIdToSrc}
             onCompositionChange={(compPath) => {
               // Sync activeCompPath when user drills down via timeline double-click
@@ -875,12 +1151,14 @@ export function StudioApp() {
         {!rightCollapsed && (
           <>
             <div
-              className="w-1 flex-shrink-0 bg-neutral-800 hover:bg-studio-accent cursor-col-resize transition-colors active:bg-studio-accent/80"
+              className="group w-2 flex-shrink-0 cursor-col-resize flex items-center justify-center"
               style={{ touchAction: "none" }}
               onPointerDown={(e) => handlePanelResizeStart("right", e)}
               onPointerMove={handlePanelResizeMove}
               onPointerUp={handlePanelResizeEnd}
-            />
+            >
+              <div className="h-[52px] w-px bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
+            </div>
             <div
               className="flex flex-col border-l border-neutral-800 bg-neutral-900 flex-shrink-0"
               style={{ width: rightWidth }}

package/src/components/nle/NLELayout.tsx CHANGED Viewed

@@ -27,6 +27,15 @@ interface NLELayoutProps {
     element: TimelineElement,
     style: { clip: string; label: string },
   ) => ReactNode;
+  /** Persist timeline move actions back into source HTML */
+  onMoveElement?: (
+    element: TimelineElement,
+    updates: Pick<TimelineElement, "start" | "track">,
+  ) => Promise<void> | void;
+  onResizeElement?: (
+    element: TimelineElement,
+    updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
+  ) => Promise<void> | void;
   /** Exposes the compIdToSrc map for parent components (e.g., useRenderClipContent) */
   onCompIdToSrcChange?: (map: Map<string, string>) => void;
   /** Whether the timeline panel is visible (default: true) */
@@ -50,6 +59,8 @@ export const NLELayout = memo(function NLELayout({
   onIframeRef,
   onCompositionChange,
   renderClipContent,
+  onMoveElement,
+  onResizeElement,
   onCompIdToSrcChange,
   timelineVisible,
   onToggleTimeline,
@@ -59,6 +70,7 @@ export const NLELayout = memo(function NLELayout({
     togglePlay,
     seek,
     onIframeLoad: baseOnIframeLoad,
+    refreshPlayer,
     saveSeekPosition,
   } = useTimelinePlayer();
@@ -72,12 +84,13 @@ export const NLELayout = memo(function NLELayout({
     usePlayerStore.getState().reset();
   }
-  // Preserve seek position when refreshKey changes (iframe will remount via key prop).
+  // Refresh the existing iframe in place when source files change.
   const prevRefreshKeyRef = useRef(refreshKey);
-  if (refreshKey !== prevRefreshKeyRef.current) {
+  useEffect(() => {
+    if (refreshKey === prevRefreshKeyRef.current) return;
     prevRefreshKeyRef.current = refreshKey;
-    saveSeekPosition();
-  }
+    refreshPlayer();
+  }, [refreshKey, refreshPlayer]);
   // Wrap onIframeLoad to also notify parent of iframe ref
   const onIframeLoad = useCallback(() => {
@@ -351,18 +364,20 @@ export const NLELayout = memo(function NLELayout({
         <>
           {/* Resize divider */}
           <div
-            className="h-1 flex-shrink-0 bg-neutral-800 hover:bg-studio-accent cursor-row-resize transition-colors active:bg-studio-accent/80 z-10"
+            className="group h-2 flex-shrink-0 cursor-row-resize flex items-center justify-center z-10"
             style={{ touchAction: "none" }}
             onPointerDown={handleDividerPointerDown}
             onPointerMove={handleDividerPointerMove}
             onPointerUp={handleDividerPointerUp}
-          />
+          >
+            <div className="h-px w-full bg-white/10 transition-colors group-hover:bg-white/16 group-active:bg-white/22" />
+          </div>
           {/* Timeline section — fixed height, resizable */}
           <div className="flex flex-col flex-shrink-0" style={{ height: timelineH }}>
             {/* Timeline tracks */}
             <div
-              className="flex-1 min-h-0 overflow-y-auto bg-neutral-950"
+              className="flex-1 min-h-0 overflow-hidden bg-neutral-950"
               onDoubleClick={(e) => {
                 if ((e.target as HTMLElement).closest("[data-clip]")) return;
                 if (compositionStack.length > 1) {
@@ -375,6 +390,8 @@ export const NLELayout = memo(function NLELayout({
                 onSeek={seek}
                 onDrillDown={handleDrillDown}
                 renderClipContent={renderClipContent}
+                onMoveElement={onMoveElement}
+                onResizeElement={onResizeElement}
               />
             </div>
             {timelineFooter && <div className="flex-shrink-0">{timelineFooter}</div>}

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

@@ -0,0 +1,32 @@
+import { describe, expect, it } from "vitest";
+import { getPreviewPlayerKey } from "./NLEPreview";
+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("switches identity when drilling into a different directUrl", () => {
+    expect(
+      getPreviewPlayerKey({
+        projectId: "timeline-edit-playground",
+        directUrl: "/api/projects/timeline-edit-playground/preview",
+      }),
+    ).not.toBe(
+      getPreviewPlayerKey({
+        projectId: "timeline-edit-playground",
+        directUrl: "/api/projects/timeline-edit-playground/preview/comp/compositions/intro.html",
+      }),
+    );
+  });
+});

package/src/components/nle/NLEPreview.tsx CHANGED Viewed

@@ -10,6 +10,17 @@ interface NLEPreviewProps {
   refreshKey?: number;
 }
+export function getPreviewPlayerKey({
+  projectId,
+  directUrl,
+}: {
+  projectId: string;
+  directUrl?: string;
+  refreshKey?: number;
+}): string {
+  return directUrl ?? projectId;
+}
 export const NLEPreview = memo(function NLEPreview({
   projectId,
   iframeRef,
@@ -18,7 +29,7 @@ export const NLEPreview = memo(function NLEPreview({
   directUrl,
   refreshKey,
 }: NLEPreviewProps) {
-  const playerKey = `${directUrl ?? projectId}_${refreshKey ?? 0}`;
+  const playerKey = getPreviewPlayerKey({ projectId, directUrl, refreshKey });
   return (
     <div className="flex flex-col h-full min-h-0">