visualfries 0.1.0

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

@@ -0,0 +1,6 @@
+export declare class TimeManager {
+    fps: number;
+    duration: number;
+    transformTime(time: number, skipDurationCheck?: boolean): number;
+    updateTimeConfig(newFps: number, newDuration: number): void;
+}

package/dist/managers/TimeManager.svelte.js

@@ -0,0 +1,18 @@
+export class TimeManager {
+    fps = $state(30); // Default
+    duration = $state(0);
+    transformTime(time, skipDurationCheck = false) {
+        // Round to nearest frame boundary (1/fps seconds)
+        let frameAdjustedTime = Math.round(time * this.fps) / this.fps;
+        frameAdjustedTime = Math.max(frameAdjustedTime, 0);
+        if (!skipDurationCheck) {
+            // Keep duration check since endTime is always <= duration
+            return frameAdjustedTime > this.duration ? this.duration : frameAdjustedTime;
+        }
+        return frameAdjustedTime;
+    }
+    updateTimeConfig(newFps, newDuration) {
+        this.fps = newFps;
+        this.duration = newDuration;
+    }
+}

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

@@ -0,0 +1,25 @@
+import { StateManager } from './StateManager.svelte.js';
+import { EventManager } from './EventManager.js';
+export declare class TimelineManager {
+    #private;
+    playbackRate: number;
+    private state;
+    private eventManager;
+    private loop;
+    constructor(cradle: {
+        stateManager: StateManager;
+        eventManager: EventManager;
+        loop: boolean;
+    });
+    private initStateSyncWatchers;
+    private watch;
+    get timeline(): gsap.core.Timeline;
+    get duration(): number;
+    add(timeline: gsap.core.Timeline, position?: gsap.Position): void;
+    addLabel(label: string, position?: gsap.Position): void;
+    seek(requestedTime: number): void;
+    play(): void;
+    pause(): void;
+    setPlaybackRate(rate: number): void;
+    destroy(): void;
+}

package/dist/managers/TimelineManager.svelte.js

@@ -0,0 +1,152 @@
+import { StateManager } from './StateManager.svelte.js';
+import { EventManager } from './EventManager.js';
+import gsap from 'gsap';
+const MIN_PLAYBACK_RATE = 0.25;
+const MAX_PLAYBACK_RATE = 4;
+export class TimelineManager {
+    #timeline;
+    #progressTimeline = undefined;
+    #watchTicker;
+    playbackRate;
+    state;
+    eventManager;
+    loop;
+    constructor(cradle) {
+        this.state = cradle.stateManager;
+        this.eventManager = cradle.eventManager;
+        this.#timeline = gsap.timeline({
+            id: this.state.data.id,
+            paused: true,
+            duration: this.state.duration,
+            smoothChildTiming: true,
+            repeat: cradle.loop ? -1 : 0,
+            onRepeat: () => {
+                // when looping, we need to manually reset the timeline's time to the start
+                // to prevent the internal time from accumulating indefinitely.
+                this.#timeline.seek(this.state.startTime);
+            }
+        });
+        this.loop = cradle.loop;
+        // prevent unexpected duration changes when we add other child timelines
+        this.#createProgressTimeline();
+        if (this.#progressTimeline) {
+            this.#timeline.add(this.#progressTimeline, 0);
+        }
+        const rate = $state(1);
+        this.playbackRate = rate;
+        this.initStateSyncWatchers();
+    }
+    #createProgressTimeline() {
+        if (this.#progressTimeline) {
+            this.#timeline.remove(this.#progressTimeline);
+            this.#progressTimeline.kill();
+            this.#progressTimeline = undefined;
+        }
+        const progressObject = { progress: 0 };
+        this.#progressTimeline = gsap.to(progressObject, {
+            progress: 1,
+            duration: this.duration,
+            ease: 'none'
+        });
+    }
+    initStateSyncWatchers() {
+        this.#watchTicker = () => this.watch();
+        this.eventManager.on('changestate', this.#handleChangeState.bind(this));
+    }
+    watch() {
+        const rawTime = this.timeline.time();
+        if (rawTime >= this.state.endTime) {
+            if (this.loop) {
+                // handle looping - if gsap animation is longer than the timeline, we need to reset the time to the start
+                this.seek(this.state.startTime);
+                return;
+            }
+            else {
+                // we should pause let's check
+            }
+        }
+        // handle disabled time zones
+        const time = Math.max(this.state.startTime, Math.min(rawTime, this.state.endTime));
+        this.state.setCurrentTime(time);
+        let shouldSeek = false;
+        let setTime = time;
+        for (const zone of this.state.disabledTimeZones) {
+            if (setTime > zone.start && setTime < zone.end) {
+                // If time is in a disabled zone, move to the end of the zone
+                setTime = zone.end;
+                shouldSeek = true;
+            }
+        }
+        if (shouldSeek) {
+            this.seek(setTime);
+        }
+    }
+    #handleChangeState() {
+        if (this.state.isPlaying) {
+            this.state.state === 'playing' ? this.play() : this.pause();
+        }
+        else {
+            this.pause();
+        }
+    }
+    // temporary
+    get timeline() {
+        return this.#timeline;
+    }
+    get duration() {
+        return this.state.duration;
+    }
+    add(timeline, position) {
+        // Defensive check: Forcibly set the duration of the incoming timeline
+        // to match the main scene's duration. This prevents any child animations
+        // with infinite repeats from breaking the main timeline's duration.
+        // timeline.duration(this.state.duration);
+        this.timeline.add(timeline, position);
+        if (this.timeline.duration() < this.state.duration) {
+            // we don't care about main timeline duration, as this is controlled by state
+            // we only care that it CAN NOT be shorter
+            this.timeline.duration(this.state.duration);
+        }
+    }
+    addLabel(label, position) {
+        this.timeline.addLabel(label, position);
+    }
+    seek(requestedTime) {
+        const endTime = this.state.endTime;
+        const startTime = this.state.startTime;
+        let time = Math.max(startTime, Math.min(requestedTime, endTime));
+        // Check if the requested time falls within any disabled zone
+        for (const zone of this.state.disabledTimeZones) {
+            if (time > zone.start && time < zone.end) {
+                // If inside a disabled zone, snap to the nearest boundary
+                const distToStart = time - zone.start;
+                const distToEnd = zone.end - time;
+                time = distToStart < distToEnd ? zone.start : zone.end;
+                break; // Assume zones don't overlap, exit after finding the first match
+            }
+        }
+        this.timeline.seek(time, false);
+        this.state.setCurrentTime(this.timeline.time());
+        if (this.state.state !== 'playing') {
+            this.eventManager.emit('rerender');
+        }
+    }
+    play() {
+        gsap.ticker.add(this.#watchTicker);
+        this.timeline.play();
+    }
+    pause() {
+        gsap.ticker.remove(this.#watchTicker);
+        this.timeline.pause();
+    }
+    setPlaybackRate(rate) {
+        const clampedRate = Math.max(MIN_PLAYBACK_RATE, Math.min(rate, MAX_PLAYBACK_RATE));
+        this.playbackRate = clampedRate;
+        this.timeline.timeScale(clampedRate);
+    }
+    destroy() {
+        gsap.ticker.remove(this.#watchTicker);
+        this.pause();
+        this.timeline.kill();
+    }
+}

package/dist/registers.d.ts

@@ -0,0 +1,12 @@
+import type _SplitText from 'gsap/SplitText';
+type GsapRegistry = {
+    ExpoScaleEase: gsap.ExpoScaleEase;
+    RoughEase: gsap.RoughEase;
+    SlowMo: gsap.SlowMo;
+    MotionPathPlugin: gsap.plugins.MotionPathPlugin;
+    Physics2DPlugin: gsap.plugins.Physics2DPlugin;
+    SplitText: typeof _SplitText;
+    PixiPlugin: gsap.plugins.PixiPlugin;
+};
+export declare const registerGsapPlugins: () => Promise<GsapRegistry>;
+export {};

package/dist/registers.js

@@ -0,0 +1,29 @@
+import { gsap } from 'gsap';
+let registered;
+export const registerGsapPlugins = async function () {
+    if (registered) {
+        return registered;
+    }
+    const { PixiPlugin } = await import('gsap/PixiPlugin');
+    const { ExpoScaleEase, RoughEase, SlowMo } = await import('gsap/EasePack');
+    const { MotionPathPlugin } = await import('gsap/MotionPathPlugin');
+    const { Physics2DPlugin } = await import('gsap/Physics2DPlugin');
+    const SplitText = (await import('gsap/SplitText')).default;
+    gsap.registerPlugin(ExpoScaleEase, RoughEase, SlowMo, MotionPathPlugin, Physics2DPlugin, SplitText, PixiPlugin);
+    registered = {
+        ExpoScaleEase,
+        RoughEase,
+        SlowMo,
+        MotionPathPlugin,
+        Physics2DPlugin,
+        SplitText,
+        PixiPlugin
+    };
+    return registered;
+};
+const getGsapPlugins = function () {
+    if (!registered) {
+        throw new Error('Plugins were not registered yet.');
+    }
+    return registered;
+};

package/dist/schemas/runtime/index.d.ts

@@ -0,0 +1,3 @@
+export type { BuilderState, StateEvents, TimelineEvents, RenderEvents, PlaybackEvents, LayerEvents, ComponentEvents, SubtitlesEvents, EventMap, EventType, EventPayload, ComponentRefreshType, HookType, SceneLayerComponentType, SplitScreenChunk, SplitScreen, } from './types.js';
+export type { MediaComponent, ResourceManager, ComponentData, ComponentProps, PixiComponent, ResourceTypes, HookHandler, HookHandlers, } from './types.js';
+export type { Component as IComponent, Layer as ILayer, SceneBuilder as ISceneBuilder, ComponentContext as IComponentContext, ComponentBuilder as IComponentBuilder, StateManager as IStateManager, ComponentHook as IComponentHook, ComponentBuildStrategy as IComponentBuildStrategy, } from './types.js';

package/dist/schemas/runtime/index.js

@@ -0,0 +1,4 @@
+// Runtime types for the SceneBuilder application
+// These represent runtime interfaces for class instances
+// They are prefixed with "I" to distinguish from data schemas
+export {};

package/dist/schemas/runtime/types.d.ts

@@ -0,0 +1,323 @@
+import type { Container, Texture, Sprite, Application, DisplayObject, RenderTexture, TextureSource } from 'pixi.js-legacy';
+import { z } from 'zod';
+import type { ComponentsManager } from '../../managers/ComponentsManager.svelte.js';
+import type { LayersManager } from '../../managers/LayersManager.svelte.js';
+import type { SubtitlesManager } from '../../managers/SubtitlesManager.svelte.js';
+import type { EventManager } from '../../managers/EventManager.js';
+import type { Component as SceneLayerComponent, ComponentBase, AppearanceInput, Scene, RenderEnvironment, ComponentInput, SceneLayerInput, SceneLayer, VideoComponentShape, ImageComponentShape, GifComponentShape, Subtitle } from '../..';
+declare const SCENE_LAYER_COMPONENT_TYPE: readonly ["IMAGE", "GIF", "VIDEO", "TEXT", "SHAPE", "AUDIO", "COLOR", "GRADIENT", "SUBTITLES"];
+export type SceneLayerComponentType = (typeof SCENE_LAYER_COMPONENT_TYPE)[number];
+type MediaShape = z.infer<typeof VideoComponentShape>;
+type ImageShape = z.infer<typeof ImageComponentShape>;
+type GifShape = z.infer<typeof GifComponentShape>;
+export type BuilderState = 'playing' | 'paused' | 'loading' | 'loading-done' | 'ended';
+export interface StateEvents {
+    changestate: {
+        state: BuilderState;
+        isPlaying: boolean;
+    };
+    rerender: void;
+}
+export interface TimelineEvents {
+    timeupdate: number;
+    seek: number;
+}
+export interface RenderEvents {
+    beforerender: void;
+    afterrender: void;
+    render: void;
+}
+export interface PlaybackEvents {
+    play: void;
+    pause: void;
+}
+export interface LayerEvents {
+    layerschange: void;
+}
+export interface ComponentEvents {
+    componentschange: void;
+    componentchange: ComponentData;
+}
+export interface SubtitlesEvents {
+    subtitleschange: void;
+    subtitlessettingschange: void;
+    subtitlechange: {
+        assetId: string;
+        language: string;
+        subtitleId: string;
+        subtitle: Subtitle;
+    };
+    subtitlesplit: {
+        assetId: string;
+        language: string;
+        subtitleId: string;
+        subtitle: Subtitle;
+        newSubtitle: Subtitle;
+    };
+    subtitlemerge: {
+        assetId: string;
+        language: string;
+        targetSubtitle: Subtitle;
+        sourceSubtitle: Subtitle;
+        mergeTo: 'start' | 'end';
+    };
+    subtitledelete: {
+        assetId: string;
+        language: string;
+        subtitleId: string;
+    };
+}
+export type EventMap = StateEvents & TimelineEvents & RenderEvents & PlaybackEvents & LayerEvents & ComponentEvents & SubtitlesEvents;
+export type EventType = keyof EventMap;
+export type EventPayload<T extends EventType> = EventMap[T];
+export interface MediaComponent {
+    play: () => void;
+    pause: () => void;
+    seek: (time: number) => Promise<void>;
+    autoSeek: () => Promise<void>;
+}
+export interface ResourceManager<T, D, F> {
+    get(id: string): T | undefined;
+    getAll(): T[];
+    update(id: string, data: Partial<F>, refreshType?: ComponentRefreshType): void;
+    delete(id: string): void;
+    create(data: D): Promise<T | null>;
+    setOrder(id: string, newOrder: number): void;
+    moveUp(id: string): void;
+    moveDown(id: string): void;
+    moveToTop(id: string): void;
+    moveToBottom(id: string): void;
+    bulkUpdate(updates: Array<{
+        id: string;
+        data: Partial<F>;
+    }>): void;
+    bulkDelete(ids: string[]): void;
+    hide(id: string): void;
+    show(id: string): void;
+    toggle(id: string): void;
+    filter(predicate: (item: T) => boolean): T[];
+}
+export type ComponentData = SceneLayerComponent;
+export type ComponentProps = ComponentBase & {
+    checksum: string;
+    duration: number;
+    setStart(start: number): void;
+    setEnd(end: number): void;
+    getData(): ComponentData;
+    update(data: Partial<AppearanceInput>): void;
+    updateText(text: string): Promise<void>;
+    updateAppearance(appearance: Partial<AppearanceInput>): Promise<void>;
+    setVisible(visible: boolean): Promise<void>;
+    setOrder(order: number): Promise<void>;
+};
+export interface PixiComponent {
+    displayObject: Container;
+}
+export interface ComponentBuilder {
+    getComponent(): Component;
+    withMedia(): ComponentBuilder;
+    withMediaSeeking(): ComponentBuilder;
+    withVideoTexture(): ComponentBuilder;
+    withSplitScreen(): ComponentBuilder;
+    withHtmlText(): ComponentBuilder;
+    withHtmlAnimation(): ComponentBuilder;
+    withAnimation(): ComponentBuilder;
+    withSubtitles(): ComponentBuilder;
+    withDisplayObject(): ComponentBuilder;
+    withTexture(): ComponentBuilder;
+    withImage(): ComponentBuilder;
+    withDisplayObject(): ComponentBuilder;
+    withGif(): ComponentBuilder;
+    withShape(): ComponentBuilder;
+    withCanvasShape(): ComponentBuilder;
+    withProgressShape(): ComponentBuilder;
+    withHtmlToCanvasHook(): ComponentBuilder;
+}
+export interface Component {
+    readonly id: string;
+    readonly type: SceneLayerComponentType;
+    readonly props: ComponentProps;
+    readonly displayObject: Container | undefined;
+    readonly checksum: string;
+    readonly context: ComponentContext;
+    readonly autoRefresh: boolean;
+    setAutoRefresh(enabled: boolean): Component;
+    addHook(hook: ComponentHook, priority?: number): void;
+    setup(): void;
+    update(): void;
+    refresh(type?: ComponentRefreshType): void;
+    destroy(): void;
+    setStart(start: number): Component;
+    setEnd(end: number): Component;
+    updateAppearance(appearance: Partial<AppearanceInput>): Promise<Component>;
+    updateText(text: string): Promise<Component>;
+    setText(text: string): Promise<Component>;
+    setVisible(visible: boolean): Promise<Component>;
+    setOrder(order: number): Promise<Component>;
+    onChange(callback: (changes: ComponentData) => void): () => void;
+    onTimelineChange(callback: (time: number) => void): () => void;
+}
+export interface Layer {
+    readonly id: string;
+    readonly checksum: string;
+    readonly displayObject: Container | undefined;
+    components: Component[];
+    name: string;
+    order: number;
+    visible?: boolean;
+    update(layerData: Partial<SceneLayerInput>): void;
+    addComponent(component: Component): void;
+    removeComponent(component: Component): void;
+    build(): Promise<void>;
+    setOrder(order: number): void;
+    getData(): SceneLayer;
+    destroy(): void;
+}
+export interface ResourceTypes {
+    videoElement: HTMLVideoElement | undefined;
+    audioElement: HTMLAudioElement | undefined;
+    imageElement: HTMLImageElement | undefined;
+    pixiResource: TextureSource | undefined;
+    pixiTexture: Texture | undefined;
+    pixiSprite: Sprite | undefined;
+    pixiContainer: Container | undefined;
+    wrapperHtmlEl: HTMLElement | undefined;
+    htmlEl: HTMLElement | undefined;
+    animationTarget: HTMLElement | Container | undefined;
+    animationData: Record<string, any> | undefined;
+    pixiRenderObject: Container | undefined;
+    htmlRenderObject: HTMLDivElement | undefined;
+    mediaShape: MediaShape | undefined;
+    imageShape: ImageShape | undefined;
+    gifShape: GifShape | undefined;
+}
+export interface ComponentContext {
+    id: string;
+    type: string;
+    data: ComponentData;
+    contextData: ComponentData;
+    eventManager: EventManager;
+    isActive: boolean;
+    currentComponentTime: number;
+    componentTimelineTime?: number;
+    sceneState: StateManager;
+    disabled: boolean;
+    progress: number;
+    duration: number;
+    resources: Map<keyof ResourceTypes, ResourceTypes[keyof ResourceTypes]>;
+    setComponentProps(props: ComponentProps): void;
+    updateContextData(data: ComponentData): void;
+    resetContextData(): void;
+    getResource<K extends keyof ResourceTypes>(type: K): ResourceTypes[K];
+    setResource<K extends keyof ResourceTypes>(type: K, resource: ResourceTypes[K]): void;
+    removeResource<K extends keyof ResourceTypes>(type: K): void;
+    runHooks(handlers: ComponentHook[], type: HookType): Promise<void>;
+    destroy(): void;
+}
+type Zone = {
+    start: number;
+    end: number;
+};
+export interface SceneBuilder {
+    readonly sceneData: Scene;
+    readonly environment: RenderEnvironment;
+    readonly state: BuilderState;
+    readonly isPlaying: boolean;
+    readonly isLoading: boolean;
+    readonly currentTime: number;
+    readonly currentFrame: number;
+    readonly duration: number;
+    readonly progress: number;
+    readonly app: Application;
+    readonly timeline: gsap.core.Timeline;
+    readonly fps: number;
+    readonly layers: LayersManager;
+    readonly components: ComponentsManager;
+    readonly subtitles: SubtitlesManager;
+    readonly htmlContainer: HTMLElement;
+    readonly canvasContainer: HTMLElement;
+    readonly disabledTimeZones: Zone[];
+    syncChanges: () => void;
+    addExcludedTimestamp(start: number, end: number): void;
+    removeExcludedTimestampsBetween(start: number, end: number): void;
+    setStartAt(start: number | undefined): void;
+    setEndAt(end: number | undefined): void;
+    dispatchEvent<T extends EventType>(event: T, props?: EventPayload<T>): void;
+    addEventListener<K extends keyof EventMap>(event: K, callback: (event: CustomEvent<EventMap[K]>) => void, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof EventMap>(event: K, callback: (event: CustomEvent<EventMap[K]>) => void, options?: boolean | AddEventListenerOptions): void;
+    scale(scale: number): void;
+    initialize(): Promise<void>;
+    seek(time: number): Promise<void>;
+    replaceSourceOnTime(time: number, componentId: string, base64data: string): Promise<void>;
+    seekAndRenderFrame(time: number, target?: DisplayObject | RenderTexture, format?: string, quality?: number): Promise<string | ArrayBuffer | Blob>;
+    isSceneDirty(time: number): Promise<boolean>;
+    renderFrame(target?: DisplayObject | RenderTexture, format?: string, quality?: number): Promise<string | ArrayBuffer | Blob>;
+    log(message: string): void;
+    play(changeState?: boolean): void;
+    pause(changeState?: boolean): void;
+    setPlaybackRate(rate: number): void;
+    addLoadingComponent(componentId: string): void;
+    removeLoadingComponent(componentId: string): void;
+    buildCharactersList(): void;
+    render(): void;
+    destroy(): void;
+    addComponent(componentData: ComponentInput): Promise<ComponentData | undefined>;
+    addLayer(layerInput: SceneLayerInput): Promise<Layer | undefined>;
+    addNewLayerWithComponents(components: ComponentInput[]): Promise<Layer | undefined>;
+    splitComponent(component: Component): Promise<boolean>;
+}
+export interface StateManager {
+    state: BuilderState;
+    isPlaying: boolean;
+    renderAfterLoadingFinished: boolean;
+    currentTime: number;
+    currentFrame: number;
+    duration: number;
+    width: number;
+    height: number;
+    scale: number;
+    setScale(scale: number): void;
+    setCurrentTime(time: number): void;
+    changeState(updateState: 'playing' | 'paused'): void;
+    setDuration(dur: number): void;
+    setRenderAfterLoadingFinished(newVal: boolean): void;
+    addLoadingComponent(componentId: string): void;
+    removeLoadingComponent(componentId: string): void;
+    destroy(): void;
+}
+export type ComponentRefreshType = 'refresh' | 'refresh:content' | 'refresh:config' | 'refresh:metadata' | 'refresh:animation' | 'refresh:audio';
+export type HookType = 'setup' | 'update' | 'destroy' | ComponentRefreshType;
+export interface ComponentHook {
+    types: HookType[];
+    priority: number;
+    handle(type: HookType, context: ComponentContext): Promise<void>;
+}
+export type HookHandler = () => Promise<void>;
+export type HookHandlers = {
+    [K in HookType]?: HookHandler;
+};
+export interface ComponentBuildStrategy {
+    build(data: ComponentData): Component;
+}
+export type SplitScreenChunk = {
+    group: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    component: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};
+export type SplitScreen = {
+    enabled: boolean;
+    pieces: number;
+    sceneWidth: number;
+    sceneHeight: number;
+    chunks: SplitScreenChunk[];
+};
+export {};

package/dist/schemas/runtime/types.js

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+const SCENE_LAYER_COMPONENT_TYPE = [
+    'IMAGE',
+    'GIF',
+    'VIDEO',
+    'TEXT',
+    'SHAPE',
+    'AUDIO',
+    'COLOR',
+    'GRADIENT',
+    'SUBTITLES'
+];