etro 0.8.5 → 0.9.0

package/.github/workflows/nodejs.yml

@@ -10,7 +10,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [10.x, 12.x]
+        node-version: [15.x, 16.x, 17.x]
 
     steps:
     - uses: actions/checkout@v1

package/CHANGELOG.md

@@ -5,6 +5,25 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.9.0] - 2022-07-17
+### Changed
+- Methods in the `Base` effect now accept `Base` layers instead of `Visual` layers.
+
+### Deprecated
+- `autoRefresh` option ([#130](https://github.com/etro-js/etro/issues/130)).
+- `publicExcludes` ([#130](https://github.com/etro-js/etro/issues/130)).
+- All `change` events ([#130](https://github.com/etro-js/etro/issues/130)).
+
+### Fixed
+- Layers no longer trigger infinite loops when their active states change ([#127](https://github.com/etro-js/etro/issues/127)).
+- Add missing `VisualSource` options to `Image` layer ([#128](https://github.com/etro-js/etro/pull/128)).
+- Layers are now stopped when recording ends.
+- `stop()` is no longer called on inactive layers.
+- Movies no longer publish `'movie.ended'` when done recording.
+- `Audio` and `Video` layers not detaching properly.
+- When done playing or recording, movies only reset their time if they're in repeat mode.
+- The `timeupdate` event is no longer fired when `currentTime` remains the same (due to `performance.now()` rounding).
+
 ## [0.8.5] - 2022-03-06
 ### Deprecated
 - `vd.effect.Base` - All visual effects now inherit from `vd.effect.Visual` instead.
@@ -208,6 +227,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - Gaussian blur
   - Transform
 
+[0.9.0]: https://github.com/etro-js/etro/compare/v0.8.5...v0.9.0
 [0.8.5]: https://github.com/etro-js/etro/compare/v0.8.4...v0.8.5
 [0.8.4]: https://github.com/etro-js/etro/compare/v0.8.3...v0.8.4
 [0.8.3]: https://github.com/etro-js/etro/compare/v0.8.2...v0.8.3

package/CONTRIBUTING.md

@@ -4,13 +4,13 @@
 
 Thank you for considering contributing to Etro! There are many ways you can contribute to Etro, like creating issues for features or bugs, improving the docs or wiki, or writing the actual code for the library. This page covers how to make changes to the repository files (either code or docs).
 
-> Etro has a [Taiga Project](https://tree.taiga.io/project/etro-js-etro/epics) for managing issues and a [GitHub Discussion page](https://github.com/etro-js/etro/discussions) for questions, ideas and casual discussion
+[Join our Discord](https://discord.gg/myrBsQ8Cht)
 
 ## Setting up your local environment
 
 #### Step 0: Dependencies
 
-- You will need Git, Node, NPM (at least 7.x) and Chrome (for headless unit testing) installed
+- You will need Git, Node, NPM (at least 7.x) and Firefox (for headless unit testing) installed
 
 #### Step 1: Fork
 
@@ -27,9 +27,9 @@ Thank you for considering contributing to Etro! There are many ways you can cont
 
 #### Step 2: Code
 
-- Make some changes.
-- If you are writing code, the linter uses [StandardJS](https://standardjs.com/rules.html) for style conventions.
-- When you're ready to submit a piece of code, first run
+- Make some changes
+- If you are writing code, the linter uses [StandardJS](https://standardjs.com/rules.html) for style conventions
+- When you're ready to submit, first run
 
   ```
   npm run lint
@@ -57,19 +57,18 @@ Thank you for considering contributing to Etro! There are many ways you can cont
 
 #### Step 3: Push
 
-- First, rebase (don't merge) to integrate your work with the main repository
+- First, rebase (please avoid merging) to integrate your work with any new changes in the main repository
 
   ```
   git fetch upstream
   git rebase upstream/master
   ```
 
-- Push to your fork
+- Push to the fork
 
 #### Step 4: Pull request
 
-- Open a pull request from your the branch in your fork to the main repository
-- In the PR title, include **fixes ###** for bugs and **resolves ###** for feature requests
+- Open a pull request from the branch in your fork to the main repository
 - If you changed any core functionality, make sure you explain your motives for those changes
 
 #### Step 5: Feedback
@@ -80,7 +79,7 @@ Thank you for considering contributing to Etro! There are many ways you can cont
 
 ### Etro Overview
 
-If you are new to the core elements of etro, you should probably read [the overview guide](https://etrojs.dev/docs/overview).
+Check out [the overview guide](https://etrojs.dev/docs/overview) for usage information
 
 ### API Structure
 

package/README.md

@@ -3,7 +3,7 @@
 [![](https://img.shields.io/npm/v/etro)](https://www.npmjs.com/package/etro)
 [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fetro-js%2Fetro%2Fbadge&style=flat)](https://actions-badge.atrox.dev/etro-js/etro/goto)
 
-> Etro was previously known as Vidar, but it had to be renamed to avoid
+> Etro was previously known as Etro, but it had to be renamed to avoid
 > confusion with an existing software product.
 
 Etro is a typescript framework for programmatically editing videos. Similar to
@@ -12,6 +12,8 @@ Etro comes shipped with text, video, audio and image layers, along with a bunch
 of GLSL effects. You can also define your own layers and effects with javascript
 and GLSL.
 
+[Join our Discord](https://discord.gg/myrBsQ8Cht)
+
 ## Features
 
 - Composite video and audio layers

package/dist/effect/base.d.ts

@@ -1,5 +1,5 @@
 import { Movie } from '../movie';
-import { Visual } from '../layer/index';
+import { Base as BaseLayer } from '../layer/index';
 import BaseObject from '../object';
 /**
  * @deprecated All visual effects now inherit from `Visual` instead
@@ -21,8 +21,8 @@ export declare class Base implements BaseObject {
      * Attaches this effect to `target` if not already attached.
      * @ignore
      */
-    tryAttach(target: Movie | Visual): void;
-    attach(movie: Movie | Visual): void;
+    tryAttach(target: Movie | BaseLayer): void;
+    attach(movie: Movie | BaseLayer): void;
     /**
      * Dettaches this effect from its target if the number of times `tryDetach`
      * has been called (including this call) equals the number of times
@@ -40,12 +40,12 @@ export declare class Base implements BaseObject {
      * (will soon be replaced with an instance getter)
      * @abstract
      */
-    apply(target: Movie | Visual, reltime: number): void;
+    apply(target: Movie | BaseLayer, reltime: number): void;
     /**
      * The current time of the target
      */
     get currentTime(): number;
-    get parent(): Movie | Visual;
+    get parent(): Movie | BaseLayer;
     get movie(): Movie;
     getDefaultOptions(): Record<string, unknown>;
 }

package/dist/effect/visual.d.ts

@@ -1,6 +1,17 @@
+import { Movie } from '../movie';
+import { Visual as VisualLayer } from '../layer/index';
 import { Base } from './base';
 /**
  * Modifies the visual contents of a layer.
  */
 export declare class Visual extends Base {
+    /**
+     * 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
+     */
+    apply(target: Movie | VisualLayer, reltime: number): void;
 }

package/dist/etro-cjs.js

@@ -485,6 +485,8 @@ function mapPixels(mapper, canvas, ctx, x, y, width, height, flush) {
  * <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) {
@@ -618,7 +620,10 @@ function AudioSourceMixin(superclass) {
             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;
@@ -836,7 +841,7 @@ 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 = [];
+Base.prototype.publicExcludes = ['active'];
 Base.prototype.propertyFilters = {};
 
 // TODO: rename to something more consistent with the naming convention of Visual and VisualSourceMixin
@@ -1282,6 +1287,18 @@ var Visual$1 = /** @class */ (function (_super) {
     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));
 
@@ -2312,16 +2329,16 @@ var Transform = /** @class */ (function (_super) {
  */
 
 var index$1 = /*#__PURE__*/Object.freeze({
-    GaussianBlur: GaussianBlur,
-    GaussianBlurHorizontal: GaussianBlurHorizontal,
-    GaussianBlurVertical: GaussianBlurVertical,
     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,
@@ -2615,18 +2632,27 @@ var Movie = /** @class */ (function () {
             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) {
+        // TODO: Is calling duration every frame bad for performance? (remember,
+        // it's calling Array.reduce)
+        var end = this.recording ? this._recordEndTime : this.duration;
+        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
@@ -2635,22 +2661,15 @@ var Movie = /** @class */ (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);
@@ -2678,8 +2697,11 @@ var Movie = /** @class */ (function () {
         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 currentTime = this._lastPlayedOffset + sinceLastPlayed; // don't use setter
+            if (this.currentTime !== currentTime) {
+                this._currentTime = currentTime;
+                publish(this, 'movie.timeupdate', { movie: this });
+            }
             // this._lastUpdate = timestamp;
             // }
         }

package/dist/etro-iife.js

@@ -486,6 +486,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) {
@@ -619,7 +621,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;
@@ -837,7 +842,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
@@ -1283,6 +1288,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));
 
@@ -2313,16 +2330,16 @@ var etro = (function () {
      */
 
     var index$1 = /*#__PURE__*/Object.freeze({
-        GaussianBlur: GaussianBlur,
-        GaussianBlurHorizontal: GaussianBlurHorizontal,
-        GaussianBlurVertical: GaussianBlurVertical,
         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,
@@ -2616,18 +2633,27 @@ var etro = (function () {
                 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) {
+            // TODO: Is calling duration every frame bad for performance? (remember,
+            // it's calling Array.reduce)
+            var end = this.recording ? this._recordEndTime : this.duration;
+            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 +2662,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);
@@ -2679,8 +2698,11 @@ var etro = (function () {
             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 currentTime = this._lastPlayedOffset + sinceLastPlayed; // don't use setter
+                if (this.currentTime !== currentTime) {
+                    this._currentTime = currentTime;
+                    publish(this, 'movie.timeupdate', { movie: this });
+                }
                 // this._lastUpdate = timestamp;
                 // }
             }

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/movie.d.ts

@@ -32,10 +32,19 @@ 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>;

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/karma.conf.js

@@ -67,12 +67,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
+      }
+    }
   })
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etro",
-  "version": "0.8.5",
+  "version": "0.9.0",
   "description": "An extendable video-editing framework for the browser and Node",
   "browser": "dist/etro-cjs.js",
   "types": "dist/index.d.ts",
@@ -23,7 +23,7 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "ev": "0.0.7",
-    "http-server": "^0.12.3",
+    "http-server": "^14.1.1",
     "jasmine": "^3.4.0",
     "karma": "^6.1.1",
     "karma-es6-shim": "^1.0.0",
@@ -40,7 +40,7 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-uglify-es": "^0.0.1",
-    "shipjs": "0.23.3",
+    "shipjs": "^0.24.4",
     "typedoc": "^0.22.11",
     "typescript": "^4.1.3"
   },

package/private-todo.txt

@@ -0,0 +1,70 @@
+(A) 2021-04-21 offline recording with ffmpeg.wasm
+(A) 2021-04-21 document events
+(A) 2021-05-17 test recording to mp4
+(A) 2021-05-17 test that keyframes extend last frame for infinity!!
+(B) 2020-08-03 make sure each event's purpose is to notify the public world of notable things that happen in the object.
+(B) 2020-08-27 transitions?
+(B) 2020-12-30 emit modify events when effects are added to layer?
+(B) 2020-12-30 ensure order of `set` and `deleteProperty` are correct in array proxy with `pop`
+(B) 2021-04-12 disable autoRefresh in tests and test integration with this switch some other way
+(C) 2019-10-13 idea: layer inheritance
+(C) 2019-10-13 ignore leading underscore in shader uniform property names
+(C) 2019-10-13 fix opacity with shader effects
+(C) 2020-08-08 Replace val(element, 'property', reltime) with element.property.value
+(C) 2020-08-12 call URL.revokeObjectURL when recording
+(C) 2020-12-30 simplify movie.change.* into movie.change
+(C) 2021-03-28 make all color properties use `Color`
+(C) 2021-04-02 abort recording
+(C) 2021-04-21 webcam example doesn't work on FF unless autoRefresh is set to false
+(C) 2021-07-13 make all layers canvases the same size as the movie
+(C) 2021-07-18 movie stops recording a few frames late when duration is supplied
+(D) 2019-10-15 change chroma key constructor signature
+(D) 2019-11-11 treat zero as invalid for pixelate radius
+(D) 2019-11-11 decide on effect.Transform using hardware acceleration
+(D) 2019-11-18 Look at linearInterp objectKeys default value
+(D) 2019-12-25 Rename `Stack` to something else
+(D) 2020-08-02 Not every option should be set as a property on the object
+(D) 2021-01-24 Remove path support in val (because users would expect it to evaluate every path part)
+(D) 2021-01-26 Fix inheritance checking for media mixin
+(D) 2021-01-26 Media docstring type
+(D) 2021-01-26 Call super in all media mixin methods
+(D) 2021-01-27 Use options.js
+(D) 2021-04-02 error on invalid `record` options
+(D) 2021-04-12 use val() when recalculating AudioSource#duration based on playbackRate
+(D) 2021-07-09 multiple layers of proxies in watched objects
+
+x (B) 2021-04-12 make error range for pixel tests
+x (C) 2021-02-26 make sure that movie background gets val'd
+x (B) 2021-04-03 expose MovieOptions
+x (D) 2019-10-09 probably convert to typescript
+x (C) 2019-10-22 make image and video both extend a mixin
+x (C) 2021-04-03 2019-01-07 record for interval of time
+x (B) 2021-04-03 2021-04-03 add missing properties to MixedVisualSource
+x (D) 2021-04-03 2021-04-03 move opacity out of `border` in Visual
+x (B) 2021-01-28 2020-12-18 split layers up into multiple files
+x (B) 2021-01-28 2020-12-18 split effects up into multiple files
+x (B) 2020-08-27 individual interpolation for keyframe sets
+x (B) 2019-12-24 support node
+x (B) 2020-12-31 2020-12-30 Detach effect when replaced in layer
+x (D) 2020-12-18 2020-08-02 Rename `cctx` -> `vctx`
+x (B) 2019-01-02 fix movie record test failing with GitHub actions
+x (B) 2020-08-03 2020-08-03 don't set Image#clipWidth in init
+x (B) 2020-08-03 2020-08-03 remove properties like Video#mediaWidth, effectively removing layer borders
+x (B) 2020-08-03 2019-10-04 decide on the purpose of events - it's to notify the outside world of notable things that happen in the object
+x (B) 2019-12-25 decide on public / private properties
+x (C) 2019-12-25 2019-12-24 make getDefaultOptions private
+x (D) 2019-11-18 Change Color constructor default a from 255 -> 1.0
+x (A) 2019-12-06 2019-11-11 Start roadmap
+x (A) 2019-11-19 2019-10-22 Util tests
+x (A) 2019-10-22 Effect tests
+x (D) 2019-11-18 2019-11-18 update watchPublic description, removing part that says "after all public properties are initialized in constructor"
+x (B) 2019-10-13 mv examples/media examples/assets
+x (A) 2019-10-22 2019-10-22 Layer tests
+x (B) 2019-10-12 support media live streams
+x (C) 2019-10-03 research if dist/etris-esm.js is necessary
+x (A) 2019-10-04 upload to npm
+x (C) 2019-10-07 lint examples
+x (B) 2019-10-04 fix jsdoc comments after linting
+x (A) 2019-10-07 2019-10-07 fix recording silent movie on chrome
+x (A) 2019-10-05 2019-10-03 research if I can include open media in my repo
+x 2019-10-04 2019-10-03 use one of eslint's official configs

package/src/effect/base.ts

@@ -1,7 +1,7 @@
 import { watchPublic } from '../util'
 import { publish, subscribe } from '../event'
 import { Movie } from '../movie'
-import { Visual } from '../layer/index'
+import { Base as BaseLayer } from '../layer/index'
 import BaseObject from '../object'
 
 /**
@@ -14,7 +14,7 @@ export class Base implements BaseObject {
 
   enabled: boolean
 
-  private _target: Movie | Visual
+  private _target: Movie | BaseLayer
   /**
    * The number of times this effect has been attached to a target minus the
    * number of times it's been detached. (Used for the target's array proxy with
@@ -45,14 +45,14 @@ export class Base implements BaseObject {
    * Attaches this effect to `target` if not already attached.
    * @ignore
    */
-  tryAttach (target: Movie | Visual): void {
+  tryAttach (target: Movie | BaseLayer): void {
     if (this._occurrenceCount === 0)
       this.attach(target)
 
     this._occurrenceCount++
   }
 
-  attach (movie: Movie | Visual): void {
+  attach (movie: Movie | BaseLayer): void {
     this._target = movie
   }
 
@@ -87,7 +87,7 @@ export class Base implements BaseObject {
    * (will soon be replaced with an instance getter)
    * @abstract
    */
-  apply (target: Movie | Visual, reltime: number): void {} // eslint-disable-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+  apply (target: Movie | BaseLayer, reltime: number): void {} // eslint-disable-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
 
   /**
    * The current time of the target
@@ -96,7 +96,7 @@ export class Base implements BaseObject {
     return this._target ? this._target.currentTime : undefined
   }
 
-  get parent (): Movie | Visual {
+  get parent (): Movie | BaseLayer {
     return this._target
   }
 

package/src/effect/visual.ts

@@ -1,6 +1,21 @@
+import { Movie } from '../movie'
+import { Visual as VisualLayer } from '../layer/index'
 import { Base } from './base'
 
 /**
  * Modifies the visual contents of a layer.
  */
-export class Visual extends Base {}
+export class Visual extends Base {
+  // 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
+   */
+  apply (target: Movie | VisualLayer, reltime: number): void { // eslint-disable-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+    super.apply(target, reltime)
+  }
+}

package/src/layer/audio-source.ts

@@ -134,7 +134,10 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
     }
 
     detach () {
-      this.audioNode.disconnect(this.movie.actx.destination)
+      // Cache dest before super.detach() unsets this.movie
+      const dest = this.movie.actx.destination
+      super.detach()
+      this.audioNode.disconnect(dest)
     }
 
     start () {

package/src/layer/base.ts

@@ -169,7 +169,7 @@ class Base implements EtroObject {
 // 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 = {}
 
 export { Base, BaseOptions }

package/src/layer/image.ts

@@ -1,7 +1,7 @@
-import { Visual, VisualOptions } from './visual'
-import { VisualSourceMixin } from './visual-source'
+import { Visual } from './visual'
+import { VisualSourceMixin, VisualSourceOptions } from './visual-source'
 
-type ImageOptions = VisualOptions
+type ImageOptions = VisualSourceOptions
 
 class Image extends VisualSourceMixin(Visual) {}
 

package/src/movie.ts

@@ -44,11 +44,20 @@ export class MovieOptions {
 // TODO: rename renderingFrame -> refreshing
 export 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>
@@ -379,19 +388,32 @@ export class Movie {
     }
 
     this._updateCurrentTime(timestamp)
-    const recordingEnd = this.recording ? this._recordEndTime : this.duration
-    const recordingEnded = this.currentTime > recordingEnd
-    if (recordingEnded)
-      publish(this, 'movie.recordended', { movie: this })
-
-    // Bad for performance? (remember, it's calling Array.reduce)
-    const end = this.duration
-    const ended = this.currentTime > end
-    if (ended) {
+
+    // TODO: Is calling duration every frame bad for performance? (remember,
+    // it's calling Array.reduce)
+    const end = this.recording ? this._recordEndTime : this.duration
+    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
@@ -400,27 +422,18 @@ export class Movie {
             const 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
           }
-      }
-
-      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 })
-    }
+        if (done)
+          done()
 
-    // Stop playback or recording if done
-    if (recordingEnded || (ended && !this.repeat)) {
-      if (done)
-        done()
-
-      return
+        return
+      }
     }
 
     // Do render
@@ -454,8 +467,11 @@ export class Movie {
     if (!this._renderingFrame) {
       // if ((timestamp - this._lastUpdate) >= this._updateInterval) {
       const sinceLastPlayed = (timestamp - this._lastPlayed) / 1000
-      this._currentTime = this._lastPlayedOffset + sinceLastPlayed // don't use setter
-      publish(this, 'movie.timeupdate', { movie: this })
+      const currentTime = this._lastPlayedOffset + sinceLastPlayed // don't use setter
+      if (this.currentTime !== currentTime) {
+        this._currentTime = currentTime
+        publish(this, 'movie.timeupdate', { movie: this })
+      }
       // this._lastUpdate = timestamp;
       // }
     }

package/src/util.ts

@@ -415,6 +415,8 @@ export function mapPixels (
  * <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 function watchPublic (target: EtroObject): EtroObject {