visualfries 0.1.0

package/dist/components/hooks/HtmlTextHook.js

@@ -0,0 +1,102 @@
+import { HtmlBuilderFactory } from '../../builders/html/HtmlBuilderFactory.js';
+export class HtmlTextHook {
+    #handlers = {
+        setup: this.#handleSetup.bind(this),
+        update: this.#handleUpdate.bind(this),
+        destroy: this.#handleDestroy.bind(this),
+        refresh: this.#handleRefresh.bind(this),
+        'refresh:content': this.#handleRefresh.bind(this),
+        'refresh:config': this.#handleRefresh.bind(this)
+    };
+    types = ['setup', 'update', 'destroy', 'refresh'];
+    priority = 1;
+    #currentId = undefined;
+    #context;
+    #htmlEl = undefined;
+    #wrapperEl = undefined;
+    domManager;
+    componentsManager;
+    constructor(cradle) {
+        this.domManager = cradle.domManager;
+        this.componentsManager = cradle.componentsManager;
+    }
+    buildHtmlElements() {
+        const componentData = this.#context.contextData;
+        if (componentData.type !== 'TEXT')
+            return { wrapper: undefined, element: undefined };
+        try {
+            // Use the factory to create an appropriate builder
+            const builder = HtmlBuilderFactory.createBuilder(componentData, document);
+            // Build the HTML elements
+            const { wrapper, element } = builder.build();
+            return { wrapper, element };
+        }
+        catch (error) {
+            return { wrapper: undefined, element: undefined };
+        }
+    }
+    async #handleSetup() {
+        if (this.#htmlEl) {
+            return;
+        }
+        this.#currentId = this.#context.contextData.id;
+        const comp = this.componentsManager.get(this.#context.contextData.id);
+        if (this.#context.type === 'TEXT' && comp) {
+            this.#context.updateContextData(comp.props.getData());
+        }
+        const { wrapper, element } = this.buildHtmlElements();
+        if (!element || !wrapper) {
+            return;
+        }
+        this.#wrapperEl = wrapper;
+        this.#htmlEl = element;
+        // 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);
+        // Add to DOM if not already present
+        const hasEl = this.domManager.htmlContainer.querySelector('#' + this.#wrapperEl.id);
+        if (!hasEl) {
+            this.domManager.htmlContainer.appendChild(this.#wrapperEl);
+        }
+    }
+    async #handleUpdate() {
+        if (this.#currentId !== this.#context.contextData.id) {
+            await this.#handleRefresh();
+        }
+        const isActive = this.#context.isActive;
+        if (this.#wrapperEl) {
+            if (isActive) {
+                this.#wrapperEl.style.display = 'flex';
+            }
+            else {
+                this.#wrapperEl.style.display = 'none';
+            }
+        }
+        if (this.#context.disabled != isActive) {
+            this.#context.disabled = isActive !== true;
+        }
+    }
+    async #handleRefresh() {
+        await this.#handleDestroy();
+        await this.#handleSetup();
+    }
+    async #handleDestroy() {
+        this.#wrapperEl?.remove();
+        this.#wrapperEl = undefined;
+        this.#htmlEl = undefined;
+        this.#context.removeResource('wrapperHtmlEl');
+        this.#context.removeResource('htmlEl');
+    }
+    async handle(type, context) {
+        this.#context = context;
+        // if (this.#context.disabled) {
+        // 	return;
+        // }
+        const handler = this.#handlers[type];
+        if (handler) {
+            await handler();
+        }
+    }
+}

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

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

package/dist/components/hooks/HtmlToCanvasHook.js

@@ -0,0 +1,148 @@
+import { Texture, BaseTexture, Sprite, Container } from 'pixi.js-legacy';
+import { StateManager } from '../../managers/StateManager.svelte.js';
+import { svgGenerator } from '../../utils/svgGenerator.js';
+export class HtmlToCanvasHook {
+    #handlers = {
+        setup: this.#handleSetup.bind(this),
+        destroy: this.#handleDestroy.bind(this),
+        update: this.#handleUpdate.bind(this),
+        'refresh:content': this.#handleRefresh.bind(this)
+    };
+    #context;
+    #htmlEl = undefined;
+    #currentId = undefined;
+    shouldCreateObjectURL;
+    #displayObject;
+    #sprite;
+    #lastHtml = undefined;
+    svgBase = null;
+    svgEnd = null;
+    svg = null;
+    types = Object.keys(this.#handlers);
+    priority = 1;
+    state;
+    constructor(cradle) {
+        this.state = cradle.stateManager;
+        this.shouldCreateObjectURL = navigator.userAgent.includes('Firefox');
+    }
+    async #svgToTexture(svgString) {
+        // seems fastest
+        const { width, height } = this.state;
+        let imgPath = '';
+        if (this.shouldCreateObjectURL) {
+            const svgBlob = new Blob([svgString], {
+                type: 'image/svg+xml'
+            });
+            imgPath = URL.createObjectURL(svgBlob);
+        }
+        else {
+            imgPath = `data:image/svg+xml;charset=utf8,${encodeURIComponent(svgString)}`;
+        }
+        // const svgBlobArrayBuffer = new Uint8Array(await svgBlob.arrayBuffer());
+        return new Promise((resolve, reject) => {
+            const img = new Image(width, height);
+            img.crossOrigin = 'anonymous';
+            img.src = imgPath;
+            img.width = width;
+            img.height = height;
+            img.onload = () => {
+                const base = new BaseTexture(img);
+                const texture = new Texture(base);
+                // const texture = PIXI.Texture.from(canvas); // true
+                img.remove();
+                if (this.shouldCreateObjectURL) {
+                    URL.revokeObjectURL(imgPath);
+                }
+                resolve(texture);
+            };
+            img.onerror = () => {
+                console.warn('img.onerror', svgString);
+                reject(new Error('Failed to load SVG'));
+            };
+        });
+    }
+    async #renderSvg() {
+        if (!this.#htmlEl) {
+            return false;
+        }
+        const { width, height } = this.state;
+        if (!this.svgBase) {
+            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('')));
+            this.svgBase = base;
+            this.svgEnd = end;
+            this.svg = base + content + end;
+            return true;
+        }
+        else {
+            const html = this.#htmlEl.outerHTML.replace(/<br\s*>/gi, '<br />');
+            const svg = this.svgBase + html + this.svgEnd;
+            if (this.svg !== svg) {
+                this.svg = svg;
+            }
+            if (html !== this.#lastHtml) {
+                this.state.markDirty();
+                this.#lastHtml = html;
+                return true;
+            }
+        }
+        return false;
+    }
+    async #handleSetup() {
+        if (this.#htmlEl) {
+            return;
+        }
+        const wrapperEl = this.#context.getResource('wrapperHtmlEl');
+        const el = wrapperEl ? wrapperEl : this.#context.getResource('htmlEl');
+        if (!el) {
+            return;
+        }
+        this.#htmlEl = el;
+        this.#currentId = this.#context.contextData.id;
+        if (!this.#displayObject) {
+            this.#displayObject = new Container();
+            this.#sprite = new Sprite(Texture.EMPTY);
+            this.#sprite.x = this.state.width / 2;
+            this.#sprite.y = this.state.height / 2;
+            this.#sprite.anchor.set(0.5);
+            this.#sprite.width = this.state.width;
+            this.#sprite.height = this.state.height;
+            this.#displayObject.addChild(this.#sprite);
+            this.#context.setResource('pixiRenderObject', this.#displayObject);
+        }
+    }
+    async #handleRefresh() {
+        await this.#handleDestroy();
+        await this.#handleSetup();
+    }
+    // update on context id change, for example, subtitle changed so id changed as well
+    async #handleUpdate() {
+        if (this.#currentId !== this.#context.contextData.id) {
+            await this.#handleRefresh();
+        }
+        if (this.#htmlEl && this.#lastHtml == this.#htmlEl.outerHTML) {
+            return;
+        }
+        const rerendered = await this.#renderSvg();
+        if (this.svg && rerendered) {
+            const texture = await this.#svgToTexture(this.svg);
+            if (texture) {
+                this.#sprite.texture.destroy();
+                this.#sprite.texture = texture;
+            }
+        }
+    }
+    async #handleDestroy() {
+        this.#htmlEl = undefined;
+    }
+    // we need to set context here and not inject it is bound to component and we can update any of the components at any time
+    async handle(type, context) {
+        this.#context = context;
+        if (this.#context.disabled) {
+            return;
+        }
+        const handler = this.#handlers[type];
+        if (handler) {
+            await handler();
+        }
+    }
+}

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

@@ -0,0 +1,10 @@
+import type { IComponentContext, IComponentHook, HookType } from '../..';
+import { ImageComponentShape } from '../..';
+import { z } from 'zod';
+export declare class ImageHook implements IComponentHook {
+    #private;
+    types: HookType[];
+    priority: number;
+    componentElement: z.infer<typeof ImageComponentShape>;
+    handle(type: HookType, context: IComponentContext): Promise<void>;
+}

package/dist/components/hooks/ImageHook.js

@@ -0,0 +1,45 @@
+import { ImageComponentShape } from '../..';
+import { z } from 'zod';
+export class ImageHook {
+    types = ['setup', 'destroy'];
+    #handlers = {
+        setup: this.#handleSetup.bind(this),
+        destroy: this.#handleDestroy.bind(this)
+    };
+    priority = 1;
+    #context;
+    #imageElement;
+    componentElement;
+    async #handleSetup() {
+        if (this.#imageElement) {
+            return;
+        }
+        const img = new Image();
+        img.src = this.componentElement.source.url;
+        img.crossOrigin = 'anonymous';
+        // Wait for the image to load
+        await new Promise((resolve, reject) => {
+            img.onload = resolve;
+            img.onerror = (error) => reject(new Error(`Failed to load image: ${this.componentElement.source.url}`));
+        });
+        this.#imageElement = img;
+        this.#context.setResource('imageElement', img);
+        this.#context.setResource('pixiResource', img);
+    }
+    async #handleDestroy() {
+        // remove event listeners from video
+        this.#imageElement.remove();
+    }
+    async handle(type, context) {
+        this.#context = context;
+        const data = this.#context.getResource('imageShape');
+        if (!data) {
+            return;
+        }
+        this.componentElement = data;
+        const handler = this.#handlers[type];
+        if (handler) {
+            await handler();
+        }
+    }
+}

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

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

package/dist/components/hooks/MediaHook.js

@@ -0,0 +1,252 @@
+import { MediaManager } from '../../managers/MediaManager.js';
+import { z } from 'zod';
+import { StateManager } from '../../managers/StateManager.svelte.js';
+export class MediaHook {
+    types = ['setup', 'update', 'destroy', 'refresh'];
+    priority = 1;
+    #context;
+    #mediaElement;
+    #MAX_LAG_TIME = 1;
+    #lastSyncCheck = 0;
+    #lastTargetTime = null;
+    mediaManager;
+    state;
+    #destroyed = false;
+    #playRequested = false;
+    #lastControllerCheck = 0;
+    #CONTROLLER_CHECK_INTERVAL = 100; // ms
+    constructor(cradle) {
+        this.mediaManager = cradle.mediaManager;
+        this.state = cradle.stateManager;
+    }
+    async #handleSetup() {
+        if (this.#mediaElement && !this.#destroyed) {
+            return;
+        }
+        if (this.#context.contextData.type !== 'VIDEO' && this.#context.contextData.type !== 'AUDIO')
+            return;
+        const mediaType = this.#context.type === 'VIDEO' ? 'video' : 'audio';
+        const source = this.#context.contextData.source; // TODO: remove as any
+        if (!source || !source.url) {
+            console.error('No media source found');
+            return;
+        }
+        const startAt = source.startAt;
+        try {
+            const media = await this.mediaManager.getMediaElement(source.url, mediaType, {
+                muted: true,
+                startAt
+            });
+            if (!media) {
+                console.error('Failed to get media element');
+                return;
+            }
+            this.#mediaElement = media;
+            this.#context.setResource(mediaType === 'video' ? 'videoElement' : 'audioElement', media);
+            this.#destroyed = false;
+        }
+        catch (error) {
+            console.error('Error in media setup:', error);
+        }
+    }
+    async #autoSeek() {
+        const target = this.#context.currentComponentTime;
+        const frameDuration = 1 / (this.state.data.settings.fps || 30);
+        if (this.#lastTargetTime !== null &&
+            Math.abs(this.#lastTargetTime - target) < frameDuration * 0.5) {
+            return;
+        }
+        this.#lastTargetTime = target;
+        await this.#seek(target);
+    }
+    async #seek(time) {
+        const element = this.#mediaElement;
+        const frameDuration = 1 / (this.state.data.settings.fps || 30);
+        // Use fastSeek for larger jumps when supported
+        try {
+            if (typeof element.fastSeek === 'function' &&
+                Math.abs(element.currentTime - time) > frameDuration * 2) {
+                element.fastSeek(time);
+            }
+            else {
+                element.currentTime = time;
+            }
+        }
+        catch {
+            element.currentTime = time;
+        }
+        // Prefer requestVideoFrameCallback when available (videos only)
+        const anyElement = element;
+        if (typeof anyElement.requestVideoFrameCallback === 'function') {
+            return new Promise((resolve) => {
+                const timeout = setTimeout(() => resolve(true), 120);
+                anyElement.requestVideoFrameCallback((_now, _metadata) => {
+                    clearTimeout(timeout);
+                    resolve(true);
+                });
+            });
+        }
+        // Fallback to seeked event
+        return new Promise((resolve) => {
+            const onSeeked = () => {
+                element.removeEventListener('seeked', onSeeked);
+                resolve(true);
+            };
+            element.addEventListener('seeked', onSeeked);
+        });
+    }
+    #isOutOfSync() {
+        // run only once per MAX_LAG_TIME
+        const now = performance.now() / 1000; // convert to seconds
+        if (now - this.#lastSyncCheck < this.#MAX_LAG_TIME) {
+            return false;
+        }
+        this.#lastSyncCheck = now;
+        const lagTime = Math.abs(this.#mediaElement.currentTime - this.#context.currentComponentTime);
+        return lagTime >= this.#MAX_LAG_TIME;
+    }
+    async #pause(reason) {
+        if (!this.#mediaElement.paused && !this.#playRequested) {
+            this.#mediaElement.pause();
+        }
+    }
+    async #play() {
+        if (this.#mediaElement.paused) {
+            this.#playRequested = true;
+            try {
+                // Safari-specific: Ensure audio state is correct before playing
+                const isMuted = this.#context.contextData.muted ?? false;
+                const componentVolume = this.#context.contextData.volume ?? 1;
+                if (!isMuted) {
+                    this.#mediaElement.muted = false;
+                    this.#mediaElement.volume = componentVolume;
+                }
+                const playPromise = this.#mediaElement.play();
+                if (playPromise !== undefined) {
+                    await playPromise;
+                }
+            }
+            catch (err) {
+                // If autoplay was prevented, try again with muted
+                if (err instanceof Error && err.name === 'NotAllowedError') {
+                    this.#mediaElement.muted = true;
+                    try {
+                        await this.#mediaElement.play();
+                    }
+                    catch (mutedErr) {
+                        console.error('Failed to play even when muted:', mutedErr);
+                    }
+                }
+            }
+            finally {
+                this.#playRequested = false;
+            }
+        }
+    }
+    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;
+        const mediaType = this.#context.type === 'VIDEO' ? 'video' : 'audio';
+        const isMuted = this.#context.contextData.muted ?? false;
+        const componentVolume = this.#context.contextData.volume ?? 1;
+        const source = this.#context.contextData.source;
+        if (!source || !source.url)
+            return;
+        // Debounce controller checks to prevent Safari issues with rapid controller changes
+        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;
+        if (!isActive) {
+            if (isController) {
+                await this.#pause('!isActive isController');
+                this.mediaManager.setMediaController(source.url, undefined, mediaType);
+            }
+            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
+            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;
+                }
+            }
+        }
+        // Check if component is loading using the StateManager
+        if (this.state.isLoadingComponent(this.#context.contextData.id)) {
+            if (this.#mediaElement.readyState < 2) {
+                await this.#pause('readyState < 2');
+                return;
+            }
+            else {
+                this.state.removeLoadingComponent(this.#context.contextData.id);
+            }
+        }
+        // Ensure the media element matches the component's mute and volume state
+        if (this.#mediaElement.muted != isMuted) {
+            this.#mediaElement.muted = isMuted;
+        }
+        if (this.#mediaElement.volume != componentVolume) {
+            this.#mediaElement.volume = componentVolume;
+        }
+        const isScenePlaying = this.#context.sceneState.state === 'playing' || this.#context.sceneState.state === 'loading';
+        try {
+            if (!isScenePlaying) {
+                // When scene is not playing, pause media and seek to current position
+                await this.#pause('isScenePlaying is false, it is ' + this.#context.sceneState.state);
+                return await this.#autoSeek();
+            }
+            else {
+                // When scene is playing and media is paused, play media
+                if (this.#mediaElement.paused) {
+                    await this.#play();
+                }
+            }
+        }
+        catch (err) {
+            await new Promise((resolve) => setTimeout(resolve, 100));
+            return this.#handleUpdate();
+        }
+        // sync with timeline
+        if (this.#isOutOfSync()) {
+            await this.#autoSeek();
+        }
+    }
+    async #handleRefresh() {
+        await this.#handleDestroy();
+        await this.#handleSetup();
+    }
+    async #handleDestroy() {
+        this.#destroyed = true;
+        this.#lastTargetTime = null;
+    }
+    async handle(type, context) {
+        this.#context = context;
+        if (this.#context.contextData.type !== 'VIDEO' && this.#context.contextData.type !== 'AUDIO')
+            return;
+        const source = this.#context.contextData.source;
+        if (!source || !source.url) {
+            return;
+        }
+        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/MediaSeekingHook.d.ts

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