@revideo/2d 0.3.0 → 0.3.1

package/src/lib/components/Video.ts

@@ -21,6 +21,10 @@ export interface VideoProps extends MediaProps {
    * {@inheritDoc Video.smoothing}
    */
   smoothing?: SignalValue<boolean>;
+  /**
+   * {@inheritDoc Video.transparency}
+   */
+  transparency?: SignalValue<boolean>;
 }
 
 class ImageCommunication {
@@ -52,6 +56,7 @@ class ImageCommunication {
     time: number,
     duration: number,
     fps: number,
+    transparency: boolean,
   ) {
     return new Promise<HTMLImageElement>((resolve, reject) => {
       if (!import.meta.hot) {
@@ -63,7 +68,8 @@ class ImageCommunication {
         const image = new Image();
 
         const uint8Array = new Uint8Array(event.data.frame.data);
-        const blob = new Blob([uint8Array], {type: 'image/png'});
+        const type = transparency ? 'image/png' : 'image/jpeg';
+        const blob = new Blob([uint8Array], {type});
         const url = URL.createObjectURL(blob);
 
         image.src = url;
@@ -82,6 +88,7 @@ class ImageCommunication {
           startTime: time,
           duration,
           fps,
+          transparency,
         },
       });
     });
@@ -114,6 +121,19 @@ export class Video extends Media {
   @signal()
   public declare readonly smoothing: SimpleSignal<boolean, this>;
 
+  /**
+   * Whether the video should be rendered as partially transparent.
+   *
+   * @remarks
+   * When enabled, the video frames will be extracted as PNGs with an alpha
+   * channel. This is significantly slower than using JPEGs which is the default.
+   *
+   * @defaultValue false
+   */
+  @initial(false)
+  @signal()
+  public declare readonly transparency: SimpleSignal<boolean, this>;
+
   private static readonly pool: Record<string, HTMLVideoElement> = {};
 
   private static readonly imageCommunication = !import.meta.hot
@@ -260,6 +280,7 @@ export class Video extends Media {
       time,
       duration,
       fps,
+      this.transparency(),
     );
     this.lastFrame = frame;
     this.lastTime = time;