visualfries 0.1.0

package/dist/managers/LayersManager.svelte.js

@@ -0,0 +1,176 @@
+import { AppManager } from './AppManager.svelte.js';
+import { Layer } from '../layers/Layer.svelte.js';
+import { asValue } from 'awilix/browser';
+export class LayersManager {
+    layers = new Map();
+    isBuilding = false;
+    appManager;
+    container; // Container
+    constructor(cradle) {
+        this.container = cradle.container;
+    }
+    setAppManager(appManager) {
+        this.appManager = appManager;
+    }
+    getAll() {
+        const layers = Array.from(this.layers.values()).sort((a, b) => b.order - a.order);
+        return layers;
+    }
+    update(layerId, data) {
+        const layer = this.get(layerId);
+        if (layer) {
+            layer.update(data);
+        }
+    }
+    get(layerId) {
+        return this.layers.get(layerId);
+    }
+    getData() {
+        return this.getAll().map((layer) => layer.getData());
+    }
+    delete(layerId) {
+        const layer = this.layers.get(layerId);
+        if (layer) {
+            try {
+                if (layer.displayObject && this.appManager?.stage) {
+                    this.appManager.stage.removeChild(layer.displayObject);
+                }
+                layer.destroy?.();
+            }
+            catch (error) {
+                console.error('Error during layer cleanup:', error);
+            }
+            finally {
+                this.layers.delete(layerId);
+            }
+        }
+    }
+    async create(layerData) {
+        if (this.isBuilding) {
+            throw new Error('Attempted to create multiple layers simultaneously. Construct one at the time.');
+        }
+        let layer = null;
+        this.isBuilding = true;
+        try {
+            // Register component-specific data in the scope
+            this.container.register({
+                layerData: asValue(layerData)
+            });
+            layer = this.container.resolve('layer');
+            if (!layer) {
+                throw new Error('Layer not found');
+            }
+            await layer.build();
+            this.layers.set(layer.id, layer);
+            if (layer.displayObject) {
+                this.appManager.stage.addChild(layer.displayObject);
+            }
+        }
+        catch (err) {
+            console.error(err);
+        }
+        finally {
+            this.isBuilding = false;
+        }
+        return layer;
+    }
+    setOrder(id, order) {
+        const layer = this.layers.get(id);
+        if (!layer)
+            return;
+        if (layer.order === order) {
+            return;
+        }
+        layer.setOrder(order);
+        this.appManager.stage.sortChildren();
+    }
+    moveUp(id) {
+        this.#reorderLayer(id, (sortedLayers, index) => {
+            if (index >= sortedLayers.length - 1)
+                return false;
+            const currentOrder = sortedLayers[index].order;
+            const aboveOrder = sortedLayers[index + 1].order;
+            sortedLayers[index].setOrder(aboveOrder);
+            sortedLayers[index + 1].setOrder(currentOrder);
+        });
+    }
+    moveDown(id) {
+        this.#reorderLayer(id, (sortedLayers, index) => {
+            if (index <= 0)
+                return false;
+            const currentOrder = sortedLayers[index].order;
+            const belowOrder = sortedLayers[index - 1].order;
+            sortedLayers[index].setOrder(belowOrder);
+            sortedLayers[index - 1].setOrder(currentOrder);
+        });
+    }
+    moveToTop(id) {
+        this.#reorderLayer(id, (sortedLayers, index) => {
+            if (index === sortedLayers.length - 1)
+                return false;
+            const topOrder = sortedLayers[sortedLayers.length - 1].order;
+            sortedLayers[index].setOrder(topOrder + 1);
+        });
+    }
+    moveToBottom(id) {
+        this.#reorderLayer(id, (sortedLayers, index) => {
+            if (index === 0)
+                return false;
+            const bottomOrder = sortedLayers[0].order;
+            sortedLayers[index].setOrder(bottomOrder - 1);
+        });
+    }
+    moveAfter(id, targetId) {
+        this.#reorderLayer(id, (sortedLayers, index) => {
+            const targetIndex = sortedLayers.findIndex((l) => l.id === targetId);
+            if (targetIndex === -1 || targetIndex === index)
+                return false;
+            const targetOrder = sortedLayers[targetIndex].order;
+            const newOrder = targetIndex > 0 ? (targetOrder + sortedLayers[targetIndex - 1].order) / 2 : targetOrder - 1;
+            sortedLayers[index].setOrder(newOrder);
+        });
+    }
+    moveBefore(id, targetId) {
+        this.#reorderLayer(id, (sortedLayers, index) => {
+            const targetIndex = sortedLayers.findIndex((l) => l.id === targetId);
+            if (targetIndex === -1 || targetIndex === index)
+                return false;
+            const targetOrder = sortedLayers[targetIndex].order;
+            const newOrder = targetIndex < sortedLayers.length - 1
+                ? (targetOrder + sortedLayers[targetIndex + 1].order) / 2
+                : targetOrder + 1;
+            sortedLayers[index].setOrder(newOrder);
+        });
+    }
+    #reorderLayer(id, reorderFn) {
+        const sortedLayers = this.getAll();
+        const index = sortedLayers.findIndex((l) => l.id === id);
+        if (index === -1)
+            return;
+        const result = reorderFn(sortedLayers, index);
+        if (result !== false) {
+            this.appManager.stage.sortChildren();
+        }
+    }
+    bulkUpdate(updates) {
+        updates.forEach(({ id, data }) => this.update(id, data));
+    }
+    bulkDelete(ids) {
+        ids.forEach((id) => this.delete(id));
+    }
+    hide(id) {
+        this.update(id, { visible: false });
+    }
+    show(id) {
+        this.update(id, { visible: true });
+    }
+    toggle(id) {
+        const layer = this.get(id);
+        if (layer) {
+            this.update(id, { visible: !layer.visible });
+        }
+    }
+    filter(predicate) {
+        return this.getAll().filter(predicate);
+    }
+}

package/dist/managers/MediaManager.d.ts

@@ -0,0 +1,32 @@
+type MediaType = 'video' | 'image' | 'audio';
+interface VideoOptions {
+    muted: boolean;
+    fps?: number;
+    startAt?: number;
+    endAt?: number;
+}
+export declare class MediaManager {
+    private videoElements;
+    private audioElements;
+    private imageElements;
+    private mediaUsageCount;
+    private videoControllers;
+    private audioControllers;
+    getMediaElement(mediaPath: string, type: MediaType, options?: VideoOptions): Promise<HTMLImageElement | HTMLVideoElement | HTMLAudioElement>;
+    private getKey;
+    private incrementUsageCount;
+    setVideoController(videoPath: string, componentId: string | undefined): void;
+    getVideoController(videoPath: string): string | undefined;
+    setMediaController(mediaPath: string, componentId: string | undefined, type: 'audio' | 'video'): void;
+    getMediaController(videoPath: string, type: 'audio' | 'video'): string | undefined;
+    private getImageElement;
+    private getVideoElement;
+    private getAudioElement;
+    stopMediaElements(): void;
+    cloneVideoElement(originalVideo: HTMLVideoElement): HTMLVideoElement;
+    releaseMediaElement(mediaPath: string, type: MediaType): void;
+    seekVideo(mediaPath: string, time: number): Promise<void>;
+    updateVideoElement(mediaPath: string): HTMLVideoElement | undefined;
+    destroy(): void;
+}
+export {};

package/dist/managers/MediaManager.js

@@ -0,0 +1,243 @@
+import Hls from 'hls.js';
+export class MediaManager {
+    videoElements = new Map();
+    audioElements = new Map();
+    imageElements = new Map();
+    mediaUsageCount = new Map();
+    videoControllers = new Map();
+    audioControllers = new Map();
+    async getMediaElement(mediaPath, type, options) {
+        const key = this.getKey(mediaPath, type);
+        this.incrementUsageCount(key);
+        if (type === 'image') {
+            return this.getImageElement(mediaPath);
+        }
+        else if (type === 'audio') {
+            return this.getAudioElement(mediaPath, options);
+        }
+        return this.getVideoElement(mediaPath, options);
+    }
+    getKey(mediaPath, type) {
+        return `${mediaPath}-${type}`;
+    }
+    incrementUsageCount(key) {
+        const count = this.mediaUsageCount.get(key) || 0;
+        this.mediaUsageCount.set(key, count + 1);
+    }
+    setVideoController(videoPath, componentId) {
+        this.videoControllers.set(videoPath, componentId);
+    }
+    getVideoController(videoPath) {
+        return this.videoControllers.get(videoPath);
+    }
+    setMediaController(mediaPath, componentId, type) {
+        if (type === 'video') {
+            this.videoControllers.set(mediaPath, componentId);
+            return;
+        }
+        this.audioControllers.set(mediaPath, componentId);
+    }
+    getMediaController(videoPath, type) {
+        if (type === 'video') {
+            return this.videoControllers.get(videoPath);
+        }
+        return this.audioControllers.get(videoPath);
+    }
+    async getImageElement(mediaPath) {
+        if (!this.imageElements.has(mediaPath)) {
+            const img = document.createElement('img');
+            img.src = mediaPath;
+            // Check if image is already loaded/cached
+            if (img.complete && img.naturalWidth > 0) {
+                this.imageElements.set(mediaPath, img);
+                return img;
+            }
+            // Check if image failed to load
+            if (img.complete && img.naturalWidth === 0) {
+                throw new Error(`Failed to load image: ${mediaPath}`);
+            }
+            // Image is still loading, attach handlers
+            await new Promise((resolve, reject) => {
+                img.onload = resolve;
+                img.onerror = () => reject(new Error(`Failed to load image: ${mediaPath}`));
+            });
+            this.imageElements.set(mediaPath, img);
+        }
+        return this.imageElements.get(mediaPath);
+    }
+    async getVideoElement(mediaPath, options) {
+        if (!this.videoElements.has(mediaPath)) {
+            const video = document.createElement('video');
+            // video.src = mediaPath;
+            video.crossOrigin = 'anonymous';
+            video.muted = options?.muted ?? true;
+            video.playsInline = true;
+            video.loop = false;
+            video.autoplay = false;
+            if (options?.startAt !== undefined) {
+                video.currentTime = options.startAt;
+            }
+            if (mediaPath.includes('.m3u8')) {
+                if (Hls.isSupported()) {
+                    const hlsConfig = {
+                        startPosition: options?.startAt ?? -1
+                    };
+                    video.preload = 'none';
+                    const hls = new Hls(hlsConfig);
+                    hls.loadSource(mediaPath);
+                    hls.attachMedia(video);
+                    if (mediaPath.includes('mux.com')) {
+                        // this.muxMonitorHlsVideo(video);
+                    }
+                }
+                else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                    video.preload = 'none';
+                    video.src = mediaPath;
+                    //
+                    // If no native HLS support, check if HLS.js is supported
+                    //
+                }
+            }
+            else {
+                video.preload = 'auto';
+                video.src = mediaPath;
+            }
+            await new Promise((resolve, reject) => {
+                video.oncanplay = resolve;
+                video.onerror = () => reject(new Error(`Failed to load video: ${mediaPath}`));
+            });
+            this.videoElements.set(mediaPath, video);
+        }
+        return this.videoElements.get(mediaPath);
+    }
+    async getAudioElement(mediaPath, options) {
+        if (!this.audioElements.has(mediaPath)) {
+            const audio = document.createElement('audio');
+            audio.src = mediaPath;
+            audio.crossOrigin = 'anonymous';
+            audio.preload = 'auto';
+            audio.loop = false;
+            audio.autoplay = false;
+            if (options?.startAt !== undefined) {
+                audio.currentTime = options.startAt;
+            }
+            await new Promise((resolve) => {
+                audio.onloadedmetadata = resolve;
+            });
+            this.audioElements.set(mediaPath, audio);
+        }
+        return this.audioElements.get(mediaPath);
+    }
+    stopMediaElements() {
+        // Stop all videos
+        for (const video of this.videoElements.values()) {
+            if (!video.paused) {
+                video.pause();
+                video.currentTime = 0;
+            }
+        }
+        // Stop all audio
+        for (const audio of this.audioElements.values()) {
+            if (!audio.paused) {
+                audio.pause();
+                audio.currentTime = 0;
+            }
+        }
+    }
+    cloneVideoElement(originalVideo) {
+        const clonedVideo = document.createElement('video');
+        // Copy attributes
+        clonedVideo.muted = originalVideo.muted;
+        clonedVideo.playsInline = originalVideo.playsInline;
+        clonedVideo.loop = originalVideo.loop;
+        clonedVideo.autoplay = originalVideo.autoplay;
+        clonedVideo.crossOrigin = originalVideo.crossOrigin;
+        // Instead of setting src, we'll use srcObject to reference the original media source
+        if (originalVideo.srcObject) {
+            clonedVideo.srcObject = originalVideo.srcObject;
+        }
+        else {
+            // If srcObject is not available, fall back to src
+            clonedVideo.src = originalVideo.src;
+        }
+        // Copy current state
+        clonedVideo.currentTime = originalVideo.currentTime;
+        clonedVideo.playbackRate = originalVideo.playbackRate;
+        clonedVideo.volume = originalVideo.volume;
+        // If the original was playing, start playing the clone
+        if (!originalVideo.paused) {
+            clonedVideo.play().catch((e) => console.error('Error playing cloned video:', e));
+        }
+        return clonedVideo;
+    }
+    releaseMediaElement(mediaPath, type) {
+        const key = this.getKey(mediaPath, type);
+        const count = this.mediaUsageCount.get(key);
+        if (count > 1) {
+            this.mediaUsageCount.set(key, count - 1);
+        }
+        else {
+            this.mediaUsageCount.delete(key);
+            if (type === 'video') {
+                const videoElement = this.videoElements.get(mediaPath);
+                if (videoElement) {
+                    videoElement.src = '';
+                    videoElement.load(); // This frees up memory
+                    this.videoElements.delete(mediaPath);
+                }
+            }
+            else if (type === 'audio') {
+                const audioElement = this.audioElements.get(mediaPath);
+                if (audioElement) {
+                    audioElement.pause();
+                    audioElement.currentTime = 0;
+                    audioElement.src = '';
+                    audioElement.load(); // This frees up memory
+                    this.audioElements.delete(mediaPath);
+                }
+            }
+            else if (type === 'image') {
+                this.imageElements.delete(mediaPath);
+            }
+        }
+    }
+    async seekVideo(mediaPath, time) {
+        const videoElement = this.videoElements.get(mediaPath);
+        if (videoElement) {
+            return new Promise((resolve) => {
+                const onSeeked = () => {
+                    videoElement.removeEventListener('seeked', onSeeked);
+                    resolve();
+                };
+                videoElement.addEventListener('seeked', onSeeked);
+                videoElement.currentTime = time;
+            });
+        }
+        return Promise.resolve();
+    }
+    updateVideoElement(mediaPath) {
+        return this.videoElements.get(mediaPath);
+    }
+    destroy() {
+        // Release all video elements
+        for (const videoElement of this.videoElements.values()) {
+            videoElement.pause();
+            videoElement.src = '';
+            videoElement.load();
+        }
+        this.videoElements.clear();
+        // Release all audio elements
+        for (const audioElement of this.audioElements.values()) {
+            audioElement.pause();
+            audioElement.src = '';
+            audioElement.load();
+        }
+        this.audioElements.clear();
+        // Clear image elements
+        this.imageElements.clear();
+        // Clear usage counts
+        this.mediaUsageCount.clear();
+        // Clear video controllers
+        this.videoControllers.clear();
+    }
+}

package/dist/managers/RenderManager.d.ts

@@ -0,0 +1,23 @@
+import { StateManager } from './StateManager.svelte.js';
+import { EventManager } from './EventManager.js';
+import type { ResourceManager, IComponent, ComponentData } from '..';
+import type { AppearanceInput } from '..';
+import { AppManager } from './AppManager.svelte.js';
+export declare class RenderManager {
+    private state;
+    private componentsManager;
+    private eventManager;
+    private appManager;
+    private lastActiveById;
+    private lastRenderTime;
+    constructor(cradle: {
+        stateManager: StateManager;
+        componentsManager: ResourceManager<IComponent, ComponentData, AppearanceInput>;
+        eventManager: EventManager;
+        appManager: AppManager;
+    });
+    private initializeEventListeners;
+    private handleBeforeRender;
+    render(): Promise<void>;
+    destroy(): void;
+}

package/dist/managers/RenderManager.js

@@ -0,0 +1,59 @@
+import { StateManager } from './StateManager.svelte.js';
+import { EventManager } from './EventManager.js';
+import { AppManager } from './AppManager.svelte.js';
+export class RenderManager {
+    state;
+    componentsManager;
+    eventManager;
+    appManager;
+    // Track last visibility to ensure we run one more update to hide components that just became invisible
+    lastActiveById = new Map();
+    lastRenderTime = -1;
+    constructor(cradle) {
+        this.state = cradle.stateManager;
+        this.componentsManager = cradle.componentsManager;
+        this.eventManager = cradle.eventManager;
+        this.appManager = cradle.appManager;
+        this.initializeEventListeners();
+    }
+    initializeEventListeners() {
+        this.eventManager.on('beforerender', this.handleBeforeRender.bind(this));
+        this.eventManager.on('timeupdate', this.render.bind(this));
+        this.eventManager.on('rerender', this.render.bind(this));
+        this.eventManager.on('changestate', (event) => {
+            if (event.detail.state !== 'playing') {
+                this.render();
+            }
+        });
+    }
+    async handleBeforeRender() { }
+    async render() {
+        const components = this.componentsManager.getAll();
+        const currentTime = this.state.currentTime;
+        const entries = components.map((component) => {
+            const startAt = component.props.timeline.startAt ?? 0;
+            const endAt = component.props.timeline.endAt ?? this.state.duration;
+            const isVisibleByTime = currentTime >= startAt && currentTime <= endAt;
+            const isExplicitlyVisible = component.props.visible !== false;
+            const shouldBeVisible = (isVisibleByTime && isExplicitlyVisible) || component.type === 'VIDEO';
+            const wasVisible = this.lastActiveById.get(component.id) === true;
+            return { component, shouldBeVisible, wasVisible };
+        });
+        const toUpdate = entries
+            .filter((e) => e.shouldBeVisible || e.wasVisible)
+            .map((e) => e.component);
+        await Promise.all(toUpdate.map((component) => component.update()));
+        // Update visibility cache after updates
+        for (const e of entries) {
+            this.lastActiveById.set(e.component.id, e.shouldBeVisible);
+        }
+        this.appManager.render();
+        this.lastRenderTime = currentTime;
+    }
+    destroy() {
+        this.eventManager.removeEventListener('beforerender', this.handleBeforeRender);
+        this.eventManager.removeEventListener('timeupdate', this.render);
+        this.eventManager.removeEventListener('rerender', this.render);
+        this.eventManager.removeEventListener('changestate', this.render);
+    }
+}