@revideo/2d 0.2.3 → 0.2.4-alpha.895

package/lib/components/Video.js

@@ -1,148 +1,151 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+var __decorate =
+  (this && this.__decorate) ||
+  function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r =
+        c < 3
+          ? target
+          : desc === null
+            ? (desc = Object.getOwnPropertyDescriptor(target, key))
+            : desc,
+      d;
+    if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function')
+      r = Reflect.decorate(decorators, target, key, desc);
+    else
+      for (var i = decorators.length - 1; i >= 0; i--)
+        if ((d = decorators[i]))
+          r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+  };
 var Video_1;
-import { BBox, DependencyContext, PlaybackState, viaProxy, } from '@revideo/core';
-import { computed, initial, nodeName, signal } from '../decorators';
-import { drawImage } from '../utils';
-import { Media } from './Media';
-let Video = Video_1 = class Video extends Media {
-    constructor(props) {
-        super(props);
+import {BBox, DependencyContext, PlaybackState, viaProxy} from '@revideo/core';
+import {computed, initial, nodeName, signal} from '../decorators';
+import {drawImage} from '../utils';
+import {Media} from './Media';
+let Video = (Video_1 = class Video extends Media {
+  constructor(props) {
+    super(props);
+  }
+  desiredSize() {
+    const custom = super.desiredSize();
+    if (custom.x === null && custom.y === null) {
+      const image = this.video();
+      return {
+        x: image.videoWidth,
+        y: image.videoHeight,
+      };
     }
-    desiredSize() {
-        const custom = super.desiredSize();
-        if (custom.x === null && custom.y === null) {
-            const image = this.video();
-            return {
-                x: image.videoWidth,
-                y: image.videoHeight,
-            };
-        }
-        return custom;
+    return custom;
+  }
+  mediaElement() {
+    return this.video();
+  }
+  seekedMedia() {
+    return this.seekedVideo();
+  }
+  fastSeekedMedia() {
+    return this.fastSeekedVideo();
+  }
+  video() {
+    const src = viaProxy(this.src());
+    const key = `${this.key}/${src}`;
+    let video = Video_1.pool[key];
+    if (!video) {
+      video = document.createElement('video');
+      video.crossOrigin = 'anonymous';
+      video.src = src;
+      Video_1.pool[key] = video;
     }
-    mediaElement() {
-        return this.video();
+    if (video.readyState < 2) {
+      DependencyContext.collectPromise(
+        new Promise(resolve => {
+          const listener = () => {
+            resolve();
+            video.removeEventListener('canplay', listener);
+          };
+          video.addEventListener('canplay', listener);
+        }),
+      );
     }
-    seekedMedia() {
-        return this.seekedVideo();
+    return video;
+  }
+  seekedVideo() {
+    const video = this.video();
+    const time = this.clampTime(this.time());
+    video.playbackRate = this.playbackRate();
+    if (!video.paused) {
+      video.pause();
     }
-    fastSeekedMedia() {
-        return this.fastSeekedVideo();
+    if (this.lastTime === time) {
+      return video;
     }
-    video() {
-        const src = viaProxy(this.src());
-        const key = `${this.key}/${src}`;
-        let video = Video_1.pool[key];
-        if (!video) {
-            video = document.createElement('video');
-            video.crossOrigin = 'anonymous';
-            video.src = src;
-            Video_1.pool[key] = video;
-        }
-        if (video.readyState < 2) {
-            DependencyContext.collectPromise(new Promise(resolve => {
-                const listener = () => {
-                    resolve();
-                    video.removeEventListener('canplay', listener);
-                };
-                video.addEventListener('canplay', listener);
-            }));
-        }
-        return video;
+    this.setCurrentTime(time);
+    return video;
+  }
+  fastSeekedVideo() {
+    const video = this.video();
+    const time = this.clampTime(this.time());
+    video.playbackRate = this.playbackRate();
+    if (this.lastTime === time) {
+      return video;
     }
-    seekedVideo() {
-        const video = this.video();
-        const time = this.clampTime(this.time());
-        video.playbackRate = this.playbackRate();
-        if (!video.paused) {
-            video.pause();
-        }
-        if (this.lastTime === time) {
-            return video;
-        }
-        this.setCurrentTime(time);
-        return video;
+    const playing =
+      this.playing() && time < video.duration && video.playbackRate > 0;
+    if (playing) {
+      if (video.paused) {
+        DependencyContext.collectPromise(video.play());
+      }
+    } else {
+      if (!video.paused) {
+        video.pause();
+      }
     }
-    fastSeekedVideo() {
-        const video = this.video();
-        const time = this.clampTime(this.time());
-        video.playbackRate = this.playbackRate();
-        if (this.lastTime === time) {
-            return video;
-        }
-        const playing = this.playing() && time < video.duration && video.playbackRate > 0;
-        if (playing) {
-            if (video.paused) {
-                DependencyContext.collectPromise(video.play());
-            }
-        }
-        else {
-            if (!video.paused) {
-                video.pause();
-            }
-        }
-        if (Math.abs(video.currentTime - time) > 0.3) {
-            this.setCurrentTime(time);
-        }
-        else if (!playing) {
-            video.currentTime = time;
-        }
-        return video;
+    if (Math.abs(video.currentTime - time) > 0.3) {
+      this.setCurrentTime(time);
+    } else if (!playing) {
+      video.currentTime = time;
     }
-    draw(context) {
-        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 box = BBox.fromSizeCentered(this.computedSize());
-            context.save();
-            context.clip(this.getPath());
-            if (alpha < 1) {
-                context.globalAlpha *= alpha;
-            }
-            context.imageSmoothingEnabled = this.smoothing();
-            drawImage(context, video, box);
-            context.restore();
-        }
-        if (this.clip()) {
-            context.clip(this.getPath());
-        }
-        this.drawChildren(context);
+    return video;
+  }
+  draw(context) {
+    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 box = BBox.fromSizeCentered(this.computedSize());
+      context.save();
+      context.clip(this.getPath());
+      if (alpha < 1) {
+        context.globalAlpha *= alpha;
+      }
+      context.imageSmoothingEnabled = this.smoothing();
+      drawImage(context, video, box);
+      context.restore();
     }
-    applyFlex() {
-        super.applyFlex();
-        const video = this.video();
-        this.element.style.aspectRatio = (this.ratio() ?? video.videoWidth / video.videoHeight).toString();
+    if (this.clip()) {
+      context.clip(this.getPath());
     }
-};
+    this.drawChildren(context);
+  }
+  applyFlex() {
+    super.applyFlex();
+    const video = this.video();
+    this.element.style.aspectRatio = (
+      this.ratio() ?? video.videoWidth / video.videoHeight
+    ).toString();
+  }
+});
 Video.pool = {};
-__decorate([
-    initial(1),
-    signal()
-], Video.prototype, "alpha", void 0);
-__decorate([
-    initial(true),
-    signal()
-], Video.prototype, "smoothing", void 0);
-__decorate([
-    computed()
-], Video.prototype, "video", null);
-__decorate([
-    computed()
-], Video.prototype, "seekedVideo", null);
-__decorate([
-    computed()
-], Video.prototype, "fastSeekedVideo", null);
-Video = Video_1 = __decorate([
-    nodeName('Video')
-], Video);
-export { Video };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVmlkZW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvVmlkZW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUFBLE9BQU8sRUFDTCxJQUFJLEVBQ0osaUJBQWlCLEVBQ2pCLGFBQWEsRUFJYixRQUFRLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUVsRSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sVUFBVSxDQUFDO0FBQ25DLE9BQU8sRUFBQyxLQUFLLEVBQWEsTUFBTSxTQUFTLENBQUM7QUFjbkMsSUFBTSxLQUFLLGFBQVgsTUFBTSxLQUFNLFNBQVEsS0FBSztJQTJCOUIsWUFBbUIsS0FBaUI7UUFDbEMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2YsQ0FBQztJQUVrQixXQUFXO1FBQzVCLE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNuQyxJQUFJLE1BQU0sQ0FBQyxDQUFDLEtBQUssSUFBSSxJQUFJLE1BQU0sQ0FBQyxDQUFDLEtBQUssSUFBSSxFQUFFLENBQUM7WUFDM0MsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQzNCLE9BQU87Z0JBQ0wsQ0FBQyxFQUFFLEtBQUssQ0FBQyxVQUFVO2dCQUNuQixDQUFDLEVBQUUsS0FBSyxDQUFDLFdBQVc7YUFDckIsQ0FBQztRQUNKLENBQUM7UUFFRCxPQUFPLE1BQU0sQ0FBQztJQUNoQixDQUFDO0lBRVMsWUFBWTtRQUNwQixPQUFPLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRVMsV0FBVztRQUNuQixPQUFPLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRVMsZUFBZTtRQUN2QixPQUFPLElBQUksQ0FB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
+__decorate([initial(1), signal()], Video.prototype, 'alpha', void 0);
+__decorate([initial(true), signal()], Video.prototype, 'smoothing', void 0);
+__decorate([computed()], Video.prototype, 'video', null);
+__decorate([computed()], Video.prototype, 'seekedVideo', null);
+__decorate([computed()], Video.prototype, 'fastSeekedVideo', null);
+Video = Video_1 = __decorate([nodeName('Video')], Video);
+export {Video};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVmlkZW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvVmlkZW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUFBLE9BQU8sRUFDTCxJQUFJLEVBQ0osaUJBQWlCLEVBQ2pCLGFBQWEsRUFJYixRQUFRLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUVsRSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sVUFBVSxDQUFDO0FBQ25DLE9BQU8sRUFBQyxLQUFLLEVBQWEsTUFBTSxTQUFTLENBQUM7QUFjbkMsSUFBTSxLQUFLLGFBQVgsTUFBTSxLQUFNLFNBQVEsS0FBSztJQTJCOUIsWUFBbUIsS0FBaUI7UUFDbEMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2YsQ0FBQztJQUVrQixXQUFXO1FBQzVCLE1BQU0sTUFBTSxHQUFHLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztRQUNuQyxJQUFJLE1BQU0sQ0FBQyxDQUFDLEtBQUssSUFBSSxJQUFJLE1BQU0sQ0FBQyxDQUFDLEtBQUssSUFBSSxFQUFFLENBQUM7WUFDM0MsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQzNCLE9BQU87Z0JBQ0wsQ0FBQyxFQUFFLEtBQUssQ0FBQyxVQUFVO2dCQUNuQixDQUFDLEVBQUUsS0FBSyxDQUFDLFdBQVc7YUFDckIsQ0FBQztRQUNKLENBQUM7UUFFRCxPQUFPLE1BQU0sQ0FBQztJQUNoQixDQUFDO0lBRVMsWUFBWTtRQUNwQixPQUFPLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztJQUN0QixDQUFDO0lBRVMsV0FBVztRQUNuQixPQUFPLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUM1QixDQUFDO0lBRVMsZUFBZTtRQUN2QixPQUFPLElBQUksQ0FB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

package/lib/components/View2D.d.ts

@@ -1,25 +1,25 @@
-import { PlaybackState, SimpleSignal } from '@revideo/core';
-import type { Node } from './Node';
-import { Rect, RectProps } from './Rect';
+import {PlaybackState, SimpleSignal} from '@revideo/core';
+import type {Node} from './Node';
+import {Rect, RectProps} from './Rect';
 export interface View2DProps extends RectProps {
-    assetHash: string;
+  assetHash: string;
 }
 export declare class View2D extends Rect {
-    static shadowRoot: ShadowRoot;
-    readonly playbackState: SimpleSignal<PlaybackState, this>;
-    readonly globalTime: SimpleSignal<number, this>;
-    readonly assetHash: SimpleSignal<string, this>;
-    constructor(props: View2DProps);
-    dispose(): void;
-    render(context: CanvasRenderingContext2D): void;
-    /**
-     * Find a node by its key.
-     *
-     * @param key - The key of the node.
-     */
-    findKey<T extends Node = Node>(key: string): T | null;
-    protected requestLayoutUpdate(): void;
-    protected requestFontUpdate(): void;
-    view(): View2D;
+  static shadowRoot: ShadowRoot;
+  readonly playbackState: SimpleSignal<PlaybackState, this>;
+  readonly globalTime: SimpleSignal<number, this>;
+  readonly assetHash: SimpleSignal<string, this>;
+  constructor(props: View2DProps);
+  dispose(): void;
+  render(context: CanvasRenderingContext2D): void;
+  /**
+   * Find a node by its key.
+   *
+   * @param key - The key of the node.
+   */
+  findKey<T extends Node = Node>(key: string): T | null;
+  protected requestLayoutUpdate(): void;
+  protected requestFontUpdate(): void;
+  view(): View2D;
 }
-//# sourceMappingURL=View2D.d.ts.map
+//# sourceMappingURL=View2D.d.ts.map

package/lib/components/View2D.js

@@ -1,88 +1,101 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+var __decorate =
+  (this && this.__decorate) ||
+  function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r =
+        c < 3
+          ? target
+          : desc === null
+            ? (desc = Object.getOwnPropertyDescriptor(target, key))
+            : desc,
+      d;
+    if (typeof Reflect === 'object' && typeof Reflect.decorate === 'function')
+      r = Reflect.decorate(decorators, target, key, desc);
+    else
+      for (var i = decorators.length - 1; i >= 0; i--)
+        if ((d = decorators[i]))
+          r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
+  };
 var View2D_1;
-import { PlaybackState, lazy } from '@revideo/core';
-import { initial, signal } from '../decorators';
-import { nodeName } from '../decorators/nodeName';
-import { useScene2D } from '../scenes/useScene2D';
-import { Rect } from './Rect';
-let View2D = View2D_1 = class View2D extends Rect {
-    constructor(props) {
-        super({
-            composite: true,
-            fontFamily: 'Roboto',
-            fontSize: 48,
-            lineHeight: '120%',
-            textWrap: false,
-            fontStyle: 'normal',
-            ...props,
-        });
-        this.view2D = this;
-        View2D_1.shadowRoot.append(this.element);
-        this.applyFlex();
-    }
-    dispose() {
-        this.removeChildren();
-        super.dispose();
-    }
-    render(context) {
-        this.computedSize();
-        this.computedPosition();
-        super.render(context);
-    }
-    /**
-     * Find a node by its key.
-     *
-     * @param key - The key of the node.
-     */
-    findKey(key) {
-        return useScene2D().getNode(key) ?? null;
-    }
-    requestLayoutUpdate() {
-        this.updateLayout();
-    }
-    requestFontUpdate() {
-        this.applyFont();
-    }
-    view() {
-        return this;
-    }
-};
-__decorate([
-    initial(PlaybackState.Paused),
-    signal()
-], View2D.prototype, "playbackState", void 0);
-__decorate([
-    initial(0),
-    signal()
-], View2D.prototype, "globalTime", void 0);
-__decorate([
-    signal()
-], View2D.prototype, "assetHash", void 0);
-__decorate([
+import {PlaybackState, lazy} from '@revideo/core';
+import {initial, signal} from '../decorators';
+import {nodeName} from '../decorators/nodeName';
+import {useScene2D} from '../scenes/useScene2D';
+import {Rect} from './Rect';
+let View2D = (View2D_1 = class View2D extends Rect {
+  constructor(props) {
+    super({
+      composite: true,
+      fontFamily: 'Roboto',
+      fontSize: 48,
+      lineHeight: '120%',
+      textWrap: false,
+      fontStyle: 'normal',
+      ...props,
+    });
+    this.view2D = this;
+    View2D_1.shadowRoot.append(this.element);
+    this.applyFlex();
+  }
+  dispose() {
+    this.removeChildren();
+    super.dispose();
+  }
+  render(context) {
+    this.computedSize();
+    this.computedPosition();
+    super.render(context);
+  }
+  /**
+   * Find a node by its key.
+   *
+   * @param key - The key of the node.
+   */
+  findKey(key) {
+    return useScene2D().getNode(key) ?? null;
+  }
+  requestLayoutUpdate() {
+    this.updateLayout();
+  }
+  requestFontUpdate() {
+    this.applyFont();
+  }
+  view() {
+    return this;
+  }
+});
+__decorate(
+  [initial(PlaybackState.Paused), signal()],
+  View2D.prototype,
+  'playbackState',
+  void 0,
+);
+__decorate([initial(0), signal()], View2D.prototype, 'globalTime', void 0);
+__decorate([signal()], View2D.prototype, 'assetHash', void 0);
+__decorate(
+  [
     lazy(() => {
-        const frameID = 'revideo-2d-frame';
-        let frame = document.querySelector(`#${frameID}`);
-        if (!frame) {
-            frame = document.createElement('div');
-            frame.id = frameID;
-            frame.style.position = 'absolute';
-            frame.style.pointerEvents = 'none';
-            frame.style.top = '0';
-            frame.style.left = '0';
-            frame.style.opacity = '0';
-            frame.style.overflow = 'hidden';
-            document.body.prepend(frame);
-        }
-        return frame.shadowRoot ?? frame.attachShadow({ mode: 'open' });
-    })
-], View2D, "shadowRoot", void 0);
-View2D = View2D_1 = __decorate([
-    nodeName('View2D')
-], View2D);
-export { View2D };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVmlldzJELmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL1ZpZXcyRC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUEsT0FBTyxFQUFDLGFBQWEsRUFBZ0IsSUFBSSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ2hFLE9BQU8sRUFBQyxPQUFPLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQzlDLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSx3QkFBd0IsQ0FBQztBQUNoRCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFFaEQsT0FBTyxFQUFDLElBQUksRUFBWSxNQUFNLFFBQVEsQ0FBQztBQU9oQyxJQUFNLE1BQU0sY0FBWixNQUFNLE1BQU8sU0FBUSxJQUFJO0lBOEI5QixZQUFtQixLQUFrQjtRQUNuQyxLQUFLLENBQUM7WUFDSixTQUFTLEVBQUUsSUFBSTtZQUNmLFVBQVUsRUFBRSxRQUFRO1lBQ3BCLFFBQVEsRUFBRSxFQUFFO1lBQ1osVUFBVSxFQUFFLE1BQU07WUFDbEIsUUFBUSxFQUFFLEtBQUs7WUFDZixTQUFTLEVBQUUsUUFBUTtZQUNuQixHQUFHLEtBQUs7U0FDVCxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztRQUVuQixRQUFNLENBQUMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDdkMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFFZSxPQUFPO1FBQ3JCLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN0QixLQUFLLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDbEIsQ0FBQztJQUVlLE1BQU0sQ0FBQyxPQUFpQztRQUN0RCxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7UUFDeEIsS0FBSyxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUN4QixDQUFDO0lBRUQ7Ozs7T0FJRztJQUNJLE9BQU8sQ0FBd0IsR0FBVztRQUMvQyxPQUFRLFVBQVUsRUFBRSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQU8sSUFBSSxJQUFJLENBQUM7SUFDbEQsQ0FBQztJQUVrQixtQkFBbUI7UUFDcEMsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFa0IsaUJBQWlCO1FBQ2xDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRWUsSUFBSTtRQUNsQixPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7Q0FDRixDQUFBO0FBeER5QjtJQUZ2QixPQUFPLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQztJQUM3QixNQUFNLEVBQUU7NkNBQ2dFO0FBSWpEO0lBRnZCLE9BQU8sQ0FBQyxDQUFDLENBQUM7SUFDVixNQUFNLEVBQUU7MENBQ3NEO0FBR3ZDO0lBRHZCLE1BQU0sRUFBRTt5Q0FDcUQ7QUFYaEQ7SUFoQmIsSUFBSSxDQUFDLEdBQUcsRUFBRTtRQUNULE1BQU0sT0FBTyxHQUFHLGtCQUFrQixDQUFDO1FBQ25DLElBQUksS0FBSyxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQWlCLElBQUksT0FBTyxFQUFFLENBQUMsQ0FBQztRQUNsRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDWCxLQUFLLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUN0QyxLQUFLLENBQUMsRUFBRSxHQUFHLE9BQU8sQ0FBQztZQUNuQixLQUFLLENBQUMsS0FBSyxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7WUFDbEMsS0FBSyxDQUFDLEtBQUssQ0FBQyxhQUFhLEdBQUcsTUFBTSxDQUFDO1lBQ25DLEtBQUssQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQztZQUN0QixLQUFLLENBQUMsS0FBSyxDQUFDLElBQUksR0FBRyxHQUFHLENBQUM7WUFDdkIsS0FBSyxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsR0FBRyxDQUFDO1lBQzFCLEtBQUssQ0FBQyxLQUFLLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztZQUNoQyxRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMvQixDQUFDO1FBQ0QsT0FBTyxLQUFLLENBQUMsVUFBVSxJQUFJLEtBQUssQ0FBQyxZQUFZLENBQUMsRUFBQyxJQUFJLEVBQUUsTUFBTSxFQUFDLENBQUMsQ0FBQztJQUNoRSxDQUFDLENBQUM7Z0NBQ21DO0FBakIxQixNQUFNO0lBRGxCLFFBQVEsQ0FBQyxRQUFRLENBQUM7R0FDTixNQUFNLENBNkVsQiJ9
+      const frameID = 'revideo-2d-frame';
+      let frame = document.querySelector(`#${frameID}`);
+      if (!frame) {
+        frame = document.createElement('div');
+        frame.id = frameID;
+        frame.style.position = 'absolute';
+        frame.style.pointerEvents = 'none';
+        frame.style.top = '0';
+        frame.style.left = '0';
+        frame.style.opacity = '0';
+        frame.style.overflow = 'hidden';
+        document.body.prepend(frame);
+      }
+      return frame.shadowRoot ?? frame.attachShadow({mode: 'open'});
+    }),
+  ],
+  View2D,
+  'shadowRoot',
+  void 0,
+);
+View2D = View2D_1 = __decorate([nodeName('View2D')], View2D);
+export {View2D};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVmlldzJELmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL1ZpZXcyRC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUEsT0FBTyxFQUFDLGFBQWEsRUFBZ0IsSUFBSSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ2hFLE9BQU8sRUFBQyxPQUFPLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQzlDLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSx3QkFBd0IsQ0FBQztBQUNoRCxPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sc0JBQXNCLENBQUM7QUFFaEQsT0FBTyxFQUFDLElBQUksRUFBWSxNQUFNLFFBQVEsQ0FBQztBQU9oQyxJQUFNLE1BQU0sY0FBWixNQUFNLE1BQU8sU0FBUSxJQUFJO0lBOEI5QixZQUFtQixLQUFrQjtRQUNuQyxLQUFLLENBQUM7WUFDSixTQUFTLEVBQUUsSUFBSTtZQUNmLFVBQVUsRUFBRSxRQUFRO1lBQ3BCLFFBQVEsRUFBRSxFQUFFO1lBQ1osVUFBVSxFQUFFLE1BQU07WUFDbEIsUUFBUSxFQUFFLEtBQUs7WUFDZixTQUFTLEVBQUUsUUFBUTtZQUNuQixHQUFHLEtBQUs7U0FDVCxDQUFDLENBQUM7UUFDSCxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztRQUVuQixRQUFNLENBQUMsVUFBVSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDdkMsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO0lBQ25CLENBQUM7SUFFZSxPQUFPO1FBQ3JCLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN0QixLQUFLLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDbEIsQ0FBQztJQUVlLE1BQU0sQ0FBQyxPQUFpQztRQUN0RCxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7UUFDeEIsS0FBSyxDQUFDLE1BQU0sQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUN4QixDQUFDO0lBRUQ7Ozs7T0FJRztJQUNJLE9BQU8sQ0FBd0IsR0FBVztRQUMvQyxPQUFRLFVBQVUsRUFBRSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQU8sSUFBSSxJQUFJLENBQUM7SUFDbEQsQ0FBQztJQUVrQixtQkFBbUI7UUFDcEMsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFa0IsaUJBQWlCO1FBQ2xDLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQztJQUNuQixDQUFDO0lBRWUsSUFBSTtRQUNsQixPQUFPLElBQUksQ0FBQztJQUNkLENBQUM7Q0FDRixDQUFBO0FBeER5QjtJQUZ2QixPQUFPLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQztJQUM3QixNQUFNLEVBQUU7NkNBQ2dFO0FBSWpEO0lBRnZCLE9BQU8sQ0FBQyxDQUFDLENBQUM7SUFDVixNQUFNLEVBQUU7MENBQ3NEO0FBR3ZDO0lBRHZCLE1BQU0sRUFBRTt5Q0FDcUQ7QUFYaEQ7SUFoQmIsSUFBSSxDQUFDLEdBQUcsRUFBRTtRQUNULE1BQU0sT0FBTyxHQUFHLGtCQUFrQixDQUFDO1FBQ25DLElBQUksS0FBSyxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQWlCLElBQUksT0FBTyxFQUFFLENBQUMsQ0FBQztRQUNsRSxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDWCxLQUFLLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUN0QyxLQUFLLENBQUMsRUFBRSxHQUFHLE9BQU8sQ0FBQztZQUNuQixLQUFLLENBQUMsS0FBSyxDQUFDLFFBQVEsR0FBRyxVQUFVLENBQUM7WUFDbEMsS0FBSyxDQUFDLEtBQUssQ0FBQyxhQUFhLEdBQUcsTUFBTSxDQUFDO1lBQ25DLEtBQUssQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLEdBQUcsQ0FBQztZQUN0QixLQUFLLENBQUMsS0FBSyxDQUFDLElBQUksR0FBRyxHQUFHLENBQUM7WUFDdkIsS0FBSyxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsR0FBRyxDQUFDO1lBQzFCLEtBQUssQ0FBQyxLQUFLLENBQUMsUUFBUSxHQUFHLFFBQVEsQ0FBQztZQUNoQyxRQUFRLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUMvQixDQUFDO1FBQ0QsT0FBTyxLQUFLLENBQUMsVUFBVSxJQUFJLEtBQUssQ0FBQyxZQUFZLENBQUMsRUFBQyxJQUFJLEVBQUUsTUFBTSxFQUFDLENBQUMsQ0FBQztJQUNoRSxDQUFDLENBQUM7Z0NBQ21DO0FBakIxQixNQUFNO0lBRGxCLFFBQVEsQ0FBQyxRQUFRLENBQUM7R0FDTixNQUFNLENBNkVsQiJ9

package/lib/components/index.d.ts

@@ -24,4 +24,4 @@ export * from './Txt';
 export * from './Video';
 export * from './View2D';
 export * from './types';
-//# sourceMappingURL=index.d.ts.map
+//# sourceMappingURL=index.d.ts.map

package/lib/components/index.js

@@ -24,4 +24,4 @@ export * from './Txt';
 export * from './Video';
 export * from './View2D';
 export * from './types';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxXQUFXLENBQUM7QUFDMUIsY0FBYyxjQUFjLENBQUM7QUFDN0IsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxTQUFTLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxlQUFlLENBQUM7QUFDOUIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxXQUFXLENBQUM7QUFDMUIsY0FBYyxjQUFjLENBQUM7QUFDN0IsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxRQUFRLENBQUM7QUFDdkIsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxPQUFPLENBQUM7QUFDdEIsY0FBYyxTQUFTLENBQUM7QUFDeEIsY0FBYyxVQUFVLENBQUM7QUFDekIsY0FBYyxTQUFTLENBQUMifQ==

package/lib/components/types.d.ts

@@ -1,17 +1,30 @@
-import type { ReferenceReceiver } from '@revideo/core';
-import type { Node } from './Node';
-export type ComponentChild = Node | object | string | number | bigint | boolean | null | undefined;
+import type {ReferenceReceiver} from '@revideo/core';
+import type {Node} from './Node';
+export type ComponentChild =
+  | Node
+  | object
+  | string
+  | number
+  | bigint
+  | boolean
+  | null
+  | undefined;
 export type ComponentChildren = ComponentChild | ComponentChild[];
 export type NodeChildren = Node | Node[];
-export type PropsOf<T> = T extends NodeConstructor<infer P> ? P : T extends FunctionComponent<infer P> ? P : never;
+export type PropsOf<T> =
+  T extends NodeConstructor<infer P>
+    ? P
+    : T extends FunctionComponent<infer P>
+      ? P
+      : never;
 export interface JSXProps {
-    children?: ComponentChildren;
-    ref?: ReferenceReceiver<Node>;
+  children?: ComponentChildren;
+  ref?: ReferenceReceiver<Node>;
 }
 export interface FunctionComponent<T = any> {
-    (props: T): Node | null;
+  (props: T): Node | null;
 }
 export interface NodeConstructor<TProps = any, TNode = Node> {
-    new (props: TProps): TNode;
+  new (props: TProps): TNode;
 }
-//# sourceMappingURL=types.d.ts.map
+//# sourceMappingURL=types.d.ts.map

package/lib/components/types.js

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvdHlwZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvdHlwZXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiJ9