visualfries 0.1.10115 → 0.3.2

package/dist/components/hooks/SubtitlesHook.js

@@ -58,7 +58,7 @@ export class SubtitlesHook {
         const assetSubtitles = this.subtitlesManager.getAssetSubtitles(assetId);
         const languageCode = source?.languageCode || 'default';
         const subtitleArray = assetSubtitles[languageCode] || Object.values(assetSubtitles)[0] || [];
-        this.#subtitles = subtitleArray;
+        this.#subtitles = [...subtitleArray].sort((a, b) => a.start_at - b.start_at);
         // const el = this.#buildHtmlElement();
         // this.#context.setResource('wrapperHtmlEl', el);
         if (this.activeSubtitle === undefined) {
@@ -66,16 +66,38 @@ export class SubtitlesHook {
         }
     }
     get activeSubtitle() {
+        const currentTime = this.state.currentTime;
         if (this.#currentSubtitle) {
-            if (this.state.currentTime >= this.#currentSubtitle.start_at &&
-                this.state.currentTime <= this.#currentSubtitle.end_at) {
-                return this.#currentSubtitle.visible ? this.#currentSubtitle : undefined;
+            if (currentTime >= this.#currentSubtitle.start_at &&
+                currentTime <= this.#currentSubtitle.end_at) {
+                return this.#currentSubtitle.visible !== false ? this.#currentSubtitle : undefined;
             }
         }
-        const subtitle = this.#subtitles.find((sub) => this.state.currentTime >= sub.start_at &&
-            this.state.currentTime <= sub.end_at &&
-            sub.visible !== false);
-        return subtitle;
+        let low = 0;
+        let high = this.#subtitles.length - 1;
+        let candidateIndex = -1;
+        while (low <= high) {
+            const mid = Math.floor((low + high) / 2);
+            const subtitle = this.#subtitles[mid];
+            if (subtitle.start_at <= currentTime) {
+                candidateIndex = mid;
+                low = mid + 1;
+            }
+            else {
+                high = mid - 1;
+            }
+        }
+        if (candidateIndex === -1) {
+            this.#currentSubtitle = undefined;
+            return undefined;
+        }
+        const subtitle = this.#subtitles[candidateIndex];
+        if (currentTime <= subtitle.end_at && subtitle.visible !== false) {
+            this.#currentSubtitle = subtitle;
+            return subtitle;
+        }
+        this.#currentSubtitle = undefined;
+        return undefined;
     }
     #buildFakeContext() {
         let background = this.#context.data.appearance.background;
@@ -108,19 +130,21 @@ export class SubtitlesHook {
         this.#context.updateContextData(updateData);
     }
     async #handleUpdate() {
-        const contextId = this.activeSubtitle ? this.activeSubtitle.id : undefined;
+        const activeSubtitle = this.activeSubtitle;
+        const contextId = activeSubtitle?.id;
         if (contextId === this.#currentId && !this.#refreshed) {
             return;
         }
-        if ((this.activeSubtitle && this.activeSubtitle.id !== this.#context.contextData.id) ||
-            (this.activeSubtitle && this.#refreshed)) {
-            this.#currentId = this.activeSubtitle.id;
-            const startTime = this.activeSubtitle?.start_at ?? 0;
-            const endTime = this.activeSubtitle?.end_at ?? 0;
+        if ((activeSubtitle && activeSubtitle.id !== this.#context.contextData.id) ||
+            (activeSubtitle && this.#refreshed)) {
+            this.#currentSubtitle = activeSubtitle;
+            this.#currentId = activeSubtitle.id;
+            const startTime = activeSubtitle.start_at ?? 0;
+            const endTime = activeSubtitle.end_at ?? 0;
             const duration = endTime - startTime;
             const animationData = {};
             const wordTimings = [];
-            this.activeSubtitle?.words?.forEach((word) => {
+            activeSubtitle.words?.forEach((word) => {
                 wordTimings.push(gsap.utils.clamp(0, duration, word[1] - startTime)); // timings is relative to the start of the subtitle
             });
             // reorder wordTimings by start_at
@@ -135,24 +159,24 @@ export class SubtitlesHook {
             this.#context.setResource('animationData', animationData);
             // we need to rebuild subtitle component as text component
             const currentSize = get(this.#context.data, 'appearance.text.fontSize.value', get(this.#context.data, 'appearance.text.fontSize', 50));
-            const colorOverride = this.activeSubtitle.color ? { color: this.activeSubtitle.color } : {};
-            const visibleOverride = 'visible' in this.activeSubtitle ? { visible: this.activeSubtitle.visible } : {};
-            const fontSizeOverride = 'enlarge' in this.activeSubtitle && currentSize
+            const colorOverride = activeSubtitle.color ? { color: activeSubtitle.color } : {};
+            const visibleOverride = 'visible' in activeSubtitle ? { visible: activeSubtitle.visible } : {};
+            const fontSizeOverride = 'enlarge' in activeSubtitle && currentSize
                 ? {
                     fontSize: {
-                        value: currentSize * (this.activeSubtitle.enlarge / 100),
+                        value: currentSize * (activeSubtitle.enlarge / 100),
                         unit: this.#context.data.appearance.text?.fontSize?.unit
                     }
                 }
                 : {};
             const subtitleContextData = {
                 ...this.#context.data,
-                id: this.activeSubtitle.id,
+                id: activeSubtitle.id,
                 type: 'TEXT',
-                text: this.#removePunctuation(this.activeSubtitle.text || ''),
+                text: this.#removePunctuation(activeSubtitle.text || ''),
                 timeline: {
-                    startAt: this.activeSubtitle.start_at,
-                    endAt: this.activeSubtitle.end_at
+                    startAt: activeSubtitle.start_at,
+                    endAt: activeSubtitle.end_at
                 },
                 appearance: {
                     ...this.#context.data.appearance,
@@ -169,7 +193,7 @@ export class SubtitlesHook {
                 this.#refreshed = false;
             }
         }
-        if (!this.activeSubtitle) {
+        if (!activeSubtitle) {
             this.#buildFakeContext();
         }
     }

package/dist/components/hooks/VerifyMediaHook.js

@@ -1,6 +1,6 @@
 import { VideoComponentShape } from '../..';
 export class VerifyMediaHook {
-    types = ['setup', 'refresh'];
+    types = ['setup', 'refresh:content'];
     priority = 1;
     #context;
     async #handleSetup() {
@@ -14,7 +14,7 @@ export class VerifyMediaHook {
     }
     async handle(type, context) {
         this.#context = context;
-        if (type === 'setup' || type === 'refresh') {
+        if (type === 'setup' || type === 'refresh:content') {
             return await this.#handleSetup();
         }
     }

package/dist/directors/ComponentDirector.d.ts

@@ -19,6 +19,7 @@ export declare class ComponentDirector {
     constructImage(): import("..").IComponent;
     constructGif(): import("..").IComponent;
     constructShape(): import("..").IComponent;
+    constructFill(): import("..").IComponent;
     constructSubtitle(): import("..").IComponent;
     constructText(): import("..").IComponent;
 }

package/dist/directors/ComponentDirector.js

@@ -36,18 +36,23 @@ export class ComponentDirector {
                 return this.constructText();
             case 'COLOR':
             case 'GRADIENT':
-                return this.builder.getComponent();
+                return this.constructFill();
             default:
                 throw new Error(`Unsupported component type`);
         }
     }
     constructVideo() {
         if (this.shouldUseDeterministicMedia) {
-            this.builder.withDeterministicMedia().withTexture().withSplitScreen();
+            this.builder
+                .withDeterministicMedia()
+                .withTexture()
+                .withSplitScreen()
+                .withPixiAnimationTarget()
+                .withAnimation();
             return this.builder.getComponent();
         }
         this.builder.withMedia().withMediaSeeking();
-        this.builder.withVideoTexture().withSplitScreen();
+        this.builder.withVideoTexture().withSplitScreen().withPixiAnimationTarget().withAnimation();
         return this.builder.getComponent();
     }
     constructAudio() {
@@ -55,15 +60,25 @@ export class ComponentDirector {
         return this.builder.getComponent();
     }
     constructImage() {
-        this.builder.withImage().withTexture().withSplitScreen();
+        this.builder
+            .withImage()
+            .withTexture()
+            .withSplitScreen()
+            .withPixiAnimationTarget()
+            .withAnimation();
         return this.builder.getComponent();
     }
     constructGif() {
         if (this.shouldUseDeterministicMedia) {
-            this.builder.withDeterministicMedia().withTexture().withDisplayObject();
+            this.builder
+                .withDeterministicMedia()
+                .withTexture()
+                .withDisplayObject()
+                .withPixiAnimationTarget()
+                .withAnimation();
             return this.builder.getComponent();
         }
-        this.builder.withGif(); //.withDisplayObject();
+        this.builder.withGif().withPixiAnimationTarget().withAnimation();
         return this.builder.getComponent();
     }
     constructShape() {
@@ -72,14 +87,32 @@ export class ComponentDirector {
         if (shapeData.shape?.type === 'progress') {
             // Progress shapes use GPU-based PIXI Graphics rendering
             // Still need DisplayObjectHook to add the progress display object to the stage
-            this.builder.withProgressShape().withDisplayObject();
+            this.builder
+                .withProgressShape()
+                .withDisplayObject()
+                .withPixiAnimationTarget()
+                .withAnimation();
         }
         else {
             // Regular shapes use canvas-based rendering
-            this.builder.withCanvasShape().withTexture().withDisplayObject();
+            this.builder
+                .withCanvasShape()
+                .withTexture()
+                .withDisplayObject()
+                .withPixiAnimationTarget()
+                .withAnimation();
         }
         return this.builder.getComponent();
     }
+    constructFill() {
+        this.builder
+            .withCanvasFill()
+            .withTexture()
+            .withDisplayObject()
+            .withPixiAnimationTarget()
+            .withAnimation();
+        return this.builder.getComponent();
+    }
     constructSubtitle() {
         this.builder.withSubtitles().withHtmlText().withAnimation();
         if (this.sceneState.environment === 'server') {

package/dist/factories/SceneBuilderFactory.d.ts

@@ -7,6 +7,9 @@ type Config = {
     subtitles: Record<string, Subtitle[]> | Record<string, SubtitleCollection>;
     fonts: FontType[];
     forceCanvas: boolean;
+    serverRendererMode: 'canvas' | 'webgl';
+    preferWebGL2: boolean;
+    powerPreference: 'default' | 'high-performance' | 'low-power';
     scale: number;
     autoPlay?: boolean;
     loop?: boolean;

package/dist/factories/SceneBuilderFactory.js

@@ -18,6 +18,9 @@ const defaultConfig = {
     subtitles: {},
     fonts: [],
     forceCanvas: false,
+    serverRendererMode: 'canvas',
+    preferWebGL2: true,
+    powerPreference: 'high-performance',
     scale: 1,
     autoPlay: false,
     loop: false,
@@ -35,6 +38,9 @@ export const createSceneBuilder = async function (sceneData, container, config)
         ['subtitles', subs],
         ['fonts', sceneConfig.fonts],
         ['forceCanvas', sceneConfig.forceCanvas],
+        ['serverRendererMode', sceneConfig.serverRendererMode],
+        ['preferWebGL2', sceneConfig.preferWebGL2],
+        ['powerPreference', sceneConfig.powerPreference],
         ['scale', sceneConfig.scale],
         ['autoPlay', sceneConfig.autoPlay],
         ['loop', sceneConfig.loop],

package/dist/fonts/fontDiscovery.js

@@ -128,11 +128,17 @@ const collectComponentTextVariants = (component, configuredLookup, output) => {
     if (!textAppearance) {
         return;
     }
-    const family = normalizeFamily(textAppearance.fontFamily) ?? normalizeFamily(textAppearance.fontSource?.family);
+    const family = normalizeFamily(textAppearance.fontFamily) ??
+        normalizeFamily(textAppearance.fontSource?.family);
     if (!family) {
         return;
     }
     const configMatch = configuredLookup.get(family.toLowerCase());
+    // An unconfigured family is a browser/system-font request, not an implicit
+    // Google Fonts dependency. Remote loading must be explicit and reproducible.
+    if (!textAppearance.fontSource?.source && !configMatch) {
+        return;
+    }
     const source = (textAppearance.fontSource?.source ?? configMatch?.source ?? 'google');
     const fileUrl = normalizeFamily(textAppearance.fontSource?.fileUrl) ?? configMatch?.fileUrl ?? undefined;
     const weights = new Set();
@@ -191,6 +197,11 @@ export const discoverRequiredFontVariants = (sceneData, configuredFonts = []) =>
             if (component.type !== 'TEXT' && component.type !== 'SUBTITLES') {
                 continue;
             }
+            if (component.type === 'TEXT' &&
+                typeof component.text === 'string' &&
+                !component.text.trim()) {
+                continue;
+            }
             collectComponentTextVariants(component, configuredLookup, variants);
         }
     }

package/dist/layers/Layer.svelte.d.ts

@@ -482,6 +482,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -1101,6 +1107,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -1694,6 +1706,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -2285,6 +2303,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -2910,6 +2934,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -3505,6 +3535,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -4051,6 +4087,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -4602,6 +4644,12 @@ export declare class Layer implements ILayer {
                         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;
@@ -5146,6 +5194,12 @@ export declare class Layer implements ILayer {
                         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/layers/Layer.svelte.js

@@ -49,7 +49,7 @@ export class Layer {
             this.#displayObject.addChild(component.displayObject);
         }
         // resort components
-        this.components.sort((a, b) => a.props.timeline.startAt - b.props.timeline.startAt);
+        this.components.sort((a, b) => a.props.order - b.props.order || a.props.timeline.startAt - b.props.timeline.startAt);
         this.#emit('layerschange');
     }
     syncDisplayObjects() {
@@ -92,29 +92,6 @@ export class Layer {
             }
             componentDisplayIndex += 1;
         }
-        // Ensure deterministic ordering among only component display objects without
-        // assuming a 1:1 mapping with all container children.
-        if (typeof this.#displayObject.getChildIndex === 'function' &&
-            typeof this.#displayObject.setChildIndex === 'function') {
-            let nextIndex = 0;
-            for (const component of this.components) {
-                const displayObject = component.displayObject;
-                if (!displayObject || displayObject.parent !== this.#displayObject) {
-                    continue;
-                }
-                const childCount = this.#displayObject.children?.length ?? 0;
-                if (childCount === 0) {
-                    break;
-                }
-                const currentIndex = this.#displayObject.getChildIndex(displayObject);
-                const targetIndex = Math.max(0, Math.min(nextIndex, childCount - 1));
-                if (currentIndex >= 0 && currentIndex !== targetIndex) {
-                    this.#displayObject.setChildIndex(displayObject, targetIndex);
-                    changed = true;
-                }
-                nextIndex += 1;
-            }
-        }
         return changed;
     }
     removeComponent(component) {
@@ -124,7 +101,7 @@ export class Layer {
             if (component.displayObject) {
                 this.#displayObject.removeChild(component.displayObject);
             }
-            this.components.sort((a, b) => a.props.timeline.startAt - b.props.timeline.startAt);
+            this.components.sort((a, b) => a.props.order - b.props.order || a.props.timeline.startAt - b.props.timeline.startAt);
             this.#emit('layerschange');
         }
     }

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

@@ -1,15 +1,26 @@
 import * as PIXI from 'pixi.js-legacy';
 import { DomManager } from './DomManager.js';
 import { StateManager } from './StateManager.svelte.js';
+import type { DeterministicMediaManager } from './DeterministicMediaManager.js';
+type ServerRendererMode = 'canvas' | 'webgl';
+type PowerPreference = 'default' | 'high-performance' | 'low-power';
 export declare class AppManager {
     #private;
     private state;
     private dom;
     private forceCanvas;
+    private serverRendererMode;
+    private preferWebGL2;
+    private powerPreference;
+    private deterministicMediaManager?;
     constructor(cradle: {
         stateManager: StateManager;
         domManager: DomManager;
         forceCanvas: boolean;
+        serverRendererMode?: ServerRendererMode;
+        preferWebGL2?: boolean;
+        powerPreference?: PowerPreference;
+        deterministicMediaManager?: DeterministicMediaManager;
     });
     get app(): PIXI.Application;
     get stage(): PIXI.Container;
@@ -21,3 +32,4 @@ export declare class AppManager {
     scale(scale: number): void;
     destroy(): void;
 }
+export {};