@hypit/hypit 0.1.3 → 0.1.5

package/packages/studio/src/ui/material-preview.ts

@@ -129,7 +129,7 @@ async function audioWaveform(url: string): Promise<string | undefined> {
   }
 }
 
-function audioPreview(url: string): Promise<string | undefined> {
+export function audioPreview(url: string): Promise<string | undefined> {
   const held = generatedAudio.get(url);
   if (held !== undefined) return held;
   const pending = audioWaveform(url).catch(() => undefined).then((waveform) => {

package/packages/studio/src/ui/overlay.ts

@@ -14,12 +14,13 @@ export type Box = {
   readonly widthPx: number; readonly heightPx: number;
 };
 
-export type Measure = (clipId: string) => Box | undefined;
+export type Measure = (clipId: string) => (Box & { readonly stackOrder: number }) | undefined;
 
 export type Overlay = {
   readonly element: SVGSVGElement;
   /** The topmost clip drawn at a point, in client coordinates. */
   hitTest(clientX: number, clientY: number): Clip | undefined;
+  hitsAt(clientX: number, clientY: number): readonly Clip[];
   /** Redraw against the picture, once it has mounted or moved. */
   refresh(): void;
 };
@@ -62,21 +63,24 @@ export function createOverlay(store: Store, measure: Measure): Overlay {
   element.setAttribute("class", "stage-overlay");
   element.setAttribute("preserveAspectRatio", "none");
 
-  let live: readonly Clip[] = [];
+  let entities: readonly Clip[] = [];
   let canvas = { width: 1, height: 1 };
-  let last: { snapshot: StudioSnapshot; selected: Clip | undefined; frame: number } | undefined;
+  let last: { snapshot: StudioSnapshot; selected: Clip | undefined } | undefined;
 
   /**
    * The box is measured off the picture rather than restated from the Source:
    * motion moves an element across its span, so only what was drawn knows where
    * it ended up. A Present that has not mounted has no box to draw.
    */
-  const drawnBox = (clip: Clip): Box | undefined => {
-    const ids = clip.presentId === undefined ? clip.renderIds : [clip.presentId];
-    const boxes = ids.flatMap((id) => {
+  const drawnParts = (clip: Clip) => {
+    const ids = clip.renderIds.length > 0 ? clip.renderIds : clip.presentId === undefined ? [] : [clip.presentId];
+    return ids.flatMap((id) => {
       const found = measure(id);
       return found === undefined ? [] : [found];
     });
+  };
+  const drawnBox = (clip: Clip): Box | undefined => {
+    const boxes = drawnParts(clip);
     if (boxes.length === 0) return undefined;
     const left = Math.min(...boxes.map((box) => box.xPx));
     const top = Math.min(...boxes.map((box) => box.yPx));
@@ -87,23 +91,23 @@ export function createOverlay(store: Store, measure: Measure): Overlay {
 
   const draw = (): void => {
     if (last === undefined) return;
-    const { snapshot, selected, frame } = last;
+    const { snapshot, selected } = last;
         canvas = { width: snapshot.space.canvasWidth, height: snapshot.space.canvasHeight };
     element.setAttribute("viewBox", `0 0 ${canvas.width} ${canvas.height}`);
     element.replaceChildren();
-    // Only clips actually on screen can be picked out of the picture.
-    live = store.clipsAt(frame);
+    // An editing interval can end before its visual representation disappears.
+    // The renderer decides which associated parts are visible at this frame.
+    entities = snapshot.tracks.flatMap((track) => track.clips);
 
     if (selected === undefined) return;
     const tones = intentTones(snapshot);
     const tone = tones.get(selected.authoredId);
-    const onScreen = frame >= selected.startFrame && frame < selected.endFrameExclusive;
     const box = drawnBox(selected);
     // A Present that is not on screen at this frame was never drawn, so there
     // is nothing to put a box around.
     if (box === undefined) return;
     const group = document.createElementNS(SVG_NS, "g");
-    group.setAttribute("class", `box${onScreen ? "" : " box-elsewhere"}${tone === undefined ? "" : ` tone-${tone}`}`);
+    group.setAttribute("class", `box${tone === undefined ? "" : ` tone-${tone}`}`);
 
     group.append(rect(box, "box-content"));
 
@@ -111,34 +115,35 @@ export function createOverlay(store: Store, measure: Measure): Overlay {
     label.setAttribute("x", String(box.xPx + 10));
     label.setAttribute("y", String(Math.max(28, box.yPx - 12)));
     label.setAttribute("class", "box-label");
-    label.textContent = onScreen ? selected.display.title : `${selected.display.title} (not at this frame)`;
+    label.textContent = selected.display.title;
     group.append(label);
     element.append(group);
   };
 
-  store.subscribe(({ snapshot, selection, playhead }) => {
+  store.subscribe(({ snapshot, selection }) => {
     last = {
       snapshot,
       selected: selection.kind === "clip" ? store.clip(selection.clipId) : undefined,
-      frame: playhead.frame,
     };
     draw();
   });
 
-  return {
-    element,
-    refresh: draw,
-    hitTest(clientX, clientY) {
+  const hitsAt = (clientX: number, clientY: number): readonly Clip[] => {
       const box = element.getBoundingClientRect();
-      if (box.width === 0 || box.height === 0) return undefined;
+      if (box.width === 0 || box.height === 0) return [];
       const x = (clientX - box.left) / box.width * canvas.width;
       const y = (clientY - box.top) / box.height * canvas.height;
-      // clipsAt already returns topmost first, so the first hit is the one an
-      // author would say they clicked on.
-      return live.find((clip) => {
-        const box = drawnBox(clip);
-        return box !== undefined && inside(box, x, y);
-      });
-    },
+      // Hit individual parts, not the empty space inside a group's union box.
+      const hits = entities.flatMap((clip) => drawnParts(clip)
+        .filter((part) => inside(part, x, y))
+        .map((part) => ({ clip, order: part.stackOrder })))
+        .sort((left, right) => right.order - left.order);
+      return [...new Map(hits.map(({ clip }) => [clip.id, clip])).values()];
+  };
+  return {
+    element,
+    refresh: draw,
+    hitsAt,
+    hitTest: (x, y) => hitsAt(x, y)[0],
   };
 }

package/packages/studio/src/ui/scrub-preview.ts

@@ -0,0 +1,108 @@
+import type { StudioSnapshot } from "../shared.js";
+import { feedbackClock } from "../feedback.js";
+
+type PreviewWindow = Window & {
+  __hypitSeekFrame?: (frame: number) => Promise<boolean>;
+  __hypitSetMuted?: (muted: boolean) => Promise<boolean>;
+};
+
+/** One lazy, muted picture for scrubbing; it never changes the main playhead. */
+export function createScrubPreview(container: HTMLElement) {
+  const element = document.createElement("div");
+  element.className = "scrub-preview";
+  element.hidden = true;
+  element.innerHTML = '<div class="scrub-preview-picture"><span>Loading frame…</span></div><div class="scrub-preview-time"></div>';
+  element.setAttribute("aria-hidden", "true");
+  const picture = element.querySelector<HTMLElement>(".scrub-preview-picture")!;
+  const status = picture.querySelector<HTMLElement>("span")!;
+  const time = element.querySelector<HTMLElement>(".scrub-preview-time")!;
+  container.append(element);
+  let iframe: HTMLIFrameElement | undefined;
+  let revision: number | undefined;
+  let ready = false;
+  let seeking = false;
+  let requested: number | undefined;
+  let displayed: number | undefined;
+
+  const seek = async (): Promise<void> => {
+    const current = iframe;
+    if (!ready || seeking || current === undefined || requested === undefined || requested === displayed) return;
+    seeking = true;
+    try {
+      while (iframe === current && requested !== undefined && requested !== displayed) {
+        const frame: number = requested;
+        const target = current.contentWindow as PreviewWindow | null;
+        const placed = await target?.__hypitSeekFrame?.(frame);
+        if (iframe !== current) return;
+        if (!placed) throw new Error("Frame unavailable");
+        displayed = frame;
+        if (requested === frame) {
+          current.style.visibility = "visible";
+          status.hidden = true;
+          element.dataset.frame = String(frame);
+        }
+      }
+    } catch {
+      if (iframe === current) status.textContent = "Frame unavailable";
+    } finally {
+      if (iframe === current) seeking = false;
+    }
+  };
+  const hide = (): void => { element.hidden = true; requested = undefined; };
+  const clear = (): void => {
+    hide(); iframe?.remove(); iframe = undefined; revision = undefined;
+    ready = false; seeking = false; displayed = undefined;
+    delete element.dataset.frame;
+  };
+  return {
+    hide, clear,
+    show(snapshot: StudioSnapshot, frame: number, clientX: number): void {
+      if (snapshot.revision !== revision) clear();
+      if (iframe === undefined) {
+        revision = snapshot.revision;
+        const { canvasWidth, canvasHeight } = snapshot.space;
+        const scale = Math.min(200 / canvasWidth, 170 / canvasHeight);
+        picture.style.width = `${canvasWidth * scale}px`;
+        picture.style.height = `${canvasHeight * scale}px`;
+        const created = document.createElement("iframe");
+        created.title = "Hovered frame";
+        created.tabIndex = -1;
+        created.setAttribute("sandbox", "allow-scripts allow-same-origin");
+        created.setAttribute("allow", "autoplay 'none'");
+        created.style.width = `${canvasWidth}px`;
+        created.style.height = `${canvasHeight}px`;
+        created.style.transform = `scale(${scale})`;
+        created.style.visibility = "hidden";
+        created.addEventListener("load", () => {
+          void (async () => {
+            const target = created.contentWindow as PreviewWindow | null;
+            await target?.__hypitSetMuted?.(true);
+            if (iframe !== created) return;
+            ready = true;
+            await seek();
+          })().catch(() => { if (iframe === created) status.textContent = "Frame unavailable"; });
+        });
+        created.srcdoc = snapshot.preview.srcdoc;
+        iframe = created;
+        picture.prepend(created);
+      }
+      requested = frame;
+      element.hidden = false;
+      const room = container.getBoundingClientRect();
+      const left = Math.max(0, Math.min(clientX - room.left - element.offsetWidth / 2, room.width - element.offsetWidth));
+      element.style.left = `${left}px`;
+      time.textContent = feedbackClock(frame * snapshot.space.frameRate.denominator / snapshot.space.frameRate.numerator);
+      if (frame !== displayed) {
+        iframe.style.visibility = "hidden";
+        status.textContent = "Loading frame…";
+        status.hidden = false;
+        delete element.dataset.frame;
+      } else {
+        iframe.style.visibility = "visible";
+        status.hidden = true;
+        element.dataset.frame = String(frame);
+      }
+      void seek();
+    },
+  };
+}

package/packages/studio/src/ui/sidebar-panel.ts

@@ -0,0 +1,31 @@
+import { icon } from "./icons.js";
+
+/** Shared chrome; each view owns its navigation choices, toolbar and content. */
+export function createSidebarPanel(mark: string, navigationLabel: string) {
+  const element = document.createElement("div");
+  element.className = "sidebar-panel";
+  element.innerHTML = `
+    <div class="sidebar-panel-heading"><span class="sidebar-panel-mark" aria-hidden="true">${icon(mark)}</span></div>
+    <div class="sidebar-panel-toolbar"></div>
+    <nav class="sidebar-panel-nav"></nav>
+    <div class="sidebar-panel-content"></div>`;
+  const navigation = element.querySelector<HTMLElement>("nav")!;
+  navigation.setAttribute("aria-label", navigationLabel);
+  return {
+    element, navigation,
+    toolbar: element.querySelector<HTMLElement>(".sidebar-panel-toolbar")!,
+    content: element.querySelector<HTMLElement>(".sidebar-panel-content")!,
+  };
+}
+
+export function sidebarItem(input: { label: string; icon: string; selected: boolean; select(): void }) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = `sidebar-panel-item${input.selected ? " active" : ""}`;
+  button.setAttribute("aria-label", input.label);
+  button.setAttribute("aria-pressed", String(input.selected));
+  button.title = input.label;
+  button.innerHTML = icon(input.icon);
+  button.addEventListener("click", input.select);
+  return button;
+}

package/packages/studio/src/ui/stage.ts

@@ -1,12 +1,21 @@
-import type { StudioSnapshot } from "../shared.js";
+import { createArtifactPreview } from "./artifact-preview.js";
+import type { StudioArtifactView, StudioSnapshot } from "../shared.js";
 import { createOverlay } from "./overlay.js";
 import { icon, setIcon } from "./icons.js";
+import { createScrubPreview } from "./scrub-preview.js";
 import type { State, Store } from "./selection.js";
 
 export type Stage = {
   readonly element: HTMLElement;
   /** Start or stop playback, however the request arrived. */
   toggle(): void;
+  pause(): void;
+  /** Change picture interaction while preserving Studio's selection. */
+  setReviewMode(enabled: boolean): void;
+  /** Return from a Result artifact to the composition player. */
+  showComposition(): void;
+  openArtifact(artifact: StudioArtifactView): void;
+  renameArtifact(artifact: StudioArtifactView): void;
 };
 
 /**
@@ -17,19 +26,25 @@ export type Stage = {
  * drives frames, not seconds, and lands on exactly the frame the renderer would
  * photograph.
  */
-export function createStage(store: Store): Stage {
+export function createStage(store: Store, selectedArtifact: (id: string | undefined) => void): Stage {
   const element = document.createElement("section");
   element.className = "stage";
   element.innerHTML = `
     <div class="stage-heading">
       <div class="stage-title">${icon("preview")}<strong>Preview</strong></div>
+      <button type="button" class="stage-return" hidden>Back to composition</button>
     </div>
     <div class="stage-viewport">
       <div class="stage-scaler">
         <iframe title="Preview" sandbox="allow-scripts allow-same-origin" allow="autoplay"></iframe>
       </div>
     </div>
+    <div class="stage-progress" hidden>
+      <input class="stage-scrubber" type="range" min="0" max="0" value="0" step="0.01" aria-label="Media time" hidden>
+    </div>
     <div class="stage-bar">
+      <span class="stage-time" hidden></span>
+      <div class="stage-transport">
       <button type="button" data-previous aria-label="Previous frame" title="Previous frame">
         ${icon("previous")}
       </button>
@@ -39,6 +54,7 @@ export function createStage(store: Store): Stage {
       <button type="button" data-next aria-label="Next frame" title="Next frame">
         ${icon("next")}
       </button>
+      </div>
       <button type="button" data-mute aria-label="Mute" class="stage-mute">
         <span data-mute-icon>${icon("volume")}</span>
       </button>
@@ -47,6 +63,7 @@ export function createStage(store: Store): Stage {
   const viewport = element.querySelector<HTMLElement>(".stage-viewport")!;
   const scaler = element.querySelector<HTMLElement>(".stage-scaler")!;
   const iframe = element.querySelector<HTMLIFrameElement>("iframe")!;
+  let reviewMode = false;
   /**
    * Measure a clip in the rendered picture.
    *
@@ -57,17 +74,30 @@ export function createStage(store: Store): Stage {
    * of its enter and exit, and selecting a clip lands the playhead on exactly
    * the frame where that displacement is largest.
    */
-  const measure = (clipId: string): { xPx: number; yPx: number; widthPx: number; heightPx: number } | undefined => {
+  const measure = (clipId: string): { xPx: number; yPx: number; widthPx: number; heightPx: number; stackOrder: number } | undefined => {
     const document_ = iframe.contentDocument;
     if (document_ === null) return undefined;
     const present = document_.querySelector(`[data-hypit-present-id="${CSS.escape(clipId)}"]`);
+    if (present === null) return undefined;
+    const current = store.current();
+    if (current === undefined) return undefined;
+    const frameRate = fps(current.snapshot);
+    const start = Number(present.getAttribute("data-start"));
+    const end = start + Number(present.getAttribute("data-duration"));
+    if (current.playhead.frame < Math.round(start * frameRate)
+      || current.playhead.frame >= Math.round(end * frameRate)) return undefined;
     // The present spans the whole canvas; the drawn box is its frame element.
     const drawn = present?.querySelector(`[data-hypit-element-id="${CSS.escape(`${clipId}:frame`)}"]`)
       ?? present?.querySelector("[data-hypit-element-id]");
     if (drawn === null || drawn === undefined) return undefined;
+    for (let ancestor: Element | null = drawn; ancestor !== null; ancestor = ancestor.parentElement) {
+      const style = document_.defaultView!.getComputedStyle(ancestor);
+      if (style.display === "none" || style.visibility === "hidden" || Number(style.opacity) === 0) return undefined;
+    }
     const box = drawn.getBoundingClientRect();
     if (box.width === 0 && box.height === 0) return undefined;
-    return { xPx: box.left, yPx: box.top, widthPx: box.width, heightPx: box.height };
+    return { xPx: box.left, yPx: box.top, widthPx: box.width, heightPx: box.height,
+      stackOrder: Number(document_.defaultView!.getComputedStyle(present).zIndex) || 0 };
   };
 
   // The overlay is a sibling of the iframe inside the scaler, so it inherits the
@@ -78,13 +108,45 @@ export function createStage(store: Store): Stage {
   // Clicking the picture selects whatever is drawn under the pointer, which is
   // the third way into the same selection.
   scaler.addEventListener("click", (event) => {
+    if (reviewMode) { toggle(); return; }
     const clip = overlay.hitTest(event.clientX, event.clientY);
     if (clip !== undefined) store.select(clip.id, "video");
     else store.clearSelection();
   });
+  // A broad component frame can cover smaller elements. Offer all actual
+  // Companion hits without special knowledge of captions or any other family.
+  let selectionMenu: HTMLElement | undefined;
+  const closeSelectionMenu = (): void => { selectionMenu?.remove(); selectionMenu = undefined; };
+  scaler.addEventListener("contextmenu", (event) => {
+    if (reviewMode) { event.preventDefault(); return; }
+    const hits = overlay.hitsAt(event.clientX, event.clientY);
+    if (hits.length === 0) return;
+    event.preventDefault(); stop(); closeSelectionMenu();
+    const menu = document.createElement("div");
+    menu.className = "selection-menu";
+    menu.setAttribute("role", "menu"); menu.setAttribute("aria-label", "Elements at this point");
+    for (const hit of hits) {
+      const option = document.createElement("button"); option.type = "button";
+      option.setAttribute("role", "menuitem"); option.textContent = hit.display.title;
+      option.title = hit.id;
+      option.addEventListener("click", () => { store.select(hit.id, "video"); closeSelectionMenu(); });
+      menu.append(option);
+    }
+    element.append(menu);
+    menu.style.left = `${Math.max(0, Math.min(event.clientX, window.innerWidth - menu.offsetWidth - 8))}px`;
+    menu.style.top = `${Math.max(0, Math.min(event.clientY, window.innerHeight - menu.offsetHeight - 8))}px`;
+    selectionMenu = menu; menu.querySelector("button")?.focus();
+  });
+  document.addEventListener("pointerdown", (event) => {
+    if (event.target instanceof Node && !selectionMenu?.contains(event.target)) closeSelectionMenu();
+  });
+  document.addEventListener("keydown", (event) => { if (event.key === "Escape") closeSelectionMenu(); });
   // The room around the picture is empty in the plainest sense.
   viewport.addEventListener("click", (event) => {
-    if (event.target === viewport) store.clearSelection();
+    if (event.target === viewport) {
+      if (reviewMode) toggle();
+      else store.clearSelection();
+    }
   });
   const play = element.querySelector<HTMLButtonElement>("[data-play]")!;
   const previous = element.querySelector<HTMLButtonElement>("[data-previous]")!;
@@ -152,6 +214,7 @@ export function createStage(store: Store): Stage {
   };
 
   const toggle = (): void => {
+    if (artifactPreview.selected !== undefined) { artifactPreview.toggle(); return; }
     if (state === undefined) return;
     if (playing) { stop(); return; }
     playing = true;
@@ -172,21 +235,119 @@ export function createStage(store: Store): Stage {
   };
   play.addEventListener("click", toggle);
   previous.addEventListener("click", () => {
-    if (state !== undefined) store.seek(state.playhead.frame - 1, "video");
+    if (artifactPreview.selected !== undefined) artifactPreview.seek((artifactPreview.media?.currentTime ?? 0) - 5);
+    else if (state !== undefined) store.seek(state.playhead.frame - 1, "video");
   });
   next.addEventListener("click", () => {
-    if (state !== undefined) store.seek(state.playhead.frame + 1, "video");
+    if (artifactPreview.selected !== undefined) artifactPreview.seek((artifactPreview.media?.currentTime ?? 0) + 5);
+    else if (state !== undefined) store.seek(state.playhead.frame + 1, "video");
   });
 
   const applyMuted = (): void => {
     setIcon(muteIcon, muted ? "muted" : "volume");
     mute.setAttribute("aria-label", muted ? "Unmute" : "Mute");
+    if (artifactPreview.media !== undefined) artifactPreview.media.muted = muted;
     (iframe.contentWindow as SeekWindow | null)?.__hypitSetMuted?.(muted);
   };
   mute.addEventListener("click", () => { muted = !muted; applyMuted(); });
 
+  const title = element.querySelector<HTMLElement>(".stage-title strong")!;
+  const back = element.querySelector<HTMLButtonElement>(".stage-return")!;
+  const scrubber = element.querySelector<HTMLInputElement>(".stage-scrubber")!;
+  const progress = element.querySelector<HTMLElement>(".stage-progress")!;
+  const scrubPreview = createScrubPreview(progress);
+  scrubber.addEventListener("pointermove", (event) => {
+    if (!reviewMode || state === undefined || scrubber.disabled || artifactPreview.selected !== undefined) return;
+    const box = scrubber.getBoundingClientRect();
+    // Native range thumbs travel between their centers, not the input edges.
+    const fraction = Math.max(0, Math.min(1, (event.clientX - box.left - 6) / Math.max(1, box.width - 12)));
+    const frame = Math.round(fraction * Math.max(0, state.snapshot.space.frameCount - 1));
+    scrubPreview.show(state.snapshot, frame, event.clientX);
+  });
+  scrubber.addEventListener("pointerleave", scrubPreview.hide);
+  scrubber.addEventListener("blur", scrubPreview.hide);
+  const time = element.querySelector<HTMLElement>(".stage-time")!;
+  const transport = element.querySelector<HTMLElement>(".stage-transport")!;
+  const clock = (seconds: number): string => {
+    const ticks = Math.max(0, Math.round(seconds * 100));
+    const whole = Math.floor(ticks / 100);
+    return `${Math.floor(whole / 60)}:${String(whole % 60).padStart(2, "0")}.${String(ticks % 100).padStart(2, "0")}`;
+  };
+  const artifactPreview = createArtifactPreview(() => {
+    if (artifactPreview.selected === undefined) return;
+    const media = artifactPreview.media;
+    const timed = media !== undefined;
+    const duration = media !== undefined && Number.isFinite(media.duration) ? media.duration : 0;
+    transport.hidden = !timed;
+    mute.hidden = !timed;
+    progress.hidden = scrubber.hidden = !timed;
+    time.hidden = !timed;
+    play.disabled = duration <= 0 || media?.error != null;
+    previous.disabled = next.disabled = play.disabled;
+    scrubber.disabled = duration <= 0;
+    scrubber.step = "0.01";
+    scrubber.setAttribute("aria-label", "Media time");
+    scrubber.max = String(duration);
+    scrubber.value = String(media?.currentTime ?? 0);
+    time.textContent = `${clock(media?.currentTime ?? 0)} / ${clock(duration)}`;
+    setIcon(playIcon, media !== undefined && !media.paused ? "pause" : "play");
+    play.setAttribute("aria-label", media !== undefined && !media.paused ? "Pause" : "Play");
+  });
+  viewport.append(artifactPreview.element);
+  const compositionTime = (): void => {
+    if (state === undefined || artifactPreview.selected !== undefined) return;
+    const rate = fps(state.snapshot);
+    progress.hidden = scrubber.hidden = time.hidden = false;
+    scrubber.disabled = !ready;
+    scrubber.step = String(1 / rate);
+    scrubber.max = String(Math.max(0, state.snapshot.space.frameCount - 1) / rate);
+    scrubber.value = String(state.playhead.frame / rate);
+    scrubber.setAttribute("aria-label", "Composition time");
+    time.textContent = `${clock(state.playhead.frame / rate)} / ${clock(state.snapshot.space.frameCount / rate)}`;
+  };
+  scrubber.addEventListener("input", () => {
+    if (artifactPreview.selected !== undefined) artifactPreview.seek(Number(scrubber.value));
+    else if (state !== undefined) store.seek(Math.round(Number(scrubber.value) * fps(state.snapshot)), "video");
+  });
+
+  const returnToComposition = (): void => {
+    artifactPreview.close();
+    selectedArtifact(undefined);
+    scaler.hidden = false;
+    back.hidden = true;
+    compositionTime();
+    transport.hidden = mute.hidden = false;
+    play.disabled = previous.disabled = next.disabled = false;
+    previous.title = "Previous frame";
+    previous.setAttribute("aria-label", previous.title);
+    next.title = "Next frame";
+    next.setAttribute("aria-label", next.title);
+    title.textContent = "Preview";
+    title.removeAttribute("title");
+    setIcon(playIcon, "play");
+    play.setAttribute("aria-label", "Play");
+    fit();
+    if (state !== undefined && ready) seekPicture(state.playhead.frame);
+  };
+  back.addEventListener("click", returnToComposition);
+
+  const openArtifact = (artifact: StudioArtifactView): void => {
+    stop();
+    scaler.hidden = true;
+    back.hidden = false;
+    title.textContent = artifact.displayName ?? artifact.output;
+    title.title = artifact.output;
+    previous.title = "Back 5 seconds";
+    next.title = "Forward 5 seconds";
+    previous.setAttribute("aria-label", previous.title);
+    next.setAttribute("aria-label", next.title);
+    artifactPreview.open(artifact, muted);
+    selectedArtifact(artifact.id);
+  };
+
   iframe.addEventListener("load", () => {
     ready = true;
+    compositionTime();
     if (state !== undefined) seekPicture(state.playhead.frame);
     applyMuted();
     // The box could not be measured until now.
@@ -197,16 +358,20 @@ export function createStage(store: Store): Stage {
 
   store.subscribe((value) => {
     const first = state === undefined;
+    const moved = state !== undefined && (state.playhead.frame !== value.playhead.frame || state.selection !== value.selection);
     state = value;
+    if (moved && value.playhead.origin !== "play" && artifactPreview.selected !== undefined) returnToComposition();
     if (value.snapshot.revision !== mounted) {
+      scrubPreview.clear();
       mounted = value.snapshot.revision;
-      stop();
+      if (artifactPreview.selected === undefined) stop();
       ready = false;
       const preview = value.snapshot.preview;
       iframe.srcdoc = preview.srcdoc;
       fit();
     }
     if (first) fit();
+    compositionTime();
 
     // Playing and scrubbing are different requests: one lets material run on
     // its own clock, the other moves it. Asking a decoder for a fresh seek
@@ -227,5 +392,19 @@ export function createStage(store: Store): Stage {
     if (playing) overlay.refresh();
   });
 
-  return { element, toggle };
+  return { element, toggle, openArtifact,
+    setReviewMode(enabled) {
+      reviewMode = enabled;
+      element.classList.toggle("stage-review", enabled);
+      overlay.element.style.display = enabled ? "none" : "";
+      closeSelectionMenu();
+      if (!enabled) scrubPreview.clear();
+    },
+    pause() { stop(); artifactPreview.media?.pause(); },
+    showComposition() { if (artifactPreview.selected !== undefined) returnToComposition(); },
+    renameArtifact(artifact) {
+      const selected = artifactPreview.selected;
+      if (selected?.build === artifact.build && selected.output === artifact.output) title.textContent = artifact.displayName ?? artifact.output;
+    },
+  };
 }