visualfries 0.1.10 → 0.1.102

package/dist/components/hooks/HtmlToCanvasHook.js

@@ -67,8 +67,30 @@ export class HtmlToCanvasHook {
         }
         const { width, height } = this.state;
         if (!this.svgBase) {
-            const { base, content, end } = await svgGenerator.generateSVG(this.#htmlEl, this.#context.data.appearance.text, width, height, 'svg-' + this.#context.contextData.id, encodeURIComponent(this.state.getCharactersList().join('')) // current component text encoded
-            );
+            // Safely encode characters list, filtering out any problematic characters
+            let encodedChars = '';
+            try {
+                const charsList = this.state.getCharactersList().join('');
+                encodedChars = encodeURIComponent(charsList);
+            }
+            catch (error) {
+                // If encoding fails (e.g., unpaired surrogates), filter to only safe characters
+                console.warn('Failed to encode characters list, filtering to safe characters:', error);
+                const safeChars = this.state
+                    .getCharactersList()
+                    .filter((char) => {
+                    try {
+                        encodeURIComponent(char);
+                        return true;
+                    }
+                    catch {
+                        return false;
+                    }
+                })
+                    .join('');
+                encodedChars = encodeURIComponent(safeChars);
+            }
+            const { base, content, end } = await svgGenerator.generateSVG(this.#htmlEl, this.#context.data.appearance.text, width, height, 'svg-' + this.#context.contextData.id, encodedChars);
             this.svgBase = base;
             this.svgEnd = end;
             this.svg = base + content + end;

package/dist/components/hooks/PixiSplitScreenDisplayObjectHook.js

@@ -78,7 +78,8 @@ export class PixiSplitScreenDisplayObjectHook {
         // Get the source element (video/image)
         const sourceElement = this.#context.getResource('videoElement');
         if (!sourceElement) {
-            throw new Error('videoElement not found in resources.');
+            // Video element not ready yet - will be called again on next update
+            return;
         }
         // const sourceElement = this.#pixiTexture.baseTexture.resource.source as
         // 	| HTMLVideoElement
@@ -187,8 +188,13 @@ export class PixiSplitScreenDisplayObjectHook {
     }
     async #handleRefresh() {
         await this.#handleDestroy();
-        this.#displayObject.removeChildren();
-        this.#initDisplayObject();
+        // Reset texture reference so it gets refreshed from context
+        this.#pixiTexture = undefined;
+        if (this.#displayObject) {
+            this.#displayObject.removeChildren();
+        }
+        // Don't call #initDisplayObject here - let #handleUpdate do it
+        // after resources are ready
         await this.#handleUpdate();
     }
     async #handleDestroy() {

package/dist/components/hooks/PixiVideoTextureHook.js

@@ -2,18 +2,25 @@ import * as PIXI from 'pixi.js-legacy';
 import { VideoComponentShape } from '../..';
 import { z } from 'zod';
 export class PixiVideoTextureHook {
-    types = ['update'];
+    types = ['update', 'destroy', 'refresh'];
     priority = 1;
     #context;
     #videoTexture;
     componentElement;
+    #handlers = {
+        update: this.#handleUpdate.bind(this),
+        destroy: this.#handleDestroy.bind(this),
+        refresh: this.#handleRefresh.bind(this),
+        'refresh:config': this.#handleRefresh.bind(this)
+    };
     async #handleUpdate() {
         if (this.#videoTexture) {
             return;
         }
         const media = this.#context.getResource('videoElement');
         if (!media) {
-            throw new Error('videoElement not found in resources.');
+            // Video element not ready yet - will be called again on next update
+            return;
         }
         const res = new PIXI.VideoResource(media, {
             autoPlay: false,
@@ -23,6 +30,18 @@ export class PixiVideoTextureHook {
         this.#videoTexture = new PIXI.Texture(baseTexture);
         this.#context.setResource('pixiTexture', this.#videoTexture);
     }
+    async #handleDestroy() {
+        if (this.#videoTexture) {
+            // Destroy the texture and its base texture to free GPU memory
+            this.#videoTexture.destroy(true);
+            this.#videoTexture = undefined;
+            this.#context.removeResource('pixiTexture');
+        }
+    }
+    async #handleRefresh() {
+        await this.#handleDestroy();
+        // #handleUpdate will recreate texture on next update call
+    }
     async handle(type, context) {
         this.#context = context;
         const data = this.#context.contextData;
@@ -30,6 +49,9 @@ export class PixiVideoTextureHook {
             return;
         }
         this.componentElement = data;
-        return await this.#handleUpdate();
+        const handler = this.#handlers[type];
+        if (handler) {
+            await handler();
+        }
     }
 }

package/dist/managers/SubtitlesManager.svelte.js

@@ -208,7 +208,9 @@ 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;
-                    const characters = text.split('');
+                    // 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);
                     if (characters && characters.length > 0) {
                         for (const char of characters) {
                             if (!charactersList.includes(char)) {

package/dist/utils/utils.js

@@ -41,7 +41,9 @@ export const buildCharactersListFromComponentsAndSubtitles = function (layers, s
             const c = component;
             const text = c.text;
             if (text) {
-                const textList = text.split('');
+                // Use Array.from to properly handle multi-codepoint characters (emojis, etc.)
+                // This prevents splitting emojis into unpaired surrogates
+                const textList = Array.from(text);
                 const missingChars = textList.filter((char) => {
                     // Check if the character is not whitespace, not in the characters list,
                     // is a Unicode letter or number, and is NOT an emoji

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "visualfries",
-  "version": "0.1.10",
+  "version": "0.1.102",
   "license": "MIT",
   "author": "ContentFries",
   "repository": {