feat: Phase 17.3 — Fixed embed queue panel with collapse/expand iframe resize (OQ1 Option A)
Read-only inline queue panel below the release embed's player bar; row-jump reuses PlayRelease. ForRelease mints a taller iframe plus a postMessage resize listener for the collapse toggle; ForTrack unchanged.
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
// Embed (iframe) → host resize handshake (Phase 17 wave 17.3, OQ1 Option A).
|
||||
//
|
||||
// The Fixed-mode player renders an always-shown queue panel below the controls. A collapse/expand
|
||||
// toggle lets the embedder's viewer reclaim the panel's vertical space — but collapsing inside the
|
||||
// iframe only reclaims space if the *outer* iframe element also shrinks. The iframe cannot resize
|
||||
// itself, so it posts its desired pixel height to the host page; the embed snippet (minted by
|
||||
// EmbedSnippetBuilder.ForRelease) carries a tiny listener that sets iframe.style.height.
|
||||
//
|
||||
// Degrades safely: if the host page ignores or strips the snippet's listener (Option B's value), the
|
||||
// panel still renders and toggles inside the iframe — only the outer resize is lost. We post nothing
|
||||
// when not framed (window === parent), so the docked player is unaffected.
|
||||
|
||||
const MESSAGE_TYPE = "deepdrft-embed-resize";
|
||||
|
||||
/**
|
||||
* Measure the live rendered height of the player element and post it to the host page so it can size
|
||||
* the iframe to match. No-op when not embedded in a frame, or when the element is unmeasurable.
|
||||
*
|
||||
* targetOrigin is "*" deliberately: the embedder's origin is unknown (any blog can embed us) and the
|
||||
* payload carries no secrets — just a height the host is free to ignore.
|
||||
*/
|
||||
export function postHeight(element: HTMLElement): void {
|
||||
if (window.parent === window) return; // Not framed — nothing to resize.
|
||||
if (!element) return;
|
||||
|
||||
// ceil + a hairline guard against sub-pixel rounding that would otherwise clip the bottom edge.
|
||||
const height = Math.ceil(element.getBoundingClientRect().height) + 2;
|
||||
if (!Number.isFinite(height) || height <= 0) return;
|
||||
|
||||
window.parent.postMessage({ type: MESSAGE_TYPE, height }, "*");
|
||||
}
|
||||
Reference in New Issue
Block a user