visualfries 0.1.10115 → 0.3.2

package/dist/components/hooks/MediaSeekingHook.js

@@ -1,107 +1,147 @@
-import { z } from 'zod';
 import { StateManager } from '../../managers/StateManager.svelte.js';
 export class MediaSeekingHook {
-    types = ['setup', 'destroy', 'refresh', 'update'];
+    types = ['setup', 'destroy', 'refresh:content', 'update'];
     priority = 1;
     #context;
     #mediaElement;
+    #detachMediaEventHandlers;
     state;
     constructor(cradle) {
         this.state = cradle.stateManager;
     }
+    #attachMediaEventHandlers(media) {
+        const seekStatus = {
+            start: null,
+            end: null,
+            isSeeking: false
+        };
+        let canPlayTime = null;
+        let fullyReady = false;
+        let needCheckState = false;
+        let detached = false;
+        const checkReadyState = async () => {
+            if (detached || !needCheckState) {
+                return;
+            }
+            if (media.readyState < 3) {
+                await new Promise((resolve) => setTimeout(resolve, 500));
+                if (detached) {
+                    return;
+                }
+                needCheckState = true;
+                return checkReadyState();
+            }
+            this.state.removeLoadingComponent(this.#context.contextData.id);
+            needCheckState = false;
+            if (media.readyState === 4) {
+                fullyReady = true;
+            }
+        };
+        const onseeking = () => {
+            if (detached)
+                return;
+            const mediaTime = parseFloat(media.currentTime.toFixed(3));
+            if (!seekStatus.isSeeking && seekStatus.start != mediaTime) {
+                seekStatus.start = mediaTime;
+                seekStatus.end = null;
+                seekStatus.isSeeking = true;
+                this.state.addLoadingComponent(this.#context.contextData.id, 'seeking');
+                needCheckState = true;
+                checkReadyState();
+            }
+        };
+        const onseeked = () => {
+            if (detached)
+                return;
+            const mediaTime = parseFloat(media.currentTime.toFixed(3));
+            if (seekStatus.isSeeking) {
+                seekStatus.end = mediaTime;
+                seekStatus.isSeeking = false;
+                if (media.readyState === 4) {
+                    fullyReady = true;
+                }
+                needCheckState = false;
+            }
+        };
+        const onwaiting = () => {
+            if (detached)
+                return;
+            if (!fullyReady) {
+                this.state.addLoadingComponent(this.#context.contextData.id, 'waiting');
+                needCheckState = true;
+                checkReadyState();
+            }
+        };
+        const oncanplay = () => {
+            if (detached)
+                return;
+            const mediaTime = parseFloat(media.currentTime.toFixed(3));
+            if (canPlayTime != mediaTime) {
+                this.state.removeLoadingComponent(this.#context.contextData.id);
+                canPlayTime = mediaTime;
+                needCheckState = false;
+            }
+            if (media.readyState === 4) {
+                fullyReady = true;
+            }
+        };
+        const onerror = () => {
+            if (detached)
+                return;
+            if (media.error && media.error.code !== 4) {
+                console.error('Media error:', media.src, media.error);
+            }
+        };
+        media.onseeking = onseeking;
+        media.onseeked = onseeked;
+        media.onwaiting = onwaiting;
+        media.oncanplay = oncanplay;
+        media.onerror = onerror;
+        return () => {
+            detached = true;
+            needCheckState = false;
+            if (media.onseeking === onseeking) {
+                media.onseeking = null;
+            }
+            if (media.onseeked === onseeked) {
+                media.onseeked = null;
+            }
+            if (media.onwaiting === onwaiting) {
+                media.onwaiting = null;
+            }
+            if (media.oncanplay === oncanplay) {
+                media.oncanplay = null;
+            }
+            if (media.onerror === onerror) {
+                media.onerror = null;
+            }
+        };
+    }
+    #clearMediaEventHandlers() {
+        this.#detachMediaEventHandlers?.();
+        this.#detachMediaEventHandlers = undefined;
+        this.state.removeLoadingComponent(this.#context.contextData.id);
+    }
     async #handleSetup() {
-        if (this.#mediaElement) {
-            return;
-        }
         if (this.#context.contextData.type !== 'VIDEO' && this.#context.contextData.type !== 'AUDIO')
             return;
         const mediaType = this.#context.type === 'VIDEO' ? 'video' : 'audio';
         const media = this.#context.getResource(mediaType === 'video' ? 'videoElement' : 'audioElement');
         if (!media) {
-            console.error('MediaSeekingHook: No media element found');
             return;
         }
-        this.#mediaElement = media;
-        if (media && this.#context.isActive) {
-            const seekStatus = {
-                start: null,
-                end: null,
-                isSeeking: false
-            };
-            let canPlayTime = null;
-            let fullyReady = false;
-            let needCheckState = false;
-            const checkReadyState = async () => {
-                if (!needCheckState) {
-                    return;
-                }
-                if (media.readyState < 3) {
-                    await new Promise((resolve) => setTimeout(resolve, 500));
-                    needCheckState = true;
-                    return checkReadyState();
-                }
-                this.state.removeLoadingComponent(this.#context.contextData.id);
-                needCheckState = false;
-                if (media.readyState === 4) {
-                    fullyReady = true;
-                }
-            };
-            media.onseeking = () => {
-                const mediaTime = parseFloat(media.currentTime.toFixed(1));
-                if (!seekStatus.isSeeking && seekStatus.start != mediaTime) {
-                    seekStatus.start = mediaTime;
-                    seekStatus.end = null;
-                    seekStatus.isSeeking = true;
-                    this.state.addLoadingComponent(this.#context.contextData.id, 'seeking');
-                    needCheckState = true;
-                    checkReadyState();
-                }
-            };
-            media.onseeked = () => {
-                const mediaTime = parseFloat(media.currentTime.toFixed(1));
-                if (seekStatus.isSeeking) {
-                    seekStatus.end = mediaTime;
-                    seekStatus.isSeeking = false;
-                    if (media.readyState === 4) {
-                        fullyReady = true;
-                    }
-                    needCheckState = false;
-                }
-            };
-            // Loading states
-            media.onwaiting = () => {
-                if (!fullyReady) {
-                    this.state.addLoadingComponent(this.#context.contextData.id, 'waiting');
-                    needCheckState = true;
-                    checkReadyState();
-                }
-            };
-            media.oncanplay = () => {
-                const mediaTime = parseFloat(media.currentTime.toFixed(1));
-                if (canPlayTime != mediaTime) {
-                    this.state.removeLoadingComponent(this.#context.contextData.id);
-                    canPlayTime = mediaTime;
-                    needCheckState = false;
-                }
-                if (media.readyState === 4) {
-                    fullyReady = true;
-                }
-                // Don't try to play here - let MediaHook handle play/pause logic
-                // This prevents conflicts and race conditions, especially on Safari
-            };
-            // Add error event handling
-            media.onerror = () => {
-                if (media.error && media.error.code !== 4) {
-                    console.error('Media error:', media.src, media.error);
-                }
-            };
+        if (this.#mediaElement === media) {
+            return;
         }
+        this.#clearMediaEventHandlers();
+        this.#mediaElement = media;
     }
     async #handleRefresh() {
         await this.#handleDestroy();
         await this.#handleSetup();
     }
     async #handleDestroy() {
+        this.#clearMediaEventHandlers();
         // Clear media element reference - MediaHook will handle releaseMediaElement
         this.#mediaElement = undefined;
     }
@@ -109,15 +149,25 @@ export class MediaSeekingHook {
         // Only handle video components as requested
         if (this.#context.contextData.type !== 'VIDEO')
             return;
-        // Get the HTMLVideoElement from resources or cached reference
-        let media = this.#mediaElement;
-        if (!media) {
-            const res = this.#context.getResource('videoElement');
-            media = res;
-            this.#mediaElement = media; // cache for later
+        const resource = this.#context.getResource('videoElement');
+        if (!resource) {
+            this.#clearMediaEventHandlers();
+            this.#mediaElement = undefined;
+            return;
+        }
+        if (resource !== this.#mediaElement) {
+            await this.#handleSetup();
         }
+        const media = this.#mediaElement;
         if (!media)
             return;
+        if (!this.#context.isActive) {
+            this.#clearMediaEventHandlers();
+            return;
+        }
+        if (!this.#detachMediaEventHandlers) {
+            this.#detachMediaEventHandlers = this.#attachMediaEventHandlers(media);
+        }
         const fps = this.state.data.settings.fps || 30;
         const targetTime = this.#context.currentComponentTime;
         const targetFrame = Math.round(targetTime * fps);
@@ -140,7 +190,7 @@ export class MediaSeekingHook {
                 else {
                     media.currentTime = seekTo;
                 }
-                // Await seek completion using a robust multi-attempt strategy similar to Remotion
+                // Await seek completion using a robust multi-attempt strategy.
                 await new Promise((resolve) => {
                     const anyMedia = media;
                     let attempts = 0;
@@ -197,7 +247,7 @@ export class MediaSeekingHook {
         else if (type === 'destroy') {
             return await this.#handleDestroy();
         }
-        else if (type === 'refresh') {
+        else if (type === 'refresh:content') {
             return await this.#handleRefresh();
         }
         else if (type === 'update') {

package/dist/components/hooks/PixiGifHook.js

@@ -33,6 +33,8 @@ export class PixiGifHook {
         }
         if (this.#imageElement) {
             const { appearance } = this.componentElement;
+            this.#imageElement.loop = this.componentElement.playback?.loop ?? true;
+            this.#imageElement.animationSpeed = this.componentElement.playback?.speed ?? 1;
             setPlacementAndOpacity(this.#imageElement, appearance);
             this.#displayObject.addChild(this.#imageElement);
             this.#context.setResource('pixiRenderObject', this.#displayObject);
@@ -61,10 +63,8 @@ export class PixiGifHook {
         }
         else {
             this.#imageElement.stop();
-            const gifFrame = this.#imageElement.totalFrames > 0
-                ? this.state.currentFrame % this.#imageElement.totalFrames
-                : 0;
-            this.#imageElement.currentFrame = gifFrame;
+            const speed = this.componentElement.playback?.speed ?? 1;
+            this.#imageElement.seek(Math.max(0, this.#context.currentComponentTime) * 1000 * speed);
         }
         const isActive = this.#context.isActive;
         if (this.#displayObject) {

package/dist/components/hooks/PixiSplitScreenDisplayObjectHook.d.ts

@@ -3,6 +3,7 @@ import { ImageComponentShape, VideoComponentShape } from '../..';
 import { z } from 'zod';
 import type { StateManager } from '../../managers/StateManager.svelte.ts';
 import type { DeterministicMediaManager } from '../../managers/DeterministicMediaManager.ts';
+import type { AppManager } from '../../managers/AppManager.svelte.ts';
 export declare class PixiSplitScreenDisplayObjectHook implements IComponentHook {
     #private;
     types: HookType[];
@@ -10,9 +11,11 @@ export declare class PixiSplitScreenDisplayObjectHook implements IComponentHook
     componentElement: z.infer<typeof VideoComponentShape> | z.infer<typeof ImageComponentShape>;
     private sceneState;
     private deterministicMediaManager?;
+    private appManager?;
     constructor(cradle: {
         stateManager: StateManager;
         deterministicMediaManager?: DeterministicMediaManager;
+        appManager?: AppManager;
     });
     get sceneWidth(): number;
     get sceneHeight(): number;

package/dist/components/hooks/PixiSplitScreenDisplayObjectHook.js

@@ -15,6 +15,7 @@ export class PixiSplitScreenDisplayObjectHook {
     #context;
     #pixiTexture;
     #displayObject;
+    #mainSprite = undefined;
     #bgCanvas = undefined;
     #bgSprite = undefined;
     #blurStrength = 50;
@@ -25,9 +26,11 @@ export class PixiSplitScreenDisplayObjectHook {
     componentElement;
     sceneState;
     deterministicMediaManager;
+    appManager;
     constructor(cradle) {
         this.sceneState = cradle.stateManager;
         this.deterministicMediaManager = cradle.deterministicMediaManager;
+        this.appManager = cradle.appManager;
     }
     get sceneWidth() {
         return this.#context.sceneState.width;
@@ -70,7 +73,7 @@ export class PixiSplitScreenDisplayObjectHook {
         // Center the background sprite
         backgroundSprite.x = (this.sceneWidth - backgroundSprite.width) / 2;
         backgroundSprite.y = (this.sceneHeight - backgroundSprite.height) / 2;
-        if (this.sceneState.environment === 'server') {
+        if (this.sceneState.environment === 'server' && !this.#isWebGLRendererActive()) {
             // Create a temporary canvas for blur effect
             const bgCanvas = document.createElement('canvas');
             bgCanvas.width = Math.max(1, Math.round(backgroundSprite.width * this.#blurDownscale));
@@ -81,11 +84,19 @@ export class PixiSplitScreenDisplayObjectHook {
             backgroundSprite.texture = blurredTexture;
         }
         else {
-            // Create new PIXI texture from blurred canvas
+            // Client mode and server webgl mode both use PIXI blur filter.
+            this.#bgCanvas = undefined;
             const blurFilter = new PIXI.BlurFilter(sanitizedStrength, 50, 1, 7);
             backgroundSprite.filters = [blurFilter];
         }
     }
+    #isWebGLRendererActive() {
+        const renderer = this.appManager?.app?.renderer;
+        if (renderer?.gl || renderer?.context?.gl || renderer?.context?.webGLVersion) {
+            return true;
+        }
+        return this.deterministicMediaManager?.getSelectedRendererType?.() === 'webgl';
+    }
     #drawBlurredBackground(strength = 50, force = false) {
         if (!this.#bgCanvas) {
             return false;
@@ -198,6 +209,7 @@ export class PixiSplitScreenDisplayObjectHook {
         mainSprite.height = appearance.height;
         mainSprite.x = appearance.x;
         mainSprite.y = appearance.y;
+        this.#mainSprite = mainSprite;
         this.#displayObject.addChild(mainSprite);
     }
     #initDisplayObject() {
@@ -240,18 +252,83 @@ export class PixiSplitScreenDisplayObjectHook {
         walk(this.#displayObject);
         this.#pixiTexture = nextTexture;
     }
+    #isTextureValid(texture) {
+        if (!texture)
+            return false;
+        // PIXI textures expose valid/baseTexture after destroy
+        const tex = texture;
+        if (tex.valid === false)
+            return false;
+        if (tex.baseTexture?.valid === false || tex.baseTexture?.destroyed === true)
+            return false;
+        return true;
+    }
+    #needsRebuild() {
+        // No display object yet — needs initial build (handled by creation path)
+        if (!this.#displayObject)
+            return false;
+        // Tracked texture was destroyed or became invalid
+        if (!this.#isTextureValid(this.#pixiTexture))
+            return true;
+        // Display object lost its children (shouldn't happen, but defensive)
+        if (this.#displayObject.children.length === 0)
+            return true;
+        return false;
+    }
+    #destroyChildren() {
+        const removed = this.#displayObject.removeChildren();
+        if (Array.isArray(removed)) {
+            for (const child of removed) {
+                if (typeof child.destroy === 'function') {
+                    child.destroy({ children: true });
+                }
+            }
+        }
+    }
+    #rebuild(texture) {
+        this.#mainSprite = undefined;
+        this.#bgCanvas = undefined;
+        this.#bgSprite = undefined;
+        this.#lastBlurFrameKey = '';
+        this.#pixiTexture = texture;
+        this.#destroyChildren();
+        this.#initDisplayObject();
+    }
     async #handleUpdate() {
         const isActive = this.#context.isActive;
         if (this.#displayObject) {
-            // Texture swaps are frequent in deterministic mode; update sprite textures
-            // in-place instead of rebuilding split/blur geometry each frame.
             const currentTexture = this.#context.getResource('pixiTexture');
-            if (currentTexture && currentTexture !== this.#pixiTexture) {
+            // Auto-heal: if the tracked texture is destroyed or children are missing,
+            // rebuild the display object from the current valid texture.
+            if (this.#needsRebuild()) {
+                if (currentTexture && this.#isTextureValid(currentTexture)) {
+                    this.#rebuild(currentTexture);
+                }
+                else {
+                    // No valid texture available — hide and wait for next tick
+                    this.#displayObject.visible = false;
+                    this.#context.setResource('pixiRenderObject', this.#displayObject);
+                    return;
+                }
+            }
+            else if (currentTexture &&
+                currentTexture !== this.#pixiTexture &&
+                this.#isTextureValid(currentTexture)) {
+                // Texture swaps are frequent in deterministic mode; update sprite textures
+                // in-place instead of rebuilding split/blur geometry each frame.
                 this.#swapDisplayTexture(currentTexture);
             }
             if (isActive && this.#bgCanvas) {
                 this.#drawBlurredBackground(this.#blurStrength);
             }
+            // Update main sprite position/size from appearance data
+            if (this.#mainSprite) {
+                const appearance = this.#context.data.appearance;
+                this.#mainSprite.x = appearance.x;
+                this.#mainSprite.y = appearance.y;
+                this.#mainSprite.width = appearance.width;
+                this.#mainSprite.height = appearance.height;
+            }
             // Always re-assert the resource in case the context was cleared or updated
             this.#context.setResource('pixiRenderObject', this.#displayObject);
             if (this.#displayObject.visible != isActive) {
@@ -280,7 +357,7 @@ export class PixiSplitScreenDisplayObjectHook {
             await this.#handleDestroy();
             this.#pixiTexture = currentTexture;
             if (this.#displayObject) {
-                this.#displayObject.removeChildren();
+                this.#destroyChildren();
                 this.#initDisplayObject();
             }
         }
@@ -288,7 +365,7 @@ export class PixiSplitScreenDisplayObjectHook {
             // Same texture - just update sprite properties (position, size, etc.)
             // For split screen, we may need to rebuild if effects changed
             // For now, trigger a full rebuild on refresh
-            this.#displayObject.removeChildren();
+            this.#destroyChildren();
             if (currentTexture) {
                 this.#pixiTexture = currentTexture;
                 this.#initDisplayObject();
@@ -297,7 +374,7 @@ export class PixiSplitScreenDisplayObjectHook {
         // If no texture yet, #handleUpdate will handle initial creation
     }
     async #handleDestroy() {
-        // remove event listeners from video
+        this.#mainSprite = undefined;
         this.#bgCanvas = undefined;
         this.#bgSprite = undefined;
         this.#lastBlurFrameKey = '';

package/dist/components/hooks/PixiVideoTextureHook.js

@@ -32,6 +32,12 @@ export class PixiVideoTextureHook {
             return;
         }
         const media = this.#context.getResource('videoElement');
+        if (!media) {
+            if (this.#videoTexture || this.#videoElement) {
+                await this.#handleDestroy();
+            }
+            return;
+        }
         // If element changed or texture is missing, recreate it
         if (media && (media !== this.#videoElement || !this.#videoTexture)) {
             await this.#handleDestroy();
@@ -53,11 +59,11 @@ export class PixiVideoTextureHook {
         if (this.#videoTexture) {
             // Destroy the texture and its base texture to free GPU memory
             this.#videoTexture.destroy(true);
-            this.#videoTexture = undefined;
-            this.#videoElement = undefined;
-            this.#pixiResource = undefined;
-            this.#context.removeResource('pixiTexture');
         }
+        this.#videoTexture = undefined;
+        this.#videoElement = undefined;
+        this.#pixiResource = undefined;
+        this.#context.removeResource('pixiTexture');
     }
     async #handleRefreshContent() {
         // Only recreate texture when video source changes

package/dist/components/hooks/PixiVisualTransformHook.d.ts

@@ -0,0 +1,16 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+import type { StateManager } from '../../managers/StateManager.svelte.js';
+/**
+ * Publishes one stable outer Pixi container as the visual animation owner.
+ * Renderer hooks remain responsible for their inner geometry; animation x/y
+ * are component-relative translation offsets around the fixed center pivot.
+ */
+export declare class PixiVisualTransformHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    constructor(cradle: {
+        stateManager: StateManager;
+    });
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}

package/dist/components/hooks/PixiVisualTransformHook.js

@@ -0,0 +1,102 @@
+import * as PIXI from 'pixi.js-legacy';
+import { createPixiAnimationTarget } from '../../animations/PixiAnimationTarget.js';
+/**
+ * Publishes one stable outer Pixi container as the visual animation owner.
+ * Renderer hooks remain responsible for their inner geometry; animation x/y
+ * are component-relative translation offsets around the fixed center pivot.
+ */
+export class PixiVisualTransformHook {
+    types = ['setup', 'update', 'refresh', 'refresh:content', 'destroy'];
+    priority = 1;
+    #context;
+    #outer;
+    #content;
+    #target;
+    #origin;
+    #state;
+    #handlers = {
+        setup: this.#publish.bind(this),
+        update: this.#publish.bind(this),
+        refresh: this.#publish.bind(this),
+        'refresh:content': this.#publish.bind(this),
+        destroy: this.#destroy.bind(this)
+    };
+    constructor(cradle) {
+        this.#state = cradle.stateManager;
+    }
+    #ensureOuter() {
+        if (this.#outer)
+            return;
+        const appearance = this.#context.data.appearance;
+        const centerX = appearance.x + appearance.width / 2;
+        const centerY = appearance.y + appearance.height / 2;
+        this.#outer = new PIXI.Container();
+        this.#outer.pivot.set(centerX, centerY);
+        this.#outer.position.set(centerX, centerY);
+        this.#origin = { x: centerX, y: centerY };
+        this.#target = createPixiAnimationTarget(this.#outer, () => this.#state.markDirty(), this.#origin);
+    }
+    #syncPlacement() {
+        if (!this.#outer || !this.#target || !this.#origin)
+            return;
+        const appearance = this.#context.data.appearance;
+        const centerX = appearance.x + appearance.width / 2;
+        const centerY = appearance.y + appearance.height / 2;
+        if (centerX === this.#origin.x && centerY === this.#origin.y)
+            return;
+        const offsetX = this.#target.x;
+        const offsetY = this.#target.y;
+        this.#origin.x = centerX;
+        this.#origin.y = centerY;
+        this.#outer.pivot.set(centerX, centerY);
+        this.#outer.position.set(centerX + offsetX, centerY + offsetY);
+        this.#state.markDirty();
+    }
+    async #publish() {
+        const renderObject = this.#context.getResource('pixiRenderObject');
+        if (!renderObject && !this.#outer)
+            return;
+        this.#ensureOuter();
+        if (!this.#outer || !this.#target)
+            return;
+        this.#syncPlacement();
+        if (renderObject && renderObject !== this.#outer && renderObject !== this.#content) {
+            if (this.#content?.parent === this.#outer)
+                this.#outer.removeChild(this.#content);
+            if (renderObject.parent)
+                renderObject.parent.removeChild(renderObject);
+            this.#outer.addChild(renderObject);
+            this.#content = renderObject;
+            this.#state.markDirty();
+        }
+        const visible = this.#context.isActive && this.#context.data.visible !== false;
+        if (this.#outer.visible !== visible) {
+            this.#outer.visible = visible;
+            this.#state.markDirty();
+        }
+        this.#context.setResource('pixiRenderObject', this.#outer);
+        this.#context.setResource('animationTarget', this.#target);
+    }
+    async #destroy() {
+        this.#context.removeResource('animationTarget');
+        if (this.#outer) {
+            if (this.#outer.parent)
+                this.#outer.parent.removeChild(this.#outer);
+            this.#outer.removeChildren();
+            this.#outer.destroy({ children: false });
+            if (this.#context.getResource('pixiRenderObject') === this.#outer) {
+                this.#context.removeResource('pixiRenderObject');
+            }
+        }
+        this.#content = undefined;
+        this.#target = undefined;
+        this.#origin = undefined;
+        this.#outer = undefined;
+    }
+    async handle(type, context) {
+        this.#context = context;
+        const handler = this.#handlers[type];
+        if (handler)
+            await handler();
+    }
+}