@hyperframes/studio 0.8.58 → 0.8.60

package/src/utils/studioHelpers.ts

@@ -377,6 +377,27 @@ export async function resolveDroppedAssetDuration(
   return duration;
 }
 
+export function mediaMetadataUrl(projectId: string, assetPath: string): string {
+  return `/api/projects/${encodeURIComponent(projectId)}/media/metadata?path=${encodeURIComponent(assetPath)}`;
+}
+
+/** Dropped video audio stream from the metadata endpoint. Failure answers false so the drop still lands muted. */
+export async function resolveDroppedAssetHasAudio(
+  projectId: string,
+  assetPath: string,
+  kind: TimelineAssetKind,
+): Promise<boolean> {
+  if (kind !== "video") return false;
+  try {
+    const response = await fetch(mediaMetadataUrl(projectId, assetPath));
+    if (!response.ok) return false;
+    const data = (await response.json()) as { metadata?: { hasAudio?: boolean } } | null;
+    return data?.metadata?.hasAudio === true;
+  } catch {
+    return false;
+  }
+}
+
 export async function resolveDroppedAssetDimensions(
   projectId: string,
   assetPath: string,

package/src/utils/studioUiPreferences.test.ts

@@ -161,3 +161,13 @@ describe("timeline zoom pin persistence", () => {
     expect(prefs.timelineManualZoomPercent).toBeUndefined();
   });
 });
+
+describe("audioMetersVisible preference", () => {
+  it("round-trips and ignores a non-boolean", () => {
+    const storage = createStorage();
+    writeStudioUiPreferences({ audioMetersVisible: false }, storage);
+    expect(readStudioUiPreferences(storage).audioMetersVisible).toBe(false);
+    storage.setItem("hf-studio-ui-preferences", JSON.stringify({ audioMetersVisible: "no" }));
+    expect(readStudioUiPreferences(storage).audioMetersVisible).toBeUndefined();
+  });
+});

package/src/utils/studioUiPreferences.ts

@@ -25,6 +25,8 @@ export interface StudioUiPreferences {
   snapToGrid?: boolean;
   /** Timeline magnet: snap clip drags/trims/drops to playhead, clip edges, and beats. */
   timelineSnapEnabled?: boolean;
+  /** Audio level meters at the timeline's right edge; hidden unless enabled here. */
+  audioMetersVisible?: boolean;
   /** Keeps the main track gapless: deleting a clip closes the gap. Distinct
    *  from `timelineSnapEnabled` ("Magnet", drag/trim snapping). */
   rippleEditEnabled?: boolean;
@@ -140,6 +142,9 @@ function readStorage(storage: Storage | null, key: string): StudioUiPreferences
     if (typeof parsed.timelineSnapEnabled === "boolean") {
       preferences.timelineSnapEnabled = parsed.timelineSnapEnabled;
     }
+    if (typeof parsed.audioMetersVisible === "boolean") {
+      preferences.audioMetersVisible = parsed.audioMetersVisible;
+    }
     if (typeof parsed.rippleEditEnabled === "boolean") {
       preferences.rippleEditEnabled = parsed.rippleEditEnabled;
     }

package/src/utils/timelineAssetDrop.test.ts

@@ -198,6 +198,38 @@ describe("insertTimelineAssetIntoSource", () => {
   });
 });
 
+describe("buildTimelineAssetInsertHtml — video audio", () => {
+  const base = {
+    id: "clip_asset",
+    hfId: "hf-vid-1",
+    assetPath: "assets/clip.mp4",
+    kind: "video" as const,
+    start: 0,
+    duration: 8,
+    track: 1,
+    zIndex: 2,
+  };
+
+  it("inserts a video muted when nothing says it carries audio", () => {
+    const html = buildTimelineAssetInsertHtml(base);
+    expect(html).toContain(" muted ");
+    expect(html).not.toContain("data-has-audio");
+  });
+
+  it("inserts a video with an audio stream audible: data-has-audio and no muted", () => {
+    const html = buildTimelineAssetInsertHtml({ ...base, hasAudio: true });
+    expect(html).toContain('data-has-audio="true"');
+    expect(html).not.toContain("muted");
+    expect(html).toContain("playsinline");
+  });
+
+  it("keeps a video without an audio stream muted", () => {
+    const html = buildTimelineAssetInsertHtml({ ...base, hasAudio: false });
+    expect(html).toContain(" muted ");
+    expect(html).not.toContain("data-has-audio");
+  });
+});
+
 describe("buildTimelineAssetInsertHtml markup quality", () => {
   const base = {
     id: "clip_1",

package/src/utils/timelineAssetDrop.ts

@@ -116,6 +116,8 @@ export function buildTimelineAssetInsertHtml(input: {
   track: number;
   zIndex: number;
   geometry?: { left: number; top: number; width: number; height: number };
+  /** Video only: true inserts `data-has-audio="true"` with no `muted`. Unknown or false stays muted. */
+  hasAudio?: boolean;
 }): string {
   const sharedAttrs = `id="${input.id}" data-hf-id="${input.hfId}" class="clip" src="${input.assetPath}" data-start="${input.start}" data-duration="${input.duration}" data-track-index="${input.track}"`;
   const geometry = input.geometry ?? { left: 0, top: 0, width: 640, height: 360 };
@@ -126,7 +128,10 @@ export function buildTimelineAssetInsertHtml(input: {
   }
 
   if (input.kind === "video") {
-    return `<video ${sharedAttrs} muted playsinline style="${visualStyles}"></video>`;
+    // `muted` and `data-has-audio="true"` are mutually exclusive by the lint
+    // contract (video_has_audio_but_muted): an audible drop takes the latter.
+    const audio = input.hasAudio ? 'data-has-audio="true"' : "muted";
+    return `<video ${sharedAttrs} ${audio} playsinline style="${visualStyles}"></video>`;
   }
 
   return `<audio ${sharedAttrs} data-volume="1" style="z-index: ${input.zIndex}"></audio>`;