@sangwonl/pocato-core 0.4.7 → 0.4.9

package/dist/index.js

@@ -381,7 +381,6 @@ function getTransparentTexture() {
   }
   return transparentTexture;
 }
-var pendingVideos = /* @__PURE__ */ new Set();
 function debugLog(message, data) {
   try {
     if (globalThis.localStorage?.getItem("pocatoDebug") === "1") {
@@ -408,14 +407,14 @@ function getFreezeTargetTime(freezeTime, duration, seed) {
 function isAtTargetTime(video, targetTime) {
   return Math.abs(video.currentTime - targetTime) < 0.05;
 }
-function loadLayerTexture(layer, onError) {
+function loadLayerTexture(layer, options = {}) {
   if (isVideoSource(layer)) {
     if (layer.freeze != null) {
-      return loadFrozenVideoTexture(layer, layer.freeze === "random" ? -1 : layer.freeze, onError);
+      return loadFrozenVideoTexture(layer, layer.freeze === "random" ? -1 : layer.freeze, options);
     }
-    return loadVideoTexture(layer, onError);
+    return loadVideoTexture(layer, options);
   }
-  return loadImageTexture(layer.src, onError);
+  return loadImageTexture(layer.src, options.onError);
 }
 var inflight = /* @__PURE__ */ new Map();
 function loadImageTexture(src, onError) {
@@ -441,8 +440,13 @@ function loadImageTexture(src, onError) {
   }
   return pending.then((texture) => ({ texture }));
 }
-function loadVideoTexture(layer, onError) {
+function loadVideoTexture(layer, options) {
   return new Promise((resolve) => {
+    const { onError, signal } = options;
+    if (signal?.aborted) {
+      resolve({ texture: getTransparentTexture() });
+      return;
+    }
     const video = document.createElement("video");
     video.crossOrigin = "anonymous";
     video.muted = true;
@@ -457,33 +461,40 @@ function loadVideoTexture(layer, onError) {
     video.style.pointerEvents = "none";
     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);
+    const cleanupVideo = () => {
+      video.pause();
       video.src = "";
       video.remove();
+    };
+    const finish = (loaded) => {
+      if (settled) return;
+      settled = true;
+      globalThis.clearTimeout(timeoutId);
+      signal?.removeEventListener("abort", abort);
+      resolve(loaded);
+    };
+    const abort = () => {
+      cleanupVideo();
+      finish({ texture: getTransparentTexture() });
+    };
+    const timeoutId = globalThis.setTimeout(() => {
+      if (settled) return;
+      cleanupVideo();
       onError?.(new Error(`Timed out loading video texture: ${layer.src}`));
-      resolve({ texture: getTransparentTexture() });
+      finish({ texture: getTransparentTexture() });
     }, VIDEO_LOAD_TIMEOUT_MS);
+    signal?.addEventListener("abort", abort, { once: true });
     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() });
+      cleanupVideo();
+      finish({ texture: getTransparentTexture() });
     }, { once: true });
     const resolveWithFrame = () => {
       if (settled) return;
-      settled = true;
-      globalThis.clearTimeout(timeoutId);
       video.pause();
-      pendingVideos.delete(video);
       const canvas = document.createElement("canvas");
       canvas.width = video.videoWidth || 1;
       canvas.height = video.videoHeight || 1;
@@ -503,7 +514,7 @@ function loadVideoTexture(layer, onError) {
         }
       }
       const liveTexture = new THREE2.VideoTexture(video);
-      resolve({
+      finish({
         texture: posterTexture,
         liveTexture,
         videoEl: video,
@@ -521,8 +532,13 @@ function loadVideoTexture(layer, onError) {
     video.load();
   });
 }
-function loadFrozenVideoTexture(layer, freezeTime, onError) {
+function loadFrozenVideoTexture(layer, freezeTime, options) {
   return new Promise((resolve) => {
+    const { onError, signal } = options;
+    if (signal?.aborted) {
+      resolve({ texture: getTransparentTexture() });
+      return;
+    }
     debugLog("freeze load start", {
       src: layer.src,
       freezeTime,
@@ -541,13 +557,27 @@ function loadFrozenVideoTexture(layer, freezeTime, onError) {
     video.style.pointerEvents = "none";
     video.style.zIndex = "-9999";
     document.body.appendChild(video);
-    pendingVideos.add(video);
     let settled = false;
     let targetTime = 0;
     let retrySeekRegistered = false;
-    const captureFrame = () => {
+    const cleanupVideo = () => {
+      video.pause();
+      video.src = "";
+      video.remove();
+    };
+    const finish = (loaded) => {
       if (settled) return;
       settled = true;
+      signal?.removeEventListener("abort", abort);
+      resolve(loaded);
+    };
+    const abort = () => {
+      cleanupVideo();
+      finish({ texture: getTransparentTexture() });
+    };
+    signal?.addEventListener("abort", abort, { once: true });
+    const captureFrame = () => {
+      if (settled) return;
       video.pause();
       debugLog("freeze capture frame", {
         src: layer.src,
@@ -562,10 +592,8 @@ function loadFrozenVideoTexture(layer, freezeTime, onError) {
       canvas.height = video.videoHeight || 1;
       const ctx = canvas.getContext("2d");
       if (!ctx) {
-        pendingVideos.delete(video);
-        video.src = "";
-        video.remove();
-        resolve({ texture: getTransparentTexture() });
+        cleanupVideo();
+        finish({ texture: getTransparentTexture() });
         return;
       }
       try {
@@ -575,11 +603,9 @@ function loadFrozenVideoTexture(layer, freezeTime, onError) {
           src: layer.src,
           error: error instanceof Error ? error.message : String(error)
         });
-        pendingVideos.delete(video);
-        video.src = "";
-        video.remove();
+        cleanupVideo();
         onError?.(error instanceof Error ? error : new Error(String(error)));
-        resolve({ texture: getTransparentTexture() });
+        finish({ texture: getTransparentTexture() });
         return;
       }
       const texture = new THREE2.CanvasTexture(canvas);
@@ -589,10 +615,8 @@ function loadFrozenVideoTexture(layer, freezeTime, onError) {
         width: canvas.width,
         height: canvas.height
       });
-      pendingVideos.delete(video);
-      video.src = "";
-      video.remove();
-      resolve({ texture });
+      cleanupVideo();
+      finish({ texture });
     };
     const captureReadyFrame = () => {
       debugLog("freeze wait decoded frame", {
@@ -633,11 +657,10 @@ function loadFrozenVideoTexture(layer, freezeTime, onError) {
       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() });
+      cleanupVideo();
+      finish({ texture: getTransparentTexture() });
     }, { once: true });
     video.addEventListener("loadedmetadata", () => {
       const time = getFreezeTargetTime(freezeTime, video.duration, layer.freezeSeed);
@@ -689,14 +712,6 @@ function disposeLoadedLayer(loaded) {
     loaded.liveTexture.dispose();
   }
 }
-function cleanupPendingVideos() {
-  for (const video of pendingVideos) {
-    video.pause();
-    video.src = "";
-    video.remove();
-  }
-  pendingVideos.clear();
-}
 
 // src/shaders/common.vert.ts
 var common_vert_default = glsl`
@@ -2011,6 +2026,7 @@ var FaceRenderer = class {
   constructor(shader, width, height, effectUniforms) {
     this.loadedLayers = [];
     this.layerLoadVersion = 0;
+    this.layerLoadAbort = null;
     bootstrapShaders();
     this.scene = new THREE3.Scene();
     this.camera = new THREE3.Camera();
@@ -2061,19 +2077,25 @@ var FaceRenderer = class {
   }
   async loadLayers(layers, onError) {
     const version = ++this.layerLoadVersion;
+    this.layerLoadAbort?.abort();
+    const abort = new AbortController();
+    this.layerLoadAbort = abort;
     this.disposeLayers();
     const count = Math.min(layers.length, MAX_LAYERS);
     this.material.uniforms.uLayerCount.value = count;
     const promises = layers.slice(0, MAX_LAYERS).map(
-      (layer) => loadLayerTexture(layer, onError)
+      (layer) => loadLayerTexture(layer, { onError, signal: abort.signal })
     );
     const results = await Promise.all(promises);
-    if (version !== this.layerLoadVersion) {
+    if (version !== this.layerLoadVersion || abort.signal.aborted) {
       for (const loaded of results) {
         disposeLoadedLayer(loaded);
       }
       return;
     }
+    if (this.layerLoadAbort === abort) {
+      this.layerLoadAbort = null;
+    }
     this.loadedLayers = results;
     for (let i = 0; i < results.length; i++) {
       this.material.uniforms[`uLayer${i}`].value = results[i].texture;
@@ -2119,6 +2141,8 @@ var FaceRenderer = class {
   }
   destroy() {
     this.layerLoadVersion++;
+    this.layerLoadAbort?.abort();
+    this.layerLoadAbort = null;
     this.disposeLayers();
     this.mesh.geometry.dispose();
     this.material.dispose();
@@ -2157,6 +2181,7 @@ var Renderer = class {
     this.layersReady = false;
     this.firstFrameEmitted = false;
     this.firstFrameScheduled = false;
+    this.mediaActivated = false;
     if (!options.front?.layers?.length) {
       console.warn("[pocato] front.layers must have at least 1 element");
     }
@@ -2318,19 +2343,20 @@ var Renderer = class {
   }
   scheduleFirstFrame() {
     if (!this.layersReady || this.firstFrameEmitted || this.firstFrameScheduled) return;
-    this.firstFrameScheduled = true;
+    if (!this.mediaActivated) {
+      this.mediaActivated = true;
+      this.frontFace.playLoadedVideos();
+      this.backFace?.playLoadedVideos();
+      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?.();
-      requestAnimationFrame(() => {
-        if (this.destroyed) return;
-        this.frontFace.playLoadedVideos();
-        this.backFace?.playLoadedVideos();
-      });
     });
+    this.firstFrameScheduled = true;
   }
   injectStyles() {
     const id = "pocato-styles";
@@ -2593,7 +2619,6 @@ var Renderer = class {
     this.stopRenderLoop();
     this.resizeObserver?.disconnect();
     this.intersectionObserver?.disconnect();
-    cleanupPendingVideos();
     this.frontFace.destroy();
     if (this.frontRenderer) {
       this.disposeWebGLRenderer(this.frontRenderer);