mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
fix(cli): present renders the deck (player sizing + self-driving serve)
Two bugs caused a black slide area: - The <hyperframes-player> had no positioning, so its iframe collapsed to zero size — the (absolutely-positioned) chrome showed but the composition didn't. Add position:absolute; inset:0 (matches demo.html). - The composition was served with the engine runtime injected, which leaves its timelines engine-paused (blank). Slideshow decks self-drive their own timelines (like demo.html / the standalone harness), so serve them raw. Verified end-to-end on registry/examples/airbnb-deck: cover renders, Next advances 1/11 -> 2/11 and slide 2 paints.
This commit is contained in:
Vance Ingalls
@@ -19,11 +19,9 @@ import {
|
|||||||
validateRemoteDebuggingPortDeps,
|
validateRemoteDebuggingPortDeps,
|
||||||
} from "../utils/openBrowser.js";
|
} from "../utils/openBrowser.js";
|
||||||
import {
|
import {
|
||||||
resolveRuntimePath,
|
|
||||||
resolvePlayerPath,
|
resolvePlayerPath,
|
||||||
resolveSlideshowPath,
|
resolveSlideshowPath,
|
||||||
listenOnFreePort,
|
listenOnFreePort,
|
||||||
injectRuntime,
|
|
||||||
assetContentType,
|
assetContentType,
|
||||||
} from "../utils/compositionServer.js";
|
} from "../utils/compositionServer.js";
|
||||||
|
|
||||||
@@ -76,12 +74,6 @@ export default defineCommand({
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const runtimePath = resolveRuntimePath();
|
|
||||||
if (!runtimePath) {
|
|
||||||
clack.log.error("HyperFrames runtime not found. Run `bun run build` first.");
|
|
||||||
process.exitCode = 1;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const playerPath = resolvePlayerPath();
|
const playerPath = resolvePlayerPath();
|
||||||
const slideshowPath = resolveSlideshowPath();
|
const slideshowPath = resolveSlideshowPath();
|
||||||
if (!playerPath || !slideshowPath) {
|
if (!playerPath || !slideshowPath) {
|
||||||
@@ -125,14 +117,10 @@ export default defineCommand({
|
|||||||
"Cache-Control": "no-cache",
|
"Cache-Control": "no-cache",
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
app.get("/runtime.js", (ctx) =>
|
// Serve composition files raw. Slideshow compositions self-drive their own
|
||||||
ctx.body(readFileSync(runtimePath, "utf-8"), 200, {
|
// timelines (no engine runtime injected) — the same model demo.html / the
|
||||||
"Content-Type": "application/javascript",
|
// standalone harness use; injecting a runtime would leave the composition
|
||||||
"Cache-Control": "no-cache",
|
// engine-paused and blank.
|
||||||
}),
|
|
||||||
);
|
|
||||||
|
|
||||||
// Serve composition files (HTML gets the runtime injected; other assets pass through).
|
|
||||||
app.get("/composition/*", (ctx) => {
|
app.get("/composition/*", (ctx) => {
|
||||||
const reqPath = ctx.req.path.replace("/composition/", "");
|
const reqPath = ctx.req.path.replace("/composition/", "");
|
||||||
const filePath = resolve(project.dir, reqPath);
|
const filePath = resolve(project.dir, reqPath);
|
||||||
@@ -140,9 +128,7 @@ export default defineCommand({
|
|||||||
// an in-project symlink nor a sibling dir sharing the prefix can escape.
|
// an in-project symlink nor a sibling dir sharing the prefix can escape.
|
||||||
if (!isSafePath(project.dir, filePath)) return ctx.text("Forbidden", 403);
|
if (!isSafePath(project.dir, filePath)) return ctx.text("Forbidden", 403);
|
||||||
if (!existsSync(filePath)) return ctx.text("Not found", 404);
|
if (!existsSync(filePath)) return ctx.text("Not found", 404);
|
||||||
if (filePath.endsWith(".html")) {
|
if (filePath.endsWith(".html")) return ctx.html(readFileSync(filePath, "utf-8"));
|
||||||
return ctx.html(injectRuntime(readFileSync(filePath, "utf-8")));
|
|
||||||
}
|
|
||||||
return ctx.body(readFileSync(filePath), 200, { "Content-Type": assetContentType(filePath) });
|
return ctx.body(readFileSync(filePath), 200, { "Content-Type": assetContentType(filePath) });
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -193,6 +179,7 @@ function buildPresentPage(projectName: string, islandJson: string): string {
|
|||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
html, body { height: 100%; background: #0a0a0a; overflow: hidden; }
|
html, body { height: 100%; background: #0a0a0a; overflow: hidden; }
|
||||||
hyperframes-slideshow { display: block; position: relative; width: 100vw; height: 100vh; }
|
hyperframes-slideshow { display: block; position: relative; width: 100vw; height: 100vh; }
|
||||||
|
hyperframes-player { position: absolute; inset: 0; }
|
||||||
#present-btn {
|
#present-btn {
|
||||||
position: fixed; top: 18px; right: 18px; z-index: 99999;
|
position: fixed; top: 18px; right: 18px; z-index: 99999;
|
||||||
font: 600 14px/1 system-ui, sans-serif; color: #0d1321;
|
font: 600 14px/1 system-ui, sans-serif; color: #0d1321;
|
||||||
|
|||||||
+219
@@ -0,0 +1,219 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Airbnb Deck — Presenter Mode Test</title>
|
||||||
|
<script src="../../../packages/player/dist/hyperframes-player.global.js"></script>
|
||||||
|
<script src="../../../packages/player/dist/slideshow/hyperframes-slideshow.global.js"></script>
|
||||||
|
<style>
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #111;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!--
|
||||||
|
NOTE: The <script type="application/hyperframes-slideshow+json"> island below is a
|
||||||
|
COPY of the island inside index.html. This duplication is intentional: <hyperframes-slideshow>
|
||||||
|
reads the island from its OWN innerHTML (not from the composition loaded by
|
||||||
|
<hyperframes-player>). Keep this copy in sync with the island in index.html whenever
|
||||||
|
slides, fragments, hotspots, or sequences change.
|
||||||
|
-->
|
||||||
|
<hyperframes-slideshow tabindex="0" sound style="display: block; position: relative; width: 100vw; height: 100vh">
|
||||||
|
<hyperframes-player
|
||||||
|
style="position: absolute; inset: 0"
|
||||||
|
src="index.html"
|
||||||
|
></hyperframes-player>
|
||||||
|
|
||||||
|
<script type="application/hyperframes-slideshow+json">
|
||||||
|
{
|
||||||
|
"slides": [
|
||||||
|
{
|
||||||
|
"sceneId": "cover",
|
||||||
|
"notes": "Open with the tagline. Let the Bélo breathe. This is the belonging company."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sceneId": "problem",
|
||||||
|
"notes": "Two problems, one at a time. Price first — hotels are expensive. Then connection.",
|
||||||
|
"fragments": [9.3, 9.6]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sceneId": "solution",
|
||||||
|
"notes": "Platform connects hosts and travelers. Belong anywhere. Three value props."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sceneId": "validation",
|
||||||
|
"notes": "Couchsurfing proves demand: 660k members want this. Craigslist shows supply side."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sceneId": "market",
|
||||||
|
"notes": "Bottom-up: trips × take-rate = $2.1B. Use the hotspot for the drill-down math.",
|
||||||
|
"hotspots": [
|
||||||
|
{
|
||||||
|
"id": "mkt-hotspot",
|
||||||
|
"label": "Show me the math",
|
||||||
|
"target": "market-math-detail",
|
||||||
|
"region": { "x": 70, "y": 80, "w": 25, "h": 12 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sceneId": "product",
|
||||||
|
"notes": "Three clicks: Search, Book, Travel. Show the booking flow simplicity."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sceneId": "business",
|
||||||
|
"notes": "10% commission. At 80k transactions × $26 avg nightly take = $2.1M revenue."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sceneId": "adoption",
|
||||||
|
"notes": "Events, conferences, Craigslist cross-posting, partnerships. Grass-roots growth."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sceneId": "competition",
|
||||||
|
"notes": "Matrix: cheapest + online + transaction. Airbnb is the only one that hits all three."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sceneId": "team",
|
||||||
|
"notes": "Brian (CEO/design), Joe (design), Nate (engineering). Domain depth: housing + tech."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"sceneId": "ask",
|
||||||
|
"notes": "Raising $500K. 12 months runway. Target: 80K transactions ≈ $2M revenue."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"slideSequences": [
|
||||||
|
{
|
||||||
|
"id": "market-math-detail",
|
||||||
|
"label": "Market sizing methodology",
|
||||||
|
"slides": [
|
||||||
|
{
|
||||||
|
"sceneId": "market-sizing",
|
||||||
|
"notes": "Bottom-up drill: global trips × budget share × online booking rate × take-rate = $2.1B."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</hyperframes-slideshow>
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Sound effects play HERE, in the parent document. The composition (loaded in the
|
||||||
|
player's iframe) detects slide/fragment/branch transitions and posts
|
||||||
|
{ type: 'hf-sfx', name } to the parent. Audio must live in the frame that
|
||||||
|
receives the user's gesture (the parent) — an iframe without its own user
|
||||||
|
activation is autoplay-blocked. The mp3s are in sfx/ next to this file.
|
||||||
|
|
||||||
|
Mute state is owned by <hyperframes-slideshow sound>. Listen for 'hf-sound'
|
||||||
|
events (or read slideshow.muted / data-hf-muted) to skip playback when muted.
|
||||||
|
-->
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
var clips = {
|
||||||
|
advance: new Audio("sfx/advance.mp3"),
|
||||||
|
fragment: new Audio("sfx/fragment.mp3"),
|
||||||
|
"branch-enter": new Audio("sfx/branch-enter.mp3"),
|
||||||
|
back: new Audio("sfx/back.mp3"),
|
||||||
|
};
|
||||||
|
clips.advance.volume = 0.45;
|
||||||
|
clips.fragment.volume = 0.4;
|
||||||
|
clips["branch-enter"].volume = 0.4;
|
||||||
|
clips.back.volume = 0.4;
|
||||||
|
for (var k in clips) clips[k].preload = "auto";
|
||||||
|
|
||||||
|
// Track mute state: updated via 'hf-sound' events from the slideshow chrome.
|
||||||
|
var muted = false;
|
||||||
|
var slideshow = document.querySelector("hyperframes-slideshow");
|
||||||
|
if (slideshow) {
|
||||||
|
slideshow.addEventListener("hf-sound", function (e) {
|
||||||
|
muted = e.detail && e.detail.muted === true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var unlocked = false;
|
||||||
|
function unlock() {
|
||||||
|
if (unlocked) return;
|
||||||
|
unlocked = true;
|
||||||
|
// Prime each clip (play muted then reset) so later plays are instant + allowed.
|
||||||
|
Object.keys(clips).forEach(function (name) {
|
||||||
|
var el = clips[name];
|
||||||
|
var v = el.volume;
|
||||||
|
el.volume = 0;
|
||||||
|
el.play()
|
||||||
|
.then(function () {
|
||||||
|
el.pause();
|
||||||
|
el.currentTime = 0;
|
||||||
|
el.volume = v;
|
||||||
|
})
|
||||||
|
.catch(function () {
|
||||||
|
el.volume = v;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
window.addEventListener("keydown", unlock, true);
|
||||||
|
window.addEventListener("pointerdown", unlock, true);
|
||||||
|
window.addEventListener("click", unlock, true);
|
||||||
|
|
||||||
|
window.addEventListener("message", function (e) {
|
||||||
|
var d = e.data;
|
||||||
|
if (!d || d.type !== "hf-sfx") return;
|
||||||
|
// Skip playback when muted — the component owns mute state.
|
||||||
|
if (muted) return;
|
||||||
|
var el = clips[d.name];
|
||||||
|
if (!el || !unlocked) return;
|
||||||
|
try {
|
||||||
|
el.currentTime = 0;
|
||||||
|
el.play().catch(function () {});
|
||||||
|
} catch (err) {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<!-- ── Presenter test harness: a Present button + 'P' shortcut ── -->
|
||||||
|
<button id="present-btn" type="button">▶ Present</button>
|
||||||
|
<style>
|
||||||
|
#present-btn {
|
||||||
|
position: fixed; top: 18px; right: 18px; z-index: 99999;
|
||||||
|
font: 600 14px/1 system-ui, sans-serif; color: #0d1321;
|
||||||
|
background: #f4b740; border: none; border-radius: 999px;
|
||||||
|
padding: 11px 18px; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.45);
|
||||||
|
}
|
||||||
|
#present-btn:hover { background: #ffcb5c; }
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
var isAudience = new URLSearchParams(location.search).get("mode") === "audience";
|
||||||
|
var btn = document.getElementById("present-btn");
|
||||||
|
if (isAudience) { if (btn) btn.remove(); return; }
|
||||||
|
function present() {
|
||||||
|
var ss = document.querySelector("hyperframes-slideshow");
|
||||||
|
if (ss && typeof ss.present === "function") {
|
||||||
|
ss.present();
|
||||||
|
if (btn) btn.style.display = "none"; // hide once presenting
|
||||||
|
} else {
|
||||||
|
alert("slideshow not ready yet — wait a second and retry");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (btn) btn.addEventListener("click", present);
|
||||||
|
window.addEventListener("keydown", function (e) {
|
||||||
|
if ((e.key === "p" || e.key === "P") && !e.metaKey && !e.ctrlKey) present();
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user