@hyperframes/studio 0.8.60 → 0.8.62

package/src/player/components/AudioWaveform.test.tsx

@@ -11,7 +11,7 @@ vi.mock("../../hooks/useThumbnailLease", () => ({
   useThumbnailLease: leaseSpy,
 }));
 
-import { AudioWaveform } from "./AudioWaveform";
+import { AudioWaveform, drawWaveformCanvas } from "./AudioWaveform";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -21,6 +21,30 @@ afterEach(() => {
 });
 
 describe("AudioWaveform", () => {
+  it("paints a baseline and peak bar for every mapped waveform bin", () => {
+    const fillRect = vi.fn();
+    const context = {
+      scale: vi.fn(),
+      clearRect: vi.fn(),
+      fillRect,
+      fillStyle: "",
+    } as unknown as CanvasRenderingContext2D;
+    const canvas = document.createElement("canvas");
+    Object.defineProperties(canvas, {
+      clientWidth: { value: 6 },
+      clientHeight: { value: 20 },
+    });
+    vi.spyOn(canvas, "getContext").mockReturnValue(context);
+    drawWaveformCanvas(canvas, [0.25, 1], false, 0, 1);
+    expect(fillRect).toHaveBeenCalledTimes(4);
+    expect(fillRect.mock.calls.map(([x, y, width, height]) => [x, y, width, height])).toEqual([
+      [0, 18, 3, 2],
+      [0, 15, 3, 5],
+      [3, 18, 3, 2],
+      [3, 0, 3, 20],
+    ]);
+  });
+
   it("leases waveform decoding with the clip's project, session, and viewport priority", () => {
     const host = document.createElement("div");
     document.body.append(host);
@@ -50,4 +74,32 @@ describe("AudioWaveform", () => {
 
     act(() => root.unmount());
   });
+
+  it("greys the clip in place when muted and draws the parent tick when linked", () => {
+    const host = document.createElement("div");
+    host.className = "timeline-clip is-audio";
+    document.body.append(host);
+    const root = createRoot(host);
+
+    act(() => {
+      root.render(
+        <AudioWaveform
+          audioUrl="/media/voice.wav"
+          label=""
+          labelColor="#fff"
+          projectId="project-a"
+          sessionEpoch={1}
+          priority="visible"
+          muted
+          linked
+        />,
+      );
+    });
+
+    expect(host.getAttribute("data-audio-muted")).toBe("true");
+    expect(host.querySelector(".timeline-audio-link")).not.toBeNull();
+
+    act(() => root.unmount());
+    expect(host.hasAttribute("data-audio-muted")).toBe(false);
+  });
 });

package/src/player/components/AudioWaveform.tsx

@@ -2,6 +2,7 @@ import { memo, useCallback, useEffect, useMemo, useRef } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { useThumbnailLease } from "../../hooks/useThumbnailLease";
 import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailScheduler";
+import { decimatePeaks, loudnessToOpacity } from "./audioWaveformPeaks";
 
 interface AudioWaveformProps {
   audioUrl: string;
@@ -13,11 +14,68 @@ interface AudioWaveformProps {
   projectId: string;
   sessionEpoch: number;
   priority: ThumbnailPriority;
+  /** `data-hidden` or a muted audio group. Greys the pill; the clip stays. */
+  muted?: boolean;
+  /** Same media file as a video clip. Draws the 1px parent tick. */
+  linked?: boolean;
 }
 
-const BAR_WIDTH = 2;
 const BAR_STEP = 3;
 
+type BarGeometry = { x: number; width: number; height: number };
+
+function paintWaveformBars(
+  context: CanvasRenderingContext2D,
+  bars: readonly BarGeometry[],
+  height: number,
+  waveformBarRgb: string,
+  waveformBaselineRgb: string,
+  amplitudes: readonly number[],
+) {
+  bars.forEach((bar, index) => {
+    const amplitude = amplitudes[index] ?? 0;
+    context.fillStyle = `rgb(${waveformBaselineRgb})`;
+    context.fillRect(bar.x, height - 2, bar.width, 2);
+    context.fillStyle = `rgba(${waveformBarRgb},${loudnessToOpacity(amplitude).toFixed(2)})`;
+    context.fillRect(bar.x, height - bar.height, bar.width, bar.height);
+  });
+}
+
+export function drawWaveformCanvas(
+  canvas: HTMLCanvasElement,
+  peaks: readonly number[],
+  muted: boolean,
+  trimStartFraction: number,
+  trimEndFraction: number,
+) {
+  const width = Math.max(1, canvas.clientWidth);
+  const height = Math.max(1, canvas.clientHeight);
+  const scale = window.devicePixelRatio || 1;
+  canvas.width = Math.ceil(width * scale);
+  canvas.height = Math.ceil(height * scale);
+  const context = canvas.getContext("2d");
+  if (!context) return;
+  context.scale(scale, scale);
+  context.clearRect(0, 0, width, height);
+  const amplitudes = decimatePeaks(
+    peaks,
+    trimStartFraction,
+    trimEndFraction,
+    Math.max(1, Math.ceil(width / BAR_STEP)),
+  );
+  const bars = amplitudes.map((amplitude, index) => ({
+    x: (index * width) / amplitudes.length,
+    width: Math.max(1, width / amplitudes.length),
+    height: Math.max(3, amplitude * height),
+  }));
+  const channelToken = muted ? "--timeline-waveform-muted-rgb" : "--timeline-waveform-bar-rgb";
+  const waveformBarRgb = getComputedStyle(canvas).getPropertyValue(channelToken);
+  const waveformBaselineRgb = getComputedStyle(canvas).getPropertyValue(
+    "--timeline-waveform-baseline-rgb",
+  );
+  paintWaveformBars(context, bars, height, waveformBarRgb, waveformBaselineRgb, amplitudes);
+}
+
 function extractPeaks(channelData: Float32Array, barCount: number): number[] {
   const peaks: number[] = [];
   const samplesPerBar = Math.floor(channelData.length / barCount);
@@ -92,7 +150,10 @@ export const AudioWaveform = memo(function AudioWaveform({
   projectId,
   sessionEpoch,
   priority,
+  muted = false,
+  linked = false,
 }: AudioWaveformProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const observerRef = useRef<ResizeObserver | null>(null);
   const cacheKey = waveformUrl ?? audioUrl;
@@ -121,30 +182,8 @@ export const AudioWaveform = memo(function AudioWaveform({
   const draw = useCallback(() => {
     const canvas = canvasRef.current;
     if (!canvas || !peaks) return;
-    const width = Math.max(1, canvas.clientWidth);
-    const height = Math.max(1, canvas.clientHeight);
-    const scale = window.devicePixelRatio || 1;
-    canvas.width = Math.ceil(width * scale);
-    canvas.height = Math.ceil(height * scale);
-    const context = canvas.getContext("2d");
-    if (!context) return;
-    context.scale(scale, scale);
-    context.clearRect(0, 0, width, height);
-    const startFraction = Math.max(0, Math.min(1, trimStartFraction ?? 0));
-    const endFraction = Math.max(startFraction, Math.min(1, trimEndFraction ?? 1));
-    const start = Math.floor(startFraction * peaks.length);
-    const end = Math.max(start + 1, Math.ceil(endFraction * peaks.length));
-    const span = end - start;
-    const barCount = Math.floor(width / BAR_STEP);
-    const waveformBarRgb = getComputedStyle(canvas).getPropertyValue("--timeline-waveform-bar-rgb");
-    for (let index = 0; index < barCount; index++) {
-      const peakIndex = start + Math.min(span - 1, Math.floor((index / barCount) * span));
-      const amplitude = peaks[peakIndex] ?? 0;
-      const barHeight = Math.max(2, amplitude * height);
-      context.fillStyle = `rgba(${waveformBarRgb},${(0.45 + amplitude * 0.4).toFixed(2)})`;
-      context.fillRect(index * BAR_STEP, height - barHeight, BAR_WIDTH, barHeight);
-    }
-  }, [peaks, trimEndFraction, trimStartFraction]);
+    drawWaveformCanvas(canvas, peaks, muted, trimStartFraction ?? 0, trimEndFraction ?? 1);
+  }, [muted, peaks, trimEndFraction, trimStartFraction]);
 
   const setCanvasRef = useCallback(
     (canvas: HTMLCanvasElement | null) => {
@@ -170,51 +209,62 @@ export const AudioWaveform = memo(function AudioWaveform({
 
   useMountEffect(() => () => observerRef.current?.disconnect());
 
+  useEffect(() => {
+    const clip = rootRef.current?.closest(".timeline-clip");
+    if (!(clip instanceof HTMLElement)) return;
+    if (muted) clip.setAttribute("data-audio-muted", "true");
+    else clip.removeAttribute("data-audio-muted");
+    return () => clip.removeAttribute("data-audio-muted");
+  }, [muted]);
+
   return (
-    <div className="absolute inset-0 overflow-hidden">
-      <canvas
-        ref={setCanvasRef}
-        className="absolute inset-x-0 bottom-0 w-full"
-        style={{ top: 16 }}
-      />
-      {snapshot.status === "loading" && (
-        <div
-          className="absolute inset-x-0 bottom-0 top-4 animate-pulse"
-          style={{
-            background: "var(--timeline-thumbnail-shimmer)",
-          }}
+    <div ref={rootRef} className="absolute inset-0">
+      {linked ? <span className="timeline-audio-link" aria-hidden="true" /> : null}
+      <div className="absolute inset-0 overflow-hidden" style={{ zIndex: 10 }}>
+        <canvas
+          ref={setCanvasRef}
+          className="absolute inset-x-0 bottom-0 w-full"
+          style={{ top: 16, height: "calc(100% - 16px)" }}
         />
-      )}
-      {/* Degraded state — the decode failed; say so rather than paint a
-          waveform the author could edit against. */}
-      {snapshot.status === "error" && (
-        <div
-          className="absolute inset-x-0 flex items-center justify-center gap-1.5"
-          style={{ top: 16, bottom: 0 }}
-        >
+        {snapshot.status === "loading" && (
           <div
-            className="absolute inset-x-0"
+            className="absolute inset-x-0 bottom-0 top-4 animate-pulse"
             style={{
-              bottom: "20%",
-              height: 2,
-              background: "var(--timeline-waveform-error)",
+              background: "var(--timeline-thumbnail-shimmer)",
             }}
           />
-          <span className="relative rounded-sm bg-black/50 px-1 text-[8px] text-neutral-500">
-            waveform unavailable
-          </span>
-        </div>
-      )}
-      {label && (
-        <div className="absolute inset-x-0 top-0 z-10 px-1.5 py-0.5">
-          <span
-            className="block truncate text-[9px] font-semibold leading-tight"
-            style={{ color: labelColor, textShadow: "var(--timeline-waveform-label-shadow)" }}
+        )}
+        {/* Degraded state — the decode failed; say so rather than paint a
+          waveform the author could edit against. */}
+        {snapshot.status === "error" && (
+          <div
+            className="absolute inset-x-0 flex items-center justify-center gap-1.5"
+            style={{ top: 16, bottom: 0 }}
           >
-            {label}
-          </span>
-        </div>
-      )}
+            <div
+              className="absolute inset-x-0"
+              style={{
+                bottom: "20%",
+                height: 2,
+                background: "var(--timeline-waveform-error)",
+              }}
+            />
+            <span className="relative rounded-sm bg-black/50 px-1 text-[8px] text-neutral-500">
+              waveform unavailable
+            </span>
+          </div>
+        )}
+        {label && (
+          <div className="absolute inset-x-0 top-0 z-10 px-1.5 py-0.5">
+            <span
+              className="block truncate text-[9px] font-semibold leading-tight"
+              style={{ color: labelColor, textShadow: "var(--timeline-waveform-label-shadow)" }}
+            >
+              {label}
+            </span>
+          </div>
+        )}
+      </div>
     </div>
   );
 });

package/src/player/components/TimelineClipFades.tsx

@@ -192,13 +192,14 @@ export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineCli
           viewBox={`0 0 ${Math.max(widthPx, 1)} 100`}
           preserveAspectRatio="none"
         >
-          {/* The shaded wedge is the gain that is NOT there: above the ramp. */}
+          {/* Keep the #4250 wedge geometry, but let the real waveform read through it. */}
           {showIn && (
             <>
               <polygon
                 data-testid="clip-fade-in"
                 points={`0,0 ${inPx},0 0,100`}
                 fill="var(--timeline-fade-shade)"
+                fillOpacity={0.35}
               />
               <line
                 x1={0}
@@ -218,6 +219,7 @@ export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineCli
                 data-testid="clip-fade-out"
                 points={`${widthPx - outPx},0 ${widthPx},0 ${widthPx},100`}
                 fill="var(--timeline-fade-shade)"
+                fillOpacity={0.35}
               />
               <line
                 x1={widthPx - outPx}
@@ -235,54 +237,85 @@ export function TimelineClipFades({ el, pps, widthPx, showHandles }: TimelineCli
       )}
       {canEdit && (
         <>
-          <div
-            role="slider"
-            tabIndex={-1}
-            aria-label="Fade in"
-            aria-valuemin={0}
-            aria-valuemax={Math.max(0, el.duration - fades.fadeOut)}
-            aria-valuenow={fades.fadeIn}
-            aria-valuetext={`${formatFadeSeconds(fades.fadeIn)}s`}
-            data-testid="clip-fade-handle-in"
-            title={`Fade in: ${formatFadeSeconds(fades.fadeIn)}s — drag to change`}
+          <FadeHandle
+            direction="in"
+            value={fades.fadeIn}
+            max={Math.max(0, el.duration - fades.fadeOut)}
             style={handleStyle(inPx)}
+            dragging={dragging === "in"}
             onPointerDown={onHandlePointerDown("in")}
             onPointerMove={onHandlePointerMove}
             onPointerUp={(e) => finish(e, false)}
             onPointerCancel={(e) => finish(e, true)}
             onKeyDown={onHandleKeyDown}
-            onClick={(e) => e.stopPropagation()}
-            onDoubleClick={(e) => e.stopPropagation()}
-          >
-            <FadeDot active={dragging === "in"} />
-          </div>
-          <div
-            role="slider"
-            tabIndex={-1}
-            aria-label="Fade out"
-            aria-valuemin={0}
-            aria-valuemax={Math.max(0, el.duration - fades.fadeIn)}
-            aria-valuenow={fades.fadeOut}
-            aria-valuetext={`${formatFadeSeconds(fades.fadeOut)}s`}
-            data-testid="clip-fade-handle-out"
-            title={`Fade out: ${formatFadeSeconds(fades.fadeOut)}s — drag to change`}
+          />
+          <FadeHandle
+            direction="out"
+            value={fades.fadeOut}
+            max={Math.max(0, el.duration - fades.fadeIn)}
             style={handleStyle(widthPx - outPx)}
+            dragging={dragging === "out"}
             onPointerDown={onHandlePointerDown("out")}
             onPointerMove={onHandlePointerMove}
             onPointerUp={(e) => finish(e, false)}
             onPointerCancel={(e) => finish(e, true)}
             onKeyDown={onHandleKeyDown}
-            onClick={(e) => e.stopPropagation()}
-            onDoubleClick={(e) => e.stopPropagation()}
-          >
-            <FadeDot active={dragging === "out"} />
-          </div>
+          />
         </>
       )}
     </>
   );
 }
 
+function FadeHandle({
+  direction,
+  value,
+  max,
+  style,
+  dragging,
+  onPointerDown,
+  onPointerMove,
+  onPointerUp,
+  onPointerCancel,
+  onKeyDown,
+}: {
+  direction: "in" | "out";
+  value: number;
+  max: number;
+  style: CSSProperties;
+  dragging: boolean;
+  onPointerDown: (event: PointerEvent<HTMLDivElement>) => void;
+  onPointerMove: (event: PointerEvent<HTMLDivElement>) => void;
+  onPointerUp: (event: PointerEvent<HTMLDivElement>) => void;
+  onPointerCancel: (event: PointerEvent<HTMLDivElement>) => void;
+  onKeyDown: (event: KeyboardEvent<HTMLDivElement>) => void;
+}) {
+  const label = direction === "in" ? "Fade in" : "Fade out";
+  return (
+    <div
+      role="slider"
+      tabIndex={-1}
+      aria-label={label}
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      aria-valuetext={`${formatFadeSeconds(value)}s`}
+      data-testid={`clip-fade-handle-${direction}`}
+      title={`${label}: ${formatFadeSeconds(value)}s — drag to change`}
+      style={style}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={onPointerUp}
+      onPointerCancel={onPointerCancel}
+      onKeyDown={onKeyDown}
+      onClick={(e) => e.stopPropagation()}
+      onDoubleClick={(e) => e.stopPropagation()}
+    >
+      <FadeDot active={dragging} />
+    </div>
+  );
+}
+
 function FadeDot({ active }: { active: boolean }) {
   return (
     <span

package/src/player/components/TimelineLanes.tsx

@@ -32,6 +32,8 @@ import { queryTimelineClipIndex } from "../lib/timelineClipIndex";
 import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
 import { timelineClipFocusId } from "./timelineNavigationIdentity";
 import { useTimelineKeyboardActor } from "./useTimelineKeyboardActor";
+import { deriveTimelineTransitionSeams } from "./timelineTransitionSeams";
+import { TimelineTransitionOverlays } from "./TimelineTransitionOverlays";
 
 export function TimelineLanes({
   pps,
@@ -104,13 +106,15 @@ export function TimelineLanes({
   const { collapsedGroupIds, expandedLaneOwnerIds, toggleGroupExpanded, toggleLaneOwnerExpanded } =
     useTimelineGroupDisclosure();
   const automationLanes = useAutomationLanes();
+  const allTransitionElements = useMemo(
+    () => tracks.flatMap(([, elements]) => elements.map(getPreviewElement)),
+    [getPreviewElement, tracks],
+  );
   // A group's automation clock is COMPOSITION time (groups doc §1.3), so its
   // synthetic lane element spans the whole composition rather than a clip.
   const compositionDuration = usePlayerStore((s) => s.duration);
   useAutomationSelectionKeyboard({ lanes: automationLanes });
   const { logicalRowsByTrack, groupByAnchor } = useTimelineLaneRowIndexes(logicalRows, groups);
-  // Which tracks are group MEMBERS, so their headers can render the level-2
-  // nesting their `aria-level` already reports.
   const groupMemberTracks = useMemo(
     () => new Set(groups.flatMap((group) => group.memberTracks)),
     [groups],
@@ -197,11 +201,7 @@ export function TimelineLanes({
           const ts = trackStyles.get(trackNum) ?? getTrackStyle("");
           const isPendingTrack =
             draggedClip?.started === true && !trackOrder.includes(trackNum) && els.length === 0;
-          // All lanes use the same uniform color — no alternating stripes.
           const rowBackground = theme.rowBackground;
-          // The beat-dot strip occupies the top of this track's lane (active track,
-          // or the music track when nothing is selected). When shown, keyframe
-          // diamonds shrink + drop to the bottom half so they don't collide with it.
           const beatStripOnTrack = trackShowsBeatStrip(els, beatAnalysis?.beatTimes, {
             selectedElementId,
             isMusicTrack,
@@ -223,9 +223,10 @@ export function TimelineLanes({
           // property lanes are showing. Undefined means "fill the row", which is
           // right only while it is collapsed and the row is nothing but bar.
           const clipBarHeight = rowExpanded ? TRACK_H - 2 * CLIP_Y : undefined;
-          // The clips whose envelopes this row draws, at their dragged positions.
-          // Once per row, not once per clip in the map below.
           const automationElements = els.map(getPreviewElement);
+          const transitionSeams = deriveTimelineTransitionSeams(allTransitionElements).filter(
+            (seam) => seam.incoming.track === trackNum,
+          );
           // Minted here because this is the only place that sees BOTH ends of
           // the disclosure: the caret in the sticky header and the diamond lanes
           // on the canvas. Keyed by display row, not by `trackNum`, which is a
@@ -553,6 +554,12 @@ export function TimelineLanes({
                     );
                   })
                 }
+                <TimelineTransitionOverlays
+                  seams={transitionSeams}
+                  pixelsPerSecond={pps}
+                  rowHeight={rowHeight}
+                  clipBarHeight={clipBarHeight}
+                />
                 {/* The automation lanes belong to the ROW, so they are mounted
                     here rather than under the active clip's property lanes.
                     Hanging off that clip meant selecting a sibling moved the

package/src/player/components/TimelineTransitionBadge.tsx

@@ -0,0 +1,59 @@
+import type { CSSProperties } from "react";
+
+interface TimelineTransitionBadgeProps {
+  centerPx: number;
+  top: number;
+  widthPx: number;
+  outgoingSrc?: string;
+  incomingSrc?: string;
+}
+
+export function TimelineTransitionBadge({
+  centerPx,
+  top,
+  widthPx,
+  outgoingSrc,
+  incomingSrc,
+}: TimelineTransitionBadgeProps) {
+  const style = {
+    left: centerPx,
+    top,
+    "--timeline-transition-zone-width": `${widthPx}px`,
+  } as CSSProperties;
+  return (
+    <div className="timeline-transition" style={style} aria-hidden="true">
+      <div className="timeline-transition__zone">
+        <div
+          className="timeline-transition__image timeline-transition__image--out"
+          style={outgoingSrc ? { backgroundImage: `url("${outgoingSrc}")` } : undefined}
+        />
+        <div
+          className="timeline-transition__image timeline-transition__image--in"
+          style={incomingSrc ? { backgroundImage: `url("${incomingSrc}")` } : undefined}
+        />
+      </div>
+      <div className="timeline-transition__badge">
+        <svg viewBox="0 0 20 20" role="presentation">
+          <defs>
+            <filter id="timeline-transition-glyph-blur">
+              <feGaussianBlur stdDeviation="0.55" />
+            </filter>
+          </defs>
+          <path
+            className="timeline-transition__frame timeline-transition__frame--out"
+            d="M3 5h8v10H3z"
+          />
+          <path
+            className="timeline-transition__frame timeline-transition__frame--in"
+            d="M9 5h8v10H9z"
+          />
+          <path
+            className="timeline-transition__intersection"
+            d="M9 5h2v10H9z"
+            filter="url(#timeline-transition-glyph-blur)"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+}

package/src/player/components/TimelineTransitionOverlays.tsx

@@ -0,0 +1,30 @@
+import { CLIP_Y } from "./timelineLayout";
+import { getTimelineElementIdentity } from "../lib/timelineElementHelpers";
+import type { TimelineTransitionSeam } from "./timelineTransitionSeams";
+import { TimelineTransitionBadge } from "./TimelineTransitionBadge";
+
+interface TimelineTransitionOverlaysProps {
+  seams: readonly TimelineTransitionSeam[];
+  pixelsPerSecond: number;
+  rowHeight: number;
+  clipBarHeight?: number;
+}
+
+export function TimelineTransitionOverlays({
+  seams,
+  pixelsPerSecond,
+  rowHeight,
+  clipBarHeight,
+}: TimelineTransitionOverlaysProps) {
+  const top = CLIP_Y + (clipBarHeight ?? rowHeight - 2 * CLIP_Y) / 2;
+  return seams.map((seam) => (
+    <TimelineTransitionBadge
+      key={`${getTimelineElementIdentity(seam.outgoing)}-${getTimelineElementIdentity(seam.incoming)}`}
+      centerPx={seam.centerTime * pixelsPerSecond}
+      top={top}
+      widthPx={Math.min(Math.max(seam.duration * pixelsPerSecond, 24), 32)}
+      outgoingSrc={seam.outgoing.src}
+      incomingSrc={seam.incoming.src}
+    />
+  ));
+}

package/src/player/components/VideoThumbnail.test.tsx

@@ -36,7 +36,8 @@ afterEach(() => {
   document.body.innerHTML = "";
 });
 
-async function render(rich = false) {
+async function render(width = 0) {
+  Object.defineProperty(host, "clientWidth", { configurable: true, value: width });
   root = createRoot(host);
   await act(async () => {
     root!.render(
@@ -47,7 +48,6 @@ async function render(rich = false) {
         projectId="p"
         sessionEpoch={1}
         priority="visible"
-        rich={rich}
       />,
     );
     await Promise.resolve();
@@ -55,7 +55,7 @@ async function render(rich = false) {
 }
 
 describe("VideoThumbnail", () => {
-  it("renders a scheduler-provided sparse poster", async () => {
+  it("does not acquire a thumbnail lease before the clip is measured", async () => {
     vi.mocked(decodeVideoThumbnail).mockResolvedValue({
       value: { kind: "image", url: "blob:poster", aspect: 16 / 9 },
       weight: 128,
@@ -63,29 +63,40 @@ describe("VideoThumbnail", () => {
 
     await render();
 
-    expect(decodeVideoThumbnail).toHaveBeenCalledWith(
-      expect.objectContaining({ frameCount: 1 }),
-      expect.any(AbortSignal),
-    );
-    expect(host.querySelector('img[src="blob:poster"]')).not.toBeNull();
-    expect(host.querySelector(".animate-pulse")).toBeNull();
+    expect(decodeVideoThumbnail).not.toHaveBeenCalled();
   });
 
-  it("requests a rich filmstrip only for interaction actors", async () => {
+  it("requests a geometry-sized filmstrip by default", async () => {
     vi.mocked(decodeVideoThumbnail).mockResolvedValue({
       value: { kind: "filmstrip", urls: ["blob:a", "blob:b"], aspect: 16 / 9 },
       weight: 256,
     });
 
-    await render(true);
+    await render(500);
 
+    expect(decodeVideoThumbnail).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({ frameCount: 1 }),
+      expect.any(AbortSignal),
+    );
     expect(decodeVideoThumbnail).toHaveBeenCalledWith(
-      expect.objectContaining({ frameCount: 6 }),
+      expect.objectContaining({ frameCount: 8 }),
       expect.any(AbortSignal),
     );
     expect(host.querySelectorAll("img").length).toBeGreaterThan(0);
   });
 
+  it("issues a single decode job for a narrow clip", async () => {
+    vi.mocked(decodeVideoThumbnail).mockResolvedValue({
+      value: { kind: "image", url: "blob:poster", aspect: 16 / 9 },
+      weight: 128,
+    });
+
+    await render(100);
+
+    expect(decodeVideoThumbnail).toHaveBeenCalledTimes(1);
+  });
+
   it("clears the loading shimmer when the scheduled decode fails", async () => {
     vi.mocked(decodeVideoThumbnail).mockRejectedValue(new Error("decode failed"));