@sangwonl/pocato-core 0.4.9 → 0.4.11

package/dist/index.js

@@ -2022,11 +2022,15 @@ 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 = [];
     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();
@@ -2077,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;
@@ -2115,13 +2122,25 @@ 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;
+  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?.();
+      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) {
@@ -2140,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();
@@ -2148,6 +2171,39 @@ 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;
@@ -2182,6 +2238,7 @@ var Renderer = class {
     this.firstFrameEmitted = false;
     this.firstFrameScheduled = false;
     this.mediaActivated = false;
+    this.mediaActivationPromise = null;
     if (!options.front?.layers?.length) {
       console.warn("[pocato] front.layers must have at least 1 element");
     }
@@ -2345,10 +2402,15 @@ var Renderer = class {
     if (!this.layersReady || this.firstFrameEmitted || this.firstFrameScheduled) return;
     if (!this.mediaActivated) {
       this.mediaActivated = true;
-      this.frontFace.playLoadedVideos();
-      this.backFace?.playLoadedVideos();
+      this.mediaActivationPromise = Promise.all([
+        this.frontFace.playLoadedVideos(),
+        this.backFace?.playLoadedVideos() ?? Promise.resolve()
+      ]).then(() => {
+        this.mediaActivationPromise = null;
+      });
       return;
     }
+    if (this.mediaActivationPromise) return;
     requestAnimationFrame(() => {
       if (this.destroyed || this.firstFrameEmitted) return;
       this.firstFrameEmitted = true;