@hypit/hypit 0.1.4 → 0.1.6

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

@@ -20,6 +20,7 @@ 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;
 };
@@ -127,19 +128,22 @@ export function createOverlay(store: Store, measure: Measure): Overlay {
     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;
       // Hit individual parts, not the empty space inside a group's union box.
-      return entities.flatMap((clip) => drawnParts(clip)
+      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)[0]?.clip;
-    },
+        .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,110 @@
+import { uiAttr, uiText, t } from "./i18n.js";
+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></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")!;
+  uiText(status, "player.frame-loading");
+  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(t("player.frame-unavailable"));
+        displayed = frame;
+        if (requested === frame) {
+          current.style.visibility = "visible";
+          status.hidden = true;
+          element.dataset.frame = String(frame);
+        }
+      }
+    } catch {
+      if (iframe === current) uiText(status, "player.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");
+        uiAttr(created, "title", "player.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) uiText(status, "player.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";
+        uiText(status, "player.frame-loading");
+        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/stage.ts

@@ -1,13 +1,20 @@
+import { uiLabel, uiAttribute, uiText, uiAttr, userText } from "./i18n.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;
 };
@@ -25,29 +32,31 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
   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 class="stage-title">${icon("preview")}<strong>${uiLabel("player.preview")}</strong></div>
+      <button type="button" class="stage-return" hidden>${uiLabel("player.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>
+        <iframe ${uiAttribute("title", "player.preview")} sandbox="allow-scripts allow-same-origin" allow="autoplay"></iframe>
       </div>
     </div>
-    <input class="stage-scrubber" type="range" min="0" max="0" value="0" step="0.01" aria-label="Media time" hidden>
+    <div class="stage-progress" hidden>
+      <input class="stage-scrubber" type="range" min="0" max="0" value="0" step="0.01" ${uiAttribute("aria-label", "player.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">
+      <button type="button" data-previous ${uiAttribute("aria-label", "player.previous-frame")} ${uiAttribute("title", "player.previous-frame")}>
         ${icon("previous")}
       </button>
-      <button type="button" data-play aria-label="Play">
+      <button type="button" data-play ${uiAttribute("aria-label", "player.play")}>
         <span data-icon>${icon("play")}</span>
       </button>
-      <button type="button" data-next aria-label="Next frame" title="Next frame">
+      <button type="button" data-next ${uiAttribute("aria-label", "player.next-frame")} ${uiAttribute("title", "player.next-frame")}>
         ${icon("next")}
       </button>
       </div>
-      <button type="button" data-mute aria-label="Mute" class="stage-mute">
+      <button type="button" data-mute ${uiAttribute("aria-label", "player.mute")} class="stage-mute">
         <span data-mute-icon>${icon("volume")}</span>
       </button>
     </div>`;
@@ -55,6 +64,7 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
   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.
    *
@@ -99,13 +109,45 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
   // 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"); uiAttr(menu, "aria-label", "player.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]")!;
@@ -163,7 +205,7 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
     const wasPlaying = playing;
     playing = false;
     setIcon(playIcon, "play");
-    play.setAttribute("aria-label", "Play");
+    uiAttr(play, "aria-label", "player.play");
     if (raf !== 0) cancelAnimationFrame(raf);
     raf = 0;
     // Settle the picture on the frame the transport stopped at.
@@ -178,7 +220,7 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
     if (playing) { stop(); return; }
     playing = true;
     setIcon(playIcon, "pause");
-    play.setAttribute("aria-label", "Pause");
+    uiAttr(play, "aria-label", "player.pause");
     const total = state.snapshot.space.frameCount;
     const rate = fps(state.snapshot);
     fromFrame = state.playhead.frame >= total - 1 ? 0 : state.playhead.frame;
@@ -204,7 +246,7 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
 
   const applyMuted = (): void => {
     setIcon(muteIcon, muted ? "muted" : "volume");
-    mute.setAttribute("aria-label", muted ? "Unmute" : "Mute");
+    uiAttr(mute, "aria-label", muted ? "player.unmute" : "player.mute");
     if (artifactPreview.media !== undefined) artifactPreview.media.muted = muted;
     (iframe.contentWindow as SeekWindow | null)?.__hypitSetMuted?.(muted);
   };
@@ -213,6 +255,18 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
   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 => {
@@ -227,29 +281,29 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
     const duration = media !== undefined && Number.isFinite(media.duration) ? media.duration : 0;
     transport.hidden = !timed;
     mute.hidden = !timed;
-    scrubber.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");
+    uiAttr(scrubber, "aria-label", "player.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");
+    uiAttr(play, "aria-label", media !== undefined && !media.paused ? "player.pause" : "player.play");
   });
   viewport.append(artifactPreview.element);
   const compositionTime = (): void => {
     if (state === undefined || artifactPreview.selected !== undefined) return;
     const rate = fps(state.snapshot);
-    scrubber.hidden = time.hidden = false;
+    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");
+    uiAttr(scrubber, "aria-label", "player.composition-time");
     time.textContent = `${clock(state.playhead.frame / rate)} / ${clock(state.snapshot.space.frameCount / rate)}`;
   };
   scrubber.addEventListener("input", () => {
@@ -265,14 +319,14 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
     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";
+    uiAttr(previous, "title", "player.previous-frame");
+    uiAttr(previous, "aria-label", "player.previous-frame");
+    uiAttr(next, "title", "player.next-frame");
+    uiAttr(next, "aria-label", "player.next-frame");
+    uiText(title, "player.preview");
     title.removeAttribute("title");
     setIcon(playIcon, "play");
-    play.setAttribute("aria-label", "Play");
+    uiAttr(play, "aria-label", "player.play");
     fit();
     if (state !== undefined && ready) seekPicture(state.playhead.frame);
   };
@@ -282,12 +336,12 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
     stop();
     scaler.hidden = true;
     back.hidden = false;
-    title.textContent = artifact.displayName ?? artifact.output;
+    userText(title, 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);
+    uiAttr(previous, "title", "player.back-5-seconds");
+    uiAttr(next, "title", "player.forward-5-seconds");
+    uiAttr(previous, "aria-label", "player.back-5-seconds");
+    uiAttr(next, "aria-label", "player.forward-5-seconds");
     artifactPreview.open(artifact, muted);
     selectedArtifact(artifact.id);
   };
@@ -309,6 +363,7 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
     state = value;
     if (moved && value.playhead.origin !== "play" && artifactPreview.selected !== undefined) returnToComposition();
     if (value.snapshot.revision !== mounted) {
+      scrubPreview.clear();
       mounted = value.snapshot.revision;
       if (artifactPreview.selected === undefined) stop();
       ready = false;
@@ -339,9 +394,18 @@ export function createStage(store: Store, selectedArtifact: (id: string | undefi
   });
 
   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;
+      if (selected?.build === artifact.build && selected.output === artifact.output) userText(title, artifact.displayName ?? artifact.output);
     },
   };
 }