@hyperframes/studio 0.5.0-alpha.8 → 0.5.0

package/src/player/components/Timeline.test.ts

@@ -8,7 +8,6 @@ import {
   getTimelinePlayheadLeft,
   getTimelineScrollLeftForZoomAnchor,
   getTimelineScrollLeftForZoomTransition,
-  shouldShowTimelineShortcutHint,
   shouldHandleTimelineDeleteKey,
   shouldAutoScrollTimeline,
 } from "./Timeline";
@@ -238,17 +237,6 @@ describe("getTimelineCanvasHeight", () => {
   });
 });
 
-describe("shouldShowTimelineShortcutHint", () => {
-  it("shows the hint when the timeline does not vertically overflow", () => {
-    expect(shouldShowTimelineShortcutHint(220, 220)).toBe(true);
-    expect(shouldShowTimelineShortcutHint(220.5, 220)).toBe(true);
-  });
-
-  it("hides the hint when timeline tracks need vertical scrolling", () => {
-    expect(shouldShowTimelineShortcutHint(221.5, 220)).toBe(false);
-  });
-});
-
 describe("shouldHandleTimelineDeleteKey", () => {
   it("handles Delete and Backspace when focus is not in an editor", () => {
     expect(shouldHandleTimelineDeleteKey({ key: "Delete" })).toBe(true);

package/src/player/components/Timeline.tsx

@@ -35,7 +35,7 @@ const TRACK_H = 72;
 const RULER_H = 24;
 const CLIP_Y = 3; // vertical inset inside track
 const CLIP_HANDLE_W = 18;
-const TIMELINE_SCROLL_BUFFER = 20;
+const TIMELINE_SCROLL_BUFFER = 24;
 
 interface TrackVisualStyle extends TimelineTrackStyle {
   icon: ReactNode;
@@ -216,14 +216,6 @@ export function getTimelineCanvasHeight(trackCount: number): number {
   return RULER_H + Math.max(0, trackCount) * TRACK_H + TIMELINE_SCROLL_BUFFER;
 }
 
-export function shouldShowTimelineShortcutHint(
-  scrollHeight: number,
-  clientHeight: number,
-): boolean {
-  if (!Number.isFinite(scrollHeight) || !Number.isFinite(clientHeight)) return true;
-  return scrollHeight - clientHeight <= 1;
-}
-
 export function shouldHandleTimelineDeleteKey(input: {
   key: string;
   metaKey?: boolean;
@@ -287,6 +279,7 @@ export function resolveTimelineAssetDrop(
     track: getDefaultDroppedTrack(input.trackOrder, rowIndex),
   };
 }
+
 /* ── Component ──────────────────────────────────────────────────── */
 interface TimelineProps {
   /** Called when user seeks via ruler/track click or playhead drag */
@@ -434,51 +427,30 @@ export const Timeline = memo(function Timeline({
   onDeleteElementRef.current = onDeleteElement;
   const suppressClickRef = useRef(false);
   const [showPopover, setShowPopover] = useState(false);
-  const [showShortcutHint, setShowShortcutHint] = useState(true);
   const [viewportWidth, setViewportWidth] = useState(0);
   const roRef = useRef<ResizeObserver | null>(null);
-  const shortcutHintRafRef = useRef(0);
-  const syncShortcutHintVisibility = useCallback(() => {
-    const scroll = scrollRef.current;
-    setShowShortcutHint(
-      scroll ? shouldShowTimelineShortcutHint(scroll.scrollHeight, scroll.clientHeight) : true,
-    );
-  }, []);
-  const scheduleShortcutHintVisibilitySync = useCallback(() => {
-    if (shortcutHintRafRef.current) cancelAnimationFrame(shortcutHintRafRef.current);
-    shortcutHintRafRef.current = requestAnimationFrame(() => {
-      shortcutHintRafRef.current = 0;
-      syncShortcutHintVisibility();
-    });
-  }, [syncShortcutHintVisibility]);
 
   // Callback ref: sets up ResizeObserver when the DOM element actually mounts.
   // useMountEffect can't work here because the component returns null on first
   // render (timelineReady=false), so containerRef.current is null when the
   // effect fires and the ResizeObserver is never created.
-  const setContainerRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      if (roRef.current) {
-        roRef.current.disconnect();
-        roRef.current = null;
-      }
-      containerRef.current = el;
-      if (!el) return;
-      setViewportWidth(el.clientWidth);
-      scheduleShortcutHintVisibilitySync();
-      roRef.current = new ResizeObserver(([entry]) => {
-        setViewportWidth(entry.contentRect.width);
-        scheduleShortcutHintVisibilitySync();
-      });
-      roRef.current.observe(el);
-    },
-    [scheduleShortcutHintVisibilitySync],
-  );
+  const setContainerRef = useCallback((el: HTMLDivElement | null) => {
+    if (roRef.current) {
+      roRef.current.disconnect();
+      roRef.current = null;
+    }
+    containerRef.current = el;
+    if (!el) return;
+    setViewportWidth(el.clientWidth);
+    roRef.current = new ResizeObserver(([entry]) => {
+      setViewportWidth(entry.contentRect.width);
+    });
+    roRef.current.observe(el);
+  }, []);
 
   // Clean up ResizeObserver on unmount
   useMountEffect(() => () => {
     roRef.current?.disconnect();
-    if (shortcutHintRafRef.current) cancelAnimationFrame(shortcutHintRafRef.current);
   });
 
   // Effective duration: max of store duration and the furthest element end.
@@ -523,7 +495,6 @@ export const Timeline = memo(function Timeline({
     }
     return [...trackOrder, draggedClip.previewTrack].sort((a, b) => a - b);
   }, [draggedClip, trackOrder]);
-  const totalH = getTimelineCanvasHeight(displayTrackOrder.length);
   const selectedElement = useMemo(
     () => elements.find((element) => (element.key ?? element.id) === selectedElementId) ?? null,
     [elements, selectedElementId],
@@ -573,6 +544,7 @@ export const Timeline = memo(function Timeline({
     );
     previousZoomModeRef.current = zoomMode;
   }, [zoomMode]);
+
   useMountEffect(() => {
     const unsub = liveTime.subscribe((t) => {
       const dur = durationRef.current;
@@ -1040,12 +1012,12 @@ export const Timeline = memo(function Timeline({
   );
   const majorTickInterval =
     major.length >= 2 ? Math.max(0.25, major[1] - major[0]) : effectiveDuration;
-  useEffect(() => {
-    syncShortcutHintVisibility();
-  }, [syncShortcutHintVisibility, timelineReady, elements.length, totalH]);
   const getPreviewElement = useCallback(
     (element: TimelineElement): TimelineElement => {
-      if (resizingClip?.element.id === element.id) {
+      if (
+        resizingClip &&
+        (resizingClip.element.key ?? resizingClip.element.id) === (element.key ?? element.id)
+      ) {
         return {
           ...element,
           start: resizingClip.previewStart,
@@ -1267,12 +1239,13 @@ export const Timeline = memo(function Timeline({
     );
   }
 
+  const totalH = getTimelineCanvasHeight(displayTrackOrder.length);
   const draggedElement = draggedClip?.element ?? null;
   const activeDraggedElement =
     draggedClip?.started === true && draggedElement
       ? getRenderedTimelineElement({
           element: draggedElement,
-          draggedElementId: draggedElement.id,
+          draggedElementId: draggedElement.key ?? draggedElement.id,
           previewStart: draggedClip.previewStart,
           previewTrack: draggedClip.previewTrack,
         })
@@ -1340,7 +1313,7 @@ export const Timeline = memo(function Timeline({
     <div
       ref={setContainerRef}
       aria-label="Timeline"
-      className={`relative border-t select-none h-full overflow-hidden ${shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
+      className={`border-t select-none h-full overflow-hidden ${shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
       style={{
         touchAction: "pan-x pan-y",
         background: theme.shellBackground,
@@ -1679,8 +1652,8 @@ export const Timeline = memo(function Timeline({
         </div>
       </div>
 
-      {/* Keyboard shortcut hint */}
-      {showShortcutHint && !showPopover && !rangeSelection && (
+      {/* Keyboard shortcut hint — always visible */}
+      {!showPopover && !rangeSelection && (
         <div className="absolute bottom-2 right-3 pointer-events-none z-20">
           <div
             className="flex items-center gap-1.5 px-2 py-1 rounded-md border"

package/src/player/components/TimelineClip.tsx

@@ -61,26 +61,8 @@ export const TimelineClip = memo(function TimelineClip({
         ? theme.clipShadowHover
         : theme.clipShadow;
   const capabilities = getTimelineEditCapabilities(el);
+  const displayLabel = el.label || el.id || el.tag;
   const showHandles = handleOpacity > 0.01;
-  const baseBackgroundImage = isSelected ? theme.clipBackgroundActive : theme.clipBackground;
-  const glossBackgroundImage = isSelected
-    ? "linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0))"
-    : "linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0))";
-  const accentBackgroundImage = `linear-gradient(120deg, ${trackStyle.accent}${
-    isSelected ? "22" : "1e"
-  }, transparent 28%)`;
-  const compositionStripeBackgroundImage =
-    isComposition && !hasCustomContent
-      ? "repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(255,255,255,0.05) 3px, rgba(255,255,255,0.05) 6px)"
-      : undefined;
-  const clipBackgroundImage = [
-    compositionStripeBackgroundImage,
-    glossBackgroundImage,
-    accentBackgroundImage,
-    baseBackgroundImage,
-  ]
-    .filter(Boolean)
-    .join(", ");
 
   return (
     <div
@@ -94,7 +76,13 @@ export const TimelineClip = memo(function TimelineClip({
         top: clipY,
         bottom: clipY,
         borderRadius: theme.clipRadius,
-        backgroundImage: clipBackgroundImage,
+        background: isSelected
+          ? `linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)), linear-gradient(120deg, ${trackStyle.accent}22, transparent 28%), ${theme.clipBackgroundActive}`
+          : `linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), linear-gradient(120deg, ${trackStyle.accent}1e, transparent 28%), ${theme.clipBackground}`,
+        backgroundImage:
+          isComposition && !hasCustomContent
+            ? `repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(255,255,255,0.05) 3px, rgba(255,255,255,0.05) 6px)`
+            : undefined,
         border: `1px solid ${borderColor}`,
         boxShadow,
         transition:
@@ -106,7 +94,7 @@ export const TimelineClip = memo(function TimelineClip({
       title={
         isComposition
           ? `${el.compositionSrc} \u2022 Double-click to open`
-          : `${el.id || el.tag} \u2022 ${el.start.toFixed(1)}s \u2013 ${(el.start + el.duration).toFixed(1)}s`
+          : `${displayLabel} \u2022 ${el.start.toFixed(1)}s \u2013 ${(el.start + el.duration).toFixed(1)}s`
       }
       onPointerEnter={onHoverStart}
       onPointerLeave={onHoverEnd}

package/src/player/components/timelineEditing.test.ts

@@ -248,7 +248,7 @@ describe("getTimelineEditCapabilities", () => {
     });
   });
 
-  it("allows moving generic motion clips while keeping trims blocked", () => {
+  it("disables move and trims for generic motion clips even when patchable", () => {
     expect(
       getTimelineEditCapabilities({
         tag: "section",
@@ -256,7 +256,7 @@ describe("getTimelineEditCapabilities", () => {
         selector: ".feature-card",
       }),
     ).toEqual({
-      canMove: true,
+      canMove: false,
       canTrimStart: false,
       canTrimEnd: false,
     });
@@ -428,6 +428,7 @@ describe("buildClipRangeSelection", () => {
     });
   });
 });
+
 describe("resolveTimelineAutoScroll", () => {
   it("does not scroll when the pointer stays away from the edges", () => {
     expect(
@@ -511,6 +512,7 @@ describe("buildTimelineElementAgentPrompt", () => {
     ).toContain("If this clip is animated with GSAP");
   });
 });
+
 describe("resolveTimelineResize", () => {
   it("shrinks clip duration from the right edge", () => {
     expect(

package/src/player/components/timelineEditing.ts

@@ -233,7 +233,7 @@ export function getTimelineEditCapabilities(input: {
   const hasFiniteDuration = Number.isFinite(input.duration) && input.duration > 0;
   const hasDeterministicWindow = isDeterministicTimelineWindow(input);
   return {
-    canMove: canPatch && (hasDeterministicWindow || hasFiniteDuration),
+    canMove: canPatch && hasDeterministicWindow,
     canTrimEnd: canPatch && hasFiniteDuration && hasDeterministicWindow,
     canTrimStart: canPatch && hasFiniteDuration && canOffsetTrimClipStart(input),
   };
@@ -273,6 +273,7 @@ export function buildClipRangeSelection(
     anchorY: anchor.anchorY,
   };
 }
+
 export function buildTimelineAgentPrompt({
   rangeStart,
   rangeEnd,
@@ -346,6 +347,7 @@ export function buildTimelineElementAgentPrompt(element: {
 
   return lines.join("\n");
 }
+
 export function formatTimelineAttributeNumber(value: number): string {
   return Number(roundToCentiseconds(value).toFixed(2)).toString();
 }

package/src/player/components/timelineTheme.test.ts

@@ -53,4 +53,23 @@ describe("getRenderedTimelineElement", () => {
       }),
     ).toEqual({ ...element, start: 2.4, track: 3 });
   });
+
+  it("uses key before id when matching the dragged clip", () => {
+    const element = {
+      id: "Card",
+      key: "index.html:.card:1",
+      tag: "div",
+      start: 1,
+      duration: 2,
+      track: 0,
+    };
+    expect(
+      getRenderedTimelineElement({
+        element,
+        draggedElementId: "index.html:.card:1",
+        previewStart: 2.4,
+        previewTrack: 3,
+      }),
+    ).toEqual({ ...element, start: 2.4, track: 3 });
+  });
 });

package/src/player/components/timelineTheme.ts

@@ -63,12 +63,12 @@ const TRACK_STYLES: Record<string, TimelineTrackStyle> = {
 const DEFAULT_TRACK_STYLE: TimelineTrackStyle = createTrackStyle();
 
 export const defaultTimelineTheme: TimelineTheme = {
-  shellBackground: "#0A0E15",
+  shellBackground: "#0A0A0B",
   shellBorder: "rgba(255,255,255,0.05)",
   rulerBorder: "rgba(255,255,255,0.045)",
-  rowBackground: "#0A0E15",
+  rowBackground: "#0A0A0B",
   rowBorder: "rgba(255,255,255,0.05)",
-  gutterBackground: "#0D121B",
+  gutterBackground: "#0A0A0B",
   gutterBorder: "rgba(255,255,255,0.05)",
   textPrimary: "#E8EDF5",
   textSecondary: "#8391A8",
@@ -130,7 +130,11 @@ export function getRenderedTimelineElement({
   previewStart: number | null;
   previewTrack: number | null;
 }): TimelineElement {
-  if (element.id !== draggedElementId || previewStart === null || previewTrack === null) {
+  if (
+    (element.key ?? element.id) !== draggedElementId ||
+    previewStart === null ||
+    previewTrack === null
+  ) {
     return element;
   }
   return {

package/src/player/hooks/useTimelinePlayer.test.ts

@@ -2,13 +2,37 @@ import { describe, expect, it } from "vitest";
 import { Window } from "happy-dom";
 import {
   buildStandaloneRootTimelineElement,
+  createTimelineElementFromManifestClip,
   findTimelineDomNodeForClip,
   getTimelineElementSelector,
+  parseTimelineFromDOM,
   type ClipManifestClip,
   mergeTimelineElementsPreservingDowngrades,
   resolveStandaloneRootCompositionSrc,
+  shouldIgnorePlaybackShortcutEvent,
+  shouldIgnorePlaybackShortcutTarget,
 } from "./useTimelinePlayer";
 
+function mockTargetMatching(selectorNeedle: string): EventTarget {
+  return {
+    closest: (selector: string) => (selector.includes(selectorNeedle) ? ({} as Element) : null),
+  } as unknown as EventTarget;
+}
+
+function mockKeyboardEvent(
+  code: string,
+  overrides: Partial<Pick<KeyboardEvent, "altKey" | "ctrlKey" | "metaKey" | "target">> = {},
+): Pick<KeyboardEvent, "altKey" | "ctrlKey" | "metaKey" | "code" | "target"> {
+  return {
+    altKey: false,
+    ctrlKey: false,
+    metaKey: false,
+    code,
+    target: mockTargetMatching("[data-missing]"),
+    ...overrides,
+  };
+}
+
 function createDocument(markup: string): Document {
   const window = new Window();
   window.document.body.innerHTML = markup;
@@ -18,7 +42,7 @@ function createDocument(markup: string): Document {
 function createClip(overrides: Partial<ClipManifestClip>): ClipManifestClip {
   return {
     id: null,
-    label: "",
+    label: "Element",
     start: 0,
     duration: 4,
     track: 0,
@@ -44,6 +68,7 @@ describe("buildStandaloneRootTimelineElement", () => {
       }),
     ).toEqual({
       id: "hero",
+      label: "hero",
       key: 'scenes/hero.html:[data-composition-id="hero"]:0',
       tag: "div",
       start: 0,
@@ -124,6 +149,83 @@ describe("findTimelineDomNodeForClip", () => {
   });
 });
 
+describe("anonymous timeline identity", () => {
+  it("keeps fallback-parsed anonymous clips distinct when labels match", () => {
+    const doc = createDocument(`
+      <div data-composition-id="main" data-start="0" data-duration="8">
+        <div class="clip card" data-label="Card" data-start="0" data-duration="3" data-track-index="0"></div>
+        <div class="clip card" data-label="Card" data-start="3" data-duration="3" data-track-index="1"></div>
+      </div>
+    `);
+
+    const elements = parseTimelineFromDOM(doc, 8);
+
+    expect(elements).toHaveLength(2);
+    expect(elements.map((element) => element.label)).toEqual(["Card", "Card"]);
+    expect(new Set(elements.map((element) => element.id)).size).toBe(2);
+    expect(new Set(elements.map((element) => element.key)).size).toBe(2);
+    expect(elements.map((element) => element.selectorIndex)).toEqual([0, 1]);
+  });
+
+  it("keeps runtime-manifest anonymous clips distinct when labels match", () => {
+    const doc = createDocument(`
+      <div data-composition-id="main" data-start="0" data-duration="8">
+        <div class="clip card" data-start="0" data-duration="3" data-track-index="0"></div>
+        <div class="clip card" data-start="3" data-duration="3" data-track-index="1"></div>
+      </div>
+    `);
+    const clips = [
+      createClip({ id: null, label: "Card", start: 0, duration: 3, track: 0 }),
+      createClip({ id: null, label: "Card", start: 3, duration: 3, track: 1 }),
+    ];
+    const used = new Set<Element>();
+    const elements = clips.map((clip, index) => {
+      const hostEl = findTimelineDomNodeForClip(doc, clip, index, used);
+      if (hostEl) used.add(hostEl);
+      return createTimelineElementFromManifestClip({
+        clip,
+        fallbackIndex: index,
+        doc,
+        hostEl,
+      });
+    });
+
+    expect(elements.map((element) => element.label)).toEqual(["Card", "Card"]);
+    expect(new Set(elements.map((element) => element.id)).size).toBe(2);
+    expect(new Set(elements.map((element) => element.key)).size).toBe(2);
+    expect(elements.map((element) => element.selectorIndex)).toEqual([0, 1]);
+  });
+
+  it("reads media metadata from owner-window media elements", () => {
+    const doc = createDocument(`
+      <div data-composition-id="main" data-start="0" data-duration="8">
+        <div class="clip video-card" data-start="0" data-duration="3" data-track-index="0">
+          <video src="/clip.mp4" data-source-duration="12"></video>
+        </div>
+      </div>
+    `);
+    const hostEl = doc.querySelector(".video-card");
+    const video = hostEl?.querySelector("video");
+    if (!hostEl || !video) throw new Error("missing video test fixture");
+    Object.defineProperty(video, "defaultPlaybackRate", {
+      value: 1.5,
+      configurable: true,
+    });
+
+    const element = createTimelineElementFromManifestClip({
+      clip: createClip({ kind: "video", tagName: "div" }),
+      fallbackIndex: 0,
+      doc,
+      hostEl,
+    });
+
+    expect(element.tag).toBe("video");
+    expect(element.src).toBe("/clip.mp4");
+    expect(element.sourceDuration).toBe(12);
+    expect(element.playbackRate).toBe(1.5);
+  });
+});
+
 describe("mergeTimelineElementsPreservingDowngrades", () => {
   it("preserves missing current elements when a shorter manifest arrives", () => {
     expect(
@@ -152,4 +254,120 @@ describe("mergeTimelineElementsPreservingDowngrades", () => {
       ),
     ).toEqual([{ id: "hero", tag: "div", start: 0, duration: 4, track: 0 }]);
   });
+
+  it("preserves distinct anonymous clips that share the same friendly id label", () => {
+    expect(
+      mergeTimelineElementsPreservingDowngrades(
+        [
+          {
+            id: "Card",
+            key: "index.html:.card:0",
+            label: "Card",
+            tag: "div",
+            start: 0,
+            duration: 3,
+            track: 0,
+          },
+          {
+            id: "Card",
+            key: "index.html:.card:1",
+            label: "Card",
+            tag: "div",
+            start: 3,
+            duration: 3,
+            track: 1,
+          },
+        ],
+        [
+          {
+            id: "Card",
+            key: "index.html:.card:0",
+            label: "Card",
+            tag: "div",
+            start: 0,
+            duration: 3,
+            track: 0,
+          },
+        ],
+        8,
+        8,
+      ),
+    ).toEqual([
+      {
+        id: "Card",
+        key: "index.html:.card:0",
+        label: "Card",
+        tag: "div",
+        start: 0,
+        duration: 3,
+        track: 0,
+      },
+      {
+        id: "Card",
+        key: "index.html:.card:1",
+        label: "Card",
+        tag: "div",
+        start: 3,
+        duration: 3,
+        track: 1,
+      },
+    ]);
+  });
+});
+
+describe("shouldIgnorePlaybackShortcutTarget", () => {
+  it("ignores focused toolbar buttons so Space can activate the button itself", () => {
+    expect(shouldIgnorePlaybackShortcutTarget(mockTargetMatching("button"))).toBe(true);
+  });
+
+  it("ignores the seek slider so ArrowRight reaches the slider key handler", () => {
+    expect(shouldIgnorePlaybackShortcutTarget(mockTargetMatching("[role='slider']"))).toBe(true);
+  });
+
+  it("allows non-interactive preview targets to use playback shortcuts", () => {
+    expect(shouldIgnorePlaybackShortcutTarget(mockTargetMatching("[data-missing]"))).toBe(false);
+  });
+});
+
+describe("shouldIgnorePlaybackShortcutEvent", () => {
+  it("ignores modified playback shortcuts so browser and app chords can handle them", () => {
+    expect(
+      shouldIgnorePlaybackShortcutEvent(mockKeyboardEvent("ArrowLeft", { altKey: true })),
+    ).toBe(true);
+    expect(shouldIgnorePlaybackShortcutEvent(mockKeyboardEvent("KeyK", { ctrlKey: true }))).toBe(
+      true,
+    );
+    expect(shouldIgnorePlaybackShortcutEvent(mockKeyboardEvent("KeyL", { metaKey: true }))).toBe(
+      true,
+    );
+  });
+
+  it("defers Arrow frame shortcuts while caption edit mode has selected words", () => {
+    const captionSelection = { isCaptionEditMode: true, selectedCaptionSegmentCount: 1 };
+
+    expect(
+      shouldIgnorePlaybackShortcutEvent(mockKeyboardEvent("ArrowLeft"), captionSelection),
+    ).toBe(true);
+    expect(
+      shouldIgnorePlaybackShortcutEvent(mockKeyboardEvent("ArrowRight"), captionSelection),
+    ).toBe(true);
+    expect(shouldIgnorePlaybackShortcutEvent(mockKeyboardEvent("KeyJ"), captionSelection)).toBe(
+      false,
+    );
+  });
+
+  it("allows Arrow frame shortcuts when captions are not selected", () => {
+    expect(
+      shouldIgnorePlaybackShortcutEvent(mockKeyboardEvent("ArrowRight"), {
+        isCaptionEditMode: true,
+        selectedCaptionSegmentCount: 0,
+      }),
+    ).toBe(false);
+    expect(
+      shouldIgnorePlaybackShortcutEvent(mockKeyboardEvent("ArrowRight"), {
+        isCaptionEditMode: false,
+        selectedCaptionSegmentCount: 1,
+      }),
+    ).toBe(false);
+  });
 });