visualfries 0.1.10120 → 0.3.2

package/dist/managers/DeterministicMediaManager.js

@@ -16,6 +16,7 @@ const createDefaultDiagnosticsState = () => ({
     latencyMinMs: Number.POSITIVE_INFINITY,
     latencyMaxMs: 0
 });
+const IMAGE_LOAD_TIMEOUT_MS = 5000;
 export class DeterministicMediaManager {
     config;
     #provider;
@@ -319,10 +320,44 @@ export class DeterministicMediaManager {
     async #loadImage(url) {
         const img = new Image();
         img.crossOrigin = 'anonymous';
-        img.src = url;
         await new Promise((resolve, reject) => {
-            img.onload = () => resolve();
-            img.onerror = () => reject(new Error(`Failed to load deterministic frame: ${url}`));
+            let settled = false;
+            const timeoutId = setTimeout(() => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                cleanup();
+                try {
+                    img.src = '';
+                }
+                catch {
+                    // Ignore cancellation failures.
+                }
+                reject(new Error(`Timed out loading deterministic frame after ${IMAGE_LOAD_TIMEOUT_MS}ms: ${url}`));
+            }, IMAGE_LOAD_TIMEOUT_MS);
+            const cleanup = () => {
+                clearTimeout(timeoutId);
+                img.onload = null;
+                img.onerror = null;
+            };
+            img.onload = () => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                cleanup();
+                resolve();
+            };
+            img.onerror = () => {
+                if (settled) {
+                    return;
+                }
+                settled = true;
+                cleanup();
+                reject(new Error(`Failed to load deterministic frame: ${url}`));
+            };
+            img.src = url;
         });
         return img;
     }

package/dist/managers/EventManager.js

@@ -17,6 +17,8 @@ export class EventManager extends EventTarget {
     }
     // "on" automatically returns the right type under event.details object
     on(event, callback, options) {
-        this.addEventListener(event, ((e) => callback(e)), options);
+        // Register the original function identity so removeEventListener can reliably
+        // detach manager callbacks during scene teardown.
+        this.addEventListener(event, callback, options);
     }
 }

package/dist/managers/LayersManager.svelte.d.ts

@@ -476,6 +476,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -1095,6 +1101,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -1688,6 +1700,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -2279,6 +2297,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -2904,6 +2928,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -3499,6 +3529,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -4045,6 +4081,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -4596,6 +4638,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;
@@ -5140,6 +5188,12 @@ export declare class LayersManager implements ResourceManager<ILayer, SceneLayer
                         unit: "px" | "em" | "rem" | "%";
                     } | null | undefined;
                     textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                    padding?: number | {
+                        top: number;
+                        right: number;
+                        bottom: number;
+                        left: number;
+                    } | undefined;
                     shadow?: {
                         enabled?: boolean | undefined;
                         preset?: string | undefined;

package/dist/managers/RenderManager.d.ts

@@ -13,6 +13,11 @@ export declare class RenderManager {
     private layersManager;
     private lastActiveById;
     private lastRenderTime;
+    private renderInFlight;
+    private rerenderRequested;
+    private readonly boundHandleBeforeRender;
+    private readonly boundRender;
+    private readonly boundHandleChangeState;
     constructor(cradle: {
         stateManager: StateManager;
         componentsManager: ResourceManager<IComponent, ComponentData, AppearanceInput>;

package/dist/managers/RenderManager.js

@@ -2,32 +2,41 @@ import { StateManager } from './StateManager.svelte.js';
 import { EventManager } from './EventManager.js';
 import { AppManager } from './AppManager.svelte.js';
 import { LayersManager } from './LayersManager.svelte.js';
+import { shouldPrepareMediaAtTime } from '../utils/mediaWindow.js';
+import { isTimeWithinTimeline } from '../utils/timelineWindow.js';
 export class RenderManager {
     state;
     componentsManager;
     eventManager;
     appManager;
     layersManager;
-    // Track last visibility to ensure we run one more update to hide components that just became invisible
+    // Track last prepared/visible state so media hooks get one final update to release resources.
     lastActiveById = new Map();
     lastRenderTime = -1;
+    renderInFlight = null;
+    rerenderRequested = false;
+    boundHandleBeforeRender;
+    boundRender;
+    boundHandleChangeState;
     constructor(cradle) {
         this.state = cradle.stateManager;
         this.componentsManager = cradle.componentsManager;
         this.eventManager = cradle.eventManager;
         this.appManager = cradle.appManager;
         this.layersManager = cradle.layersManager;
+        this.boundHandleBeforeRender = this.handleBeforeRender.bind(this);
+        this.boundRender = this.render.bind(this);
+        this.boundHandleChangeState = (event) => {
+            if (event.detail.state !== 'playing')
+                void this.render();
+        };
         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();
-            }
-        });
+        this.eventManager.on('beforerender', this.boundHandleBeforeRender);
+        this.eventManager.on('timeupdate', this.boundRender);
+        this.eventManager.on('rerender', this.boundRender);
+        this.eventManager.on('changestate', this.boundHandleChangeState);
     }
     async handleBeforeRender() { }
     #syncLayerDisplayObjects() {
@@ -43,33 +52,70 @@ export class RenderManager {
         }
     }
     async render() {
+        if (this.renderInFlight) {
+            this.rerenderRequested = true;
+            return this.renderInFlight;
+        }
+        this.renderInFlight = this.#drainRenderQueue();
+        return this.renderInFlight;
+    }
+    async #drainRenderQueue() {
+        try {
+            do {
+                this.rerenderRequested = false;
+                await this.#renderOnce();
+            } while (this.rerenderRequested);
+        }
+        finally {
+            this.renderInFlight = null;
+        }
+    }
+    async #renderOnce() {
         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 isVisibleByTime = isTimeWithinTimeline(currentTime, startAt, endAt);
             const isExplicitlyVisible = component.props.visible !== false;
-            const shouldBeVisible = (isVisibleByTime && isExplicitlyVisible) || component.type === 'VIDEO';
+            const shouldBeVisible = isVisibleByTime && isExplicitlyVisible;
+            const shouldPrepareMedia = component.type === 'VIDEO' || component.type === 'AUDIO'
+                ? shouldPrepareMediaAtTime({
+                    type: component.type,
+                    visible: component.props.visible,
+                    timeline: component.props.timeline,
+                    source: { url: component.props.sourceUrl }
+                }, currentTime)
+                : false;
             const wasVisible = this.lastActiveById.get(component.id) === true;
-            return { component, shouldBeVisible, wasVisible };
+            return { component, shouldBeVisible, shouldPrepareMedia, wasVisible };
         });
-        const toUpdate = entries
-            .filter((e) => e.shouldBeVisible || e.wasVisible)
-            .map((e) => e.component);
+        // Server output is correctness-first: every display hook reasserts timeline
+        // visibility on every frame. The optimized preview path can otherwise leave
+        // a stale outgoing image visible across a cut in a long frame-range render.
+        const toUpdate = this.state.environment === 'server'
+            ? components
+            : entries
+                // Every component needs one initial update so its display hook can hide it
+                // when the first rendered frame is outside its timeline.
+                .filter((e) => !this.lastActiveById.has(e.component.id) ||
+                e.shouldBeVisible ||
+                e.wasVisible ||
+                e.shouldPrepareMedia)
+                .map((e) => e.component);
         await Promise.all(toUpdate.map((component) => component.update()));
-        // Update visibility cache after updates
+        // Keep one extra tick after the warm window ends so media hooks can release pooled resources.
         for (const e of entries) {
-            this.lastActiveById.set(e.component.id, e.shouldBeVisible);
+            this.lastActiveById.set(e.component.id, e.shouldBeVisible || e.shouldPrepareMedia);
         }
         this.#syncLayerDisplayObjects();
         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);
+        this.eventManager.removeEventListener('beforerender', this.boundHandleBeforeRender);
+        this.eventManager.removeEventListener('timeupdate', this.boundRender);
+        this.eventManager.removeEventListener('rerender', this.boundRender);
+        this.eventManager.removeEventListener('changestate', this.boundHandleChangeState);
     }
 }

package/dist/managers/StateManager.svelte.d.ts

@@ -22,6 +22,8 @@ export declare class StateManager implements IStateManager {
     private loop;
     private timeManager;
     private layersManager;
+    private disabledTimeZonesCache;
+    private disabledTimeZonesCacheKey;
     constructor(cradle: {
         sceneData: SceneData;
         environment: RenderEnvironment;
@@ -647,6 +649,12 @@ export declare class StateManager implements IStateManager {
                             unit: "px" | "em" | "rem" | "%";
                         } | null | undefined;
                         textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                        padding?: number | {
+                            top: number;
+                            right: number;
+                            bottom: number;
+                            left: number;
+                        } | undefined;
                         shadow?: {
                             enabled?: boolean | undefined;
                             preset?: string | undefined;
@@ -1266,6 +1274,12 @@ export declare class StateManager implements IStateManager {
                             unit: "px" | "em" | "rem" | "%";
                         } | null | undefined;
                         textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                        padding?: number | {
+                            top: number;
+                            right: number;
+                            bottom: number;
+                            left: number;
+                        } | undefined;
                         shadow?: {
                             enabled?: boolean | undefined;
                             preset?: string | undefined;
@@ -1859,6 +1873,12 @@ export declare class StateManager implements IStateManager {
                             unit: "px" | "em" | "rem" | "%";
                         } | null | undefined;
                         textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                        padding?: number | {
+                            top: number;
+                            right: number;
+                            bottom: number;
+                            left: number;
+                        } | undefined;
                         shadow?: {
                             enabled?: boolean | undefined;
                             preset?: string | undefined;
@@ -2450,6 +2470,12 @@ export declare class StateManager implements IStateManager {
                             unit: "px" | "em" | "rem" | "%";
                         } | null | undefined;
                         textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                        padding?: number | {
+                            top: number;
+                            right: number;
+                            bottom: number;
+                            left: number;
+                        } | undefined;
                         shadow?: {
                             enabled?: boolean | undefined;
                             preset?: string | undefined;
@@ -3075,6 +3101,12 @@ export declare class StateManager implements IStateManager {
                             unit: "px" | "em" | "rem" | "%";
                         } | null | undefined;
                         textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                        padding?: number | {
+                            top: number;
+                            right: number;
+                            bottom: number;
+                            left: number;
+                        } | undefined;
                         shadow?: {
                             enabled?: boolean | undefined;
                             preset?: string | undefined;
@@ -3670,6 +3702,12 @@ export declare class StateManager implements IStateManager {
                             unit: "px" | "em" | "rem" | "%";
                         } | null | undefined;
                         textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                        padding?: number | {
+                            top: number;
+                            right: number;
+                            bottom: number;
+                            left: number;
+                        } | undefined;
                         shadow?: {
                             enabled?: boolean | undefined;
                             preset?: string | undefined;
@@ -4216,6 +4254,12 @@ export declare class StateManager implements IStateManager {
                             unit: "px" | "em" | "rem" | "%";
                         } | null | undefined;
                         textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                        padding?: number | {
+                            top: number;
+                            right: number;
+                            bottom: number;
+                            left: number;
+                        } | undefined;
                         shadow?: {
                             enabled?: boolean | undefined;
                             preset?: string | undefined;
@@ -4767,6 +4811,12 @@ export declare class StateManager implements IStateManager {
                             unit: "px" | "em" | "rem" | "%";
                         } | null | undefined;
                         textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                        padding?: number | {
+                            top: number;
+                            right: number;
+                            bottom: number;
+                            left: number;
+                        } | undefined;
                         shadow?: {
                             enabled?: boolean | undefined;
                             preset?: string | undefined;
@@ -5311,6 +5361,12 @@ export declare class StateManager implements IStateManager {
                             unit: "px" | "em" | "rem" | "%";
                         } | null | undefined;
                         textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | undefined;
+                        padding?: number | {
+                            top: number;
+                            right: number;
+                            bottom: number;
+                            left: number;
+                        } | undefined;
                         shadow?: {
                             enabled?: boolean | undefined;
                             preset?: string | undefined;

package/dist/managers/StateManager.svelte.js

@@ -15,6 +15,8 @@ export class StateManager {
     loop = false;
     timeManager;
     layersManager;
+    disabledTimeZonesCache = [];
+    disabledTimeZonesCacheKey = '';
     constructor(cradle) {
         const sceneDataRune = $state(cradle.sceneData);
         this.currentSceneData = sceneDataRune;
@@ -35,14 +37,9 @@ export class StateManager {
         this.currentSceneData.settings.subtitles = subtitlesSettings;
     }
     get currentTime() {
-        if (this.currentTimeRune >= this.endTime) {
-            return this.endTime;
-        }
-        else if (this.currentTimeRune <= this.startTime) {
-            return this.startTime;
-        }
-        // Could cache fps if it doesn't change frequently
-        return this.timeManager.transformTime(this.currentTimeRune);
+        const clampedTime = Math.max(this.startTime, Math.min(this.currentTimeRune, this.endTime));
+        const frameTime = this.timeManager.getCurrentFrameTime(clampedTime, true);
+        return Math.min(frameTime, this.endTime);
     }
     get data() {
         return this.currentSceneData;
@@ -71,7 +68,7 @@ export class StateManager {
         return Math.min(this.data.settings.endAt || this.duration, this.duration);
     }
     setCurrentTime(time) {
-        const currentTime = this.timeManager.transformTime(Math.max(this.startTime, Math.min(time, this.endTime)));
+        const currentTime = Math.max(this.startTime, Math.min(time, this.endTime));
         this.currentTimeRune = currentTime;
         if (time >= this.endTime && this.isPlaying) {
             if (this.loop) {
@@ -101,63 +98,68 @@ export class StateManager {
         }
     }
     get currentFrame() {
-        return Math.round(this.currentTime * this.data.settings.fps);
+        const clampedTime = Math.max(this.startTime, Math.min(this.currentTimeRune, this.endTime));
+        return this.timeManager.getFrameIndex(clampedTime, 'current', true);
     }
     get disabledTimeZones() {
-        const start = $derived(this.data.settings.startAt);
-        const end = $derived(this.data.settings.endAt);
-        const excluded_timestamps = $derived(this.data.settings.trimZones);
-        const duration = $derived(this.data.settings.duration);
-        const zones = $derived.by(() => {
-            const output = [];
-            if (start && start > 0) {
-                output.push({
-                    start: 0,
-                    end: start
-                });
-            }
-            if (excluded_timestamps && excluded_timestamps.length) {
-                for (const disabledZone of excluded_timestamps) {
-                    const { start, end } = disabledZone;
-                    if (end < duration) {
-                        output.push({
-                            start,
-                            end
-                        });
-                    }
+        const start = this.data.settings.startAt;
+        const end = this.data.settings.endAt;
+        const excludedTimestamps = this.data.settings.trimZones ?? [];
+        const duration = this.data.settings.duration;
+        const cacheKey = [
+            start ?? '',
+            end ?? '',
+            duration,
+            excludedTimestamps.map((zone) => `${zone.start}:${zone.end}`).join('|')
+        ].join('::');
+        if (cacheKey === this.disabledTimeZonesCacheKey) {
+            return this.disabledTimeZonesCache;
+        }
+        const output = [];
+        if (start && start > 0) {
+            output.push({
+                start: 0,
+                end: start
+            });
+        }
+        if (excludedTimestamps.length) {
+            for (const disabledZone of excludedTimestamps) {
+                const { start, end } = disabledZone;
+                if (end < duration) {
+                    output.push({
+                        start,
+                        end
+                    });
                 }
             }
-            if (end && end < duration) {
-                output.push({
-                    start: end,
-                    end: duration
-                });
+        }
+        if (end && end < duration) {
+            output.push({
+                start: end,
+                end: duration
+            });
+        }
+        output.sort((a, b) => a.start - b.start);
+        const mergedZones = [];
+        let currentZone = null;
+        for (const zone of output) {
+            if (!currentZone) {
+                currentZone = { ...zone };
             }
-            // Sort zones by start time
-            output.sort((a, b) => a.start - b.start);
-            // Merge overlapping zones
-            const mergedZones = [];
-            let currentZone = null;
-            for (const zone of output) {
-                if (!currentZone) {
-                    currentZone = { ...zone };
-                }
-                else if (zone.start <= currentZone.end) {
-                    // Zones overlap, extend the current zone
-                    currentZone.end = Math.max(currentZone.end, zone.end);
-                }
-                else {
-                    // No overlap, push current zone and start a new one
-                    mergedZones.push(currentZone);
-                    currentZone = { ...zone };
-                }
+            else if (zone.start <= currentZone.end) {
+                currentZone.end = Math.max(currentZone.end, zone.end);
             }
-            if (currentZone) {
+            else {
                 mergedZones.push(currentZone);
+                currentZone = { ...zone };
             }
-            return mergedZones;
-        });
-        return zones;
+        }
+        if (currentZone) {
+            mergedZones.push(currentZone);
+        }
+        this.disabledTimeZonesCacheKey = cacheKey;
+        this.disabledTimeZonesCache = mergedZones;
+        return this.disabledTimeZonesCache;
     }
     changeState(updateState) {
         let newState = this.determineNewState(updateState);

package/dist/managers/SubtitlesManager.svelte.js

@@ -208,9 +208,7 @@ function buildSubtitlesManager(timeManager, eventManager, sceneData, subtitles)
             for (const [lang, langIndex] of Object.entries(assetIndex)) {
                 for (const [subtitleId, subtitle] of Object.entries(langIndex)) {
                     const text = subtitle.text;
-                    // Use Array.from to properly handle multi-codepoint characters (emojis, etc.)
-                    // This prevents splitting emojis into unpaired surrogates that cause encodeURIComponent to fail
-                    const characters = Array.from(text);
+                    const characters = text.split('');
                     if (characters && characters.length > 0) {
                         for (const char of characters) {
                             if (!charactersList.includes(char)) {

package/dist/managers/TimeManager.svelte.d.ts

@@ -1,6 +1,10 @@
 export declare class TimeManager {
     fps: number;
     duration: number;
+    private static readonly FRAME_EPSILON;
+    getFrameIndex(time: number, mode?: 'nearest' | 'current', skipDurationCheck?: boolean): number;
+    getTimeForFrame(frame: number, skipDurationCheck?: boolean): number;
     transformTime(time: number, skipDurationCheck?: boolean): number;
+    getCurrentFrameTime(time: number, skipDurationCheck?: boolean): number;
     updateTimeConfig(newFps: number, newDuration: number): void;
 }