@sangwonl/pocato-core 0.4.4 → 0.4.6

package/dist/index.js

@@ -367,6 +367,7 @@ function bootstrapShaders() {
 // src/renderer/texture-loader.ts
 import * as THREE2 from "three";
 var VIDEO_EXTENSIONS = /\.(mp4|webm|mov|ogg)(\?|$)/i;
+var VIDEO_LOAD_TIMEOUT_MS = 15e3;
 function isVideoSource(layer) {
   if (layer.type) return layer.type === "video";
   return VIDEO_EXTENSIONS.test(layer.src);
@@ -457,24 +458,71 @@ function loadVideoTexture(layer, onError) {
     video.style.zIndex = "-9999";
     document.body.appendChild(video);
     pendingVideos.add(video);
+    let settled = false;
+    const timeoutId = globalThis.setTimeout(() => {
+      if (settled) return;
+      settled = true;
+      pendingVideos.delete(video);
+      video.src = "";
+      video.remove();
+      onError?.(new Error(`Timed out loading video texture: ${layer.src}`));
+      resolve({ texture: getTransparentTexture() });
+    }, VIDEO_LOAD_TIMEOUT_MS);
     video.addEventListener("error", () => {
+      if (settled) return;
+      settled = true;
+      globalThis.clearTimeout(timeoutId);
       pendingVideos.delete(video);
       const msg = video.error?.message ?? "Unknown video error";
       onError?.(new Error(`Failed to load video texture: ${layer.src} (${msg})`));
       video.remove();
       resolve({ texture: getTransparentTexture() });
     }, { once: true });
-    video.src = layer.src;
-    video.play().then(() => {
-      pendingVideos.delete(video);
-      const texture = new THREE2.VideoTexture(video);
-      resolve({ texture, videoEl: video });
-    }).catch(() => {
+    const resolveWithFrame = () => {
+      if (settled) return;
+      settled = true;
+      globalThis.clearTimeout(timeoutId);
+      video.pause();
       pendingVideos.delete(video);
-      onError?.(new Error(`Video autoplay blocked: ${layer.src}`));
-      video.remove();
-      resolve({ texture: getTransparentTexture() });
-    });
+      const canvas = document.createElement("canvas");
+      canvas.width = video.videoWidth || 1;
+      canvas.height = video.videoHeight || 1;
+      const ctx = canvas.getContext("2d");
+      let posterTexture = getTransparentTexture();
+      if (ctx) {
+        try {
+          ctx.drawImage(video, 0, 0);
+          posterTexture = new THREE2.CanvasTexture(canvas);
+          posterTexture.needsUpdate = true;
+        } catch (error) {
+          debugLog("video poster drawImage failed", {
+            src: layer.src,
+            error: error instanceof Error ? error.message : String(error)
+          });
+          onError?.(error instanceof Error ? error : new Error(String(error)));
+        }
+      }
+      const liveTexture = new THREE2.VideoTexture(video);
+      resolve({
+        texture: posterTexture,
+        liveTexture,
+        videoEl: video,
+        play: () => {
+          video.play().catch(() => {
+            onError?.(new Error(`Video autoplay blocked: ${layer.src}`));
+          });
+        }
+      });
+    };
+    video.addEventListener("loadeddata", () => {
+      if ("requestVideoFrameCallback" in video) {
+        video.requestVideoFrameCallback(() => resolveWithFrame());
+        return;
+      }
+      window.setTimeout(resolveWithFrame, 0);
+    }, { once: true });
+    video.src = layer.src;
+    video.load();
   });
 }
 function loadFrozenVideoTexture(layer, freezeTime, onError) {
@@ -641,6 +689,9 @@ function disposeLoadedLayer(loaded) {
   if (loaded.texture !== getTransparentTexture()) {
     loaded.texture.dispose();
   }
+  if (loaded.liveTexture && loaded.liveTexture !== loaded.texture && loaded.liveTexture !== getTransparentTexture()) {
+    loaded.liveTexture.dispose();
+  }
 }
 function cleanupPendingVideos() {
   for (const video of pendingVideos) {
@@ -2046,6 +2097,15 @@ var FaceRenderer = class {
   updateResolution(width, height) {
     this.material.uniforms.uResolution.value.set(width, height);
   }
+  playLoadedVideos() {
+    for (let i = 0; i < this.loadedLayers.length; i++) {
+      const loaded = this.loadedLayers[i];
+      if (loaded.liveTexture) {
+        this.material.uniforms[`uLayer${i}`].value = loaded.liveTexture;
+      }
+      loaded.play?.();
+    }
+  }
   updateShader(fragmentShader) {
     this.material.fragmentShader = resolveIncludes(fragmentShader);
     this.material.needsUpdate = true;
@@ -2082,11 +2142,12 @@ function toThreeUniformValue(value) {
 
 // src/renderer/index.ts
 var Renderer = class {
-  constructor(container, options, onError, onReady) {
+  constructor(container, options, onError, onReady, onFirstFrame) {
     this.container = container;
     this.options = options;
     this.onError = onError;
     this.onReady = onReady;
+    this.onFirstFrame = onFirstFrame;
     this.backFace = null;
     this.frontRenderer = null;
     this.backRenderer = null;
@@ -2097,6 +2158,9 @@ var Renderer = class {
     this.intersectionObserver = null;
     this.visible = false;
     this.destroyed = false;
+    this.layersReady = false;
+    this.firstFrameEmitted = false;
+    this.firstFrameScheduled = false;
     if (!options.front?.layers?.length) {
       console.warn("[pocato] front.layers must have at least 1 element");
     }
@@ -2253,11 +2317,23 @@ var Renderer = class {
     }
     await Promise.all(promises);
     if (this.destroyed) return;
+    this.layersReady = true;
+    this.onReady?.();
+  }
+  scheduleFirstFrame() {
+    if (!this.layersReady || this.firstFrameEmitted || this.firstFrameScheduled) return;
+    this.firstFrameScheduled = true;
     requestAnimationFrame(() => {
-      if (this.destroyed) return;
+      if (this.destroyed || this.firstFrameEmitted) return;
+      this.firstFrameEmitted = true;
       this.cardEl.classList.remove("pocato-loading");
       this.cardEl.classList.add("pocato-ready");
-      this.onReady?.();
+      this.onFirstFrame?.();
+      requestAnimationFrame(() => {
+        if (this.destroyed) return;
+        this.frontFace.playLoadedVideos();
+        this.backFace?.playLoadedVideos();
+      });
     });
   }
   injectStyles() {
@@ -2429,6 +2505,7 @@ var Renderer = class {
         this.backFace.material.uniforms.uTime.value += delta;
         this.backRenderer.render(this.backFace.scene, this.backFace.camera);
       }
+      this.scheduleFirstFrame();
     };
     this.rafId = requestAnimationFrame(animate);
   }
@@ -3117,7 +3194,8 @@ var PocaCard = class extends EventEmitter {
         preventTouchScroll: options.preventTouchScroll
       },
       (error) => this.emit("error", error),
-      () => this.emit("ready")
+      () => this.emit("ready"),
+      () => this.emit("firstFrame")
     );
     this.interaction = new InteractionHandler(
       this.renderer.getRotatorEl(),