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

package/lib/components/HlsVideo.js

@@ -0,0 +1,169 @@
+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 HlsVideo_1;
+import {BBox, DependencyContext, PlaybackState, viaProxy} from '@revideo/core';
+import Hls from 'hls.js';
+import {computed, initial, nodeName, signal} from '../decorators';
+import {drawImage} from '../utils';
+import {Media} from './Media';
+let HlsVideo = (HlsVideo_1 = class HlsVideo extends Media {
+  constructor(props) {
+    super(props);
+    this.lastFrame = null;
+  }
+  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.fullSource());
+    const key = `${this.key}/${src}`;
+    let video = HlsVideo_1.pool[key];
+    if (!video) {
+      video = document.createElement('video');
+      video.crossOrigin = 'anonymous';
+      const hls = new Hls();
+      hls.loadSource(src);
+      hls.attachMedia(video);
+      HlsVideo_1.pool[key] = video;
+    }
+    if (video.readyState < 2) {
+      DependencyContext.collectPromise(
+        new Promise(resolve => {
+          const onCanPlay = () => {
+            resolve();
+            video.removeEventListener('canplay', onCanPlay);
+          };
+          const onError = () => {
+            const reason = this.getErrorReason(video.error?.code);
+            console.log(`ERROR: Error loading video: ${src}, ${reason}`);
+          };
+          video.addEventListener('canplay', onCanPlay);
+          video.addEventListener('error', onError);
+        }),
+      );
+    }
+    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;
+  }
+  async seekFunction() {
+    const playbackState = this.view().playbackState();
+    if (
+      playbackState === PlaybackState.Playing ||
+      playbackState === PlaybackState.Presenting
+    ) {
+      return this.fastSeekedVideo();
+    }
+    if (playbackState === PlaybackState.Rendering) {
+      return this.seekedVideo();
+    }
+    return this.seekedVideo();
+  }
+  async draw(context) {
+    this.drawShape(context);
+    const alpha = this.alpha();
+    if (alpha > 0) {
+      const video = await this.seekFunction();
+      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());
+    }
+    await this.drawChildren(context);
+  }
+  applyFlex() {
+    super.applyFlex();
+    const video = this.video();
+    this.element.style.aspectRatio = (
+      this.ratio() ?? video.videoWidth / video.videoHeight
+    ).toString();
+  }
+});
+HlsVideo.pool = {};
+__decorate([initial(1), signal()], HlsVideo.prototype, 'alpha', void 0);
+__decorate([initial(true), signal()], HlsVideo.prototype, 'smoothing', void 0);
+__decorate([initial(true), signal()], HlsVideo.prototype, 'png', void 0);
+__decorate([computed()], HlsVideo.prototype, 'video', null);
+__decorate([computed()], HlsVideo.prototype, 'seekedVideo', null);
+__decorate([computed()], HlsVideo.prototype, 'fastSeekedVideo', null);
+HlsVideo = HlsVideo_1 = __decorate([nodeName('HlsVideo')], HlsVideo);
+export {HlsVideo};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiSGxzVmlkZW8uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvSGxzVmlkZW8udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7OztBQUFBLE9BQU8sRUFDSCxJQUFJLEVBQ0osaUJBQWlCLEVBQ2pCLGFBQWEsRUFJYixRQUFRLEdBQ1QsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBQyxNQUFNLGVBQWUsQ0FBQztBQUVsRSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sVUFBVSxDQUFDO0FBQ25DLE9BQU8sRUFBQyxLQUFLLEVBQWEsTUFBTSxTQUFTLENBQUM7QUFDMUMsT0FBTyxHQUFHLE1BQU0sUUFBUSxDQUFDO0FBa0JsQixJQUFNLFFBQVEsZ0JBQWQsTUFBTSxRQUFTLFNBQVEsS0FBSztJQXlDakMsWUFBbUIsS0FBb0I7UUFDckMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBc0hMLGNBQVMsR0FBNEIsSUFBSSxDQUFDO0lBckhwRCxDQUFDO0lBRWtCLFdBQVc7UUFDNUIsTUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLFdBQVcsRUFBRSxDQUFDO1FBQ25DLElBQUksTUFBTSxDQUFDLENBQUMsS0FBSyxJQUFJLElBQUksTUFBTSxDQUFDLENBQUMsS0FBSyxJQUFJLEVBQUUsQ0FBQztZQUMzQyxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDM0IsT0FBTztnQkFDTCxDQUFDLEVBQUUsS0FBSyxDQUFDLFVBQVU7Z0JBQ25CLENBQUMsRUFBRSxLQUFLLENBQUMsV0FBVzthQUNyQixDQUFDO1FBQ0osQ0FBQztRQUVELE9BQU8sTUFBTSxDQUFDO0lBQ2hCLENBQUM7SUFFUyxZQUFZO1FBQ3BCLE9BQU8sSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFUyxXQUFXO1FBQ25CLE9BQU8sSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFUyxlQUFlO1FBQ3ZCLE9BQU8sSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQ2hDLENBQUM7SUFHTyxLQUFLO1FBQ1gsTUFBTSxHQUFHLEdBQUcsUUFBUSxDQUFDLElBQUksQ0FBQyxVQUFVLEVBQUUsQ0FBQyxDQUFDO1FBQ3hDLE1BQU0sR0FBRyxHQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUcsSUFBSSxHQUFHLEVBQUUsQ0FBQztRQUNqQyxJQUFJLEtBQUssR0FBRyxVQUFRLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQy9CLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztZQUNYLEtBQUssR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQ3hDLEtBQUssQ0FBQyxXQUFXLEdBQUcsV0FBVyxDQUFDO1lBRWhDLE1BQU0sR0FBRyxHQUFHLElBQUksR0FBRyxFQUFFLENBQUM7WUFDdEIsR0FBRyxDQUFDLFVBQVUsQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUNwQixHQUFHLENBQUMsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRXZCLFVBQVEsQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLEdBQUcsS0FBSyxDQUFDO1FBQzdCLENBQUM7UUFFRCxJQUFJLEtBQUssQ0FBQyxVQUFVLEdBQUcsQ0FBQyxFQUFFLENBQUM7WUFDekIsaUJBQWlCLENBQUMsY0FBYyxDQUM5QixJQUFJLE9BQU8sQ0FBTyxPQUFPLENBQUMsRUFBRTtnQkFDMUIsTUFBTSxTQUFTLEdBQUcsR0FBRyxFQUFFO29CQUNyQixPQUFPLEVBQUUsQ0FBQztvQkFDVixLQUFLLENBQUMsbUJBQW1CLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQyxDQUFDO2dCQUNsRCxDQUFDLENBQUM7Z0JBRUYsTUFBTSxPQUFPLEdBQUcsR0FBRyxFQUFFO29CQUNuQixNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLENBQUM7b0JBQ3RELE9BQU8sQ0FBQyxHQUFHLENBQUMsK0JBQStCLEdBQUcsS0FBSyxNQUFNLEVBQUUsQ0FBQyxDQUFDO2dCQUMvRCxDQUFDLENBQUM7Z0JBRUYsS0FBSyxDQUFDLGdCQUFnQixDQUFDLFNBQVMsRUFBRSxTQUFTLENBQUMsQ0FBQztnQkFDN0MsS0FBSyxDQUFDLGdCQUFnQixDQUFDLE9BQU8sRUFBRSxPQUFPLENBQUMsQ0FBQztZQUMzQyxDQUFDLENBQUMsQ0FDSCxDQUFDO1FBQ0osQ0FBQztRQUVELE9BQU8sS0FBSyxDQUFDO0lBQ2YsQ0FBQztJQUdTLFdBQVc7UUFDbkIsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQzNCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDLENBQUM7UUFFekMsS0FBSyxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFFekMsSUFBSSxDQUFDLEtBQUssQ0FBQyxNQUFNLEVBQUUsQ0FBQztZQUNsQixLQUFLLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDaEIsQ0FBQztRQUVELElBQUksSUFBSSxDQUFDLFFBQVEsS0FBSyxJQUFJLEVBQUUsQ0FBQztZQUMzQixPQUFPLEtBQUssQ0FBQztRQUNmLENBQUM7UUFFRCxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBRTFCLE9BQU8sS0FBSyxDQUFDO0lBQ2YsQ0FBQztJQUdTLGVBQWU7UUFDdkIsTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1FBQzNCLE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDLENBQUM7UUFFekMsS0FBSyxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFFekMsSUFBSSxJQUFJLENBQUMsUUFBUSxLQUFLLElBQUksRUFBRSxDQUFDO1lBQzNCLE9BQU8sS0FBSyxDQUFDO1FBQ2YsQ0FBQztRQUVELE1BQU0sT0FBTyxHQUNYLElBQUksQ0FBQyxPQUFPLEVBQUUsSUFBSSxJQUFJLEdBQUcsS0FBSyxDQUFDLFFBQVEsSUFBSSxLQUFLLENBQUMsWUFBWSxHQUFHLENBQUMsQ0FBQztRQUNwRSxJQUFJLE9BQU8sRUFBRSxDQUFDO1lBQ1osSUFBSSxLQUFLLENBQUMsTUFBTSxFQUFFLENBQUM7Z0JBQ2pCLGlCQUFpQixDQUFDLGNBQWMsQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQztZQUNqRCxDQUFDO1FBQ0gsQ0FBQzthQUFNLENBQUM7WUFDTixJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU0sRUFBRSxDQUFDO2dCQUNsQixLQUFLLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDaEIsQ0FBQztRQUNILENBQUM7UUFFRCxJQUFJLElBQUksQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUMsR0FBRyxHQUFHLEVBQUUsQ0FBQztZQUM3QyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQzVCLENBQUM7YUFBTSxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7WUFDcEIsS0FBSyxDQUFDLFdBQVcsR0FBRyxJQUFJLENBQUM7UUFDM0IsQ0FBQztRQUVELE9BQU8sS0FBSyxDQUFDO0lBQ2YsQ0FBQztJQUtTLEtBQUssQ0FBQyxZQUFZO1FBQzFCLE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxhQUFhLEVBQUUsQ0FBQztRQUNsRCxJQUNFLGFBQWEsS0FBSyxhQUFhLENBQUMsT0FBTztZQUN2QyxhQUFhLEtBQUssYUFBYSxDQUFDLFVBQVUsRUFDMUMsQ0FBQztZQUNELE9BQU8sSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ2hDLENBQUM7UUFFRCxJQUFJLGFBQWEsS0FBSyxhQUFhLENBQUMsU0FBUyxFQUFFLENBQUM7WUFDOUMsT0FBTyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7UUFDNUIsQ0FBQztRQUVELE9BQU8sSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQzVCLENBQUM7SUFFa0IsS0FBSyxDQUFDLElBQUksQ0FBQyxPQUFpQztRQUM3RCxJQUFJLENBQUMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3hCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQztRQUMzQixJQUFJLEtBQUssR0FBRyxDQUFDLEVBQUUsQ0FBQztZQUNkLE1BQU0sS0FBSyxHQUFHLE1BQU0sSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1lBRXhDLE1BQU0sR0FBRyxHQUFHLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUMsQ0FBQztZQUN2RCxPQUFPLENBQUMsSUFBSSxFQUFFLENBQUM7WUFDZixPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDO1lBQzdCLElBQUksS0FBSyxHQUFHLENBQUMsRUFBRSxDQUFDO2dCQUNkLE9BQU8sQ0FBQyxXQUFXLElBQUksS0FBSyxDQUFDO1lBQy9CLENBQUM7WUFDRCxPQUFPLENBQUMscUJBQXFCLEdBQUcsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1lBQ2pELFNBQVMsQ0FBQyxPQUFPLEVBQUUsS0FBSyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1lBQy9CLE9BQU8sQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUNwQixDQUFDO1FBRUQsSUFBSSxJQUFJLENBQUMsSUFBSSxFQUFFLEVBQUUsQ0FBQztZQUNoQixPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLEVBQUUsQ0FBQyxDQUFDO1FBQy9CLENBQUM7UUFFRCxNQUFNLElBQUksQ0FBQyxZQUFZLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDbkMsQ0FBQztJQUVrQixTQUFTO1FBQzFCLEtBQUssQ0FBQyxTQUFTLEVBQUUsQ0FBQztRQUNsQixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7UUFDM0IsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsV0FBVyxHQUFHLENBQy9CLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxLQUFLLENBQUMsVUFBVSxHQUFHLEtBQUssQ0FBQyxXQUFXLENBQ3JELENBQUMsUUFBUSxFQUFFLENBQUM7SUFDZixDQUFDOztBQTFLdUIsYUFBSSxHQUFxQyxFQUFFLEFBQXZDLENBQXdDO0FBN0I1QztJQUZ2QixPQUFPLENBQUMsQ0FBQyxDQUFDO0lBQ1YsTUFBTSxFQUFFO3VDQUNpRDtBQWFsQztJQUZ2QixPQUFPLENBQUMsSUFBSSxDQUFDO0lBQ2IsTUFBTSxFQUFFOzJDQUNzRDtBQWN2QztJQUZ2QixPQUFPLENBQUMsSUFBSSxDQUFDO0lBQ2IsTUFBTSxFQUFFO3FDQUNnRDtBQWtDakQ7SUFEUCxRQUFRLEVBQUU7cUNBb0NWO0FBR1M7SUFEVCxRQUFRLEVBQUU7MkNBa0JWO0FBR1M7SUFEVCxRQUFRLEVBQUU7K0NBOEJWO0FBOUpVLFFBQVE7SUFEcEIsUUFBUSxDQUFDLFVBQVUsQ0FBQztHQUNSLFFBQVEsQ0FrTnBCIn0=

package/lib/components/Icon.d.ts

@@ -1,58 +1,63 @@
-import { ColorSignal, PossibleColor, SignalValue, SimpleSignal } from '@revideo/core';
-import { Img, ImgProps } from './Img';
+import {
+  ColorSignal,
+  PossibleColor,
+  SignalValue,
+  SimpleSignal,
+} from '@revideo/core';
+import {Img, ImgProps} from './Img';
 export interface IconProps extends ImgProps {
-    /**
-     * {@inheritDoc Icon.icon}
-     */
-    icon: SignalValue<string>;
-    /**
-     * {@inheritDoc Icon.color}
-     */
-    color?: SignalValue<PossibleColor>;
+  /**
+   * {@inheritDoc Icon.icon}
+   */
+  icon: SignalValue<string>;
+  /**
+   * {@inheritDoc Icon.color}
+   */
+  color?: SignalValue<PossibleColor>;
 }
 /**
  * An Icon Component that provides easy access to over 150k icons.
  * See https://icones.js.org/collection/all for all available Icons.
  */
 export declare class Icon extends Img {
-    /**
-     * The identifier of the icon.
-     *
-     * @remarks
-     * You can find identifiers on [Icônes](https://icones.js.org).
-     * They can look like this:
-     * * `mdi:language-typescript`
-     * * `ph:anchor-simple-bold`
-     * * `ph:activity-bold`
-     */
-    icon: SimpleSignal<string, this>;
-    /**
-     * The color of the icon
-     *
-     * @remarks
-     * Provide the color in one of the following formats:
-     * * named color like `red`, `darkgray`, …
-     * * hexadecimal string with # like `#bada55`, `#141414`
-     *   Value can be either RGB or RGBA: `#bada55`, `#bada55aa` (latter is partially transparent)
-     *   The shorthand version (e.g. `#abc` for `#aabbcc` is also possible.)
-     *
-     * @defaultValue 'white'
-     */
-    color: ColorSignal<this>;
-    constructor(props: IconProps);
-    /**
-     * Create the URL that will be used as the Image source
-     * @returns Address to Iconify API for the requested Icon.
-     */
-    protected svgUrl(): string;
-    /**
-     * overrides `Image.src` getter
-     */
-    protected getSrc(): string;
-    /**
-     * overrides `Image.src` setter to warn the user that the value
-     * is not used
-     */
-    protected setSrc(src: string | null): void;
+  /**
+   * The identifier of the icon.
+   *
+   * @remarks
+   * You can find identifiers on [Icônes](https://icones.js.org).
+   * They can look like this:
+   * * `mdi:language-typescript`
+   * * `ph:anchor-simple-bold`
+   * * `ph:activity-bold`
+   */
+  icon: SimpleSignal<string, this>;
+  /**
+   * The color of the icon
+   *
+   * @remarks
+   * Provide the color in one of the following formats:
+   * * named color like `red`, `darkgray`, …
+   * * hexadecimal string with # like `#bada55`, `#141414`
+   *   Value can be either RGB or RGBA: `#bada55`, `#bada55aa` (latter is partially transparent)
+   *   The shorthand version (e.g. `#abc` for `#aabbcc` is also possible.)
+   *
+   * @defaultValue 'white'
+   */
+  color: ColorSignal<this>;
+  constructor(props: IconProps);
+  /**
+   * Create the URL that will be used as the Image source
+   * @returns Address to Iconify API for the requested Icon.
+   */
+  protected svgUrl(): string;
+  /**
+   * overrides `Image.src` getter
+   */
+  protected getSrc(): string;
+  /**
+   * overrides `Image.src` setter to warn the user that the value
+   * is not used
+   */
+  protected setSrc(src: string | null): void;
 }
-//# sourceMappingURL=Icon.d.ts.map
+//# sourceMappingURL=Icon.d.ts.map

package/lib/components/Img.d.ts

@@ -1,19 +1,26 @@
-import { Color, PossibleVector2, SerializedVector2, SignalValue, SimpleSignal, Vector2 } from '@revideo/core';
-import { DesiredLength } from '../partials';
-import { Rect, RectProps } from './Rect';
+import {
+  Color,
+  PossibleVector2,
+  SerializedVector2,
+  SignalValue,
+  SimpleSignal,
+  Vector2,
+} from '@revideo/core';
+import {DesiredLength} from '../partials';
+import {Rect, RectProps} from './Rect';
 export interface ImgProps extends RectProps {
-    /**
-     * {@inheritDoc Img.src}
-     */
-    src?: SignalValue<string | null>;
-    /**
-     * {@inheritDoc Img.alpha}
-     */
-    alpha?: SignalValue<number>;
-    /**
-     * {@inheritDoc Img.smoothing}
-     */
-    smoothing?: SignalValue<boolean>;
+  /**
+   * {@inheritDoc Img.src}
+   */
+  src?: SignalValue<string | null>;
+  /**
+   * {@inheritDoc Img.alpha}
+   */
+  alpha?: SignalValue<number>;
+  /**
+   * {@inheritDoc Img.smoothing}
+   */
+  smoothing?: SignalValue<boolean>;
 }
 /**
  * A node for displaying images.
@@ -49,68 +56,68 @@ export interface ImgProps extends RectProps {
  * ```
  */
 export declare class Img extends Rect {
-    private static pool;
-    /**
-     * The source of this image.
-     *
-     * @example
-     * Using a local image:
-     * ```tsx
-     * import image from './example.png';
-     * // ...
-     * view.add(<Img src={image} />)
-     * ```
-     * Loading an image from the internet:
-     * ```tsx
-     * view.add(<Img src="https://example.com/image.png" />)
-     * ```
-     */
-    readonly src: SimpleSignal<string, this>;
-    /**
-     * The alpha value of this image.
-     *
-     * @remarks
-     * Unlike opacity, the alpha value affects only the image itself, leaving the
-     * fill, stroke, and children intact.
-     */
-    readonly alpha: SimpleSignal<number, this>;
-    /**
-     * Whether the image should be smoothed.
-     *
-     * @remarks
-     * When disabled, the image will be scaled using the nearest neighbor
-     * interpolation with no smoothing. The resulting image will appear pixelated.
-     *
-     * @defaultValue true
-     */
-    readonly smoothing: SimpleSignal<boolean, this>;
-    constructor(props: ImgProps);
-    protected desiredSize(): SerializedVector2<DesiredLength>;
-    protected image(): HTMLImageElement;
-    protected imageCanvas(): CanvasRenderingContext2D;
-    protected filledImageCanvas(): CanvasRenderingContext2D;
-    protected draw(context: CanvasRenderingContext2D): Promise<void>;
-    protected applyFlex(): void;
-    /**
-     * Get color of the image at the given position.
-     *
-     * @param position - The position in local space at which to sample the color.
-     */
-    getColorAtPoint(position: PossibleVector2): Color;
-    /**
-     * The natural size of this image.
-     *
-     * @remarks
-     * The natural size is the size of the source image unaffected by the size
-     * and scale properties.
-     */
-    naturalSize(): Vector2;
-    /**
-     * Get color of the image at the given pixel.
-     *
-     * @param position - The pixel's position.
-     */
-    getPixelColor(position: PossibleVector2): Color;
-    protected collectAsyncResources(): void;
+  private static pool;
+  /**
+   * The source of this image.
+   *
+   * @example
+   * Using a local image:
+   * ```tsx
+   * import image from './example.png';
+   * // ...
+   * view.add(<Img src={image} />)
+   * ```
+   * Loading an image from the internet:
+   * ```tsx
+   * view.add(<Img src="https://example.com/image.png" />)
+   * ```
+   */
+  readonly src: SimpleSignal<string, this>;
+  /**
+   * The alpha value of this image.
+   *
+   * @remarks
+   * Unlike opacity, the alpha value affects only the image itself, leaving the
+   * fill, stroke, and children intact.
+   */
+  readonly alpha: SimpleSignal<number, this>;
+  /**
+   * Whether the image should be smoothed.
+   *
+   * @remarks
+   * When disabled, the image will be scaled using the nearest neighbor
+   * interpolation with no smoothing. The resulting image will appear pixelated.
+   *
+   * @defaultValue true
+   */
+  readonly smoothing: SimpleSignal<boolean, this>;
+  constructor(props: ImgProps);
+  protected desiredSize(): SerializedVector2<DesiredLength>;
+  protected image(): HTMLImageElement;
+  protected imageCanvas(): CanvasRenderingContext2D;
+  protected filledImageCanvas(): CanvasRenderingContext2D;
+  protected draw(context: CanvasRenderingContext2D): Promise<void>;
+  protected applyFlex(): void;
+  /**
+   * Get color of the image at the given position.
+   *
+   * @param position - The position in local space at which to sample the color.
+   */
+  getColorAtPoint(position: PossibleVector2): Color;
+  /**
+   * The natural size of this image.
+   *
+   * @remarks
+   * The natural size is the size of the source image unaffected by the size
+   * and scale properties.
+   */
+  naturalSize(): Vector2;
+  /**
+   * Get color of the image at the given pixel.
+   *
+   * @param position - The pixel's position.
+   */
+  getPixelColor(position: PossibleVector2): Color;
+  protected collectAsyncResources(): void;
 }
-//# sourceMappingURL=Img.d.ts.map
+//# sourceMappingURL=Img.d.ts.map

package/lib/components/Knot.d.ts

@@ -1,89 +1,108 @@
-import { PossibleVector2, Signal, SignalValue, Vector2Signal } from '@revideo/core';
-import { KnotInfo } from '../curves';
-import { Node, NodeProps } from './Node';
+import {
+  PossibleVector2,
+  Signal,
+  SignalValue,
+  Vector2Signal,
+} from '@revideo/core';
+import {KnotInfo} from '../curves';
+import {Node, NodeProps} from './Node';
 export interface KnotProps extends NodeProps {
-    /**
-     * {@inheritDoc Knot.startHandle}
-     */
-    startHandle?: SignalValue<PossibleVector2>;
-    /**
-     * {@inheritDoc Knot.endHandle}
-     */
-    endHandle?: SignalValue<PossibleVector2>;
-    /**
-     * {@inheritDoc Knot.auto}
-     */
-    auto?: SignalValue<PossibleKnotAuto>;
-    startHandleAuto?: SignalValue<number>;
-    endHandleAuto?: SignalValue<number>;
+  /**
+   * {@inheritDoc Knot.startHandle}
+   */
+  startHandle?: SignalValue<PossibleVector2>;
+  /**
+   * {@inheritDoc Knot.endHandle}
+   */
+  endHandle?: SignalValue<PossibleVector2>;
+  /**
+   * {@inheritDoc Knot.auto}
+   */
+  auto?: SignalValue<PossibleKnotAuto>;
+  startHandleAuto?: SignalValue<number>;
+  endHandleAuto?: SignalValue<number>;
 }
 export type KnotAuto = {
-    startHandle: number;
-    endHandle: number;
+  startHandle: number;
+  endHandle: number;
 };
 export type PossibleKnotAuto = KnotAuto | number | [number, number];
-export type KnotAutoSignal<TOwner> = Signal<PossibleKnotAuto, KnotAuto, TOwner> & {
-    endHandle: Signal<number, number, TOwner>;
-    startHandle: Signal<number, number, TOwner>;
+export type KnotAutoSignal<TOwner> = Signal<
+  PossibleKnotAuto,
+  KnotAuto,
+  TOwner
+> & {
+  endHandle: Signal<number, number, TOwner>;
+  startHandle: Signal<number, number, TOwner>;
 };
 /**
  * A node representing a knot of a {@link Spline}.
  */
 export declare class Knot extends Node {
-    /**
-     * The position of the knot's start handle. The position is provided relative
-     * to the knot's position.
-     *
-     * @remarks
-     * By default, the position of the start handle will be the mirrored position
-     * of the {@link endHandle}.
-     *
-     * If neither an end handle nor a start handle is provided, the positions of
-     * the handles gets calculated automatically to create smooth curve through
-     * the knot. The smoothness of the resulting curve can be controlled via the
-     * {@link Spline.smoothness} property.
-     *
-     * It is also possible to blend between a user-defined position and the
-     * auto-calculated position by using the {@link auto} property.
-     *
-     * @defaultValue Mirrored position of the endHandle.
-     */
-    readonly startHandle: Vector2Signal<this>;
-    /**
-     * The position of the knot's end handle. The position is provided relative
-     * to the knot's position.
-     *
-     * @remarks
-     * By default, the position of the end handle will be the mirrored position
-     * of the {@link startHandle}.
-     *
-     * If neither an end handle nor a start handle is provided, the positions of
-     * the handles gets calculated automatically to create smooth curve through
-     * the knot. The smoothness of the resulting curve can be controlled via the
-     * {@link Spline.smoothness} property.
-     *
-     * It is also possible to blend between a user-defined position and the
-     * auto-calculated position by using the {@link auto} property.
-     *
-     * @defaultValue Mirrored position of the startHandle.
-     */
-    readonly endHandle: Vector2Signal<this>;
-    /**
-     * How much to blend between the user-provided handles and the auto-calculated
-     * handles.
-     *
-     * @remarks
-     * This property has no effect if no explicit handles are provided for the
-     * knot.
-     *
-     * @defaultValue 0
-     */
-    readonly auto: KnotAutoSignal<this>;
-    get startHandleAuto(): Signal<number, number, this, import("@revideo/core").SignalContext<number, number, this>>;
-    get endHandleAuto(): Signal<number, number, this, import("@revideo/core").SignalContext<number, number, this>>;
-    constructor(props: KnotProps);
-    points(): KnotInfo;
-    private getDefaultEndHandle;
-    private getDefaultStartHandle;
+  /**
+   * The position of the knot's start handle. The position is provided relative
+   * to the knot's position.
+   *
+   * @remarks
+   * By default, the position of the start handle will be the mirrored position
+   * of the {@link endHandle}.
+   *
+   * If neither an end handle nor a start handle is provided, the positions of
+   * the handles gets calculated automatically to create smooth curve through
+   * the knot. The smoothness of the resulting curve can be controlled via the
+   * {@link Spline.smoothness} property.
+   *
+   * It is also possible to blend between a user-defined position and the
+   * auto-calculated position by using the {@link auto} property.
+   *
+   * @defaultValue Mirrored position of the endHandle.
+   */
+  readonly startHandle: Vector2Signal<this>;
+  /**
+   * The position of the knot's end handle. The position is provided relative
+   * to the knot's position.
+   *
+   * @remarks
+   * By default, the position of the end handle will be the mirrored position
+   * of the {@link startHandle}.
+   *
+   * If neither an end handle nor a start handle is provided, the positions of
+   * the handles gets calculated automatically to create smooth curve through
+   * the knot. The smoothness of the resulting curve can be controlled via the
+   * {@link Spline.smoothness} property.
+   *
+   * It is also possible to blend between a user-defined position and the
+   * auto-calculated position by using the {@link auto} property.
+   *
+   * @defaultValue Mirrored position of the startHandle.
+   */
+  readonly endHandle: Vector2Signal<this>;
+  /**
+   * How much to blend between the user-provided handles and the auto-calculated
+   * handles.
+   *
+   * @remarks
+   * This property has no effect if no explicit handles are provided for the
+   * knot.
+   *
+   * @defaultValue 0
+   */
+  readonly auto: KnotAutoSignal<this>;
+  get startHandleAuto(): Signal<
+    number,
+    number,
+    this,
+    import('@revideo/core').SignalContext<number, number, this>
+  >;
+  get endHandleAuto(): Signal<
+    number,
+    number,
+    this,
+    import('@revideo/core').SignalContext<number, number, this>
+  >;
+  constructor(props: KnotProps);
+  points(): KnotInfo;
+  private getDefaultEndHandle;
+  private getDefaultStartHandle;
 }
-//# sourceMappingURL=Knot.d.ts.map
+//# sourceMappingURL=Knot.d.ts.map