@sangwonl/pocato-core 0.4.13 → 0.4.15

package/dist/index.js

@@ -368,7 +368,6 @@ function bootstrapShaders() {
 import * as THREE2 from "three";
 var VIDEO_EXTENSIONS = /\.(mp4|webm|mov|ogg)(\?|$)/i;
 var VIDEO_LOAD_TIMEOUT_MS = 15e3;
-var VIDEO_FRAME_CAPTURE_TIMEOUT_MS = 750;
 function isVideoSource(layer) {
   if (layer.type) return layer.type === "video";
   return VIDEO_EXTENSIONS.test(layer.src);
@@ -459,9 +458,13 @@ function loadVideoTexture(layer, options) {
     const video = document.createElement("video");
     video.crossOrigin = "anonymous";
     video.muted = true;
+    video.autoplay = true;
     video.loop = layer.loop ?? true;
     applyVideoPlaybackOptions(video, layer);
     video.playsInline = true;
+    video.setAttribute("muted", "");
+    video.setAttribute("playsinline", "");
+    video.setAttribute("webkit-playsinline", "");
     video.preload = "auto";
     video.style.position = "fixed";
     video.style.width = "1px";
@@ -503,7 +506,6 @@ function loadVideoTexture(layer, options) {
     }, { once: true });
     const resolveWithFrame = () => {
       if (settled) return;
-      video.pause();
       const canvas = document.createElement("canvas");
       canvas.width = video.videoWidth || 1;
       canvas.height = video.videoHeight || 1;
@@ -523,49 +525,29 @@ function loadVideoTexture(layer, options) {
         }
       }
       const liveTexture = new THREE2.VideoTexture(video);
+      const play = () => {
+        const playPromise = video.play();
+        playPromise.catch((error) => {
+          const message = error instanceof Error ? error.message : String(error);
+          debugLog("video play rejected", { src: layer.src, error: message });
+          onError?.(new Error(`Video autoplay blocked: ${layer.src} (${message})`));
+        });
+      };
+      play();
       finish({
         texture: posterTexture,
         liveTexture,
         videoEl: video,
-        play: () => {
-          video.play().catch(() => {
-            onError?.(new Error(`Video autoplay blocked: ${layer.src}`));
-          });
-        }
+        play
       });
     };
     video.addEventListener("loadeddata", () => {
-      waitForDecodedVideoFrame(video, signal).then(() => {
-        resolveWithFrame();
-      });
+      resolveWithFrame();
     }, { once: true });
     video.src = layer.src;
     video.load();
   });
 }
-function waitForDecodedVideoFrame(video, signal) {
-  return new Promise((resolve) => {
-    if (signal?.aborted || !("requestVideoFrameCallback" in video)) {
-      resolve();
-      return;
-    }
-    let settled = false;
-    let frameId = null;
-    const finish = () => {
-      if (settled) return;
-      settled = true;
-      globalThis.clearTimeout(timeoutId);
-      if (frameId != null && "cancelVideoFrameCallback" in video) {
-        video.cancelVideoFrameCallback(frameId);
-      }
-      signal?.removeEventListener("abort", finish);
-      resolve();
-    };
-    const timeoutId = globalThis.setTimeout(finish, VIDEO_FRAME_CAPTURE_TIMEOUT_MS);
-    signal?.addEventListener("abort", finish, { once: true });
-    frameId = video.requestVideoFrameCallback(finish);
-  });
-}
 function loadFrozenVideoTexture(layer, freezeTime, options) {
   return new Promise((resolve) => {
     const { onError, signal } = options;
@@ -2056,7 +2038,6 @@ var FRAG_SHADERS = {
   lenticular: lenticular_frag_default
 };
 var MAX_LAYERS = 8;
-var VIDEO_FRAME_WAIT_TIMEOUT_MS = 750;
 var FaceRenderer = class {
   constructor(shader, width, height, effectUniforms) {
     this.loadedLayers = [];
@@ -2158,24 +2139,15 @@ var FaceRenderer = class {
   }
   async playLoadedVideos() {
     const activationVersion = ++this.videoActivationVersion;
-    this.videoActivationAbort?.abort();
-    const activationAbort = new AbortController();
-    this.videoActivationAbort = activationAbort;
     await Promise.all(this.loadedLayers.map(async (loaded, i) => {
-      if (this.destroyed || activationAbort.signal.aborted || activationVersion !== this.videoActivationVersion) return;
+      if (this.destroyed || activationVersion !== this.videoActivationVersion) return;
       if (!loaded.liveTexture) {
         loaded.play?.();
         return;
       }
+      this.material.uniforms[`uLayer${i}`].value = loaded.liveTexture;
       loaded.play?.();
-      const hasFrame = await waitForVideoFrame(loaded.videoEl, activationAbort.signal);
-      if (hasFrame && !this.destroyed && !activationAbort.signal.aborted && activationVersion === this.videoActivationVersion) {
-        this.material.uniforms[`uLayer${i}`].value = loaded.liveTexture;
-      }
     }));
-    if (this.videoActivationAbort === activationAbort) {
-      this.videoActivationAbort = null;
-    }
   }
   updateShader(fragmentShader) {
     this.material.fragmentShader = resolveIncludes(fragmentShader);
@@ -2205,39 +2177,6 @@ var FaceRenderer = class {
     this.material.dispose();
   }
 };
-function waitForVideoFrame(video, signal) {
-  return new Promise((resolve) => {
-    if (signal?.aborted) {
-      resolve(false);
-      return;
-    }
-    let settled = false;
-    let timeoutId = null;
-    let videoFrameId = null;
-    const finish = (hasFrame) => {
-      if (settled) return;
-      settled = true;
-      if (timeoutId != null) globalThis.clearTimeout(timeoutId);
-      if (video && videoFrameId != null && "cancelVideoFrameCallback" in video) {
-        video.cancelVideoFrameCallback(videoFrameId);
-      }
-      signal?.removeEventListener("abort", abort);
-      resolve(hasFrame);
-    };
-    const abort = () => finish(false);
-    if (video && "requestVideoFrameCallback" in video) {
-      timeoutId = globalThis.setTimeout(() => finish(false), VIDEO_FRAME_WAIT_TIMEOUT_MS);
-      signal?.addEventListener("abort", abort, { once: true });
-      videoFrameId = video.requestVideoFrameCallback(() => finish(true));
-      return;
-    }
-    const rafId2 = requestAnimationFrame(() => finish(true));
-    signal?.addEventListener("abort", () => {
-      cancelAnimationFrame(rafId2);
-      finish(false);
-    }, { once: true });
-  });
-}
 function toThreeUniformValue(value) {
   if (typeof value === "string") {
     return value.startsWith("#") ? new THREE3.Color(value) : value;
@@ -2251,6 +2190,7 @@ function toThreeUniformValue(value) {
 }
 
 // src/renderer/index.ts
+var READY_REVEAL_TRANSITION_MS = 500;
 var Renderer = class {
   constructor(container, options, onError, onReady, onFirstFrame) {
     this.container = container;
@@ -2273,6 +2213,7 @@ var Renderer = class {
     this.firstFrameScheduled = false;
     this.mediaActivated = false;
     this.mediaActivationPromise = null;
+    this.readyRevealTimeoutId = null;
     if (!options.front?.layers?.length) {
       console.warn("[pocato] front.layers must have at least 1 element");
     }
@@ -2432,6 +2373,19 @@ var Renderer = class {
     this.layersReady = true;
     this.onReady?.();
   }
+  resetReadyState() {
+    this.layersReady = false;
+    this.firstFrameEmitted = false;
+    this.firstFrameScheduled = false;
+    this.mediaActivated = false;
+    this.mediaActivationPromise = null;
+    if (this.readyRevealTimeoutId != null) {
+      window.clearTimeout(this.readyRevealTimeoutId);
+      this.readyRevealTimeoutId = null;
+    }
+    this.cardEl.classList.add("pocato-loading");
+    this.cardEl.classList.remove("pocato-ready");
+  }
   scheduleFirstFrame() {
     if (!this.layersReady || this.firstFrameEmitted || this.firstFrameScheduled) return;
     if (!this.mediaActivated) {
@@ -2447,10 +2401,14 @@ var Renderer = class {
     if (this.mediaActivationPromise) return;
     requestAnimationFrame(() => {
       if (this.destroyed || this.firstFrameEmitted) return;
-      this.firstFrameEmitted = true;
       this.cardEl.classList.remove("pocato-loading");
       this.cardEl.classList.add("pocato-ready");
-      this.onFirstFrame?.();
+      this.readyRevealTimeoutId = window.setTimeout(() => {
+        this.readyRevealTimeoutId = null;
+        if (this.destroyed || this.firstFrameEmitted) return;
+        this.firstFrameEmitted = true;
+        this.onFirstFrame?.();
+      }, READY_REVEAL_TRANSITION_MS);
     });
     this.firstFrameScheduled = true;
   }
@@ -2692,6 +2650,7 @@ var Renderer = class {
     face.updateResolution(canvas.width, canvas.height);
   }
   async updateLayers(frontLayers, backLayers) {
+    this.resetReadyState();
     const promises = [];
     if (frontLayers) {
       promises.push(this.frontFace.loadLayers(frontLayers, this.onError));
@@ -2700,6 +2659,9 @@ var Renderer = class {
       promises.push(this.backFace.loadLayers(backLayers, this.onError));
     }
     await Promise.all(promises);
+    if (this.destroyed) return;
+    this.layersReady = true;
+    this.onReady?.();
   }
   getRotatorEl() {
     return this.rotatorEl;
@@ -2713,6 +2675,10 @@ var Renderer = class {
   destroy() {
     this.destroyed = true;
     this.stopRenderLoop();
+    if (this.readyRevealTimeoutId != null) {
+      window.clearTimeout(this.readyRevealTimeoutId);
+      this.readyRevealTimeoutId = null;
+    }
     this.resizeObserver?.disconnect();
     this.intersectionObserver?.disconnect();
     this.frontFace.destroy();