@revideo/2d 0.5.3-alpha.1049 → 0.5.3-alpha.1054

package/src/lib/components/Layout.ts

@@ -821,6 +821,7 @@ export class Layout extends Node {
   }
 
   protected override async draw(context: CanvasRenderingContext2D) {
+    await document.fonts?.ready;
     if (this.clip()) {
       const size = this.computedSize();
       if (size.width === 0 || size.height === 0) {
@@ -991,13 +992,25 @@ export class Layout extends Node {
 
     if (this.textWrap.isInitial()) {
       this.element.style.whiteSpace = '';
-    } else {
-      const wrap = this.textWrap();
-      if (typeof wrap === 'boolean') {
-        this.element.style.whiteSpace = wrap ? 'normal' : 'nowrap';
-      } else {
-        this.element.style.whiteSpace = wrap;
-      }
+      return;
+    }
+
+    const wrap = this.textWrap();
+
+    if (typeof wrap === 'boolean') {
+      this.element.style.whiteSpace = wrap ? 'normal' : 'nowrap';
+      return;
+    }
+
+    if (wrap === 'pre') {
+      this.element.style.whiteSpace = wrap;
+      return;
+    }
+
+    if (wrap === 'balance') {
+      this.element.style.whiteSpace = 'normal';
+      this.element.style.textWrap = wrap;
+      return;
     }
   }
 

package/src/lib/components/Rive.ts

@@ -82,13 +82,14 @@ export class Rive extends Asset {
 
   protected override async draw(context: CanvasRenderingContext2D) {
     this.drawShape(context);
-    const {rive, renderer, canvas, artboard, animation} = await this.rive();
-    const box = BBox.fromSizeCentered(this.computedSize());
 
     this.currentTime = this.time();
     const timeToAdvance = this.currentTime - this.lastTime;
     this.lastTime = this.currentTime;
 
+    const {rive, renderer, canvas, artboard, animation} = await this.rive();
+    const box = BBox.fromSizeCentered(this.computedSize());
+
     const renderPromise = new Promise<void>(resolve => {
       function renderLoop() {
         renderer.clear();

package/src/lib/components/Txt.ts

@@ -105,6 +105,7 @@ export class Txt extends Shape {
     timingFunction: TimingFunction,
     interpolationFunction: InterpolationFunction<string>,
   ): ThreadGenerator {
+    yield document.fonts?.ready;
     const children = this.children();
     if (children.length !== 1 || !(children[0] instanceof TxtLeaf)) {
       this.text.save();
@@ -178,6 +179,7 @@ export class Txt extends Shape {
   }
 
   protected override async draw(context: CanvasRenderingContext2D) {
+    await document.fonts?.ready;
     await this.drawChildren(context);
   }
 }

package/src/lib/components/TxtLeaf.ts

@@ -61,6 +61,7 @@ export class TxtLeaf extends Shape {
   }
 
   protected override async draw(context: CanvasRenderingContext2D) {
+    await document.fonts?.ready;
     this.requestFontUpdate();
     this.applyStyle(context);
     this.applyText(context);
@@ -106,7 +107,6 @@ export class TxtLeaf extends Shape {
     text: string,
     box: BBox,
   ) {
-    await new Promise(resolve => document.fonts.ready.then(resolve));
     const y = box.y + box.height / 2;
     context.save();
     context.textBaseline = 'middle';

package/src/lib/components/Video.ts

@@ -252,10 +252,6 @@ export class Video extends Media {
   }
 
   protected async seekFunction() {
-    if (!this.fileTypeWasDetected) {
-      this.detectedFileType = await this.detectFileType();
-      this.fileTypeWasDetected = true;
-    }
     const playbackState = this.view().playbackState();
 
     // During playback
@@ -283,6 +279,10 @@ export class Video extends Media {
       return this.webcodecSeekedVideo();
     }
 
+    if (!this.fileTypeWasDetected) {
+      this.detectFileType();
+    }
+
     // If not set explicitly, use detected file type to determine decoder
     if (this.detectedFileType === 'webm') {
       return this.ffmpegSeekedVideo();
@@ -333,41 +333,78 @@ export class Video extends Media {
     return this;
   }
 
-  private async detectFileType(): Promise<
-    'mp4' | 'webm' | 'hls' | 'mov' | 'unknown'
-  > {
-    if (this.fullSource().split('?')[0].endsWith('.mp4')) return 'mp4';
-    if (this.fullSource().split('?')[0].endsWith('.webm')) return 'webm';
-    if (this.fullSource().split('?')[0].endsWith('.m3u8')) return 'hls';
-    if (this.fullSource().split('?')[0].endsWith('.mov')) return 'mov';
+  private handleUnknownFileType(src: string) {
+    console.warn(
+      `WARNING: Could not detect file type of video (${src}), will default to using mp4 decoder. If your video file is not an mp4 file, this will lead to an error - to fix this, reencode your video as an mp4 file (better performance) or specify a different decoder: https://docs.re.video/common-issues/slow-rendering#use-mp4-decoder`,
+    );
+    this.detectedFileType = 'unknown';
+    this.fileTypeWasDetected = true;
+  }
+
+  private detectFileType() {
+    return DependencyContext.collectPromise(
+      (async () => {
+        const src = this.fullSource();
+        const extension = src.split('?')[0].split('.').pop()?.toLowerCase();
+
+        if (
+          extension === 'mp4' ||
+          extension === 'webm' ||
+          extension === 'mov'
+        ) {
+          this.detectedFileType = extension;
+          this.fileTypeWasDetected = true;
+          return;
+        }
 
-    if (
-      this.fullSource().startsWith('http://') ||
-      this.fullSource().startsWith('https://')
-    ) {
-      try {
-        const response = await fetch(this.fullSource(), {method: 'HEAD'});
+        if (extension === 'm3u8') {
+          this.detectedFileType = 'hls';
+          this.fileTypeWasDetected = true;
+          return;
+        }
+
+        if (!src.startsWith('http://') && !src.startsWith('https://')) {
+          this.handleUnknownFileType(src);
+          return;
+        }
+
+        const response = await fetch(src, {method: 'HEAD'});
         const contentType = response.headers.get('Content-Type');
 
-        if (contentType) {
-          if (contentType.includes('video/mp4')) return 'mp4';
-          if (contentType.includes('video/webm')) return 'webm';
-          if (contentType.includes('video/quicktime')) return 'mov';
-          if (
-            contentType.includes('application/vnd.apple.mpegurl') ||
-            contentType.includes('application/x-mpegURL')
-          ) {
-            return 'hls';
-          }
+        if (!contentType) {
+          this.handleUnknownFileType(src);
+          return;
         }
-      } catch (error) {
-        // do nothing
-      }
-    }
 
-    console.warn(
-      `WARNING: Could not detect file type of video (${this.fullSource()}), will default to using mp4 decoder. If your video file is no mp4 file, this will lead to an error - to fix this, reencode your video as an mp4 file (better performance) or specify a different decoder: https://docs.re.video/common-issues/slow-rendering#use-mp4-decoder`,
+        if (contentType.includes('video/mp4')) {
+          this.detectedFileType = 'mp4';
+          this.fileTypeWasDetected = true;
+          return;
+        }
+
+        if (contentType.includes('video/webm')) {
+          this.detectedFileType = 'webm';
+          this.fileTypeWasDetected = true;
+          return;
+        }
+
+        if (contentType.includes('video/quicktime')) {
+          this.detectedFileType = 'mov';
+          this.fileTypeWasDetected = true;
+          return;
+        }
+
+        if (
+          contentType.includes('application/vnd.apple.mpegurl') ||
+          contentType.includes('application/x-mpegURL')
+        ) {
+          this.detectedFileType = 'hls';
+          this.fileTypeWasDetected = true;
+          return;
+        }
+
+        this.handleUnknownFileType(src);
+      })(),
     );
-    return 'unknown';
   }
 }

package/src/lib/partials/types.ts

@@ -25,7 +25,7 @@ export type FlexContent =
 
 export type FlexItems = 'center' | 'start' | 'end' | 'stretch' | 'baseline';
 
-export type TextWrap = boolean | 'pre';
+export type TextWrap = boolean | 'pre' | 'balance';
 
 export type LayoutMode = boolean | null;