visualfries 0.1.0

package/dist/components/hooks/MediaSeekingHook.js

@@ -0,0 +1,204 @@
+import { z } from 'zod';
+import { StateManager } from '../../managers/StateManager.svelte.js';
+export class MediaSeekingHook {
+    types = ['setup', 'destroy', 'refresh', 'update'];
+    priority = 1;
+    #context;
+    #mediaElement;
+    state;
+    constructor(cradle) {
+        this.state = cradle.stateManager;
+    }
+    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 = () => {
+                console.error('Media error:', media.error);
+            };
+        }
+    }
+    async #handleRefresh() {
+        await this.#handleDestroy();
+        await this.#handleSetup();
+    }
+    async #handleDestroy() {
+        this.#mediaElement = undefined;
+    }
+    async #handleUpdate() {
+        // 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
+        }
+        if (!media)
+            return;
+        const fps = this.state.data.settings.fps || 30;
+        const targetTime = this.#context.currentComponentTime;
+        const targetFrame = Math.round(targetTime * fps);
+        const currentFrame = Math.round(media.currentTime * fps);
+        const diff = Math.abs(currentFrame - targetFrame);
+        const needReseek = this.state.environment === 'server' ? currentFrame !== targetFrame : diff > 30;
+        if (this.state.environment !== 'server') {
+            if (!media.paused && this.state.state !== 'playing') {
+                media.pause();
+            }
+        }
+        if (needReseek) {
+            const seekTo = targetTime;
+            try {
+                // Prefer fastSeek when available for larger jumps
+                const largeJump = Math.abs(media.currentTime - seekTo) > 2 / fps;
+                if (typeof media.fastSeek === 'function' && largeJump) {
+                    media.fastSeek(seekTo);
+                }
+                else {
+                    media.currentTime = seekTo;
+                }
+                // Await seek completion using a robust multi-attempt strategy similar to Remotion
+                await new Promise((resolve) => {
+                    const anyMedia = media;
+                    let attempts = 0;
+                    const maxAttempts = 8;
+                    const check = () => {
+                        const fps = this.state.data.settings.fps || 30;
+                        const desiredFrame = Math.round(seekTo * fps);
+                        const currFrame = Math.round(media.currentTime * fps);
+                        if (desiredFrame === currFrame && media.readyState >= 2) {
+                            return resolve();
+                        }
+                        attempts++;
+                        if (attempts >= maxAttempts)
+                            return resolve();
+                        setTimeout(check, 20);
+                    };
+                    if (typeof anyMedia.requestVideoFrameCallback === 'function') {
+                        const timeout = setTimeout(check, 120);
+                        anyMedia.requestVideoFrameCallback(() => {
+                            clearTimeout(timeout);
+                            check();
+                        });
+                    }
+                    else {
+                        media.addEventListener('seeked', check, { once: true });
+                        setTimeout(check, 60);
+                    }
+                });
+                // Force Pixi video texture to pull the updated frame if present
+                try {
+                    const tex = this.#context.getResource('pixiTexture');
+                    const baseTex = tex?.baseTexture;
+                    if (baseTex?.resource && typeof baseTex.resource.update === 'function') {
+                        baseTex.resource.update();
+                    }
+                    else if (typeof baseTex?.update === 'function') {
+                        baseTex.update();
+                    }
+                }
+                catch { }
+            }
+            catch (err) {
+                // Swallow errors here; next update tick will retry if needed
+            }
+        }
+    }
+    async handle(type, context) {
+        this.#context = context;
+        if (this.#context.contextData.type !== 'VIDEO' && this.#context.contextData.type !== 'AUDIO')
+            return;
+        if (type === 'setup') {
+            return await this.#handleSetup();
+        }
+        else if (type === 'destroy') {
+            return await this.#handleDestroy();
+        }
+        else if (type === 'refresh') {
+            return await this.#handleRefresh();
+        }
+        else if (type === 'update') {
+            return await this.#handleUpdate();
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+import { StateManager } from '../../managers/StateManager.svelte.js';
+export declare class PixiDisplayObjectHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    private state;
+    constructor(cradle: {
+        stateManager: StateManager;
+    });
+    get sceneWidth(): number;
+    get sceneHeight(): number;
+    private initMainSprite;
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}

package/dist/components/hooks/PixiDisplayObjectHook.js

@@ -0,0 +1,77 @@
+import * as PIXI from 'pixi.js-legacy';
+import { setPlacementAndOpacity } from '../../utils/utils.js';
+import { StateManager } from '../../managers/StateManager.svelte.js';
+export class PixiDisplayObjectHook {
+    types = ['update', 'destroy', 'refresh'];
+    #handlers = {
+        update: this.#handleUpdate.bind(this),
+        destroy: this.#handleDestroy.bind(this),
+        refresh: this.#handleRefresh.bind(this),
+        'refresh:config': this.#handleRefresh.bind(this)
+    };
+    priority = 1;
+    #context;
+    #pixiTexture;
+    #displayObject;
+    state;
+    constructor(cradle) {
+        this.state = cradle.stateManager;
+    }
+    get sceneWidth() {
+        return this.#context.sceneState.width;
+    }
+    get sceneHeight() {
+        return this.#context.sceneState.height;
+    }
+    initMainSprite() {
+        const sprite = new PIXI.Sprite(this.#pixiTexture);
+        setPlacementAndOpacity(sprite, this.#context.data.appearance);
+        this.#displayObject.addChild(sprite);
+    }
+    #initDisplayObject() {
+        this.initMainSprite();
+    }
+    async #handleRefresh() {
+        await this.#handleDestroy();
+        this.#initDisplayObject();
+        await this.#handleUpdate();
+    }
+    async #handleUpdate() {
+        const isActive = this.#context.isActive;
+        if (this.#displayObject) {
+            // Only mark dirty if visibility actually changed
+            if (this.#displayObject.visible !== isActive) {
+                this.#displayObject.visible = isActive;
+                // Mark scene as dirty when visibility changes
+                this.state.markDirty();
+            }
+            return;
+        }
+        // Check if this is a progress shape (which creates pixiRenderObject directly)
+        const existingRenderObject = this.#context.getResource('pixiRenderObject');
+        if (existingRenderObject) {
+            // Progress shapes already have their display object set up
+            this.#displayObject = existingRenderObject;
+            return;
+        }
+        // Regular shapes need texture to create sprite
+        const texture = this.#context.getResource('pixiTexture');
+        if (!texture) {
+            throw new Error('pixiTexture not found in resources.');
+        }
+        this.#pixiTexture = texture;
+        this.#displayObject = new PIXI.Container();
+        this.#initDisplayObject();
+        this.#context.setResource('pixiRenderObject', this.#displayObject);
+    }
+    async #handleDestroy() {
+        this.#displayObject.removeChildren();
+    }
+    async handle(type, context) {
+        this.#context = context;
+        const handler = this.#handlers[type];
+        if (handler) {
+            await handler();
+        }
+    }
+}

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

@@ -0,0 +1,15 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+import { GifComponentShape } from '../..';
+import { z } from 'zod';
+import type { StateManager } from '../../managers/StateManager.svelte.ts';
+export declare class PixiGifHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    componentElement: z.infer<typeof GifComponentShape>;
+    private state;
+    constructor(cradle: {
+        stateManager: StateManager;
+    });
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}

package/dist/components/hooks/PixiGifHook.js

@@ -0,0 +1,97 @@
+import { GifComponentShape } from '../..';
+import { z } from 'zod';
+import { AnimatedGIF } from '../AnimatedGIF.js';
+import { Container } from 'pixi.js-legacy';
+import { setPlacementAndOpacity } from '../../utils/utils.js';
+export class PixiGifHook {
+    types = ['setup', 'update', 'destroy', 'refresh'];
+    priority = 1;
+    #context;
+    #imageElement;
+    #displayObject;
+    componentElement;
+    state;
+    #destroyed = false;
+    #previousUrlLoaded = '';
+    constructor(cradle) {
+        this.state = cradle.stateManager;
+    }
+    async #handleSetup() {
+        if (this.#imageElement && !this.#destroyed) {
+            return;
+        }
+        // use cached imageElement if url did not change
+        if (this.#previousUrlLoaded !== this.componentElement.source.url) {
+            const res = await fetch(this.componentElement.source.url);
+            const ab = await res.arrayBuffer();
+            const img = AnimatedGIF.fromBuffer(ab);
+            if (img) {
+                this.#displayObject = this.#displayObject || new Container();
+                this.#imageElement = img;
+                this.#previousUrlLoaded = this.componentElement.source.url;
+            }
+        }
+        if (this.#imageElement) {
+            const { appearance } = this.componentElement;
+            setPlacementAndOpacity(this.#imageElement, appearance);
+            this.#displayObject.addChild(this.#imageElement);
+            this.#context.setResource('pixiRenderObject', this.#displayObject);
+            this.#imageElement.play();
+            // await new promise 100ms timeout
+            await new Promise((resolve) => setTimeout(resolve, 100));
+        }
+        this.#destroyed = false;
+    }
+    async #handleRefresh() {
+        await this.#handleDestroy();
+        await this.#handleSetup();
+        await this.#handleUpdate();
+    }
+    async #handleDestroy() {
+        this.#destroyed = true;
+        if (this.#displayObject)
+            this.#displayObject.removeChildren();
+    }
+    async #handleUpdate() {
+        if (!this.#imageElement || this.#destroyed) {
+            return;
+        }
+        if (this.state.isPlaying) {
+            this.#imageElement.play();
+        }
+        else {
+            this.#imageElement.stop();
+            const gifFrame = this.#imageElement.totalFrames > 0
+                ? this.state.currentFrame % this.#imageElement.totalFrames
+                : 0;
+            this.#imageElement.currentFrame = gifFrame;
+        }
+        const isActive = this.#context.isActive;
+        if (this.#displayObject) {
+            if (this.#displayObject.visible != isActive) {
+                this.#displayObject.visible = isActive;
+            }
+            if (!isActive) {
+                this.#imageElement.stop();
+            }
+        }
+    }
+    async handle(type, context) {
+        this.#context = context;
+        const data = this.#context.contextData;
+        if (!data || data.type !== 'GIF') {
+            return;
+        }
+        this.componentElement = data;
+        if (type === 'setup') {
+            return await this.#handleSetup();
+        }
+        else if (type === 'destroy') {
+            return await this.#handleDestroy();
+        }
+        else if (type === 'refresh') {
+            return await this.#handleRefresh();
+        }
+        await this.#handleUpdate();
+    }
+}

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

@@ -0,0 +1,12 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+import { StateManager } from '../../managers/StateManager.svelte.js';
+export declare class PixiProgressShapeHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    private state;
+    constructor(cradle: {
+        stateManager: StateManager;
+    });
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}

package/dist/components/hooks/PixiProgressShapeHook.js

@@ -0,0 +1,128 @@
+import * as PIXI from 'pixi.js-legacy';
+import { setPlacementAndOpacity } from '../../utils/utils.js';
+import { StateManager } from '../../managers/StateManager.svelte.js';
+import { ProgressRenderer, LinearProgressRenderer, RadialProgressRenderer, PerimeterProgressRenderer, DoubleProgressRenderer, CustomProgressRenderer } from './shapes/progress/index.js';
+class ProgressRendererFactory {
+    static create(context, width, height, config) {
+        const type = config.type;
+        switch (config.type) {
+            case 'linear':
+                return new LinearProgressRenderer(context, width, height, config);
+            case 'radial':
+                return new RadialProgressRenderer(context, width, height, config);
+            case 'perimeter':
+                return new PerimeterProgressRenderer(context, width, height, config);
+            case 'double':
+                return new DoubleProgressRenderer(context, width, height, config);
+            case 'custom':
+                return new CustomProgressRenderer(context, width, height, config);
+            default:
+                throw new Error(`Unsupported progress type: ${type}`);
+        }
+    }
+}
+export class PixiProgressShapeHook {
+    types = ['setup', 'update', 'destroy', 'refresh'];
+    priority = 1;
+    #context;
+    #renderer;
+    #lastProgress = -1;
+    state;
+    constructor(cradle) {
+        this.state = cradle.stateManager;
+    }
+    #handlers = {
+        setup: this.#handleSetup.bind(this),
+        update: this.#handleUpdate.bind(this),
+        refresh: this.#handleRefresh.bind(this),
+        destroy: this.#handleDestroy.bind(this)
+    };
+    async #handleSetup(force = false) {
+        if (this.#context.data.type !== 'SHAPE')
+            return;
+        if (this.#renderer && !force)
+            return;
+        const shapeData = this.#context.data;
+        if (shapeData.shape.type !== 'progress')
+            return;
+        const { width, height } = shapeData.appearance;
+        const progressConfig = shapeData.shape.progressConfig || {
+            type: 'linear',
+            direction: 'horizontal',
+            reverse: false,
+            anchor: 'start'
+        };
+        this.#renderer = ProgressRendererFactory.create(this.#context, width, height, progressConfig);
+        const displayObject = this.#renderer.getDisplayObject();
+        this.#context.setResource('pixiRenderObject', displayObject);
+        setPlacementAndOpacity(displayObject, shapeData.appearance);
+        this.#renderer.update(this.#context.progress);
+    }
+    async #handleRefresh() {
+        // Preserve parent and index so the new display object is re-attached
+        const oldDisplayObject = this.#renderer?.getDisplayObject();
+        const parent = oldDisplayObject?.parent;
+        const index = parent && oldDisplayObject ? parent.getChildIndex(oldDisplayObject) : -1;
+        await this.#handleDestroy();
+        await this.#handleSetup(true);
+        // Re-attach new display object to the same parent/index
+        if (parent && this.#renderer) {
+            const newDisplayObject = this.#renderer.getDisplayObject();
+            if (index >= 0 && index <= parent.children.length) {
+                parent.addChildAt(newDisplayObject, index);
+            }
+            else {
+                parent.addChild(newDisplayObject);
+            }
+        }
+    }
+    async #handleUpdate() {
+        if (!this.#renderer) {
+            await this.#handleSetup();
+            return;
+        }
+        if (this.#context.data.type !== 'SHAPE')
+            return;
+        const shapeData = this.#context.data;
+        if (shapeData.shape.type !== 'progress')
+            return;
+        const displayObject = this.#renderer.getDisplayObject();
+        const isActive = this.#context.isActive;
+        if (displayObject.visible !== isActive) {
+            displayObject.visible = isActive;
+            this.state.markDirty();
+        }
+        setPlacementAndOpacity(displayObject, shapeData.appearance);
+        const currentProgress = this.#context.progress;
+        if (this.#lastProgress !== currentProgress) {
+            this.#renderer.update(currentProgress);
+            this.#lastProgress = currentProgress;
+            // Mark dirty only if progress actually changed
+            this.state.markDirty();
+        }
+    }
+    async #handleDestroy() {
+        if (this.#renderer) {
+            const displayObject = this.#renderer.getDisplayObject();
+            // Detach from parent before destroying to avoid dangling references in the layer
+            if (displayObject.parent) {
+                displayObject.parent.removeChild(displayObject);
+            }
+            displayObject.destroy();
+            this.#renderer = undefined;
+            // Remove stale resource pointer
+            this.#context.removeResource('pixiRenderObject');
+        }
+    }
+    async handle(type, context) {
+        this.#context = context;
+        if (this.#context.data.type !== 'SHAPE')
+            return;
+        const shapeData = this.#context.data;
+        if (shapeData.shape.type !== 'progress')
+            return;
+        const handler = this.#handlers[type];
+        if (handler)
+            await handler();
+    }
+}

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

@@ -0,0 +1,21 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+import { VideoComponentShape } from '../..';
+import { z } from 'zod';
+import type { StateManager } from '../../managers/StateManager.svelte.ts';
+export declare class PixiSplitScreenDisplayObjectHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    componentElement: z.infer<typeof VideoComponentShape>;
+    private sceneState;
+    constructor(cradle: {
+        stateManager: StateManager;
+    });
+    get sceneWidth(): number;
+    get sceneHeight(): number;
+    private initBlurBackground;
+    private setupBackground;
+    private initSplitScreen;
+    private initMainSprite;
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}