@twick/2d 0.12.0 → 0.13.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@twick/2d",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "A 2D renderer for twick",
   "author": "twick",
   "homepage": "https://re.video/",
-  "bugs": "https://github.com/havenhq/twick/issues",
+  "bugs": "https://github.com/ncounterspecialist/twick-base/issues",
   "license": "MIT",
   "main": "lib/index.js",
   "types": "./lib/index.d.ts",
@@ -19,7 +19,7 @@
   "sideEffects": false,
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/havenhq/twick.git"
+    "url": "git+https://github.com/ncounterspecialist/twick-base.git"
   },
   "files": [
     "lib",
@@ -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.12.0",
+    "@twick/ui": "^0.13.0",
     "clsx": "^2.0.0",
     "jsdom": "^22.1.0",
     "preact": "^10.19.2",
@@ -42,12 +42,11 @@
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
     "@rive-app/canvas-advanced": "2.7.3",
-    "@twick/core": "^0.12.0",
+    "@twick/core": "^0.13.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": "59f38f4e7d3a9a30943bbad830dc0201eaa57ce7"
+  }
 }

package/src/lib/components/Audio.ts

@@ -26,13 +26,47 @@ export class Audio extends Media {
   @computed()
   protected audio(): HTMLAudioElement {
     const src = this.src();
-    const key = `${this.key}/${src}`;
+    
+    // Use a temporary key for undefined src to avoid conflicts
+    const key = `${this.key}/${src || 'pending'}`;
+    
     let audio = Audio.pool[key];
     if (!audio) {
       audio = document.createElement('audio');
       audio.crossOrigin = 'anonymous';
-      audio.src = src;
+      
+      // 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();
+        }),
+      );
     }
 
     const weNeedToWait = this.waitForCanPlayNecessary(audio);
@@ -116,6 +150,9 @@ 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

@@ -3,7 +3,7 @@ import {
   DependencyContext,
   PlaybackState,
   clamp,
-  isReactive, 
+  isReactive,
   useLogger,
   useThread,
 } from '@twick/core';
@@ -48,6 +48,7 @@ video.playbackRate(mySignal());
 
 @nodeName('Media')
 export abstract class Media extends Rect {
+  @initial('')
   @signal()
   public declare readonly src: SimpleSignal<string, this>;
 
@@ -89,9 +90,11 @@ 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());
     }
@@ -100,9 +103,12 @@ export abstract class Media extends Rect {
       this.play();
     }
     this.volume = props.volume ?? 1;
-    this.setVolume(this.volume);
+    // Only set volume immediately if media is ready
+    if (!this.awaitCanPlay()) {
+      this.setVolume(this.volume);
+    }
   }
-
+  
   public isPlaying(): boolean {
     return this.playing();
   }
@@ -112,10 +118,15 @@ export abstract class Media extends Rect {
   }
 
   public getDuration(): number {
-    const mElement = this.mediaElement();
-    const isVideo = (mElement instanceof HTMLVideoElement);
-    const isAudio = (mElement instanceof HTMLVideoElement);
-    return (this.isIOS() && (isVideo || isAudio)) ? 2 /** dummy duration for iOS */ :  this.mediaElement().duration;    
+    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;
+    }
   }
 
   public getVolume(): number {
@@ -123,11 +134,18 @@ export abstract class Media extends Rect {
   }
 
   public getUrl(): string {
-    return this.mediaElement().src;
+    try {
+      return this.mediaElement().src;
+    } catch (error) {
+      // If media element is not ready yet, return the src signal value
+      return this.src();
+    }
   }
 
   public override dispose() {
-    this.pause();
+    // Set playing state to false without trying to access media element
+    this.playing(false);
+    this.time.save();
     this.remove();
     super.dispose();
   }
@@ -148,21 +166,26 @@ export abstract class Media extends Rect {
   ): Promise<void>;
 
   protected setCurrentTime(value: number) {
-    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);
-        }),
-      );
+    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;
     }
   }
 
@@ -172,17 +195,26 @@ export abstract class Media extends Rect {
         `volumes cannot be negative - the value will be clamped to 0.`,
       );
     }
-    const media = this.mediaElement();
-    media.volume = Math.min(Math.max(volume, 0), 1);
-
-    if (volume > 1) {
-      if (this.allowVolumeAmplificationInPreview()) {
-        this.amplify(media, volume);
-        return;
+    
+    // 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.`,
+        );
       }
-      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.`,
-      );
+    } catch (error) {
+      // If media element is not ready yet, just store the volume
+      // It will be applied when the media becomes available via collectAsyncResources
     }
   }
 
@@ -245,12 +277,22 @@ export abstract class Media extends Rect {
   }
 
   protected scheduleSeek(time: number) {
-    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;
-    });
+    // 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);
   }
 
   /**
@@ -261,23 +303,32 @@ export abstract class Media extends Rect {
    * @returns
    */
   protected waitForCanPlay(media: HTMLMediaElement, onCanPlay: () => void) {
-    if (media.readyState >= 2) {
+    // Be more strict - require readyState >= 3 (HAVE_FUTURE_DATA) for better reliability
+    if (media.readyState >= 3) {
       onCanPlay();
       return;
     }
-
+    
     const onCanPlayWrapper = () => {
       onCanPlay();
       media.removeEventListener('canplay', onCanPlayWrapper);
+      media.removeEventListener('canplaythrough', onCanPlayWrapper);
     };
 
     const onError = () => {
       const reason = this.getErrorReason(media.error?.code);
-      console.error(`ERROR: Error loading video: ${this.src()}, ${reason}`);
+      const srcValue = this.src();
+      
+      console.log(`ERROR: Error loading video: src="${srcValue}", ${reason}`);
+      console.log(`Media element src: "${media.src}"`);
       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);
   }
 
@@ -295,42 +346,167 @@ export abstract class Media extends Rect {
     );
   }
 
-  public pause() {
-    const media = this.mediaElement();
+  public play() {
+    console.log('=== Media.play() called ===');
+    // Set the playing state first
+    this.playing(true);
     
-    this.playing(false);
-    this.time.save();
-    media.pause();
+    // Schedule the actual play operation for when media is ready
+    this.schedulePlay();
   }
-
-  public play() {
-    const media = this.mediaElement();
+  
+  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();
     
-    // Start playing the media element
-    const playPromise = media.play();
-    if (playPromise !== undefined) {
-      playPromise.catch(error => {
-        console.warn('Error playing media:', error);
-        this.playing(false);
-      });
+    // 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');
     }
     
-    this.playing(true);
-    
-    // Update time based on thread time
-    const time = useThread().time;
-    const start = time();
+    // Set up time synchronization
+    const start = timeFunction();
     const offset = media.currentTime;
     
+    // Update time signal
     this.time(() => {
-      const newTime = this.clampTime(offset + (time() - start) * this.playbackRate());
+      const newTime = this.clampTime(offset + (timeFunction() - start) * this.playbackRate());
       return newTime;
     });
   }
 
+  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);
+  }
+
   public clampTime(time: number): number {
     const duration = this.getDuration();
     if (this.loop()) {
@@ -342,6 +518,27 @@ 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) {

package/src/lib/components/Video.ts

@@ -107,25 +107,77 @@ export class Video extends Media {
   @computed()
   private video(): HTMLVideoElement {
     const src = this.src();
-    const key = `${this.key}/${src}`;
+    
+    // Use a temporary key for undefined src to avoid conflicts
+    const key = `${this.key}/${src || 'pending'}`;
+    
     let video = Video.pool[key];
     if (!video) {
       video = document.createElement('video');
       video.crossOrigin = 'anonymous';
 
-      const parsedSrc = new URL(src, window.location.origin);
-      if (parsedSrc.pathname.endsWith('.m3u8')) {
-        const hls = new Hls();
-        hls.loadSource(src);
-        hls.attachMedia(video);
-      } else {
-        video.src = src;
+      // Only set src if it's valid, otherwise leave it empty
+      if (src && src !== 'undefined') {
+        try {
+          const parsedSrc = new URL(src, window.location.origin);
+          
+          if (parsedSrc.pathname.endsWith('.m3u8')) {
+            const hls = new Hls();
+            hls.loadSource(src);
+            hls.attachMedia(video);
+          } else {
+            video.src = src;
+          }
+        } catch (error) {
+          // Fallback to direct assignment
+          video.src = src;
+        }
       }
 
       Video.pool[key] = video;
+    } else if (src && src !== 'undefined' && video.src !== src) {
+      // Update existing video element if src has changed and is now valid
+      try {
+        const parsedSrc = new URL(src, window.location.origin);
+        
+        if (parsedSrc.pathname.endsWith('.m3u8')) {
+          const hls = new Hls();
+          hls.loadSource(src);
+          hls.attachMedia(video);
+        } else {
+          video.src = src;
+        }
+      } catch (error) {
+        // Fallback to direct assignment
+        video.src = src;
+      }
+      
+      // Move video to correct pool key
+      delete Video.pool[key];
+      const newKey = `${this.key}/${src}`;
+      Video.pool[newKey] = video;
+    }
+
+    // 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();
+        }),
+      );
     }
 
     const weNeedToWait = this.waitForCanPlayNecessary(video);
+    
     if (!weNeedToWait) {
       return video;
     }
@@ -172,6 +224,7 @@ export class Video extends Media {
 
     const playing =
       this.playing() && time < video.duration && video.playbackRate > 0;
+    
     if (playing) {
       if (video.paused) {
         DependencyContext.collectPromise(video.play());
@@ -283,6 +336,9 @@ export class Video extends Media {
   }
 
   protected override async draw(context: CanvasRenderingContext2D) {
+    // Auto-start playback if Revideo is playing but media isn't
+    this.autoPlayBasedOnRevideo();
+    
     this.drawShape(context);
     const alpha = this.alpha();
     if (alpha > 0) {
@@ -308,15 +364,23 @@ export class Video extends Media {
 
   protected override applyFlex() {
     super.applyFlex();
-    const video = this.video();
-    this.element.style.aspectRatio = (
-      this.ratio() ?? video.videoWidth / video.videoHeight
-    ).toString();
+    try {
+      const video = this.video();
+      // Only set aspect ratio if video element is available and has valid dimensions
+      if (video && video.videoWidth > 0 && video.videoHeight > 0) {
+        this.element.style.aspectRatio = (
+          this.ratio() ?? video.videoWidth / video.videoHeight
+        ).toString();
+      }
+    } catch (error) {
+      // If video element is not ready yet, skip setting aspect ratio
+      // It will be set later when the video becomes available
+    }
   }
 
   public override remove() {
     super.remove();
-    dropExtractor(this.key, this.video().src);
+    dropExtractor(this.key, this.src());
     return this;
   }