From e70687b66cb8c1859509ffff15947f0cff9970bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Fri, 17 Apr 2026 00:23:07 +0200
Subject: [PATCH] fix(player): resolve iframe media src against iframe baseURI
 (#295)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

`_setupParentMedia` scans the iframe for `audio[data-start]` / `video[data-start]` and creates parallel media elements in the host document (so the studio can scrub audio at sub-frame precision without iframe cross-origin restrictions). It was reading the raw `src` attribute string and assigning it directly to the host-document element, which then resolved relative URLs against the **studio root** instead of the **iframe**.

Result: a composition like

\`\`\`html
<audio id="narration" data-start="0" data-duration="53" src="assets/narration.wav"></audio>
\`\`\`

played fine in rendered MP4 output but 404'd silently in the studio preview (parent audio got `src = http://localhost:PORT/assets/narration.wav` instead of `http://localhost:PORT/api/projects/<name>/preview/assets/narration.wav`).

## Fix

Resolve the src against \`iframeEl.ownerDocument.baseURI\` before passing it to \`_createParentMedia\`. Also read the raw \`src\` attribute on \`<source>\` fallbacks so both paths go through the same resolution.

Diff is 2 lines of meaningful change (9 total once you include the comment).

## Reproduction

1. Create a project with a narration at \`assets/narration.wav\`
2. Reference it in \`index.html\` with \`<audio data-start="0" data-duration="53" src="assets/narration.wav">\`
3. \`npx hyperframes preview\` → open, click play
4. Before: silent (parent audio's \`error.code === 4\` / \`MEDIA_ERR_SRC_NOT_SUPPORTED\`)
5. After: narration plays, scrubbing syncs

## Test plan

- [x] Existing 21 player tests pass (`bun run --filter=@hyperframes/player test`)
- [x] oxlint + oxfmt clean on changed file
- [x] Manual: verified in-studio playback of a narration sourced via relative URL
- [x] Reviewer: confirm render pipeline unaffected (render doesn't go through `_setupParentMedia`)

## Notes

No tests added for this path because the existing harness covers only the `audio-src` attribute codepath — `_setupParentMedia` is triggered by an internal probe interval against a live iframe, which the current fixture doesn't build. Happy to add one in a follow-up if reviewers want that coverage before merge.
---
 packages/player/src/hyperframes-player.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/player/src/hyperframes-player.ts b/packages/player/src/hyperframes-player.ts
index 6bff51e86..94f526062 100644
--- a/packages/player/src/hyperframes-player.ts
+++ b/packages/player/src/hyperframes-player.ts
@@ -563,8 +563,15 @@ class HyperframesPlayer extends HTMLElement {
       );
 
       for (const iframeEl of mediaEls) {
-        const src = iframeEl.getAttribute("src") || iframeEl.querySelector("source")?.src;
-        if (!src) continue;
+        const rawSrc =
+          iframeEl.getAttribute("src") || iframeEl.querySelector("source")?.getAttribute("src");
+        if (!rawSrc) continue;
+
+        // Resolve against the iframe's baseURI. The parent-frame <audio>/<video>
+        // we create next lives in the host document, whose base URL differs from
+        // the iframe's — without this, a relative src like "assets/narration.wav"
+        // would resolve against the studio root and 404.
+        const src = new URL(rawSrc, iframeEl.ownerDocument.baseURI).href;
 
         const start = parseFloat(iframeEl.getAttribute("data-start") || "0");
         const duration = parseFloat(iframeEl.getAttribute("data-duration") || "Infinity");