@twick/2d 0.15.16 → 0.15.18

package/dist/index.cjs

@@ -5502,13 +5502,17 @@ var Media = class extends Rect {
     super(props);
     this.lastTime = -1;
     this.isSchedulingPlay = false;
+    /** Used with clipStart for sync (trim offset in source). */
+    this.trimStart = 0;
     if (!this.awaitCanPlay()) {
-      this.scheduleSeek(this.time());
+      setTimeout(() => this.scheduleSeek(this.time()), 0);
     }
     if (props.play) {
       this.play();
     }
     this.volume = props.volume ?? 1;
+    this.clipStart = props.clipStart;
+    this.trimStart = props.trimStart ?? 0;
     if (!this.awaitCanPlay()) {
       this.setVolume(this.volume);
     }
@@ -5548,25 +5552,72 @@ var Media = class extends Rect {
   completion() {
     return this.clampTime(this.time()) / this.getDuration();
   }
-  setCurrentTime(value) {
+  /**
+   * Sync the underlying media element to the given time (e.g. draw/playback time).
+   * Used for both Video and Audio. When `time` is passed (e.g. from Scene2D.draw), that
+   * value is used so sync does not depend on the node's time signal.
+   * If this node has clipStart set, global time is converted to clip-relative time:
+   * syncTime = trimStart + (time - clipStart) * playbackRate.
+   * When omitted, falls back to this.time().
+   * When waitForSeek is true, returns a promise that resolves when the seek completes so
+   * the draw can wait and show the correct frame/sample when paused.
+   */
+  syncToCurrentTime(time, options) {
+    let syncTime;
+    if (time !== void 0 && this.clipStart !== void 0) {
+      syncTime = this.trimStart + (time - this.clipStart) * this.playbackRate();
+    } else {
+      syncTime = time ?? this.time();
+    }
+    const promise = this.setCurrentTime(syncTime, {
+      skipCollectPromise: options?.waitForSeek ?? true
+    });
+    if (options?.waitForSeek) {
+      return promise;
+    }
+  }
+  setCurrentTime(value, options) {
     try {
       const media = this.mediaElement();
-      if (media.readyState < 2) return;
-      media.currentTime = value;
-      this.lastTime = value;
-      if (media.seeking) {
-        import_core32.DependencyContext.collectPromise(
-          new Promise((resolve) => {
-            const listener = () => {
+      const key = this.key ?? "media";
+      if (media.readyState < 2) {
+        this.lastTime = value;
+        this.time(value);
+        return new Promise((resolve) => {
+          this.waitForCanPlay(media, () => {
+            media.currentTime = value;
+            this.lastTime = value;
+            this.time(value);
+            const onSeeked = () => {
+              media.removeEventListener("seeked", onSeeked);
               resolve();
-              media.removeEventListener("seeked", listener);
             };
-            media.addEventListener("seeked", listener);
-          })
-        );
+            if (media.seeking) {
+              media.addEventListener("seeked", onSeeked);
+            } else {
+              resolve();
+            }
+          });
+        });
+      }
+      media.currentTime = value;
+      this.lastTime = value;
+      this.time(value);
+      const seekPromise = media.seeking ? new Promise((resolve) => {
+        const listener = () => {
+          resolve();
+          media.removeEventListener("seeked", listener);
+        };
+        media.addEventListener("seeked", listener);
+      }) : Promise.resolve();
+      if (media.seeking && !options?.skipCollectPromise) {
+        import_core32.DependencyContext.collectPromise(seekPromise);
       }
+      return seekPromise;
     } catch (error) {
       this.lastTime = value;
+      this.time(value);
+      return Promise.resolve();
     }
   }
   setVolume(volume) {
@@ -10444,11 +10495,13 @@ var Video = class extends Media {
   fastSeekedVideo() {
     const video = this.video();
     const time = this.clampTime(this.time());
+    const playing = this.playing() && time < video.duration && video.playbackRate > 0;
+    const wouldResetToZero = time < 0.5 && video.currentTime > 1 && Math.abs(video.currentTime - this.lastTime) < 0.5;
+    const outOfSyncBig = Math.abs(video.currentTime - time) > 1;
     video.playbackRate = this.playbackRate();
     if (this.lastTime === time) {
       return video;
     }
-    const playing = this.playing() && time < video.duration && video.playbackRate > 0;
     if (playing) {
       if (video.paused) {
         import_core59.DependencyContext.collectPromise(video.play());
@@ -10458,10 +10511,11 @@ var Video = class extends Media {
         video.pause();
       }
     }
-    if (Math.abs(video.currentTime - time) > 1) {
+    if (wouldResetToZero) {
+    } else if (outOfSyncBig) {
       this.setCurrentTime(time);
     } else if (!playing) {
-      video.currentTime = time;
+      this.setCurrentTime(time);
     }
     return video;
   }
@@ -10702,6 +10756,9 @@ var Scene2D = class extends import_core60.GeneratorScene {
     context.save();
     this.renderLifecycle.dispatch([import_core60.SceneRenderEvent.BeginRender, context]);
     this.getView().playbackState(this.playback.state).globalTime(this.playback.time).fps(this.playback.fps);
+    if (this.playback.state === import_core60.PlaybackState.Paused) {
+      await this.syncAllMediaToCurrentTime(true);
+    }
     await this.getView().render(context);
     this.renderLifecycle.dispatch([import_core60.SceneRenderEvent.FinishRender, context]);
     context.restore();
@@ -10832,6 +10889,34 @@ var Scene2D = class extends import_core60.GeneratorScene {
     );
     return returnObjects;
   }
+  /**
+   * Seek all registered Media nodes (Video and Audio) to the current playback time.
+   * Passes draw time; nodes with clipStart convert it to clip-relative time.
+   * When waitForSeek is true, waits for each media seek to complete so the next draw shows the correct frame/sample.
+   */
+  async syncAllMediaToCurrentTime(waitForSeek) {
+    const drawTime = this.playback.time;
+    const mediaNodes = Array.from(this.registeredNodes.values()).filter(
+      (node) => node instanceof Media
+    );
+    const results = mediaNodes.map((media) => {
+      try {
+        return media.syncToCurrentTime(drawTime, { waitForSeek });
+      } catch (e) {
+        this.logger.warn({
+          message: `syncAllMediaToCurrentTime: skipped node ${media.key ?? "unknown"}`,
+          object: e
+        });
+        return void 0;
+      }
+    });
+    if (waitForSeek) {
+      const promises = results.filter(
+        (p) => p !== void 0
+      );
+      await Promise.all(promises);
+    }
+  }
   stopAllMedia() {
     const playingMedia = Array.from(this.registeredNodes.values()).filter((node) => node instanceof Media).filter((video) => video.isPlaying());
     for (const media of playingMedia) {