@hyperframes/studio 0.4.12 → 0.4.13-alpha.1

package/src/player/hooks/useTimelinePlayer.ts

@@ -61,6 +61,50 @@ function wrapTimeline(tl: TimelineLike): PlaybackAdapter {
   };
 }
 
+function resolveMediaElement(el: Element): HTMLMediaElement | HTMLImageElement | null {
+  if (el instanceof HTMLMediaElement || el instanceof HTMLImageElement) return el;
+  const candidate = el.querySelector("video, audio, img");
+  return candidate instanceof HTMLMediaElement || candidate instanceof HTMLImageElement
+    ? candidate
+    : null;
+}
+
+function applyMediaMetadataFromElement(entry: TimelineElement, el: Element): void {
+  const mediaStartAttr = el.getAttribute("data-playback-start")
+    ? "playback-start"
+    : el.getAttribute("data-media-start")
+      ? "media-start"
+      : undefined;
+  const mediaStartValue =
+    el.getAttribute("data-playback-start") ?? el.getAttribute("data-media-start");
+  if (mediaStartValue != null) {
+    const playbackStart = parseFloat(mediaStartValue);
+    if (Number.isFinite(playbackStart)) entry.playbackStart = playbackStart;
+  }
+  if (mediaStartAttr) entry.playbackStartAttr = mediaStartAttr;
+
+  const mediaEl = resolveMediaElement(el);
+  if (!mediaEl) return;
+
+  entry.tag = mediaEl.tagName.toLowerCase();
+  const src = mediaEl.getAttribute("src");
+  if (src) entry.src = src;
+
+  if (!(mediaEl instanceof HTMLMediaElement)) return;
+
+  const sourceDurationAttr =
+    el.getAttribute("data-source-duration") ?? mediaEl.getAttribute("data-source-duration");
+  const sourceDuration = sourceDurationAttr ? parseFloat(sourceDurationAttr) : mediaEl.duration;
+  if (Number.isFinite(sourceDuration) && sourceDuration > 0) {
+    entry.sourceDuration = sourceDuration;
+  }
+
+  const playbackRate = mediaEl.defaultPlaybackRate;
+  if (Number.isFinite(playbackRate) && playbackRate > 0) {
+    entry.playbackRate = playbackRate;
+  }
+}
+
 /**
  * Parse [data-start] elements from a Document into TimelineElement[].
  * Shared helper — used by onIframeLoad fallback, handleMessage, and enrichMissingCompositions.
@@ -78,37 +122,60 @@ function parseTimelineFromDOM(doc: Document, rootDuration: number): TimelineElem
     if (startStr == null) return;
     const start = parseFloat(startStr);
     if (isNaN(start)) return;
+    if (Number.isFinite(rootDuration) && rootDuration > 0 && start >= rootDuration) return;
 
     const tagLower = el.tagName.toLowerCase();
     let dur = 0;
     const durStr = el.getAttribute("data-duration");
     if (durStr != null) dur = parseFloat(durStr);
     if (isNaN(dur) || dur <= 0) dur = Math.max(0, rootDuration - start);
+    if (Number.isFinite(rootDuration) && rootDuration > 0) {
+      dur = Math.min(dur, Math.max(0, rootDuration - start));
+    }
+    if (!Number.isFinite(dur) || dur <= 0) return;
 
     const trackStr = el.getAttribute("data-track-index");
     const track = trackStr != null ? parseInt(trackStr, 10) : trackCounter++;
+    const compId = el.getAttribute("data-composition-id");
+    const selector = getTimelineElementSelector(el);
+    const sourceFile = getTimelineElementSourceFile(el);
+    const selectorIndex = getTimelineElementSelectorIndex(doc, el, selector);
+    const id = el.id || compId || el.className?.split(" ")[0] || tagLower;
     const entry: TimelineElement = {
-      id: el.id || el.className?.split(" ")[0] || tagLower,
+      id,
+      key: buildTimelineElementKey({
+        id,
+        fallbackIndex: els.length,
+        domId: el.id || undefined,
+        selector,
+        selectorIndex,
+        sourceFile,
+      }),
       tag: tagLower,
       start,
       duration: dur,
       track: isNaN(track) ? 0 : track,
+      domId: el.id || undefined,
+      selector,
+      selectorIndex,
+      sourceFile,
     };
 
-    // Media elements
-    if (tagLower === "video" || tagLower === "audio" || tagLower === "img") {
-      const src = el.getAttribute("src");
+    const mediaEl = resolveMediaElement(el);
+    if (mediaEl) {
+      if (mediaEl.tagName === "IMG") {
+        entry.tag = "img";
+      }
+      const src = mediaEl.getAttribute("src");
       if (src) entry.src = src;
-      const ms = el.getAttribute("data-media-start");
-      if (ms) entry.playbackStart = parseFloat(ms);
-      const vol = el.getAttribute("data-volume");
+      const vol = el.getAttribute("data-volume") ?? mediaEl.getAttribute("data-volume");
       if (vol) entry.volume = parseFloat(vol);
+      applyMediaMetadataFromElement(entry, el);
     }
 
     // Sub-compositions
     const compSrc =
       el.getAttribute("data-composition-src") || el.getAttribute("data-composition-file");
-    const compId = el.getAttribute("data-composition-id");
     if (compSrc) {
       entry.compositionSrc = compSrc;
     } else if (compId && compId !== rootComp?.getAttribute("data-composition-id")) {
@@ -126,6 +193,104 @@ function parseTimelineFromDOM(doc: Document, rootDuration: number): TimelineElem
   return els;
 }
 
+function getTimelineElementSelector(el: Element): string | undefined {
+  if (el instanceof HTMLElement && el.id) return `#${el.id}`;
+  const compId = el.getAttribute("data-composition-id");
+  if (compId) return `[data-composition-id="${compId}"]`;
+  if (el instanceof HTMLElement) {
+    const firstClass = el.className.split(/\s+/).find(Boolean);
+    if (firstClass) return `.${firstClass}`;
+  }
+  return undefined;
+}
+
+function getTimelineElementSourceFile(el: Element): string | undefined {
+  const ownerRoot = el.parentElement?.closest("[data-composition-id]");
+  return (
+    ownerRoot?.getAttribute("data-composition-file") ??
+    ownerRoot?.getAttribute("data-composition-src") ??
+    undefined
+  );
+}
+
+function getTimelineElementSelectorIndex(
+  doc: Document,
+  el: Element,
+  selector: string | undefined,
+): number | undefined {
+  if (!selector || selector.startsWith("#") || selector.startsWith("[data-composition-id=")) {
+    return undefined;
+  }
+
+  try {
+    const matches = Array.from(doc.querySelectorAll(selector));
+    const matchIndex = matches.indexOf(el);
+    return matchIndex >= 0 ? matchIndex : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function buildTimelineElementKey(params: {
+  id: string;
+  fallbackIndex: number;
+  domId?: string;
+  selector?: string;
+  selectorIndex?: number;
+  sourceFile?: string;
+}): string {
+  const scope = params.sourceFile ?? "index.html";
+  if (params.domId) return `${scope}#${params.domId}`;
+  if (params.selector) return `${scope}:${params.selector}:${params.selectorIndex ?? 0}`;
+  return `${scope}:${params.id}:${params.fallbackIndex}`;
+}
+
+function findTimelineDomNode(doc: Document, id: string): Element | null {
+  return (
+    doc.getElementById(id) ??
+    doc.querySelector(`[data-composition-id="${id}"]`) ??
+    doc.querySelector(`.${id}`) ??
+    null
+  );
+}
+
+export function resolveStandaloneRootCompositionSrc(iframeSrc: string): string | undefined {
+  const compPathMatch = iframeSrc.match(/\/preview\/comp\/(.+?)(?:\?|$)/);
+  return compPathMatch ? decodeURIComponent(compPathMatch[1]) : undefined;
+}
+
+export function buildStandaloneRootTimelineElement(params: {
+  compositionId: string;
+  tagName: string;
+  rootDuration: number;
+  iframeSrc: string;
+  selector?: string;
+  selectorIndex?: number;
+}): TimelineElement | null {
+  if (!Number.isFinite(params.rootDuration) || params.rootDuration <= 0) return null;
+
+  const compositionSrc = resolveStandaloneRootCompositionSrc(params.iframeSrc);
+
+  return {
+    id: params.compositionId,
+    key: buildTimelineElementKey({
+      id: params.compositionId,
+      fallbackIndex: 0,
+      selector: params.selector,
+      selectorIndex: params.selectorIndex,
+      sourceFile: compositionSrc,
+    }),
+    tag: params.tagName.toLowerCase() || "div",
+    start: 0,
+    duration: params.rootDuration,
+    track: 0,
+    compositionSrc,
+    selector: params.selector,
+    selectorIndex: params.selectorIndex,
+    sourceFile: compositionSrc,
+  };
+}
+
 function normalizePreviewViewport(doc: Document, win: Window): void {
   if (doc.documentElement) {
     doc.documentElement.style.overflow = "hidden";
@@ -212,6 +377,29 @@ export function resolveIframe(el: Element | null): HTMLIFrameElement | null {
   return el.shadowRoot?.querySelector("iframe") ?? el.querySelector("iframe") ?? null;
 }
 
+export function mergeTimelineElementsPreservingDowngrades(
+  currentElements: TimelineElement[],
+  nextElements: TimelineElement[],
+  currentDuration: number,
+  nextDuration: number,
+): TimelineElement[] {
+  const safeCurrentDuration = Number.isFinite(currentDuration) ? currentDuration : 0;
+  const safeNextDuration = Number.isFinite(nextDuration) ? nextDuration : 0;
+
+  if (
+    currentElements.length === 0 ||
+    nextElements.length >= currentElements.length ||
+    safeNextDuration > safeCurrentDuration
+  ) {
+    return nextElements;
+  }
+
+  const nextIds = new Set(nextElements.map((element) => element.id));
+  const preserved = currentElements.filter((element) => !nextIds.has(element.id));
+  if (preserved.length === 0) return nextElements;
+  return [...nextElements, ...preserved];
+}
+
 export function useTimelinePlayer() {
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
   const rafRef = useRef<number>(0);
@@ -224,6 +412,24 @@ export function useTimelinePlayer() {
   const { setIsPlaying, setCurrentTime, setDuration, setTimelineReady, setElements } =
     usePlayerStore.getState();
 
+  const syncTimelineElements = useCallback(
+    (elements: TimelineElement[], nextDuration?: number) => {
+      const state = usePlayerStore.getState();
+      const mergedElements = mergeTimelineElementsPreservingDowngrades(
+        state.elements,
+        elements,
+        state.duration,
+        nextDuration ?? state.duration,
+      );
+      setElements(mergedElements);
+      if (Number.isFinite(nextDuration) && (nextDuration ?? 0) > 0) {
+        setDuration(nextDuration ?? 0);
+      }
+      setTimelineReady(true);
+    },
+    [setElements, setTimelineReady, setDuration],
+  );
+
   const getAdapter = useCallback((): PlaybackAdapter | null => {
     try {
       const iframe = iframeRef.current;
@@ -363,14 +569,35 @@ export function useTimelinePlayer() {
       const filtered = data.clips.filter(
         (clip) => !clip.parentCompositionId || !clipCompositionIds.has(clip.parentCompositionId),
       );
-      const els: TimelineElement[] = filtered.map((clip) => {
+      const els: TimelineElement[] = filtered.map((clip, index) => {
+        let hostEl: Element | null = null;
+        const id = clip.id || clip.label || clip.tagName || "element";
         const entry: TimelineElement = {
-          id: clip.id || clip.label || clip.tagName || "element",
+          id,
           tag: clip.tagName || clip.kind,
           start: clip.start,
           duration: clip.duration,
           track: clip.track,
         };
+        try {
+          const iframeDoc = iframeRef.current?.contentDocument;
+          if (iframeDoc && entry.id) {
+            hostEl = findTimelineDomNode(iframeDoc, entry.id);
+          }
+        } catch {
+          /* cross-origin */
+        }
+        if (hostEl) {
+          const iframeDoc = iframeRef.current?.contentDocument;
+          entry.domId = hostEl.id || undefined;
+          entry.selector = getTimelineElementSelector(hostEl);
+          entry.selectorIndex =
+            iframeDoc && entry.selector
+              ? getTimelineElementSelectorIndex(iframeDoc, hostEl, entry.selector)
+              : undefined;
+          entry.sourceFile = getTimelineElementSourceFile(hostEl);
+          applyMediaMetadataFromElement(entry, hostEl);
+        }
         if (clip.assetUrl) entry.src = clip.assetUrl;
         if (clip.kind === "composition" && clip.compositionId) {
           // The bundler renames data-composition-src to data-composition-file
@@ -382,7 +609,7 @@ export function useTimelinePlayer() {
             try {
               const iframeDoc = iframeRef.current?.contentDocument;
               hostEl =
-                iframeDoc?.querySelector(`[data-composition-id="${clip.compositionId}"]`) ?? null;
+                iframeDoc?.querySelector(`[data-composition-id="${clip.compositionId}"]`) ?? hostEl;
               resolvedSrc =
                 hostEl?.getAttribute("data-composition-src") ??
                 hostEl?.getAttribute("data-composition-file") ??
@@ -401,32 +628,48 @@ export function useTimelinePlayer() {
               entry.tag = "video";
             }
           }
+          if (hostEl) {
+            const iframeDoc = iframeRef.current?.contentDocument;
+            entry.domId = hostEl.id || undefined;
+            entry.selector = getTimelineElementSelector(hostEl);
+            entry.selectorIndex =
+              iframeDoc && entry.selector
+                ? getTimelineElementSelectorIndex(iframeDoc, hostEl, entry.selector)
+                : undefined;
+            entry.sourceFile = getTimelineElementSourceFile(hostEl);
+          }
         }
+        entry.key = buildTimelineElementKey({
+          id,
+          fallbackIndex: index,
+          domId: entry.domId,
+          selector: entry.selector,
+          selectorIndex: entry.selectorIndex,
+          sourceFile: entry.sourceFile,
+        });
         return entry;
       });
-      // Don't downgrade: if we already have more elements with a longer duration,
-      // skip updates that would show fewer clips (transient runtime state).
-      const currentElements = usePlayerStore.getState().elements;
-      const currentDuration = usePlayerStore.getState().duration;
       const rawDuration = data.durationInFrames / 30;
       // Clamp non-finite or absurdly large durations — the runtime can emit
       // Infinity when it detects a loop-inflated GSAP timeline without an
       // explicit data-duration on the root composition.
       const newDuration = Number.isFinite(rawDuration) && rawDuration < 7200 ? rawDuration : 0;
-      if (currentElements.length > els.length && newDuration <= currentDuration) {
-        return; // skip transient downgrade
-      }
-      setElements(els);
-      // Ensure duration covers the furthest clip end so fit-zoom shows everything
-      if (els.length > 0) {
-        const maxEnd = Math.max(...els.map((e) => e.start + e.duration));
-        const effectiveDur = Math.max(newDuration, maxEnd);
-        if (Number.isFinite(effectiveDur) && effectiveDur > currentDuration)
-          setDuration(effectiveDur);
+      const effectiveDuration = newDuration > 0 ? newDuration : usePlayerStore.getState().duration;
+      const clampedEls =
+        effectiveDuration > 0
+          ? els
+              .filter((element) => element.start < effectiveDuration)
+              .map((element) => ({
+                ...element,
+                duration: Math.min(element.duration, effectiveDuration - element.start),
+              }))
+              .filter((element) => element.duration > 0)
+          : els;
+      if (clampedEls.length > 0) {
+        syncTimelineElements(clampedEls, newDuration > 0 ? newDuration : undefined);
       }
-      if (els.length > 0) setTimelineReady(true);
     },
-    [setElements, setTimelineReady, setDuration],
+    [syncTimelineElements],
   );
 
   /**
@@ -504,17 +747,39 @@ export function useTimelinePlayer() {
         }
         if (!Number.isFinite(dur) || dur <= 0) return;
         if (!Number.isFinite(start)) start = 0;
+        const rootDuration = usePlayerStore.getState().duration;
+        if (Number.isFinite(rootDuration) && rootDuration > 0) {
+          if (start >= rootDuration) return;
+          dur = Math.min(dur, Math.max(0, rootDuration - start));
+          if (dur <= 0) return;
+        }
 
         const trackStr = el.getAttribute("data-track-index");
         const track = trackStr != null ? parseInt(trackStr, 10) : 0;
         const compSrc =
           el.getAttribute("data-composition-src") || el.getAttribute("data-composition-file");
+        const selector = getTimelineElementSelector(el);
+        const sourceFile = getTimelineElementSourceFile(el);
+        const selectorIndex = getTimelineElementSelectorIndex(doc, el, selector);
+        const id = el.id || compId;
         const entry: TimelineElement = {
-          id: el.id || compId,
+          id,
+          key: buildTimelineElementKey({
+            id,
+            fallbackIndex: missing.length,
+            domId: el.id || undefined,
+            selector,
+            selectorIndex,
+            sourceFile,
+          }),
           tag: el.tagName.toLowerCase(),
           start,
           duration: dur,
           track: isNaN(track) ? 0 : track,
+          domId: el.id || undefined,
+          selector,
+          selectorIndex,
+          sourceFile,
         };
         if (compSrc) {
           entry.compositionSrc = compSrc;
@@ -551,13 +816,12 @@ export function useTimelinePlayer() {
         // Dedup: ensure no missing element duplicates an existing one
         const finalIds = new Set(updatedEls.map((e) => e.id));
         const dedupedMissing = missing.filter((m) => !finalIds.has(m.id));
-        setElements([...updatedEls, ...dedupedMissing]);
-        setTimelineReady(true);
+        syncTimelineElements([...updatedEls, ...dedupedMissing]);
       }
     } catch (err) {
       console.warn("[useTimelinePlayer] enrichMissingCompositions failed", err);
     }
-  }, [setElements, setTimelineReady]);
+  }, [syncTimelineElements]);
 
   const onIframeLoad = useCallback(() => {
     unmutePreviewMedia(iframeRef.current);
@@ -613,8 +877,7 @@ export function useTimelinePlayer() {
             // Fallback: parse data-start elements directly from DOM (raw HTML without runtime)
             const els = parseTimelineFromDOM(doc, adapter.getDuration());
             if (els.length > 0) {
-              setElements(els);
-              setTimelineReady(true);
+              syncTimelineElements(els);
             }
           }
 
@@ -626,27 +889,18 @@ export function useTimelinePlayer() {
             const rootComp = doc.querySelector("[data-composition-id]");
             const rootDuration = adapter.getDuration();
             if (rootComp && rootDuration > 0) {
-              const rootId = rootComp.getAttribute("data-composition-id") || "composition";
-              // Derive compositionSrc from the iframe URL for thumbnail rendering.
-              // URL pattern: /api/projects/{id}/preview/comp/{path}
-              const iframeSrc = iframe?.src || "";
-              const compPathMatch = iframeSrc.match(/\/preview\/comp\/(.+?)(?:\?|$)/);
-              const compositionSrc = compPathMatch
-                ? decodeURIComponent(compPathMatch[1])
-                : undefined;
-              // Always show the root composition as a single clip — guarantees
-              // the timeline is never empty when a valid composition is loaded.
-              setElements([
-                {
-                  id: rootId,
-                  tag: (rootComp as HTMLElement).tagName?.toLowerCase() || "div",
-                  start: 0,
-                  duration: rootDuration,
-                  track: 0,
-                  compositionSrc,
-                },
-              ]);
-              setTimelineReady(true);
+              const fallbackElement = buildStandaloneRootTimelineElement({
+                compositionId: rootComp.getAttribute("data-composition-id") || "composition",
+                tagName: (rootComp as HTMLElement).tagName || "div",
+                rootDuration,
+                iframeSrc: iframe?.src || "",
+                selector: getTimelineElementSelector(rootComp),
+              });
+              if (fallbackElement) {
+                // Always show the root composition as a single clip — guarantees
+                // the timeline is never empty when a valid composition is loaded.
+                syncTimelineElements([fallbackElement]);
+              }
             }
           }
           // The runtime will also postMessage the full timeline after all compositions load.
@@ -672,6 +926,7 @@ export function useTimelinePlayer() {
     setIsPlaying,
     processTimelineMessage,
     enrichMissingCompositions,
+    syncTimelineElements,
   ]);
 
   /** Save the current playback time so the next onIframeLoad restores it. */
@@ -745,12 +1000,12 @@ export function useTimelinePlayer() {
         processTimelineMessageRef.current(data);
         // Fill in composition hosts the manifest missed (element-reference starts)
         enrichMissingCompositionsRef.current();
-        // Update duration only if the new value is longer (don't downgrade during generation)
         if (data.durationInFrames > 0 && Number.isFinite(data.durationInFrames)) {
           const fps = 30;
           const dur = data.durationInFrames / fps;
-          const currentDur = usePlayerStore.getState().duration;
-          if (dur > currentDur) usePlayerStore.getState().setDuration(dur);
+          if (dur > 0 && dur < 7200) {
+            usePlayerStore.getState().setDuration(dur);
+          }
         }
         // If manifest produced 0 elements after filtering, try DOM fallback
         if (usePlayerStore.getState().elements.length === 0) {
@@ -760,8 +1015,7 @@ export function useTimelinePlayer() {
             if (doc && adapter) {
               const els = parseTimelineFromDOM(doc, adapter.getDuration());
               if (els.length > 0) {
-                setElements(els);
-                setTimelineReady(true);
+                syncTimelineElements(els);
               }
             }
           } catch (err) {

package/src/player/store/playerStore.test.ts

@@ -17,7 +17,7 @@ describe("usePlayerStore", () => {
       expect(state.selectedElementId).toBeNull();
       expect(state.playbackRate).toBe(1);
       expect(state.zoomMode).toBe("fit");
-      expect(state.pixelsPerSecond).toBe(100);
+      expect(state.manualZoomPercent).toBe(100);
     });
   });
 
@@ -132,6 +132,19 @@ describe("usePlayerStore", () => {
       usePlayerStore.getState().updateElement("nonexistent", { start: 10 });
       expect(usePlayerStore.getState().elements[0].start).toBe(0);
     });
+
+    it("prefers the stable element key when duplicate ids exist", () => {
+      usePlayerStore.getState().setElements([
+        { id: "headline", key: "a", tag: "div", start: 0, duration: 5, track: 0 },
+        { id: "headline", key: "b", tag: "div", start: 5, duration: 5, track: 1 },
+      ]);
+
+      usePlayerStore.getState().updateElement("b", { start: 9 });
+
+      const elements = usePlayerStore.getState().elements;
+      expect(elements[0].start).toBe(0);
+      expect(elements[1].start).toBe(9);
+    });
   });
 
   describe("setZoomMode", () => {
@@ -147,20 +160,25 @@ describe("usePlayerStore", () => {
     });
   });
 
-  describe("setPixelsPerSecond", () => {
-    it("updates pixelsPerSecond", () => {
-      usePlayerStore.getState().setPixelsPerSecond(200);
-      expect(usePlayerStore.getState().pixelsPerSecond).toBe(200);
+  describe("setManualZoomPercent", () => {
+    it("updates the manual zoom percent", () => {
+      usePlayerStore.getState().setManualZoomPercent(200);
+      expect(usePlayerStore.getState().manualZoomPercent).toBe(200);
     });
 
     it("clamps to minimum of 10", () => {
-      usePlayerStore.getState().setPixelsPerSecond(5);
-      expect(usePlayerStore.getState().pixelsPerSecond).toBe(10);
+      usePlayerStore.getState().setManualZoomPercent(5);
+      expect(usePlayerStore.getState().manualZoomPercent).toBe(10);
     });
 
     it("clamps negative values to 10", () => {
-      usePlayerStore.getState().setPixelsPerSecond(-50);
-      expect(usePlayerStore.getState().pixelsPerSecond).toBe(10);
+      usePlayerStore.getState().setManualZoomPercent(-50);
+      expect(usePlayerStore.getState().manualZoomPercent).toBe(10);
+    });
+
+    it("clamps to the maximum supported zoom percent", () => {
+      usePlayerStore.getState().setManualZoomPercent(5000);
+      expect(usePlayerStore.getState().manualZoomPercent).toBe(2000);
     });
   });
 
@@ -187,11 +205,11 @@ describe("usePlayerStore", () => {
       expect(state.selectedElementId).toBeNull();
     });
 
-    it("does not reset playbackRate, zoomMode, or pixelsPerSecond", () => {
+    it("does not reset playbackRate, zoomMode, or manualZoomPercent", () => {
       const store = usePlayerStore.getState();
       store.setPlaybackRate(2);
       store.setZoomMode("manual");
-      store.setPixelsPerSecond(200);
+      store.setManualZoomPercent(200);
 
       usePlayerStore.getState().reset();
 
@@ -199,7 +217,7 @@ describe("usePlayerStore", () => {
       // reset() only resets the fields explicitly listed in the reset function
       expect(state.playbackRate).toBe(2);
       expect(state.zoomMode).toBe("manual");
-      expect(state.pixelsPerSecond).toBe(200);
+      expect(state.manualZoomPercent).toBe(200);
     });
   });
 });