@twick/2d 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twick/2d",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "A 2D renderer for twick",
   "author": "twick",
   "homepage": "https://re.video/",
@@ -31,7 +31,7 @@
     "@preact/signals": "^1.2.1",
     "@rollup/plugin-node-resolve": "^15.2.4",
     "@rollup/plugin-typescript": "^12.1.0",
-    "@twick/ui": "^0.13.0",
+    "@twick/ui": "^0.14.0",
     "clsx": "^2.0.0",
     "jsdom": "^22.1.0",
     "preact": "^10.19.2",
@@ -42,11 +42,12 @@
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
     "@rive-app/canvas-advanced": "2.7.3",
-    "@twick/core": "^0.13.0",
+    "@twick/core": "^0.14.0",
     "code-fns": "^0.8.2",
     "hls.js": "^1.5.11",
     "mathjax-full": "^3.2.2",
     "mp4box": "^0.5.2",
     "parse-svg-path": "^0.1.2"
-  }
+  },
+  "gitHead": "54bd58bf80ea6afec48c27c061e6d455c1e0a885"
 }

package/src/lib/components/Audio.ts

@@ -26,47 +26,13 @@ export class Audio extends Media {
   @computed()
   protected audio(): HTMLAudioElement {
     const src = this.src();
-    
-    // Use a temporary key for undefined src to avoid conflicts
-    const key = `${this.key}/${src || 'pending'}`;
-    
+    const key = `${this.key}/${src}`;
     let audio = Audio.pool[key];
     if (!audio) {
       audio = document.createElement('audio');
       audio.crossOrigin = 'anonymous';
-      
-      // Only set src if it's valid, otherwise leave it empty
-      if (src && src !== 'undefined') {
-        audio.src = src;
-      }
-      
-      Audio.pool[key] = audio;
-    } else if (src && src !== 'undefined' && audio.src !== src) {
-      // Update existing audio element if src has changed and is now valid
       audio.src = src;
-      
-      // Move audio to correct pool key
-      delete Audio.pool[key];
-      const newKey = `${this.key}/${src}`;
-      Audio.pool[newKey] = audio;
-    }
-
-    // If src is still undefined, wait for it to become available
-    if (!src || src === 'undefined') {
-      DependencyContext.collectPromise(
-        new Promise<void>(resolve => {
-          // Check periodically for valid src
-          const checkSrc = () => {
-            const currentSrc = this.src();
-            if (currentSrc && currentSrc !== 'undefined') {
-              resolve();
-            } else {
-              setTimeout(checkSrc, 10);
-            }
-          };
-          checkSrc();
-        }),
-      );
+      Audio.pool[key] = audio;
     }
 
     const weNeedToWait = this.waitForCanPlayNecessary(audio);
@@ -150,9 +116,6 @@ export class Audio extends Media {
   }
 
   protected override async draw(context: CanvasRenderingContext2D) {
-    // Auto-start playback if Revideo is playing but media isn't
-    this.autoPlayBasedOnRevideo();
-    
     const playbackState = this.view().playbackState();
 
     playbackState === PlaybackState.Playing ||

package/src/lib/components/Media.ts

@@ -48,7 +48,6 @@ video.playbackRate(mySignal());
 
 @nodeName('Media')
 export abstract class Media extends Rect {
-  @initial('')
   @signal()
   public declare readonly src: SimpleSignal<string, this>;
 
@@ -90,11 +89,9 @@ export abstract class Media extends Rect {
     }
   > = {};
   protected lastTime = -1;
-  private isSchedulingPlay = false;
 
   public constructor(props: MediaProps) {
     super(props);
-    
     if (!this.awaitCanPlay()) {
       this.scheduleSeek(this.time());
     }
@@ -103,12 +100,9 @@ export abstract class Media extends Rect {
       this.play();
     }
     this.volume = props.volume ?? 1;
-    // Only set volume immediately if media is ready
-    if (!this.awaitCanPlay()) {
-      this.setVolume(this.volume);
-    }
+    this.setVolume(this.volume);
   }
-  
+
   public isPlaying(): boolean {
     return this.playing();
   }
@@ -118,15 +112,7 @@ export abstract class Media extends Rect {
   }
 
   public getDuration(): number {
-    try {
-      const mElement = this.mediaElement();
-      const isVideo = (mElement instanceof HTMLVideoElement);
-      const isAudio = (mElement instanceof HTMLAudioElement);
-      return (this.isIOS() && (isVideo || isAudio)) ? 2 /** dummy duration for iOS */ : mElement.duration;    
-    } catch (error) {
-      // If media element is not ready yet, return a default duration
-      return 0;
-    }
+    return this.mediaElement().duration;
   }
 
   public getVolume(): number {
@@ -134,18 +120,11 @@ export abstract class Media extends Rect {
   }
 
   public getUrl(): string {
-    try {
-      return this.mediaElement().src;
-    } catch (error) {
-      // If media element is not ready yet, return the src signal value
-      return this.src();
-    }
+    return this.mediaElement().src;
   }
 
   public override dispose() {
-    // Set playing state to false without trying to access media element
-    this.playing(false);
-    this.time.save();
+    this.pause();
     this.remove();
     super.dispose();
   }
@@ -166,26 +145,21 @@ export abstract class Media extends Rect {
   ): Promise<void>;
 
   protected setCurrentTime(value: number) {
-    try {
-      const media = this.mediaElement();
-      if (media.readyState < 2) return;
-
-      media.currentTime = value;
-      this.lastTime = value;
-      if (media.seeking) {
-        DependencyContext.collectPromise(
-          new Promise<void>(resolve => {
-            const listener = () => {
-              resolve();
-              media.removeEventListener('seeked', listener);
-            };
-            media.addEventListener('seeked', listener);
-          }),
-        );
-      }
-    } catch (error) {
-      // If media element is not ready yet, just update the lastTime
-      this.lastTime = value;
+    const media = this.mediaElement();
+    if (media.readyState < 2) return;
+
+    media.currentTime = value;
+    this.lastTime = value;
+    if (media.seeking) {
+      DependencyContext.collectPromise(
+        new Promise<void>(resolve => {
+          const listener = () => {
+            resolve();
+            media.removeEventListener('seeked', listener);
+          };
+          media.addEventListener('seeked', listener);
+        }),
+      );
     }
   }
 
@@ -195,26 +169,17 @@ export abstract class Media extends Rect {
         `volumes cannot be negative - the value will be clamped to 0.`,
       );
     }
-    
-    // Store the volume value
-    this.volume = volume;
-    
-    try {
-      const media = this.mediaElement();
-      media.volume = Math.min(Math.max(volume, 0), 1);
-
-      if (volume > 1) {
-        if (this.allowVolumeAmplificationInPreview()) {
-          this.amplify(media, volume);
-          return;
-        }
-        console.warn(
-          `you have set the volume of node ${this.key} to ${volume} - your video will be exported with the correct volume, but the browser does not support volumes higher than 1 by default. To enable volume amplification in the preview, set the "allowVolumeAmplificationInPreview" of your <Video/> or <Audio/> tag to true. Note that amplification for previews will not work if you use autoplay within the player due to browser autoplay policies: https://developer.chrome.com/blog/autoplay/#webaudio.`,
-        );
+    const media = this.mediaElement();
+    media.volume = Math.min(Math.max(volume, 0), 1);
+
+    if (volume > 1) {
+      if (this.allowVolumeAmplificationInPreview()) {
+        this.amplify(media, volume);
+        return;
       }
-    } catch (error) {
-      // If media element is not ready yet, just store the volume
-      // It will be applied when the media becomes available via collectAsyncResources
+      console.warn(
+        `you have set the volume of node ${this.key} to ${volume} - your video will be exported with the correct volume, but the browser does not support volumes higher than 1 by default. To enable volume amplification in the preview, set the "allowVolumeAmplificationInPreview" of your <Video/> or <Audio/> tag to true. Note that amplification for previews will not work if you use autoplay within the player due to browser autoplay policies: https://developer.chrome.com/blog/autoplay/#webaudio.`,
+      );
     }
   }
 
@@ -277,22 +242,12 @@ export abstract class Media extends Rect {
   }
 
   protected scheduleSeek(time: number) {
-    // Defer the media element access to avoid immediate async property access
-    setTimeout(() => {
-      try {
-        const media = this.mediaElement();
-        
-        // Use the existing waitForCanPlay method which handles readiness properly
-        this.waitForCanPlay(media, () => {
-          // Wait until the media is ready to seek again as
-          // setting the time before the video doesn't work reliably.
-          media.currentTime = time;
-        });
-      } catch (error) {
-        // If media element is not ready yet, retry after a longer delay
-        setTimeout(() => this.scheduleSeek(time), 50);
-      }
-    }, 0);
+    this.waitForCanPlay(this.mediaElement(), () => {
+      const media = this.mediaElement();
+      // Wait until the media is ready to seek again as
+      // setting the time before the video doesn't work reliably.
+      media.currentTime = time;
+    });
   }
 
   /**
@@ -303,32 +258,23 @@ export abstract class Media extends Rect {
    * @returns
    */
   protected waitForCanPlay(media: HTMLMediaElement, onCanPlay: () => void) {
-    // Be more strict - require readyState >= 3 (HAVE_FUTURE_DATA) for better reliability
-    if (media.readyState >= 3) {
+    if (media.readyState >= 2) {
       onCanPlay();
       return;
     }
-    
+
     const onCanPlayWrapper = () => {
       onCanPlay();
       media.removeEventListener('canplay', onCanPlayWrapper);
-      media.removeEventListener('canplaythrough', onCanPlayWrapper);
     };
 
     const onError = () => {
       const reason = this.getErrorReason(media.error?.code);
-      const srcValue = this.src();
-      
-      console.log(`ERROR: Error loading video: src="${srcValue}", ${reason}`);
-      console.log(`Media element src: "${media.src}"`);
+      console.log(`ERROR: Error loading video: ${this.src()}, ${reason}`);
       media.removeEventListener('error', onError);
-      media.removeEventListener('canplay', onCanPlayWrapper);
-      media.removeEventListener('canplaythrough', onCanPlayWrapper);
     };
 
-    // Listen for both canplay and canplaythrough events
     media.addEventListener('canplay', onCanPlayWrapper);
-    media.addEventListener('canplaythrough', onCanPlayWrapper);
     media.addEventListener('error', onError);
   }
 
@@ -347,164 +293,18 @@ export abstract class Media extends Rect {
   }
 
   public play() {
-    console.log('=== Media.play() called ===');
-    // Set the playing state first
+    const time = useThread().time;
+    const start = time();
+    const offset = this.time();
+    const playbackRate = this.playbackRate();
     this.playing(true);
-    
-    // Schedule the actual play operation for when media is ready
-    this.schedulePlay();
-  }
-  
-  protected schedulePlay() {
-    // Prevent recursive calls
-    if (this.isSchedulingPlay) {
-      return;
-    }
-    
-    this.isSchedulingPlay = true;
-    
-    // Check if thread context is available before accessing it
-    let timeFunction: (() => number) | null = null;
-    try {
-      const time = useThread().time;
-      timeFunction = time;
-    } catch (error) {
-      // Reset flag and use simple play without thread time
-      this.isSchedulingPlay = false;
-      this.simplePlay();
-      return;
-    }
-    
-    // We need to wait for the media to be ready before we can play it
-    // Use a setTimeout to defer the operation and avoid immediate async property access
-    setTimeout(() => {
-      // Check if we're still supposed to be playing (avoid race conditions)
-      const isPlaying = this.playing();
-      if (!isPlaying) {
-        this.isSchedulingPlay = false;
-        return;
-      }
-      
-      // Add another timeout to further defer media element access
-      setTimeout(() => {
-        try {
-          const media = this.mediaElement();
-          
-          // Always use waitForCanPlay to ensure media is ready
-          this.waitForCanPlay(media, () => {
-            // Double-check we're still playing before calling actuallyPlay
-            if (this.playing() && timeFunction) {
-              this.actuallyPlay(media, timeFunction);
-            }
-            // Reset the flag when done
-            this.isSchedulingPlay = false;
-          });
-        } catch (error) {
-          // Reset flag before retry
-          this.isSchedulingPlay = false;
-          // If media is not ready yet, retry after a longer delay
-          setTimeout(() => this.schedulePlay(), 100);
-        }
-      }, 10);
-    }, 0);
-  }
-  
-  private simplePlay() {
-    setTimeout(() => {
-      try {
-        const media = this.mediaElement();
-        
-        // Guard against undefined src
-        if (!media.src || media.src.includes('undefined')) {
-          return;
-        }
-        
-        if (media.paused && this.playing()) {
-          media.playbackRate = this.playbackRate();
-          const playPromise = media.play();
-          if (playPromise !== undefined) {
-            playPromise.then(() => {
-              console.log('Simple play started successfully');
-            }).catch(error => {
-              if (error.name !== 'AbortError') {
-                console.warn('Error in simple play:', error);
-              }
-              this.playing(false);
-            });
-          }
-        }
-      } catch (error) {
-        // Stop retries for errors
-        return;
-      }
-    }, 10);
-  }
-  
-  private actuallyPlay(media: HTMLMediaElement, timeFunction: () => number) {
-    console.log('=== actuallyPlay called ===');
-    console.log('Media element:', media);
-    console.log('Media src:', media.src);
-    console.log('Media paused:', media.paused);
-    console.log('Media readyState:', media.readyState);
-    
-    // Make sure we're still supposed to be playing
-    if (!this.playing()) {
-      console.log('Playing state is false, aborting actuallyPlay');
-      return;
-    }
-    
-    // Set playback rate on media element
-    media.playbackRate = this.playbackRate();
-    
-    // Ensure the media is ready to play
-    if (media.paused) {
-      console.log('Media is paused, calling play()');
-      // Start playing the media element
-      const playPromise = media.play();
-      if (playPromise !== undefined) {
-        playPromise.then(() => {
-          console.log('Media play() promise resolved - should be playing now');
-          console.log('Post-play media paused:', media.paused);
-          console.log('Post-play media currentTime:', media.currentTime);
-        }).catch(error => {
-          // Don't warn about AbortError - it's normal when play() is interrupted by pause()
-          if (error.name !== 'AbortError') {
-            console.warn('Error playing media:', error);
-          }
-          this.playing(false);
-        });
-      }
-    } else {
-      console.log('Media is already playing');
-    }
-    
-    // Set up time synchronization
-    const start = timeFunction();
-    const offset = media.currentTime;
-    
-    // Update time signal
-    this.time(() => {
-      const newTime = this.clampTime(offset + (timeFunction() - start) * this.playbackRate());
-      return newTime;
-    });
+    this.time(() => this.clampTime(offset + (time() - start) * playbackRate));
   }
 
   public pause() {
-    // Set the playing state first
     this.playing(false);
     this.time.save();
-    
-    // Try to pause the media element if it's available
-    // Use setTimeout to defer access and avoid async property issues
-    setTimeout(() => {
-      try {
-        const media = this.mediaElement();
-        media.pause();
-      } catch (error) {
-        // If media element is not ready yet, just update the state
-        // The media won't be playing anyway if it's not ready
-      }
-    }, 0);
+    this.mediaElement().pause();
   }
 
   public clampTime(time: number): number {
@@ -518,27 +318,6 @@ export abstract class Media extends Rect {
   protected override collectAsyncResources() {
     super.collectAsyncResources();
     this.seekedMedia();
-    // Ensure volume is set when media becomes available
-    this.setVolume(this.volume);
-  }
-
-  protected autoPlayBasedOnRevideo() {
-    // Auto-start/stop playback based on Revideo's playback state
-    const playbackState = this.view().playbackState();
-    // console.log('autoPlayBasedOnRevideo called:', {
-    //   playbackState,
-    //   currentlyPlaying: this.playing(),
-    //   shouldAutoPlay: (playbackState === PlaybackState.Playing || playbackState === PlaybackState.Presenting) && !this.playing(),
-    //   shouldAutoPause: playbackState === PlaybackState.Paused && this.playing()
-    // });
-    
-    if ((playbackState === PlaybackState.Playing || playbackState === PlaybackState.Presenting) && !this.playing()) {
-      console.log('Auto-starting media playback via play() method');
-      this.play(); // Call the full play() method instead of just setting playing(true)
-    } else if (playbackState === PlaybackState.Paused && this.playing()) {
-      console.log('Auto-pausing media playback via pause() method');
-      this.pause(); // Call the full pause() method
-    }
   }
 
   protected getErrorReason(errCode?: number) {
@@ -564,13 +343,4 @@ export abstract class Media extends Rect {
 
     return reason;
   }
-
-  // Helper method to check if running on iOS
-  protected isIOS(): boolean {
-    if (typeof navigator === 'undefined') return false;
-    const isIos = /iPad|iPhone|iPod/.test(navigator.userAgent) || 
-           (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
-
-    return isIos;
-  }
 }