@revideo/2d 0.1.0

package/lib/components/Line.d.ts

@@ -0,0 +1,158 @@
+import { BBox, PossibleVector2, SignalValue, SimpleSignal, ThreadGenerator, TimingFunction, Vector2 } from '@revideo/core';
+import { CurveProfile } from '../curves';
+import { Curve, CurveProps } from './Curve';
+export interface LineProps extends CurveProps {
+    /**
+     * {@inheritDoc Line.radius}
+     */
+    radius?: SignalValue<number>;
+    /**
+     * {@inheritDoc Line.points}
+     */
+    points?: SignalValue<SignalValue<PossibleVector2>[]>;
+}
+/**
+ * A node for drawing lines and polygons.
+ *
+ * @remarks
+ * This node can be used to render any polygonal shape defined by a set of
+ * points.
+ *
+ * @preview
+ * ```tsx editor
+ * // snippet Simple line
+ * import {makeScene2D, Line} from '@revideo/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [150, 50],
+ *         [0, -50],
+ *         [-150, 50],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       radius={40}
+ *       startArrow
+ *     />,
+ *   );
+ * });
+ *
+ * // snippet Polygon
+ * import {makeScene2D, Line} from '@revideo/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [-200, 70],
+ *         [150, 70],
+ *         [100, -70],
+ *         [-100, -70],
+ *       ]}
+ *       fill={'lightseagreen'}
+ *       closed
+ *     />,
+ *   );
+ * });
+ *
+ * // snippet Using signals
+ * import {makeScene2D, Line} from '@revideo/2d';
+ * import {createSignal} from '@revideo/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const tip = createSignal(-150);
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [-150, 70],
+ *         [150, 70],
+ *         // this point is dynamically calculated based on the signal:
+ *         () => [tip(), -70],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       closed
+ *     />,
+ *   );
+ *
+ *   yield* tip(150, 1).back(1);
+ * });
+ *
+ * // snippet Tweening points
+ * import {makeScene2D, Line} from '@revideo/2d';
+ * import {createRef} from '@revideo/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const line = createRef<Line>();
+ *   view.add(
+ *     <Line
+ *       ref={line}
+ *       points={[
+ *         [-150, 70],
+ *         [150, 70],
+ *         [0, -70],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       radius={20}
+ *       closed
+ *     />,
+ *   );
+ *
+ *   yield* line()
+ *     .points(
+ *       [
+ *         [-150, 0],
+ *         [0, 100],
+ *         [150, 0],
+ *         [150, -70],
+ *         [-150, -70],
+ *       ],
+ *       2,
+ *     )
+ *     .back(2);
+ * });
+ * ```
+ */
+export declare class Line extends Curve {
+    /**
+     * Rotate the points to minimize the overall distance traveled when tweening.
+     *
+     * @param points - The points to rotate.
+     * @param reference - The reference points to which the distance is measured.
+     * @param closed - Whether the points form a closed polygon.
+     */
+    private static rotatePoints;
+    /**
+     * Distribute additional points along the polyline.
+     *
+     * @param points - The points of a polyline along which new points should be
+     *                 distributed.
+     * @param count - The number of points to add.
+     */
+    private static distributePoints;
+    /**
+     * The radius of the line's corners.
+     */
+    readonly radius: SimpleSignal<number, this>;
+    /**
+     * The points of the line.
+     *
+     * @remarks
+     * When set to `null`, the Line will use the positions of its children as
+     * points.
+     */
+    readonly points: SimpleSignal<SignalValue<PossibleVector2>[] | null, this>;
+    protected tweenPoints(value: SignalValue<SignalValue<PossibleVector2>[] | null>, time: number, timingFunction: TimingFunction): ThreadGenerator;
+    private tweenedPoints;
+    constructor(props: LineProps);
+    protected childrenBBox(): BBox;
+    parsedPoints(): Vector2[];
+    profile(): CurveProfile;
+    protected lineWidthCoefficient(): number;
+    drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
+    private parsePoints;
+}
+//# sourceMappingURL=Line.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../src/lib/components/Line.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EAEJ,eAAe,EACf,WAAW,EACX,YAAY,EAEZ,eAAe,EACf,cAAc,EAId,OAAO,EACR,MAAM,eAAe,CAAC;AACvB,OAAO,EAAC,YAAY,EAAqB,MAAM,WAAW,CAAC;AAS3D,OAAO,EAAC,KAAK,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC;AAG1C,MAAM,WAAW,SAAU,SAAQ,UAAU;IAC3C;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;CACtD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG;AACH,qBACa,IAAK,SAAQ,KAAK;IAC7B;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,CAAC,YAAY;IAkC3B;;;;;;OAMG;IACH,OAAO,CAAC,MAAM,CAAC,gBAAgB;IA2C/B;;OAEG;IACH,SAEwB,MAAM,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE3D;;;;;;OAMG;IACH,SAEwB,MAAM,EAAE,YAAY,CAC1C,WAAW,CAAC,eAAe,CAAC,EAAE,GAAG,IAAI,EACrC,IAAI,CACL,CAAC;IAGF,SAAS,CAAE,WAAW,CACpB,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,eAAe,CAAC,EAAE,GAAG,IAAI,CAAC,EACzD,IAAI,EAAE,MAAM,EACZ,cAAc,EAAE,cAAc,GAC7B,eAAe;IAuBlB,OAAO,CAAC,aAAa,CAAwC;gBAE1C,KAAK,EAAE,SAAS;IAanC,SAAS,CAAC,YAAY;IAef,YAAY,IAAI,OAAO,EAAE;IAKhB,OAAO,IAAI,YAAY;cAQpB,oBAAoB,IAAI,MAAM;IAgBjC,WAAW,CACzB,OAAO,EAAE,wBAAwB,EACjC,MAAM,EAAE,SAAS;IAuCnB,OAAO,CAAC,WAAW;CAKpB"}

package/lib/components/Line.js

@@ -0,0 +1,312 @@
+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 Line_1;
+import { BBox, createSignal, threadable, tween, unwrap, useLogger, Vector2, } from '@revideo/core';
+import { getPolylineProfile } from '../curves';
+import { calculateLerpDistance, polygonLength, polygonPointsLerp, } from '../curves/createCurveProfileLerp';
+import { computed, initial, nodeName, signal } from '../decorators';
+import { arc, drawLine, drawPivot, lineTo, moveTo } from '../utils';
+import { Curve } from './Curve';
+import { Layout } from './Layout';
+/**
+ * A node for drawing lines and polygons.
+ *
+ * @remarks
+ * This node can be used to render any polygonal shape defined by a set of
+ * points.
+ *
+ * @preview
+ * ```tsx editor
+ * // snippet Simple line
+ * import {makeScene2D, Line} from '@revideo/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [150, 50],
+ *         [0, -50],
+ *         [-150, 50],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       radius={40}
+ *       startArrow
+ *     />,
+ *   );
+ * });
+ *
+ * // snippet Polygon
+ * import {makeScene2D, Line} from '@revideo/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [-200, 70],
+ *         [150, 70],
+ *         [100, -70],
+ *         [-100, -70],
+ *       ]}
+ *       fill={'lightseagreen'}
+ *       closed
+ *     />,
+ *   );
+ * });
+ *
+ * // snippet Using signals
+ * import {makeScene2D, Line} from '@revideo/2d';
+ * import {createSignal} from '@revideo/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const tip = createSignal(-150);
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [-150, 70],
+ *         [150, 70],
+ *         // this point is dynamically calculated based on the signal:
+ *         () => [tip(), -70],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       closed
+ *     />,
+ *   );
+ *
+ *   yield* tip(150, 1).back(1);
+ * });
+ *
+ * // snippet Tweening points
+ * import {makeScene2D, Line} from '@revideo/2d';
+ * import {createRef} from '@revideo/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const line = createRef<Line>();
+ *   view.add(
+ *     <Line
+ *       ref={line}
+ *       points={[
+ *         [-150, 70],
+ *         [150, 70],
+ *         [0, -70],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       radius={20}
+ *       closed
+ *     />,
+ *   );
+ *
+ *   yield* line()
+ *     .points(
+ *       [
+ *         [-150, 0],
+ *         [0, 100],
+ *         [150, 0],
+ *         [150, -70],
+ *         [-150, -70],
+ *       ],
+ *       2,
+ *     )
+ *     .back(2);
+ * });
+ * ```
+ */
+let Line = Line_1 = class Line extends Curve {
+    /**
+     * Rotate the points to minimize the overall distance traveled when tweening.
+     *
+     * @param points - The points to rotate.
+     * @param reference - The reference points to which the distance is measured.
+     * @param closed - Whether the points form a closed polygon.
+     */
+    static rotatePoints(points, reference, closed) {
+        if (closed) {
+            let minDistance = Infinity;
+            let bestOffset = 0;
+            for (let offset = 0; offset < points.length; offset += 1) {
+                const distance = calculateLerpDistance(points, reference, offset);
+                if (distance < minDistance) {
+                    minDistance = distance;
+                    bestOffset = offset;
+                }
+            }
+            if (bestOffset) {
+                const spliced = points.splice(0, bestOffset);
+                points.splice(points.length, 0, ...spliced);
+            }
+        }
+        else {
+            const originalDistance = calculateLerpDistance(points, reference, 0);
+            const reversedPoints = [...points].reverse();
+            const reversedDistance = calculateLerpDistance(reversedPoints, reference, 0);
+            if (reversedDistance < originalDistance) {
+                points.reverse();
+            }
+        }
+    }
+    /**
+     * Distribute additional points along the polyline.
+     *
+     * @param points - The points of a polyline along which new points should be
+     *                 distributed.
+     * @param count - The number of points to add.
+     */
+    static distributePoints(points, count) {
+        if (points.length === 0) {
+            for (let j = 0; j < count; j++) {
+                points.push(Vector2.zero);
+            }
+            return;
+        }
+        if (points.length === 1) {
+            const point = points[0];
+            for (let j = 0; j < count; j++) {
+                points.push(point);
+            }
+            return;
+        }
+        const desiredLength = points.length + count;
+        const arcLength = polygonLength(points);
+        let density = count / arcLength;
+        let i = 0;
+        while (points.length < desiredLength) {
+            const pointsLeft = desiredLength - points.length;
+            if (i + 1 >= points.length) {
+                density = pointsLeft / arcLength;
+                i = 0;
+                continue;
+            }
+            const a = points[i];
+            const b = points[i + 1];
+            const length = a.sub(b).magnitude;
+            const pointCount = Math.min(Math.round(length * density), pointsLeft) + 1;
+            for (let j = 1; j < pointCount; j++) {
+                points.splice(++i, 0, Vector2.lerp(a, b, j / pointCount));
+            }
+            i++;
+        }
+    }
+    *tweenPoints(value, time, timingFunction) {
+        const fromPoints = [...this.parsedPoints()];
+        const toPoints = this.parsePoints(unwrap(value));
+        const closed = this.closed();
+        const diff = fromPoints.length - toPoints.length;
+        Line_1.distributePoints(diff < 0 ? fromPoints : toPoints, Math.abs(diff));
+        Line_1.rotatePoints(toPoints, fromPoints, closed);
+        this.tweenedPoints(fromPoints);
+        yield* tween(time, value => {
+            const progress = timingFunction(value);
+            this.tweenedPoints(polygonPointsLerp(fromPoints, toPoints, progress));
+        }, () => {
+            this.tweenedPoints(null);
+            this.points(value);
+        });
+    }
+    constructor(props) {
+        super(props);
+        this.tweenedPoints = createSignal(null);
+        if (props.children === undefined && props.points === undefined) {
+            useLogger().warn({
+                message: 'No points specified for the line',
+                remarks: "<p>The line won&#39;t be visible unless you specify at least two points:</p>\n<pre class=\"\"><code class=\"language-tsx\">&lt;<span class=\"hljs-title class_\">Line</span>\n  stroke=<span class=\"hljs-string\">&quot;#fff&quot;</span>\n  lineWidth={<span class=\"hljs-number\">8</span>}\n  points={[\n    [<span class=\"hljs-number\">100</span>, <span class=\"hljs-number\">0</span>],\n    [<span class=\"hljs-number\">0</span>, <span class=\"hljs-number\">0</span>],\n    [<span class=\"hljs-number\">0</span>, <span class=\"hljs-number\">100</span>],\n  ]}\n/&gt;</code></pre><p>Alternatively, you can define the points using the children:</p>\n<pre class=\"\"><code class=\"language-tsx\">&lt;<span class=\"hljs-title class_\">Line</span> stroke=<span class=\"hljs-string\">&quot;#fff&quot;</span> lineWidth={<span class=\"hljs-number\">8</span>}&gt;\n  <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Node</span> <span class=\"hljs-attr\">x</span>=<span class=\"hljs-string\">{100}</span> /&gt;</span></span>\n  <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Node</span> /&gt;</span></span>\n  <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Node</span> <span class=\"hljs-attr\">y</span>=<span class=\"hljs-string\">{100}</span> /&gt;</span></span>\n&lt;/<span class=\"hljs-title class_\">Line</span>&gt;</code></pre><p>If you did this intentionally, and want to disable this message, set the\n<code>points</code> property to <code>null</code>:</p>\n<pre class=\"\"><code class=\"language-tsx\">&lt;<span class=\"hljs-title class_\">Line</span> stroke=<span class=\"hljs-string\">&quot;#fff&quot;</span> lineWidth={<span class=\"hljs-number\">8</span>} points={<span class=\"hljs-literal\">null</span>} /&gt;</code></pre>",
+                inspect: this.key,
+            });
+        }
+    }
+    childrenBBox() {
+        let points = this.tweenedPoints();
+        if (!points) {
+            const custom = this.points();
+            points = custom
+                ? custom.map(signal => new Vector2(unwrap(signal)))
+                : this.children()
+                    .filter(child => !(child instanceof Layout) || child.isLayoutRoot())
+                    .map(child => child.position());
+        }
+        return BBox.fromPoints(...points);
+    }
+    parsedPoints() {
+        return this.parsePoints(this.points());
+    }
+    profile() {
+        return getPolylineProfile(this.tweenedPoints() ?? this.parsedPoints(), this.radius(), this.closed());
+    }
+    lineWidthCoefficient() {
+        const radius = this.radius();
+        const join = this.lineJoin();
+        let coefficient = super.lineWidthCoefficient();
+        if (radius === 0 && join === 'miter') {
+            const { minSin } = this.profile();
+            if (minSin > 0) {
+                coefficient = Math.max(coefficient, 0.5 / minSin);
+            }
+        }
+        return coefficient;
+    }
+    drawOverlay(context, matrix) {
+        const box = this.childrenBBox().transformCorners(matrix);
+        const size = this.computedSize();
+        const offset = size.mul(this.offset()).scale(0.5).transformAsPoint(matrix);
+        context.fillStyle = 'white';
+        context.strokeStyle = 'black';
+        context.lineWidth = 1;
+        const path = new Path2D();
+        const points = (this.tweenedPoints() ?? this.parsedPoints()).map(point => point.transformAsPoint(matrix));
+        if (points.length > 0) {
+            moveTo(path, points[0]);
+            for (const point of points) {
+                lineTo(path, point);
+                context.beginPath();
+                arc(context, point, 4);
+                context.closePath();
+                context.fill();
+                context.stroke();
+            }
+        }
+        context.strokeStyle = 'white';
+        context.stroke(path);
+        context.beginPath();
+        drawPivot(context, offset);
+        context.stroke();
+        context.beginPath();
+        drawLine(context, box);
+        context.closePath();
+        context.stroke();
+    }
+    parsePoints(points) {
+        return points
+            ? points.map(signal => new Vector2(unwrap(signal)))
+            : this.children().map(child => child.position());
+    }
+};
+__decorate([
+    initial(0),
+    signal()
+], Line.prototype, "radius", void 0);
+__decorate([
+    initial(null),
+    signal()
+], Line.prototype, "points", void 0);
+__decorate([
+    threadable()
+], Line.prototype, "tweenPoints", null);
+__decorate([
+    computed()
+], Line.prototype, "childrenBBox", null);
+__decorate([
+    computed()
+], Line.prototype, "parsedPoints", null);
+__decorate([
+    computed()
+], Line.prototype, "profile", null);
+Line = Line_1 = __decorate([
+    nodeName('Line')
+], Line);
+export { Line };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTGluZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9MaW5lLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7QUFBQSxPQUFPLEVBQ0wsSUFBSSxFQUNKLFlBQVksRUFJWixVQUFVLEVBR1YsS0FBSyxFQUNMLE1BQU0sRUFDTixTQUFTLEVBQ1QsT0FBTyxHQUNSLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBZSxrQkFBa0IsRUFBQyxNQUFNLFdBQVcsQ0FBQztBQUMzRCxPQUFPLEVBQ0wscUJBQXFCLEVBQ3JCLGFBQWEsRUFDYixpQkFBaUIsR0FDbEIsTUFBTSxrQ0FBa0MsQ0FBQztBQUMxQyxPQUFPLEVBQUMsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ2xFLE9BQU8sRUFBQyxHQUFHLEVBQUUsUUFBUSxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsTUFBTSxFQUFDLE1BQU0sVUFBVSxDQUFDO0FBRWxFLE9BQU8sRUFBQyxLQUFLLEVBQWEsTUFBTSxTQUFTLENBQUM7QUFDMUMsT0FBTyxFQUFDLE1BQU0sRUFBQyxNQUFNLFVBQVUsQ0FBQztBQWFoQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0F3R0c7QUFFSSxJQUFNLElBQUksWUFBVixNQUFNLElBQUssU0FBUSxLQUFLO0lBQzdCOzs7Ozs7T0FNRztJQUNLLE1BQU0sQ0FBQyxZQUFZLENBQ3pCLE1BQWlCLEVBQ2pCLFNBQW9CLEVBQ3BCLE1BQWU7UUFFZixJQUFJLE1BQU0sRUFBRSxDQUFDO1lBQ1gsSUFBSSxXQUFXLEdBQUcsUUFBUSxDQUFDO1lBQzNCLElBQUksVUFBVSxHQUFHLENBQUMsQ0FBQztZQUNuQixLQUFLLElBQUksTUFB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

package/lib/components/Media.d.ts

@@ -0,0 +1,35 @@
+import { SignalValue, SimpleSignal } from '@revideo/core';
+import { Rect, RectProps } from './Rect';
+export interface MediaProps extends RectProps {
+    src?: SignalValue<string>;
+    loop?: SignalValue<boolean>;
+    playbackRate?: number;
+    time?: SignalValue<number>;
+    play?: boolean;
+}
+export declare abstract class Media extends Rect {
+    readonly src: SimpleSignal<string, this>;
+    readonly loop: SimpleSignal<boolean, this>;
+    readonly playbackRate: SimpleSignal<number, this>;
+    protected readonly time: SimpleSignal<number, this>;
+    protected readonly playing: SimpleSignal<boolean, this>;
+    protected lastTime: number;
+    constructor(props: MediaProps);
+    isPlaying(): boolean;
+    getCurrentTime(): number;
+    getDuration(): number;
+    dispose(): void;
+    completion(): number;
+    protected abstract mediaElement(): HTMLMediaElement;
+    protected abstract seekedMedia(): HTMLMediaElement;
+    protected abstract fastSeekedMedia(): HTMLMediaElement;
+    protected abstract draw(context: CanvasRenderingContext2D): void;
+    protected setCurrentTime(value: number): void;
+    protected setPlaybackRate(playbackRate: number): void;
+    play(): void;
+    pause(): void;
+    seek(time: number): void;
+    clampTime(time: number): number;
+    protected collectAsyncResources(): void;
+}
+//# sourceMappingURL=Media.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Media.d.ts","sourceRoot":"","sources":["../../src/lib/components/Media.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,WAAW,EACX,YAAY,EAKb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C,GAAG,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,8BAAsB,KAAM,SAAQ,IAAI;IACtC,SACwB,GAAG,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAExD,SAEwB,IAAI,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAE1D,SAEwB,YAAY,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAEjE,mBAE2B,IAAI,EAAE,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IAE5D,mBAE2B,OAAO,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAEhE,SAAS,CAAC,QAAQ,SAAM;gBAEL,KAAK,EAAE,UAAU;IAO7B,SAAS,IAAI,OAAO;IAIpB,cAAc,IAAI,MAAM;IAIxB,WAAW,IAAI,MAAM;IAIZ,OAAO;IAOP,UAAU,IAAI,MAAM;IAIpC,SAAS,CAAC,QAAQ,CAAC,YAAY,IAAI,gBAAgB;IAEnD,SAAS,CAAC,QAAQ,CAAC,WAAW,IAAI,gBAAgB;IAElD,SAAS,CAAC,QAAQ,CAAC,eAAe,IAAI,gBAAgB;uBAE1B,IAAI,CAAC,OAAO,EAAE,wBAAwB,GAAG,IAAI;IAEzE,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM;IAmBtC,SAAS,CAAC,eAAe,CAAC,YAAY,EAAE,MAAM;IA2BvC,IAAI;IASJ,KAAK;IAML,IAAI,CAAC,IAAI,EAAE,MAAM;IAUjB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM;cAQnB,qBAAqB;CAIzC"}

package/lib/components/Media.js

@@ -0,0 +1,135 @@
+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;
+};
+import { DependencyContext, clamp, isReactive, useLogger, useThread, } from '@revideo/core';
+import { computed, initial, signal } from '../decorators';
+import { Rect } from './Rect';
+export class Media extends Rect {
+    constructor(props) {
+        super(props);
+        this.lastTime = -1;
+        if (props.play) {
+            this.play();
+        }
+    }
+    isPlaying() {
+        return this.playing();
+    }
+    getCurrentTime() {
+        return this.clampTime(this.time());
+    }
+    getDuration() {
+        return this.mediaElement().duration;
+    }
+    dispose() {
+        this.pause();
+        this.remove();
+        super.dispose();
+    }
+    completion() {
+        return this.clampTime(this.time()) / this.getDuration();
+    }
+    setCurrentTime(value) {
+        const media = this.mediaElement();
+        if (media.readyState < 2)
+            return;
+        media.currentTime = value;
+        this.lastTime = value;
+        if (media.seeking) {
+            DependencyContext.collectPromise(new Promise(resolve => {
+                const listener = () => {
+                    resolve();
+                    media.removeEventListener('seeked', listener);
+                };
+                media.addEventListener('seeked', listener);
+            }));
+        }
+    }
+    setPlaybackRate(playbackRate) {
+        let value;
+        if (isReactive(playbackRate)) {
+            value = playbackRate();
+            useLogger().warn({
+                message: 'Invalid value set as the playback rate',
+                remarks: "<p>The <code>playbackRate</code> of a <code>Video</code> cannot be reactive.</p>\n<p>Make sure to use a concrete value and not a function:</p>\n<pre class=\"wrong\"><code class=\"language-ts\">video.<span class=\"hljs-title function_\">playbackRate</span>(<span class=\"hljs-function\">() =&gt;</span> <span class=\"hljs-number\">7</span>);</code></pre><pre class=\"correct\"><code class=\"language-ts\">video.<span class=\"hljs-title function_\">playbackRate</span>(<span class=\"hljs-number\">7</span>);</code></pre><p>If you&#39;re using a signal, extract its value before passing it to the property:</p>\n<pre class=\"wrong\"><code class=\"language-ts\">video.<span class=\"hljs-title function_\">playbackRate</span>(mySignal);</code></pre><pre class=\"correct\"><code class=\"language-ts\">video.<span class=\"hljs-title function_\">playbackRate</span>(<span class=\"hljs-title function_\">mySignal</span>());</code></pre>",
+                inspect: this.key,
+                stack: new Error().stack,
+            });
+        }
+        else {
+            value = playbackRate;
+        }
+        this.playbackRate.context.setter(value);
+        if (this.playing()) {
+            if (value === 0) {
+                this.pause();
+            }
+            else {
+                const time = useThread().time;
+                const start = time();
+                const offset = this.time();
+                this.time(() => this.clampTime(offset + (time() - start) * value));
+            }
+        }
+    }
+    play() {
+        const time = useThread().time;
+        const start = time();
+        const offset = this.time();
+        const playbackRate = this.playbackRate();
+        this.playing(true);
+        this.time(() => this.clampTime(offset + (time() - start) * playbackRate));
+    }
+    pause() {
+        this.playing(false);
+        this.time.save();
+        this.mediaElement().pause();
+    }
+    seek(time) {
+        const playing = this.playing();
+        this.time(this.clampTime(time));
+        if (playing) {
+            this.play();
+        }
+        else {
+            this.pause();
+        }
+    }
+    clampTime(time) {
+        const duration = this.getDuration();
+        if (this.loop()) {
+            time %= duration;
+        }
+        return clamp(0, duration, time);
+    }
+    collectAsyncResources() {
+        super.collectAsyncResources();
+        this.seekedMedia();
+    }
+}
+__decorate([
+    signal()
+], Media.prototype, "src", void 0);
+__decorate([
+    initial(false),
+    signal()
+], Media.prototype, "loop", void 0);
+__decorate([
+    initial(1),
+    signal()
+], Media.prototype, "playbackRate", void 0);
+__decorate([
+    initial(0),
+    signal()
+], Media.prototype, "time", void 0);
+__decorate([
+    initial(false),
+    signal()
+], Media.prototype, "playing", void 0);
+__decorate([
+    computed()
+], Media.prototype, "completion", null);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiTWVkaWEuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvTWVkaWEudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7O0FBQUEsT0FBTyxFQUNMLGlCQUFpQixFQUdqQixLQUFLLEVBQ0wsVUFBVSxFQUNWLFNBQVMsRUFDVCxTQUFTLEdBQ1YsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBQ3hELE9BQU8sRUFBQyxJQUFJLEVBQVksTUFBTSxRQUFRLENBQUM7QUFXdkMsTUFBTSxPQUFnQixLQUFNLFNBQVEsSUFBSTtJQXNCdEMsWUFBbUIsS0FBaUI7UUFDbEMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBSEwsYUFBUSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBSXRCLElBQUksS0FBSyxDQUFDLElBQUksRUFBRSxDQUFDO1lBQ2YsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ2QsQ0FBQztJQUNILENBQUM7SUFFTSxTQUFTO1FBQ2QsT0FBTyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDeEIsQ0FBQztJQUVNLGNBQWM7UUFDbkIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO0lBQ3JDLENBQUM7SUFFTSxXQUFXO1FBQ2hCLE9BQU8sSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDLFFBQVEsQ0FBQztJQUN0QyxDQUFDO0lBRWUsT0FBTztRQUNyQixJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDYixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7UUFDZCxLQUFLLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDbEIsQ0FBQztJQUdlLFVBQVU7UUFDeEIsT0FBTyxJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxHQUFHLElBQUks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