visualfries 0.1.4 → 0.1.6

package/dist/SceneBuilder.svelte.js

@@ -380,8 +380,7 @@ export class SceneBuilder {
         this.stateManager.removeLoadingComponent(componentId);
     }
     buildCharactersList() {
-        // TODO - refactor
-        this.stateManager.setCharactersList(buildCharactersListFromComponentsAndSubtitles(this.sceneData.layers, this.subtitles.data));
+        this.stateManager.setCharactersList(buildCharactersListFromComponentsAndSubtitles(this.sceneData.layers, this.subtitles.getSubtitlesCharactersList()));
     }
     render() {
         const rendered = this.runSync(CommandType.RENDER);
@@ -400,9 +399,10 @@ export class SceneBuilder {
         this.appManager.destroy();
         this.domManager.destroy();
         this.stateManager.destroy();
-        this.mediaManager.destroy();
         this.timelineManager.destroy();
         this.componentsManager.destroy();
+        // media manages should be destroyed last
+        this.mediaManager.destroy();
         // Remove the container from the DI container cache
         removeContainer(this.sceneData.id);
     }

package/dist/components/hooks/MediaHook.js

@@ -229,6 +229,16 @@ export class MediaHook {
     async #handleDestroy() {
         this.#destroyed = true;
         this.#lastTargetTime = null;
+        // Release the media element back to the MediaManager
+        if (this.#mediaElement) {
+            const mediaType = this.#context.type === 'VIDEO' ? 'video' : 'audio';
+            const source = this.#context.contextData.source;
+            if (source && source.url) {
+                this.mediaManager.releaseMediaElement(source.url, mediaType);
+            }
+            this.#context.removeResource(mediaType === 'video' ? 'videoElement' : 'audioElement');
+        }
+        this.#mediaElement = undefined;
     }
     async handle(type, context) {
         this.#context = context;

package/dist/components/hooks/MediaSeekingHook.js

@@ -91,7 +91,9 @@ export class MediaSeekingHook {
             };
             // Add error event handling
             media.onerror = () => {
-                console.error('Media error:', media.error);
+                if (media.error && media.error.code !== 4) {
+                    console.error('Media error:', media.src, media.error);
+                }
             };
         }
     }
@@ -100,6 +102,7 @@ export class MediaSeekingHook {
         await this.#handleSetup();
     }
     async #handleDestroy() {
+        // Clear media element reference - MediaHook will handle releaseMediaElement
         this.#mediaElement = undefined;
     }
     async #handleUpdate() {

package/dist/fonts/GoogleFontsProvider.js

@@ -22,7 +22,7 @@ export const createGoogleFontsProvider = () => {
             const formattedFontFamily = fontFamily.replace(/\s/g, '+');
             let apiUrl = `https://fonts.googleapis.com/css2?family=${formattedFontFamily}`;
             if (text) {
-                apiUrl += `&text=${encodeURIComponent(text)}`;
+                apiUrl += `&text=${text}`;
             }
             // 1. Fetch the CSS file from Google Fonts.
             const cssResponse = await fetch(apiUrl, {

package/dist/managers/MediaManager.js

@@ -181,6 +181,7 @@ export class MediaManager {
             if (type === 'video') {
                 const videoElement = this.videoElements.get(mediaPath);
                 if (videoElement) {
+                    // https://html.spec.whatwg.org/multipage/media.html#best-practices-for-authors-using-media-elements
                     videoElement.src = '';
                     videoElement.load(); // This frees up memory
                     this.videoElements.delete(mediaPath);

package/dist/managers/StateManager.svelte.js

@@ -57,6 +57,8 @@ export class StateManager {
         return this.charactersList;
     }
     setCharactersList(chars) {
+        // remove duplicates
+        chars = [...new Set(chars)];
         this.charactersList = chars;
     }
     setScale(scale) {

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

@@ -208,6 +208,7 @@ export declare class SubtitlesManager {
     addNewSubtitleAfter(subtitleId: string, newText: string): void;
     splitByChars(maxChars: number): void;
     getText(): string | undefined;
+    getSubtitlesCharactersList(): string[];
     updateSettings(newSettings: Partial<SceneSubtitlesSettings>): void;
     findTextChunkTiming(searchText: string, options?: {
         caseSensitive?: boolean;

package/dist/managers/SubtitlesManager.svelte.js

@@ -201,6 +201,28 @@ function buildSubtitlesManager(timeManager, eventManager, sceneData, subtitles)
     // Key format: "assetId:lang"
     // This prevents recalculating unchanged languages when editing a single language
     let validatedCollections = new Map();
+    function getSubtitlesCharactersList() {
+        // loop all subtitles in index
+        let charactersList = [];
+        for (const [assetId, assetIndex] of Object.entries(index)) {
+            for (const [lang, langIndex] of Object.entries(assetIndex)) {
+                for (const [subtitleId, subtitle] of Object.entries(langIndex)) {
+                    const text = subtitle.text;
+                    const characters = text.split('');
+                    if (characters && characters.length > 0) {
+                        for (const char of characters) {
+                            if (!charactersList.includes(char)) {
+                                charactersList.push(char);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        // remove duplicates
+        charactersList = [...new Set(charactersList)];
+        return charactersList;
+    }
     // Mark subtitle as dirty (needs word validation)
     function markSubtitleDirty(subtitleId) {
         validatedSubtitles.delete(subtitleId);
@@ -514,6 +536,9 @@ function buildSubtitlesManager(timeManager, eventManager, sceneData, subtitles)
         get settings() {
             return { ...settings };
         },
+        getSubtitlesCharactersList() {
+            return getSubtitlesCharactersList();
+        },
         updateSettings(newSettings) {
             settings = { ...settings, ...newSettings };
             eventManager.emit('subtitlessettingschange');
@@ -1272,6 +1297,9 @@ export class SubtitlesManager {
         }
         return this.builder.getText(this.assetId, this.language);
     }
+    getSubtitlesCharactersList() {
+        return this.builder.getSubtitlesCharactersList();
+    }
     updateSettings(newSettings) {
         return this.builder.updateSettings(newSettings);
     }

package/dist/utils/utils.d.ts

@@ -1,5 +1,5 @@
-import type { Appearance, SceneLayer, SubtitleCollection } from '..';
+import type { Appearance, SceneLayer } from '..';
 import * as PIXI from 'pixi.js-legacy';
 export declare function changeIdDeep<T>(obj: T): T;
-export declare const buildCharactersListFromComponentsAndSubtitles: (layers: SceneLayer[], subtitles: Record<string, SubtitleCollection>) => string[];
+export declare const buildCharactersListFromComponentsAndSubtitles: (layers: SceneLayer[], subtitlesCharactersList: string[]) => string[];
 export declare const setPlacementAndOpacity: (obj: PIXI.Sprite | PIXI.Graphics, c: Appearance) => void;

package/dist/utils/utils.js

@@ -19,7 +19,7 @@ export function changeIdDeep(obj) {
     }
     return obj;
 }
-export const buildCharactersListFromComponentsAndSubtitles = function (layers, subtitles) {
+export const buildCharactersListFromComponentsAndSubtitles = function (layers, subtitlesCharactersList) {
     const characters = ' ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.-,;:!$?\'"';
     const charactestList = characters.split('');
     const components = layers.flatMap((layer) => layer.components);
@@ -42,28 +42,11 @@ export const buildCharactersListFromComponentsAndSubtitles = function (layers, s
                 charactestList.push(...new Set(variantChars));
             }
         }
-        if (component.type === 'SUBTITLES' &&
-            component.source &&
-            component.source?.assetId &&
-            subtitles[component.source.assetId]) {
-            const c = component;
-            const source = c.source;
-            if (source && source.assetId && subtitles[source.assetId]) {
-                for (const langSubs of Object.values(subtitles[source.assetId])) {
-                    for (const subtitle of langSubs) {
-                        const textList = subtitle.text.split('');
-                        const missingChars = textList.filter((char) => {
-                            // Check if the character is not whitespace, not in the characters list,
-                            // and is a Unicode letter or number
-                            return !/\s/.test(char) && !characters.includes(char) && /\p{L}|\p{N}/u.test(char);
-                        });
-                        // Add both uppercase and lowercase variants of missing chars
-                        const variantChars = missingChars.flatMap((char) => [
-                            char.toLowerCase(),
-                            char.toUpperCase()
-                        ]);
-                        charactestList.push(...new Set(variantChars));
-                    }
+        if (subtitlesCharactersList.length > 0) {
+            for (const char of subtitlesCharactersList) {
+                if (!characters.includes(char)) {
+                    // Add both uppercase and lowercase variants of missing chars
+                    charactestList.push(char.toLowerCase(), char.toUpperCase());
                 }
             }
         }

package/package.json

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