visualfries 0.1.0

package/dist/SceneBuilder.svelte.js

@@ -0,0 +1,409 @@
+import * as PIXI from 'pixi.js-legacy';
+import { gsap } from 'gsap';
+import { ComponentShape } from './';
+import { buildCharactersListFromComponentsAndSubtitles, changeIdDeep } from './utils/utils.js';
+import { loadFonts } from './utils/document.js';
+import { CommandType } from './commands/CommandTypes.js';
+import { CommandRunner } from './commands/CommandRunner.js';
+import { StateManager } from './managers/StateManager.svelte.js';
+import { TimelineManager } from './managers/TimelineManager.svelte.js';
+import { EventManager } from './managers/EventManager.js';
+import { DomManager } from './managers/DomManager.js';
+import { AppManager } from './managers/AppManager.svelte.js';
+import { ComponentsManager } from './managers/ComponentsManager.svelte.js';
+import { v4 as uuidv4 } from 'uuid';
+import { MediaManager } from './managers/MediaManager.js';
+import { LayersManager } from './managers/LayersManager.svelte.js';
+import { SubtitlesManager } from './managers/SubtitlesManager.svelte.js';
+import { removeContainer } from './DIContainer.js';
+export class SceneBuilder {
+    initialized = false;
+    renderTicker;
+    timelineManager;
+    eventManager;
+    domManager;
+    appManager;
+    layersManager;
+    componentsManager;
+    stateManager;
+    commandRunner;
+    mediaManager;
+    subtitlesManager;
+    fonts;
+    // Replace constructor with cradle pattern
+    constructor(cradle) {
+        this.timelineManager = cradle.timelineManager;
+        this.eventManager = cradle.eventManager;
+        this.domManager = cradle.domManager;
+        this.appManager = cradle.appManager;
+        this.layersManager = cradle.layersManager;
+        this.componentsManager = cradle.componentsManager;
+        this.stateManager = cradle.stateManager;
+        this.commandRunner = cradle.commandRunner;
+        this.mediaManager = cradle.mediaManager;
+        this.subtitlesManager = cradle.subtitlesManager;
+        this.fonts = cradle.fonts;
+        // TODO - check scene is v2
+        // SceneShape.parse(this.sceneData);
+    }
+    get sceneData() {
+        return this.stateManager.data;
+    }
+    get environment() {
+        return this.stateManager.environment;
+    }
+    get state() {
+        return this.stateManager.state;
+    }
+    get isPlaying() {
+        return this.stateManager.isPlaying;
+    }
+    get isLoading() {
+        return this.stateManager.state === 'loading';
+    }
+    get currentTime() {
+        return this.stateManager.currentTime;
+    }
+    get currentFrame() {
+        return Math.round(this.stateManager.currentTime * this.fps);
+    }
+    get duration() {
+        return this.stateManager.duration;
+    }
+    get progress() {
+        // value between 0 - 1, 1 is compo
+        return this.duration ? this.currentTime / this.duration : 0;
+    }
+    get app() {
+        return this.appManager.app;
+    }
+    get timeline() {
+        return this.timelineManager.timeline;
+    }
+    get fps() {
+        return this.sceneData.settings.fps ?? 30;
+    }
+    // we should remove this later and inject domManager where needed instead
+    get htmlContainer() {
+        return this.domManager.htmlContainer;
+    }
+    get canvasContainer() {
+        return this.domManager.canvas;
+    }
+    get components() {
+        return this.componentsManager;
+    }
+    get layers() {
+        return this.layersManager;
+    }
+    get subtitles() {
+        return this.subtitlesManager;
+    }
+    get disabledTimeZones() {
+        return this.stateManager.disabledTimeZones;
+    }
+    addExcludedTimestamp(start, end) {
+        this.stateManager.data.settings.trimZones = this.stateManager.data.settings?.trimZones || [];
+        this.stateManager.data.settings.trimZones.push({
+            start: this.stateManager.transformTime(start),
+            end: this.stateManager.transformTime(end)
+        });
+    }
+    removeExcludedTimestampsBetween(start, end) {
+        const transformedStart = this.stateManager.transformTime(start);
+        const transformedEnd = this.stateManager.transformTime(end);
+        if (transformedEnd === this.stateManager.startTime) {
+            this.setStartAt(undefined);
+        }
+        if (transformedStart === this.stateManager.endTime) {
+            this.setEndAt(undefined);
+        }
+        if (!this.stateManager.data.settings.trimZones) {
+            return;
+        }
+        this.stateManager.data.settings.trimZones = this.stateManager.data.settings.trimZones.filter(({ start, end }) => {
+            // Keep zones that are completely outside the removal range
+            return end < transformedStart || start > transformedEnd;
+        });
+    }
+    syncChanges() {
+        this.stateManager.updateLayers();
+    }
+    setStartAt(start) {
+        this.stateManager.setStartAt(start ? this.stateManager.transformTime(start) : undefined);
+    }
+    setEndAt(end) {
+        this.stateManager.setEndAt(end ? this.stateManager.transformTime(end) : undefined);
+    }
+    updateSubtitlesSettings(settings) {
+        const currentSubtitlesSettincs = this.stateManager.data.settings.subtitles
+            ? this.stateManager.data.settings.subtitles
+            : {
+                punctuation: true
+            };
+        const newSettings = { ...currentSubtitlesSettincs, ...settings };
+        this.stateManager.updateSceneSubtitlesSettings(newSettings);
+        this.subtitlesManager.updateSettings(newSettings);
+    }
+    dispatchEvent(event, props) {
+        this.eventManager.emit(event, props);
+    }
+    addEventListener(event, callback, options) {
+        this.eventManager.addEventListener(event, ((e) => callback(e)), options);
+    }
+    removeEventListener(event, callback, options) {
+        this.eventManager.removeEventListener(event, ((e) => callback(e)), options);
+    }
+    async run(commandType, props) {
+        return await this.commandRunner.run(commandType, props);
+    }
+    runSync(commandType, props) {
+        return this.commandRunner.runSync(commandType, props);
+    }
+    scale(scale) {
+        const clampedScale = Math.max(0.01, Math.min(scale, 2));
+        this.appManager.scale(clampedScale);
+        this.domManager.scale(clampedScale);
+    }
+    async loadFonts(fonts) {
+        return await loadFonts(fonts);
+    }
+    async initialize() {
+        if (this.initialized) {
+            return;
+        }
+        this.initialized = true;
+        gsap.ticker.fps(this.fps);
+        this.renderTicker = () => {
+            this.render();
+        };
+        if (this.fonts.length > 0) {
+            await this.loadFonts(this.fonts);
+        }
+        this.layersManager.setAppManager(this.appManager);
+        await this.appManager.initialize();
+        if (this.stateManager.scale !== 1) {
+            this.scale(this.stateManager.scale);
+        }
+        await this.buildSceneTree();
+        this.seek(0);
+        this.render();
+        this.eventManager.isReady = true;
+        this.domManager.removeLoader();
+    }
+    async buildSceneTree() {
+        // Sort layers by order
+        const sortedLayers = [...this.sceneData.layers].sort((a, b) => a.order - b.order);
+        for (const layerData of sortedLayers) {
+            await this.layersManager.create(layerData);
+        }
+    }
+    async addLayer(layerInput) {
+        const layers = this.layersManager.getAll().sort((a, b) => b.order - a.order);
+        const lastLayerOrder = layers.length ? layers[0].order : 0;
+        const sceneLayer = {
+            id: layerInput.id ?? uuidv4(),
+            name: layerInput.name ?? 'Layer ' + (layers.length + 1),
+            order: layerInput.order ?? lastLayerOrder + 1, // TODO - should probably go into the first layer
+            components: layerInput.components ?? [],
+            visible: layerInput.visible ?? true,
+            muted: layerInput.muted ?? false
+        };
+        const layer = await this.layersManager.create(sceneLayer);
+        this.eventManager.emit('layerschange');
+        this.eventManager.emit('componentschange');
+        return layer ? layer : undefined;
+    }
+    async addNewLayerWithComponents(components) {
+        const layers = this.layersManager.getAll().sort((a, b) => b.order - a.order);
+        const lastLayerOrder = layers.length ? layers[0].order : 0;
+        const layer = await this.layersManager.create({
+            id: uuidv4(),
+            name: 'Layer ' + (this.layersManager.getAll().length + 1),
+            order: lastLayerOrder + 1,
+            components: components,
+            visible: true,
+            muted: false
+        });
+        this.eventManager.emit('layerschange');
+        this.eventManager.emit('componentschange');
+        return layer ? layer : undefined;
+    }
+    async addComponent(componentInput) {
+        // 1. Parse the input using the Zod schema
+        const result = ComponentShape.safeParse(componentInput);
+        // 2. Handle validation failure
+        if (!result.success) {
+            console.error('Invalid component input:', result.error.format());
+            // Potentially emit an error event or throw
+            return undefined;
+        }
+        // 3. Work with the validated and normalized data (result.data is type ComponentData)
+        const validatedComponentData = result.data;
+        // Pass the validated data
+        const layer = await this.addNewLayerWithComponents([componentInput]);
+        if (!layer) {
+            // Handle layer creation failure if necessary
+            return undefined;
+        }
+        // Return the validated data object
+        return validatedComponentData;
+    }
+    async splitComponent(component) {
+        // Find the layer containing this component
+        const compStart = component.props.timeline.startAt;
+        const compEnd = component.props.timeline.endAt;
+        const currentTime = this.currentTime;
+        const isInTime = currentTime > compStart && currentTime < compEnd;
+        if (!isInTime) {
+            return false;
+        }
+        const layer = this.layers
+            .getAll()
+            .find((layer) => layer.components.some((comp) => comp.id === component.id));
+        if (!layer) {
+            return false;
+        }
+        // Create clone of component data with adjusted times
+        const originalEndAt = component.props.timeline.endAt;
+        const newData = changeIdDeep(component.props.getData());
+        const cloneData = {
+            ...newData,
+            id: uuidv4(), // Generate new ID for clone
+            timeline: {
+                ...newData.timeline,
+                endAt: originalEndAt
+            },
+            checksum: 'new-' + uuidv4()
+        };
+        // Update original component's end time
+        component.props.setEnd(this.currentTime);
+        // Add the cloned component to the same layer
+        const newComponent = await this.componentsManager.create(cloneData);
+        newComponent?.props.setStart(this.currentTime);
+        if (newComponent) {
+            layer.addComponent(newComponent);
+        }
+        this.dispatchEvent('componentschange');
+        return true;
+    }
+    async seek(time) {
+        await this.run(CommandType.SEEK, { time });
+    }
+    async replaceSourceOnTime(time, componentId, base64data) {
+        await this.run(CommandType.REPLACE_SOURCE_ON_TIME, {
+            time,
+            componentId,
+            base64data
+        });
+    }
+    async seekAndRenderFrame(time, target, format = 'png', quality = 1) {
+        await this.seek(time);
+        // Ensure scene is rendered after seek so media hooks apply their updates
+        this.render();
+        const frame = await this.renderFrame(target, format, quality);
+        return frame;
+    }
+    /**
+     * Check if seeking to a specific time would result in visual changes
+     * without actually extracting frame data.
+     *
+     * This is useful for determining if consecutive frames are identical,
+     * allowing you to skip rendering and return cached frame data.
+     *
+     * @param time Time in seconds to check
+     * @returns Promise<boolean> True if scene has visual changes at this time
+     *
+     * @example
+     * // Check if frame needs re-rendering
+     * const time = frame / sceneBuilder.fps;
+     * const isDirty = await sceneBuilder.isSceneDirty(time);
+     *
+     * if (!isDirty && isConsecutiveFrame) {
+     *   // Return cached frame - scene hasn't changed
+     *   return cachedFrameData;
+     * } else {
+     *   // Render new frame - scene has changes
+     *   return await sceneBuilder.seekAndRenderFrame(time);
+     * }
+     */
+    async isSceneDirty(time) {
+        // Seek to the specified time to trigger component/hook updates
+        await this.seek(time);
+        // Get current dirty state BEFORE calling render()
+        // This prevents render() from clearing the dirty flag
+        const wasDirty = this.stateManager.isDirty;
+        // Render to update all display objects and let hooks detect changes
+        // This triggers all hook updates but doesn't extract frame data
+        this.render();
+        // Return the dirty state we captured before render()
+        // Don't clear the dirty flag - let actual frame extraction handle that
+        return wasDirty;
+    }
+    async renderFrame(target, format = 'png', quality = 1) {
+        const frame = (await this.run(CommandType.RENDER_FRAME, { target, format, quality }));
+        if (!frame) {
+            throw new Error('Rendering frame failed');
+        }
+        return frame;
+    }
+    log(message) {
+        $effect.root(function () {
+            $inspect(message);
+        });
+    }
+    play(changeState = true) {
+        if (this.state === 'loading' || this.state === 'playing') {
+            return;
+        }
+        if (changeState) {
+            this.stateManager.changeState('playing');
+        }
+        this.timelineManager.play();
+        gsap.ticker.add(this.renderTicker);
+    }
+    pause(changeState = true) {
+        if (changeState) {
+            this.stateManager.changeState('paused');
+        }
+        this.timelineManager.pause();
+        this.render();
+        gsap.ticker.remove(this.renderTicker);
+    }
+    setPlaybackRate(rate) {
+        this.timeline.timeScale(rate);
+    }
+    addLoadingComponent(componentId) {
+        this.stateManager.addLoadingComponent(componentId);
+    }
+    removeLoadingComponent(componentId) {
+        this.stateManager.removeLoadingComponent(componentId);
+    }
+    buildCharactersList() {
+        // TODO - refactor
+        this.stateManager.setCharactersList(buildCharactersListFromComponentsAndSubtitles(this.sceneData.layers, this.subtitles.data));
+    }
+    render() {
+        const rendered = this.runSync(CommandType.RENDER);
+        if (rendered === false) {
+            this.stateManager.setRenderAfterLoadingFinished(true);
+        }
+        if (this.stateManager.state === 'ended') {
+            gsap.ticker.remove(this.renderTicker);
+        }
+    }
+    destroy() {
+        // Stop the timeline and remove the render ticker
+        gsap.ticker.remove(this.renderTicker);
+        // Clear the components map
+        this.initialized = false;
+        this.appManager.destroy();
+        this.domManager.destroy();
+        this.stateManager.destroy();
+        this.mediaManager.destroy();
+        this.timelineManager.destroy();
+        this.componentsManager.destroy();
+        // Remove the container from the DI container cache
+        removeContainer(this.sceneData.id);
+    }
+}

package/dist/adapters/subtitleHelpers.d.ts

@@ -0,0 +1,2 @@
+import type { SubtitleWithCompactWords, Subtitle } from '..';
+export declare function normalizeSubtitle(subtitle: Subtitle): SubtitleWithCompactWords | null;

package/dist/adapters/subtitleHelpers.js

@@ -0,0 +1,187 @@
+import { SubtitleWithCompactWordsShape, ColorTypeShape } from '..';
+// ============================================================================
+// TYPE GUARDS
+// ============================================================================
+/**
+ * Type guard to check if a word is a CompactWordTuple
+ */
+function isCompactWordTuple(word) {
+    return Array.isArray(word);
+}
+/**
+ * Type guard to check if a word is a SubtitleWord
+ */
+function isSubtitleWord(word) {
+    return !Array.isArray(word);
+}
+/**
+ * Safely access CompactWordTuple elements with bounds checking
+ */
+function safeGetTupleElement(tuple, index) {
+    return index < tuple.length ? tuple[index] : undefined;
+}
+/**
+ * Safely get text from CompactWordTuple with type checking
+ */
+function safeGetWordText(word) {
+    const text = safeGetTupleElement(word, 0);
+    return text || '';
+}
+/**
+ * Safely get start time from CompactWordTuple with type checking
+ */
+function safeGetWordStart(word) {
+    const start = safeGetTupleElement(word, 1);
+    return start || 0;
+}
+/**
+ * Safely get end time from CompactWordTuple with type checking
+ */
+function safeGetWordEnd(word) {
+    const end = safeGetTupleElement(word, 2);
+    return end || 0;
+}
+/**
+ * Safely get metadata from CompactWordTuple with type checking
+ */
+function safeGetWordMeta(word) {
+    return safeGetTupleElement(word, 3);
+}
+// ============================================================================
+// WORD PROPERTY ACCESS
+// ============================================================================
+function wordText(word) {
+    return isCompactWordTuple(word) ? safeGetWordText(word) : word.text;
+}
+function wordStart(word) {
+    return isCompactWordTuple(word) ? safeGetWordStart(word) : word.start_at;
+}
+function wordEnd(word) {
+    return isCompactWordTuple(word) ? safeGetWordEnd(word) : word.end_at;
+}
+function wordMeta(word) {
+    return safeGetWordMeta(word);
+}
+// ============================================================================
+// METADATA HELPERS
+// ============================================================================
+function hasEmoji(word) {
+    return wordMeta(word)?.e ? true : false;
+}
+function getSpeakerIndex(word) {
+    return wordMeta(word)?.s;
+}
+function getColor(word) {
+    const color = wordMeta(word)?.c;
+    if (color) {
+        const c = ColorTypeShape.safeParse(color);
+        if (c.success) {
+            return c.data;
+        }
+    }
+    return undefined;
+}
+// ============================================================================
+// FORMAT CONVERSION - WORD LEVEL
+// ============================================================================
+function compactToLegacy(wordTuple, parentSubtitleId, position) {
+    const [text, start_at, end_at] = wordTuple;
+    return {
+        id: `${parentSubtitleId}-word-${position}`,
+        start_at,
+        end_at,
+        text,
+        position
+    };
+}
+function legacyToCompact(word, includeMetadata = false) {
+    const tuple = [word.text, word.start_at, word.end_at];
+    if (includeMetadata) {
+        const metadata = {};
+        tuple.push(metadata);
+    }
+    return tuple;
+}
+// ============================================================================
+// FORMAT CONVERSION - SUBTITLE LEVEL
+// ============================================================================
+/**
+ * Convert subtitle with legacy words to compact format
+ */
+function subtitleToCompact(subtitle) {
+    const compactWords = subtitle.words?.map((word) => legacyToCompact(word));
+    return {
+        ...subtitle,
+        words: compactWords
+    };
+}
+/**
+ * Convert subtitle with compact words to legacy format
+ */
+function subtitleToLegacy(subtitle) {
+    const legacyWords = subtitle.words?.map((wordTuple, index) => compactToLegacy(wordTuple, subtitle.id, index));
+    return {
+        ...subtitle,
+        words: legacyWords,
+        // Convert ColorType properties to string if needed
+        color: typeof subtitle.color === 'string' ? subtitle.color : undefined,
+        background: typeof subtitle.background === 'string' ? subtitle.background : undefined
+    };
+}
+// ============================================================================
+// COLLECTION UTILITIES
+// ============================================================================
+export function normalizeSubtitle(subtitle) {
+    // Start with the original subtitle as the candidate we'll validate
+    let candidate = subtitle;
+    // If words exist and are in legacy format, convert to compact
+    if (subtitle.words && subtitle.words.length > 0) {
+        const firstWord = subtitle.words[0];
+        if (Array.isArray(firstWord)) {
+            candidate = subtitle;
+        }
+        else {
+            candidate = subtitleToCompact(subtitle);
+        }
+    }
+    const resp = SubtitleWithCompactWordsShape.safeParse(candidate);
+    if (resp.success) {
+        return resp.data;
+    }
+    else {
+        console.error('Failed to normalize subtitle', candidate, resp.error);
+    }
+    return null;
+}
+/**
+ * Normalize subtitle collection to use compact format internally
+ */
+function normalizeCollection(collection) {
+    const normalized = {};
+    for (const [key, subtitles] of Object.entries(collection)) {
+        normalized[key] = subtitles
+            .map((subtitle) => {
+            return normalizeSubtitle(subtitle); //subtitle as SubtitleWithCompactWords;
+        })
+            .filter(Boolean);
+    }
+    return normalized;
+}
+/**
+ * Calculate file size savings from using compact format
+ */
+function calculateSavings(collection) {
+    const legacyJson = JSON.stringify(collection);
+    const compactCollection = normalizeCollection(collection);
+    const compactJson = JSON.stringify(compactCollection);
+    const legacySize = legacyJson.length;
+    const compactSize = compactJson.length;
+    const savingsBytes = legacySize - compactSize;
+    const savingsPercent = (savingsBytes / legacySize) * 100;
+    return {
+        legacySize,
+        compactSize,
+        savingsBytes,
+        savingsPercent: Math.round(savingsPercent * 100) / 100
+    };
+}

package/dist/animations/AnimationContext.d.ts

@@ -0,0 +1,17 @@
+import type { AnimationPreset } from './animationPreset.js';
+import { SplitTextCache } from './SplitTextCache.js';
+export declare class AnimationContext {
+    rootElement: any;
+    preset: AnimationPreset;
+    splitTextCache: SplitTextCache;
+    data: Record<string, any>;
+    private animationTargetDuration;
+    constructor(rootElement: any, preset: AnimationPreset, splitTextCache: SplitTextCache, data?: Record<string, any>);
+    get endAnchor(): number;
+    setAnimationTargetDuration(duration: number): void;
+    getData(key: string): any;
+    getElement(targetQuery: string): any;
+    getDuration(): number;
+    getAnimationTargetDuration(): number;
+    getAllData(): Record<string, any>;
+}

package/dist/animations/AnimationContext.js

@@ -0,0 +1,72 @@
+import { SplitTextCache } from './SplitTextCache.js';
+export class AnimationContext {
+    rootElement;
+    preset;
+    splitTextCache;
+    data;
+    animationTargetDuration;
+    constructor(rootElement, preset, splitTextCache, data = {}) {
+        this.rootElement = rootElement;
+        this.preset = preset;
+        this.splitTextCache = splitTextCache;
+        this.data = data;
+        let textShadow = '';
+        if (this.rootElement instanceof HTMLElement) {
+            textShadow = this.rootElement.style.textShadow ?? '';
+        }
+        this.data.textShadow = textShadow;
+        this.animationTargetDuration = 0;
+        this.preset.preset.data = {
+            ...this.preset.preset.data,
+            ...this.data
+        };
+    }
+    get endAnchor() {
+        return this.animationTargetDuration - this.getDuration();
+    }
+    setAnimationTargetDuration(duration) {
+        this.animationTargetDuration = duration;
+    }
+    getData(key) {
+        return this.data[key];
+    }
+    getElement(targetQuery) {
+        if (!(this.rootElement instanceof HTMLElement)) {
+            console.warn(`Root element is not an HTMLElement. Cannot target ${targetQuery}`);
+            return this.rootElement;
+        }
+        const splitTargets = ['words', 'lines', 'chars'];
+        if (splitTargets.includes(targetQuery)) {
+            // Get the splitText instance from the global singleton cache
+            return this.splitTextCache.getSplitText(this.rootElement, targetQuery);
+        }
+        if (targetQuery.startsWith('#') || targetQuery.startsWith('.')) {
+            const element = this.rootElement.querySelector(targetQuery);
+            if (!element) {
+                console.warn(`Element not found for query: ${targetQuery}`);
+                return null;
+            }
+            return element;
+        }
+        if (targetQuery === 'child') {
+            if (this.rootElement.children.length === 0) {
+                console.warn('No children found for "child" query');
+                return null;
+            }
+            return this.rootElement.children[0];
+        }
+        if (targetQuery === 'children') {
+            return this.rootElement.children;
+        }
+        return this.rootElement;
+    }
+    getDuration() {
+        return this.preset.duration;
+    }
+    getAnimationTargetDuration() {
+        return this.animationTargetDuration;
+    }
+    getAllData() {
+        return this.data;
+    }
+}