@revideo/2d 0.5.5-alpha.1062 → 0.5.5-alpha.1065

package/src/lib/components/Layout.ts

@@ -1,6 +1,7 @@
 import {
   BBox,
   boolLerp,
+  DependencyContext,
   InterpolationFunction,
   modify,
   Origin,
@@ -283,6 +284,8 @@ export class Layout extends Node {
   @signal()
   public declare readonly textAlign: SimpleSignal<CanvasTextAlign, this>;
 
+  protected fontLoaded: boolean = false;
+
   protected getX(): number {
     if (this.isLayoutRoot()) {
       return this.x.context.getter();
@@ -961,6 +964,14 @@ export class Layout extends Node {
 
   @computed()
   protected applyFont() {
+    if (!this.fontLoaded) {
+      DependencyContext.collectPromise(
+        (async () => {
+          await document.fonts?.ready;
+          this.fontLoaded = true;
+        })(),
+      );
+    }
     this.element.style.fontFamily = this.fontFamily.isInitial()
       ? ''
       : this.fontFamily();

package/src/lib/components/Media.ts

@@ -39,7 +39,9 @@ export abstract class Media extends Asset {
   @signal()
   protected declare readonly playing: SimpleSignal<boolean, this>;
 
-  protected readonly volume: number = 1;
+  @initial(1)
+  @signal()
+  protected declare readonly volume: SimpleSignal<number, this>;
 
   protected lastTime = -1;
 
@@ -48,7 +50,6 @@ export abstract class Media extends Asset {
     if (props.play) {
       this.play();
     }
-    this.volume = props.volume ?? 1;
   }
 
   public isPlaying(): boolean {
@@ -64,7 +65,7 @@ export abstract class Media extends Asset {
   }
 
   public getVolume(): number {
-    return this.volume;
+    return this.mediaElement().volume;
   }
 
   public override dispose() {
@@ -108,14 +109,9 @@ export abstract class Media extends Asset {
   }
 
   protected setVolume(volume: number) {
-    if (volume < 0) {
-      console.warn(
-        `volumes cannot be negative - the value will be clamped to 0.`,
-      );
-    }
-    if (volume > 1) {
+    if (volume < 0 || volume > 1) {
       console.warn(
-        `the browser does not natively support volumes higher than 1 - your preview will have a volume of 1, but your exported video will have a volume of ${volume}`,
+        `${volume} is an incorrect value for volume, has to be in range [0,1]. We're clamping to the nearest value`,
       );
     }
     this.mediaElement().volume = Math.min(Math.max(volume, 0), 1);

package/src/lib/components/Txt.test.tsx

@@ -10,6 +10,7 @@ describe('Txt', () => {
 
   it('Handle plain text', () => {
     const node = (<Txt lineWidth={8}>test</Txt>) as Txt;
+    node.toPromise();
 
     const parseSpy = vi.spyOn(node as any, 'parseChildren');
     const leaf = node.childAs<TxtLeaf>(0);
@@ -38,6 +39,7 @@ describe('Txt', () => {
         Apple <Txt>Banana</Txt> Cherry
       </Txt>
     ) as Txt;
+    node.toPromise();
 
     const first = node.childAs<TxtLeaf>(0);
     const second = node.childAs<Txt>(1);

package/src/lib/components/TxtLeaf.ts

@@ -61,9 +61,9 @@ export class TxtLeaf extends Shape {
   }
 
   protected override async draw(context: CanvasRenderingContext2D) {
-    await document.fonts?.ready;
     this.requestFontUpdate();
     this.applyStyle(context);
+    await document.fonts?.ready;
     this.applyText(context);
     context.font = this.styles.font;
     if ('letterSpacing' in context) {

package/src/lib/components/__tests__/clone.test.tsx

@@ -52,6 +52,7 @@ describe('clone', () => {
     const template = (
       <Circle lineWidth={8} startAngle={signal} end={0.5} />
     ) as Circle;
+    template.toPromise();
     const clone = template.snapshotClone({end: 0});
 
     expect(clone.lineWidth()).toBe(8);

package/src/lib/components/__tests__/state.test.tsx

@@ -12,6 +12,7 @@ describe('state', () => {
     const circle = (
       <Circle lineWidth={8} startAngle={signal} end={0.5} />
     ) as Circle;
+    circle.toPromise();
     circle.save();
 
     circle.lineWidth(16);