@sangwonl/pocato-core 0.4.10 → 0.4.11

package/dist/index.js

@@ -2028,6 +2028,9 @@ var FaceRenderer = class {
     this.loadedLayers = [];
     this.layerLoadVersion = 0;
     this.layerLoadAbort = null;
+    this.videoActivationVersion = 0;
+    this.videoActivationAbort = null;
+    this.destroyed = false;
     bootstrapShaders();
     this.scene = new THREE3.Scene();
     this.camera = new THREE3.Camera();
@@ -2078,6 +2081,9 @@ var FaceRenderer = class {
   }
   async loadLayers(layers, onError) {
     const version = ++this.layerLoadVersion;
+    this.videoActivationVersion++;
+    this.videoActivationAbort?.abort();
+    this.videoActivationAbort = null;
     this.layerLoadAbort?.abort();
     const abort = new AbortController();
     this.layerLoadAbort = abort;
@@ -2117,16 +2123,25 @@ var FaceRenderer = class {
     this.material.uniforms.uResolution.value.set(width, height);
   }
   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 (!loaded.liveTexture) {
         loaded.play?.();
         return;
       }
       loaded.play?.();
-      if (await waitForVideoFrame(loaded.videoEl)) {
+      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);
@@ -2144,7 +2159,11 @@ var FaceRenderer = class {
     this.material.uniforms.uLayerCount.value = 0;
   }
   destroy() {
+    this.destroyed = true;
     this.layerLoadVersion++;
+    this.videoActivationVersion++;
+    this.videoActivationAbort?.abort();
+    this.videoActivationAbort = null;
     this.layerLoadAbort?.abort();
     this.layerLoadAbort = null;
     this.disposeLayers();
@@ -2152,17 +2171,37 @@ var FaceRenderer = class {
     this.material.dispose();
   }
 };
-function waitForVideoFrame(video) {
+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) {
-      const timeoutId = globalThis.setTimeout(() => resolve(false), VIDEO_FRAME_WAIT_TIMEOUT_MS);
-      video.requestVideoFrameCallback(() => {
-        globalThis.clearTimeout(timeoutId);
-        resolve(true);
-      });
+      timeoutId = globalThis.setTimeout(() => finish(false), VIDEO_FRAME_WAIT_TIMEOUT_MS);
+      signal?.addEventListener("abort", abort, { once: true });
+      videoFrameId = video.requestVideoFrameCallback(() => finish(true));
       return;
     }
-    requestAnimationFrame(() => resolve(true));
+    const rafId2 = requestAnimationFrame(() => finish(true));
+    signal?.addEventListener("abort", () => {
+      cancelAnimationFrame(rafId2);
+      finish(false);
+    }, { once: true });
   });
 }
 function toThreeUniformValue(value) {