@twick/2d 0.15.1 → 0.15.2

package/dist/index.d.cts

@@ -4153,13 +4153,29 @@ declare class Video extends Media {
     readonly decoder: SimpleSignal<'web' | 'ffmpeg' | 'slow' | null, this>;
     detectedFileType: 'mp4' | 'webm' | 'hls' | 'mov' | 'unknown';
     private fileTypeWasDetected;
+    /**
+     * Static pool of video elements cached by source URL.
+     * Multiple Video components with the same src will share the same HTMLVideoElement
+     * to avoid duplicate network requests and improve performance.
+     */
     private static readonly pool;
     private static readonly imageCommunication;
     constructor(props: VideoProps);
+    /**
+     * Creates a video element with CORS fallback handling.
+     * First tries with crossOrigin='anonymous', and if that fails due to CORS,
+     * falls back to creating a video without crossOrigin.
+     */
+    private createVideoElement;
     protected desiredSize(): SerializedVector2<DesiredLength>;
     protected mediaElement(): HTMLVideoElement;
     protected seekedMedia(): HTMLVideoElement;
     protected fastSeekedMedia(): HTMLVideoElement;
+    /**
+     * Generates a normalized cache key based on the video source URL.
+     * This ensures that all Video elements with the same src share the same HTMLVideoElement.
+     */
+    private getCacheKey;
     private video;
     protected seekedVideo(): HTMLVideoElement;
     protected fastSeekedVideo(): HTMLVideoElement;

package/dist/index.d.ts

@@ -4153,13 +4153,29 @@ declare class Video extends Media {
     readonly decoder: SimpleSignal<'web' | 'ffmpeg' | 'slow' | null, this>;
     detectedFileType: 'mp4' | 'webm' | 'hls' | 'mov' | 'unknown';
     private fileTypeWasDetected;
+    /**
+     * Static pool of video elements cached by source URL.
+     * Multiple Video components with the same src will share the same HTMLVideoElement
+     * to avoid duplicate network requests and improve performance.
+     */
     private static readonly pool;
     private static readonly imageCommunication;
     constructor(props: VideoProps);
+    /**
+     * Creates a video element with CORS fallback handling.
+     * First tries with crossOrigin='anonymous', and if that fails due to CORS,
+     * falls back to creating a video without crossOrigin.
+     */
+    private createVideoElement;
     protected desiredSize(): SerializedVector2<DesiredLength>;
     protected mediaElement(): HTMLVideoElement;
     protected seekedMedia(): HTMLVideoElement;
     protected fastSeekedMedia(): HTMLVideoElement;
+    /**
+     * Generates a normalized cache key based on the video source URL.
+     * This ensures that all Video elements with the same src share the same HTMLVideoElement.
+     */
+    private getCacheKey;
     private video;
     protected seekedVideo(): HTMLVideoElement;
     protected fastSeekedVideo(): HTMLVideoElement;

package/dist/index.js

@@ -5574,8 +5574,8 @@ var Media = class extends Rect {
     const onError = () => {
       const reason = this.getErrorReason(media.error?.code);
       const srcValue = this.src();
-      console.log(`ERROR: Error loading video: src="${srcValue}", ${reason}`);
-      console.log(`Media element src: "${media.src}"`);
+      console.error(`Error loading video: src="${srcValue}", ${reason}`);
+      console.error(`Media element src: "${media.src}"`);
       media.removeEventListener("error", onError);
       media.removeEventListener("canplay", onCanPlayWrapper);
       media.removeEventListener("canplaythrough", onCanPlayWrapper);
@@ -5594,7 +5594,6 @@ var Media = class extends Rect {
     return this.awaitCanPlay() || this.view().playbackState() === PlaybackState.Rendering;
   }
   play() {
-    console.log("=== Media.play() called ===");
     this.playing(true);
     this.schedulePlay();
   }
@@ -5646,12 +5645,14 @@ var Media = class extends Rect {
           const playPromise = media.play();
           if (playPromise !== void 0) {
             playPromise.then(() => {
-              console.log("Simple play started successfully");
             }).catch((error) => {
               if (error.name !== "AbortError") {
                 console.warn("Error in simple play:", error);
               }
-              this.playing(false);
+              const playbackState = this.view().playbackState();
+              if (playbackState !== PlaybackState.Rendering) {
+                this.playing(false);
+              }
             });
           }
         }
@@ -5661,33 +5662,24 @@ var Media = class extends Rect {
     }, 10);
   }
   actuallyPlay(media, timeFunction) {
-    console.log("=== actuallyPlay called ===");
-    console.log("Media element:", media);
-    console.log("Media src:", media.src);
-    console.log("Media paused:", media.paused);
-    console.log("Media readyState:", media.readyState);
     if (!this.playing()) {
-      console.log("Playing state is false, aborting actuallyPlay");
       return;
     }
     media.playbackRate = this.playbackRate();
     if (media.paused) {
-      console.log("Media is paused, calling play()");
       const playPromise = media.play();
       if (playPromise !== void 0) {
         playPromise.then(() => {
-          console.log("Media play() promise resolved - should be playing now");
-          console.log("Post-play media paused:", media.paused);
-          console.log("Post-play media currentTime:", media.currentTime);
         }).catch((error) => {
           if (error.name !== "AbortError") {
             console.warn("Error playing media:", error);
           }
-          this.playing(false);
+          const playbackState = this.view().playbackState();
+          if (playbackState !== PlaybackState.Rendering) {
+            this.playing(false);
+          }
         });
       }
-    } else {
-      console.log("Media is already playing");
     }
     const start = timeFunction();
     const offset = media.currentTime;
@@ -5721,11 +5713,13 @@ var Media = class extends Rect {
   }
   autoPlayBasedOnTwick() {
     const playbackState = this.view().playbackState();
-    if ((playbackState === PlaybackState.Playing || playbackState === PlaybackState.Presenting) && !this.playing()) {
-      console.log("Auto-starting media playback via play() method");
+    const shouldBePlaying = playbackState === PlaybackState.Playing || playbackState === PlaybackState.Presenting || playbackState === PlaybackState.Rendering;
+    if (shouldBePlaying && !this.playing()) {
+      if (playbackState === PlaybackState.Rendering) {
+        this.playing(true);
+      }
       this.play();
-    } else if (playbackState === PlaybackState.Paused && this.playing()) {
-      console.log("Auto-pausing media playback via pause() method");
+    } else if (!shouldBePlaying && this.playing()) {
       this.pause();
     }
   }
@@ -10127,6 +10121,57 @@ var Video = class extends Media {
     this.fileTypeWasDetected = false;
     this.lastFrame = null;
   }
+  /**
+   * Creates a video element with CORS fallback handling.
+   * First tries with crossOrigin='anonymous', and if that fails due to CORS,
+   * falls back to creating a video without crossOrigin.
+   */
+  createVideoElement(src, key) {
+    const video = document.createElement("video");
+    video.crossOrigin = "anonymous";
+    if (src && src !== "undefined") {
+      try {
+        const parsedSrc = new URL(src, window.location.origin);
+        if (parsedSrc.pathname.endsWith(".m3u8")) {
+          const hls = new Hls();
+          hls.loadSource(src);
+          hls.attachMedia(video);
+        } else {
+          video.src = src;
+        }
+      } catch (error) {
+        video.src = src;
+      }
+      const errorHandler = () => {
+        const error = video.error;
+        if (error && (error.code === 4 || error.code === 2)) {
+          video.removeEventListener("error", errorHandler);
+          const fallbackKey = `${key}_no_cors`;
+          let fallbackVideo = Video.pool[fallbackKey];
+          if (!fallbackVideo) {
+            fallbackVideo = document.createElement("video");
+            fallbackVideo.crossOrigin = null;
+            try {
+              const parsedSrc = new URL(src, window.location.origin);
+              if (parsedSrc.pathname.endsWith(".m3u8")) {
+                const hls = new Hls();
+                hls.loadSource(src);
+                hls.attachMedia(fallbackVideo);
+              } else {
+                fallbackVideo.src = src;
+              }
+            } catch (err) {
+              fallbackVideo.src = src;
+            }
+            Video.pool[fallbackKey] = fallbackVideo;
+          }
+          Video.pool[key] = fallbackVideo;
+        }
+      };
+      video.addEventListener("error", errorHandler, { once: true });
+    }
+    return video;
+  }
   desiredSize() {
     const custom = super.desiredSize();
     if (custom.x === null && custom.y === null) {
@@ -10147,44 +10192,55 @@ var Video = class extends Media {
   fastSeekedMedia() {
     return this.fastSeekedVideo();
   }
+  /**
+   * Generates a normalized cache key based on the video source URL.
+   * This ensures that all Video elements with the same src share the same HTMLVideoElement.
+   */
+  getCacheKey(src) {
+    if (!src || src === "undefined") {
+      return `${this.key}/pending`;
+    }
+    try {
+      const url = new URL(src, window.location.origin);
+      return url.href.split("#")[0];
+    } catch {
+      return src;
+    }
+  }
   video() {
     const src = this.src();
-    const key = `${this.key}/${src || "pending"}`;
+    const key = this.getCacheKey(src);
     let video = Video.pool[key];
     if (!video) {
-      video = document.createElement("video");
-      video.crossOrigin = "anonymous";
+      video = this.createVideoElement(src, key);
+      Video.pool[key] = video;
+    } else {
       if (src && src !== "undefined") {
-        try {
-          const parsedSrc = new URL(src, window.location.origin);
-          if (parsedSrc.pathname.endsWith(".m3u8")) {
-            const hls = new Hls();
-            hls.loadSource(src);
-            hls.attachMedia(video);
-          } else {
+        const normalizeUrl = (url) => {
+          try {
+            const parsed = new URL(url, window.location.origin);
+            return parsed.href.split("#")[0];
+          } catch {
+            return url;
+          }
+        };
+        const normalizedSrc = normalizeUrl(src);
+        const normalizedVideoSrc = video.src ? normalizeUrl(video.src) : "";
+        if (normalizedVideoSrc !== normalizedSrc) {
+          try {
+            const parsedSrc = new URL(src, window.location.origin);
+            if (parsedSrc.pathname.endsWith(".m3u8")) {
+              const hls = new Hls();
+              hls.loadSource(src);
+              hls.attachMedia(video);
+            } else {
+              video.src = src;
+            }
+          } catch (error) {
             video.src = src;
           }
-        } catch (error) {
-          video.src = src;
         }
       }
-      Video.pool[key] = video;
-    } else if (src && src !== "undefined" && video.src !== src) {
-      try {
-        const parsedSrc = new URL(src, window.location.origin);
-        if (parsedSrc.pathname.endsWith(".m3u8")) {
-          const hls = new Hls();
-          hls.loadSource(src);
-          hls.attachMedia(video);
-        } else {
-          video.src = src;
-        }
-      } catch (error) {
-        video.src = src;
-      }
-      delete Video.pool[key];
-      const newKey = `${this.key}/${src}`;
-      Video.pool[newKey] = video;
     }
     if (!src || src === "undefined") {
       DependencyContext8.collectPromise(
@@ -10403,6 +10459,11 @@ var Video = class extends Media {
     );
   }
 };
+/**
+ * Static pool of video elements cached by source URL.
+ * Multiple Video components with the same src will share the same HTMLVideoElement
+ * to avoid duplicate network requests and improve performance.
+ */
 Video.pool = {};
 Video.imageCommunication = !import.meta.hot ? null : new ImageCommunication();
 __decorateClass([
@@ -10453,6 +10514,7 @@ function jsx(type, config, key) {
 // src/lib/scenes/Scene2D.ts
 import {
   GeneratorScene,
+  PlaybackState as PlaybackState5,
   SceneRenderEvent,
   Vector2 as Vector224,
   transformVectorAsPoint as transformVectorAsPoint10,
@@ -10570,8 +10632,26 @@ var Scene2D = class extends GeneratorScene {
     }
   }
   getMediaAssets() {
-    const playingVideos = Array.from(this.registeredNodes.values()).filter((node) => node instanceof Video).filter((video) => video.isPlaying());
-    const playingAudios = Array.from(this.registeredNodes.values()).filter((node) => node instanceof Audio).filter((audio) => audio.isPlaying());
+    const playbackState = this.playback.state;
+    const isRendering = playbackState === PlaybackState5.Rendering;
+    const allVideos = Array.from(this.registeredNodes.values()).filter((node) => node instanceof Video);
+    const allAudios = Array.from(this.registeredNodes.values()).filter((node) => node instanceof Audio);
+    if (isRendering) {
+      allVideos.forEach((video) => {
+        const src = video.src();
+        if (src && src !== "undefined" && !video.isPlaying()) {
+          video.playing(true);
+        }
+      });
+      allAudios.forEach((audio) => {
+        const src = audio.src();
+        if (src && src !== "undefined" && !audio.isPlaying()) {
+          audio.playing(true);
+        }
+      });
+    }
+    const playingVideos = allVideos.filter((video) => video.isPlaying());
+    const playingAudios = allAudios.filter((audio) => audio.isPlaying());
     const returnObjects = [];
     returnObjects.push(
       ...playingVideos.map((vid) => ({