visualfries 0.1.902 → 0.1.1095

package/dist/components/hooks/PixiSplitScreenDisplayObjectHook.js

@@ -76,13 +76,11 @@ export class PixiSplitScreenDisplayObjectHook {
         // Use sanitized value to prevent XSS
         ctx.filter = `blur(${sanitizedStrength}px)`;
         // Get the source element (video/image)
-        const sourceElement = this.#context.getResource('videoElement');
+        const sourceElement = this.#context.getResource('videoElement') || this.#context.getResource('imageElement');
         if (!sourceElement) {
-            throw new Error('videoElement not found in resources.');
+            // Video or Image element not ready yet - will be called again on next update
+            return;
         }
-        // const sourceElement = this.#pixiTexture.baseTexture.resource.source as
-        // 	| HTMLVideoElement
-        // 	| HTMLImageElement;
         // Draw the original texture with blur
         ctx.drawImage(sourceElement, 0, 0, this.#bgCanvas.width, this.#bgCanvas.height);
     }
@@ -171,6 +169,8 @@ export class PixiSplitScreenDisplayObjectHook {
             this.#drawBlurredBackground();
         }
         if (this.#displayObject) {
+            // Always re-assert the resource in case the context was cleared or updated
+            this.#context.setResource('pixiRenderObject', this.#displayObject);
             if (this.#displayObject.visible != isActive) {
                 this.#displayObject.visible = isActive;
             }
@@ -186,10 +186,28 @@ export class PixiSplitScreenDisplayObjectHook {
         this.#context.setResource('pixiRenderObject', this.#displayObject);
     }
     async #handleRefresh() {
-        await this.#handleDestroy();
-        this.#displayObject.removeChildren();
-        this.#initDisplayObject();
-        await this.#handleUpdate();
+        const currentTexture = this.#context.getResource('pixiTexture');
+        // Check if texture has changed (e.g., video source change)
+        if (currentTexture && currentTexture !== this.#pixiTexture) {
+            // Texture changed - need to recreate everything
+            await this.#handleDestroy();
+            this.#pixiTexture = currentTexture;
+            if (this.#displayObject) {
+                this.#displayObject.removeChildren();
+                this.#initDisplayObject();
+            }
+        }
+        else if (this.#displayObject?.children?.length > 0) {
+            // Same texture - just update sprite properties (position, size, etc.)
+            // For split screen, we may need to rebuild if effects changed
+            // For now, trigger a full rebuild on refresh
+            this.#displayObject.removeChildren();
+            if (currentTexture) {
+                this.#pixiTexture = currentTexture;
+                this.#initDisplayObject();
+            }
+        }
+        // If no texture yet, #handleUpdate will handle initial creation
     }
     async #handleDestroy() {
         // remove event listeners from video
@@ -198,7 +216,7 @@ export class PixiSplitScreenDisplayObjectHook {
     async handle(type, context) {
         this.#context = context;
         const data = this.#context.contextData;
-        if (!data || data.type !== 'VIDEO') {
+        if (!data || (data.type !== 'VIDEO' && data.type !== 'IMAGE')) {
             return;
         }
         this.componentElement = data;

package/dist/components/hooks/PixiVideoTextureHook.js

@@ -2,26 +2,51 @@ import * as PIXI from 'pixi.js-legacy';
 import { VideoComponentShape } from '../..';
 import { z } from 'zod';
 export class PixiVideoTextureHook {
-    types = ['update'];
+    // Note: 'refresh' is NOT included - timeline position changes don't need texture recreation.
+    // The video element persists and the same texture can continue to be used.
+    // Only 'refresh:content' (source change) should recreate the texture.
+    types = ['update', 'destroy', 'refresh:content'];
     priority = 1;
     #context;
     #videoTexture;
+    #videoElement;
     componentElement;
+    #handlers = {
+        update: this.#handleUpdate.bind(this),
+        destroy: this.#handleDestroy.bind(this),
+        'refresh:content': this.#handleRefreshContent.bind(this)
+    };
     async #handleUpdate() {
+        const media = this.#context.getResource('videoElement');
+        // If element changed or texture is missing, recreate it
+        if (media && (media !== this.#videoElement || !this.#videoTexture)) {
+            await this.#handleDestroy();
+            const res = new PIXI.VideoResource(media, {
+                autoPlay: false,
+                updateFPS: 30
+            });
+            const baseTexture = new PIXI.BaseTexture(res);
+            this.#videoTexture = new PIXI.Texture(baseTexture);
+            this.#videoElement = media;
+        }
+        // Always re-assert the resource in case the context was cleared or updated
         if (this.#videoTexture) {
-            return;
+            this.#context.setResource('pixiTexture', this.#videoTexture);
         }
-        const media = this.#context.getResource('videoElement');
-        if (!media) {
-            throw new Error('videoElement not found in resources.');
+    }
+    async #handleDestroy() {
+        if (this.#videoTexture) {
+            // Destroy the texture and its base texture to free GPU memory
+            this.#videoTexture.destroy(true);
+            this.#videoTexture = undefined;
+            this.#videoElement = undefined;
+            this.#context.removeResource('pixiTexture');
         }
-        const res = new PIXI.VideoResource(media, {
-            autoPlay: false,
-            updateFPS: 30
-        });
-        const baseTexture = new PIXI.BaseTexture(res);
-        this.#videoTexture = new PIXI.Texture(baseTexture);
-        this.#context.setResource('pixiTexture', this.#videoTexture);
+    }
+    async #handleRefreshContent() {
+        // Only recreate texture when video source changes
+        await this.#handleDestroy();
+        // Texture will be recreated on next update when videoElement is available
     }
     async handle(type, context) {
         this.#context = context;
@@ -30,6 +55,9 @@ export class PixiVideoTextureHook {
             return;
         }
         this.componentElement = data;
-        return await this.#handleUpdate();
+        const handler = this.#handlers[type];
+        if (handler) {
+            await handler();
+        }
     }
 }

package/dist/directors/ComponentDirector.js

@@ -48,7 +48,7 @@ export class ComponentDirector {
         return this.builder.getComponent();
     }
     constructImage() {
-        this.builder.withImage().withTexture().withDisplayObject();
+        this.builder.withImage().withTexture().withSplitScreen();
         return this.builder.getComponent();
     }
     constructGif() {

package/dist/examples/01_basic_text.json

@@ -0,0 +1,89 @@
+{
+	"id": "01_basic_text",
+	"version": "2.0",
+	"name": "01. Basic Text",
+	"settings": {
+		"width": 1080,
+		"height": 1920,
+		"duration": 5,
+		"fps": 30,
+		"backgroundColor": "#000000"
+	},
+	"assets": [],
+	"layers": [
+		{
+			"id": "layer-bg",
+			"name": "Background Layer",
+			"order": 0,
+			"visible": true,
+			"muted": false,
+			"components": [
+				{
+					"id": "bg-shape",
+					"name": "Black Rectangle",
+					"type": "SHAPE",
+					"timeline": { "startAt": 0, "endAt": 5 },
+					"visible": true,
+					"order": 0,
+					"shape": { "type": "rectangle" },
+					"appearance": {
+						"x": 0,
+						"y": 0,
+						"width": 1080,
+						"height": 1920,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1,
+						"background": "#000000"
+					},
+					"animations": { "enabled": true, "list": [] },
+					"effects": { "enabled": true, "map": {} }
+				}
+			]
+		},
+		{
+			"id": "layer-text",
+			"name": "Text Layer",
+			"order": 1,
+			"visible": true,
+			"muted": false,
+			"components": [
+				{
+					"id": "center-text",
+					"name": "Center Text",
+					"type": "TEXT",
+					"text": "VISUALFRIES",
+					"timeline": { "startAt": 0, "endAt": 5 },
+					"visible": true,
+					"order": 0,
+					"appearance": {
+						"x": 0,
+						"y": 860,
+						"width": 1080,
+						"height": 200,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1,
+						"horizontalAlign": "center",
+						"verticalAlign": "center",
+						"text": {
+							"fontFamily": "Inter",
+							"fontSize": 140,
+							"fontWeight": "900",
+							"lineHeight": { "value": 1, "unit": "em" },
+							"color": "#ffffff",
+							"textAlign": "center",
+							"textTransform": "uppercase"
+						}
+					},
+					"animations": { "enabled": true, "list": [] },
+					"effects": { "enabled": true, "map": {} }
+				}
+			]
+		}
+	],
+	"transitions": [],
+	"audioTracks": []
+}

package/dist/examples/02_animated_text.json

@@ -0,0 +1,110 @@
+{
+	"id": "02_animated_text",
+	"version": "2.0",
+	"name": "02. Animated Text",
+	"settings": {
+		"width": 1080,
+		"height": 1920,
+		"duration": 5,
+		"fps": 30,
+		"backgroundColor": "#000000"
+	},
+	"assets": [],
+	"layers": [
+		{
+			"id": "layer-bg",
+			"name": "Background Layer",
+			"order": 0,
+			"visible": true,
+			"muted": false,
+			"components": [
+				{
+					"id": "bg-shape",
+					"name": "Black Rectangle",
+					"type": "SHAPE",
+					"timeline": { "startAt": 0, "endAt": 5 },
+					"visible": true,
+					"order": 0,
+					"shape": { "type": "rectangle" },
+					"appearance": {
+						"x": 0,
+						"y": 0,
+						"width": 1080,
+						"height": 1920,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1,
+						"background": "#000000"
+					},
+					"animations": { "enabled": true, "list": [] },
+					"effects": { "enabled": true, "map": {} }
+				}
+			]
+		},
+		{
+			"id": "layer-text",
+			"name": "Text Layer",
+			"order": 1,
+			"visible": true,
+			"muted": false,
+			"components": [
+				{
+					"id": "animated-text",
+					"name": "Animated Text",
+					"type": "TEXT",
+					"text": "ANIMATION",
+					"timeline": { "startAt": 0, "endAt": 5 },
+					"visible": true,
+					"order": 0,
+					"appearance": {
+						"x": 0,
+						"y": 860,
+						"width": 1080,
+						"height": 200,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1,
+						"horizontalAlign": "center",
+						"verticalAlign": "center",
+						"text": {
+							"fontFamily": "Inter",
+							"fontSize": 140,
+							"fontWeight": "900",
+							"lineHeight": { "value": 1, "unit": "em" },
+							"color": "#ffffff",
+							"textAlign": "center",
+							"textTransform": "uppercase"
+						}
+					},
+					"animations": {
+						"enabled": true,
+						"list": [
+							{
+								"id": "intro-anim",
+								"name": "Scale & Fade",
+								"animation": {
+									"id": "intro-reveal",
+									"timeline": [
+										{
+											"tweens": [
+												{
+													"method": "from",
+													"vars": { "duration": 1, "scale": 0, "opacity": 0, "ease": "back.out(1.7)" }
+												}
+											]
+										}
+									]
+								}
+							}
+						]
+					},
+					"effects": { "enabled": true, "map": {} }
+				}
+			]
+		}
+	],
+	"transitions": [],
+	"audioTracks": []
+}

package/dist/examples/03_video_background.json

@@ -0,0 +1,94 @@
+{
+	"id": "03_video_background",
+	"version": "2.0",
+	"name": "03. Video Background",
+	"settings": {
+		"width": 1080,
+		"height": 1920,
+		"duration": 5,
+		"fps": 30,
+		"backgroundColor": "#000000"
+	},
+	"assets": [],
+	"layers": [
+		{
+			"id": "layer-video",
+			"name": "Video Layer",
+			"order": 0,
+			"visible": true,
+			"muted": true,
+			"components": [
+				{
+					"id": "bunny-video",
+					"name": "Background Video",
+					"type": "VIDEO",
+					"timeline": { "startAt": 0, "endAt": 5 },
+					"visible": true,
+					"order": 0,
+					"source": {
+						"url": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+						"startAt": 0,
+						"endAt": 5
+					},
+					"appearance": {
+						"x": 0,
+						"y": 0,
+						"width": 1080,
+						"height": 1920,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1
+					},
+					"volume": 0,
+					"muted": true,
+					"animations": { "enabled": true, "list": [] },
+					"effects": { "enabled": true, "map": {} }
+				}
+			]
+		},
+		{
+			"id": "layer-overlay",
+			"name": "Overlay Layer",
+			"order": 1,
+			"visible": true,
+			"muted": false,
+			"components": [
+				{
+					"id": "overlay-text",
+					"name": "Overlay Text",
+					"type": "TEXT",
+					"text": "VIDEO BG",
+					"timeline": { "startAt": 0, "endAt": 5 },
+					"visible": true,
+					"order": 0,
+					"appearance": {
+						"x": 0,
+						"y": 860,
+						"width": 1080,
+						"height": 200,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1,
+						"horizontalAlign": "center",
+						"verticalAlign": "center",
+						"text": {
+							"fontFamily": "Inter",
+							"fontSize": 140,
+							"fontWeight": "900",
+							"lineHeight": { "value": 1, "unit": "em" },
+							"color": "#ffffff",
+							"textAlign": "center",
+							"textTransform": "uppercase"
+						}
+					},
+					"animations": { "enabled": true, "list": [] },
+					"effects": { "enabled": true, "map": {} }
+				}
+			]
+		}
+	],
+	"transitions": [],
+	"audioTracks": []
+}

package/dist/examples/04_real_subtitles.json

@@ -0,0 +1,116 @@
+{
+	"id": "04_real_subtitles",
+	"version": "2.0",
+	"name": "04. Real Subtitles",
+	"settings": {
+		"width": 1080,
+		"height": 1920,
+		"duration": 5,
+		"fps": 30,
+		"backgroundColor": "#000000"
+	},
+	"assets": [
+		{
+			"id": "bunny-asset",
+			"type": "VIDEO",
+			"url": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+		}
+	],
+	"layers": [
+		{
+			"id": "layer-video",
+			"name": "Video Layer",
+			"order": 0,
+			"visible": true,
+			"muted": true,
+			"components": [
+				{
+					"id": "bunny-video",
+					"name": "Background Video",
+					"type": "VIDEO",
+					"timeline": { "startAt": 0, "endAt": 5 },
+					"visible": true,
+					"order": 0,
+					"source": {
+						"assetId": "bunny-asset",
+						"url": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+						"startAt": 0,
+						"endAt": 5
+					},
+					"appearance": {
+						"x": 0,
+						"y": 0,
+						"width": 1080,
+						"height": 1920,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1
+					},
+					"volume": 0,
+					"muted": true,
+					"animations": { "enabled": true, "list": [] },
+					"effects": { "enabled": true, "map": {} }
+				}
+			]
+		},
+		{
+			"id": "layer-subtitles",
+			"name": "Subtitle Layer",
+			"order": 1,
+			"visible": true,
+			"muted": false,
+			"components": [
+				{
+					"id": "real-subtitles",
+					"name": "Real Subtitles",
+					"type": "SUBTITLES",
+					"timeline": { "startAt": 0, "endAt": 5 },
+					"visible": true,
+					"order": 0,
+					"source": {
+						"assetId": "bunny-asset",
+						"startAt": 0,
+						"endAt": 5
+					},
+					"appearance": {
+						"x": 0,
+						"y": 1400,
+						"width": 1080,
+						"height": 300,
+						"opacity": 1,
+						"rotation": 0,
+						"scaleX": 1,
+						"scaleY": 1,
+						"text": {
+							"fontFamily": "Inter",
+							"fontSize": 80,
+							"fontWeight": "900",
+							"color": "#ffffff",
+							"textAlign": "center",
+							"textTransform": "uppercase",
+							"activeWord": {
+								"enabled": true,
+								"color": "#ffd700",
+								"scale": 1.3
+							}
+						}
+					},
+					"animations": {
+						"enabled": true,
+						"list": [
+							{
+								"id": "words-anim",
+								"name": "Words Highlight",
+								"animation": "cf-words-highlight"
+							}
+						]
+					},
+					"effects": { "enabled": true, "map": {} }
+				}
+			]
+		}
+	],
+	"transitions": [],
+	"audioTracks": []
+}