@sangwonl/pocato-core 0.4.3 → 0.4.5

package/dist/index.d.ts

@@ -11,6 +11,9 @@ interface LayerSource {
     src: string;
     type?: 'image' | 'video';
     freeze?: number | 'random';
+    freezeSeed?: number;
+    loop?: boolean;
+    playbackRate?: number;
 }
 type EffectUniformValue = string | number | boolean | [number, number] | [number, number, number] | [number, number, number, number];
 interface FaceFrameOptions {

package/dist/index.js

@@ -381,12 +381,38 @@ function getTransparentTexture() {
   return transparentTexture;
 }
 var pendingVideos = /* @__PURE__ */ new Set();
+function debugLog(message, data) {
+  try {
+    if (globalThis.localStorage?.getItem("pocatoDebug") === "1") {
+      console.warn(`[pocato] ${message}`, data ?? {});
+    }
+  } catch {
+  }
+}
+function applyVideoPlaybackOptions(video, layer) {
+  const playbackRate = layer.playbackRate ?? 1;
+  video.defaultPlaybackRate = playbackRate;
+  video.playbackRate = playbackRate;
+}
+function getRandomValue(seed) {
+  if (seed == null || !Number.isFinite(seed)) return Math.random();
+  return Math.abs(seed) % 1;
+}
+function getFreezeTargetTime(freezeTime, duration, seed) {
+  if (freezeTime < 0) {
+    return getRandomValue(seed) * (Number.isFinite(duration) ? duration : 1);
+  }
+  return Number.isFinite(duration) ? Math.min(freezeTime, duration) : freezeTime;
+}
+function isAtTargetTime(video, targetTime) {
+  return Math.abs(video.currentTime - targetTime) < 0.05;
+}
 function loadLayerTexture(layer, onError) {
   if (isVideoSource(layer)) {
     if (layer.freeze != null) {
-      return loadFrozenVideoTexture(layer.src, layer.freeze === "random" ? -1 : layer.freeze, onError);
+      return loadFrozenVideoTexture(layer, layer.freeze === "random" ? -1 : layer.freeze, onError);
     }
-    return loadVideoTexture(layer.src, onError);
+    return loadVideoTexture(layer, onError);
   }
   return loadImageTexture(layer.src, onError);
 }
@@ -414,12 +440,13 @@ function loadImageTexture(src, onError) {
   }
   return pending.then((texture) => ({ texture }));
 }
-function loadVideoTexture(src, onError) {
+function loadVideoTexture(layer, onError) {
   return new Promise((resolve) => {
     const video = document.createElement("video");
-    video.src = src;
+    video.crossOrigin = "anonymous";
     video.muted = true;
-    video.loop = true;
+    video.loop = layer.loop ?? true;
+    applyVideoPlaybackOptions(video, layer);
     video.playsInline = true;
     video.preload = "auto";
     video.style.position = "fixed";
@@ -430,30 +457,47 @@ function loadVideoTexture(src, onError) {
     video.style.zIndex = "-9999";
     document.body.appendChild(video);
     pendingVideos.add(video);
+    let settled = false;
     video.addEventListener("error", () => {
+      if (settled) return;
+      settled = true;
       pendingVideos.delete(video);
       const msg = video.error?.message ?? "Unknown video error";
-      onError?.(new Error(`Failed to load video texture: ${src} (${msg})`));
+      onError?.(new Error(`Failed to load video texture: ${layer.src} (${msg})`));
       video.remove();
       resolve({ texture: getTransparentTexture() });
     }, { once: true });
-    video.play().then(() => {
+    video.addEventListener("loadeddata", () => {
+      if (settled) return;
+      settled = true;
+      video.pause();
       pendingVideos.delete(video);
       const texture = new THREE2.VideoTexture(video);
-      resolve({ texture, videoEl: video });
-    }).catch(() => {
-      pendingVideos.delete(video);
-      onError?.(new Error(`Video autoplay blocked: ${src}`));
-      video.remove();
-      resolve({ texture: getTransparentTexture() });
-    });
+      resolve({
+        texture,
+        videoEl: video,
+        play: () => {
+          video.play().catch(() => {
+            onError?.(new Error(`Video autoplay blocked: ${layer.src}`));
+          });
+        }
+      });
+    }, { once: true });
+    video.src = layer.src;
+    video.load();
   });
 }
-function loadFrozenVideoTexture(src, freezeTime, onError) {
+function loadFrozenVideoTexture(layer, freezeTime, onError) {
   return new Promise((resolve) => {
+    debugLog("freeze load start", {
+      src: layer.src,
+      freezeTime,
+      freezeSeed: layer.freezeSeed
+    });
     const video = document.createElement("video");
-    video.src = src;
+    video.crossOrigin = "anonymous";
     video.muted = true;
+    applyVideoPlaybackOptions(video, layer);
     video.playsInline = true;
     video.preload = "auto";
     video.style.position = "fixed";
@@ -464,31 +508,137 @@ function loadFrozenVideoTexture(src, freezeTime, onError) {
     video.style.zIndex = "-9999";
     document.body.appendChild(video);
     pendingVideos.add(video);
-    video.addEventListener("error", () => {
-      pendingVideos.delete(video);
-      const msg = video.error?.message ?? "Unknown video error";
-      onError?.(new Error(`Failed to load video texture: ${src} (${msg})`));
-      video.remove();
-      resolve({ texture: getTransparentTexture() });
-    }, { once: true });
-    video.addEventListener("loadeddata", () => {
-      const time = freezeTime < 0 ? Math.random() * (video.duration || 1) : Math.min(freezeTime, video.duration || 0);
-      video.currentTime = time;
-    }, { once: true });
-    video.addEventListener("seeked", () => {
+    let settled = false;
+    let targetTime = 0;
+    let retrySeekRegistered = false;
+    const captureFrame = () => {
+      if (settled) return;
+      settled = true;
+      video.pause();
+      debugLog("freeze capture frame", {
+        src: layer.src,
+        currentTime: video.currentTime,
+        duration: video.duration,
+        readyState: video.readyState,
+        videoWidth: video.videoWidth,
+        videoHeight: video.videoHeight
+      });
       const canvas = document.createElement("canvas");
-      canvas.width = video.videoWidth;
-      canvas.height = video.videoHeight;
+      canvas.width = video.videoWidth || 1;
+      canvas.height = video.videoHeight || 1;
       const ctx = canvas.getContext("2d");
-      ctx.drawImage(video, 0, 0);
+      if (!ctx) {
+        pendingVideos.delete(video);
+        video.src = "";
+        video.remove();
+        resolve({ texture: getTransparentTexture() });
+        return;
+      }
+      try {
+        ctx.drawImage(video, 0, 0);
+      } catch (error) {
+        debugLog("freeze drawImage failed", {
+          src: layer.src,
+          error: error instanceof Error ? error.message : String(error)
+        });
+        pendingVideos.delete(video);
+        video.src = "";
+        video.remove();
+        onError?.(error instanceof Error ? error : new Error(String(error)));
+        resolve({ texture: getTransparentTexture() });
+        return;
+      }
       const texture = new THREE2.CanvasTexture(canvas);
       texture.needsUpdate = true;
+      debugLog("freeze canvas texture ready", {
+        src: layer.src,
+        width: canvas.width,
+        height: canvas.height
+      });
       pendingVideos.delete(video);
-      video.pause();
       video.src = "";
       video.remove();
       resolve({ texture });
+    };
+    const captureReadyFrame = () => {
+      debugLog("freeze wait decoded frame", {
+        src: layer.src,
+        currentTime: video.currentTime,
+        readyState: video.readyState
+      });
+      if ("requestVideoFrameCallback" in video) {
+        video.requestVideoFrameCallback(() => captureFrame());
+      }
+      const playPromise = video.play();
+      playPromise.catch(() => {
+        debugLog("freeze play rejected, fallback capture", { src: layer.src });
+        window.setTimeout(captureFrame, 0);
+      });
+      if (!("requestVideoFrameCallback" in video)) {
+        window.setTimeout(captureFrame, 0);
+      }
+    };
+    const retrySeekWhenReady = () => {
+      if (settled) return;
+      if (retrySeekRegistered) return;
+      retrySeekRegistered = true;
+      const retry = () => {
+        retrySeekRegistered = false;
+        if (settled) return;
+        debugLog("freeze retry seek", {
+          src: layer.src,
+          targetTime,
+          currentTime: video.currentTime,
+          duration: video.duration,
+          readyState: video.readyState
+        });
+        video.currentTime = targetTime;
+      };
+      video.addEventListener("durationchange", retry, { once: true });
+      video.addEventListener("canplay", retry, { once: true });
+      video.addEventListener("loadeddata", retry, { once: true });
+    };
+    video.addEventListener("error", () => {
+      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.addEventListener("loadedmetadata", () => {
+      const time = getFreezeTargetTime(freezeTime, video.duration, layer.freezeSeed);
+      targetTime = time;
+      debugLog("freeze metadata loaded", {
+        src: layer.src,
+        targetTime: time,
+        duration: video.duration,
+        readyState: video.readyState
+      });
+      if (isAtTargetTime(video, time)) {
+        if (video.readyState >= 2) {
+          captureReadyFrame();
+        } else {
+          video.addEventListener("loadeddata", () => captureReadyFrame(), { once: true });
+        }
+        return;
+      }
+      video.currentTime = time;
+    }, { once: true });
+    video.addEventListener("seeked", () => {
+      debugLog("freeze seeked", {
+        src: layer.src,
+        targetTime,
+        currentTime: video.currentTime,
+        duration: video.duration,
+        readyState: video.readyState
+      });
+      if (!isAtTargetTime(video, targetTime)) {
+        retrySeekWhenReady();
+        return;
+      }
+      captureReadyFrame();
+    });
+    video.src = layer.src;
     video.load();
   });
 }
@@ -1823,6 +1973,7 @@ var MAX_LAYERS = 8;
 var FaceRenderer = class {
   constructor(shader, width, height, effectUniforms) {
     this.loadedLayers = [];
+    this.layerLoadVersion = 0;
     bootstrapShaders();
     this.scene = new THREE3.Scene();
     this.camera = new THREE3.Camera();
@@ -1872,6 +2023,7 @@ var FaceRenderer = class {
     }
   }
   async loadLayers(layers, onError) {
+    const version = ++this.layerLoadVersion;
     this.disposeLayers();
     const count = Math.min(layers.length, MAX_LAYERS);
     this.material.uniforms.uLayerCount.value = count;
@@ -1879,6 +2031,12 @@ var FaceRenderer = class {
       (layer) => loadLayerTexture(layer, onError)
     );
     const results = await Promise.all(promises);
+    if (version !== this.layerLoadVersion) {
+      for (const loaded of results) {
+        disposeLoadedLayer(loaded);
+      }
+      return;
+    }
     this.loadedLayers = results;
     for (let i = 0; i < results.length; i++) {
       this.material.uniforms[`uLayer${i}`].value = results[i].texture;
@@ -1898,6 +2056,11 @@ var FaceRenderer = class {
   updateResolution(width, height) {
     this.material.uniforms.uResolution.value.set(width, height);
   }
+  playLoadedVideos() {
+    for (const loaded of this.loadedLayers) {
+      loaded.play?.();
+    }
+  }
   updateShader(fragmentShader) {
     this.material.fragmentShader = resolveIncludes(fragmentShader);
     this.material.needsUpdate = true;
@@ -1914,6 +2077,7 @@ var FaceRenderer = class {
     this.material.uniforms.uLayerCount.value = 0;
   }
   destroy() {
+    this.layerLoadVersion++;
     this.disposeLayers();
     this.mesh.geometry.dispose();
     this.material.dispose();
@@ -1933,11 +2097,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;
@@ -1948,6 +2113,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");
     }
@@ -2018,10 +2186,10 @@ var Renderer = class {
     this.loadAllLayers();
     this.setupResizeObserver();
     this.setupIntersectionObserver();
-    requestAnimationFrame(() => {
-      this.cardEl.classList.remove("pocato-loading");
-      this.cardEl.classList.add("pocato-ready");
-    });
+  }
+  disposeWebGLRenderer(renderer) {
+    renderer.forceContextLoss();
+    renderer.dispose();
   }
   createFrontRenderer() {
     if (this.frontRenderer) return;
@@ -2052,7 +2220,7 @@ var Renderer = class {
   disposeFrontRenderer() {
     if (!this.frontRenderer) return;
     this.frontRenderer.render(this.frontFace.scene, this.frontFace.camera);
-    this.frontRenderer.dispose();
+    this.disposeWebGLRenderer(this.frontRenderer);
     this.frontRenderer = null;
   }
   disposeBackRenderer() {
@@ -2060,7 +2228,7 @@ var Renderer = class {
     if (this.backFace) {
       this.backRenderer.render(this.backFace.scene, this.backFace.camera);
     }
-    this.backRenderer.dispose();
+    this.disposeWebGLRenderer(this.backRenderer);
     this.backRenderer = null;
   }
   activate() {
@@ -2103,8 +2271,26 @@ var Renderer = class {
       promises.push(this.backFace.loadLayers(this.options.back.layers, this.onError));
     }
     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 || this.firstFrameEmitted) return;
+      this.firstFrameEmitted = true;
+      this.cardEl.classList.remove("pocato-loading");
+      this.cardEl.classList.add("pocato-ready");
+      this.onFirstFrame?.();
+      requestAnimationFrame(() => {
+        if (this.destroyed) return;
+        this.frontFace.playLoadedVideos();
+        this.backFace?.playLoadedVideos();
+      });
+    });
+  }
   injectStyles() {
     const id = "pocato-styles";
     if (document.getElementById(id)) return;
@@ -2274,6 +2460,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);
   }
@@ -2367,10 +2554,16 @@ var Renderer = class {
     this.intersectionObserver?.disconnect();
     cleanupPendingVideos();
     this.frontFace.destroy();
-    this.frontRenderer?.dispose();
+    if (this.frontRenderer) {
+      this.disposeWebGLRenderer(this.frontRenderer);
+      this.frontRenderer = null;
+    }
     if (this.backFace) {
       this.backFace.destroy();
-      this.backRenderer?.dispose();
+      if (this.backRenderer) {
+        this.disposeWebGLRenderer(this.backRenderer);
+        this.backRenderer = null;
+      }
     }
     if (this.cardEl.parentNode) {
       this.cardEl.parentNode.removeChild(this.cardEl);
@@ -2956,7 +3149,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(),