@revideo/2d 0.5.5 → 0.5.6-alpha.1066

package/src/lib/components/Audio.ts

@@ -8,6 +8,10 @@ export class Audio extends Media {
 
   public constructor(props: MediaProps) {
     super(props);
+
+    if (!this.awaitCanPlay()) {
+      this.scheduleSeek(this.time());
+    }
   }
 
   protected mediaElement(): HTMLAudioElement {
@@ -34,22 +38,27 @@ export class Audio extends Media {
       Audio.pool[key] = audio;
     }
     if (audio.readyState < 2) {
-      DependencyContext.collectPromise(
-        new Promise<void>(resolve => {
-          const onCanPlay = () => {
-            resolve();
-            audio.removeEventListener('canplay', onCanPlay);
-          };
-
-          const onError = () => {
-            const reason = this.getErrorReason(audio.error?.code);
-            console.log(`ERROR: Error loading audio: ${src}, ${reason}`);
-          };
-
-          audio.addEventListener('canplay', onCanPlay);
-          audio.addEventListener('error', onError);
-        }),
-      );
+      if (
+        this.awaitCanPlay() ||
+        this.view().playbackState() === PlaybackState.Rendering
+      ) {
+        DependencyContext.collectPromise(
+          new Promise<void>(resolve => {
+            const onCanPlay = () => {
+              resolve();
+              audio.removeEventListener('canplay', onCanPlay);
+            };
+
+            const onError = () => {
+              const reason = this.getErrorReason(audio.error?.code);
+              console.log(`ERROR: Error loading audio: ${src}, ${reason}`);
+            };
+
+            audio.addEventListener('canplay', onCanPlay);
+            audio.addEventListener('error', onError);
+          }),
+        );
+      }
     }
 
     return audio;

package/src/lib/components/Media.ts

@@ -19,6 +19,7 @@ export interface MediaProps extends RectProps {
   volume?: number;
   time?: SignalValue<number>;
   play?: boolean;
+  awaitCanPlay?: SignalValue<boolean>;
 }
 
 @nodeName('Media')
@@ -39,6 +40,10 @@ export abstract class Media extends Asset {
   @signal()
   protected declare readonly playing: SimpleSignal<boolean, this>;
 
+  @initial(true)
+  @signal()
+  protected declare readonly awaitCanPlay: SimpleSignal<boolean, this>;
+
   protected readonly volume: number = 1;
 
   protected lastTime = -1;
@@ -148,6 +153,25 @@ export abstract class Media extends Asset {
     }
   }
 
+  protected scheduleSeek(time: number) {
+    const media = this.mediaElement();
+    const onCanPlay = () => {
+      media.removeEventListener('canplay', onCanPlay);
+      media.currentTime = time;
+      const listener = () => {
+        media.removeEventListener('seeked', listener);
+      };
+      media.addEventListener('seeked', listener);
+    };
+    const onError = () => {
+      const reason = this.getErrorReason(media.error?.code);
+      console.log(`ERROR: Error loading video: ${this.src()}, ${reason}`);
+    };
+
+    media.addEventListener('canplay', onCanPlay);
+    media.addEventListener('error', onError);
+  }
+
   public play() {
     const time = useThread().time;
     const start = time();

package/src/lib/components/Video.ts

@@ -83,6 +83,10 @@ export class Video extends Media {
 
   public constructor(props: VideoProps) {
     super(props);
+
+    if (!this.awaitCanPlay()) {
+      this.scheduleSeek(this.time());
+    }
   }
 
   protected override desiredSize(): SerializedVector2<DesiredLength> {
@@ -131,22 +135,27 @@ export class Video extends Media {
     }
 
     if (video.readyState < 2) {
-      DependencyContext.collectPromise(
-        new Promise<void>(resolve => {
-          const onCanPlay = () => {
-            resolve();
-            video.removeEventListener('canplay', onCanPlay);
-          };
-
-          const onError = () => {
-            const reason = this.getErrorReason(video.error?.code);
-            console.log(`ERROR: Error loading video: ${src}, ${reason}`);
-          };
-
-          video.addEventListener('canplay', onCanPlay);
-          video.addEventListener('error', onError);
-        }),
-      );
+      if (
+        this.awaitCanPlay() ||
+        this.view().playbackState() === PlaybackState.Rendering
+      ) {
+        DependencyContext.collectPromise(
+          new Promise<void>(resolve => {
+            const onCanPlay = () => {
+              resolve();
+              video.removeEventListener('canplay', onCanPlay);
+            };
+
+            const onError = () => {
+              const reason = this.getErrorReason(video.error?.code);
+              console.log(`ERROR: Error loading video: ${src}, ${reason}`);
+            };
+
+            video.addEventListener('canplay', onCanPlay);
+            video.addEventListener('error', onError);
+          }),
+        );
+      }
     }
 
     return video;