fundus 0.11.0 → 0.12.0

package/dist/runtime/chroma-key-video-lifecycle.js

@@ -5,63 +5,81 @@ function copyChromaKey(parameters) {
         keyColor: [...parameters.keyColor]
     };
 }
-/** Internal media state machine for a single, stable video element. */
+function copyPlaybackSettings(from, to) {
+    to.loop = from.loop;
+    to.playbackRate = from.playbackRate;
+}
+/** Internal media state machine that stages replacements before presenting them. */
 export class ChromaKeyVideoLifecycle {
-    #video;
+    #videos;
     #renderer;
-    #active = null;
+    #onPresentedVideoChange;
+    #presented = null;
+    #loading = null;
     #sourceGeneration = 0;
     #playing = false;
     #disposed = false;
+    #frameHeld = false;
     #loopGeneration = 0;
     #loopRunning = false;
     #pendingFrame = null;
-    constructor(video, renderer) {
-        this.#video = video;
+    constructor(video, renderer, standbyVideo = video, onPresentedVideoChange) {
+        this.#videos = [video, standbyVideo];
         this.#renderer = renderer;
-        video.addEventListener('play', this.#handlePlay);
-        video.addEventListener('pause', this.#handleStop);
-        video.addEventListener('ended', this.#handleStop);
-        video.addEventListener('seeked', this.#handleSeeked);
-        video.addEventListener('loadeddata', this.#handleLoadedData);
-        video.addEventListener('error', this.#handleError);
+        this.#onPresentedVideoChange = onPresentedVideoChange;
+        for (const element of new Set(this.#videos))
+            this.#listen(element);
     }
     switchSource(snapshot) {
         if (this.#disposed)
             return;
-        const previous = this.#active;
-        if (previous &&
-            (previous.status === 'loading' || previous.status === 'settled') &&
-            previous.rawVideoUrl === snapshot.rawVideoUrl &&
-            previous.maskUrl === snapshot.maskUrl) {
+        const loading = this.#loading;
+        if (loading && this.#matches(loading, snapshot) && loading.status === 'loading')
+            return;
+        const presented = this.#presented;
+        if (presented && this.#matches(presented, snapshot) && presented.status === 'settled') {
+            this.#cancelLoading();
+            presented.chromaKey = copyChromaKey(snapshot.chromaKey);
             return;
         }
-        this.#stopLoop();
-        this.#invalidatePlayRequest(previous);
+        this.#cancelLoading();
+        const loadingVideo = this.#loadingVideoFor(presented);
+        const playAfterHandoff = presented
+            ? this.#playing &&
+                (presented.video.ended || !presented.video.paused || presented.playRequestPending)
+            : this.#playing;
+        if (presented && loadingVideo === presented.video) {
+            this.#invalidatePlayRequest(presented);
+            this.#stopLoop();
+            presented.status = 'disposed';
+            this.#presented = null;
+            presented.video.pause();
+        }
         const active = {
             generation: ++this.#sourceGeneration,
             status: 'loading',
+            video: loadingVideo,
             rawVideoUrl: snapshot.rawVideoUrl,
             normalizedVideoUrl: snapshot.resolvedVideoUrl,
             maskUrl: snapshot.maskUrl,
+            maskImage: null,
             chromaKey: copyChromaKey(snapshot.chromaKey),
             mediaSettled: false,
             maskSettled: !snapshot.maskUrl,
+            playAfterHandoff,
             playRequestToken: 0,
             playRequestPending: false,
             playRejectedForCurrentIntent: false
         };
-        this.#active = active;
-        this.#video.pause();
-        this.#renderer.setMask(null);
-        // Keep the last presented canvas frame visible while the replacement video
-        // and mask settle. Clearing here exposes a transparent frame between the old
-        // draw and the new source's first decodable frame.
-        this.#video.src = snapshot.resolvedVideoUrl;
+        this.#loading = active;
+        if (!this.#frameHeld)
+            this.#renderer.setMask(null);
+        loadingVideo.pause();
+        loadingVideo.src = snapshot.resolvedVideoUrl;
         // Reading the reflected property gives the browser-normalized absolute URL.
-        active.normalizedVideoUrl = this.#video.src;
-        this.#video.load();
-        this.#primeMedia();
+        active.normalizedVideoUrl = loadingVideo.src;
+        loadingVideo.load();
+        this.#primeMedia(active);
         if (snapshot.maskUrl)
             this.#loadMask(active, snapshot.maskUrl);
     }
@@ -70,30 +88,34 @@ export class ChromaKeyVideoLifecycle {
             return;
         const changed = this.#playing !== playing;
         this.#playing = playing;
-        const active = this.#active;
+        const presented = this.#presented;
+        const loading = this.#loading;
+        if (loading?.status === 'loading')
+            loading.playAfterHandoff = playing;
         if (!playing) {
-            this.#invalidatePlayRequest(active);
+            this.#invalidatePlayRequest(presented);
             this.#stopLoop();
-            // Keep the muted loading warm-up alive until the browser has produced a
-            // decodable frame. Some engines treat preload="auto" as metadata-only and
-            // do not reach loadeddata until playback has started.
-            if (!active || active.status !== 'loading' || active.mediaSettled) {
-                this.#video.pause();
-            }
+            presented?.video.pause();
             return;
         }
-        if (changed && active)
-            active.playRejectedForCurrentIntent = false;
-        this.#requestPlayback(active);
+        if (changed && presented)
+            presented.playRejectedForCurrentIntent = false;
+        if (presented) {
+            presented.playAfterHandoff = true;
+            this.#requestPlayback(presented);
+        }
     }
     setChromaKey(parameters) {
         if (this.#disposed)
             return;
-        const active = this.#active;
+        const active = this.#loading ?? this.#presented;
         if (!active || active.status === 'failed' || active.status === 'disposed')
             return;
         active.chromaKey = copyChromaKey(parameters);
-        if (active.status === 'settled' && this.#video.paused && this.#isCurrentResource(active)) {
+        if (active === this.#presented &&
+            active.status === 'settled' &&
+            active.video.paused &&
+            this.#isCurrentResource(active)) {
             this.#draw(active);
         }
     }
@@ -102,19 +124,52 @@ export class ChromaKeyVideoLifecycle {
             return;
         this.#disposed = true;
         this.#sourceGeneration++;
-        const active = this.#active;
-        this.#invalidatePlayRequest(active);
+        this.#invalidatePlayRequest(this.#presented);
+        this.#invalidatePlayRequest(this.#loading);
         this.#stopLoop();
-        if (active)
-            active.status = 'disposed';
-        this.#active = null;
-        this.#video.removeEventListener('play', this.#handlePlay);
-        this.#video.removeEventListener('pause', this.#handleStop);
-        this.#video.removeEventListener('ended', this.#handleStop);
-        this.#video.removeEventListener('seeked', this.#handleSeeked);
-        this.#video.removeEventListener('loadeddata', this.#handleLoadedData);
-        this.#video.removeEventListener('error', this.#handleError);
-        this.#video.pause();
+        if (this.#presented)
+            this.#presented.status = 'disposed';
+        if (this.#loading)
+            this.#loading.status = 'disposed';
+        this.#presented = null;
+        this.#loading = null;
+        for (const video of new Set(this.#videos)) {
+            this.#unlisten(video);
+            video.pause();
+        }
+    }
+    #listen(video) {
+        video.addEventListener('play', this.#handlePlay);
+        video.addEventListener('pause', this.#handleStop);
+        video.addEventListener('ended', this.#handleStop);
+        video.addEventListener('seeked', this.#handleSeeked);
+        video.addEventListener('loadeddata', this.#handleLoadedData);
+        video.addEventListener('error', this.#handleError);
+    }
+    #unlisten(video) {
+        video.removeEventListener('play', this.#handlePlay);
+        video.removeEventListener('pause', this.#handleStop);
+        video.removeEventListener('ended', this.#handleStop);
+        video.removeEventListener('seeked', this.#handleSeeked);
+        video.removeEventListener('loadeddata', this.#handleLoadedData);
+        video.removeEventListener('error', this.#handleError);
+    }
+    #matches(active, snapshot) {
+        return active.rawVideoUrl === snapshot.rawVideoUrl && active.maskUrl === snapshot.maskUrl;
+    }
+    #loadingVideoFor(presented) {
+        if (!presented)
+            return this.#videos[0];
+        return this.#videos[0] === presented.video ? this.#videos[1] : this.#videos[0];
+    }
+    #cancelLoading() {
+        const loading = this.#loading;
+        if (!loading)
+            return;
+        this.#invalidatePlayRequest(loading);
+        loading.status = 'disposed';
+        loading.video.pause();
+        this.#loading = null;
     }
     #loadMask(active, maskUrl) {
         const image = new Image();
@@ -122,122 +177,161 @@ export class ChromaKeyVideoLifecycle {
         image
             .decode()
             .then(() => {
-            if (!this.#isActive(active) || active.status !== 'loading')
+            if (!this.#isLoading(active))
                 return;
-            this.#renderer.setMask(image);
+            active.maskImage = image;
             active.maskSettled = true;
             this.#settleIfReady(active);
         })
             .catch(() => {
-            if (!this.#isActive(active) || active.status !== 'loading')
+            if (!this.#isLoading(active))
                 return;
             console.warn(`Failed to load chroma-key mask "${maskUrl}".`);
             active.maskSettled = true;
             this.#settleIfReady(active);
         });
     }
-    #primeMedia() {
+    #primeMedia(active) {
         let request;
         try {
-            request = this.#video.play();
+            request = active.video.play();
         }
         catch {
             return;
         }
         Promise.resolve(request).catch(() => {
-            // Muted warm-up is best-effort. If preload still reaches loadeddata, the
-            // normal settled playback request below gets its own retry state.
+            // Muted warm-up is best-effort. preload may still reach loadeddata.
         });
     }
-    #handleLoadedData = () => {
-        const active = this.#active;
-        if (!active || active.status !== 'loading')
+    #handleLoadedData = (event) => {
+        const active = this.#loading;
+        if (!active || active.video !== event.currentTarget || !this.#isLoading(active))
             return;
         if (!this.#isCurrentResource(active))
             return;
         active.mediaSettled = true;
-        if (!this.#playing)
-            this.#video.pause();
+        // Freeze the staged source at its first decodable frame until its mask is ready.
+        active.video.pause();
         this.#settleIfReady(active);
     };
-    #handleError = () => {
-        const active = this.#active;
-        if (!active || active.status === 'failed' || active.status === 'disposed')
+    #handleError = (event) => {
+        const video = event.currentTarget;
+        const loading = this.#loading;
+        if (loading?.video === video && loading.status === 'loading') {
+            loading.status = 'failed';
+            this.#invalidatePlayRequest(loading);
+            loading.video.pause();
+            // A failed replacement never erases an already presented frame.
+            if (!this.#presented && !this.#frameHeld)
+                this.#clear();
             return;
-        active.status = 'failed';
-        this.#invalidatePlayRequest(active);
+        }
+        const presented = this.#presented;
+        if (!presented || presented.video !== video || presented.status !== 'settled')
+            return;
+        presented.status = 'failed';
+        this.#invalidatePlayRequest(presented);
         this.#stopLoop();
-        this.#video.pause();
-        this.#renderer.clear();
+        presented.video.pause();
+        if (!this.#loading)
+            this.#clear();
     };
-    #handlePlay = () => {
-        const active = this.#active;
-        // Loading playback only warms the hidden media element up to loadeddata.
-        // Drawing and the frame loop remain gated on video + mask settlement.
-        if (active?.status === 'loading')
+    #handlePlay = (event) => {
+        const video = event.currentTarget;
+        if (this.#loading?.video === video)
             return;
-        if (!active || active.status !== 'settled') {
-            this.#stopLoop();
-            this.#video.pause();
+        const presented = this.#presented;
+        if (!presented || presented.video !== video || presented.status !== 'settled') {
+            if (video && 'pause' in video)
+                video.pause();
             return;
         }
-        active.playRejectedForCurrentIntent = false;
-        if (!this.#video.paused)
-            this.#startLoop(active);
+        presented.playRejectedForCurrentIntent = false;
+        presented.playAfterHandoff = true;
+        if (this.#loading?.status === 'loading')
+            this.#loading.playAfterHandoff = true;
+        if (!presented.video.paused)
+            this.#startLoop(presented);
     };
-    #handleStop = () => {
-        const active = this.#active;
+    #handleStop = (event) => {
+        const presented = this.#presented;
+        if (!presented || presented.video !== event.currentTarget || presented.status !== 'settled')
+            return;
+        this.#invalidatePlayRequest(presented);
         this.#stopLoop();
-        if (active?.status === 'settled')
-            this.#draw(active);
+        this.#draw(presented);
+        presented.playAfterHandoff = false;
+        if (this.#loading?.status === 'loading')
+            this.#loading.playAfterHandoff = false;
     };
-    #handleSeeked = () => {
-        const active = this.#active;
-        if (!active || active.status !== 'settled' || !this.#video.paused)
+    #handleSeeked = (event) => {
+        const presented = this.#presented;
+        if (!presented ||
+            presented.video !== event.currentTarget ||
+            presented.status !== 'settled' ||
+            !presented.video.paused) {
             return;
-        this.#draw(active);
+        }
+        this.#draw(presented);
     };
     #settleIfReady(active) {
-        if (!this.#isActive(active) ||
-            active.status !== 'loading' ||
+        if (!this.#isLoading(active) ||
             !active.mediaSettled ||
-            !active.maskSettled) {
+            !active.maskSettled ||
+            !this.#isCurrentResource(active)) {
             return;
         }
-        if (!this.#isCurrentResource(active)) {
-            active.mediaSettled = false;
-            return;
+        const previous = this.#presented;
+        this.#stopLoop();
+        this.#invalidatePlayRequest(previous);
+        if (previous && previous.video !== active.video) {
+            copyPlaybackSettings(previous.video, active.video);
         }
-        if (!this.#playing && !this.#video.paused)
-            this.#video.pause();
+        active.video.pause();
         active.status = 'settled';
+        this.#loading = null;
+        this.#presented = active;
+        this.#renderer.setMask(active.maskImage);
         this.#draw(active);
-        if (this.#playing && !this.#video.paused)
-            this.#startLoop(active);
-        else
+        this.#onPresentedVideoChange?.(active.video);
+        if (previous && previous !== active) {
+            previous.status = 'disposed';
+            previous.video.pause();
+        }
+        if (this.#playing && active.playAfterHandoff)
             this.#requestPlayback(active);
     }
     #draw(active) {
-        if (!this.#isActive(active) ||
+        if (this.#disposed ||
+            this.#presented !== active ||
             active.status !== 'settled' ||
             !this.#isCurrentResource(active)) {
             return;
         }
-        this.#renderer.draw(this.#video, active.chromaKey);
+        this.#renderer.draw(active.video, active.chromaKey);
+        this.#frameHeld = true;
+    }
+    #clear() {
+        this.#renderer.clear();
+        this.#frameHeld = false;
     }
     #isCurrentResource(active) {
-        return (this.#video.readyState >= HAVE_CURRENT_DATA &&
-            this.#video.currentSrc === active.normalizedVideoUrl);
+        return (active.video.readyState >= HAVE_CURRENT_DATA &&
+            active.video.currentSrc === active.normalizedVideoUrl);
     }
-    #isActive(active) {
-        return (!this.#disposed && this.#active === active && active.generation === this.#sourceGeneration);
+    #isLoading(active) {
+        return (!this.#disposed &&
+            this.#loading === active &&
+            active.status === 'loading' &&
+            active.generation === this.#sourceGeneration);
     }
     #requestPlayback(active) {
-        if (!active ||
-            !this.#isActive(active) ||
+        if (this.#disposed ||
+            this.#presented !== active ||
             active.status !== 'settled' ||
             !this.#playing ||
-            !this.#video.paused ||
+            !active.playAfterHandoff ||
+            !active.video.paused ||
             active.playRequestPending ||
             active.playRejectedForCurrentIntent) {
             return;
@@ -246,7 +340,7 @@ export class ChromaKeyVideoLifecycle {
         active.playRequestPending = true;
         let request;
         try {
-            request = this.#video.play();
+            request = active.video.play();
         }
         catch {
             this.#finishPlayRequest(active, requestToken, false);
@@ -255,7 +349,7 @@ export class ChromaKeyVideoLifecycle {
         Promise.resolve(request).then(() => this.#finishPlayRequest(active, requestToken, true), () => this.#finishPlayRequest(active, requestToken, false));
     }
     #finishPlayRequest(active, requestToken, succeeded) {
-        if (!this.#isActive(active) || active.playRequestToken !== requestToken)
+        if (this.#disposed || this.#presented !== active || active.playRequestToken !== requestToken)
             return;
         active.playRequestPending = false;
         active.playRejectedForCurrentIntent = !succeeded;
@@ -268,9 +362,10 @@ export class ChromaKeyVideoLifecycle {
     }
     #startLoop(active) {
         if (this.#loopRunning ||
-            !this.#isActive(active) ||
+            this.#disposed ||
+            this.#presented !== active ||
             active.status !== 'settled' ||
-            this.#video.paused) {
+            active.video.paused) {
             return;
         }
         this.#loopRunning = true;
@@ -279,6 +374,7 @@ export class ChromaKeyVideoLifecycle {
     }
     #scheduleNextFrame(active, loopGeneration) {
         const sourceGeneration = active.generation;
+        const video = active.video;
         let handle = 0;
         const callback = () => {
             const pending = this.#pendingFrame;
@@ -287,28 +383,28 @@ export class ChromaKeyVideoLifecycle {
                 pending.handle !== handle ||
                 this.#loopGeneration !== loopGeneration ||
                 !this.#loopRunning ||
-                !this.#isActive(active) ||
+                this.#presented !== active ||
                 active.generation !== sourceGeneration ||
                 active.status !== 'settled' ||
-                this.#video.paused) {
+                video.paused) {
                 return;
             }
             this.#pendingFrame = null;
             this.#draw(active);
             if (this.#loopRunning &&
                 this.#loopGeneration === loopGeneration &&
-                this.#isActive(active) &&
-                !this.#video.paused) {
+                this.#presented === active &&
+                !video.paused) {
                 this.#scheduleNextFrame(active, loopGeneration);
             }
         };
-        if (this.#video.requestVideoFrameCallback) {
-            handle = this.#video.requestVideoFrameCallback(callback);
-            this.#pendingFrame = { generation: loopGeneration, kind: 'rvfc', handle };
+        if (video.requestVideoFrameCallback) {
+            handle = video.requestVideoFrameCallback(callback);
+            this.#pendingFrame = { generation: loopGeneration, kind: 'rvfc', handle, video };
         }
         else {
             handle = requestAnimationFrame(callback);
-            this.#pendingFrame = { generation: loopGeneration, kind: 'raf', handle };
+            this.#pendingFrame = { generation: loopGeneration, kind: 'raf', handle, video };
         }
     }
     #stopLoop() {
@@ -319,7 +415,7 @@ export class ChromaKeyVideoLifecycle {
         if (!pending)
             return;
         if (pending.kind === 'rvfc')
-            this.#video.cancelVideoFrameCallback?.(pending.handle);
+            pending.video.cancelVideoFrameCallback?.(pending.handle);
         else
             cancelAnimationFrame(pending.handle);
     }

package/dist/runtime/components/ChromaKeyVideo.svelte

@@ -33,6 +33,8 @@
 	}: Props = $props();
 
 	let canvasElement = $state<HTMLCanvasElement>();
+	let primaryVideoElement = $state<HTMLVideoElement>();
+	let standbyVideoElement = $state<HTMLVideoElement>();
 	let webglUnavailable = $state(false);
 
 	let renderer: ChromaKeyGl | null = null;
@@ -49,7 +51,15 @@
 			return;
 		}
 		const activeRenderer = renderer;
-		const activeLifecycle = new ChromaKeyVideoLifecycle(videoElement!, activeRenderer);
+		videoElement = primaryVideoElement!;
+		const activeLifecycle = new ChromaKeyVideoLifecycle(
+			primaryVideoElement!,
+			activeRenderer,
+			standbyVideoElement!,
+			(activeVideo) => {
+				videoElement = activeVideo;
+			}
+		);
 		lifecycle = activeLifecycle;
 
 		return () => {
@@ -102,7 +112,8 @@
 		{/if}
 	{:else}
 		<canvas bind:this={canvasElement}></canvas>
-		<video bind:this={videoElement} {loop} muted playsinline preload="auto"></video>
+		<video bind:this={primaryVideoElement} {loop} muted playsinline preload="auto"></video>
+		<video bind:this={standbyVideoElement} {loop} muted playsinline preload="auto"></video>
 	{/if}
 </div>
 

package/dist/runtime/components/Slice.svelte

@@ -1,23 +1,23 @@
 <!--
-	The slice component hosts render: one component, backend chosen
-	per use. Dispatches between the two private implementations — SliceDom
-	(default) and SliceCanvas — which share the same geometry
-	(`computeRenderCells`) and therefore render the same cells.
+	The slice component hosts rendering: one component, backend chosen per use.
+	Dispatches between the two private implementations — SliceDom (default) and
+	SliceCanvas — which share `computeRenderCells` geometry. The DOM backend maps
+	that geometry to one CSS border-image paint; Canvas draws the cells into one
+	canvas backing store.
 -->
 <script lang="ts">
+	import { onDestroy } from 'svelte';
 	import type { SliceManifestEntry } from '../../core/index.js';
+	import { SliceSourceLifecycle, type LoadedSliceSnapshot } from '../slice-source-lifecycle.js';
 	import SliceDom from './SliceDom.svelte';
 	import SliceCanvas from './SliceCanvas.svelte';
 
 	interface Props {
 		src: SliceManifestEntry;
 		/**
-		 * Rendering backend. `dom` (default) paints one absolutely-positioned
-		 * `<img>` window per cell; `canvas` draws every cell into a single
-		 * `<canvas>`. Both produce the same cells — but the DOM backend can
-		 * flicker in some situations (cells are separate elements the browser
-		 * composites independently, so a resize mid-animation can tear), so
-		 * hosts pick `canvas` where that hurts.
+		 * Rendering backend. `dom` (default) paints the shared slice geometry as
+		 * one CSS `border-image`; `canvas` draws the same cells into one `<canvas>`
+		 * with a device-pixel-ratio-sized backing store.
 		 */
 		backend?: 'dom' | 'canvas';
 		/** Accessible label for the rendered graphic. */
@@ -26,10 +26,20 @@
 	}
 
 	let { src, backend = 'dom', alt = '', class: className = '' }: Props = $props();
+	let snapshot = $state.raw<LoadedSliceSnapshot | null>(null);
+	const sourceLifecycle = new SliceSourceLifecycle((loaded) => {
+		snapshot = loaded;
+	});
+
+	$effect(() => {
+		sourceLifecycle.request(src);
+	});
+
+	onDestroy(() => sourceLifecycle.dispose());
 </script>
 
 {#if backend === 'canvas'}
-	<SliceCanvas {src} {alt} class={className} />
+	<SliceCanvas {snapshot} {alt} class={className} />
 {:else}
-	<SliceDom {src} {alt} class={className} />
+	<SliceDom {snapshot} {alt} class={className} />
 {/if}

package/dist/runtime/components/Slice.svelte.d.ts

@@ -2,12 +2,9 @@ import type { SliceManifestEntry } from '../../core/index.js';
 interface Props {
     src: SliceManifestEntry;
     /**
-     * Rendering backend. `dom` (default) paints one absolutely-positioned
-     * `<img>` window per cell; `canvas` draws every cell into a single
-     * `<canvas>`. Both produce the same cells — but the DOM backend can
-     * flicker in some situations (cells are separate elements the browser
-     * composites independently, so a resize mid-animation can tear), so
-     * hosts pick `canvas` where that hurts.
+     * Rendering backend. `dom` (default) paints the shared slice geometry as
+     * one CSS `border-image`; `canvas` draws the same cells into one `<canvas>`
+     * with a device-pixel-ratio-sized backing store.
      */
     backend?: 'dom' | 'canvas';
     /** Accessible label for the rendered graphic. */