@twick/2d 0.15.15 → 0.15.17

package/dist/index.d.cts

@@ -86,8 +86,18 @@ declare abstract class Media extends Rect {
     protected abstract mediaElement(): HTMLMediaElement;
     protected abstract seekedMedia(): HTMLMediaElement;
     protected abstract fastSeekedMedia(): HTMLMediaElement;
+    /**
+     * Sync the underlying media element to the given time (e.g. draw/playback time).
+     * When `time` is passed (e.g. from Scene2D.draw), that value is used so sync
+     * does not depend on the node's time signal (which may only update on projectData change).
+     * When omitted, falls back to this.time().
+     * Uses skipCollectPromise so we don't leave a promise in DependencyContext.
+     */
+    syncToCurrentTime(time?: number): void;
     protected abstract draw(context: CanvasRenderingContext2D): Promise<void>;
-    protected setCurrentTime(value: number): void;
+    protected setCurrentTime(value: number, options?: {
+        skipCollectPromise?: boolean;
+    }): void;
     setVolume(volume: number): void;
     protected amplify(node: HTMLMediaElement, volume: number): void;
     protected setPlaybackRate(playbackRate: number): void;
@@ -2528,6 +2538,11 @@ declare class Scene2D extends GeneratorScene<View2D> implements Inspectable {
     getNode(key: any): Node | null;
     getDetachedNodes(): Generator<Node, void, unknown>;
     getMediaAssets(): Array<AssetInfo>;
+    /**
+     * Seek all registered Media nodes to the current playback time.
+     * Passes draw time (playback.time) so media sync does not depend on node time signal.
+     */
+    private syncAllMediaToCurrentTime;
     stopAllMedia(): void;
     adjustVolume(volumeScale: number): void;
     protected recreateView(): void;

package/dist/index.d.ts

@@ -86,8 +86,18 @@ declare abstract class Media extends Rect {
     protected abstract mediaElement(): HTMLMediaElement;
     protected abstract seekedMedia(): HTMLMediaElement;
     protected abstract fastSeekedMedia(): HTMLMediaElement;
+    /**
+     * Sync the underlying media element to the given time (e.g. draw/playback time).
+     * When `time` is passed (e.g. from Scene2D.draw), that value is used so sync
+     * does not depend on the node's time signal (which may only update on projectData change).
+     * When omitted, falls back to this.time().
+     * Uses skipCollectPromise so we don't leave a promise in DependencyContext.
+     */
+    syncToCurrentTime(time?: number): void;
     protected abstract draw(context: CanvasRenderingContext2D): Promise<void>;
-    protected setCurrentTime(value: number): void;
+    protected setCurrentTime(value: number, options?: {
+        skipCollectPromise?: boolean;
+    }): void;
     setVolume(volume: number): void;
     protected amplify(node: HTMLMediaElement, volume: number): void;
     protected setPlaybackRate(playbackRate: number): void;
@@ -2528,6 +2538,11 @@ declare class Scene2D extends GeneratorScene<View2D> implements Inspectable {
     getNode(key: any): Node | null;
     getDetachedNodes(): Generator<Node, void, unknown>;
     getMediaAssets(): Array<AssetInfo>;
+    /**
+     * Seek all registered Media nodes to the current playback time.
+     * Passes draw time (playback.time) so media sync does not depend on node time signal.
+     */
+    private syncAllMediaToCurrentTime;
     stopAllMedia(): void;
     adjustVolume(volumeScale: number): void;
     protected recreateView(): void;

package/dist/index.js

@@ -5402,7 +5402,7 @@ var Media = class extends Rect {
     this.lastTime = -1;
     this.isSchedulingPlay = false;
     if (!this.awaitCanPlay()) {
-      this.scheduleSeek(this.time());
+      setTimeout(() => this.scheduleSeek(this.time()), 0);
     }
     if (props.play) {
       this.play();
@@ -5447,13 +5447,35 @@ 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).
+   * When `time` is passed (e.g. from Scene2D.draw), that value is used so sync
+   * does not depend on the node's time signal (which may only update on projectData change).
+   * When omitted, falls back to this.time().
+   * Uses skipCollectPromise so we don't leave a promise in DependencyContext.
+   */
+  syncToCurrentTime(time) {
+    const syncTime = time ?? this.time();
+    this.setCurrentTime(syncTime, { skipCollectPromise: true });
+  }
+  setCurrentTime(value, options) {
     try {
       const media = this.mediaElement();
-      if (media.readyState < 2) return;
+      const key = this.key ?? "media";
+      if (media.readyState < 2) {
+        this.lastTime = value;
+        this.time(value);
+        this.waitForCanPlay(media, () => {
+          media.currentTime = value;
+          this.lastTime = value;
+          this.time(value);
+        });
+        return;
+      }
       media.currentTime = value;
       this.lastTime = value;
-      if (media.seeking) {
+      this.time(value);
+      if (media.seeking && !options?.skipCollectPromise) {
         DependencyContext4.collectPromise(
           new Promise((resolve) => {
             const listener = () => {
@@ -5466,6 +5488,7 @@ var Media = class extends Rect {
       }
     } catch (error) {
       this.lastTime = value;
+      this.time(value);
     }
   }
   setVolume(volume) {
@@ -10397,11 +10420,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) {
         DependencyContext8.collectPromise(video.play());
@@ -10411,10 +10436,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;
   }
@@ -10641,6 +10667,9 @@ var Scene2D = class extends GeneratorScene {
     context.save();
     this.renderLifecycle.dispatch([SceneRenderEvent.BeginRender, context]);
     this.getView().playbackState(this.playback.state).globalTime(this.playback.time).fps(this.playback.fps);
+    if (this.playback.state === PlaybackState5.Paused) {
+      this.syncAllMediaToCurrentTime();
+    }
     await this.getView().render(context);
     this.renderLifecycle.dispatch([SceneRenderEvent.FinishRender, context]);
     context.restore();
@@ -10771,6 +10800,26 @@ var Scene2D = class extends GeneratorScene {
     );
     return returnObjects;
   }
+  /**
+   * Seek all registered Media nodes to the current playback time.
+   * Passes draw time (playback.time) so media sync does not depend on node time signal.
+   */
+  syncAllMediaToCurrentTime() {
+    const drawTime = this.playback.time;
+    const mediaNodes = Array.from(this.registeredNodes.values()).filter(
+      (node) => node instanceof Media
+    );
+    for (const media of mediaNodes) {
+      try {
+        media.syncToCurrentTime(drawTime);
+      } catch (e) {
+        this.logger.warn({
+          message: `syncAllMediaToCurrentTime: skipped node ${media.key ?? "unknown"}`,
+          object: e
+        });
+      }
+    }
+  }
   stopAllMedia() {
     const playingMedia = Array.from(this.registeredNodes.values()).filter((node) => node instanceof Media).filter((video) => video.isPlaying());
     for (const media of playingMedia) {