refactor(studio): one owner for the selected node lookup, and scrub indexes only audio

Author: miguel-heygen

packages/studio/src/components/editor/domEditingElement.ts

@@ -314,6 +314,19 @@ export function findElementForSelection(
   return findAll(selection.selector)[selection.selectorIndex ?? 0] ?? null;
 }
 
+// The selected node while mounted, else its copy in the selection's own file (ids repeat across files), else any copy.
+export function findPreviewNode(
+  doc: Document | null | undefined,
+  el: DomEditSelection,
+): Element | null {
+  if (!doc) return null;
+  if (el.element?.isConnected && el.element.ownerDocument === doc) return el.element;
+  return (
+    findElementForSelection(doc, el) ??
+    findElementForSelection(doc, { ...el, sourceFile: undefined })
+  );
+}
+
 // fallow-ignore-next-line complexity
 export function findElementForTimelineElement(
   doc: Document,

packages/studio/src/components/editor/gsapLivePreview.ts

@@ -1,5 +1,5 @@
 import type { DomEditSelection } from "./domEditingTypes";
-import { findElementForSelection } from "./domEditingElement";
+import { findPreviewNode } from "./domEditingElement";
 
 /**
  * Build the "live preview" callback the 3D-transform sub-view fires while a
@@ -9,20 +9,6 @@ import { findElementForSelection } from "./domEditingElement";
  * Extracted so the identical closure exists once — shared by the legacy
  * PropertyPanel Layout section and the flat Layout group (PropertyPanelFlat).
  */
-// The selected node while it is still mounted; after a reload, the copy in the selection's own file (hf-ids and ids
-// repeat across flattened sub-compositions), then anywhere.
-export function findPreviewNode(
-  doc: Document | null | undefined,
-  el: DomEditSelection,
-): Element | null {
-  if (!doc) return null;
-  if (el.element?.isConnected && el.element.ownerDocument === doc) return el.element;
-  return (
-    findElementForSelection(doc, el) ??
-    findElementForSelection(doc, { ...el, sourceFile: undefined })
-  );
-}
-
 export function createGsapLivePreview(iframeRef: { readonly current: HTMLIFrameElement | null }) {
   return (el: DomEditSelection, props: Record<string, number>) => {
     const iframe = iframeRef.current;

packages/studio/src/components/editor/propertyPanelHelpers.ts

@@ -4,7 +4,7 @@ import type { DomEditSelection } from "./domEditing";
 import type { GsapAnimation } from "@hyperframes/parsers/gsap-parser";
 import type { TimelineElement } from "../../player";
 import { roundToCenti } from "../../utils/rounding";
-import { findPreviewNode } from "./gsapLivePreview";
+import { findPreviewNode } from "./domEditingElement";
 
 export type {
   BackgroundRemovalProgress,

packages/studio/src/hooks/useGestureRecording.ts

@@ -80,7 +80,6 @@ function readBasePosition(element: HTMLElement, iframeEl: HTMLIFrameElement): Ba
 function connectGsapRuntime(
   element: HTMLElement,
   iframeEl: HTMLIFrameElement,
-  selector: string | null,
   elementEndTime: number | undefined,
 ): GsapRuntime | null {
   try {
@@ -97,7 +96,7 @@ function connectGsapRuntime(
           ([key, value]) => key !== "__proxied" && typeof value?.seek === "function",
         )?.[1] ?? null)
       : null;
-    if (win?.gsap?.set && tl?.seek && selector) {
+    if (win?.gsap?.set && tl?.seek && element.id) {
       const tlDuration = tl.duration();
       return {
         timeline: tl,
@@ -322,8 +321,7 @@ export function useGestureRecording() {
       r.scale = computeIframeScale(iframeEl);
 
       // --- Phase 3: Connect to the iframe GSAP runtime ---
-      const selector = element.id ? `#${element.id}` : null;
-      r.runtime = connectGsapRuntime(element, iframeEl, selector, elementEndTime);
+      r.runtime = connectGsapRuntime(element, iframeEl, elementEndTime);
       // Clear the optimistic path offset only while a live runtime owns the
       // preview. releaseRuntimePreview restores it on every exit path.
       if (r.runtime && (base.cssOffX || base.cssOffY)) {

packages/studio/src/player/lib/timelineElementHelpers.ts

@@ -462,13 +462,21 @@ export type PreviewTarget = Pick<TimelineElement, "hfId" | "domId" | "id" | "sou
 
 /** Finds a row's preview element by `data-hf-id`, then id, preferring one in the row's own file: both repeat across
  * files. Indexes the document once, so a pass over every row costs one scan. */
-export function previewElementFinder(doc: Document): (target: PreviewTarget) => Element | null {
+export function previewElementFinder(
+  doc: Document,
+  selector = "[data-hf-id], [id]",
+): (target: PreviewTarget) => Element | null {
   const byKey = new Map<string, Element[]>();
-  const add = (key: string, node: Element) => byKey.set(key, [...(byKey.get(key) ?? []), node]);
-  for (const node of doc.querySelectorAll("[data-hf-id], [id]")) {
+  const add = (key: string, node: Element) => {
+    const nodes = byKey.get(key);
+    if (nodes) nodes.push(node);
+    else byKey.set(key, [node]);
+  };
+  for (const node of doc.querySelectorAll(selector)) {
     const hfId = node.getAttribute("data-hf-id");
+    const id = node.getAttribute("id");
     if (hfId) add(`hf:${hfId}`, node);
-    if (node.id) add(`id:${node.id}`, node);
+    if (id) add(`id:${id}`, node);
   }
   return (target) => {
     const matches = [

packages/studio/src/player/lib/timelineIframeHelpers.test.ts

@@ -9,7 +9,6 @@ import {
   stopScrubPreviewAudio,
 } from "./timelineIframeHelpers";
 import type { IframeWindow } from "./playbackTypes";
-import type { TimelineElement } from "../store/playerStore";
 
 function makeDoc(html: string): Document {
   const d = document.implementation.createHTMLDocument();

packages/studio/src/player/lib/timelineIframeHelpers.ts

@@ -218,9 +218,9 @@ let scrubStopTimer: ReturnType<typeof setTimeout> | null = null;
 let scrubPrevMuted: boolean | null = null;
 let scrubPrevVolume: number | null = null;
 
-// Resolve the SAME element the store identified as music: prefer its id, then
-// the role attribute, and only fall back to the first <audio> (which could be a
-// voiceover, so the id hint matters).
+// Resolve the SAME element the store identified as music: prefer that row's own
+// element, then the role attribute, and only fall back to the first <audio>
+// (which could be a voiceover, so the row hint matters).
 /**
  * `doc` is the preview iframe's document, so its `<audio>` nodes are instances of
  * the IFRAME's `HTMLAudioElement`, never this module's. `instanceof
@@ -239,7 +239,7 @@ function isAudioNode(node: Element | null): node is HTMLAudioElement {
 
 function resolveScrubAudioEl(doc: Document, music?: PreviewTarget | null): HTMLAudioElement | null {
   if (music) {
-    const byId = previewElementFinder(doc)(music);
+    const byId = previewElementFinder(doc, "audio")(music);
     if (isAudioNode(byId)) return byId;
   }
   return (