visualfries 0.1.5 → 0.1.7

package/dist/SceneBuilder.svelte.js

@@ -399,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

@@ -50,6 +50,9 @@ export class MediaHook {
         }
     }
     async #autoSeek() {
+        if (!this.#mediaElement) {
+            return;
+        }
         const target = this.#context.currentComponentTime;
         const frameDuration = 1 / (this.state.data.settings.fps || 30);
         if (this.#lastTargetTime !== null &&
@@ -60,6 +63,9 @@ export class MediaHook {
         await this.#seek(target);
     }
     async #seek(time) {
+        if (!this.#mediaElement) {
+            return;
+        }
         const element = this.#mediaElement;
         const frameDuration = 1 / (this.state.data.settings.fps || 30);
         // Use fastSeek for larger jumps when supported
@@ -96,6 +102,9 @@ export class MediaHook {
         });
     }
     #isOutOfSync() {
+        if (!this.#mediaElement) {
+            return false;
+        }
         // run only once per MAX_LAG_TIME
         const now = performance.now() / 1000; // convert to seconds
         if (now - this.#lastSyncCheck < this.#MAX_LAG_TIME) {
@@ -106,11 +115,17 @@ export class MediaHook {
         return lagTime >= this.#MAX_LAG_TIME;
     }
     async #pause(reason) {
+        if (!this.#mediaElement) {
+            return;
+        }
         if (!this.#mediaElement.paused && !this.#playRequested) {
             this.#mediaElement.pause();
         }
     }
     async #play() {
+        if (!this.#mediaElement) {
+            return;
+        }
         if (this.#mediaElement.paused) {
             this.#playRequested = true;
             try {
@@ -184,7 +199,7 @@ export class MediaHook {
         }
         // Check if component is loading using the StateManager
         if (this.state.isLoadingComponent(this.#context.contextData.id)) {
-            if (this.#mediaElement.readyState < 2) {
+            if (this.#mediaElement && this.#mediaElement.readyState < 2) {
                 await this.#pause('readyState < 2');
                 return;
             }
@@ -193,10 +208,10 @@ export class MediaHook {
             }
         }
         // Ensure the media element matches the component's mute and volume state
-        if (this.#mediaElement.muted != isMuted) {
+        if (this.#mediaElement && this.#mediaElement.muted != isMuted) {
             this.#mediaElement.muted = isMuted;
         }
-        if (this.#mediaElement.volume != componentVolume) {
+        if (this.#mediaElement && this.#mediaElement.volume != componentVolume) {
             this.#mediaElement.volume = componentVolume;
         }
         const isScenePlaying = this.#context.sceneState.state === 'playing' || this.#context.sceneState.state === 'loading';
@@ -208,7 +223,7 @@ export class MediaHook {
             }
             else {
                 // When scene is playing and media is paused, play media
-                if (this.#mediaElement.paused) {
+                if (this.#mediaElement && this.#mediaElement.paused) {
                     await this.#play();
                 }
             }
@@ -229,6 +244,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/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/package.json

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