@hypit/hypit 0.1.3 → 0.1.4

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

@@ -0,0 +1,99 @@
+import type { StudioArtifactView } from "../shared.js";
+import { audioPreview } from "./material-preview.js";
+
+/** A media viewer only: it does not change the composition or its playhead. */
+export function createArtifactPreview(changed: () => void) {
+  const element = document.createElement("div");
+  element.className = "stage-artifact";
+  element.hidden = true;
+  let selected: StudioArtifactView | undefined;
+  let media: HTMLMediaElement | undefined;
+  let generation = 0;
+
+  function close(): void {
+    generation += 1;
+    selected = undefined;
+    if (media !== undefined) {
+      media.pause();
+      media.removeAttribute("src");
+      media.load();
+    }
+    media = undefined;
+    element.replaceChildren();
+    element.hidden = true;
+  }
+
+  function open(artifact: StudioArtifactView, muted: boolean): void {
+    close();
+    const current = generation;
+    selected = artifact;
+    element.hidden = false;
+    const url = `/__studio/artifact?${new URLSearchParams({ build: artifact.build, output: artifact.output })}`;
+    const error = document.createElement("p");
+    error.className = "stage-media-error";
+    error.hidden = true;
+    error.setAttribute("role", "status");
+    const failed = () => {
+      if (generation !== current) return;
+      error.textContent = "This media could not be opened in the browser.";
+      error.hidden = false;
+      changed();
+    };
+    if (artifact.mediaType.startsWith("image/")) {
+      const image = document.createElement("img");
+      image.alt = artifact.displayName ?? artifact.output;
+      image.addEventListener("error", failed);
+      image.src = url;
+      element.append(image);
+    } else {
+      const audio = artifact.mediaType.startsWith("audio/");
+      const player = document.createElement(audio ? "audio" : "video");
+      media = player;
+      if (player instanceof HTMLVideoElement) player.playsInline = true;
+      player.preload = "metadata";
+      player.muted = muted;
+      for (const event of ["loadedmetadata", "durationchange", "timeupdate", "play", "pause", "ended", "seeking", "seeked"]) {
+        player.addEventListener(event, () => { if (generation === current) changed(); });
+      }
+      player.addEventListener("error", failed);
+      player.src = url;
+      element.append(player);
+      if (audio) {
+        const wave = document.createElement("div");
+        wave.className = "stage-audio-wave";
+        wave.textContent = "Audio";
+        element.append(wave);
+        void audioPreview(url).then((waveform) => {
+          if (generation !== current || waveform === undefined) return;
+          const image = document.createElement("img");
+          image.src = waveform;
+          image.alt = "Audio waveform";
+          wave.replaceChildren(image);
+        });
+      }
+    }
+    element.append(error);
+    changed();
+  }
+
+  function seek(seconds: number): void {
+    if (media === undefined || !Number.isFinite(media.duration)) return;
+    media.currentTime = Math.max(0, Math.min(media.duration, seconds));
+    changed();
+  }
+
+  function toggle(): void {
+    const player = media;
+    if (player === undefined) return;
+    if (!player.paused) player.pause();
+    else {
+      if (player.ended) player.currentTime = 0;
+      void player.play().catch(() => changed());
+    }
+  }
+
+  return { element, open, close, seek, toggle,
+    get selected() { return selected; },
+    get media() { return media; },
+  };
+}

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

@@ -14,7 +14,6 @@ const paths: Readonly<Record<string, string>> = {
   results: '<path d="M4 8v12h16V8M3 4h18v4H3zM9 12h6"/>',
   run: '<circle cx="12" cy="12" r="9"/><path d="m10 8 6 4-6 4V8Z"/>',
   image: '<rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="8.5" cy="9" r="2"/><path d="m4 18 5-5 3 3 3-4 5 6"/>',
-  sidebarCollapse: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M8 4v16m7-11-3 3 3 3"/>',
   wrap: '<path d="M4 6h16M4 10h12a4 4 0 0 1 0 8h-5m3-3-3 3 3 3M4 14h5M4 18h4"/>',
   timeline: '<path d="M3 6h18M3 12h18M3 18h18"/><path d="M8 4v4M16 10v4M11 16v4"/>',
   minus: '<path d="M5 12h14"/>',
@@ -40,6 +39,11 @@ const paths: Readonly<Record<string, string>> = {
   layers: '<path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 12 9 5 9-5M3 16l9 5 9-5"/>',
   ranking: '<path d="M5 19V9h4v10M10 19V5h4v14M15 19v-7h4v7M3 19h18"/>',
   refresh: '<path d="M20 7v5h-5M4 17v-5h5"/><path d="M18.5 9a7 7 0 0 0-11.8-2.3L4 9M5.5 15a7 7 0 0 0 11.8 2.3L20 15"/>',
+  check: '<circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/>',
+  alert: '<circle cx="12" cy="12" r="9"/><path d="M12 7v6M12 17h.01"/>',
+  arrowRight: '<path d="M5 12h14m-6-6 6 6-6 6"/>',
+  close: '<path d="m6 6 12 12M18 6 6 18"/>',
+  panel: '<rect x="3" y="4" width="18" height="16" rx="2"/><path d="M8 4v16M8 9h13"/>',
 };
 
 export function icon(name: string, className = "icon"): string {