@hyperframes/studio 0.6.0-alpha.8 → 0.6.0

package/src/hooks/usePreviewInteraction.ts

@@ -0,0 +1,153 @@
+import { useCallback } from "react";
+import { liveTime, usePlayerStore } from "../player";
+import {
+  getPreviewLocalPointer,
+  buildRasterClickSelectionContext,
+  pauseStudioPreviewPlayback,
+} from "../utils/studioPreviewHelpers";
+import { STUDIO_PREVIEW_SELECTION_ENABLED } from "../components/editor/manualEditingAvailability";
+import {
+  isLargeRasterDomEditSelection,
+  type DomEditSelection,
+} from "../components/editor/domEditing";
+import type { AgentModalAnchorPoint } from "../utils/studioHelpers";
+
+// ── Types ──
+
+export interface UsePreviewInteractionParams {
+  captionEditMode: boolean;
+  compositionLoading: boolean;
+  previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
+  activeCompPath: string | null;
+  showToast: (message: string, tone?: "error" | "info") => void;
+
+  // From useDomSelection
+  applyDomSelection: (
+    selection: DomEditSelection | null,
+    options?: { revealPanel?: boolean; additive?: boolean; preserveGroup?: boolean },
+  ) => void;
+  resolveDomSelectionFromPreviewPoint: (
+    clientX: number,
+    clientY: number,
+    options?: { preferClipAncestor?: boolean },
+  ) => DomEditSelection | null;
+  updateDomEditHoverSelection: (selection: DomEditSelection | null) => void;
+
+  // From useAskAgentModal
+  preloadAgentPromptSnippet: (selection: DomEditSelection) => Promise<void>;
+  setAgentPromptSelectionContext: (context: string | undefined) => void;
+  setAgentModalAnchorPoint: (point: AgentModalAnchorPoint | null) => void;
+  setAgentModalOpen: (open: boolean) => void;
+}
+
+// ── Hook ──
+
+export function usePreviewInteraction({
+  captionEditMode,
+  compositionLoading,
+  previewIframeRef,
+  showToast,
+  applyDomSelection,
+  resolveDomSelectionFromPreviewPoint,
+  updateDomEditHoverSelection,
+  preloadAgentPromptSnippet,
+  setAgentPromptSelectionContext,
+  setAgentModalAnchorPoint,
+  setAgentModalOpen,
+}: UsePreviewInteractionParams) {
+  const handlePreviewCanvasMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>, options?: { preferClipAncestor?: boolean }) => {
+      if (!STUDIO_PREVIEW_SELECTION_ENABLED || captionEditMode || compositionLoading) return;
+      const nextSelection = resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY, {
+        preferClipAncestor: options?.preferClipAncestor ?? false,
+      });
+      if (!nextSelection) {
+        if (!e.shiftKey) applyDomSelection(null, { revealPanel: false });
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      const localPointer = previewIframeRef.current
+        ? getPreviewLocalPointer(previewIframeRef.current, e.clientX, e.clientY)
+        : null;
+      applyDomSelection(nextSelection, { additive: e.shiftKey });
+      if (
+        !e.shiftKey &&
+        localPointer &&
+        isLargeRasterDomEditSelection(nextSelection, localPointer.viewport)
+      ) {
+        setAgentPromptSelectionContext(
+          buildRasterClickSelectionContext(nextSelection, localPointer),
+        );
+        setAgentModalAnchorPoint({ x: e.clientX, y: e.clientY });
+        void preloadAgentPromptSnippet(nextSelection);
+        setAgentModalOpen(true);
+      }
+    },
+    [
+      applyDomSelection,
+      captionEditMode,
+      compositionLoading,
+      preloadAgentPromptSnippet,
+      resolveDomSelectionFromPreviewPoint,
+      previewIframeRef,
+      setAgentModalAnchorPoint,
+      setAgentModalOpen,
+      setAgentPromptSelectionContext,
+    ],
+  );
+
+  const handlePreviewCanvasPointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>, options?: { preferClipAncestor?: boolean }) => {
+      if (!STUDIO_PREVIEW_SELECTION_ENABLED || captionEditMode || compositionLoading) {
+        updateDomEditHoverSelection(null);
+        return null;
+      }
+
+      const nextSelection = resolveDomSelectionFromPreviewPoint(e.clientX, e.clientY, {
+        preferClipAncestor: options?.preferClipAncestor ?? false,
+      });
+      updateDomEditHoverSelection(nextSelection);
+      return nextSelection;
+    },
+    [
+      captionEditMode,
+      compositionLoading,
+      resolveDomSelectionFromPreviewPoint,
+      updateDomEditHoverSelection,
+    ],
+  );
+
+  const handlePreviewCanvasPointerLeave = useCallback(() => {
+    updateDomEditHoverSelection(null);
+  }, [updateDomEditHoverSelection]);
+
+  const handleBlockedDomMove = useCallback(
+    (selection: DomEditSelection) => {
+      showToast(
+        selection.capabilities.reasonIfDisabled ??
+          "This element can't be adjusted directly from the preview.",
+        "info",
+      );
+    },
+    [showToast],
+  );
+
+  const handleDomManualDragStart = useCallback(() => {
+    const pausedTime = pauseStudioPreviewPlayback(previewIframeRef.current);
+    const playerStore = usePlayerStore.getState();
+    playerStore.setIsPlaying(false);
+    if (pausedTime != null) {
+      playerStore.setCurrentTime(pausedTime);
+      liveTime.notify(pausedTime);
+    }
+  }, [previewIframeRef]);
+
+  return {
+    handlePreviewCanvasMouseDown,
+    handlePreviewCanvasPointerMove,
+    handlePreviewCanvasPointerLeave,
+    handleBlockedDomMove,
+    handleDomManualDragStart,
+  };
+}

package/src/hooks/useRenderClipContent.ts

@@ -0,0 +1,124 @@
+import { useCallback, type ReactNode } from "react";
+import { createElement } from "react";
+import { CompositionThumbnail, VideoThumbnail } from "../player";
+import type { TimelineElement } from "../player";
+import { AudioWaveform } from "../player/components/AudioWaveform";
+import { getTimelineElementLabel } from "../utils/studioHelpers";
+
+interface UseRenderClipContentOptions {
+  projectIdRef: { current: string | null };
+  compIdToSrc: Map<string, string>;
+  activePreviewUrl: string | null;
+  effectiveTimelineDuration: number;
+}
+
+export function useRenderClipContent({
+  projectIdRef,
+  compIdToSrc,
+  activePreviewUrl,
+  effectiveTimelineDuration,
+}: UseRenderClipContentOptions) {
+  return useCallback(
+    (el: TimelineElement, style: { clip: string; label: string }): ReactNode => {
+      const pid = projectIdRef.current;
+      if (!pid) return null;
+
+      // Resolve composition source path using the compIdToSrc map
+      let compSrc = el.compositionSrc;
+      if (compSrc && compIdToSrc.size > 0) {
+        const resolved =
+          compIdToSrc.get(el.id) ||
+          compIdToSrc.get(compSrc.replace(/^compositions\//, "").replace(/\.html$/, ""));
+        if (resolved) compSrc = resolved;
+      }
+
+      // Composition clips — always use the comp's own preview URL for thumbnails.
+      // This renders the composition in isolation so we get clean frames
+      // instead of capturing the master at a time when the comp is fading in.
+      if (compSrc) {
+        return createElement(CompositionThumbnail, {
+          previewUrl: `/api/projects/${pid}/preview/comp/${compSrc}`,
+          label: getTimelineElementLabel(el),
+          labelColor: style.label,
+          accentColor: style.clip,
+          seekTime: 0,
+          duration: el.duration,
+        });
+      }
+
+      // When drilled into a composition, render all inner elements via
+      // CompositionThumbnail at their start time — most accurate visual.
+      if (activePreviewUrl && el.duration > 0) {
+        return createElement(CompositionThumbnail, {
+          previewUrl: activePreviewUrl,
+          label: getTimelineElementLabel(el),
+          labelColor: style.label,
+          accentColor: style.clip,
+          selector: el.selector,
+          selectorIndex: el.selectorIndex,
+          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 previewBase = `/api/projects/${pid}/preview/`;
+        const previewIdx = el.src?.startsWith("http") ? el.src.indexOf(previewBase) : -1;
+        const srcRelative = el.src
+          ? previewIdx !== -1
+            ? decodeURIComponent(el.src.slice(previewIdx + previewBase.length))
+            : el.src.startsWith("http")
+              ? null
+              : el.src
+          : null;
+        const audioUrl = srcRelative
+          ? `/api/projects/${pid}/preview/${srcRelative}`
+          : (el.src ?? "");
+        const waveformUrl = srcRelative
+          ? `/api/projects/${pid}/waveform/${srcRelative}`
+          : undefined;
+        return createElement(AudioWaveform, {
+          audioUrl,
+          waveformUrl,
+          label: getTimelineElementLabel(el),
+          labelColor: style.label,
+        });
+      }
+
+      if ((el.tag === "video" || el.tag === "img") && el.src) {
+        const mediaSrc = el.src.startsWith("http")
+          ? el.src
+          : `/api/projects/${pid}/preview/${el.src}`;
+        return createElement(VideoThumbnail, {
+          videoSrc: mediaSrc,
+          label: getTimelineElementLabel(el),
+          labelColor: style.label,
+          duration: el.duration,
+        });
+      }
+
+      if (htmlPreviewEligible) {
+        return createElement(CompositionThumbnail, {
+          previewUrl: `/api/projects/${pid}/preview`,
+          label: getTimelineElementLabel(el),
+          labelColor: style.label,
+          accentColor: style.clip,
+          selector: el.selector,
+          selectorIndex: el.selectorIndex,
+          seekTime: el.start,
+          duration: el.duration,
+        });
+      }
+
+      return null;
+    },
+    [projectIdRef, compIdToSrc, activePreviewUrl, effectiveTimelineDuration],
+  );
+}