@revideo/2d 0.2.5 → 0.2.6-alpha.904

package/lib/utils/CanvasUtils.d.ts

@@ -1,93 +1,21 @@
-import {BBox, Spacing, Vector2} from '@revideo/core';
-import {CanvasStyle, Gradient, Pattern, PossibleCanvasStyle} from '../partials';
-export declare function canvasStyleParser(
-  style: PossibleCanvasStyle,
-): Gradient | import('chroma-js').Color | Pattern | null;
-export declare function resolveCanvasStyle(
-  style: CanvasStyle,
-  context: CanvasRenderingContext2D,
-): string | CanvasGradient | CanvasPattern;
-export declare function drawRoundRect(
-  context: CanvasRenderingContext2D | Path2D,
-  rect: BBox,
-  radius: Spacing,
-  smoothCorners: boolean,
-  cornerSharpness: number,
-): void;
-export declare function adjustRectRadius(
-  radius: number,
-  horizontal: number,
-  vertical: number,
-  rect: BBox,
-): number;
-export declare function drawRect(
-  context: CanvasRenderingContext2D | Path2D,
-  rect: BBox,
-): void;
-export declare function fillRect(
-  context: CanvasRenderingContext2D,
-  rect: BBox,
-): void;
-export declare function strokeRect(
-  context: CanvasRenderingContext2D,
-  rect: BBox,
-): void;
-export declare function drawPolygon(
-  path: CanvasRenderingContext2D | Path2D,
-  rect: BBox,
-  sides: number,
-): void;
-export declare function drawImage(
-  context: CanvasRenderingContext2D,
-  image: CanvasImageSource,
-  destination: BBox,
-): void;
-export declare function drawImage(
-  context: CanvasRenderingContext2D,
-  image: CanvasImageSource,
-  source: BBox,
-  destination: BBox,
-): void;
-export declare function moveTo(
-  context: CanvasRenderingContext2D | Path2D,
-  position: Vector2,
-): void;
-export declare function lineTo(
-  context: CanvasRenderingContext2D | Path2D,
-  position: Vector2,
-): void;
-export declare function arcTo(
-  context: CanvasRenderingContext2D | Path2D,
-  through: Vector2,
-  position: Vector2,
-  radius: number,
-): void;
-export declare function drawLine(
-  context: CanvasRenderingContext2D | Path2D,
-  points: Vector2[],
-): void;
-export declare function drawPivot(
-  context: CanvasRenderingContext2D | Path2D,
-  offset: Vector2,
-  radius?: number,
-): void;
-export declare function arc(
-  context: CanvasRenderingContext2D | Path2D,
-  center: Vector2,
-  radius: number,
-  startAngle?: number,
-  endAngle?: number,
-  counterclockwise?: boolean,
-): void;
-export declare function bezierCurveTo(
-  context: CanvasRenderingContext2D | Path2D,
-  controlPoint1: Vector2,
-  controlPoint2: Vector2,
-  to: Vector2,
-): void;
-export declare function quadraticCurveTo(
-  context: CanvasRenderingContext2D | Path2D,
-  controlPoint: Vector2,
-  to: Vector2,
-): void;
-//# sourceMappingURL=CanvasUtils.d.ts.map
+import { BBox, Spacing, Vector2 } from '@revideo/core';
+import { CanvasStyle, Gradient, Pattern, PossibleCanvasStyle } from '../partials';
+export declare function canvasStyleParser(style: PossibleCanvasStyle): Gradient | Pattern | import("chroma-js").Color | null;
+export declare function resolveCanvasStyle(style: CanvasStyle, context: CanvasRenderingContext2D): string | CanvasGradient | CanvasPattern;
+export declare function drawRoundRect(context: CanvasRenderingContext2D | Path2D, rect: BBox, radius: Spacing, smoothCorners: boolean, cornerSharpness: number): void;
+export declare function adjustRectRadius(radius: number, horizontal: number, vertical: number, rect: BBox): number;
+export declare function drawRect(context: CanvasRenderingContext2D | Path2D, rect: BBox): void;
+export declare function fillRect(context: CanvasRenderingContext2D, rect: BBox): void;
+export declare function strokeRect(context: CanvasRenderingContext2D, rect: BBox): void;
+export declare function drawPolygon(path: CanvasRenderingContext2D | Path2D, rect: BBox, sides: number): void;
+export declare function drawImage(context: CanvasRenderingContext2D, image: CanvasImageSource, destination: BBox): void;
+export declare function drawImage(context: CanvasRenderingContext2D, image: CanvasImageSource, source: BBox, destination: BBox): void;
+export declare function moveTo(context: CanvasRenderingContext2D | Path2D, position: Vector2): void;
+export declare function lineTo(context: CanvasRenderingContext2D | Path2D, position: Vector2): void;
+export declare function arcTo(context: CanvasRenderingContext2D | Path2D, through: Vector2, position: Vector2, radius: number): void;
+export declare function drawLine(context: CanvasRenderingContext2D | Path2D, points: Vector2[]): void;
+export declare function drawPivot(context: CanvasRenderingContext2D | Path2D, offset: Vector2, radius?: number): void;
+export declare function arc(context: CanvasRenderingContext2D | Path2D, center: Vector2, radius: number, startAngle?: number, endAngle?: number, counterclockwise?: boolean): void;
+export declare function bezierCurveTo(context: CanvasRenderingContext2D | Path2D, controlPoint1: Vector2, controlPoint2: Vector2, to: Vector2): void;
+export declare function quadraticCurveTo(context: CanvasRenderingContext2D | Path2D, controlPoint: Vector2, to: Vector2): void;
+//# sourceMappingURL=CanvasUtils.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revideo/2d",
-  "version": "0.2.5",
+  "version": "0.2.6-alpha.904+148b73f",
   "description": "A 2D renderer for revideo",
   "author": "revideo",
   "homepage": "https://re.video/",
@@ -29,8 +29,8 @@
   ],
   "devDependencies": {
     "@preact/signals": "^1.2.1",
-    "@revideo/internal": "0.0.0",
-    "@revideo/ui": "^0.2.5",
+    "@revideo/internal": "^0.0.0",
+    "@revideo/ui": "^0.2.6-alpha.904+148b73f",
     "clsx": "^2.0.0",
     "jsdom": "^22.1.0",
     "preact": "^10.19.2",
@@ -40,10 +40,10 @@
     "@codemirror/language": "^6.10.1",
     "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
-    "@revideo/core": "^0.2.5",
+    "@revideo/core": "^0.2.6-alpha.904+148b73f",
     "code-fns": "^0.8.2",
     "mathjax-full": "^3.2.2",
     "parse-svg-path": "^0.1.2"
   },
-  "gitHead": "f2c36c8876a48e05de5241dde92a4b683c17a6f1"
+  "gitHead": "148b73fa3693f40d717c0fdf275799364769706f"
 }

package/src/lib/components/Audio.ts

@@ -114,7 +114,7 @@ export class Audio extends Media {
     return audio;
   }
 
-  protected override draw(context: CanvasRenderingContext2D) {
+  protected override async draw(context: CanvasRenderingContext2D) {
     const playbackState = this.view().playbackState();
 
     playbackState === PlaybackState.Playing ||
@@ -125,6 +125,6 @@ export class Audio extends Media {
     context.save();
     context.restore();
 
-    this.drawChildren(context);
+    await this.drawChildren(context);
   }
 }

package/src/lib/components/Code.ts

@@ -511,7 +511,9 @@ export class Code extends Shape {
     return size;
   }
 
-  protected override draw(context: CanvasRenderingContext2D): void {
+  protected override async draw(
+    context: CanvasRenderingContext2D,
+  ): Promise<void> {
     this.requestFontUpdate();
     this.applyStyle(context);
     this.applyText(context);
@@ -534,7 +536,7 @@ export class Code extends Shape {
 
     context.restore();
 
-    this.drawChildren(context);
+    await this.drawChildren(context);
   }
 
   protected override applyText(context: CanvasRenderingContext2D) {

package/src/lib/components/CodeBlock.ts

@@ -335,7 +335,7 @@ export class CodeBlock extends Shape {
     );
   }
 
-  protected override draw(context: CanvasRenderingContext2D) {
+  protected override async draw(context: CanvasRenderingContext2D) {
     if (!CodeBlock.initialized()) return;
 
     this.requestFontUpdate();

package/src/lib/components/Img.ts

@@ -221,7 +221,7 @@ about working with images.`,
     return context;
   }
 
-  protected override draw(context: CanvasRenderingContext2D) {
+  protected override async draw(context: CanvasRenderingContext2D) {
     this.drawShape(context);
     const alpha = this.alpha();
     if (alpha > 0) {
@@ -240,7 +240,7 @@ about working with images.`,
       context.clip(this.getPath());
     }
 
-    this.drawChildren(context);
+    await this.drawChildren(context);
   }
 
   protected override applyFlex() {

package/src/lib/components/Layout.ts

@@ -820,7 +820,7 @@ export class Layout extends Node {
     return BBox.fromSizeCentered(this.computedSize());
   }
 
-  protected override draw(context: CanvasRenderingContext2D) {
+  protected override async draw(context: CanvasRenderingContext2D) {
     if (this.clip()) {
       const size = this.computedSize();
       if (size.width === 0 || size.height === 0) {
@@ -833,7 +833,7 @@ export class Layout extends Node {
       context.clip();
     }
 
-    this.drawChildren(context);
+    await this.drawChildren(context);
   }
 
   public override drawOverlay(

package/src/lib/components/Media.ts

@@ -86,7 +86,9 @@ export abstract class Media extends Rect {
 
   protected abstract fastSeekedMedia(): HTMLMediaElement;
 
-  protected abstract override draw(context: CanvasRenderingContext2D): void;
+  protected abstract override draw(
+    context: CanvasRenderingContext2D,
+  ): Promise<void>;
 
   protected setCurrentTime(value: number) {
     const media = this.mediaElement();

package/src/lib/components/Node.ts

@@ -1355,7 +1355,7 @@ export class Node implements Promisable<Node> {
    * Get a cache canvas with the contents of this node rendered onto it.
    */
   @computed()
-  protected cachedCanvas() {
+  protected async cachedCanvas() {
     const context = this.cacheCanvas();
     const cache = this.worldSpaceCacheBBox();
     const matrix = this.localToWorld();
@@ -1371,7 +1371,7 @@ export class Node implements Promisable<Node> {
       matrix.e - cache.x,
       matrix.f - cache.y,
     );
-    this.draw(context);
+    await this.draw(context);
 
     return context;
   }
@@ -1629,7 +1629,7 @@ export class Node implements Promisable<Node> {
    *
    * @param context - The context to draw with.
    */
-  public render(context: CanvasRenderingContext2D) {
+  public async render(context: CanvasRenderingContext2D) {
     if (this.absoluteOpacity() <= 0) {
       return;
     }
@@ -1640,7 +1640,7 @@ export class Node implements Promisable<Node> {
     if (this.requiresCache()) {
       const cacheRect = this.worldSpaceCacheBBox();
       if (cacheRect.width !== 0 && cacheRect.height !== 0) {
-        const cache = this.cachedCanvas().canvas;
+        const cache = (await this.cachedCanvas()).canvas;
         const source = this.shaderCanvas(context.canvas, cache);
         if (source) {
           this.renderFromSource(context, source, 0, 0);
@@ -1654,7 +1654,7 @@ export class Node implements Promisable<Node> {
         }
       }
     } else {
-      this.draw(context);
+      await this.draw(context);
     }
 
     context.restore();
@@ -1670,13 +1670,13 @@ export class Node implements Promisable<Node> {
    *
    * @param context - The context to draw with.
    */
-  protected draw(context: CanvasRenderingContext2D) {
-    this.drawChildren(context);
+  protected async draw(context: CanvasRenderingContext2D) {
+    await this.drawChildren(context);
   }
 
-  protected drawChildren(context: CanvasRenderingContext2D) {
+  protected async drawChildren(context: CanvasRenderingContext2D) {
     for (const child of this.sortedChildren()) {
-      child.render(context);
+      await child.render(context);
     }
   }
 

package/src/lib/components/Shape.ts

@@ -88,12 +88,12 @@ export abstract class Shape extends Layout {
     }
   }
 
-  protected override draw(context: CanvasRenderingContext2D) {
+  protected override async draw(context: CanvasRenderingContext2D) {
     this.drawShape(context);
     if (this.clip()) {
       context.clip(this.getPath());
     }
-    this.drawChildren(context);
+    await this.drawChildren(context);
   }
 
   protected drawShape(context: CanvasRenderingContext2D) {

package/src/lib/components/Txt.ts

@@ -177,8 +177,8 @@ export class Txt extends Shape {
       : 'block';
   }
 
-  protected override draw(context: CanvasRenderingContext2D) {
-    this.drawChildren(context);
+  protected override async draw(context: CanvasRenderingContext2D) {
+    await this.drawChildren(context);
   }
 }
 

package/src/lib/components/TxtLeaf.ts

@@ -61,7 +61,7 @@ export class TxtLeaf extends Shape {
     return parent instanceof Txt ? parent : null;
   }
 
-  protected override draw(context: CanvasRenderingContext2D) {
+  protected override async draw(context: CanvasRenderingContext2D) {
     this.requestFontUpdate();
     this.applyStyle(context);
     this.applyText(context);

package/src/lib/components/Video.ts

@@ -23,6 +23,71 @@ export interface VideoProps extends MediaProps {
   smoothing?: SignalValue<boolean>;
 }
 
+class ImageCommunication {
+  public constructor() {
+    if (!import.meta.hot) {
+      throw new Error('FfmpegVideoFrame can only be used with HMR.');
+    }
+
+    import.meta.hot.on(
+      'revideo/ffmpeg-video-frame-res',
+      this.handler.bind(this),
+    );
+  }
+
+  private nextFrameHandlers: ((event: MessageEvent) => void)[] = [];
+
+  private handler(event: MessageEvent) {
+    const handlers = this.nextFrameHandlers;
+    this.nextFrameHandlers = [];
+
+    for (const handler of handlers) {
+      handler(event);
+    }
+  }
+
+  public async getFrame(
+    id: string,
+    src: string,
+    time: number,
+    duration: number,
+    fps: number,
+  ) {
+    return new Promise<HTMLImageElement>((resolve, reject) => {
+      if (!import.meta.hot) {
+        reject('FfmpegVideoFrame can only be used with HMR.');
+        return;
+      }
+
+      function handler(event: MessageEvent) {
+        const image = new Image();
+
+        const uint8Array = new Uint8Array(event.data.frame.data);
+        const blob = new Blob([uint8Array], {type: 'image/jpeg'});
+        const url = URL.createObjectURL(blob);
+
+        image.src = url;
+
+        image.onload = () => {
+          resolve(image);
+        };
+      }
+
+      this.nextFrameHandlers.push(handler);
+
+      import.meta.hot.send('revideo/ffmpeg-video-frame', {
+        data: {
+          id: id,
+          filePath: src,
+          startTime: time,
+          duration,
+          fps,
+        },
+      });
+    });
+  }
+}
+
 @nodeName('Video')
 export class Video extends Media {
   /**
@@ -51,6 +116,8 @@ export class Video extends Media {
 
   private static readonly pool: Record<string, HTMLVideoElement> = {};
 
+  private static readonly imageCommunication = new ImageCommunication();
+
   public constructor(props: VideoProps) {
     super(props);
   }
@@ -159,16 +226,55 @@ export class Video extends Media {
     return video;
   }
 
-  protected override draw(context: CanvasRenderingContext2D) {
+  protected lastFrame: HTMLImageElement | null = null;
+
+  protected async serverSeekedVideo(): Promise<HTMLImageElement> {
+    const video = this.video();
+    const time = this.clampTime(this.time());
+    const duration = this.getDuration();
+
+    video.playbackRate = this.playbackRate();
+
+    if (this.lastFrame && this.lastTime === time) {
+      return this.lastFrame;
+    }
+
+    const fps = this.view().fps() / this.playbackRate();
+
+    const frame = await Video.imageCommunication.getFrame(
+      this.key,
+      video.src,
+      time,
+      duration,
+      fps,
+    );
+    this.lastFrame = frame;
+    this.lastTime = time;
+
+    return frame;
+  }
+
+  protected async seekFunction() {
+    const playbackState = this.view().playbackState();
+    if (
+      playbackState === PlaybackState.Playing ||
+      playbackState === PlaybackState.Presenting
+    ) {
+      return this.fastSeekedVideo();
+    }
+
+    if (playbackState === PlaybackState.Rendering) {
+      return this.serverSeekedVideo();
+    }
+
+    return this.seekedVideo();
+  }
+
+  protected override async draw(context: CanvasRenderingContext2D) {
     this.drawShape(context);
     const alpha = this.alpha();
     if (alpha > 0) {
-      const playbackState = this.view().playbackState();
-      const video =
-        playbackState === PlaybackState.Playing ||
-        playbackState === PlaybackState.Presenting
-          ? this.fastSeekedVideo()
-          : this.seekedVideo();
+      const video = await this.seekFunction();
 
       const box = BBox.fromSizeCentered(this.computedSize());
       context.save();
@@ -185,7 +291,7 @@ export class Video extends Media {
       context.clip(this.getPath());
     }
 
-    this.drawChildren(context);
+    await this.drawChildren(context);
   }
 
   protected override applyFlex() {

package/src/lib/components/View2D.ts

@@ -37,6 +37,10 @@ export class View2D extends Rect {
   @signal()
   public declare readonly globalTime: SimpleSignal<number, this>;
 
+  @initial(0)
+  @signal()
+  public declare readonly fps: SimpleSignal<number, this>;
+
   @signal()
   public declare readonly assetHash: SimpleSignal<string, this>;
 
@@ -61,10 +65,10 @@ export class View2D extends Rect {
     super.dispose();
   }
 
-  public override render(context: CanvasRenderingContext2D) {
+  public override async render(context: CanvasRenderingContext2D) {
     this.computedSize();
     this.computedPosition();
-    super.render(context);
+    await super.render(context);
   }
 
   /**

package/src/lib/scenes/Scene2D.ts

@@ -43,15 +43,16 @@ export class Scene2D extends GeneratorScene<View2D> implements Inspectable {
     return super.next();
   }
 
-  public draw(context: CanvasRenderingContext2D) {
+  public async draw(context: CanvasRenderingContext2D) {
     context.save();
     this.renderLifecycle.dispatch([SceneRenderEvent.BeforeRender, context]);
     context.save();
     this.renderLifecycle.dispatch([SceneRenderEvent.BeginRender, context]);
     this.getView()
       .playbackState(this.playback.state)
-      .globalTime(this.playback.time);
-    this.getView().render(context);
+      .globalTime(this.playback.time)
+      .fps(this.playback.fps);
+    await this.getView().render(context);
     this.renderLifecycle.dispatch([SceneRenderEvent.FinishRender, context]);
     context.restore();
     this.renderLifecycle.dispatch([SceneRenderEvent.AfterRender, context]);