diff --git a/bun.lock b/bun.lock index 63029313c6..58c8cd63f1 100644 --- a/bun.lock +++ b/bun.lock @@ -22,7 +22,7 @@ }, "packages/aws-lambda": { "name": "@hyperframes/aws-lambda", - "version": "0.6.112", + "version": "0.6.113", "dependencies": { "@aws-sdk/client-s3": "^3.700.0", "@aws-sdk/client-sfn": "^3.700.0", @@ -54,7 +54,7 @@ }, "packages/cli": { "name": "@hyperframes/cli", - "version": "0.6.112", + "version": "0.6.113", "bin": { "hyperframes": "./dist/cli.js", }, @@ -101,7 +101,7 @@ }, "packages/core": { "name": "@hyperframes/core", - "version": "0.6.112", + "version": "0.6.113", "dependencies": { "@babel/parser": "^7.27.0", "@chenglou/pretext": "^0.0.5", @@ -135,7 +135,7 @@ }, "packages/engine": { "name": "@hyperframes/engine", - "version": "0.6.112", + "version": "0.6.113", "dependencies": { "@hono/node-server": "^1.13.0", "@hyperframes/core": "workspace:^", @@ -153,7 +153,7 @@ }, "packages/gcp-cloud-run": { "name": "@hyperframes/gcp-cloud-run", - "version": "0.6.112", + "version": "0.6.113", "dependencies": { "@google-cloud/storage": "^7.14.0", "@google-cloud/workflows": "^4.2.0", @@ -173,7 +173,10 @@ }, "packages/player": { "name": "@hyperframes/player", - "version": "0.6.112", + "version": "0.6.113", + "dependencies": { + "@hyperframes/core": "workspace:*", + }, "devDependencies": { "@types/bun": "^1.1.0", "gsap": "^3.12.5", @@ -185,7 +188,7 @@ }, "packages/producer": { "name": "@hyperframes/producer", - "version": "0.6.112", + "version": "0.6.113", "dependencies": { "@fontsource/archivo-black": "^5.2.8", "@fontsource/eb-garamond": "^5.2.7", @@ -226,7 +229,7 @@ }, "packages/sdk": { "name": "@hyperframes/sdk", - "version": "0.6.112", + "version": "0.6.113", "dependencies": { "@hyperframes/core": "workspace:*", "linkedom": "^0.18.12", @@ -251,7 +254,7 @@ }, "packages/shader-transitions": { "name": "@hyperframes/shader-transitions", - "version": "0.6.112", + "version": "0.6.113", "dependencies": { "html2canvas": "^1.4.1", }, @@ -263,7 +266,7 @@ }, "packages/studio": { "name": "@hyperframes/studio", - "version": "0.6.112", + "version": "0.6.113", "dependencies": { "@codemirror/autocomplete": "^6.20.1", "@codemirror/commands": "^6.10.3", diff --git a/packages/player/package.json b/packages/player/package.json index 1dbd50ad7a..863e009e5b 100644 --- a/packages/player/package.json +++ b/packages/player/package.json @@ -19,6 +19,12 @@ "script": "./dist/hyperframes-player.global.js", "import": "./dist/hyperframes-player.js", "require": "./dist/hyperframes-player.cjs" + }, + "./slideshow": { + "types": "./dist/slideshow/hyperframes-slideshow.d.ts", + "script": "./dist/slideshow/hyperframes-slideshow.global.js", + "import": "./dist/slideshow/hyperframes-slideshow.js", + "require": "./dist/slideshow/hyperframes-slideshow.cjs" } }, "scripts": { @@ -27,6 +33,9 @@ "test": "vitest run", "perf": "bun run tests/perf/index.ts" }, + "dependencies": { + "@hyperframes/core": "workspace:*" + }, "devDependencies": { "@types/bun": "^1.1.0", "gsap": "^3.12.5", diff --git a/packages/player/src/hyperframes-player.ts b/packages/player/src/hyperframes-player.ts index 3e7bdad0d4..fc5f79a963 100644 --- a/packages/player/src/hyperframes-player.ts +++ b/packages/player/src/hyperframes-player.ts @@ -89,6 +89,7 @@ class HyperframesPlayer extends HTMLElement { private _directTimelineClock: DirectTimelineClock; private _parentTickRaf: number | null = null; private _media: ParentMediaManager; + private _scenes: { id: string; start: number; duration: number }[] = []; constructor() { super(); @@ -261,6 +262,12 @@ class HyperframesPlayer extends HTMLElement { return this.iframe; } + /** Scene list from the last-received runtime timeline message. Empty until + * the composition runtime fires its first "timeline" postMessage. */ + get scenes(): { id: string; start: number; duration: number }[] { + return this._scenes; + } + play() { this.posterEl?.remove(); this.posterEl = null; @@ -586,6 +593,9 @@ class HyperframesPlayer extends HTMLElement { sendControl: (action, extra) => this._sendControl(action, extra), getIframeDoc: () => this.iframe.contentDocument, onRuntimeReady: () => this._replayBridgeState(), + setScenes: (scenes) => { + this._scenes = scenes; + }, updateControlsTime: (t, d) => this.controlsApi?.updateTime(t, d), updateControlsPlaying: (p) => this.controlsApi?.updatePlaying(p), dispatchEvent: (ev) => this.dispatchEvent(ev), diff --git a/packages/player/src/runtime-message-handler.test.ts b/packages/player/src/runtime-message-handler.test.ts index 76b71e3bec..cf537800ca 100644 --- a/packages/player/src/runtime-message-handler.test.ts +++ b/packages/player/src/runtime-message-handler.test.ts @@ -18,6 +18,7 @@ const makeCallbacks = (): MessageHandlerCallbacks => ({ media: { mirrorTime: vi.fn(), promoteToParentProxy: vi.fn() } as unknown as ParentMediaManager, getPlaybackState: vi.fn(() => ({ currentTime: 0, duration: 0, paused: true, lastUpdateMs: 0 })), setPlaybackState: vi.fn(), + setScenes: vi.fn(), getShaderLoadingMode: vi.fn(() => "auto"), shaderLoader: { update: vi.fn() } as unknown as ShaderLoaderState, setCompositionSize: vi.fn(), diff --git a/packages/player/src/runtime-message-handler.ts b/packages/player/src/runtime-message-handler.ts index 7cc13850b5..e5144f2dd1 100644 --- a/packages/player/src/runtime-message-handler.ts +++ b/packages/player/src/runtime-message-handler.ts @@ -15,6 +15,16 @@ import type { ShaderTransitionState } from "./shader-options.js"; const FPS = 30; +type SceneRecord = { id: string; start: number; duration: number }; + +function extractScenes(raw: unknown): SceneRecord[] { + if (!Array.isArray(raw)) return []; + return (raw as SceneRecord[]).filter( + (s) => + typeof s.id === "string" && typeof s.start === "number" && typeof s.duration === "number", + ); +} + export interface MessageHandlerCallbacks extends PlaybackStateCallbacks { getPlaybackState: () => PlaybackState; setPlaybackState: (next: PlaybackState) => void; @@ -27,8 +37,11 @@ export interface MessageHandlerCallbacks extends PlaybackStateCallbacks { * uses it to replay current bridge state (mute, volume, playback rate) so * control messages sent before the iframe's listener registered aren't lost. */ onRuntimeReady: () => void; + /** Called with the scene list whenever a "timeline" message is received. */ + setScenes: (scenes: SceneRecord[]) => void; } +// fallow-ignore-next-line complexity export function handleRuntimeMessage( event: MessageEvent, frameWindow: Window | null, @@ -90,6 +103,7 @@ export function handleRuntimeMessage( callbacks.setPlaybackState({ ...pb, duration }); callbacks.updateControlsTime(pb.currentTime, duration); } + callbacks.setScenes(extractScenes(data["scenes"])); return; } diff --git a/packages/player/src/slideshow/SlideshowController.test.ts b/packages/player/src/slideshow/SlideshowController.test.ts new file mode 100644 index 0000000000..1c1bb9e791 --- /dev/null +++ b/packages/player/src/slideshow/SlideshowController.test.ts @@ -0,0 +1,574 @@ +// fallow-ignore-file code-duplication +import { describe, it, expect, vi } from "vitest"; +import { SlideshowController } from "./SlideshowController"; +import type { ResolvedSlideshow } from "@hyperframes/core/slideshow"; + +function fakePlayer() { + let cb: ((t: number) => void) | null = null; + const player = { + currentTime: 0, + seek: vi.fn((t: number) => { + player.currentTime = t; + }), + play: vi.fn(() => {}), + pause: vi.fn(() => {}), + onTimeUpdate: (fn: (t: number) => void) => { + cb = fn; + return () => { + cb = null; + }; + }, + emit: (t: number) => { + player.currentTime = t; + cb?.(t); + }, + }; + return player; +} + +const SHOW: ResolvedSlideshow = { + slides: [ + { sceneId: "a", start: 0, end: 5, fragments: [2, 4], hotspots: [] }, + { sceneId: "b", start: 5, end: 10, fragments: [], hotspots: [] }, + ], + sequences: { + deep: { + id: "deep", + label: "Deep dive", + slides: [{ sceneId: "c", start: 10, end: 13, fragments: [], hotspots: [] }], + }, + }, +}; + +/** + * Factory: controller on SHOW, advanced to fragmentIndex=1 via playback + * (emit 2 → frag 0, next(), emit 4 → frag 1). Used across Fix 8b + backToMain tests. + */ +function showAtFrag1() { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + p.emit(2); // fragmentIndex=0 + c.next(); // target=4 + p.emit(4); // fragmentIndex=1 + return { p, c }; +} + +/** + * Factory: controller on SHOW, at slide 1, inside the "deep" branch. + * Used across branching + backToMain tests that share goToSlide(1)+enterBranch setup. + */ +function showAtSlide1InDeep() { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + c.goToSlide(1); + c.enterBranch("deep"); + return { p, c }; +} + +describe("SlideshowController linear nav", () => { + it("enters the first slide on construction: seek to start + play", () => { + const p = fakePlayer(); + new SlideshowController(p, SHOW); + expect(p.seek).toHaveBeenCalledWith(0); + expect(p.play).toHaveBeenCalled(); + }); + + it("holds (pauses) at slide end when timeupdate reaches it", () => { + const p = fakePlayer(); + new SlideshowController(p, SHOW); + p.emit(2); // first fragment — handled separately; still inside slide + p.emit(5); // reached end + expect(p.pause).toHaveBeenCalled(); + }); + + it("next stops at the first fragment, not the next slide", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + p.emit(2); // play reaches fragment 0, controller pauses + expect(p.pause).toHaveBeenCalled(); + expect(c.position.slideIndex).toBe(0); + expect(c.position.fragmentIndex).toBe(0); + }); + + it("next past the last fragment advances to the next slide immediately", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + c.next(); // -> fragment 1 target (2) + p.emit(2); + c.next(); // -> fragment 2 target (4) + p.emit(4); + c.next(); // no more fragments — advance to slide b immediately + expect(c.position.slideIndex).toBe(1); + expect(p.seek).toHaveBeenLastCalledWith(5); + }); + + it("next() on a slide with NO fragments advances to the next slide immediately", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + // Go to slide b (index 1, no fragments, not at end yet) + c.goToSlide(1); // slide b: start=5, end=10, fragments=[] + expect(c.position.slideIndex).toBe(1); + // The demo SHOW only has 2 slides, so next on slide 1 is a no-op. + // Use a show with a third slide to verify advancement. + const show3: ResolvedSlideshow = { + slides: [ + { sceneId: "a", start: 0, end: 5, fragments: [], hotspots: [] }, + { sceneId: "b", start: 5, end: 10, fragments: [], hotspots: [] }, + { sceneId: "c", start: 10, end: 15, fragments: [], hotspots: [] }, + ], + sequences: {}, + }; + const p2 = fakePlayer(); + const c2 = new SlideshowController(p2, show3); + // slide 0 has no fragments; one next() should advance immediately to slide 1 + c2.next(); + expect(c2.position.slideIndex).toBe(1); + expect(p2.seek).toHaveBeenLastCalledWith(5); + }); + + it("next() on the last slide is a no-op", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + c.goToSlide(1); // slide b is last + c.next(); + expect(c.position.slideIndex).toBe(1); // no change + }); + + it("prev returns to the previous slide start", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + c.goToSlide(1); + c.prev(); + expect(c.position.slideIndex).toBe(0); + }); + + it("auto-pauses at a fragment, then next advances to the FOLLOWING fragment (not the end)", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + p.emit(2); // auto-pause at fragments[0]=2 + expect(c.position.fragmentIndex).toBe(0); + p.pause.mockClear(); // clear the pause from the auto-stop above + c.next(); // should target fragments[1]=4, NOT slide.end=5 + p.emit(4); + expect(p.pause).toHaveBeenCalled(); // must pause at 4, not skip to 5 + expect(c.position.fragmentIndex).toBe(1); + }); +}); + +describe("SlideshowController nextSlide", () => { + it("returns the next slide when not at the end", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + // At slide 0, next should be slide 1 (sceneId "b") + expect(c.nextSlide).not.toBeNull(); + expect(c.nextSlide?.sceneId).toBe("b"); + }); + + it("returns null when at the last slide in the sequence", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + c.goToSlide(1); // slide "b" is the last in main + expect(c.nextSlide).toBeNull(); + }); + + it("nextSlide is scoped to the current sequence", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + c.enterBranch("deep"); // "deep" has only one slide + expect(c.nextSlide).toBeNull(); + }); +}); + +describe("SlideshowController branching", () => { + it("enterBranch pushes onto the stack and enters the branch's first slide", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + c.enterBranch("deep"); + expect(c.position.sequenceId).toBe("deep"); + expect(c.currentSlide?.sceneId).toBe("c"); + expect(p.seek).toHaveBeenLastCalledWith(10); + }); + + it("counter is scoped to the current sequence", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + c.enterBranch("deep"); + expect(c.counter).toEqual({ index: 1, total: 1 }); + }); + + it("breadcrumb reflects the stack", () => { + const { c } = showAtSlide1InDeep(); + expect(c.breadcrumb.map((b) => b.label)).toEqual(["Main deck", "Deep dive"]); + }); + + it("back returns to the exact parent slide", () => { + const { c } = showAtSlide1InDeep(); + c.back(); + expect(c.position.sequenceId).toBe("main"); + expect(c.position.slideIndex).toBe(1); + }); + + it("backToMain clears nested branches to the root", () => { + const { c } = showAtSlide1InDeep(); + c.backToMain(); + expect(c.breadcrumb.length).toBe(1); + expect(c.position.slideIndex).toBe(1); + }); +}); + +describe("SlideshowController Fix 8a — fragmentIndex advances via onTime not next()", () => { + it("next() does NOT pre-increment fragmentIndex; onTime advances it when hold fires", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + // fragmentIndex starts at -1 (enterSlide sets it) + expect(c.position.fragmentIndex).toBe(-1); + // Call next() — should NOT pre-increment fragmentIndex + c.next(); + expect(c.position.fragmentIndex).toBe(-1); // still -1 until onTime fires + // Simulate playback reaching the hold point (fragments[0]=2) + p.emit(2); + expect(c.position.fragmentIndex).toBe(0); // onTime advanced it + }); + + it("next() after auto-pause targets the FOLLOWING fragment without pre-increment (regression)", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + p.emit(2); // auto-pause at fragments[0]=2; fragmentIndex=0 + expect(c.position.fragmentIndex).toBe(0); + p.pause.mockClear(); + c.next(); // should target fragments[1]=4 — fragmentIndex stays 0 until emit + expect(c.position.fragmentIndex).toBe(0); // NOT yet 1 + p.emit(4); + expect(p.pause).toHaveBeenCalled(); + expect(c.position.fragmentIndex).toBe(1); // onTime advanced it + }); +}); + +describe("SlideshowController Fix 8b — back() restores parent fragmentIndex", () => { + it("back() restores the saved fragmentIndex and seeks to the fragment time", () => { + const { p, c } = showAtFrag1(); + expect(c.position.fragmentIndex).toBe(1); + // Enter branch — saves frame {main, slideIndex:0, fragmentIndex:1} + c.enterBranch("deep"); + expect(c.position.sequenceId).toBe("deep"); + // Back should restore main, slideIndex=0, fragmentIndex=1, seek to fragments[1]=4 + c.back(); + expect(c.position.sequenceId).toBe("main"); + expect(c.position.slideIndex).toBe(0); + expect(c.position.fragmentIndex).toBe(1); + expect(p.seek).toHaveBeenLastCalledWith(4); // fragments[1] = 4 + }); + + it("back() when parent fragmentIndex=-1 seeks to slide start", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + // Enter branch immediately (fragmentIndex is still -1) + c.enterBranch("deep"); + c.back(); + expect(c.position.fragmentIndex).toBe(-1); + // seek should have been called with slide.start=0 (no fragment yet) + expect(p.seek).toHaveBeenLastCalledWith(0); + }); +}); + +describe("SlideshowController unknown-sequence degradation", () => { + it("enterBranch with an unknown id does not throw and leaves nav state unchanged", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + c.goToSlide(1); + expect(() => c.enterBranch("no-such-seq")).not.toThrow(); + expect(c.position.sequenceId).toBe("main"); + expect(c.position.slideIndex).toBe(1); + }); + + it("counter and currentSlide degrade gracefully when sequence is missing from show", () => { + // Construct a show where sequences has no entries, then verify slidesOf([missing]) + // returns [] and counter/currentSlide do not throw. + const showNoSeq: ResolvedSlideshow = { + slides: [{ sceneId: "x", start: 0, end: 5, fragments: [], hotspots: [] }], + sequences: {}, + }; + const p = fakePlayer(); + const c = new SlideshowController(p, showNoSeq); + // enterBranch guards — no bogus frame gets pushed. counter on main is safe. + expect(() => c.counter).not.toThrow(); + expect(c.counter).toEqual({ index: 1, total: 1 }); + // enterBranch with an unknown id: guard fires, state stays on main + expect(() => c.enterBranch("ghost")).not.toThrow(); + expect(c.position.sequenceId).toBe("main"); + // breadcrumb does not throw for unknown sequence in stack (regression guard) + expect(() => c.breadcrumb).not.toThrow(); + expect(c.breadcrumb[0]?.id).toBe("main"); + }); +}); + +// --------------------------------------------------------------------------- +// Bug fix tests: #5-ctrl — enterSlide clears holdAt on empty-slide early return +// --------------------------------------------------------------------------- +describe("SlideshowController Fix #5-ctrl — enterSlide clears holdAt on empty branch", () => { + it("enterSlide into an empty sequence clears holdAt so no spurious pause fires later", () => { + // Build a show where "empty" sequence has no slides + const show: ResolvedSlideshow = { + slides: [{ sceneId: "a", start: 0, end: 5, fragments: [2], hotspots: [] }], + sequences: { + empty: { id: "empty", label: "Empty", slides: [] }, + }, + }; + const p = fakePlayer(); + const c = new SlideshowController(p, show); + + // Advance to a holdAt state by calling next() (sets holdAt to fragment 2) + c.next(); + // Now enter a branch that has no slides — enterSlide should clear holdAt + c.enterBranch("empty"); + + // Simulate time advancing — must NOT call pause (stale holdAt would trigger it) + p.pause.mockClear(); + p.emit(2); + expect(p.pause).not.toHaveBeenCalled(); + }); + + it("enterSlide(0) on an empty main sequence does not throw", () => { + // This verifies the early-return path doesn't leave holdAt dirty + const show: ResolvedSlideshow = { + slides: [], + sequences: {}, + }; + const p = fakePlayer(); + // Constructor calls enterSlide(0) — must not throw with empty slides + expect(() => new SlideshowController(p, show)).not.toThrow(); + }); +}); + +// --------------------------------------------------------------------------- +// Bug fix tests: #backToMain — uses resumeSlide to preserve fragment position +// --------------------------------------------------------------------------- +describe("SlideshowController Fix #backToMain — restores fragment position like back()", () => { + it("backToMain restores the root frame's fragmentIndex (not reset to -1)", () => { + const { p, c } = showAtFrag1(); + expect(c.position.fragmentIndex).toBe(1); + + // Enter branch — saves root frame with fragmentIndex=1 + c.enterBranch("deep"); + expect(c.position.sequenceId).toBe("deep"); + + // backToMain should restore to main slideIndex=0, fragmentIndex=1 (not -1) + c.backToMain(); + expect(c.position.sequenceId).toBe("main"); + expect(c.position.slideIndex).toBe(0); + expect(c.position.fragmentIndex).toBe(1); + // resumeSlide seeks to the fragment time (fragments[1]=4) + expect(p.seek).toHaveBeenLastCalledWith(4); + }); + + it("backToMain when root fragmentIndex=-1 seeks to slide start", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW); + + // Enter branch immediately (root fragmentIndex is still -1) + c.enterBranch("deep"); + c.backToMain(); + + expect(c.position.fragmentIndex).toBe(-1); + expect(p.seek).toHaveBeenLastCalledWith(0); // slide start + }); + + it("backToMain with multiple nested branches restores root slide position", () => { + const show: ResolvedSlideshow = { + slides: [ + { sceneId: "a", start: 0, end: 5, fragments: [2], hotspots: [] }, + { sceneId: "b", start: 5, end: 10, fragments: [], hotspots: [] }, + ], + sequences: { + lvl1: { + id: "lvl1", + label: "Level 1", + slides: [{ sceneId: "c", start: 10, end: 13, fragments: [], hotspots: [] }], + }, + }, + }; + const p = fakePlayer(); + const c = new SlideshowController(p, show); + c.goToSlide(1); // root at slide 1 + c.enterBranch("lvl1"); + + // backToMain must pop all frames back to root + c.backToMain(); + expect(c.breadcrumb.length).toBe(1); + expect(c.position.sequenceId).toBe("main"); + expect(c.position.slideIndex).toBe(1); + }); +}); + +// --------------------------------------------------------------------------- +// Branch-edge navigation: prev/next at branch boundaries return to parent +// --------------------------------------------------------------------------- + +// Show used only for branch-edge tests: 2 main slides + single- and multi-slide branches. +const SHOW_BRANCH_EDGE: ResolvedSlideshow = { + slides: [ + { sceneId: "a", start: 0, end: 5, fragments: [], hotspots: [] }, + { sceneId: "b", start: 5, end: 10, fragments: [], hotspots: [] }, + ], + sequences: { + single: { + id: "single", + label: "Single slide branch", + slides: [{ sceneId: "x", start: 10, end: 13, fragments: [], hotspots: [] }], + }, + multi: { + id: "multi", + label: "Multi slide branch", + slides: [ + { sceneId: "y", start: 13, end: 16, fragments: [], hotspots: [] }, + { sceneId: "z", start: 16, end: 20, fragments: [], hotspots: [] }, + ], + }, + }, +}; + +/** Factory: controller on SHOW_BRANCH_EDGE, already inside the given branch. */ +function inBranch(branchId: string): { c: SlideshowController } { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW_BRANCH_EDGE); + c.enterBranch(branchId); + return { c }; +} + +describe("SlideshowController branch-edge nav — prev/next return to parent", () => { + it("single-slide branch: prev() returns to parent", () => { + const { c } = inBranch("single"); + expect(c.breadcrumb.length).toBe(2); + c.prev(); + expect(c.position.sequenceId).toBe("main"); + expect(c.breadcrumb.length).toBe(1); + }); + + it("single-slide branch: next() (no fragments, last slide) returns to parent", () => { + const { c } = inBranch("single"); + expect(c.breadcrumb.length).toBe(2); + c.next(); + expect(c.position.sequenceId).toBe("main"); + expect(c.breadcrumb.length).toBe(1); + }); + + it("multi-slide branch: prev() from slide 1 → slide 0, NOT popped", () => { + const { c } = inBranch("multi"); + c.goToSlide(1); + c.prev(); + expect(c.position.sequenceId).toBe("multi"); + expect(c.position.slideIndex).toBe(0); + expect(c.breadcrumb.length).toBe(2); + }); + + it("multi-slide branch: prev() from slide 0 → parent", () => { + const { c } = inBranch("multi"); + c.prev(); + expect(c.position.sequenceId).toBe("main"); + expect(c.breadcrumb.length).toBe(1); + }); + + it("multi-slide branch: next() from slide 0 → slide 1, NOT popped", () => { + const { c } = inBranch("multi"); + c.next(); + expect(c.position.sequenceId).toBe("multi"); + expect(c.position.slideIndex).toBe(1); + expect(c.breadcrumb.length).toBe(2); + }); + + it("multi-slide branch: next() from slide 1 (last) → parent", () => { + const { c } = inBranch("multi"); + c.goToSlide(1); + c.next(); + expect(c.position.sequenceId).toBe("main"); + expect(c.breadcrumb.length).toBe(1); + }); + + it("main line: prev() at slide 0 is a no-op (stack.length === 1)", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW_BRANCH_EDGE); + c.prev(); + expect(c.position.sequenceId).toBe("main"); + expect(c.position.slideIndex).toBe(0); + expect(c.breadcrumb.length).toBe(1); + }); + + it("main line: next() at last slide is a no-op (does NOT call back)", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW_BRANCH_EDGE); + c.goToSlide(1); + c.next(); + expect(c.position.sequenceId).toBe("main"); + expect(c.position.slideIndex).toBe(1); + expect(c.breadcrumb.length).toBe(1); + }); +}); + +// --------------------------------------------------------------------------- +// canPrev / canNext getters +// --------------------------------------------------------------------------- +describe("SlideshowController canPrev / canNext", () => { + it("main first slide: canPrev=false, canNext=true", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW_BRANCH_EDGE); + expect(c.canPrev).toBe(false); + expect(c.canNext).toBe(true); + }); + + it("main last slide: canPrev=true, canNext=false", () => { + const p = fakePlayer(); + const c = new SlideshowController(p, SHOW_BRANCH_EDGE); + c.goToSlide(1); // last slide (total=2) + expect(c.canPrev).toBe(true); + expect(c.canNext).toBe(false); + }); + + it("main middle slide: canPrev=true, canNext=true", () => { + // Use SHOW (3+ slides via SHOW_BRANCH_EDGE is only 2; use a 3-slide show) + const threeSlideShow: ResolvedSlideshow = { + slides: [ + { sceneId: "a", start: 0, end: 5, fragments: [], hotspots: [] }, + { sceneId: "b", start: 5, end: 10, fragments: [], hotspots: [] }, + { sceneId: "c", start: 10, end: 15, fragments: [], hotspots: [] }, + ], + sequences: {}, + }; + const p = fakePlayer(); + const c = new SlideshowController(p, threeSlideShow); + c.goToSlide(1); + expect(c.canPrev).toBe(true); + expect(c.canNext).toBe(true); + }); + + it("single-slide main: canPrev=false, canNext=false", () => { + const oneSlide: ResolvedSlideshow = { + slides: [{ sceneId: "only", start: 0, end: 5, fragments: [], hotspots: [] }], + sequences: {}, + }; + const p = fakePlayer(); + const c = new SlideshowController(p, oneSlide); + expect(c.canPrev).toBe(false); + expect(c.canNext).toBe(false); + }); + + it("inside a branch (first slide): canPrev=true (parent is prev), canNext=true (next-within or parent)", () => { + const { c } = inBranch("single"); + // single-slide branch, slideIndex=0, stack.length=2 + expect(c.canPrev).toBe(true); + expect(c.canNext).toBe(true); + }); + + it("inside a multi-slide branch (first slide): canPrev=true, canNext=true", () => { + const { c } = inBranch("multi"); + // slideIndex=0, next slide exists within branch + expect(c.canPrev).toBe(true); + expect(c.canNext).toBe(true); + }); + + it("inside a multi-slide branch (last slide): canPrev=true, canNext=true (parent is next)", () => { + const { c } = inBranch("multi"); + c.goToSlide(1); // last slide in branch + expect(c.canPrev).toBe(true); + expect(c.canNext).toBe(true); + }); +}); diff --git a/packages/player/src/slideshow/SlideshowController.ts b/packages/player/src/slideshow/SlideshowController.ts new file mode 100644 index 0000000000..da5559d39e --- /dev/null +++ b/packages/player/src/slideshow/SlideshowController.ts @@ -0,0 +1,215 @@ +import type { ResolvedSlideshow, ResolvedSlide } from "@hyperframes/core/slideshow"; + +export interface PlayerPort { + seek(t: number): void; + play(): void; + pause(): void; + readonly currentTime: number; + onTimeUpdate(cb: (t: number) => void): () => void; +} + +interface StackFrame { + sequenceId: string; + slideIndex: number; + fragmentIndex: number; // -1 = before first fragment / at slide start +} + +const MAIN = "main"; +const EPS = 0.001; + +export class SlideshowController { + private stack: StackFrame[] = [{ sequenceId: MAIN, slideIndex: 0, fragmentIndex: -1 }]; + private holdAt: number | null = null; + private changeCbs = new Set<() => void>(); + private unsub: () => void; + + constructor( + private player: PlayerPort, + private show: ResolvedSlideshow, + ) { + this.unsub = player.onTimeUpdate((t) => this.onTime(t)); + this.enterSlide(0); + } + + // fallow-ignore-next-line unused-class-member + dispose(): void { + this.unsub(); + } + + private slidesOf(sequenceId: string): ResolvedSlide[] { + if (sequenceId === MAIN) return this.show.slides; + return this.show.sequences[sequenceId]?.slides ?? []; + } + + private get frame(): StackFrame { + return this.stack[this.stack.length - 1]; + } + + get currentSlide(): ResolvedSlide | undefined { + return this.slidesOf(this.frame.sequenceId)[this.frame.slideIndex]; + } + + get nextSlide(): ResolvedSlide | null { + const slides = this.slidesOf(this.frame.sequenceId); + const next = slides[this.frame.slideIndex + 1]; + return next ?? null; + } + + get position(): { sequenceId: string; slideIndex: number; fragmentIndex: number } { + return { ...this.frame }; + } + + get counter(): { index: number; total: number } { + return { + index: this.frame.slideIndex + 1, + total: this.slidesOf(this.frame.sequenceId).length, + }; + } + + get canPrev(): boolean { + // prev has a destination: an earlier slide in this sequence, OR (in a branch) the parent. + return this.frame.slideIndex > 0 || this.stack.length > 1; + } + + get canNext(): boolean { + // next has a destination: a later slide in this sequence, OR (in a branch) the parent. + const slides = this.slidesOf(this.frame.sequenceId); + return this.frame.slideIndex + 1 < slides.length || this.stack.length > 1; + } + + get breadcrumb(): { id: string; label: string }[] { + return this.stack.map((f) => + f.sequenceId === MAIN + ? { id: MAIN, label: "Main deck" } + : { id: f.sequenceId, label: this.show.sequences[f.sequenceId]?.label ?? f.sequenceId }, + ); + } + + // fallow-ignore-next-line unused-class-member + onChange(cb: () => void): () => void { + this.changeCbs.add(cb); + return () => this.changeCbs.delete(cb); + } + + private emitChange(): void { + for (const cb of this.changeCbs) cb(); + } + + private enterSlide(index: number): void { + this.frame.slideIndex = index; + this.frame.fragmentIndex = -1; + this.holdAt = null; + const slide = this.currentSlide; + if (!slide) return; + this.player.seek(slide.start); + this.playTo(this.nextStop(slide, -1)); + this.emitChange(); + } + + /** + * Resumes a slide at a saved fragmentIndex without resetting to slide start. + * Used by back() to restore the caller's exact position in the parent slide. + */ + private resumeSlide(index: number, fragmentIndex: number): void { + this.frame.slideIndex = index; + this.frame.fragmentIndex = fragmentIndex; + const slide = this.currentSlide; + if (!slide) return; + // Seek to the fragment's hold time (or slide start if before any fragment). + const seekTime = + fragmentIndex >= 0 && fragmentIndex < slide.fragments.length + ? (slide.fragments[fragmentIndex] ?? slide.start) + : slide.start; + this.holdAt = null; + this.player.seek(seekTime); + this.player.pause(); + this.emitChange(); + } + + private nextStop(slide: ResolvedSlide, fragmentIndex: number): number { + const next = slide.fragments[fragmentIndex + 1]; + return next ?? slide.end; + } + + private playTo(t: number): void { + this.holdAt = t; + this.player.play(); + } + + private onTime(t: number): void { + if (this.holdAt !== null && t >= this.holdAt - EPS) { + const hold = this.holdAt; + this.holdAt = null; + // Advance fragmentIndex if this hold is a fragment boundary. + const slide = this.currentSlide; + if (slide) { + const fragIdx = slide.fragments.indexOf(hold); + if (fragIdx !== -1) { + this.frame.fragmentIndex = fragIdx; + this.emitChange(); + } + } + this.player.pause(); + } + } + + next(): void { + const slide = this.currentSlide; + if (!slide) return; + const hasMoreFragments = this.frame.fragmentIndex + 1 < slide.fragments.length; + const atEnd = this.player.currentTime >= slide.end - EPS; + if (hasMoreFragments && !atEnd) { + // Reveal the next fragment (play-to-hold). onTime() advances fragmentIndex at the hold. + const nextTarget = this.nextStop(slide, this.frame.fragmentIndex); + this.playTo(nextTarget); + this.emitChange(); + return; + } + // No more fragments to reveal — advance to the next slide immediately instead of + // playing the current slide out to its end. + const slides = this.slidesOf(this.frame.sequenceId); + if (this.frame.slideIndex + 1 < slides.length) { + this.enterSlide(this.frame.slideIndex + 1); + } else if (this.stack.length > 1) { + // End of a branch → return to the parent timeline. + this.back(); + } + } + + prev(): void { + if (this.frame.slideIndex > 0) { + this.enterSlide(this.frame.slideIndex - 1); + return; + } + if (this.stack.length > 1) { + // First slide of a branch → return to the parent timeline. + this.back(); + } + } + + goToSlide(index: number): void { + const slides = this.slidesOf(this.frame.sequenceId); + if (index >= 0 && index < slides.length) this.enterSlide(index); + } + + enterBranch(sequenceId: string): void { + if (!this.show.sequences[sequenceId]) return; + this.stack.push({ sequenceId, slideIndex: 0, fragmentIndex: -1 }); + this.enterSlide(0); + } + + back(): void { + if (this.stack.length <= 1) return; + this.stack.pop(); + // Restore the saved fragmentIndex from the parent frame rather than + // resetting to -1 (which enterSlide would do). This preserves the exact + // position the presenter was at before entering the branch. + this.resumeSlide(this.frame.slideIndex, this.frame.fragmentIndex); + } + + backToMain(): void { + if (this.stack.length <= 1) return; + this.stack = [this.stack[0]]; + this.resumeSlide(this.frame.slideIndex, this.frame.fragmentIndex); + } +} diff --git a/packages/player/src/slideshow/hyperframes-slideshow.test.ts b/packages/player/src/slideshow/hyperframes-slideshow.test.ts new file mode 100644 index 0000000000..08e904278a --- /dev/null +++ b/packages/player/src/slideshow/hyperframes-slideshow.test.ts @@ -0,0 +1,1650 @@ +// fallow-ignore-file code-duplication +import { describe, it, expect, beforeEach, afterEach, vi } from "vitest"; +import { handleRuntimeMessage } from "../runtime-message-handler.js"; +import { dropInvalidSlides } from "./hyperframes-slideshow.js"; + +// Dynamic import defers custom-element registration until happy-dom is active. +// (Static top-level imports execute before the test environment is set up, which +// means HTMLElement is undefined. This is the same pattern used by +// packages/player/src/hyperframes-player.test.ts.) + +describe("", () => { + beforeEach(async () => { + await import("./hyperframes-slideshow.js"); + }); + + function makeEl(opts: { + onNext?: () => void; + onPrev?: () => void; + index?: number; + total?: number; + }) { + const el = document.createElement("hyperframes-slideshow") as any; + document.body.appendChild(el); + el.__setControllerForTest({ + next: opts.onNext ?? (() => {}), + prev: opts.onPrev ?? (() => {}), + onChange: () => () => {}, + counter: { index: opts.index ?? 1, total: opts.total ?? 1 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { hotspots: [] }, + nextSlide: null, + }); + return el; + } + + it("is registered as a custom element", () => { + expect(customElements.get("hyperframes-slideshow")).toBeDefined(); + }); + + it("advances on ArrowRight key dispatched on window (regression: element need not be focused)", () => { + let nextCalled = false; + const el = makeEl({ + onNext: () => { + nextCalled = true; + }, + }); + window.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight" })); + expect(nextCalled).toBe(true); + el.remove(); + }); + + it("goes back on ArrowLeft key dispatched on window", () => { + let prevCalled = false; + const el = makeEl({ + onPrev: () => { + prevCalled = true; + }, + index: 2, + total: 3, + }); + window.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowLeft" })); + expect(prevCalled).toBe(true); + el.remove(); + }); + + it("advances on Space key dispatched on window", () => { + let nextCalled = false; + const el = makeEl({ + onNext: () => { + nextCalled = true; + }, + }); + window.dispatchEvent(new KeyboardEvent("keydown", { key: " " })); + expect(nextCalled).toBe(true); + el.remove(); + }); + + it("goes back on Backspace key dispatched on window", () => { + let prevCalled = false; + const el = makeEl({ + onPrev: () => { + prevCalled = true; + }, + }); + window.dispatchEvent(new KeyboardEvent("keydown", { key: "Backspace" })); + expect(prevCalled).toBe(true); + el.remove(); + }); + + it("disconnectedCallback removes window keydown listener so arrow keys no longer navigate", () => { + let nextCalled = false; + const el = makeEl({ + onNext: () => { + nextCalled = true; + }, + }); + el.remove(); // triggers disconnectedCallback — listener removed from window + window.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight" })); + expect(nextCalled).toBe(false); + }); + + it("renders prev/next buttons and counter in a single nav cluster after controller injection", () => { + const el = makeEl({ index: 1, total: 3 }); + const cluster = el.querySelector("[data-hf-nav-cluster]"); + expect(cluster).toBeTruthy(); + expect(el.querySelector("[data-hf-prev]")).toBeTruthy(); + expect(el.querySelector("[data-hf-next]")).toBeTruthy(); + // No breadcrumb, no separate back button in chrome + expect(el.querySelector("[data-hf-breadcrumb-item]")).toBeNull(); + expect(el.querySelector("[data-hf-back]")).toBeNull(); + el.remove(); + }); + + it("renders counter text", () => { + const el = makeEl({ index: 2, total: 5 }); + const counter = el.querySelector("[data-hf-counter]"); + expect(counter).toBeTruthy(); + expect(counter.textContent).toContain("2"); + expect(counter.textContent).toContain("5"); + el.remove(); + }); + + it("handles postMessage next", () => { + const el = document.createElement("hyperframes-slideshow") as any; + document.body.appendChild(el); + let nextCalled = false; + el.__setControllerForTest({ + next: () => { + nextCalled = true; + }, + prev: () => {}, + goToSlide: () => {}, + onChange: () => () => {}, + counter: { index: 1, total: 2 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { hotspots: [] }, + nextSlide: null, + }); + window.dispatchEvent(new MessageEvent("message", { data: { type: "next" } })); + expect(nextCalled).toBe(true); + el.remove(); + }); + + it("hotspot buttons do not accumulate on repeated renders", () => { + const el = document.createElement("hyperframes-slideshow") as any; + document.body.appendChild(el); + let onChangeCb: (() => void) | null = null; + el.__setControllerForTest({ + next: () => {}, + prev: () => {}, + goToSlide: () => {}, + onChange: (cb: () => void) => { + onChangeCb = cb; + return () => {}; + }, + counter: { index: 1, total: 2 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { + hotspots: [ + { id: "h1", label: "Why?", target: "deep", region: { x: 0, y: 0, w: 10, h: 10 } }, + ], + }, + nextSlide: null, + }); + // Trigger a second render via the onChange callback. + // Cast re-widens past control-flow narrowing: TS can't see the assignment + // inside the controller's onChange closure, so it narrows this to `never`. + (onChangeCb as (() => void) | null)?.(); + // After two renders, there should still be exactly 1 hotspot button + expect(el.querySelectorAll("[data-hotspot-id]").length).toBe(1); + el.remove(); + }); + + it("swipe with dominant vertical delta does NOT navigate; horizontal delta DOES", () => { + const el = document.createElement("hyperframes-slideshow") as any; + document.body.appendChild(el); + let nextCalled = 0; + el.__setControllerForTest({ + next: () => { + nextCalled++; + }, + prev: () => {}, + onChange: () => () => {}, + counter: { index: 1, total: 2 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { hotspots: [] }, + nextSlide: null, + }); + + // Mostly vertical swipe (deltaX=50, deltaY=80) — should NOT navigate + el.dispatchEvent( + new TouchEvent("touchstart", { + touches: [new Touch({ identifier: 1, target: el, clientX: 100, clientY: 100 })], + }), + ); + el.dispatchEvent( + new TouchEvent("touchend", { + changedTouches: [new Touch({ identifier: 1, target: el, clientX: 50, clientY: 20 })], + }), + ); + expect(nextCalled).toBe(0); + + // Mostly horizontal swipe (deltaX=50, deltaY=10) — SHOULD navigate + el.dispatchEvent( + new TouchEvent("touchstart", { + touches: [new Touch({ identifier: 1, target: el, clientX: 100, clientY: 100 })], + }), + ); + el.dispatchEvent( + new TouchEvent("touchend", { + changedTouches: [new Touch({ identifier: 1, target: el, clientX: 50, clientY: 110 })], + }), + ); + expect(nextCalled).toBe(1); + el.remove(); + }); + + it("renders a hotspot overlay and enters the branch on click", () => { + const el = document.createElement("hyperframes-slideshow") as any; + document.body.appendChild(el); + let entered = ""; + el.__setControllerForTest({ + next: () => {}, + prev: () => {}, + goToSlide: () => {}, + enterBranch: (id: string) => { + entered = id; + }, + onChange: () => () => {}, + counter: { index: 1, total: 2 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { + hotspots: [ + { id: "h1", label: "Why?", target: "deep", region: { x: 0, y: 0, w: 10, h: 10 } }, + ], + }, + nextSlide: null, + }); + const hotspot = el.querySelector("[data-hotspot-id='h1']") as HTMLElement; + expect(hotspot).toBeTruthy(); + hotspot.click(); + expect(entered).toBe("deep"); + el.remove(); + }); + + // --------------------------------------------------------------------------- + // Mute toggle tests + // --------------------------------------------------------------------------- + + it("does NOT render a mute button when the `sound` attribute is absent", () => { + const el = makeEl({ index: 1, total: 3 }); + // No `sound` attribute on the element — makeEl does not set it. + expect(el.querySelector("[data-hf-mute]")).toBeNull(); + el.remove(); + }); + + it("renders a mute button inside the nav capsule when `sound` attribute is present", () => { + const el = makeEl({ index: 1, total: 3 }); + el.setAttribute("sound", ""); + // Trigger re-render via __setControllerForTest (re-sets the controller which calls render). + el.__setControllerForTest({ + next: () => {}, + prev: () => {}, + onChange: () => () => {}, + counter: { index: 1, total: 3 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { hotspots: [] }, + nextSlide: null, + }); + const cluster = el.querySelector("[data-hf-nav-cluster]"); + const muteBtn = el.querySelector("[data-hf-mute]"); + expect(cluster).toBeTruthy(); + expect(muteBtn).toBeTruthy(); + // Mute button must be inside the cluster + expect(cluster.contains(muteBtn)).toBe(true); + el.remove(); + }); + + it("mute button click toggles `muted` getter, sets data-hf-muted, and dispatches hf-sound event", () => { + const el = makeEl({ index: 2, total: 4 }); + el.setAttribute("sound", ""); + el.__setControllerForTest({ + next: () => {}, + prev: () => {}, + onChange: () => () => {}, + counter: { index: 2, total: 4 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { hotspots: [] }, + nextSlide: null, + }); + + const events: { muted: boolean }[] = []; + el.addEventListener("hf-sound", (e: Event) => { + events.push((e as CustomEvent<{ muted: boolean }>).detail); + }); + + expect((el as any).muted).toBe(false); + expect(el.hasAttribute("data-hf-muted")).toBe(false); + + // Click once — mute + const muteBtn = el.querySelector("[data-hf-mute]") as HTMLElement; + expect(muteBtn).toBeTruthy(); + muteBtn.click(); + + expect((el as any).muted).toBe(true); + expect(el.hasAttribute("data-hf-muted")).toBe(true); + expect(events).toHaveLength(1); + expect(events[0]).toEqual({ muted: true }); + + // Click again — unmute + const muteBtnAfter = el.querySelector("[data-hf-mute]") as HTMLElement; + muteBtnAfter.click(); + + expect((el as any).muted).toBe(false); + expect(el.hasAttribute("data-hf-muted")).toBe(false); + expect(events).toHaveLength(2); + expect(events[1]).toEqual({ muted: false }); + + el.remove(); + }); + + it("mute button glyph reflects muted state (aria-pressed)", () => { + const el = makeEl({ index: 1, total: 2 }); + el.setAttribute("sound", ""); + el.__setControllerForTest({ + next: () => {}, + prev: () => {}, + onChange: () => () => {}, + counter: { index: 1, total: 2 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { hotspots: [] }, + nextSlide: null, + }); + + const muteBtn = el.querySelector("[data-hf-mute]") as HTMLElement; + expect(muteBtn.getAttribute("aria-pressed")).toBe("false"); + + muteBtn.click(); + + const muteBtnAfter = el.querySelector("[data-hf-mute]") as HTMLElement; + expect(muteBtnAfter.getAttribute("aria-pressed")).toBe("true"); + + el.remove(); + }); +}); + +// Seam test: handleRuntimeMessage passes scenes from the "timeline" postMessage +// to the setScenes callback so the player can cache and expose them. +describe("handleRuntimeMessage scenes seam", () => { + function makeCallbacks( + setScenes: (s: { id: string; start: number; duration: number }[]) => void, + ) { + return { + getPlaybackState: () => ({ currentTime: 0, duration: 0, paused: true, lastUpdateMs: 0 }), + setPlaybackState: () => {}, + getShaderLoadingMode: () => "default", + shaderLoader: { update: () => {}, destroy: () => {} } as any, + setCompositionSize: () => {}, + sendControl: () => {}, + getIframeDoc: () => null, + onRuntimeReady: () => {}, + setScenes, + updateControlsTime: () => {}, + updateControlsPlaying: () => {}, + dispatchEvent: () => {}, + seek: () => {}, + play: () => {}, + getLoop: () => false, + media: { + audioOwner: "iframe", + promoteToParentProxy: () => {}, + mirrorTime: () => {}, + pauseAll: () => {}, + playAll: () => {}, + } as any, + }; + } + + it("passes scenes from the timeline message to setScenes", () => { + const received: { id: string; start: number; duration: number }[][] = []; + const fakeWindow = {} as Window; + const event = new MessageEvent("message", { + source: fakeWindow, + data: { + source: "hf-preview", + type: "timeline", + durationInFrames: 300, + clips: [], + scenes: [ + { + id: "intro", + start: 0, + duration: 5, + label: "Intro", + thumbnailUrl: null, + avatarName: null, + }, + { + id: "body", + start: 5, + duration: 10, + label: "Body", + thumbnailUrl: null, + avatarName: null, + }, + ], + compositionWidth: 1920, + compositionHeight: 1080, + }, + }); + handleRuntimeMessage( + event, + fakeWindow, + makeCallbacks((s) => received.push(s)), + ); + expect(received).toHaveLength(1); + expect(received[0]).toHaveLength(2); + expect(received[0][0]).toMatchObject({ id: "intro", start: 0, duration: 5 }); + expect(received[0][1]).toMatchObject({ id: "body", start: 5, duration: 10 }); + }); + + it("calls setScenes with [] when scenes array is absent", () => { + const received: unknown[][] = []; + const fakeWindow = {} as Window; + const event = new MessageEvent("message", { + source: fakeWindow, + data: { + source: "hf-preview", + type: "timeline", + durationInFrames: 300, + clips: [], + compositionWidth: 1920, + compositionHeight: 1080, + }, + }); + handleRuntimeMessage( + event, + fakeWindow, + makeCallbacks((s) => received.push(s)), + ); + expect(received).toHaveLength(1); + expect(received[0]).toEqual([]); + }); +}); + +// --------------------------------------------------------------------------- +// Presenter-mode / BroadcastChannel tests +// --------------------------------------------------------------------------- +describe(" presenter mode", () => { + beforeEach(async () => { + await import("./hyperframes-slideshow.js"); + }); + + afterEach(() => { + vi.restoreAllMocks(); + }); + + /** Shared stub position used across presenter-mode tests. */ + const MAIN_POS = { sequenceId: "main", slideIndex: 0, fragmentIndex: -1 }; + + /** + * Creates a slideshow element with a stub controller whose goToSlide records + * the last called index. Appends to body; caller must call el.remove(). + */ + function makeAudienceEl() { + const el = document.createElement("hyperframes-slideshow") as any; + el.setAttribute("mode", "audience"); + document.body.appendChild(el); + let gotoIndex: number | null = null; + el.__setControllerForTest({ + next: () => {}, + prev: () => {}, + goToSlide: (i: number) => { + gotoIndex = i; + }, + onChange: () => () => {}, + counter: { index: 1, total: 3 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { hotspots: [] }, + nextSlide: null, + }); + return { el, getGotoIndex: () => gotoIndex }; + } + + /** + * Creates a presenter-mode element with a stub controller that exposes the + * last onChange callback. Appends to body; caller must call el.remove(). + */ + function makePresenterEl() { + const el = document.createElement("hyperframes-slideshow") as any; + document.body.appendChild(el); + let onChangeCb: (() => void) | null = null; + el.__setControllerForTest({ + next: () => {}, + prev: () => {}, + goToSlide: () => {}, + onChange: (cb: () => void) => { + onChangeCb = cb; + return () => {}; + }, + counter: { index: 1, total: 2 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { hotspots: [] }, + nextSlide: null, + get position() { + return MAIN_POS; + }, + }); + return { el, triggerChange: () => onChangeCb?.() }; + } + + const tick = () => new Promise((r) => setTimeout(r, 0)); + + it("audience mode: applies a goto message from the BroadcastChannel", async () => { + const presenterChannel = new BroadcastChannel("hf-slideshow"); + const { el, getGotoIndex } = makeAudienceEl(); + + await tick(); + presenterChannel.postMessage({ + type: "goto", + sequenceId: "main", + slideIndex: 2, + fragmentIndex: 0, + }); + await tick(); + + expect(getGotoIndex()).toBe(2); + presenterChannel.close(); + el.remove(); + }); + + it("audience mode: ignores goto for unknown sequenceId (no crash)", async () => { + const presenterChannel = new BroadcastChannel("hf-slideshow"); + const { el, getGotoIndex } = makeAudienceEl(); + + await tick(); + + // V1: non-main sequenceId must not crash and must not navigate + expect(() => { + presenterChannel.postMessage({ + type: "goto", + sequenceId: "branch-a", + slideIndex: 1, + fragmentIndex: 0, + }); + }).not.toThrow(); + + await tick(); + expect(getGotoIndex()).toBeNull(); + + presenterChannel.close(); + el.remove(); + }); + + it("presenter mode: posts position to channel on controller onChange", async () => { + const received: unknown[] = []; + const listenerChannel = new BroadcastChannel("hf-slideshow"); + listenerChannel.onmessage = (e: MessageEvent) => received.push(e.data); + + const { el, triggerChange } = makePresenterEl(); + await tick(); + + triggerChange(); + await tick(); + + expect(received.length).toBeGreaterThanOrEqual(1); + const msg = received[received.length - 1] as Record; + expect(msg["type"]).toBe("goto"); + expect(msg["sequenceId"]).toBe("main"); + expect(typeof msg["slideIndex"]).toBe("number"); + + listenerChannel.close(); + el.remove(); + }); + + it("present() opens a new window with mode=audience and sets presenter attribute", () => { + const openCalls: { url: string; target: string }[] = []; + vi.spyOn(window, "open").mockImplementation((url, target) => { + openCalls.push({ url: String(url), target: String(target) }); + return null; + }); + + const { el } = makePresenterEl(); + el.present(); + + expect(openCalls.length).toBe(1); + expect(openCalls[0].url).toContain("mode=audience"); + expect(openCalls[0].target).toBe("_blank"); + expect(el.getAttribute("data-hf-presenting")).toBe("true"); + + el.remove(); + }); + + it("disconnectedCallback closes the BroadcastChannel", async () => { + const { el } = makePresenterEl(); + await tick(); + + const received: unknown[] = []; + const spy = new BroadcastChannel("hf-slideshow"); + spy.onmessage = (e: MessageEvent) => received.push(e.data); + + el.remove(); // triggers disconnectedCallback + await tick(); + + // Channel closed — no further messages should arrive from the removed element + expect(received.length).toBe(0); + spy.close(); + }); + + function makePresenterWithSlides(opts: { + currentSlide: { sceneId: string; notes?: string }; + nextSlide: { sceneId: string; notes?: string } | null; + index?: number; + total?: number; + }) { + const el = document.createElement("hyperframes-slideshow") as any; + document.body.appendChild(el); + el.__setControllerForTest({ + next: () => {}, + prev: () => {}, + goToSlide: () => {}, + onChange: () => () => {}, + counter: { index: opts.index ?? 1, total: opts.total ?? 2 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { hotspots: [], ...opts.currentSlide }, + nextSlide: opts.nextSlide, + get position() { + return MAIN_POS; + }, + }); + el.present(); + return el; + } + + it("presenter chrome contains current slide notes when present", () => { + const el = makePresenterWithSlides({ + currentSlide: { sceneId: "intro", notes: "Talk about the mission here" }, + nextSlide: { sceneId: "features", notes: "Highlight top 3 features" }, + }); + const text = el.querySelector("[data-hf-chrome]").textContent as string; + expect(text).toContain("Talk about the mission here"); + expect(text).toContain("features"); + el.remove(); + }); + + it("presenter chrome contains next slide sceneId when nextSlide is set", () => { + const el = makePresenterWithSlides({ + currentSlide: { sceneId: "intro", notes: "Intro notes" }, + nextSlide: { sceneId: "slide-two", notes: "Second slide notes" }, + }); + const text = el.querySelector("[data-hf-chrome]").textContent as string; + expect(text).toContain("slide-two"); + el.remove(); + }); + + it("presenter chrome contains 'End of sequence' when nextSlide is null", () => { + const el = makePresenterWithSlides({ + currentSlide: { sceneId: "last", notes: "Final notes" }, + nextSlide: null, + index: 2, + total: 2, + }); + const text = el.querySelector("[data-hf-chrome]").textContent as string; + expect(text).toContain("End of sequence"); + el.remove(); + }); +}); + +// --------------------------------------------------------------------------- +// Bug fix tests: connectedCallback microtask defer + waitForScenes polling +// --------------------------------------------------------------------------- + +/** + * waitForScenes seam: import the module and invoke the private helper through + * a minimal stub player. We verify two behaviours: + * 1. resolves once scenes become available (non-empty poll result) + * 2. resolves with [] after timeout when scenes never appear + * + * The helper is not exported, so we test it via the component's init() path + * using __setControllerForTest (which bypasses init entirely) and a small + * white-box test that exercises the async scenes-poll path indirectly through + * a fake player whose `scenes` property starts empty then fills in after a + * tick. + */ +describe("waitForScenes seam — async scene polling", () => { + beforeEach(async () => { + await import("./hyperframes-slideshow.js"); + }); + + it("resolves immediately when scenes are already populated", async () => { + // Build a minimal fake player that already has scenes set + const player = document.createElement("div"); + Object.defineProperty(player, "scenes", { + get() { + return [{ id: "intro", start: 0, duration: 5 }]; + }, + }); + + // waitForScenes is private but we verify its behaviour by checking the + // path that calls it: if scenes are already present the fast path returns + // Promise.resolve() synchronously. + let resolved = false; + + // Inline the same logic the module uses so the seam is testable without + // exporting the helper. + function readScenesFake(el: HTMLElement): { id: string; start: number; duration: number }[] { + if ("scenes" in el && Array.isArray((el as { scenes: unknown }).scenes)) { + return (el as { scenes: { id: string; start: number; duration: number }[] }).scenes; + } + return []; + } + + const scenes = readScenesFake(player); + expect(scenes.length).toBeGreaterThan(0); + expect(scenes[0]).toMatchObject({ id: "intro", start: 0, duration: 5 }); + resolved = true; + expect(resolved).toBe(true); + }); + + it("resolves with scenes once they become available after a delay", async () => { + vi.useFakeTimers(); + + const player = document.createElement("div"); + let _scenes: { id: string; start: number; duration: number }[] = []; + Object.defineProperty(player, "scenes", { + get() { + return _scenes; + }, + }); + + // Replicate waitForScenes logic inline (same algorithm as the module) + const timeoutMs = 2500; + const maxIterations = Math.ceil(timeoutMs / 100); + + const resultPromise = new Promise<{ id: string; start: number; duration: number }[]>( + (resolve) => { + function readScenesFake( + el: HTMLElement, + ): { id: string; start: number; duration: number }[] { + if ("scenes" in el && Array.isArray((el as { scenes: unknown }).scenes)) { + return (el as { scenes: { id: string; start: number; duration: number }[] }).scenes; + } + return []; + } + const initial = readScenesFake(player); + if (initial.length > 0) { + resolve(initial); + return; + } + let iterations = 0; + const poll = (): void => { + const current = readScenesFake(player); + if (current.length > 0) { + resolve(current); + return; + } + iterations += 1; + if (iterations >= maxIterations) { + resolve([]); + return; + } + setTimeout(poll, 100); + }; + setTimeout(poll, 100); + }, + ); + + // Populate scenes after 300ms (3 poll ticks) + setTimeout(() => { + _scenes = [{ id: "slide-1", start: 0, duration: 8 }]; + }, 300); + + // Advance fake timers + await vi.advanceTimersByTimeAsync(400); + + const result = await resultPromise; + expect(result).toHaveLength(1); + expect(result[0]).toMatchObject({ id: "slide-1", start: 0, duration: 8 }); + + vi.useRealTimers(); + }); + + it("resolves with [] when scenes never appear within the timeout", async () => { + vi.useFakeTimers(); + + const player = document.createElement("div"); + Object.defineProperty(player, "scenes", { + get() { + return []; + }, + }); + + const timeoutMs = 500; + const maxIterations = Math.ceil(timeoutMs / 100); + + const resultPromise = new Promise<{ id: string; start: number; duration: number }[]>( + (resolve) => { + function readScenesFake( + el: HTMLElement, + ): { id: string; start: number; duration: number }[] { + if ("scenes" in el && Array.isArray((el as { scenes: unknown }).scenes)) { + return (el as { scenes: { id: string; start: number; duration: number }[] }).scenes; + } + return []; + } + const initial = readScenesFake(player); + if (initial.length > 0) { + resolve(initial); + return; + } + let iterations = 0; + const poll = (): void => { + const current = readScenesFake(player); + if (current.length > 0) { + resolve(current); + return; + } + iterations += 1; + if (iterations >= maxIterations) { + resolve([]); + return; + } + setTimeout(poll, 100); + }; + setTimeout(poll, 100); + }, + ); + + await vi.advanceTimersByTimeAsync(600); + const result = await resultPromise; + expect(result).toEqual([]); + + vi.useRealTimers(); + }); +}); + +describe(" deferred init (Bug 1)", () => { + beforeEach(async () => { + await import("./hyperframes-slideshow.js"); + }); + + it("connectedCallback defers init to a macrotask so parser-appended children are found", async () => { + // The fix defers player-dependent init to a setTimeout(0) macrotask rather + // than a microtask: when the bundle is loaded synchronously via '; + el.appendChild(fakePlayer); + document.body.appendChild(el); + + // Advance the macrotask that fires init + await vi.advanceTimersByTimeAsync(10); + + // After the failed init the element should not have chrome (graceful fail) + expect(el.querySelector("[data-hf-chrome]")).toBeNull(); + + // A second init must be possible — initInFlight must not be stuck true. + // We test by verifying that __setControllerForTest works (bindController path) + // and that the element renders normally after a controller is injected. + expect(() => + el.__setControllerForTest({ + next: () => {}, + prev: () => {}, + onChange: () => () => {}, + counter: { index: 1, total: 1 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { hotspots: [] }, + nextSlide: null, + }), + ).not.toThrow(); + expect(el.querySelector("[data-hf-chrome]")).toBeTruthy(); + + el.remove(); + vi.useRealTimers(); + }); +}); + +// --------------------------------------------------------------------------- +// Bug fix tests: #4/#6/#9 — epoch counter cancels stale init +// --------------------------------------------------------------------------- +describe(" Fix #4/#6/#9 — epoch counter cancels stale init", () => { + beforeEach(async () => { + await import("./hyperframes-slideshow.js"); + }); + + it("disconnect during waitForScenes cancels the old init; reconnect can bind a fresh controller", async () => { + vi.useFakeTimers(); + let bindCount = 0; + + const el = document.createElement("hyperframes-slideshow") as any; + + // Fake player: ready immediately, scenes never arrive (so waitForScenes polls) + const fakePlayer = document.createElement("div"); + Object.defineProperty(fakePlayer, "ready", { get: () => true }); + Object.defineProperty(fakePlayer, "seek", { value: () => {} }); + Object.defineProperty(fakePlayer, "play", { value: () => {} }); + Object.defineProperty(fakePlayer, "pause", { value: () => {} }); + Object.defineProperty(fakePlayer, "currentTime", { get: () => 0 }); + // scenes returns [] always — init will be stuck in waitForScenes polling + Object.defineProperty(fakePlayer, "scenes", { get: () => [] }); + + // Give it valid (but minimal) manifest HTML so parseSlideshowManifest won't throw + // We use an empty slides array — parseSlideshowManifest should return a manifest. + el.innerHTML = ""; + el.appendChild(fakePlayer); + document.body.appendChild(el); + + // Advance past the macrotask init defer — init() starts and is now in waitForScenes + await vi.advanceTimersByTimeAsync(10); + + // Disconnect mid-init — increments epoch, cancels the in-flight init + el.remove(); + + // Reconnect — new init() will start with a new epoch + document.body.appendChild(el); + + // Inject a controller directly (simulating a successful second init) + el.__setControllerForTest({ + next: () => {}, + prev: () => {}, + onChange: () => { + bindCount++; + return () => {}; + }, + counter: { index: 1, total: 1 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { hotspots: [] }, + nextSlide: null, + }); + + // The old in-flight init's waitForScenes eventually resolves with [] (timeout) + // but the epoch guard must prevent it from calling bindController again. + await vi.advanceTimersByTimeAsync(3000); + + // bindCount must be 1 (only the manual injection via __setControllerForTest) + expect(bindCount).toBe(1); + + el.remove(); + vi.useRealTimers(); + }); +}); + +// --------------------------------------------------------------------------- +// Fix #12/#13: dropInvalidSlides — phantom zero-duration slides are excluded +// --------------------------------------------------------------------------- +describe("dropInvalidSlides — phantom slide filtering", () => { + function makeSlide( + sceneId: string, + start: number, + end: number, + ): import("@hyperframes/core/slideshow").ResolvedSlide { + return { sceneId, start, end, fragments: [], hotspots: [] }; + } + + it("keeps slides with end > start and drops slides with end <= start", () => { + const show = { + slides: [ + makeSlide("valid", 0, 5), + makeSlide("phantom", 3, 3), // zero-duration (unresolvable partial override) + makeSlide("also-valid", 5, 10), + ], + sequences: {}, + }; + const cleaned = dropInvalidSlides(show); + expect(cleaned.slides).toHaveLength(2); + expect(cleaned.slides.map((s) => s.sceneId)).toEqual(["valid", "also-valid"]); + }); + + it("also filters phantoms from sequence slides", () => { + const show = { + slides: [makeSlide("main-slide", 0, 5)], + sequences: { + "branch-a": { + id: "branch-a", + label: "Branch A", + slides: [ + makeSlide("good", 0, 3), + makeSlide("bad", 7, 7), // phantom + ], + }, + }, + }; + const cleaned = dropInvalidSlides(show); + expect(cleaned.sequences["branch-a"]?.slides).toHaveLength(1); + expect(cleaned.sequences["branch-a"]?.slides[0]?.sceneId).toBe("good"); + }); + + it("does not mutate the input — original slides array is unchanged", () => { + const original = [makeSlide("a", 0, 5), makeSlide("phantom", 2, 2)]; + const show = { slides: original, sequences: {} }; + dropInvalidSlides(show); + expect(show.slides).toHaveLength(2); + }); + + it("a manifest with one phantom slide (partial startTime, missing scene) leaves zero navigable slides", () => { + // This is the exact scenario from bug #12/#13: + // { sceneId: 'x', startTime: 3 } with scene 'x' absent → start=3, end=3 (phantom) + const phantom = makeSlide("x", 3, 3); + const show = { slides: [phantom], sequences: {} }; + const cleaned = dropInvalidSlides(show); + expect(cleaned.slides).toHaveLength(0); + }); + + it("a manifest with one phantom + one valid slide → only the valid slide is navigable", () => { + const phantom = makeSlide("x", 3, 3); + const valid = makeSlide("intro", 0, 10); + const show = { slides: [valid, phantom], sequences: {} }; + const cleaned = dropInvalidSlides(show); + expect(cleaned.slides).toHaveLength(1); + expect(cleaned.slides[0]?.sceneId).toBe("intro"); + }); +}); + +// --------------------------------------------------------------------------- +// Conditional prev/next buttons (Fix 1 — nav button visibility) +// --------------------------------------------------------------------------- +describe(" conditional prev/next buttons", () => { + beforeEach(async () => { + await import("./hyperframes-slideshow.js"); + }); + + function makeElWithNav(opts: { + canPrev?: boolean; + canNext?: boolean; + index?: number; + total?: number; + }) { + const el = document.createElement("hyperframes-slideshow") as any; + document.body.appendChild(el); + el.__setControllerForTest({ + next: () => {}, + prev: () => {}, + onChange: () => () => {}, + counter: { index: opts.index ?? 1, total: opts.total ?? 11 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { hotspots: [] }, + nextSlide: null, + canPrev: opts.canPrev, + canNext: opts.canNext, + }); + return el; + } + + it("first slide of main deck (canPrev=false): prev button absent, next button present", () => { + const el = makeElWithNav({ canPrev: false, canNext: true, index: 1, total: 11 }); + expect(el.querySelector("[data-hf-prev]")).toBeNull(); + expect(el.querySelector("[data-hf-next]")).toBeTruthy(); + expect(el.querySelector("[data-hf-counter]")?.textContent).toContain("1"); + el.remove(); + }); + + it("last slide of main deck (canNext=false): next button absent, prev button present", () => { + const el = makeElWithNav({ canPrev: true, canNext: false, index: 11, total: 11 }); + expect(el.querySelector("[data-hf-next]")).toBeNull(); + expect(el.querySelector("[data-hf-prev]")).toBeTruthy(); + expect(el.querySelector("[data-hf-counter]")?.textContent).toContain("11"); + el.remove(); + }); + + it("middle slide (canPrev=true, canNext=true): both buttons present", () => { + const el = makeElWithNav({ canPrev: true, canNext: true, index: 5, total: 11 }); + expect(el.querySelector("[data-hf-prev]")).toBeTruthy(); + expect(el.querySelector("[data-hf-next]")).toBeTruthy(); + el.remove(); + }); + + it("inside branch (both canPrev=true, canNext=true): both buttons present", () => { + const el = document.createElement("hyperframes-slideshow") as any; + document.body.appendChild(el); + el.__setControllerForTest({ + next: () => {}, + prev: () => {}, + onChange: () => () => {}, + counter: { index: 1, total: 1 }, + breadcrumb: [ + { id: "main", label: "Main deck" }, + { id: "branch-a", label: "Branch A" }, + ], + currentSlide: { hotspots: [] }, + nextSlide: null, + canPrev: true, + canNext: true, + }); + expect(el.querySelector("[data-hf-prev]")).toBeTruthy(); + expect(el.querySelector("[data-hf-next]")).toBeTruthy(); + el.remove(); + }); + + it("when canPrev/canNext are undefined (legacy stub), both buttons are shown (default-safe)", () => { + // Stubs without canPrev/canNext should render both buttons (undefined !== false) + const el = document.createElement("hyperframes-slideshow") as any; + document.body.appendChild(el); + el.__setControllerForTest({ + next: () => {}, + prev: () => {}, + onChange: () => () => {}, + counter: { index: 1, total: 3 }, + breadcrumb: [{ id: "main", label: "Main deck" }], + currentSlide: { hotspots: [] }, + nextSlide: null, + // no canPrev / canNext + }); + expect(el.querySelector("[data-hf-prev]")).toBeTruthy(); + expect(el.querySelector("[data-hf-next]")).toBeTruthy(); + el.remove(); + }); +}); + +// --------------------------------------------------------------------------- +// Fix 4 (updated): Back chrome removed; postMessage back still works +// Navigation is forward/back only — no breadcrumb or back button in chrome. +// The controller's back()/backToMain() are retained for internal use by prev(). +// --------------------------------------------------------------------------- +describe(" Fix 4 — back affordance (postMessage only; chrome breadcrumb/back removed)", () => { + beforeEach(async () => { + await import("./hyperframes-slideshow.js"); + }); + + function makeElWithBreadcrumb(opts: { + breadcrumbLength: number; + onBack?: () => void; + onBackToMain?: () => void; + }) { + const el = document.createElement("hyperframes-slideshow") as any; + document.body.appendChild(el); + const breadcrumb = + opts.breadcrumbLength === 1 + ? [{ id: "main", label: "Main deck" }] + : [ + { id: "main", label: "Main deck" }, + { id: "branch-a", label: "Branch A" }, + ]; + el.__setControllerForTest({ + next: () => {}, + prev: () => {}, + onChange: () => () => {}, + counter: { index: 1, total: 2 }, + breadcrumb, + currentSlide: { hotspots: [] }, + nextSlide: null, + back: opts.onBack ?? (() => {}), + backToMain: opts.onBackToMain ?? (() => {}), + }); + return el; + } + + it("back button is NEVER present in chrome (removed in redesign)", () => { + const el = makeElWithBreadcrumb({ breadcrumbLength: 2 }); + expect(el.querySelector("[data-hf-back]")).toBeNull(); + el.remove(); + }); + + it("breadcrumb items are NEVER present in chrome (removed in redesign)", () => { + const el = makeElWithBreadcrumb({ breadcrumbLength: 2 }); + expect(el.querySelector("[data-hf-breadcrumb-item]")).toBeNull(); + el.remove(); + }); + + it("nav cluster (prev/counter/next) is present regardless of branch depth", () => { + const el = makeElWithBreadcrumb({ breadcrumbLength: 2 }); + expect(el.querySelector("[data-hf-nav-cluster]")).toBeTruthy(); + expect(el.querySelector("[data-hf-prev]")).toBeTruthy(); + expect(el.querySelector("[data-hf-next]")).toBeTruthy(); + expect(el.querySelector("[data-hf-counter]")).toBeTruthy(); + el.remove(); + }); + + it("postMessage {type:'back'} calls controller.back()", () => { + let backCalled = false; + const el = makeElWithBreadcrumb({ + breadcrumbLength: 2, + onBack: () => { + backCalled = true; + }, + }); + window.dispatchEvent(new MessageEvent("message", { data: { type: "back" } })); + expect(backCalled).toBe(true); + el.remove(); + }); + + it("postMessage {type:'back'} is ignored in audience mode", () => { + let backCalled = false; + const el = makeElWithBreadcrumb({ + breadcrumbLength: 2, + onBack: () => { + backCalled = true; + }, + }); + el.setAttribute("mode", "audience"); + window.dispatchEvent(new MessageEvent("message", { data: { type: "back" } })); + expect(backCalled).toBe(false); + el.remove(); + }); +}); diff --git a/packages/player/src/slideshow/hyperframes-slideshow.ts b/packages/player/src/slideshow/hyperframes-slideshow.ts new file mode 100644 index 0000000000..84686dfed4 --- /dev/null +++ b/packages/player/src/slideshow/hyperframes-slideshow.ts @@ -0,0 +1,602 @@ +import { + parseSlideshowManifest, + resolveSlideshow, + type ResolvedSlideshow, +} from "@hyperframes/core/slideshow"; +import { SlideshowController, type PlayerPort } from "./SlideshowController"; +import { SlideshowChannel, buildPresenterLayout, formatElapsed } from "./slideshowPresenter"; + +interface Hotspot { + id: string; + label: string; + target: string; + region?: { x: number; y: number; w: number; h: number }; +} + +interface ControllerLike { + next(): void; + prev(): void; + onChange(cb: () => void): () => void; + readonly counter: { index: number; total: number }; + readonly breadcrumb: { id: string; label: string }[]; + readonly currentSlide: { hotspots: Hotspot[]; notes?: string; sceneId?: string } | undefined; + readonly nextSlide: { sceneId: string; notes?: string } | null; + readonly position: { sequenceId: string; slideIndex: number; fragmentIndex: number }; + readonly canPrev?: boolean; + readonly canNext?: boolean; + goToSlide?(index: number): void; + enterBranch?(id: string): void; + back?(): void; + backToMain?(): void; + dispose?(): void; +} + +type PlayerElement = HTMLElement & { + seek(t: number): void; + play(): void; + pause(): void; + readonly currentTime: number; + readonly ready: boolean; +}; + +function isPlayerElement(el: HTMLElement): el is PlayerElement { + return ( + typeof (el as PlayerElement).seek === "function" && + typeof (el as PlayerElement).play === "function" && + typeof (el as PlayerElement).pause === "function" + ); +} + +// Injected once per document to avoid duplicating @keyframes across multiple elements. +let _keyframesInjected = false; +function injectKeyframesOnce(): void { + if (_keyframesInjected) return; + _keyframesInjected = true; + const style = document.createElement("style"); + style.textContent = ` + @keyframes hf-hotspot-pulse { + 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.35), 0 4px 16px rgba(0,0,0,0.35); } + 50% { box-shadow: 0 0 0 8px rgba(255,255,255,0), 0 4px 20px rgba(0,0,0,0.45); } + } + @media (prefers-reduced-motion: reduce) { + .hf-hotspot-pill { animation: none !important; } + } + `; + document.head.appendChild(style); +} + +export class HyperframesSlideshow extends HTMLElement { + private controller: ControllerLike | null = null; + private offChange: (() => void) | null = null; + private chrome: HTMLDivElement | null = null; + private touchStartX = 0; + private touchStartY = 0; + private channel: SlideshowChannel | null = null; + private presenterStartMs: number | null = null; + private presenterInterval: ReturnType | null = null; + private disconnected = false; + private initTimer: ReturnType | null = null; + private initInFlight = false; + private initGeneration = 0; + private _muted = false; + + /** Whether audio is currently muted. Reflects `data-hf-muted` attribute. */ + get muted(): boolean { + return this._muted; + } + + connectedCallback(): void { + this.disconnected = false; + this.initInFlight = false; + this.initGeneration += 1; + this.tabIndex = 0; + // note: if the inner player iframe has keyboard focus, window keydown in the + // top document won't fire — that edge remains; this listener fixes the dominant + // case where the page loads and arrows should work without clicking the element. + window.addEventListener("keydown", this.onKey); + this.addEventListener("touchstart", this.onTouchStart, { passive: true }); + this.addEventListener("touchend", this.onTouchEnd); + window.addEventListener("message", this.onMessage); + this.initChannel(); + // Defer player-dependent init to a macrotask so that child elements are + // parsed before we query for . This matters when the + // bundle is loaded synchronously (e.g. `; + const html = `${island}`; + const result = safeParseManifest(html); + expect(result.slides[0]?.sceneId).toBe("a"); + }); + + it("returns {slides:[]} for malformed JSON in the island", () => { + const html = ``; + const result = safeParseManifest(html); + expect(result).toEqual({ slides: [] }); + }); + + it("returns {slides:[]} when no island is present", () => { + const result = safeParseManifest(""); + expect(result).toEqual({ slides: [] }); + }); +}); + +// ── makeSlideshowNotesController ────────────────────────────────────────── +// +// These tests prove the two stale-closure invariants without needing a DOM: +// (a) Notes typed in comp A always flush to comp A's callback, never comp B's. +// (b) A discrete action after typing does NOT drop the typed note. + +describe("makeSlideshowNotesController", () => { + beforeEach(() => { + vi.useFakeTimers(); + }); + afterEach(() => { + vi.useRealTimers(); + }); + + it("(a) typing notes then switching composition flushes to the ORIGINAL callback", () => { + const ctrl = makeSlideshowNotesController(); + const persistA = vi.fn().mockResolvedValue(undefined); + const persistB = vi.fn().mockResolvedValue(undefined); + + const manifestA = { slides: [{ sceneId: "s1", notes: "typed in A" }] }; + const manifestB = { slides: [{ sceneId: "s2" }] }; + + // User types a note in composition A — schedules debounce with persistA. + ctrl.schedule(manifestA, persistA, 450); + + // Before the debounce fires, the composition switches to B. + // The panel calls flush() so the pending notes go to A's callback. + ctrl.flush(); + + // Now the panel re-schedules with B's manifest + callback. + ctrl.schedule(manifestB, persistB, 450); + + // Advance time past the debounce delay. + vi.advanceTimersByTime(500); + + // persistA must have been called with manifestA (the A-composition notes). + expect(persistA).toHaveBeenCalledOnce(); + expect(persistA.mock.calls[0]?.[0]).toEqual(manifestA); + + // persistB must have been called with manifestB (the B-composition timer). + expect(persistB).toHaveBeenCalledOnce(); + expect(persistB.mock.calls[0]?.[0]).toEqual(manifestB); + }); + + it("(a) flush after composition switch does NOT call the new composition's callback", () => { + const ctrl = makeSlideshowNotesController(); + const persistA = vi.fn().mockResolvedValue(undefined); + const persistB = vi.fn().mockResolvedValue(undefined); + + const manifestA = { slides: [{ sceneId: "s1", notes: "A notes" }] }; + + ctrl.schedule(manifestA, persistA, 450); + // Simulate comp switch: flush before B's manifest arrives. + ctrl.flush(); + + // B never schedules anything. + + vi.advanceTimersByTime(1000); + + expect(persistA).toHaveBeenCalledOnce(); + expect(persistB).not.toHaveBeenCalled(); + }); + + it("(b) discrete action right after typing does NOT drop the note", () => { + const ctrl = makeSlideshowNotesController(); + const persistNotes = vi.fn().mockResolvedValue(undefined); + + const manifestWithNotes = { slides: [{ sceneId: "s1", notes: "hello" }] }; + + // User types "hello" — schedules debounce. + ctrl.schedule(manifestWithNotes, persistNotes, 450); + + // Before debounce fires, user triggers a discrete action (e.g. mark fragment). + // The discrete manifest comes from the helper and does NOT include the note yet + // (it was computed from an older state snapshot). + const discreteManifest = { slides: [{ sceneId: "s1", fragments: [1.5] }] }; + const merged = ctrl.mergeIntoDiscrete(discreteManifest); + + // The merged manifest must include BOTH the fragment AND the note. + expect(merged.slides[0]).toMatchObject({ sceneId: "s1", notes: "hello", fragments: [1.5] }); + + // After mergeIntoDiscrete, pending is cleared — debounce no longer fires. + vi.advanceTimersByTime(500); + expect(persistNotes).not.toHaveBeenCalled(); + }); + + it("(b) notes from a different scene are not merged into an unrelated slide", () => { + const ctrl = makeSlideshowNotesController(); + const persistNotes = vi.fn().mockResolvedValue(undefined); + + // Pending notes are for scene s1. + const manifestWithNotes = { slides: [{ sceneId: "s1", notes: "s1 notes" }] }; + ctrl.schedule(manifestWithNotes, persistNotes, 450); + + // Discrete action affects scene s2 only. + const discreteManifest = { slides: [{ sceneId: "s2", fragments: [2.0] }] }; + const merged = ctrl.mergeIntoDiscrete(discreteManifest); + + // s2 slide should have no notes (pending notes belong to s1 which is not in discrete). + expect(merged.slides[0]).toMatchObject({ sceneId: "s2" }); + expect(merged.slides[0]?.notes).toBeUndefined(); + }); + + it("flush is idempotent — second flush does nothing", () => { + const ctrl = makeSlideshowNotesController(); + const persist = vi.fn().mockResolvedValue(undefined); + + ctrl.schedule({ slides: [{ sceneId: "x" }] }, persist, 450); + ctrl.flush(); + ctrl.flush(); + + expect(persist).toHaveBeenCalledOnce(); + }); + + it("cancel clears pending without calling persist", () => { + const ctrl = makeSlideshowNotesController(); + const persist = vi.fn().mockResolvedValue(undefined); + + ctrl.schedule({ slides: [] }, persist, 450); + ctrl.cancel(); + + vi.advanceTimersByTime(1000); + expect(persist).not.toHaveBeenCalled(); + }); +}); diff --git a/packages/studio/src/components/panels/SlideshowPanel.tsx b/packages/studio/src/components/panels/SlideshowPanel.tsx new file mode 100644 index 0000000000..0aafe0a02b --- /dev/null +++ b/packages/studio/src/components/panels/SlideshowPanel.tsx @@ -0,0 +1,422 @@ +/** + * SlideshowPanel — Studio right-panel tab for authoring the slideshow island. + * + * Four sub-surfaces: + * 1. Slide list: scenes → toggle main-line slide; reorder via up/down arrows. + * 2. Slide inspector: notes textarea; fragment hold-points. + * 3. Branch tree: create/rename sequences; assign scenes to a branch. + * 4. Hotspot tool: mark selected element as a hotspot on the active slide. + * + * State: the manifest is parsed from the current composition HTML on mount and + * on each `compHtml` change. Every edit calls `onPersist(manifest)` and + * updates local state. + * + * All manifest transforms are pure helpers — see slideshowPanelHelpers.ts. + */ + +import { useState, useEffect, useCallback, useRef } from "react"; +import { parseSlideshowManifest } from "@hyperframes/core/slideshow"; +import type { SlideshowManifest, SlideHotspot } from "@hyperframes/core/slideshow"; +import { usePlayerStore } from "../../player"; +import { useDomEditSelectionContext } from "../../contexts/DomEditContext"; +import { useFileManagerContext } from "../../contexts/FileManagerContext"; +import { + SectionHeader, + SlideList, + SlideInspector, + BranchTree, + HotspotTool, +} from "./SlideshowSubPanels"; + +// Re-export pure helpers so the test file can import from "./SlideshowPanel". +export { + toggleMainLineSlide, + reorderMainLineSlide, + setSlideNotes, + addFragment, + removeFragment, + createSequence, + renameSequence, + deleteSequence, + assignToBranch, + addHotspot, + removeHotspot, +} from "./slideshowPanelHelpers"; +export type { SceneInfo } from "./slideshowPanelHelpers"; + +export function safeParseManifest(html: string): SlideshowManifest { + try { + return parseSlideshowManifest(html) ?? { slides: [] }; + } catch { + console.warn("[SlideshowPanel] Failed to parse slideshow manifest; using empty manifest"); + return { slides: [] }; + } +} + +import { + toggleMainLineSlide, + reorderMainLineSlide, + setSlideNotes, + addFragment, + removeFragment, + createSequence, + renameSequence, + deleteSequence, + assignToBranch, + addHotspot, + removeHotspot, +} from "./slideshowPanelHelpers"; + +// ── Notes-attribution controller (pure, testable) ───────────────────────── +// +// The React component delegates debounce scheduling to these functions so +// the flush-attribution invariant can be tested without a DOM or React renderer. + +export interface NotesController { + /** Record a notes keystroke; returns the timer id. */ + schedule: ( + manifest: SlideshowManifest, + persist: (m: SlideshowManifest) => Promise, + delayMs: number, + ) => ReturnType; + /** Flush any pending notes synchronously (e.g. on comp-switch or unmount). */ + flush: () => void; + /** Cancel without flushing (used when a discrete action absorbs the notes). */ + cancel: () => void; + /** Merge any pending notes into an incoming discrete manifest, then clear. */ + mergeIntoDiscrete: (next: SlideshowManifest) => SlideshowManifest; +} + +export function makeSlideshowNotesController(): NotesController { + type Pending = { manifest: SlideshowManifest; persist: (m: SlideshowManifest) => Promise }; + let pending: Pending | null = null; + let timer: ReturnType | null = null; + + return { + schedule(manifest, persist, delayMs) { + if (timer !== null) clearTimeout(timer); + pending = { manifest, persist }; + timer = setTimeout(() => { + timer = null; + const p = pending; + if (p !== null) { + pending = null; + p.persist(p.manifest).catch(() => {}); + } + }, delayMs); + return timer; + }, + + flush() { + if (timer !== null) { + clearTimeout(timer); + timer = null; + } + const p = pending; + if (p !== null) { + pending = null; + p.persist(p.manifest).catch(() => {}); + } + }, + + cancel() { + if (timer !== null) { + clearTimeout(timer); + timer = null; + } + pending = null; + }, + + mergeIntoDiscrete(next) { + const p = pending; + if (p === null) return next; + pending = null; + if (timer !== null) { + clearTimeout(timer); + timer = null; + } + return { + ...next, + slides: next.slides.map((slide) => { + const ps = p.manifest.slides.find((s) => s.sceneId === slide.sceneId); + if (ps?.notes !== undefined && slide.notes === undefined) { + return { ...slide, notes: ps.notes }; + } + return slide; + }), + }; + }, + }; +} + +// ── Component ───────────────────────────────────────────────────────────── + +export interface SlideshowPanelProps { + /** Scenes from the live clip manifest (passed from StudioRightPanel). */ + scenes: import("./slideshowPanelHelpers").SceneInfo[]; + /** + * Called with the updated manifest after every discrete edit (toggle, add, + * delete, reorder, hotspot). Notes changes use the debounced variant instead. + */ + onPersist: (manifest: SlideshowManifest) => Promise; + /** Called with the updated manifest after the notes idle delay (~450 ms). */ + onPersistNotes: (manifest: SlideshowManifest) => Promise; +} + +type SectionKey = "slides" | "inspector" | "branches" | "hotspot"; + +export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowPanelProps) { + const { editingFile } = useFileManagerContext(); + const compHtml = editingFile?.content ?? null; + + const [manifest, setManifest] = useState(() => { + if (!compHtml) return { slides: [] }; + return safeParseManifest(compHtml); + }); + + const [selectedSceneId, setSelectedSceneId] = useState(null); + const [expandedSections, setExpandedSections] = useState>( + () => new Set(["slides", "inspector"]), + ); + + const currentTime = usePlayerStore((s) => s.currentTime); + const { domEditSelection } = useDomEditSelectionContext(); + + // Keep a ref to the latest manifest so discrete handlers always operate on + // the freshest state, never a stale closure snapshot. + const manifestRef = useRef(manifest); + + // Controller pairs each pending notes update with the callback that owns it, + // so a flush always writes to the composition the notes were typed in. + const notesCtrlRef = useRef(makeSlideshowNotesController()); + + useEffect(() => { + if (!compHtml) { + // Flush any pending notes for the OLD composition before clearing state. + notesCtrlRef.current.flush(); + setManifest({ slides: [] }); + manifestRef.current = { slides: [] }; + return; + } + const parsed = safeParseManifest(compHtml); + // Flush pending notes for the OLD composition before switching to the new one. + notesCtrlRef.current.flush(); + setManifest(parsed); + manifestRef.current = parsed; + }, [compHtml]); + + /** Discrete actions (toggle, reorder, add/delete, hotspot): persist immediately. */ + const applyManifest = useCallback( + async (next: SlideshowManifest) => { + // Fold any in-flight typed notes into the discrete manifest so they are + // not silently dropped when the debounce timer would have fired later. + const merged = notesCtrlRef.current.mergeIntoDiscrete(next); + setManifest(merged); + manifestRef.current = merged; + await onPersist(merged); + }, + [onPersist], + ); + + /** + * Notes path: update in-memory state immediately for a responsive UI, but + * debounce the disk persist to ~450 ms after the last keystroke. The pending + * notes are paired with the callback that owns them (the one bound to the + * current composition path), so a composition switch before the timer fires + * will flush to the correct file. + */ + const applyNotesManifest = useCallback( + (next: SlideshowManifest) => { + setManifest(next); + manifestRef.current = next; + notesCtrlRef.current.schedule(next, onPersistNotes, 450); + }, + [onPersistNotes], + ); + + // Flush any pending notes persist when the component unmounts so we never + // silently drop an edit the user made right before navigating away. + useEffect(() => { + const ctrl = notesCtrlRef.current; + return () => { + ctrl.flush(); + }; + }, []); + + const toggleSection = useCallback((key: SectionKey) => { + setExpandedSections((prev) => { + const next = new Set(prev); + if (next.has(key)) { + next.delete(key); + } else { + next.add(key); + } + return next; + }); + }, []); + + const selectedSlide = manifest.slides.find((s) => s.sceneId === selectedSceneId); + const sequences = manifest.slideSequences ?? []; + + const handleToggleSlide = useCallback( + (sceneId: string) => { + applyManifest(toggleMainLineSlide(manifestRef.current, sceneId)).catch(() => {}); + }, + [applyManifest], + ); + + const handleReorder = useCallback( + (sceneId: string, dir: "up" | "down") => { + applyManifest(reorderMainLineSlide(manifestRef.current, sceneId, dir)).catch(() => {}); + }, + [applyManifest], + ); + + const handleSetNotes = useCallback( + (notes: string) => { + if (!selectedSceneId) return; + applyNotesManifest(setSlideNotes(manifestRef.current, selectedSceneId, notes)); + }, + [selectedSceneId, applyNotesManifest], + ); + + const handleMarkFragment = useCallback(() => { + if (!selectedSceneId) return; + applyManifest(addFragment(manifestRef.current, selectedSceneId, currentTime)).catch(() => {}); + }, [selectedSceneId, currentTime, applyManifest]); + + const handleRemoveFragment = useCallback( + (time: number) => { + if (!selectedSceneId) return; + applyManifest(removeFragment(manifestRef.current, selectedSceneId, time)).catch(() => {}); + }, + [selectedSceneId, applyManifest], + ); + + const handleCreateSequence = useCallback( + (label: string) => { + const id = `seq-${Date.now()}`; + applyManifest(createSequence(manifestRef.current, id, label)).catch(() => {}); + }, + [applyManifest], + ); + + const handleRenameSequence = useCallback( + (id: string, label: string) => { + applyManifest(renameSequence(manifestRef.current, id, label)).catch(() => {}); + }, + [applyManifest], + ); + + const handleDeleteSequence = useCallback( + (id: string) => { + applyManifest(deleteSequence(manifestRef.current, id)).catch(() => {}); + }, + [applyManifest], + ); + + const handleAssign = useCallback( + (sequenceId: string, sceneId: string, assign: boolean) => { + applyManifest(assignToBranch(manifestRef.current, sequenceId, sceneId, assign)).catch( + () => {}, + ); + }, + [applyManifest], + ); + + const handleAddHotspot = useCallback( + (sceneId: string, hotspot: SlideHotspot) => { + applyManifest(addHotspot(manifestRef.current, sceneId, hotspot)).catch(() => {}); + }, + [applyManifest], + ); + + const handleRemoveHotspot = useCallback( + (sceneId: string, hotspotId: string) => { + applyManifest(removeHotspot(manifestRef.current, sceneId, hotspotId)).catch(() => {}); + }, + [applyManifest], + ); + + return ( +
+ toggleSection("slides")} + > + Slides ({manifest.slides.length}) + + {expandedSections.has("slides") && ( +
+ +
+ )} + + toggleSection("inspector")} + > + Slide Inspector + + {expandedSections.has("inspector") && ( + <> + {selectedSceneId ? ( + + ) : ( +

+ Select a scene above to inspect +

+ )} + + )} + + toggleSection("branches")} + > + Branches ({sequences.length}) + + {expandedSections.has("branches") && ( + + )} + + toggleSection("hotspot")} + > + Hotspot Tool + + {expandedSections.has("hotspot") && ( + + )} +
+ ); +} diff --git a/packages/studio/src/components/panels/SlideshowSubPanels.tsx b/packages/studio/src/components/panels/SlideshowSubPanels.tsx new file mode 100644 index 0000000000..b97e0b8a52 --- /dev/null +++ b/packages/studio/src/components/panels/SlideshowSubPanels.tsx @@ -0,0 +1,464 @@ +/** + * SlideshowSubPanels — internal sub-surface components for SlideshowPanel. + * Not exported from the package index; used only by SlideshowPanel.tsx. + */ + +import { useState, useCallback, useId } from "react"; +import type { SlideRef, SlideHotspot, SlideSequence } from "@hyperframes/core/slideshow"; +import type { DomEditSelection } from "../editor/domEditing"; +import type { SceneInfo } from "./slideshowPanelHelpers"; + +// ── Section header (accordion toggle) ──────────────────────────────────── + +export function SectionHeader({ + children, + expanded, + onToggle, +}: { + children: React.ReactNode; + expanded: boolean; + onToggle: () => void; +}) { + return ( + + ); +} + +// ── Sub-surface: Slide List ────────────────────────────────────────────── + +export interface SlideListProps { + scenes: SceneInfo[]; + slides: SlideRef[]; + selectedSceneId: string | null; + onSelect: (sceneId: string) => void; + onToggle: (sceneId: string) => void; + onReorder: (sceneId: string, dir: "up" | "down") => void; +} + +export function SlideList({ + scenes, + slides, + selectedSceneId, + onSelect, + onToggle, + onReorder, +}: SlideListProps) { + return ( +
+ {scenes.map((scene) => { + const isSlide = slides.some((s) => s.sceneId === scene.id); + const isSelected = selectedSceneId === scene.id; + return ( +
onSelect(scene.id)} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + onSelect(scene.id); + } + }} + > + onToggle(scene.id)} + onClick={(e) => e.stopPropagation()} + className="accent-studio-accent flex-shrink-0" + /> + {scene.label || scene.id} + {isSlide && ( + + + + + )} +
+ ); + })} + {scenes.length === 0 && ( +

No scenes found

+ )} +
+ ); +} + +// ── Sub-surface: Slide Inspector ───────────────────────────────────────── + +export interface SlideInspectorProps { + sceneId: string; + slide: SlideRef | undefined; + currentTime: number; + onSetNotes: (notes: string) => void; + onMarkFragment: () => void; + onRemoveFragment: (time: number) => void; +} + +// fallow-ignore-next-line complexity +export function SlideInspector({ + sceneId, + slide, + currentTime, + onSetNotes, + onMarkFragment, + onRemoveFragment, +}: SlideInspectorProps) { + const fragments = slide?.fragments ?? []; + return ( +
+

+ Scene: {sceneId} +

+
+ +