@twick/2d 0.15.0 → 0.15.2

package/dist/index.cjs

@@ -5670,8 +5670,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);
@@ -5690,7 +5690,6 @@ var Media = class extends Rect {
     return this.awaitCanPlay() || this.view().playbackState() === import_core32.PlaybackState.Rendering;
   }
   play() {
-    console.log("=== Media.play() called ===");
     this.playing(true);
     this.schedulePlay();
   }
@@ -5742,12 +5741,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 !== import_core32.PlaybackState.Rendering) {
+                this.playing(false);
+              }
             });
           }
         }
@@ -5757,33 +5758,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 !== import_core32.PlaybackState.Rendering) {
+            this.playing(false);
+          }
         });
       }
-    } else {
-      console.log("Media is already playing");
     }
     const start = timeFunction();
     const offset = media.currentTime;
@@ -5817,11 +5809,13 @@ var Media = class extends Rect {
   }
   autoPlayBasedOnTwick() {
     const playbackState = this.view().playbackState();
-    if ((playbackState === import_core32.PlaybackState.Playing || playbackState === import_core32.PlaybackState.Presenting) && !this.playing()) {
-      console.log("Auto-starting media playback via play() method");
+    const shouldBePlaying = playbackState === import_core32.PlaybackState.Playing || playbackState === import_core32.PlaybackState.Presenting || playbackState === import_core32.PlaybackState.Rendering;
+    if (shouldBePlaying && !this.playing()) {
+      if (playbackState === import_core32.PlaybackState.Rendering) {
+        this.playing(true);
+      }
       this.play();
-    } else if (playbackState === import_core32.PlaybackState.Paused && this.playing()) {
-      console.log("Auto-pausing media playback via pause() method");
+    } else if (!shouldBePlaying && this.playing()) {
       this.pause();
     }
   }
@@ -10169,6 +10163,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 import_hls.default();
+          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 import_hls.default();
+                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) {
@@ -10189,44 +10234,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 import_hls.default();
-            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 import_hls.default();
+              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 import_hls.default();
-          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") {
       import_core59.DependencyContext.collectPromise(
@@ -10445,6 +10501,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_meta3.hot ? null : new ImageCommunication();
 __decorateClass([
@@ -10607,8 +10668,26 @@ var Scene2D = class extends import_core60.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 === import_core60.PlaybackState.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) => ({