@twick/2d 0.12.0 → 0.14.0

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@twick/2d",
-  "version": "0.12.0",
+  "version": "0.14.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.14.0",
     "clsx": "^2.0.0",
     "jsdom": "^22.1.0",
     "preact": "^10.19.2",
@@ -42,12 +42,12 @@
     "@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.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": "59f38f4e7d3a9a30943bbad830dc0201eaa57ce7"
+  "gitHead": "54bd58bf80ea6afec48c27c061e6d455c1e0a885"
 }

package/src/lib/components/Media.ts

@@ -3,7 +3,7 @@ import {
   DependencyContext,
   PlaybackState,
   clamp,
-  isReactive, 
+  isReactive,
   useLogger,
   useThread,
 } from '@twick/core';
@@ -112,10 +112,7 @@ 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;    
+    return this.mediaElement().duration;
   }
 
   public getVolume(): number {
@@ -273,7 +270,7 @@ export abstract class Media extends Rect {
 
     const onError = () => {
       const reason = this.getErrorReason(media.error?.code);
-      console.error(`ERROR: Error loading video: ${this.src()}, ${reason}`);
+      console.log(`ERROR: Error loading video: ${this.src()}, ${reason}`);
       media.removeEventListener('error', onError);
     };
 
@@ -295,40 +292,19 @@ export abstract class Media extends Rect {
     );
   }
 
-  public pause() {
-    const media = this.mediaElement();
-    
-    this.playing(false);
-    this.time.save();
-    media.pause();
-  }
-
   public play() {
-    const media = this.mediaElement();
-    
-    // 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);
-      });
-    }
-    
-    this.playing(true);
-    
-    // Update time based on thread time
     const time = useThread().time;
     const start = time();
-    const offset = media.currentTime;
-    
-    this.time(() => {
-      const newTime = this.clampTime(offset + (time() - start) * this.playbackRate());
-      return newTime;
-    });
+    const offset = this.time();
+    const playbackRate = this.playbackRate();
+    this.playing(true);
+    this.time(() => this.clampTime(offset + (time() - start) * playbackRate));
+  }
+
+  public pause() {
+    this.playing(false);
+    this.time.save();
+    this.mediaElement().pause();
   }
 
   public clampTime(time: number): number {
@@ -367,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;
-  }
 }

package/src/lib/components/Video.ts

@@ -8,7 +8,8 @@ import {ImageCommunication} from '../utils/video/ffmpeg-client';
 import {dropExtractor, getFrame} from '../utils/video/mp4-parser-manager';
 import type {MediaProps} from './Media';
 import {Media} from './Media';
-
+import {waitUntil} from '../utils/waitUntil';
+ 
 export interface VideoProps extends MediaProps {
   /**
    * {@inheritDoc Video.alpha}
@@ -112,6 +113,13 @@ export class Video extends Media {
     if (!video) {
       video = document.createElement('video');
       video.crossOrigin = 'anonymous';
+      video.preload = 'metadata';
+      video.playsInline = true;
+      video.setAttribute('webkit-playsinline', 'true');
+      video.setAttribute('playsinline', 'true');
+
+      // Set initial volume
+      video.volume = this.getVolume();
 
       const parsedSrc = new URL(src, window.location.origin);
       if (parsedSrc.pathname.endsWith('.m3u8')) {
@@ -122,9 +130,51 @@ export class Video extends Media {
         video.src = src;
       }
 
+      // Add metadata event listeners
+      video.addEventListener('loadedmetadata', () => {
+        if (video.duration === Infinity || video.duration === 0) {
+          // For iOS, we need to seek to the end to get the duration
+          video.currentTime = 24 * 60 * 60; // 24 hours
+        }
+      });
+
+      video.addEventListener('seeked', () => {
+        if (video.duration === Infinity || video.duration === 0) {
+          // If we still don't have duration, try a different approach
+          video.currentTime = 0;
+        }
+      });
+
+      // Add durationchange event listener
+      video.addEventListener('durationchange', () => {
+        if (video.duration === Infinity || video.duration === 0) {
+          // Try to force duration calculation
+          video.currentTime = 0.1;
+        }
+      });
+
+      // Add loadeddata event listener
+      video.addEventListener('loadeddata', () => {
+        if (video.duration === Infinity || video.duration === 0) {
+          // Try to force duration calculation
+          video.currentTime = 0.1;
+        }
+      });
+
+      // Add canplay event listener
+      video.addEventListener('canplay', () => {
+        if (video.duration === Infinity || video.duration === 0) {
+          // Try to force duration calculation
+          video.currentTime = 0.1;
+        }
+      });
+
       Video.pool[key] = video;
     }
 
+    // Update volume whenever video is accessed
+    video.volume = this.getVolume();
+
     const weNeedToWait = this.waitForCanPlayNecessary(video);
     if (!weNeedToWait) {
       return video;
@@ -394,4 +444,19 @@ export class Video extends Media {
       })(),
     );
   }
+
+  public *waitForMetadata() {
+    const video = this.video();
+    
+    // If duration is already available and valid, return immediately
+    if (video.duration > 0 && video.duration !== Infinity) {
+      return;
+    }
+
+    // Try to force duration calculation
+    video.currentTime = 0.1;
+    
+    // Wait for metadata to be loaded with a valid duration
+    yield* waitUntil(() => video.duration > 0 && video.duration !== Infinity);
+  }
 }

package/src/lib/utils/waitUntil.ts

@@ -0,0 +1,18 @@
+/**
+ * Waits until a condition is met.
+ * @param condition - Function that returns true when the condition is met
+ * @param timeout - Optional timeout in milliseconds
+ */
+export function* waitUntil(
+  condition: () => boolean,
+  timeout: number = 10000,
+): Generator<void, void, unknown> {
+  const startTime = Date.now();
+  
+  while (!condition()) {
+    if (Date.now() - startTime > timeout) {
+      throw new Error('Timeout waiting for condition');
+    }
+    yield;
+  }
+}