visualfries 0.1.10115 → 0.3.2

package/dist/components/hooks/CanvasFillHook.js

@@ -0,0 +1,75 @@
+import { computeXYAngle } from '../../utils/canvas.js';
+/** Renders COLOR and GRADIENT schema components into a Pixi texture source. */
+export class CanvasFillHook {
+    types = ['setup', 'update', 'refresh', 'destroy'];
+    priority = 1;
+    #context;
+    #canvas;
+    #state;
+    constructor(cradle) {
+        this.#state = cradle.stateManager;
+    }
+    #draw() {
+        if (!this.#canvas)
+            return;
+        const data = this.#context.data;
+        if (data.type !== 'COLOR' && data.type !== 'GRADIENT')
+            return;
+        const ctx = this.#canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const { width, height } = data.appearance;
+        if (this.#canvas.width !== width || this.#canvas.height !== height) {
+            this.#canvas.width = width;
+            this.#canvas.height = height;
+        }
+        ctx.clearRect(0, 0, width, height);
+        if (data.type === 'COLOR') {
+            ctx.fillStyle = data.appearance.background;
+        }
+        else {
+            const definition = data.appearance.background;
+            const gradient = definition.type === 'radial'
+                ? ctx.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, Math.max(width, height) / 2)
+                : (() => {
+                    const { x1, y1, x2, y2 } = computeXYAngle(definition.angle ?? 180, width, height);
+                    return ctx.createLinearGradient(x1, y1, x2, y2);
+                })();
+            definition.colors.forEach((color, index) => {
+                const stop = definition.stops?.[index] ?? (index / (definition.colors.length - 1)) * 100;
+                gradient.addColorStop(Math.max(0, Math.min(1, stop / 100)), color);
+            });
+            ctx.fillStyle = gradient;
+        }
+        ctx.fillRect(0, 0, width, height);
+        const texture = this.#context.getResource('pixiTexture');
+        texture?.baseTexture?.update?.();
+        texture?.update?.();
+        this.#state.markDirty();
+    }
+    async #setup() {
+        const data = this.#context.data;
+        if (data.type !== 'COLOR' && data.type !== 'GRADIENT')
+            return;
+        if (!this.#canvas)
+            this.#canvas = document.createElement('canvas');
+        this.#canvas.width = data.appearance.width;
+        this.#canvas.height = data.appearance.height;
+        this.#draw();
+        this.#context.setResource('pixiResource', this.#canvas);
+    }
+    async #destroy() {
+        this.#canvas?.remove();
+        this.#canvas = undefined;
+        this.#context.removeResource('pixiResource');
+    }
+    async handle(type, context) {
+        this.#context = context;
+        if (type === 'destroy')
+            return this.#destroy();
+        if (!this.#canvas || type === 'setup' || type === 'refresh')
+            await this.#setup();
+        else
+            this.#draw();
+    }
+}

package/dist/components/hooks/DeterministicMediaFrameHook.js

@@ -57,6 +57,9 @@ export class DeterministicMediaFrameHook {
         if (override.imageElement) {
             this.#context.setResource('imageElement', override.imageElement);
         }
+        else {
+            this.#context.removeResource('imageElement');
+        }
         const cacheKeyChanged = this.#manager.commitCacheKey(data.id, override.cacheKey);
         if (cacheKeyChanged) {
             this.#state.markDirty();

package/dist/components/hooks/HtmlTextHook.js

@@ -39,6 +39,7 @@ export class HtmlTextHook {
         if (this.#htmlEl) {
             return;
         }
+        const componentData = this.#context.contextData;
         this.#currentId = this.#context.contextData.id;
         const comp = this.componentsManager.get(this.#context.contextData.id);
         if (this.#context.type === 'TEXT' && comp) {
@@ -53,8 +54,15 @@ export class HtmlTextHook {
         // Store references in the context for other hooks
         this.#context.setResource('wrapperHtmlEl', this.#wrapperEl);
         this.#context.setResource('htmlEl', this.#htmlEl);
-        // for texts we need to target this, but if we animate scale, position etc. we should target parent
-        this.#context.setResource('animationTarget', this.#htmlEl);
+        const background = componentData.type === 'TEXT' ? componentData.appearance.background : undefined;
+        const animateWrapper = background &&
+            typeof background === 'object' &&
+            'enabled' in background &&
+            background.enabled &&
+            background.target === 'wrapper';
+        // Card/background animations must target the wrapper. Animating only the text leaves the
+        // wrapper background fully opaque, which can create blank transition frames.
+        this.#context.setResource('animationTarget', animateWrapper ? this.#wrapperEl : this.#htmlEl);
         // Add to DOM if not already present
         const hasEl = this.domManager.htmlContainer.querySelector('#' + this.#wrapperEl.id);
         if (!hasEl) {
@@ -65,7 +73,7 @@ export class HtmlTextHook {
         if (this.#currentId !== this.#context.contextData.id) {
             await this.#handleRefresh();
         }
-        const isActive = this.#context.isActive;
+        const isActive = this.#context.isActive && this.#context.data.visible !== false;
         if (this.#wrapperEl) {
             if (isActive) {
                 this.#wrapperEl.style.display = 'flex';

package/dist/components/hooks/HtmlToCanvasHook.js

@@ -67,30 +67,8 @@ export class HtmlToCanvasHook {
         }
         const { width, height } = this.state;
         if (!this.svgBase) {
-            // Safely encode characters list, filtering out any problematic characters
-            let encodedChars = '';
-            try {
-                const charsList = this.state.getCharactersList().join('');
-                encodedChars = encodeURIComponent(charsList);
-            }
-            catch (error) {
-                // If encoding fails (e.g., unpaired surrogates), filter to only safe characters
-                console.warn('Failed to encode characters list, filtering to safe characters:', error);
-                const safeChars = this.state
-                    .getCharactersList()
-                    .filter((char) => {
-                    try {
-                        encodeURIComponent(char);
-                        return true;
-                    }
-                    catch {
-                        return false;
-                    }
-                })
-                    .join('');
-                encodedChars = encodeURIComponent(safeChars);
-            }
-            const { base, content, end } = await svgGenerator.generateSVG(this.#htmlEl, this.#context.data.appearance.text, width, height, 'svg-' + this.#context.contextData.id, encodedChars);
+            const { base, content, end } = await svgGenerator.generateSVG(this.#htmlEl, this.#context.data.appearance.text, width, height, 'svg-' + this.#context.contextData.id, encodeURIComponent(this.state.getCharactersList().join('')) // current component text encoded
+            );
             this.svgBase = base;
             this.svgEnd = end;
             this.svg = base + content + end;
@@ -149,8 +127,13 @@ export class HtmlToCanvasHook {
         if (this.svg && rerendered) {
             const texture = await this.#svgToTexture(this.svg);
             if (texture) {
-                this.#sprite.texture.destroy();
+                const previousTexture = this.#sprite.texture;
                 this.#sprite.texture = texture;
+                // Texture.EMPTY is a shared Pixi singleton. Destroying it corrupts later
+                // text/subtitle sprite construction in sparse seek sequences.
+                if (previousTexture !== Texture.EMPTY && previousTexture !== Texture.WHITE) {
+                    previousTexture.destroy(true);
+                }
             }
         }
     }

package/dist/components/hooks/MediaHook.js

@@ -1,8 +1,8 @@
 import { MediaManager } from '../../managers/MediaManager.js';
-import { z } from 'zod';
 import { StateManager } from '../../managers/StateManager.svelte.js';
+import { shouldPrepareMediaAtTime } from '../../utils/mediaWindow.js';
 export class MediaHook {
-    types = ['setup', 'update', 'destroy'];
+    types = ['setup', 'update', 'destroy', 'refresh:content'];
     priority = 1;
     #context;
     #mediaElement;
@@ -15,16 +15,49 @@ export class MediaHook {
     #playRequested = false;
     #lastControllerCheck = 0;
     #CONTROLLER_CHECK_INTERVAL = 100; // ms
+    #seekVersion = 0;
+    #cleanupPendingSeek;
     constructor(cradle) {
         this.mediaManager = cradle.mediaManager;
         this.state = cradle.stateManager;
     }
-    async #handleSetup() {
+    #shouldPrepareMedia() {
+        return shouldPrepareMediaAtTime(this.#context.contextData, this.#context.sceneState.currentTime);
+    }
+    async #releaseMediaElement(markDestroyed = false) {
+        this.#seekVersion += 1;
+        this.#cleanupPendingSeek?.();
+        this.#cleanupPendingSeek = undefined;
+        const source = this.#context.contextData.source;
+        const mediaType = this.#context.type === 'VIDEO' ? 'video' : 'audio';
+        if (source?.url) {
+            const isController = this.mediaManager.getMediaController(source.url, mediaType) ===
+                this.#context.contextData.id;
+            if (isController) {
+                await this.#pause('releasing media element');
+                this.mediaManager.setMediaController(source.url, undefined, mediaType);
+            }
+        }
+        if (this.#mediaElement) {
+            if (source?.url) {
+                this.mediaManager.releaseMediaElement(source.url, mediaType);
+            }
+            this.#context.removeResource(mediaType === 'video' ? 'videoElement' : 'audioElement');
+        }
+        this.#mediaElement = undefined;
+        this.#lastTargetTime = null;
+        this.#destroyed = markDestroyed;
+    }
+    async #handleSetup(force = false) {
         if (this.#mediaElement && !this.#destroyed) {
+            this.#context.setResource(this.#context.type === 'VIDEO' ? 'videoElement' : 'audioElement', this.#mediaElement);
             return;
         }
         if (this.#context.contextData.type !== 'VIDEO' && this.#context.contextData.type !== 'AUDIO')
             return;
+        if (!force && !this.#shouldPrepareMedia()) {
+            return;
+        }
         const mediaType = this.#context.type === 'VIDEO' ? 'video' : 'audio';
         const source = this.#context.contextData.source; // TODO: remove as any
         if (!source || !source.url) {
@@ -62,10 +95,28 @@ export class MediaHook {
         this.#lastTargetTime = target;
         await this.#seek(target);
     }
+    #refreshPixiTexture() {
+        try {
+            const texture = this.#context.getResource('pixiTexture');
+            const baseTexture = texture?.baseTexture;
+            if (baseTexture?.resource && typeof baseTexture.resource.update === 'function') {
+                baseTexture.resource.update();
+            }
+            else if (typeof baseTexture?.update === 'function') {
+                baseTexture.update();
+            }
+            else if (typeof texture?.update === 'function') {
+                texture.update();
+            }
+        }
+        catch { }
+    }
     async #seek(time) {
         if (!this.#mediaElement) {
             return;
         }
+        this.#cleanupPendingSeek?.();
+        this.#cleanupPendingSeek = undefined;
         const element = this.#mediaElement;
         const frameDuration = 1 / (this.state.data.settings.fps || 30);
         // Use fastSeek for larger jumps when supported
@@ -81,25 +132,98 @@ export class MediaHook {
         catch {
             element.currentTime = time;
         }
-        // Prefer requestVideoFrameCallback when available (videos only)
+        const seekVersion = ++this.#seekVersion;
+        const shouldRerenderWhenReady = this.state.environment !== 'server' &&
+            this.#context.sceneState.state !== 'playing' &&
+            this.#context.sceneState.state !== 'loading';
+        let settleSeek;
+        let settleResolved = false;
+        let settleTimeout;
+        let onSeeked;
+        let frameCallbackId;
         const anyElement = element;
+        let readinessCleanup = () => { };
+        const resolveSettled = () => {
+            if (settleResolved)
+                return;
+            settleResolved = true;
+            settleSeek?.();
+        };
+        const cleanupPendingSeek = () => {
+            readinessCleanup();
+            if (settleTimeout !== undefined) {
+                clearTimeout(settleTimeout);
+                settleTimeout = undefined;
+            }
+            if (onSeeked) {
+                element.removeEventListener('seeked', onSeeked);
+                onSeeked = undefined;
+            }
+            if (frameCallbackId !== undefined &&
+                typeof anyElement.cancelVideoFrameCallback === 'function') {
+                anyElement.cancelVideoFrameCallback(frameCallbackId);
+                frameCallbackId = undefined;
+            }
+            resolveSettled();
+        };
+        this.#cleanupPendingSeek = cleanupPendingSeek;
+        if (shouldRerenderWhenReady) {
+            let cleanedUp = false;
+            readinessCleanup = () => {
+                if (cleanedUp)
+                    return;
+                cleanedUp = true;
+                element.removeEventListener('seeked', handleReady);
+                element.removeEventListener('canplay', handleReady);
+            };
+            const handleReady = () => {
+                if (seekVersion !== this.#seekVersion) {
+                    readinessCleanup();
+                    return;
+                }
+                this.#refreshPixiTexture();
+                this.#context.eventManager.emit('rerender');
+                readinessCleanup();
+            };
+            element.addEventListener('seeked', handleReady);
+            element.addEventListener('canplay', handleReady);
+        }
+        let settled;
+        // Prefer requestVideoFrameCallback when available (videos only)
         if (typeof anyElement.requestVideoFrameCallback === 'function') {
-            return new Promise((resolve) => {
-                const timeout = setTimeout(() => resolve(true), 120);
-                anyElement.requestVideoFrameCallback((_now, _metadata) => {
-                    clearTimeout(timeout);
-                    resolve(true);
+            settled = new Promise((resolve) => {
+                settleSeek = () => resolve(true);
+                settleTimeout = setTimeout(() => resolveSettled(), 120);
+                frameCallbackId = anyElement.requestVideoFrameCallback((_now, _metadata) => {
+                    if (settleTimeout !== undefined) {
+                        clearTimeout(settleTimeout);
+                        settleTimeout = undefined;
+                    }
+                    frameCallbackId = undefined;
+                    resolveSettled();
                 });
             });
         }
-        // Fallback to seeked event
-        return new Promise((resolve) => {
-            const onSeeked = () => {
-                element.removeEventListener('seeked', onSeeked);
-                resolve(true);
-            };
-            element.addEventListener('seeked', onSeeked);
-        });
+        else {
+            // Fallback to seeked event
+            settled = new Promise((resolve) => {
+                settleSeek = () => resolve(true);
+                onSeeked = () => {
+                    element.removeEventListener('seeked', onSeeked);
+                    onSeeked = undefined;
+                    resolveSettled();
+                };
+                element.addEventListener('seeked', onSeeked);
+            });
+        }
+        await settled;
+        if (this.#cleanupPendingSeek === cleanupPendingSeek) {
+            this.#cleanupPendingSeek = undefined;
+        }
+        if (seekVersion !== this.#seekVersion || this.#mediaElement !== element) {
+            return;
+        }
+        this.#refreshPixiTexture();
     }
     #isOutOfSync() {
         if (!this.#mediaElement) {
@@ -159,9 +283,6 @@ export class MediaHook {
         }
     }
     async #handleUpdate() {
-        // On server, seeking is handled by MediaSeekingHook. Avoid duplicate logic/races.
-        if (this.state.environment === 'server')
-            return;
         if (this.#context.contextData.type !== 'VIDEO' && this.#context.contextData.type !== 'AUDIO')
             return;
         const isActive = this.#context.isActive;
@@ -175,6 +296,14 @@ export class MediaHook {
         const now = performance.now();
         const shouldCheckController = now - this.#lastControllerCheck > this.#CONTROLLER_CHECK_INTERVAL;
         const isController = this.mediaManager.getMediaController(source.url, mediaType) === this.#context.contextData.id;
+        const shouldPrepareMedia = this.#shouldPrepareMedia();
+        if (!shouldPrepareMedia) {
+            await this.#releaseMediaElement();
+            return;
+        }
+        if (!this.#mediaElement) {
+            await this.#handleSetup(true);
+        }
         if (!isActive) {
             if (isController) {
                 await this.#pause('!isActive isController');
@@ -183,20 +312,25 @@ export class MediaHook {
             return;
         }
         if (!this.#mediaElement) {
-            await this.#handleRefresh();
+            return;
         }
-        // Make sure we're still marked as the controller (debounced)
-        if (!isController && shouldCheckController) {
-            // Only set controller if no other component is currently controlling this media
+        // On server, seeking is handled by MediaSeekingHook. Avoid duplicate logic/races.
+        if (this.state.environment === 'server')
+            return;
+        // Make sure we're still marked as the controller. If nobody owns the shared media,
+        // claim it immediately; otherwise keep the debounce to avoid controller thrash.
+        if (!isController) {
             const currentController = this.mediaManager.getMediaController(source.url, mediaType);
-            if (!currentController) {
-                this.mediaManager.setMediaController(source.url, this.#context.contextData.id, mediaType);
-                await this.#autoSeek();
-                this.#lastControllerCheck = now;
-                // Safari-specific: Ensure audio is properly restored when taking control
-                if (this.#mediaElement && !isMuted) {
-                    this.#mediaElement.muted = false;
-                    this.#mediaElement.volume = componentVolume;
+            if (!currentController || shouldCheckController) {
+                if (!currentController) {
+                    this.mediaManager.setMediaController(source.url, this.#context.contextData.id, mediaType);
+                    await this.#autoSeek();
+                    this.#lastControllerCheck = now;
+                    // Safari-specific: Ensure audio is properly restored when taking control
+                    if (this.#mediaElement && !isMuted) {
+                        this.#mediaElement.muted = false;
+                        this.#mediaElement.volume = componentVolume;
+                    }
                 }
             }
         }
@@ -242,21 +376,10 @@ export class MediaHook {
     }
     async #handleRefresh() {
         await this.#handleDestroy();
-        await this.#handleSetup();
+        await this.#handleSetup(true);
     }
     async #handleDestroy() {
-        this.#destroyed = true;
-        this.#lastTargetTime = null;
-        // Release the media element back to the MediaManager
-        if (this.#mediaElement) {
-            const mediaType = this.#context.type === 'VIDEO' ? 'video' : 'audio';
-            const source = this.#context.contextData.source;
-            if (source && source.url) {
-                this.mediaManager.releaseMediaElement(source.url, mediaType);
-            }
-            this.#context.removeResource(mediaType === 'video' ? 'videoElement' : 'audioElement');
-        }
-        this.#mediaElement = undefined;
+        await this.#releaseMediaElement(true);
     }
     async handle(type, context) {
         this.#context = context;
@@ -272,9 +395,11 @@ export class MediaHook {
         else if (type === 'destroy') {
             return await this.#handleDestroy();
         }
-        else if (type === 'refresh') {
+        else if (type === 'refresh:content') {
             return await this.#handleRefresh();
         }
-        await this.#handleUpdate();
+        else if (type === 'update') {
+            await this.#handleUpdate();
+        }
     }
 }