@hyperframes/studio 0.8.81 → 0.8.83

package/src/player/lib/timelineDOM.test.ts

@@ -9,6 +9,7 @@ import {
 import { isTimelineIgnoredElement } from "./timelineElementHelpers";
 import { computeResizePreview } from "../components/timelineClipDragPreview";
 import type { TimelineElement } from "../store/playerStore";
+import { readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
 
 function el(id: string, extra: Partial<TimelineElement> = {}): TimelineElement {
   return { id, tag: "img", start: 0, duration: 5, track: 0, ...extra };
@@ -46,6 +47,26 @@ describe("parseTimelineFromDOM — media in-point", () => {
   });
 });
 
+describe("parseTimelineFromDOM — in-point read as playback reads it", () => {
+  it.each([
+    ['data-playback-start="-1" data-media-start="2"', 2, "playback-start"],
+    ['data-playback-start="abc" data-media-start="2"', 2, "playback-start"],
+    ['data-media-start="junk"', 0, "media-start"],
+    ['data-media-start="1.5s"', 0, "media-start"],
+  ])("%s", (inPoint, playbackStart, playbackStartAttr) => {
+    const doc = makeDoc(
+      `<div data-composition-id="root"><video id="v" class="clip" data-start="0" data-duration="4" ${inPoint}></video></div>`,
+    );
+    const element = parseTimelineFromDOM(doc, 10).find((e) => e.domId === "v")!;
+    const video = doc.getElementById("v")!;
+    expect(element.playbackStart).toBe(readMediaOffsetSeconds((n) => video.getAttribute(n)));
+    expect([element.playbackStart, element.playbackStartAttr]).toEqual([
+      playbackStart,
+      playbackStartAttr,
+    ]);
+  });
+});
+
 describe("parseTimelineFromDOM — hfId from data-hf-id", () => {
   it("bridges a real GSAP transition marker onto both named clips", () => {
     document.body.innerHTML = `
@@ -526,3 +547,74 @@ describe("a composition clip's source length", () => {
     expect(card?.sourceDuration).toBeUndefined();
   });
 });
+
+describe("what the live clip list says a clip plays", () => {
+  function manifestVideo(attrs: string): TimelineElement {
+    const doc = makeDoc(
+      `<div data-composition-id="root"><video id="v" src="a.mp4" data-start="0" data-duration="4" ${attrs}></video></div>`,
+    );
+    return createTimelineElementFromManifestClip({
+      clip: {
+        id: "v",
+        label: "v",
+        kind: "video",
+        tagName: "video",
+        start: 0,
+        duration: 4,
+        track: 0,
+        assetUrl: null,
+      },
+      fallbackIndex: 0,
+      doc,
+      hostEl: doc.getElementById("v"),
+    });
+  }
+
+  it("carries data-volume and muted from the element", () => {
+    expect(manifestVideo('data-volume="0" muted')).toMatchObject({ volume: 0, muted: true });
+    const plain = manifestVideo("");
+    expect(plain.volume).toBeUndefined();
+    expect(plain.muted).toBeUndefined();
+  });
+
+  it("carries the clip-edge fades, and drops a zero one", () => {
+    const faded = manifestVideo('data-fade-in="1.5" data-fade-out="0"');
+    expect(faded.fadeIn).toBe(1.5);
+    expect(faded.fadeOut).toBeUndefined();
+  });
+
+  it("gives a video with neither muted nor data-has-audio sound, as the compiler does", () => {
+    expect(manifestVideo("").hasAudio).toBe(true);
+    expect(manifestVideo("muted").hasAudio).toBeUndefined();
+    expect(manifestVideo('data-has-audio="false"').hasAudio).toBeUndefined();
+    expect(manifestVideo('muted data-has-audio="true"')).toMatchObject({
+      hasAudio: true,
+      muted: true,
+    });
+  });
+
+  it.each(["", ' data-has-audio="true"'])(
+    "does not give a timed wrapper the sound of an untimed video%s inside it",
+    (videoAttrs) => {
+      const doc = makeDoc(
+        `<div data-composition-id="root"><div id="w" data-start="0" data-duration="4"><video src="a.mp4"${videoAttrs}></video></div></div>`,
+      );
+      const wrapper = createTimelineElementFromManifestClip({
+        clip: {
+          id: "w",
+          label: "w",
+          kind: "element",
+          tagName: "div",
+          start: 0,
+          duration: 4,
+          track: 0,
+          assetUrl: null,
+        },
+        fallbackIndex: 0,
+        doc,
+        hostEl: doc.getElementById("w"),
+      });
+      expect(wrapper.hasAudio).toBeUndefined();
+    },
+  );
+});

package/src/player/lib/timelineDOM.ts

@@ -304,8 +304,6 @@ export function parseTimelineFromDOM(
       if (mediaEl.tagName === "IMG") {
         entry.tag = "img";
       }
-      const vol = el.getAttribute("data-volume") ?? mediaEl.getAttribute("data-volume");
-      if (vol) entry.volume = parseFloat(vol);
       // Override AFTER the helper (which sets the raw relative attribute) so the
       // resolved absolute URL wins — the Studio can then fetch the asset
       // regardless of whether the attribute value was relative or absolute.

package/src/player/lib/timelineElementHelpers.ts

@@ -13,7 +13,7 @@ import { isFinitePositive } from "./playbackAdapter";
 import { getSourceScopedSelectorIndex } from "../../utils/sourceScopedSelectorIndex";
 import { HF_AUDIO_GROUP_TAG } from "@hyperframes/core/audio-groups";
 import { readElementFades } from "@hyperframes/core/audio-fade";
-import { readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
+import { type AttrReader, readMediaOffsetSeconds } from "@hyperframes/parsers/media-duration";
 
 // ---------------------------------------------------------------------------
 // Layer-reveal lift transparency
@@ -168,14 +168,34 @@ export function resolveMediaElement(el: Element): HTMLMediaElement | HTMLImageEl
     : null;
 }
 
+/** The in-point as playback reads it, and the attribute holding it; empty when neither is authored. */
+export function readPlaybackStartAttributes(
+  getAttr: AttrReader,
+): Pick<TimelineElement, "playbackStart" | "playbackStartAttr"> {
+  const playbackStartAttr =
+    getAttr("data-playback-start") != null
+      ? "playback-start"
+      : getAttr("data-media-start") != null
+        ? "media-start"
+        : undefined;
+  return playbackStartAttr
+    ? { playbackStart: readMediaOffsetSeconds(getAttr), playbackStartAttr }
+    : {};
+}
+
+export function playbackStartAttributeForElement(
+  element: Pick<TimelineElement, "kind" | "playbackStartAttr">,
+): "data-media-start" | "data-playback-start" {
+  return element.playbackStartAttr === "playback-start" || element.kind === "composition"
+    ? "data-playback-start"
+    : "data-media-start";
+}
+
 function applyPlaybackMetadataFromElement(entry: TimelineElement, el: Element): void {
-  const playbackStartValue = el.getAttribute("data-playback-start");
-  const legacyMediaStartValue = el.getAttribute("data-media-start");
-  const mediaStartValue = playbackStartValue ?? legacyMediaStartValue;
-  if (mediaStartValue != null)
-    entry.playbackStart = readMediaOffsetSeconds((n) => el.getAttribute(n));
-  if (playbackStartValue != null) entry.playbackStartAttr = "playback-start";
-  else if (legacyMediaStartValue != null) entry.playbackStartAttr = "media-start";
+  Object.assign(
+    entry,
+    readPlaybackStartAttributes((n) => el.getAttribute(n)),
+  );
 
   const authoredPlaybackRate = Number.parseFloat(el.getAttribute("data-playback-rate") ?? "");
   if (Number.isFinite(authoredPlaybackRate) && authoredPlaybackRate > 0) {
@@ -193,9 +213,25 @@ function setOptional<K extends keyof TimelineElement>(
   else entry[key] = value;
 }
 
-/** `data-has-audio` and the clip-edge fades: what the mixer hears and how it enters and leaves. */
+function readVolume(el: Element, media: Element): number | undefined {
+  const volume = Number.parseFloat(
+    el.getAttribute("data-volume") ?? media.getAttribute("data-volume") ?? "",
+  );
+  return Number.isFinite(volume) ? volume : undefined;
+}
+
+/** What the mixer gets: the compiler's `data-has-audio` rule, muted and volume. */
 function applyAudioMetadataFromElement(entry: TimelineElement, el: Element): void {
-  setOptional(entry, "hasAudio", el.getAttribute("data-has-audio") === "true" ? true : undefined);
+  const media = resolveMediaElement(el) ?? el;
+  const muted = el.hasAttribute("muted") || media.hasAttribute("muted");
+  const hasAudio = el.getAttribute("data-has-audio");
+  const sound = hasAudio === null ? el.tagName === "VIDEO" && !muted : hasAudio === "true";
+  setOptional(entry, "hasAudio", sound ? true : undefined);
+  setOptional(entry, "muted", muted ? true : undefined);
+  setOptional(entry, "volume", readVolume(el, media));
+}
+
+function applyFadeMetadataFromElement(entry: TimelineElement, el: Element): void {
   const fades = readElementFades(el);
   setOptional(entry, "fadeIn", fades.fadeIn > 0 ? fades.fadeIn : undefined);
   setOptional(entry, "fadeOut", fades.fadeOut > 0 ? fades.fadeOut : undefined);
@@ -204,6 +240,7 @@ function applyAudioMetadataFromElement(entry: TimelineElement, el: Element): voi
 export function applyMediaMetadataFromElement(entry: TimelineElement, el: Element): void {
   applyPlaybackMetadataFromElement(entry, el);
   applyAudioMetadataFromElement(entry, el);
+  applyFadeMetadataFromElement(entry, el);
 
   const mediaEl = resolveMediaElement(el);
   if (!mediaEl) return;

package/src/player/lib/timelineViewportBudgets.ts

@@ -49,7 +49,7 @@ export interface TimelineViewportBudgets {
 
 const MEBIBYTE = 1024 * 1024;
 const DAY_MS = 24 * 60 * 60 * 1000;
-export const MAX_VISIBLE_THUMBNAIL_FRAMES = Math.ceil(3840 / (66 * (16 / 9))); // 4K timeline width / tallest 16:9 tile.
+export const MAX_VISIBLE_THUMBNAIL_FRAMES = Math.ceil(3840 / (66 * (16 / 9))); // Decode-memory cap, 4K width / a 66 px 16:9 tile; 40 px clips reuse frames past it.
 
 /**
  * The sole default budget owner for timeline viewport and media virtualization.

package/src/player/store/timelineElement.ts

@@ -55,8 +55,9 @@ export interface TimelineElement {
   playbackRate?: number;
   sourceDuration?: number;
   volume?: number;
-  /** `data-has-audio="true"` on a video: its sound is mixed, so it takes audio affordances (fades). */
+  /** A video with sound to mix (`data-has-audio`, or unmuted without it); `muted` silences it. */
   hasAudio?: boolean;
+  muted?: boolean;
   /** Clip-edge fades from `data-fade-in` / `data-fade-out`, seconds; absent means none. */
   fadeIn?: number;
   fadeOut?: number;

package/src/playerEntry.ts

@@ -0,0 +1 @@
+export { Player } from "./player/components/Player";

package/src/timelineChromeExports.test.tsx

@@ -0,0 +1,79 @@
+// @vitest-environment happy-dom
+// Mounts the timeline chrome by package name with no StudioShellProvider, as a host app does.
+import { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  AudioMeterStrip,
+  TimelineHistoryButtons,
+  TimelineToolbar,
+  useClipboard,
+  usePlayerStore,
+  type UseClipboardOptions,
+} from "@hyperframes/studio";
+import { installReactActEnvironment, mountReactHarness } from "./hooks/domSelectionTestHarness";
+import { useAudioMetersVisible } from "./utils/audioMeterVisibility";
+
+installReactActEnvironment();
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  usePlayerStore.setState({ elements: [], selectedElementId: null });
+  useAudioMetersVisible.setState(useAudioMetersVisible.getInitialState());
+});
+
+describe("timeline chrome package exports, outside Studio's shell", () => {
+  it("mounts the toolbar with the host's history and no Add beat", async () => {
+    const onUndo = vi.fn();
+    const root = mountReactHarness(
+      <TimelineToolbar history={{ canUndo: true, onUndo }} showAddBeat={false} />,
+    );
+    const undo = document.querySelector<HTMLButtonElement>('button[aria-label="Undo"]');
+    act(() => undo?.click());
+    expect(onUndo).toHaveBeenCalledTimes(1);
+    expect(document.querySelector('button[aria-label="Add beat at playhead"]')).toBeNull();
+    await act(async () => root.unmount());
+  });
+
+  it("mounts the history buttons disabled when given nothing", async () => {
+    const root = mountReactHarness(<TimelineHistoryButtons />);
+    const buttons = Array.from(document.querySelectorAll("button"));
+    expect(buttons.map((b) => b.disabled)).toEqual([true, true]);
+    await act(async () => root.unmount());
+  });
+
+  it("mounts the meter strip on the host's preview iframe", async () => {
+    usePlayerStore.setState({
+      elements: [{ id: "music", tag: "audio", start: 0, duration: 4, track: 0 }],
+    });
+    useAudioMetersVisible.setState({ visible: true });
+    const root = mountReactHarness(<AudioMeterStrip previewIframeRef={{ current: null }} />);
+    expect(document.querySelector('[data-testid="audio-meter-strip"]')).not.toBeNull();
+    await act(async () => root.unmount());
+  });
+
+  it("runs the clipboard with no DOM edit session", async () => {
+    const toasts: string[] = [];
+    const options: UseClipboardOptions = {
+      projectId: "p",
+      activeCompPath: "index.html",
+      domEditSelectionRef: { current: null },
+      showToast: (message) => toasts.push(message),
+      writeProjectFile: async () => {},
+      recordEdit: async () => {},
+      reloadPreview: () => {},
+      handleTimelineElementsDelete: async () => {},
+      handleDomEditElementDelete: async () => {},
+      previewIframeRef: { current: null },
+      waitForPendingDomEditSaves: async () => {},
+    };
+    const api: { current: ReturnType<typeof useClipboard> | null } = { current: null };
+    function Harness() {
+      api.current = useClipboard(options);
+      return null;
+    }
+    const root = mountReactHarness(<Harness />);
+    expect(api.current?.handleCopy()).toBe(false);
+    expect(toasts).toEqual(["Nothing selected to copy."]);
+    await act(async () => root.unmount());
+  });
+});

package/src/timelineStackingSyncExport.test.tsx

@@ -0,0 +1,67 @@
+// @vitest-environment happy-dom
+// Mounts the timeline by package name with no Studio shell, as a host app does.
+import { act } from "react";
+import { expect, it, vi } from "vitest";
+import { Timeline, usePlayerStore, type TimelineZIndexReorderCommit } from "@hyperframes/studio";
+import { installReactActEnvironment, mountReactHarness } from "./hooks/domSelectionTestHarness";
+
+installReactActEnvironment();
+// happy-dom has no layout; the timeline only renders clips inside a sized viewport.
+for (const [prop, px] of [
+  ["clientWidth", 1000],
+  ["clientHeight", 400],
+  ["offsetWidth", 1000],
+  ["offsetHeight", 400],
+] as const) {
+  vi.spyOn(HTMLElement.prototype, prop, "get").mockReturnValue(px);
+}
+
+const settle = () => act(async () => new Promise((r) => setTimeout(r, 50)));
+const pointer = (type: string, clientY: number) =>
+  new PointerEvent(type, { bubbles: true, button: 0, pointerId: 1, clientX: 150, clientY });
+
+it("restacks the host's preview when a lane move puts a clip below another", async () => {
+  const iframe = document.createElement("iframe");
+  document.body.appendChild(iframe);
+  const doc = iframe.contentDocument!;
+  // No authored z: DOM order paints tag over title, which matches the rows until the move.
+  doc.body.innerHTML = '<div id="title"></div><div id="tag"></div><div id="note"></div>';
+  const clip = (id: string, start: number, duration: number, track: number) =>
+    ({ id, key: id, domId: id, tag: "div", start, duration, track }) as const;
+  usePlayerStore.setState({
+    duration: 10,
+    timelineReady: true,
+    elements: [clip("title", 0, 4, 1), clip("tag", 0, 4, 0), clip("note", 6, 2, 2)],
+  });
+  const commit = vi.fn<TimelineZIndexReorderCommit>(async (entries) => {
+    for (const e of entries) e.element.style.zIndex = String(e.zIndex);
+  });
+  const root = mountReactHarness(
+    <Timeline
+      previewIframeRef={{ current: iframe }}
+      onZIndexReorder={commit}
+      onMoveElement={async () => {}}
+      onMoveElements={async () => {}}
+    />,
+  );
+  await settle();
+  const tagClip = document.querySelector<HTMLElement>('.timeline-clip[aria-label^="tag,"]')!;
+  vi.spyOn(tagClip, "getBoundingClientRect").mockReturnValue(new DOMRect(80, 77, 360, 42));
+
+  // Drag tag from the top row to the bottom row, clear of note in time.
+  act(() => void tagClip.dispatchEvent(pointer("pointerdown", 98)));
+  act(() => {
+    window.dispatchEvent(pointer("pointermove", 140));
+    window.dispatchEvent(pointer("pointermove", 194));
+  });
+  await act(async () => void window.dispatchEvent(pointer("pointerup", 194)));
+  await settle();
+
+  expect(usePlayerStore.getState().elements.find((e) => e.id === "tag")?.track).toBe(2);
+  expect(commit).toHaveBeenCalledTimes(1);
+  expect(commit.mock.calls[0]![0].every((e) => e.element.ownerDocument === doc)).toBe(true);
+  const z = (id: string) => Number(doc.getElementById(id)!.style.zIndex || 0);
+  expect(z("title")).toBeGreaterThan(z("tag"));
+  await act(async () => root.unmount());
+  usePlayerStore.setState({ elements: [], timelineReady: false });
+});

package/src/ui.ts

@@ -0,0 +1,31 @@
+export { Button, buttonBase, buttonSizes, buttonVariants } from "./components/ui/Button";
+export type { ButtonSize, ButtonVariant, PreviewState } from "./components/ui/Button";
+export { HyperframesLogo } from "./components/ui/HyperframesLogo";
+export { IconButton } from "./components/ui/IconButton";
+export { Tab, TabPanel, Tabs, TabsList } from "./components/ui/Tabs";
+export { HyperframesLoader } from "./components/ui/HyperframesLoader";
+export type { HyperframesLoaderProps } from "./components/ui/HyperframesLoader";
+export { Tooltip } from "./components/ui/Tooltip";
+export { cn } from "./components/ui/cn";
+export {
+  ContextMenu,
+  Menu,
+  MenuItem,
+  MenuRadioGroup,
+  MenuRadioItem,
+  MenuSeparator,
+  MenuShortcut,
+  popupSurface,
+} from "./components/ui/Menu";
+export type { MenuItemTone, PopupPreviewState } from "./components/ui/Menu";
+export { Popover } from "./components/ui/Popover";
+export { Input, fieldBase, fieldText } from "./components/ui/Input";
+export type { InputProps } from "./components/ui/Input";
+export { NumberField } from "./components/ui/NumberField";
+export type { NumberFieldProps } from "./components/ui/NumberField";
+export { Select } from "./components/ui/Select";
+export type { SelectOption, SelectProps } from "./components/ui/Select";
+export { Slider } from "./components/ui/Slider";
+export type { SliderProps } from "./components/ui/Slider";
+export { Toggle } from "./components/ui/Toggle";
+export type { ToggleProps } from "./components/ui/Toggle";

package/src/utils/authoredSource.ts

@@ -1,4 +1,8 @@
 import { ensureHfIds, isCompositionTemplate } from "@hyperframes/parsers/hf-ids";
+import {
+  STUDIO_PREVIEW_LAZY_ATTR,
+  STUDIO_PREVIEW_UPCOMING_ATTR,
+} from "@hyperframes/core/studio-preview-mark";
 
 // Stamped as the preview stamps the files it serves, so a live element's hf-id finds its source.
 export function parseSavedSource(html: string): Document {
@@ -90,3 +94,14 @@ export function authoredMarkup(authored: Element, live: Element, sourceFile: str
   }
   return copy.outerHTML;
 }
+
+export function liveMarkupWithoutPreviewMarks(live: Element): string {
+  const copy = live.cloneNode(true) as Element;
+  for (const el of [copy, ...Array.from(copy.querySelectorAll("*"))]) {
+    el.removeAttribute(STUDIO_PREVIEW_UPCOMING_ATTR);
+    if (!el.hasAttribute(STUDIO_PREVIEW_LAZY_ATTR)) continue;
+    el.removeAttribute("loading");
+    el.removeAttribute(STUDIO_PREVIEW_LAZY_ATTR);
+  }
+  return copy.outerHTML;
+}

package/src/utils/blockInstaller.ts

@@ -9,6 +9,7 @@ import { collectHtmlIds } from "./studioHelpers";
 import { generateId } from "./generateId";
 import { formatTimelineAttributeNumber } from "../player/components/timelineEditing";
 import { saveProjectFilesWithHistory } from "./studioFileHistory";
+import { serializeStudioFileMutation } from "./studioFileMutationCoordinator";
 import { extendRootDurationInSource } from "./rootDuration";
 import { deriveTimelineStoreKeyForDomId } from "../player/lib/timelineElementHelpers";
 
@@ -93,12 +94,14 @@ async function makeComponentBackgroundTransparent(
   writeProjectFile: AddBlockOptions["writeProjectFile"],
 ): Promise<void> {
   if (block.type !== "hyperframes:component") return;
-  const content = await readProjectFile(compositionFile);
-  const transparentContent = content.replace(
-    /background:\s*(?:#(?:0a0a0a|000000|000|0a0805)|rgba?\([^)]*\))\s*;/g,
-    "background: transparent;",
-  );
-  if (transparentContent !== content) await writeProjectFile(compositionFile, transparentContent);
+  await serializeStudioFileMutation(writeProjectFile, compositionFile, async () => {
+    const content = await readProjectFile(compositionFile);
+    const transparentContent = content.replace(
+      /background:\s*(?:#(?:0a0a0a|000000|000|0a0805)|rgba?\([^)]*\))\s*;/g,
+      "background: transparent;",
+    );
+    if (transparentContent !== content) await writeProjectFile(compositionFile, transparentContent);
+  });
 }
 
 function resolveBlockPlacement({
@@ -201,7 +204,6 @@ export async function addBlockToProject(
     );
 
     const targetPath = activeCompPath || "index.html";
-    const originalContent = await readProjectFile(targetPath);
     const relevantElements = timelineElements.filter(
       (element) => (element.sourceFile || targetPath) === targetPath,
     );
@@ -211,29 +213,32 @@ export async function addBlockToProject(
       timelineElements: relevantElements,
       currentTime: opts.currentTime ?? 0,
     });
-    const { width, height } = resolveTimelineAssetCompositionSize(originalContent);
-    const hostId = buildUniqueCompositionId(block.name, collectHtmlIds(originalContent));
-    const subComposition = buildSubCompositionHtml({
-      id: hostId,
-      compositionFile,
-      start,
-      duration,
-      track,
-      width,
-      height,
-      left: visualPosition ? Math.round(visualPosition.left) : 0,
-      top: visualPosition ? Math.round(visualPosition.top) : 0,
-      zIndex: getMaxZIndexFromIframe(opts.previewIframe ?? null) + 1,
-    });
-    const patchedContent = extendRootDurationInSource(
-      insertTimelineAssetIntoSource(originalContent, subComposition),
-      start + duration,
-    );
+    let hostId = "";
+    const insertHost = (originalContent: string) => {
+      const { width, height } = resolveTimelineAssetCompositionSize(originalContent);
+      hostId = buildUniqueCompositionId(block.name, collectHtmlIds(originalContent));
+      const subComposition = buildSubCompositionHtml({
+        id: hostId,
+        compositionFile,
+        start,
+        duration,
+        track,
+        width,
+        height,
+        left: visualPosition ? Math.round(visualPosition.left) : 0,
+        top: visualPosition ? Math.round(visualPosition.top) : 0,
+        zIndex: getMaxZIndexFromIframe(opts.previewIframe ?? null) + 1,
+      });
+      return extendRootDurationInSource(
+        insertTimelineAssetIntoSource(originalContent, subComposition),
+        start + duration,
+      );
+    };
     await saveProjectFilesWithHistory({
       projectId,
       label: `Add ${isBlock ? "block" : "component"}: ${block.title}`,
-      files: { [targetPath]: patchedContent },
-      readFile: async () => originalContent,
+      files: { [targetPath]: insertHost },
+      readFile: readProjectFile,
       writeFile: writeProjectFile,
       recordEdit,
     });

package/src/utils/mediaTypes.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+import { AUDIO_EXT, IMAGE_EXT, isMediaFile, MEDIA_EXT, VIDEO_EXT } from "./mediaTypes";
+import { getTimelineAssetKind } from "./timelineAssetDrop";
+
+describe("media types", () => {
+  it.each([
+    ["clip.m4v", "video"],
+    ["assets/Take 2.M4V", "video"],
+    ["song.flac", "audio"],
+    ["voice.FLAC", "audio"],
+    ["clip.mp4", "video"],
+    ["music.mp3", "audio"],
+    ["still.png", "image"],
+  ] as const)("the timeline takes %s as %s", (path, kind) => {
+    expect(getTimelineAssetKind(path)).toBe(kind);
+    expect(isMediaFile(path)).toBe(true);
+  });
+
+  it("still refuses files that are not media", () => {
+    for (const path of ["notes.pdf", "font.woff2", "grade.cube", "clip.m4v.txt", "flac"]) {
+      expect(getTimelineAssetKind(path)).toBeNull();
+      expect(isMediaFile(path)).toBe(false);
+    }
+  });
+
+  it("counts a file as media exactly when it is an image, video or audio file", () => {
+    const paths = ["a.mp4", "a.m4v", "a.flac", "a.png", "a.ico", "a.woff", "a.pdf", "a.cube"];
+    for (const path of paths) {
+      const kinds = [IMAGE_EXT, VIDEO_EXT, AUDIO_EXT].filter((re) => re.test(path)).length;
+      expect(MEDIA_EXT.test(path)).toBe(kinds > 0);
+    }
+  });
+});

package/src/utils/mediaTypes.ts

@@ -1,10 +1,17 @@
-export const IMAGE_EXT = /\.(jpg|jpeg|png|gif|webp|avif|svg|ico)$/i;
-export const VIDEO_EXT = /\.(mp4|webm|mov)$/i;
-export const AUDIO_EXT = /\.(mp3|wav|ogg|m4a|aac)$/i;
+const IMAGE_EXTS = ["jpg", "jpeg", "png", "gif", "webp", "avif", "svg", "ico"];
+const VIDEO_EXTS = ["mp4", "webm", "mov", "m4v"];
+const AUDIO_EXTS = ["mp3", "wav", "ogg", "m4a", "aac", "flac"];
+
+function extensionPattern(extensions: readonly string[]): RegExp {
+  return new RegExp(`\\.(${extensions.join("|")})$`, "i");
+}
+
+export const IMAGE_EXT = extensionPattern(IMAGE_EXTS);
+export const VIDEO_EXT = extensionPattern(VIDEO_EXTS);
+export const AUDIO_EXT = extensionPattern(AUDIO_EXTS);
 export const FONT_EXT = /\.(woff|woff2|ttf|ttc|otf|eot)$/i;
 export const LUT_EXT = /\.cube$/i;
-export const MEDIA_EXT =
-  /\.(mp4|webm|mov|mp3|wav|ogg|m4a|aac|jpg|jpeg|png|gif|webp|avif|svg|ico)$/i;
+export const MEDIA_EXT = extensionPattern([...VIDEO_EXTS, ...AUDIO_EXTS, ...IMAGE_EXTS]);
 
 export function isMediaFile(path: string): boolean {
   return MEDIA_EXT.test(path);