@revideo/2d 0.1.0

package/lib/components/Txt.js

@@ -0,0 +1,168 @@
+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 Txt_1;
+import { DEFAULT, all, capitalize, threadable, } from '@revideo/core';
+import { computed, initial, nodeName, signal } from '../decorators';
+import { is } from '../utils';
+import { Shape } from './Shape';
+import { TxtLeaf } from './TxtLeaf';
+let Txt = Txt_1 = class Txt extends Shape {
+    /**
+     * Create a bold text node.
+     *
+     * @remarks
+     * This is a shortcut for
+     * ```tsx
+     * <Txt fontWeight={700} />
+     * ```
+     *
+     * @param props - Additional text properties.
+     */
+    static b(props) {
+        return new Txt_1({ ...props, fontWeight: 700 });
+    }
+    /**
+     * Create an italic text node.
+     *
+     * @remarks
+     * This is a shortcut for
+     * ```tsx
+     * <Txt fontStyle={'italic'} />
+     * ```
+     *
+     * @param props - Additional text properties.
+     */
+    static i(props) {
+        return new Txt_1({ ...props, fontStyle: 'italic' });
+    }
+    getText() {
+        return this.innerText();
+    }
+    setText(value) {
+        const children = this.children();
+        let leaf = null;
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            if (leaf === null && child instanceof TxtLeaf) {
+                leaf = child;
+            }
+            else {
+                child.parent(null);
+            }
+        }
+        if (leaf === null) {
+            leaf = new TxtLeaf({ text: value });
+            leaf.parent(this);
+        }
+        else {
+            leaf.text(value);
+        }
+        this.setParsedChildren([leaf]);
+    }
+    setChildren(value) {
+        if (this.children.context.raw() === value) {
+            return;
+        }
+        if (typeof value === 'string') {
+            this.text(value);
+        }
+        else {
+            super.setChildren(value);
+        }
+    }
+    *tweenText(value, time, timingFunction, interpolationFunction) {
+        const children = this.children();
+        if (children.length !== 1 || !(children[0] instanceof TxtLeaf)) {
+            this.text.save();
+        }
+        const leaf = this.childAs(0);
+        const oldText = leaf.text.context.raw();
+        const oldSize = this.size.context.raw();
+        leaf.text(value);
+        const newSize = this.size();
+        leaf.text(oldText ?? DEFAULT);
+        if (this.height() === 0) {
+            this.height(newSize.height);
+        }
+        yield* all(this.size(newSize, time, timingFunction), leaf.text(value, time, timingFunction, interpolationFunction));
+        this.children.context.setter(value);
+        this.size(oldSize);
+    }
+    getLayout() {
+        return true;
+    }
+    constructor({ children, text, ...props }) {
+        super(props);
+        this.children(text ?? children);
+    }
+    innerText() {
+        const children = this.childrenAs();
+        let text = '';
+        for (const child of children) {
+            text += child.text();
+        }
+        return text;
+    }
+    parentTxt() {
+        const parent = this.parent();
+        return parent instanceof Txt_1 ? parent : null;
+    }
+    parseChildren(children) {
+        const result = [];
+        const array = Array.isArray(children) ? children : [children];
+        for (const child of array) {
+            if (child instanceof Txt_1 || child instanceof TxtLeaf) {
+                result.push(child);
+            }
+            else if (typeof child === 'string') {
+                result.push(new TxtLeaf({ text: child }));
+            }
+        }
+        return result;
+    }
+    applyFlex() {
+        super.applyFlex();
+        this.element.style.display = this.findAncestor(is(Txt_1))
+            ? 'inline'
+            : 'block';
+    }
+    draw(context) {
+        this.drawChildren(context);
+    }
+};
+__decorate([
+    initial(''),
+    signal()
+], Txt.prototype, "text", void 0);
+__decorate([
+    threadable()
+], Txt.prototype, "tweenText", null);
+__decorate([
+    computed()
+], Txt.prototype, "innerText", null);
+__decorate([
+    computed()
+], Txt.prototype, "parentTxt", null);
+Txt = Txt_1 = __decorate([
+    nodeName('Txt')
+], Txt);
+export { Txt };
+[
+    'fill',
+    'stroke',
+    'lineWidth',
+    'strokeFirst',
+    'lineCap',
+    'lineJoin',
+    'lineDash',
+    'lineDashOffset',
+].forEach(prop => {
+    Txt.prototype[`getDefault${capitalize(prop)}`] = function (initial) {
+        return this.parentTxt()?.[prop]() ?? initial;
+    };
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVHh0LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb21wb25lbnRzL1R4dC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7O0FBQUEsT0FBTyxFQUNMLE9BQU8sRUFNUCxHQUFHLEVBQ0gsVUFBVSxFQUNWLFVBQVUsR0FDWCxNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUMsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ2xFLE9BQU8sRUFBQyxFQUFFLEVBQUMsTUFBTSxVQUFVLENBQUM7QUFFNUIsT0FBTyxFQUFDLEtBQUssRUFBYSxNQUFNLFNBQVMsQ0FBQztBQUMxQyxPQUFPLEVBQUMsT0FBTyxFQUFDLE1BQU0sV0FBVyxDQUFDO0FBWTNCLElBQU0sR0FBRyxXQUFULE1BQU0sR0FBSSxTQUFRLEtBQUs7SUFDNUI7Ozs7Ozs7Ozs7T0FVRztJQUNJLE1BQU0sQ0FBQyxDQUFDLENBQUMsS0FBZTtRQUM3QixPQUFPLElBQUksS0FBRyxDQUFDLEVBQUMsR0FBRyxLQUFLLEVBQUUsVUFBVSxFQUFFLEdBQUcsRUFBQyxDQUFDLENBQUM7SUFDOUMsQ0FBQztJQUVEOzs7Ozs7Ozs7O09BVUc7SUFDSSxNQUFNLENBQUMsQ0FBQyxDQUFDLEtBQWU7UUFDN0IsT0FBTyxJQUFJLEtBQUcsQ0FBQyxFQUFDLEdBQUcsS0FBSyxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUMsQ0FBQyxDQUFDO0lBQ2xELENBQUM7SUFNUyxPQUFPO1FBQ2YsT0FBTyxJQUFJLENBQUMsU0FBUyxFQUFFLENBQUM7SUFDMUIsQ0FBQztJQUVTLE9BQU8sQ0FBQyxLQUEwQjtRQUMxQyxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7UUFDakMsSUFBSSxJQUFJLEdBQW1CLElBQUksQ0FBQztRQUNoQyxLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcs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

package/lib/components/TxtLeaf.d.ts

@@ -0,0 +1,20 @@
+import { BBox, SignalValue, SimpleSignal } from '@revideo/core';
+import { Shape, ShapeProps } from './Shape';
+import { Txt } from './Txt';
+export interface TxtLeafProps extends ShapeProps {
+    children?: string;
+    text?: SignalValue<string>;
+}
+export declare class TxtLeaf extends Shape {
+    protected static formatter: HTMLDivElement;
+    protected static readonly segmenter: any;
+    readonly text: SimpleSignal<string, this>;
+    constructor({ children, ...rest }: TxtLeafProps);
+    protected parentTxt(): Txt | null;
+    protected draw(context: CanvasRenderingContext2D): void;
+    protected drawText(context: CanvasRenderingContext2D, text: string, box: BBox): void;
+    protected getCacheBBox(): BBox;
+    protected applyFlex(): void;
+    protected updateLayout(): void;
+}
+//# sourceMappingURL=TxtLeaf.d.ts.map

package/lib/components/TxtLeaf.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TxtLeaf.d.ts","sourceRoot":"","sources":["../../src/lib/components/TxtLeaf.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,WAAW,EACX,YAAY,EAIb,MAAM,eAAe,CAAC;AAQvB,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,YAAa,SAAQ,UAAU;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,qBACa,OAAQ,SAAQ,KAAK;IAMhC,SAAS,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC;IAW3C,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,SAAS,EAAE,GAAG,CAAC;IAEzC,SAGwB,IAAI,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;gBAEtC,EAAC,QAAQ,EAAE,GAAG,IAAI,EAAC,EAAE,YAAY;IAQpD,SAAS,CAAC,SAAS;cAKA,IAAI,CAAC,OAAO,EAAE,wBAAwB;IAyCzD,SAAS,CAAC,QAAQ,CAChB,OAAO,EAAE,wBAAwB,EACjC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,IAAI;cAoBQ,YAAY,IAAI,IAAI;cAepB,SAAS;cAKT,YAAY;CAmChC"}

package/lib/components/TxtLeaf.js

@@ -0,0 +1,174 @@
+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 TxtLeaf_1;
+import { BBox, capitalize, lazy, textLerp, } from '@revideo/core';
+import { computed, initial, interpolation, nodeName, signal, } from '../decorators';
+import { Shape } from './Shape';
+import { Txt } from './Txt';
+import { View2D } from './View2D';
+let TxtLeaf = TxtLeaf_1 = class TxtLeaf extends Shape {
+    constructor({ children, ...rest }) {
+        super(rest);
+        if (children) {
+            this.text(children);
+        }
+    }
+    parentTxt() {
+        const parent = this.parent();
+        return parent instanceof Txt ? parent : null;
+    }
+    draw(context) {
+        this.requestFontUpdate();
+        this.applyStyle(context);
+        this.applyText(context);
+        context.font = this.styles.font;
+        if ('letterSpacing' in context) {
+            context.letterSpacing = `${this.letterSpacing()}px`;
+        }
+        const parentRect = this.element.getBoundingClientRect();
+        const { width, height } = this.size();
+        const range = document.createRange();
+        let line = '';
+        const lineRect = new BBox();
+        for (const childNode of this.element.childNodes) {
+            if (!childNode.textContent) {
+                continue;
+            }
+            range.selectNodeContents(childNode);
+            const rangeRect = range.getBoundingClientRect();
+            const x = width / -2 + rangeRect.left - parentRect.left;
+            const y = height / -2 + rangeRect.top - parentRect.top;
+            if (lineRect.y === y) {
+                lineRect.width += rangeRect.width;
+                line += childNode.textContent;
+            }
+            else {
+                this.drawText(context, line, lineRect);
+                lineRect.x = x;
+                lineRect.y = y;
+                lineRect.width = rangeRect.width;
+                lineRect.height = rangeRect.height;
+                line = childNode.textContent;
+            }
+        }
+        this.drawText(context, line, lineRect);
+    }
+    drawText(context, text, box) {
+        const y = box.y + box.height / 2;
+        context.save();
+        context.textBaseline = 'middle';
+        text = text.replace(/\s+/g, ' ');
+        if (this.lineWidth() <= 0) {
+            context.fillText(text, box.x, y);
+        }
+        else if (this.strokeFirst()) {
+            context.strokeText(text, box.x, y);
+            context.fillText(text, box.x, y);
+        }
+        else {
+            context.fillText(text, box.x, y);
+            context.strokeText(text, box.x, y);
+        }
+        context.restore();
+    }
+    getCacheBBox() {
+        const size = this.computedSize();
+        const range = document.createRange();
+        range.selectNodeContents(this.element);
+        const bbox = range.getBoundingClientRect();
+        const lineWidth = this.lineWidth();
+        // We take the default value of the miterLimit as 10.
+        const miterLimitCoefficient = this.lineJoin() === 'miter' ? 0.5 * 10 : 0.5;
+        return new BBox(-size.width / 2, -size.height / 2, bbox.width, bbox.height)
+            .expand([0, this.fontSize() * 0.5])
+            .expand(lineWidth * miterLimitCoefficient);
+    }
+    applyFlex() {
+        super.applyFlex();
+        this.element.style.display = 'inline';
+    }
+    updateLayout() {
+        this.applyFont();
+        this.applyFlex();
+        // Make sure the text is aligned correctly even if the text is smaller than
+        // the container.
+        if (this.justifyContent.isInitial()) {
+            this.element.style.justifyContent =
+                this.styles.getPropertyValue('text-align');
+        }
+        const wrap = this.styles.whiteSpace !== 'nowrap' && this.styles.whiteSpace !== 'pre';
+        if (wrap) {
+            this.element.innerText = '';
+            if (TxtLeaf_1.segmenter) {
+                for (const word of TxtLeaf_1.segmenter.segment(this.text())) {
+                    this.element.appendChild(document.createTextNode(word.segment));
+                }
+            }
+            else {
+                for (const word of this.text().split('')) {
+                    this.element.appendChild(document.createTextNode(word));
+                }
+            }
+        }
+        else if (this.styles.whiteSpace === 'pre') {
+            this.element.innerText = '';
+            for (const line of this.text().split('\n')) {
+                this.element.appendChild(document.createTextNode(line + '\n'));
+            }
+        }
+        else {
+            this.element.innerText = this.text();
+        }
+    }
+};
+__decorate([
+    initial(''),
+    interpolation(textLerp),
+    signal()
+], TxtLeaf.prototype, "text", void 0);
+__decorate([
+    computed()
+], TxtLeaf.prototype, "parentTxt", null);
+__decorate([
+    lazy(() => {
+        const formatter = document.createElement('span');
+        View2D.shadowRoot.append(formatter);
+        return formatter;
+    })
+], TxtLeaf, "formatter", void 0);
+__decorate([
+    lazy(() => {
+        try {
+            return new Intl.Segmenter(undefined, {
+                granularity: 'grapheme',
+            });
+        }
+        catch (e) {
+            return null;
+        }
+    })
+], TxtLeaf, "segmenter", void 0);
+TxtLeaf = TxtLeaf_1 = __decorate([
+    nodeName('TxtLeaf')
+], TxtLeaf);
+export { TxtLeaf };
+[
+    'fill',
+    'stroke',
+    'lineWidth',
+    'strokeFirst',
+    'lineCap',
+    'lineJoin',
+    'lineDash',
+    'lineDashOffset',
+].forEach(prop => {
+    TxtLeaf.prototype[`get${capitalize(prop)}`] = function () {
+        return (this.parentTxt()?.[prop]() ??
+            this[prop].context.getInitial());
+    };
+});
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiVHh0TGVhZi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9UeHRMZWFmLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsSUFBSSxFQUdKLFVBQVUsRUFDVixJQUFJLEVBQ0osUUFBUSxHQUNULE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFDTCxRQUFRLEVBQ1IsT0FBTyxFQUNQLGFBQWEsRUFDYixRQUFRLEVBQ1IsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBQyxLQUFLLEVBQWEsTUFBTSxTQUFTLENBQUM7QUFDMUMsT0FBTyxFQUFDLEdBQUcsRUFBQyxNQUFNLE9BQU8sQ0FBQztBQUMxQixPQUFPLEVBQUMsTUFBTSxFQUFDLE1BQU0sVUFBVSxDQUFDO0FBUXpCLElBQU0sT0FBTyxlQUFiLE1BQU0sT0FBUSxTQUFRLEtBQUs7SUF3QmhDLFlBQW1CLEVBQUMsUUFBUSxFQUFFLEdBQUcsSUFBSSxFQUFlO1FBQ2xELEtBQUssQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNaLElBQUksUUFBUSxFQUFFLENBQUM7WUFDYixJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3RCLENBQUM7SUFDSCxDQUFDO0lBR1MsU0FBUztRQUNqQixNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7UUFDN0IsT0FBTyxNQUFNLFlBQVksR0FBRyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztJQUMvQyxDQUFDO0lBRWtCLElBQUksQ0FBQyxPQUFpQztRQUN2RCxJQUFJLENBQUMsaUJBQWlCLEVBQUUsQ0FBQztRQUN6QixJQUFJLENBQUMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxTQUFTLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDeEIsT0FBTyxDQUFDLElBQUks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

package/lib/components/Video.d.ts

@@ -0,0 +1,45 @@
+import { SerializedVector2, SignalValue, SimpleSignal } from '@revideo/core';
+import { DesiredLength } from '../partials';
+import { Media, MediaProps } from './Media';
+export interface VideoProps extends MediaProps {
+    /**
+     * {@inheritDoc Video.alpha}
+     */
+    alpha?: SignalValue<number>;
+    /**
+     * {@inheritDoc Video.smoothing}
+     */
+    smoothing?: SignalValue<boolean>;
+}
+export declare class Video extends Media {
+    /**
+     * The alpha value of this video.
+     *
+     * @remarks
+     * Unlike opacity, the alpha value affects only the video itself, leaving the
+     * fill, stroke, and children intact.
+     */
+    readonly alpha: SimpleSignal<number, this>;
+    /**
+     * Whether the video should be smoothed.
+     *
+     * @remarks
+     * When disabled, the video will be scaled using the nearest neighbor
+     * interpolation with no smoothing. The resulting video will appear pixelated.
+     *
+     * @defaultValue true
+     */
+    readonly smoothing: SimpleSignal<boolean, this>;
+    private static readonly pool;
+    constructor(props: VideoProps);
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected mediaElement(): HTMLVideoElement;
+    protected seekedMedia(): HTMLVideoElement;
+    protected fastSeekedMedia(): HTMLVideoElement;
+    private video;
+    protected seekedVideo(): HTMLVideoElement;
+    protected fastSeekedVideo(): HTMLVideoElement;
+    protected draw(context: CanvasRenderingContext2D): void;
+    protected applyFlex(): void;
+}
+//# sourceMappingURL=Video.d.ts.map

package/lib/components/Video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Video.d.ts","sourceRoot":"","sources":["../../src/lib/components/Video.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,iBAAiB,EACjB,WAAW,EACX,YAAY,EAEb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC;AAE1C,MAAM,WAAW,UAAW,SAAQ,UAAU;IAC5C;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAClC;AAED,qBACa,KAAM,SAAQ,KAAK;IAC9B;;;;;;OAMG;IACH,SAEwB,KAAK,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE1D;;;;;;;;OAQG;IACH,SAEwB,SAAS,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAE/D,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAwC;gBAEjD,KAAK,EAAE,UAAU;cAIjB,WAAW,IAAI,iBAAiB,CAAC,aAAa,CAAC;IAalE,SAAS,CAAC,YAAY,IAAI,gBAAgB;IAI1C,SAAS,CAAC,WAAW,IAAI,gBAAgB;IAIzC,SAAS,CAAC,eAAe,IAAI,gBAAgB;IAK7C,OAAO,CAAC,KAAK;IA2Bb,SAAS,CAAC,WAAW,IAAI,gBAAgB;IAoBzC,SAAS,CAAC,eAAe,IAAI,gBAAgB;cA+B1B,IAAI,CAAC,OAAO,EAAE,wBAAwB;cA6BtC,SAAS;CAO7B"}

package/lib/components/Video.js

@@ -0,0 +1,148 @@
+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);
+    }
+    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;
+    }
+    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;
+        }
+        if (video.readyState < 2) {
+            DependencyContext.collectPromise(new Promise(resolve => {
+                const listener = () => {
+                    resolve();
+                    video.removeEventListener('canplay', listener);
+                };
+                video.addEventListener('canplay', listener);
+            }));
+        }
+        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;
+    }
+    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;
+    }
+    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);
+    }
+    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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

package/lib/components/View2D.d.ts

@@ -0,0 +1,25 @@
+import { PlaybackState, SimpleSignal } from '@revideo/core';
+import type { Node } from './Node';
+import { Rect, RectProps } from './Rect';
+export interface View2DProps extends RectProps {
+    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;
+}
+//# sourceMappingURL=View2D.d.ts.map

package/lib/components/View2D.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"View2D.d.ts","sourceRoot":"","sources":["../../src/lib/components/View2D.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,YAAY,EAAO,MAAM,eAAe,CAAC;AAIhE,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,QAAQ,CAAC;AACjC,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,qBACa,MAAO,SAAQ,IAAI;IAC9B,OAgBc,UAAU,EAAE,UAAU,CAAC;IAErC,SAEwB,aAAa,EAAE,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;IAEzE,SAEwB,UAAU,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE/D,SACwB,SAAS,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;gBAE3C,KAAK,EAAE,WAAW;IAgBrB,OAAO;IAKP,MAAM,CAAC,OAAO,EAAE,wBAAwB;IAMxD;;;;OAIG;IACI,OAAO,CAAC,CAAC,SAAS,IAAI,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;cAIzC,mBAAmB;cAInB,iBAAiB;IAIpB,IAAI,IAAI,MAAM;CAG/B"}