etro 0.12.0 → 0.13.0

package/dist/etro-cjs.js

@@ -46,7 +46,7 @@ function __awaiter(thisArg, _arguments, P, generator) {
         function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
         function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
         function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
+        step((generator = generator.apply(thisArg, [])).next());
     });
 }
 
@@ -239,9 +239,9 @@ var listeners = new WeakMap();
 var event = /*#__PURE__*/Object.freeze({
     __proto__: null,
     deprecate: deprecate,
+    publish: publish,
     subscribe: subscribe,
-    unsubscribe: unsubscribe,
-    publish: publish
+    unsubscribe: unsubscribe
 });
 
 /**
@@ -359,7 +359,9 @@ var KeyFrame = /** @class */ (function () {
         for (var i = 0; i < this.value.length; i++) {
             var startTime = this.value[i][0];
             var startValue = this.value[i][1];
-            var interpolate = this.value[i].length === 3 ? this.value[i][2] : linearInterp;
+            var interpolate = this.value[i].length === 3
+                ? this.value[i][2]
+                : linearInterp;
             if (i + 1 < this.value.length) {
                 var endTime = this.value[i + 1][0];
                 var endValue = this.value[i + 1][1];
@@ -835,7 +837,7 @@ function AudioSourceMixin(superclass) {
 /**
  * A layer outputs content for the movie
  */
-var Base = /** @class */ (function () {
+var Base$1 = /** @class */ (function () {
     /**
      * Creates a new empty layer
      *
@@ -1029,9 +1031,9 @@ var Base = /** @class */ (function () {
 }());
 // id for events (independent of instance, but easy to access when on prototype
 // chain)
-Base.prototype.type = 'layer';
-Base.prototype.publicExcludes = ['active'];
-Base.prototype.propertyFilters = {};
+Base$1.prototype.type = 'layer';
+Base$1.prototype.publicExcludes = ['active'];
+Base$1.prototype.propertyFilters = {};
 
 // TODO: rename to something more consistent with the naming convention of Visual and VisualSourceMixin
 /**
@@ -1063,7 +1065,7 @@ var Audio = /** @class */ (function (_super) {
             sourceStartTime: 0, duration: undefined });
     };
     return Audio;
-}(AudioSourceMixin(Base)));
+}(AudioSourceMixin(Base$1)));
 
 var CustomArrayListener = /** @class */ (function () {
     function CustomArrayListener() {
@@ -1076,7 +1078,7 @@ var CustomArrayListener = /** @class */ (function () {
 var CustomArray = /** @class */ (function (_super) {
     __extends(CustomArray, _super);
     function CustomArray(target, listener) {
-        var _this = _super.call(this) || this;
+        _super.call(this) || this;
         for (var _i = 0, target_1 = target; _i < target_1.length; _i++) {
             var item = target_1[_i];
             listener.onAdd(item);
@@ -1132,7 +1134,7 @@ var VisualEffects = /** @class */ (function (_super) {
     return VisualEffects;
 }(CustomArray));
 /** Any layer that renders to a canvas */
-var Visual = /** @class */ (function (_super) {
+var Visual$1 = /** @class */ (function (_super) {
     __extends(Visual, _super);
     /**
      * Creates a visual layer
@@ -1226,7 +1228,7 @@ var Visual = /** @class */ (function (_super) {
     Object.defineProperty(Visual.prototype, "ready", {
         get: function () {
             // Typescript doesn't support `super.ready` when targeting es5
-            var superReady = Object.getOwnPropertyDescriptor(Base.prototype, 'ready').get.call(this);
+            var superReady = Object.getOwnPropertyDescriptor(Base$1.prototype, 'ready').get.call(this);
             return superReady && this.effects.every(function (effect) { return effect.ready; });
         },
         enumerable: false,
@@ -1236,7 +1238,7 @@ var Visual = /** @class */ (function (_super) {
      * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
      */
     Visual.prototype.getDefaultOptions = function () {
-        return __assign(__assign({}, Base.prototype.getDefaultOptions()), { 
+        return __assign(__assign({}, Base$1.prototype.getDefaultOptions()), { 
             /**
              * @name module:layer.Visual#x
              * @desc The offset of the layer relative to the movie
@@ -1272,9 +1274,9 @@ var Visual = /** @class */ (function (_super) {
             opacity: 1 });
     };
     return Visual;
-}(Base));
-Visual.prototype.publicExcludes = Base.prototype.publicExcludes.concat(['canvas', 'cctx', 'effects']);
-Visual.prototype.propertyFilters = __assign(__assign({}, Base.prototype.propertyFilters), { 
+}(Base$1));
+Visual$1.prototype.publicExcludes = Base$1.prototype.publicExcludes.concat(['canvas', 'cctx', 'effects']);
+Visual$1.prototype.propertyFilters = __assign(__assign({}, Base$1.prototype.propertyFilters), { 
     /*
      * If this.width or this.height is null, that means "take all available screen
      * space", so set it to this._move.width or this._movie.height, respectively
@@ -1374,7 +1376,7 @@ function VisualSourceMixin(superclass) {
         };
         return MixedVisualSource;
     }(superclass));
-    MixedVisualSource.prototype.propertyFilters = __assign(__assign({}, Visual.prototype.propertyFilters), { 
+    MixedVisualSource.prototype.propertyFilters = __assign(__assign({}, Visual$1.prototype.propertyFilters), { 
         /*
          * If no layer width was provided, fall back to the dest width.
          * If no dest width was provided, fall back to the source width.
@@ -1432,7 +1434,7 @@ var Image = /** @class */ (function (_super) {
         return _super.call(this, options) || this;
     }
     return Image;
-}(VisualSourceMixin(Visual)));
+}(VisualSourceMixin(Visual$1)));
 
 var TextStrokePosition;
 (function (TextStrokePosition) {
@@ -1528,10 +1530,10 @@ var Text = /** @class */ (function (_super) {
      * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
      */
     Text.prototype.getDefaultOptions = function () {
-        return __assign(__assign({}, Visual.prototype.getDefaultOptions()), { background: null, text: undefined, font: '10px sans-serif', color: parseColor('#fff'), textX: 0, textY: 0, maxWidth: null, textAlign: 'start', textBaseline: 'top', textDirection: 'ltr', textStroke: null });
+        return __assign(__assign({}, Visual$1.prototype.getDefaultOptions()), { background: null, text: undefined, font: '10px sans-serif', color: parseColor('#fff'), textX: 0, textY: 0, maxWidth: null, textAlign: 'start', textBaseline: 'top', textDirection: 'ltr', textStroke: null });
     };
     return Text;
-}(Visual));
+}(Visual$1));
 
 /**
  * Layer for an HTML video element
@@ -1553,29 +1555,30 @@ var Video = /** @class */ (function (_super) {
             duration: (_a = options.duration) !== null && _a !== void 0 ? _a : 0 })) || this;
     }
     return Video;
-}(AudioSourceMixin(VisualSourceMixin(Visual))));
+}(AudioSourceMixin(VisualSourceMixin(Visual$1))));
 
 /**
  * @module layer
- */
+ */
+// TODO: Add aligning options, like horizontal and vertical align modes
 
-var index = /*#__PURE__*/Object.freeze({
+var index$1 = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    AudioSourceMixin: AudioSourceMixin,
     Audio: Audio,
-    Base: Base,
+    AudioSourceMixin: AudioSourceMixin,
+    Base: Base$1,
     Image: Image,
     Text: Text,
     get TextStrokePosition () { return TextStrokePosition; },
     Video: Video,
-    VisualSourceMixin: VisualSourceMixin,
-    Visual: Visual
+    Visual: Visual$1,
+    VisualSourceMixin: VisualSourceMixin
 });
 
 /**
  * @deprecated All visual effects now inherit from `Visual` instead
  */
-var Base$1 = /** @class */ (function () {
+var Base = /** @class */ (function () {
     function Base() {
         this.enabled = true;
         this._occurrenceCount = 0;
@@ -1675,14 +1678,14 @@ var Base$1 = /** @class */ (function () {
 }());
 // id for events (independent of instance, but easy to access when on prototype
 // chain)
-Base$1.prototype.type = 'effect';
-Base$1.prototype.publicExcludes = [];
-Base$1.prototype.propertyFilters = {};
+Base.prototype.type = 'effect';
+Base.prototype.publicExcludes = [];
+Base.prototype.propertyFilters = {};
 
 /**
  * Modifies the visual contents of a layer.
  */
-var Visual$1 = /** @class */ (function (_super) {
+var Visual = /** @class */ (function (_super) {
     __extends(Visual, _super);
     function Visual() {
         return _super !== null && _super.apply(this, arguments) || this;
@@ -1700,7 +1703,7 @@ var Visual$1 = /** @class */ (function (_super) {
         _super.prototype.apply.call(this, target, reltime);
     };
     return Visual;
-}(Base$1));
+}(Base));
 
 /**
  * A hardware-accelerated pixel mapping using WebGL
@@ -1772,8 +1775,8 @@ var Shader = /** @class */ (function (_super) {
     Shader.prototype._initAttribs = function () {
         var gl = this._gl;
         this._attribLocations = {
+            vertexPosition: gl.getAttribLocation(this._program, 'a_VertexPosition'),
             textureCoord: gl.getAttribLocation(this._program, 'a_TextureCoord')
-            // a_VertexPosition ?? somehow it works without it though...
         };
     };
     Shader.prototype._initUniforms = function (userUniforms) {
@@ -1991,10 +1994,10 @@ var Shader = /** @class */ (function (_super) {
     Shader._initRectBuffers = function (gl) {
         var position = [
             // the screen/canvas (output)
-            -1.0, 1.0,
+            -1, 1.0,
             1.0, 1.0,
-            -1.0, -1.0,
-            1.0, -1.0
+            -1, -1,
+            1.0, -1
         ];
         var textureCoord = [
             // the texture/canvas (input)
@@ -2130,7 +2133,7 @@ var Shader = /** @class */ (function (_super) {
     Shader._VERTEX_SOURCE = "\n    attribute vec4 a_VertexPosition;\n    attribute vec2 a_TextureCoord;\n\n    varying highp vec2 v_TextureCoord;\n\n    void main() {\n        // no need for projection or model-view matrices, since we're just rendering a rectangle\n        // that fills the screen (see position values)\n        gl_Position = a_VertexPosition;\n        v_TextureCoord = a_TextureCoord;\n    }\n  ";
     Shader._IDENTITY_FRAGMENT_SOURCE = "\n    precision mediump float;\n\n    uniform sampler2D u_Source;\n\n    varying highp vec2 v_TextureCoord;\n\n    void main() {\n        gl_FragColor = texture2D(u_Source, v_TextureCoord);\n    }\n  ";
     return Shader;
-}(Visual$1));
+}(Visual));
 var isPowerOf2 = function (value) { return (value && (value - 1)) === 0; };
 
 /**
@@ -2303,7 +2306,7 @@ var EllipticalMask = /** @class */ (function (_super) {
         ctx.restore();
     };
     return EllipticalMask;
-}(Visual$1));
+}(Visual));
 
 var StackEffectsListener = /** @class */ (function (_super) {
     __extends(StackEffectsListener, _super);
@@ -2376,7 +2379,7 @@ var Stack = /** @class */ (function (_super) {
         return this;
     };
     return Stack;
-}(Visual$1));
+}(Visual));
 
 /**
  * Applies a Gaussian blur
@@ -2597,7 +2600,7 @@ var Transform = /** @class */ (function (_super) {
             this._tmpCanvas.height = target.canvas.height;
         }
         // Use data, since that's the underlying storage
-        this._tmpMatrix.data = val(this, 'matrix.data', reltime);
+        this._tmpMatrix.data = val(this, 'matrix', reltime).data;
         this._tmpCtx.setTransform(this._tmpMatrix.a, this._tmpMatrix.b, this._tmpMatrix.c, this._tmpMatrix.d, this._tmpMatrix.e, this._tmpMatrix.f);
         this._tmpCtx.drawImage(target.canvas, 0, 0);
         // Assume it was identity for now
@@ -2606,7 +2609,7 @@ var Transform = /** @class */ (function (_super) {
         target.cctx.drawImage(this._tmpCanvas, 0, 0);
     };
     return Transform;
-}(Visual$1));
+}(Visual));
 (function (Transform) {
     /**
      * @class
@@ -2750,17 +2753,22 @@ var Transform = /** @class */ (function (_super) {
 
 /**
  * @module effect
- */
+ */
+// TODO: Investigate why an effect might run once in the beginning even if its layer isn't at the beginning
+// TODO: Add audio effect support
+// TODO: implement directional blur
+// TODO: implement radial blur
+// TODO: implement zoom blur
 
-var index$1 = /*#__PURE__*/Object.freeze({
+var index = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    Base: Base$1,
+    Base: Base,
     Brightness: Brightness,
     Channels: Channels,
     ChromaKey: ChromaKey,
     Contrast: Contrast,
-    EllipticalMaskOptions: EllipticalMaskOptions,
     EllipticalMask: EllipticalMask,
+    EllipticalMaskOptions: EllipticalMaskOptions,
     GaussianBlur: GaussianBlur,
     GaussianBlurHorizontal: GaussianBlurHorizontal,
     GaussianBlurVertical: GaussianBlurVertical,
@@ -2769,7 +2777,7 @@ var index$1 = /*#__PURE__*/Object.freeze({
     Shader: Shader,
     Stack: Stack,
     get Transform () { return Transform; },
-    Visual: Visual$1
+    Visual: Visual
 });
 
 var MovieEffectsListener = /** @class */ (function (_super) {
@@ -2883,9 +2891,9 @@ var Movie = /** @class */ (function () {
      * Plays the movie
      *
      * @param [options]
+     * @param [options.onDraw] Called when the current frame is drawn to the canvas
      * @param [options.onStart] Called when the movie starts playing
      * @param [options.duration] The duration of the movie to play in seconds
-     *
      * @return Fulfilled when the movie is done playing, never fails
      */
     Movie.prototype.play = function (options) {
@@ -2911,7 +2919,7 @@ var Movie = /** @class */ (function () {
                         return [4 /*yield*/, new Promise(function (resolve) {
                                 if (!_this.renderingFrame) {
                                     // Not rendering (and not playing), so play.
-                                    _this._render(undefined, resolve);
+                                    _this._render(undefined, resolve, options.onDraw);
                                 }
                                 // Stop rendering frame if currently doing so, because playing has higher
                                 // priority. This will affect the next _render call.
@@ -3145,13 +3153,14 @@ var Movie = /** @class */ (function () {
      * Processes one frame of the movie and draws it to the canvas
      *
      * @param [timestamp=performance.now()]
-     * @param [done=undefined] - Called when done playing or when the current
-     * frame is loaded
+     * @param [done=undefined] - Called when done playing or when the current frame is loaded
+     * @param [onFrameRender=undefined] - Called when the current frame is rendered
      */
-    Movie.prototype._render = function (timestamp, done) {
+    Movie.prototype._render = function (timestamp, done, onFrameRender) {
         var _this = this;
         if (timestamp === void 0) { timestamp = performance.now(); }
         if (done === void 0) { done = undefined; }
+        if (onFrameRender === void 0) { onFrameRender = undefined; }
         clearCachedValues(this);
         if (!this.rendering) {
             // (this.paused && !this._renderingFrame) is true so it's playing or it's
@@ -3215,6 +3224,7 @@ var Movie = /** @class */ (function () {
             this._renderBackground(timestamp);
             this._renderLayers();
             this._applyEffects();
+            onFrameRender === null || onFrameRender === void 0 ? void 0 : onFrameRender();
         }
         else {
             // If we are recording, pause the media recorder until the movie is
@@ -3309,7 +3319,7 @@ var Movie = /** @class */ (function () {
             }
             layer.render();
             // if the layer has visual component
-            if (layer instanceof Visual) {
+            if (layer instanceof Visual$1) {
                 var canvas = layer.canvas;
                 if (canvas.width * canvas.height > 0) {
                     this.cctx.drawImage(canvas, val(layer, 'x', reltime), val(layer, 'y', reltime), canvas.width, canvas.height);
@@ -3618,26 +3628,31 @@ deprecate('movie.timeupdate', undefined, 'Override the `progress` method on laye
  * make typedoc work, this module exports everything as named exports. Then,
  * ./index imports everything from this module and exports it as a default
  * export. Typedoc uses this file, and rollup and NPM use ./index
- */
+ */
+// TODO: investigate possibility of changing movie (canvas) width/height after
+// layers added. I think it's fine, but still make sure.
+// TODO: create built-in audio gain node for volume control in movie and/or
+// layer.
+// TODO: figure out InvalidStateError in beginning only when reloaded
 
 var etro = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    layer: index,
-    effect: index$1,
-    event: event,
-    MovieOptions: MovieOptions,
+    Color: Color,
+    Font: Font,
+    KeyFrame: KeyFrame,
     Movie: Movie,
+    MovieOptions: MovieOptions,
     applyOptions: applyOptions,
     clearCachedValues: clearCachedValues,
-    KeyFrame: KeyFrame,
-    val: val,
-    linearInterp: linearInterp,
     cosineInterp: cosineInterp,
-    Color: Color,
+    effect: index,
+    event: event,
+    layer: index$1,
+    linearInterp: linearInterp,
+    mapPixels: mapPixels,
     parseColor: parseColor,
-    Font: Font,
     parseFont: parseFont,
-    mapPixels: mapPixels
+    val: val
 });
 
 /**