@revideo/2d 0.4.7-alpha.1027 → 0.4.7-five.1022

package/lib/components/Curve.d.ts

@@ -1,202 +1,212 @@
-import { BBox, SerializedVector2, SignalValue, SimpleSignal, Vector2 } from '@revideo/core';
-import { CurveDrawingInfo } from '../curves/CurveDrawingInfo';
-import { CurvePoint } from '../curves/CurvePoint';
-import { CurveProfile } from '../curves/CurveProfile';
-import { DesiredLength } from '../partials';
-import { Shape, ShapeProps } from './Shape';
+import {
+  BBox,
+  SerializedVector2,
+  SignalValue,
+  SimpleSignal,
+  Vector2,
+} from '@revideo/core';
+import {CurveDrawingInfo} from '../curves/CurveDrawingInfo';
+import {CurvePoint} from '../curves/CurvePoint';
+import {CurveProfile} from '../curves/CurveProfile';
+import {DesiredLength} from '../partials';
+import {Shape, ShapeProps} from './Shape';
 export interface CurveProps extends ShapeProps {
-    /**
-     * {@inheritDoc Curve.closed}
-     */
-    closed?: SignalValue<boolean>;
-    /**
-     * {@inheritDoc Curve.start}
-     */
-    start?: SignalValue<number>;
-    /**
-     * {@inheritDoc Curve.startOffset}
-     */
-    startOffset?: SignalValue<number>;
-    /**
-     * {@inheritDoc Curve.startArrow}
-     */
-    startArrow?: SignalValue<boolean>;
-    /**
-     * {@inheritDoc Curve.end}
-     */
-    end?: SignalValue<number>;
-    /**
-     * {@inheritDoc Curve.endOffset}
-     */
-    endOffset?: SignalValue<number>;
-    /**
-     * {@inheritDoc Curve.endArrow}
-     */
-    endArrow?: SignalValue<boolean>;
-    /**
-     * {@inheritDoc Curve.arrowSize}
-     */
-    arrowSize?: SignalValue<number>;
+  /**
+   * {@inheritDoc Curve.closed}
+   */
+  closed?: SignalValue<boolean>;
+  /**
+   * {@inheritDoc Curve.start}
+   */
+  start?: SignalValue<number>;
+  /**
+   * {@inheritDoc Curve.startOffset}
+   */
+  startOffset?: SignalValue<number>;
+  /**
+   * {@inheritDoc Curve.startArrow}
+   */
+  startArrow?: SignalValue<boolean>;
+  /**
+   * {@inheritDoc Curve.end}
+   */
+  end?: SignalValue<number>;
+  /**
+   * {@inheritDoc Curve.endOffset}
+   */
+  endOffset?: SignalValue<number>;
+  /**
+   * {@inheritDoc Curve.endArrow}
+   */
+  endArrow?: SignalValue<boolean>;
+  /**
+   * {@inheritDoc Curve.arrowSize}
+   */
+  arrowSize?: SignalValue<number>;
 }
 export declare abstract class Curve extends Shape {
-    /**
-     * Whether the curve should be closed.
-     *
-     * @remarks
-     * Closed curves have their start and end points connected.
-     */
-    readonly closed: SimpleSignal<boolean, this>;
-    /**
-     * A percentage from the start before which the curve should be clipped.
-     *
-     * @remarks
-     * The portion of the curve that comes before the given percentage will be
-     * made invisible.
-     *
-     * This property is usefully for animating the curve appearing on the screen.
-     * The value of `0` means the very start of the curve (accounting for the
-     * {@link startOffset}) while `1` means the very end (accounting for the
-     * {@link endOffset}).
-     */
-    readonly start: SimpleSignal<number, this>;
-    /**
-     * The offset in pixels from the start of the curve.
-     *
-     * @remarks
-     * This property lets you specify where along the defined curve the actual
-     * visible portion starts. For example, setting it to `20` will make the first
-     * 20 pixels of the curve invisible.
-     *
-     * This property is useful for trimming the curve using a fixed distance.
-     * If you want to animate the curve appearing on the screen, use {@link start}
-     * instead.
-     */
-    readonly startOffset: SimpleSignal<number, this>;
-    /**
-     * Whether to display an arrow at the start of the visible curve.
-     *
-     * @remarks
-     * Use {@link arrowSize} to control the size of the arrow.
-     */
-    readonly startArrow: SimpleSignal<boolean, this>;
-    /**
-     * A percentage from the start after which the curve should be clipped.
-     *
-     * @remarks
-     * The portion of the curve that comes after the given percentage will be
-     * made invisible.
-     *
-     * This property is usefully for animating the curve appearing on the screen.
-     * The value of `0` means the very start of the curve (accounting for the
-     * {@link startOffset}) while `1` means the very end (accounting for the
-     * {@link endOffset}).
-     */
-    readonly end: SimpleSignal<number, this>;
-    /**
-     * The offset in pixels from the end of the curve.
-     *
-     * @remarks
-     * This property lets you specify where along the defined curve the actual
-     * visible portion ends. For example, setting it to `20` will make the last
-     * 20 pixels of the curve invisible.
-     *
-     * This property is useful for trimming the curve using a fixed distance.
-     * If you want to animate the curve appearing on the screen, use {@link end}
-     * instead.
-     */
-    readonly endOffset: SimpleSignal<number, this>;
-    /**
-     * Whether to display an arrow at the end of the visible curve.
-     *
-     * @remarks
-     * Use {@link arrowSize} to control the size of the arrow.
-     */
-    readonly endArrow: SimpleSignal<boolean, this>;
-    /**
-     * Controls the size of the end and start arrows.
-     *
-     * @remarks
-     * To make the arrows visible make sure to enable {@link startArrow} and/or
-     * {@link endArrow}.
-     */
-    readonly arrowSize: SimpleSignal<number, this>;
-    protected canHaveSubpath: boolean;
-    protected desiredSize(): SerializedVector2<DesiredLength>;
-    constructor(props: CurveProps);
-    protected abstract childrenBBox(): BBox;
-    abstract profile(): CurveProfile;
-    /**
-     * Convert a percentage along the curve to a distance.
-     *
-     * @remarks
-     * The returned distance is given in relation to the full curve, not
-     * accounting for {@link startOffset} and {@link endOffset}.
-     *
-     * @param value - The percentage along the curve.
-     */
-    percentageToDistance(value: number): number;
-    /**
-     * Convert a distance along the curve to a percentage.
-     *
-     * @remarks
-     * The distance should be given in relation to the full curve, not
-     * accounting for {@link startOffset} and {@link endOffset}.
-     *
-     * @param value - The distance along the curve.
-     */
-    distanceToPercentage(value: number): number;
-    /**
-     * The base arc length of this curve.
-     *
-     * @remarks
-     * This is the entire length of this curve, not accounting for
-     * {@link startOffset | the offsets}.
-     */
-    baseArcLength(): number;
-    /**
-     * The offset arc length of this curve.
-     *
-     * @remarks
-     * This is the length of the curve that accounts for
-     * {@link startOffset | the offsets}.
-     */
-    offsetArcLength(): number;
-    /**
-     * The visible arc length of this curve.
-     *
-     * @remarks
-     * This arc length accounts for both the offset and the {@link start} and
-     * {@link end} properties.
-     */
-    arcLength(): number;
-    /**
-     * The percentage of the curve that's currently visible.
-     *
-     * @remarks
-     * The returned value is the ratio between the visible length (as defined by
-     * {@link start} and {@link end}) and the offset length of the curve.
-     */
-    completion(): number;
-    protected processSubpath(_path: Path2D, _startPoint: Vector2 | null, _endPoint: Vector2 | null): void;
-    protected curveDrawingInfo(): CurveDrawingInfo;
-    protected getPointAtDistance(value: number): CurvePoint;
-    getPointAtPercentage(value: number): CurvePoint;
-    protected getComputedLayout(): BBox;
-    protected offsetComputedLayout(box: BBox): BBox;
-    protected getPath(): Path2D;
-    protected getCacheBBox(): BBox;
-    protected lineWidthCoefficient(): number;
-    /**
-     * Check if the path requires a profile.
-     *
-     * @remarks
-     * The profile is only required if certain features are used. Otherwise, the
-     * profile generation can be skipped, and the curve can be drawn directly
-     * using the 2D context.
-     */
-    protected requiresProfile(): boolean;
-    protected drawShape(context: CanvasRenderingContext2D): void;
-    private drawArrows;
-    private drawArrow;
+  /**
+   * Whether the curve should be closed.
+   *
+   * @remarks
+   * Closed curves have their start and end points connected.
+   */
+  readonly closed: SimpleSignal<boolean, this>;
+  /**
+   * A percentage from the start before which the curve should be clipped.
+   *
+   * @remarks
+   * The portion of the curve that comes before the given percentage will be
+   * made invisible.
+   *
+   * This property is usefully for animating the curve appearing on the screen.
+   * The value of `0` means the very start of the curve (accounting for the
+   * {@link startOffset}) while `1` means the very end (accounting for the
+   * {@link endOffset}).
+   */
+  readonly start: SimpleSignal<number, this>;
+  /**
+   * The offset in pixels from the start of the curve.
+   *
+   * @remarks
+   * This property lets you specify where along the defined curve the actual
+   * visible portion starts. For example, setting it to `20` will make the first
+   * 20 pixels of the curve invisible.
+   *
+   * This property is useful for trimming the curve using a fixed distance.
+   * If you want to animate the curve appearing on the screen, use {@link start}
+   * instead.
+   */
+  readonly startOffset: SimpleSignal<number, this>;
+  /**
+   * Whether to display an arrow at the start of the visible curve.
+   *
+   * @remarks
+   * Use {@link arrowSize} to control the size of the arrow.
+   */
+  readonly startArrow: SimpleSignal<boolean, this>;
+  /**
+   * A percentage from the start after which the curve should be clipped.
+   *
+   * @remarks
+   * The portion of the curve that comes after the given percentage will be
+   * made invisible.
+   *
+   * This property is usefully for animating the curve appearing on the screen.
+   * The value of `0` means the very start of the curve (accounting for the
+   * {@link startOffset}) while `1` means the very end (accounting for the
+   * {@link endOffset}).
+   */
+  readonly end: SimpleSignal<number, this>;
+  /**
+   * The offset in pixels from the end of the curve.
+   *
+   * @remarks
+   * This property lets you specify where along the defined curve the actual
+   * visible portion ends. For example, setting it to `20` will make the last
+   * 20 pixels of the curve invisible.
+   *
+   * This property is useful for trimming the curve using a fixed distance.
+   * If you want to animate the curve appearing on the screen, use {@link end}
+   * instead.
+   */
+  readonly endOffset: SimpleSignal<number, this>;
+  /**
+   * Whether to display an arrow at the end of the visible curve.
+   *
+   * @remarks
+   * Use {@link arrowSize} to control the size of the arrow.
+   */
+  readonly endArrow: SimpleSignal<boolean, this>;
+  /**
+   * Controls the size of the end and start arrows.
+   *
+   * @remarks
+   * To make the arrows visible make sure to enable {@link startArrow} and/or
+   * {@link endArrow}.
+   */
+  readonly arrowSize: SimpleSignal<number, this>;
+  protected canHaveSubpath: boolean;
+  protected desiredSize(): SerializedVector2<DesiredLength>;
+  constructor(props: CurveProps);
+  protected abstract childrenBBox(): BBox;
+  abstract profile(): CurveProfile;
+  /**
+   * Convert a percentage along the curve to a distance.
+   *
+   * @remarks
+   * The returned distance is given in relation to the full curve, not
+   * accounting for {@link startOffset} and {@link endOffset}.
+   *
+   * @param value - The percentage along the curve.
+   */
+  percentageToDistance(value: number): number;
+  /**
+   * Convert a distance along the curve to a percentage.
+   *
+   * @remarks
+   * The distance should be given in relation to the full curve, not
+   * accounting for {@link startOffset} and {@link endOffset}.
+   *
+   * @param value - The distance along the curve.
+   */
+  distanceToPercentage(value: number): number;
+  /**
+   * The base arc length of this curve.
+   *
+   * @remarks
+   * This is the entire length of this curve, not accounting for
+   * {@link startOffset | the offsets}.
+   */
+  baseArcLength(): number;
+  /**
+   * The offset arc length of this curve.
+   *
+   * @remarks
+   * This is the length of the curve that accounts for
+   * {@link startOffset | the offsets}.
+   */
+  offsetArcLength(): number;
+  /**
+   * The visible arc length of this curve.
+   *
+   * @remarks
+   * This arc length accounts for both the offset and the {@link start} and
+   * {@link end} properties.
+   */
+  arcLength(): number;
+  /**
+   * The percentage of the curve that's currently visible.
+   *
+   * @remarks
+   * The returned value is the ratio between the visible length (as defined by
+   * {@link start} and {@link end}) and the offset length of the curve.
+   */
+  completion(): number;
+  protected processSubpath(
+    _path: Path2D,
+    _startPoint: Vector2 | null,
+    _endPoint: Vector2 | null,
+  ): void;
+  protected curveDrawingInfo(): CurveDrawingInfo;
+  protected getPointAtDistance(value: number): CurvePoint;
+  getPointAtPercentage(value: number): CurvePoint;
+  protected getComputedLayout(): BBox;
+  protected offsetComputedLayout(box: BBox): BBox;
+  protected getPath(): Path2D;
+  protected getCacheBBox(): BBox;
+  protected lineWidthCoefficient(): number;
+  /**
+   * Check if the path requires a profile.
+   *
+   * @remarks
+   * The profile is only required if certain features are used. Otherwise, the
+   * profile generation can be skipped, and the curve can be drawn directly
+   * using the 2D context.
+   */
+  protected requiresProfile(): boolean;
+  protected drawShape(context: CanvasRenderingContext2D): void;
+  private drawArrows;
+  private drawArrow;
 }
-//# sourceMappingURL=Curve.d.ts.map
+//# sourceMappingURL=Curve.d.ts.map

package/lib/components/Grid.d.ts

@@ -1,18 +1,23 @@
-import { PossibleVector2, SignalValue, SimpleSignal, Vector2Signal } from '@revideo/core';
-import { Shape, ShapeProps } from './Shape';
+import {
+  PossibleVector2,
+  SignalValue,
+  SimpleSignal,
+  Vector2Signal,
+} from '@revideo/core';
+import {Shape, ShapeProps} from './Shape';
 export interface GridProps extends ShapeProps {
-    /**
-     * {@inheritDoc Grid.spacing}
-     */
-    spacing?: SignalValue<PossibleVector2>;
-    /**
-     * {@inheritDoc Grid.start}
-     */
-    start?: SignalValue<number>;
-    /**
-     * {@inheritDoc Grid.end}
-     */
-    end?: SignalValue<number>;
+  /**
+   * {@inheritDoc Grid.spacing}
+   */
+  spacing?: SignalValue<PossibleVector2>;
+  /**
+   * {@inheritDoc Grid.start}
+   */
+  start?: SignalValue<number>;
+  /**
+   * {@inheritDoc Grid.end}
+   */
+  end?: SignalValue<number>;
 }
 /**
  * A node for drawing a two-dimensional grid.
@@ -44,32 +49,32 @@ export interface GridProps extends ShapeProps {
  * ```
  */
 export declare class Grid extends Shape {
-    /**
-     * The spacing between the grid lines.
-     */
-    readonly spacing: Vector2Signal<this>;
-    /**
-     * The percentage that should be clipped from the beginning of each grid line.
-     *
-     * @remarks
-     * The portion of each grid line that comes before the given percentage will
-     * be made invisible.
-     *
-     * This property is useful for animating the grid appearing on-screen.
-     */
-    readonly start: SimpleSignal<number, this>;
-    /**
-     * The percentage that should be clipped from the end of each grid line.
-     *
-     * @remarks
-     * The portion of each grid line that comes after the given percentage will
-     * be made invisible.
-     *
-     * This property is useful for animating the grid appearing on-screen.
-     */
-    readonly end: SimpleSignal<number, this>;
-    constructor(props: GridProps);
-    protected drawShape(context: CanvasRenderingContext2D): void;
-    private mapPoints;
+  /**
+   * The spacing between the grid lines.
+   */
+  readonly spacing: Vector2Signal<this>;
+  /**
+   * The percentage that should be clipped from the beginning of each grid line.
+   *
+   * @remarks
+   * The portion of each grid line that comes before the given percentage will
+   * be made invisible.
+   *
+   * This property is useful for animating the grid appearing on-screen.
+   */
+  readonly start: SimpleSignal<number, this>;
+  /**
+   * The percentage that should be clipped from the end of each grid line.
+   *
+   * @remarks
+   * The portion of each grid line that comes after the given percentage will
+   * be made invisible.
+   *
+   * This property is useful for animating the grid appearing on-screen.
+   */
+  readonly end: SimpleSignal<number, this>;
+  constructor(props: GridProps);
+  protected drawShape(context: CanvasRenderingContext2D): void;
+  private mapPoints;
 }
-//# sourceMappingURL=Grid.d.ts.map
+//# sourceMappingURL=Grid.d.ts.map

package/lib/components/HlsVideo.d.ts

@@ -0,0 +1,62 @@
+import {SerializedVector2, SignalValue, SimpleSignal} from '@revideo/core';
+import {DesiredLength} from '../partials';
+import {Media, MediaProps} from './Media';
+export interface HlsVideoProps extends MediaProps {
+  /**
+   * {@inheritDoc Video.alpha}
+   */
+  alpha?: SignalValue<number>;
+  /**
+   * {@inheritDoc Video.smoothing}
+   */
+  smoothing?: SignalValue<boolean>;
+  /**
+   * {@inheritDoc Video.png}
+   */
+  png?: SignalValue<boolean>;
+}
+export declare class HlsVideo 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>;
+  /**
+   * Whether the video frames should be extracted as PNGs. Uses JPEGs when
+   * set to false.
+   *
+   * @remarks
+   * PNGs have better image quality and support transparency, but they make
+   * rendering slower.
+   *
+   * @defaultValue false
+   */
+  readonly png: SimpleSignal<boolean, this>;
+  private static readonly pool;
+  constructor(props: HlsVideoProps);
+  protected desiredSize(): SerializedVector2<DesiredLength>;
+  protected mediaElement(): HTMLVideoElement;
+  protected seekedMedia(): HTMLVideoElement;
+  protected fastSeekedMedia(): HTMLVideoElement;
+  private video;
+  protected seekedVideo(): HTMLVideoElement;
+  protected fastSeekedVideo(): HTMLVideoElement;
+  protected lastFrame: HTMLImageElement | null;
+  protected seekFunction(): Promise<HTMLVideoElement>;
+  protected draw(context: CanvasRenderingContext2D): Promise<void>;
+  protected applyFlex(): void;
+}
+//# sourceMappingURL=HlsVideo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HlsVideo.d.ts","sourceRoot":"","sources":["../../src/lib/components/HlsVideo.ts"],"names":[],"mappings":"AAAA,OAAO,EAIH,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;AAG1C,MAAM,WAAW,aAAc,SAAQ,UAAU;IAC/C;;OAEG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IACjC;;OAEG;IACH,GAAG,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAC5B;AAED,qBACa,QAAS,SAAQ,KAAK;IACjC;;;;;;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;;;;;;;;;OASG;IACH,SAEwB,GAAG,EAAE,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAEzD,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAwC;gBAEjD,KAAK,EAAE,aAAa;cAIpB,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;IAsCb,SAAS,CAAC,WAAW,IAAI,gBAAgB;IAoBzC,SAAS,CAAC,eAAe,IAAI,gBAAgB;IA+B7C,SAAS,CAAC,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAAQ;cAGpC,YAAY;cAgBH,IAAI,CAAC,OAAO,EAAE,wBAAwB;cAwB5C,SAAS;CAO7B"}