etro 0.8.5 → 0.9.1

package/dist/etro-iife.js

@@ -126,6 +126,7 @@ var etro = (function () {
     var listeners = new WeakMap();
 
     var event = /*#__PURE__*/Object.freeze({
+        __proto__: null,
         subscribe: subscribe,
         unsubscribe: unsubscribe,
         publish: publish
@@ -375,7 +376,7 @@ var etro = (function () {
          * Converts to a CSS color
          */
         Color.prototype.toString = function () {
-            return "rgba(" + this.r + ", " + this.g + ", " + this.b + ", " + this.a + ")";
+            return "rgba(".concat(this.r, ", ").concat(this.g, ", ").concat(this.b, ", ").concat(this.a, ")");
         };
         return Color;
     }());
@@ -434,7 +435,7 @@ var etro = (function () {
                 s += this.weight + ' ';
             if (this.stretch !== 'normal')
                 s += this.stretch + ' ';
-            s += "" + this.size + this.sizeUnit + " ";
+            s += "".concat(this.size).concat(this.sizeUnit, " ");
             if (this.lineHeight !== 'normal')
                 s += this.lineHeight + ' ';
             s += this.family;
@@ -451,7 +452,7 @@ var etro = (function () {
      */
     function parseFont(str) {
         // Assign css string to html element
-        parseFontEl.setAttribute('style', "font: " + str);
+        parseFontEl.setAttribute('style', "font: ".concat(str));
         var _a = parseFontEl.style, fontSize = _a.fontSize, fontFamily = _a.fontFamily, fontStyle = _a.fontStyle, fontVariant = _a.fontVariant, fontWeight = _a.fontWeight, lineHeight = _a.lineHeight;
         parseFontEl.removeAttribute('style');
         var size = parseFloat(fontSize);
@@ -486,6 +487,8 @@ var etro = (function () {
      * <p>Must be called before any watchable properties are set, and only once in
      * the prototype chain.
      *
+     * @deprecated Will be removed in the future (see issue #130)
+     *
      * @param target - object to watch
      */
     function watchPublic(target) {
@@ -494,7 +497,7 @@ var etro = (function () {
         };
         var callback = function (prop, val, receiver) {
             // Public API property updated, emit 'modify' event.
-            publish(proxy, target.type + ".change.modify", { property: getPath(receiver, prop), newValue: val });
+            publish(proxy, "".concat(target.type, ".change.modify"), { property: getPath(receiver, prop), newValue: val });
         };
         var canWatch = function (receiver, prop) { return !prop.startsWith('_') &&
             (receiver.publicExcludes === undefined || !receiver.publicExcludes.includes(prop)); };
@@ -619,7 +622,10 @@ var etro = (function () {
                 this.audioNode.connect(movie.actx.destination);
             };
             MixedAudioSource.prototype.detach = function () {
-                this.audioNode.disconnect(this.movie.actx.destination);
+                // Cache dest before super.detach() unsets this.movie
+                var dest = this.movie.actx.destination;
+                _super.prototype.detach.call(this);
+                this.audioNode.disconnect(dest);
             };
             MixedAudioSource.prototype.start = function () {
                 this.source.currentTime = this.currentTime + this.sourceStartTime;
@@ -728,7 +734,7 @@ var etro = (function () {
             // Propogate up to target
             subscribe(newThis, 'layer.change', function (event) {
                 var typeOfChange = event.type.substring(event.type.lastIndexOf('.') + 1);
-                var type = "movie.change.layer." + typeOfChange;
+                var type = "movie.change.layer.".concat(typeOfChange);
                 publish(newThis._movie, type, __assign(__assign({}, event), { target: newThis._movie, type: type }));
             });
             return newThis;
@@ -801,7 +807,8 @@ var etro = (function () {
              * The current time of the movie relative to this layer
              */
             get: function () {
-                return this._movie ? this._movie.currentTime - this.startTime
+                return this._movie
+                    ? this._movie.currentTime - this.startTime
                     : undefined;
             },
             enumerable: false,
@@ -837,7 +844,7 @@ var etro = (function () {
     // id for events (independent of instance, but easy to access when on prototype
     // chain)
     Base.prototype.type = 'layer';
-    Base.prototype.publicExcludes = [];
+    Base.prototype.publicExcludes = ['active'];
     Base.prototype.propertyFilters = {};
 
     // TODO: rename to something more consistent with the naming convention of Visual and VisualSourceMixin
@@ -982,13 +989,13 @@ var etro = (function () {
                 height: null, 
                 /**
                  * @name module:layer.Visual#background
-                 * @desc The CSS color code for the background, or <code>null</code> for
+                 * @desc The color code for the background, or <code>null</code> for
                  * transparency
                  */
                 background: null, 
                 /**
                  * @name module:layer.Visual#border
-                 * @desc The CSS border style, or <code>null</code> for no border
+                 * @desc The border style, or <code>null</code> for no border
                  */
                 border: null, 
                 /**
@@ -1063,19 +1070,23 @@ var etro = (function () {
                 // instead. (TODO: fact check)
                 /* eslint-disable eqeqeq */
                 return destWidth != undefined
-                    ? destWidth : val(this, 'sourceWidth', this.currentTime);
+                    ? destWidth
+                    : val(this, 'sourceWidth', this.currentTime);
             }, destHeight: function (destHeight) {
                 /* eslint-disable eqeqeq */
                 return destHeight != undefined
-                    ? destHeight : val(this, 'sourceHeight', this.currentTime);
+                    ? destHeight
+                    : val(this, 'sourceHeight', this.currentTime);
             }, width: function (width) {
                 /* eslint-disable eqeqeq */
                 return width != undefined
-                    ? width : val(this, 'destWidth', this.currentTime);
+                    ? width
+                    : val(this, 'destWidth', this.currentTime);
             }, height: function (height) {
                 /* eslint-disable eqeqeq */
                 return height != undefined
-                    ? height : val(this, 'destHeight', this.currentTime);
+                    ? height
+                    : val(this, 'destHeight', this.currentTime);
             } });
         return MixedVisualSource;
     }
@@ -1147,7 +1158,7 @@ var etro = (function () {
               return metrics;
           } */
         Text.prototype.getDefaultOptions = function () {
-            return __assign(__assign({}, Visual.prototype.getDefaultOptions()), { background: null, text: undefined, font: '10px sans-serif', color: '#fff', textX: 0, textY: 0, maxWidth: null, textAlign: 'start', textBaseline: 'top', textDirection: 'ltr' });
+            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' });
         };
         return Text;
     }(Visual));
@@ -1171,6 +1182,7 @@ var etro = (function () {
      */
 
     var index = /*#__PURE__*/Object.freeze({
+        __proto__: null,
         AudioSourceMixin: AudioSourceMixin,
         Audio: Audio,
         Base: Base,
@@ -1194,7 +1206,7 @@ var etro = (function () {
             subscribe(newThis, 'effect.change.modify', function (event) {
                 if (!newThis._target)
                     return;
-                var type = newThis._target.type + ".change.effect.modify";
+                var type = "".concat(newThis._target.type, ".change.effect.modify");
                 publish(newThis._target, type, __assign(__assign({}, event), { target: newThis._target, source: newThis, type: type }));
             });
             return newThis;
@@ -1283,6 +1295,18 @@ var etro = (function () {
         function Visual() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
+        // subclasses must implement apply
+        /**
+         * Apply this effect to a target at the given time
+         *
+         * @param target
+         * @param reltime - the movie's current time relative to the layer
+         * (will soon be replaced with an instance getter)
+         * @abstract
+         */
+        Visual.prototype.apply = function (target, reltime) {
+            _super.prototype.apply.call(this, target, reltime);
+        };
         return Visual;
     }(Base$1));
 
@@ -1342,7 +1366,7 @@ var etro = (function () {
                      * object.
                      */
                     if (userUniforms[name_1])
-                        throw new Error("Texture - uniform naming conflict: " + name_1 + "!");
+                        throw new Error("Texture - uniform naming conflict: ".concat(name_1, "!"));
                     // Add this as a "user uniform".
                     userUniforms[name_1] = '1i'; // texture pointer
                 }
@@ -1551,7 +1575,7 @@ var etro = (function () {
                         value.g !== undefined ? value.g : def,
                         value.b !== undefined ? value.b : def
                     ];
-                throw new Error("Invalid type: " + outputType + " or value: " + value);
+                throw new Error("Invalid type: ".concat(outputType, " or value: ").concat(value));
             }
             if (outputType === '4fv') {
                 if (Array.isArray(value) && value.length === 4)
@@ -1564,7 +1588,7 @@ var etro = (function () {
                         value.b !== undefined ? value.b : def,
                         value.a !== undefined ? value.a : def
                     ];
-                throw new Error("Invalid type: " + outputType + " or value: " + value);
+                throw new Error("Invalid type: ".concat(outputType, " or value: ").concat(value));
             }
             return value;
         };
@@ -2041,7 +2065,7 @@ var etro = (function () {
         };
         GaussianBlurComponent._genPascalRow = function (index) {
             if (index < 0)
-                throw new Error("Invalid index " + index);
+                throw new Error("Invalid index ".concat(index));
             var currRow = [1];
             for (var i = 1; i < index; i++) {
                 var nextRow = [];
@@ -2313,16 +2337,17 @@ var etro = (function () {
      */
 
     var index$1 = /*#__PURE__*/Object.freeze({
-        GaussianBlur: GaussianBlur,
-        GaussianBlurHorizontal: GaussianBlurHorizontal,
-        GaussianBlurVertical: GaussianBlurVertical,
+        __proto__: null,
         Base: Base$1,
+        Brightness: Brightness,
         Channels: Channels,
         ChromaKey: ChromaKey,
         Contrast: Contrast,
         EllipticalMaskOptions: EllipticalMaskOptions,
         EllipticalMask: EllipticalMask,
-        Brightness: Brightness,
+        GaussianBlur: GaussianBlur,
+        GaussianBlurHorizontal: GaussianBlurHorizontal,
+        GaussianBlurVertical: GaussianBlurVertical,
         Grayscale: Grayscale,
         Pixelate: Pixelate,
         Shader: Shader,
@@ -2344,8 +2369,6 @@ var etro = (function () {
      *
      * Implements a pub/sub system.
      */
-    // TODO: Implement event "durationchange", and more
-    // TODO: Add width and height options
     // TODO: Make record option to make recording video output to the user while
     // it's recording
     // TODO: rename renderingFrame -> refreshing
@@ -2615,19 +2638,28 @@ var etro = (function () {
                     done();
                 return;
             }
-            this._updateCurrentTime(timestamp);
-            var recordingEnd = this.recording ? this._recordEndTime : this.duration;
-            var recordingEnded = this.currentTime > recordingEnd;
-            if (recordingEnded)
-                publish(this, 'movie.recordended', { movie: this });
-            // Bad for performance? (remember, it's calling Array.reduce)
-            var end = this.duration;
-            var ended = this.currentTime > end;
-            if (ended) {
+            var end = this.recording ? this._recordEndTime : this.duration;
+            this._updateCurrentTime(timestamp, end);
+            // TODO: Is calling duration every frame bad for performance? (remember,
+            // it's calling Array.reduce)
+            if (this.currentTime === end) {
+                if (this.recording)
+                    publish(this, 'movie.recordended', { movie: this });
+                if (this.currentTime === this.duration)
+                    publish(this, 'movie.ended', { movie: this, repeat: this.repeat });
+                // TODO: only reset currentTime if repeating
+                if (this.repeat) {
+                    // Don't use setter, which publishes 'movie.seek'. Instead, update the
+                    // value and publish a 'movie.timeupdate' event.
+                    this._currentTime = 0;
+                    publish(this, 'movie.timeupdate', { movie: this });
+                }
                 this._lastPlayed = performance.now();
                 this._lastPlayedOffset = 0; // this.currentTime
                 this._renderingFrame = false;
-                if (!this.repeat || this.recording) {
+                // Stop playback or recording if done (except if it's playing and repeat
+                // is true)
+                if (!(!this.recording && this.repeat)) {
                     this._paused = true;
                     this._ended = true;
                     // Deactivate all layers
@@ -2636,22 +2668,15 @@ var etro = (function () {
                             var layer = this.layers[i];
                             // A layer that has been deleted before layers.length has been updated
                             // (see the layers proxy in the constructor).
-                            if (!layer)
+                            if (!layer || !layer.active)
                                 continue;
                             layer.stop();
                             layer.active = false;
                         }
+                    if (done)
+                        done();
+                    return;
                 }
-                publish(this, 'movie.ended', { movie: this, repeat: this.repeat });
-                // TODO: only reset currentTime if repeating
-                this._currentTime = 0; // don't use setter
-                publish(this, 'movie.timeupdate', { movie: this });
-            }
-            // Stop playback or recording if done
-            if (recordingEnded || (ended && !this.repeat)) {
-                if (done)
-                    done();
-                return;
             }
             // Do render
             this._renderBackground(timestamp);
@@ -2673,16 +2698,21 @@ var etro = (function () {
                 _this._render(repeat, undefined, done);
             }); // TODO: research performance cost
         };
-        Movie.prototype._updateCurrentTime = function (timestamp) {
+        Movie.prototype._updateCurrentTime = function (timestampMs, end) {
             // If we're only instant-rendering (current frame only), it doens't matter
             // if it's paused or not.
             if (!this._renderingFrame) {
                 // if ((timestamp - this._lastUpdate) >= this._updateInterval) {
-                var sinceLastPlayed = (timestamp - this._lastPlayed) / 1000;
-                this._currentTime = this._lastPlayedOffset + sinceLastPlayed; // don't use setter
-                publish(this, 'movie.timeupdate', { movie: this });
+                var sinceLastPlayed = (timestampMs - this._lastPlayed) / 1000;
+                var currentTime = this._lastPlayedOffset + sinceLastPlayed; // don't use setter
+                if (this.currentTime !== currentTime) {
+                    this._currentTime = currentTime;
+                    publish(this, 'movie.timeupdate', { movie: this });
+                }
                 // this._lastUpdate = timestamp;
                 // }
+                if (this.currentTime > end)
+                    this.currentTime = end;
             }
         };
         Movie.prototype._renderBackground = function (timestamp) {
@@ -2949,9 +2979,9 @@ var etro = (function () {
                 canvas: undefined,
                 /**
                  * @name module:movie#background
-                 * @desc The css color for the background, or <code>null</code> for transparency
+                 * @desc The color for the background, or <code>null</code> for transparency
                  */
-                background: '#000',
+                background: parseColor('#000'),
                 /**
                  * @name module:movie#repeat
                  */
@@ -2979,6 +3009,7 @@ var etro = (function () {
      */
 
     var etro = /*#__PURE__*/Object.freeze({
+        __proto__: null,
         layer: index,
         effect: index$1,
         event: event,

package/dist/layer/image.d.ts

@@ -1,5 +1,5 @@
-import { VisualOptions } from './visual';
-declare type ImageOptions = VisualOptions;
+import { VisualSourceOptions } from './visual-source';
+declare type ImageOptions = VisualSourceOptions;
 declare const Image_base: new (...args: unknown[]) => import("./visual-source").VisualSource;
 declare class Image extends Image_base {
 }

package/dist/layer/text.d.ts

@@ -1,9 +1,9 @@
-import { Dynamic } from '../util';
+import { Dynamic, Color } from '../util';
 import { Visual, VisualOptions } from './visual';
 interface TextOptions extends VisualOptions {
     text: Dynamic<string>;
     font?: Dynamic<string>;
-    color?: Dynamic<string>;
+    color?: Dynamic<Color>;
     /** The text's horizontal offset from the layer */
     textX?: Dynamic<number>;
     /** The text's vertical offset from the layer */
@@ -27,7 +27,7 @@ interface TextOptions extends VisualOptions {
 declare class Text extends Visual {
     text: Dynamic<string>;
     font: Dynamic<string>;
-    color: Dynamic<string>;
+    color: Dynamic<Color>;
     /** The text's horizontal offset from the layer */
     textX: Dynamic<number>;
     /** The text's vertical offset from the layer */

package/dist/layer/visual-source.d.ts

@@ -1,9 +1,24 @@
 import { Dynamic } from '../util';
-import { Base, BaseOptions } from './base';
 import { Visual, VisualOptions } from './visual';
 declare type Constructor<T> = new (...args: unknown[]) => T;
-interface VisualSource extends Base {
+interface VisualSource extends Visual {
     readonly source: HTMLImageElement | HTMLVideoElement;
+    /** What part of {@link source} to render */
+    sourceX: Dynamic<number>;
+    /** What part of {@link source} to render */
+    sourceY: Dynamic<number>;
+    /** What part of {@link source} to render, or undefined for the entire width */
+    sourceWidth: Dynamic<number>;
+    /** What part of {@link source} to render, or undefined for the entire height */
+    sourceHeight: Dynamic<number>;
+    /** Where to render {@link source} onto the layer */
+    destX: Dynamic<number>;
+    /** Where to render {@link source} onto the layer */
+    destY: Dynamic<number>;
+    /** Where to render {@link source} onto the layer, or undefined to fill the layer's width */
+    destWidth: Dynamic<number>;
+    /** Where to render {@link source} onto the layer, or undefined to fill the layer's height */
+    destHeight: Dynamic<number>;
 }
 interface VisualSourceOptions extends VisualOptions {
     source: HTMLImageElement | HTMLVideoElement;
@@ -28,5 +43,5 @@ interface VisualSourceOptions extends VisualOptions {
  * A layer that gets its image data from an HTML image or video element
  * @mixin VisualSourceMixin
  */
-declare function VisualSourceMixin<OptionsSuperclass extends BaseOptions>(superclass: Constructor<Visual>): Constructor<VisualSource>;
+declare function VisualSourceMixin<OptionsSuperclass extends VisualOptions>(superclass: Constructor<Visual>): Constructor<VisualSource>;
 export { VisualSource, VisualSourceOptions, VisualSourceMixin };

package/dist/layer/visual.d.ts

@@ -1,4 +1,4 @@
-import { Dynamic } from '../util';
+import { Dynamic, Color } from '../util';
 import { Base, BaseOptions } from './base';
 import { Visual as VisualEffect } from '../effect/visual';
 interface VisualOptions extends BaseOptions {
@@ -6,9 +6,9 @@ interface VisualOptions extends BaseOptions {
     y?: Dynamic<number>;
     width?: Dynamic<number>;
     height?: Dynamic<number>;
-    background?: Dynamic<string>;
+    background?: Dynamic<Color>;
     border?: Dynamic<{
-        color: string;
+        color: Color;
         thickness?: number;
     }>;
     opacity?: Dynamic<number>;
@@ -19,9 +19,9 @@ declare class Visual extends Base {
     y: Dynamic<number>;
     width: Dynamic<number>;
     height: Dynamic<number>;
-    background: Dynamic<string>;
+    background: Dynamic<Color>;
     border: Dynamic<{
-        color: string;
+        color: Color;
         thickness: number;
     }>;
     opacity: Dynamic<number>;

package/dist/movie.d.ts

@@ -1,7 +1,7 @@
 /**
  * @module movie
  */
-import { Dynamic } from './util';
+import { Dynamic, Color } from './util';
 import { Base as BaseLayer } from './layer/index';
 import { Base as BaseEffect } from './effect/index';
 declare global {
@@ -20,7 +20,7 @@ export declare class MovieOptions {
     /** @deprecated Use <code>actx</code> instead */
     audioContext?: AudioContext;
     /** The background color of the movie as a cSS string */
-    background?: Dynamic<string>;
+    background?: Dynamic<Color>;
     repeat?: boolean;
     /** Call `refresh` when the user changes a property on the movie or any of its layers or effects */
     autoRefresh?: boolean;
@@ -32,13 +32,22 @@ export declare class MovieOptions {
  */
 export declare class Movie {
     type: string;
+    /**
+     * @deprecated Auto-refresh will be removed in the future (see issue #130).
+     */
     publicExcludes: string[];
     propertyFilters: Record<string, <T>(value: T) => T>;
     repeat: boolean;
-    /** Call `refresh` when the user changes a property on the movie or any of its layers or effects */
+    /**
+     * Call `refresh` when the user changes a property on the movie or any of its
+     * layers or effects
+     *
+     * @deprecated Auto-refresh will be removed in the future. If you want to
+     * refresh the canvas, call `refresh`. See issue #130.
+     */
     autoRefresh: boolean;
     /** The background color of the movie as a cSS string */
-    background: Dynamic<string>;
+    background: Dynamic<Color>;
     /** The audio context to which audio output is sent during playback */
     readonly actx: AudioContext;
     readonly effects: BaseEffect[];

package/dist/object.d.ts

@@ -3,7 +3,11 @@ import { Movie } from './movie';
 export default interface EtroObject {
     /** Used in etro internals */
     type: string;
-    /** Which properties to not watch for changes, for `Movie#autoRefresh` */
+    /**
+     * Which properties to not watch for changes, for `Movie#autoRefresh`
+     *
+     * @deprecated `Movie#autoRefresh` is deprecated
+     */
     publicExcludes: string[];
     /** Map of property name to function to run on result of `val` */
     propertyFilters: Record<string, <T>(value: T) => T>;

package/dist/util.d.ts

@@ -120,6 +120,8 @@ export declare function mapPixels(mapper: (pixels: Uint8ClampedArray, i: number)
  * <p>Must be called before any watchable properties are set, and only once in
  * the prototype chain.
  *
+ * @deprecated Will be removed in the future (see issue #130)
+ *
  * @param target - object to watch
  */
 export declare function watchPublic(target: EtroObject): EtroObject;

package/eslint.conf.js

@@ -10,7 +10,9 @@ module.exports = {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly'
   },
+  parser: '@typescript-eslint/parser',
   parserOptions: {
+    // requireConfigFile: false,
     ecmaVersion: 2018,
     sourceType: 'module'
   },

package/eslint.test-conf.js

@@ -1,5 +1,4 @@
 const conf = require('./eslint.conf.js')
 conf.env.jasmine = true
-conf.globals.define = 'readonly'
-conf.globals.etro = 'readonly'
+
 module.exports = conf

package/karma.conf.js

@@ -11,15 +11,13 @@ module.exports = function (config) {
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['jasmine', 'requirejs', 'es6-shim'],
+    frameworks: ['jasmine', 'karma-typescript'],
 
     // list of files / patterns to load in the browser
     files: [
-      'dist/etro-iife.js',
-      { pattern: 'spec/*.spec.js', included: false },
-      { pattern: 'node_modules/resemblejs/*.js', included: false },
-      'spec/main.js',
-      { pattern: 'spec/assets/**/*', included: false }
+      'src/**/*.ts',
+      'spec/**/*.ts',
+      { pattern: 'spec/integration/assets/**/*', included: false }
     ],
 
     // list of files / patterns to exclude
@@ -29,12 +27,13 @@ module.exports = function (config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
+      '**/*.ts': ['karma-typescript']
     },
 
     // test results reporter to use
     // possible values: 'dots', 'progress'
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['dots'],
+    reporters: ['dots', 'karma-typescript'],
 
     // web server port
     port: 9876,
@@ -67,12 +66,22 @@ module.exports = function (config) {
       captureConsole: true
     },
 
+    browserConsoleLogOptions: {
+      level: 'log'
+    },
+
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits
     singleRun: true,
 
     // Concurrency level
     // how many browser should be started simultaneous
-    concurrency: Infinity
+    concurrency: Infinity,
+
+    client: {
+      jasmine: {
+        timeoutInterval: 10000
+      }
+    }
   })
 }