etro 0.10.0 → 0.11.0

package/.github/workflows/nodejs.yml

@@ -21,12 +21,25 @@ jobs:
     - name: Update npm
       run: |
         npm i -g npm@^7.x
-    - name: npm install, lint, build, and test
+    - name: Install npm dependencies
       run: |
         npm ci
         node node_modules/puppeteer/install.js
-        npm run lint
-        npm run build
-        xvfb-run --auto-servernum npm test
+      env:
+        CI: true
+    - name: lint code
+      run: npm run lint
+      env:
+        CI: true
+    - name: compile project
+      run: npm run build
+      env:
+        CI: true
+    - name: run unit tests
+      run: xvfb-run --auto-servernum npm run test:unit
+      env:
+        CI: true
+    - name: run smoke tests
+      run: xvfb-run --auto-servernum npm run test:smoke
       env:
         CI: true

package/.github/workflows/shipjs-trigger.yml

@@ -22,7 +22,10 @@ jobs:
           else
             npm install
           fi
-      - run: npx shipjs trigger
+      - run: |
+          git config --global user.email "16855387+clabe45@users.noreply.github.com"
+          git config --global user.name "Caleb Sacks"
+          npx shipjs trigger
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}

package/.husky/pre-commit

@@ -0,0 +1,7 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint
+npm run test:unit
+npm run test:smoke
+npm run test:integration

package/.husky/prepare-commit-msg

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+
+# gitmoji as a commit hook
+if npx -v >&/dev/null
+then
+  exec < /dev/tty
+  npx -c "gitmoji --hook $1 $2"
+else
+  exec < /dev/tty
+  gitmoji --hook $1 $2
+fi

package/CHANGELOG.md

@@ -5,6 +5,23 @@ 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.11.0] - 2023-08-05
+### Added
+- `duration` option for `Movie#play` ([#208](https://github.com/etro-js/etro/pull/208)).
+
+### Fixed
+- Audio and video layers going silent after the first time recording the movie ([#106](https://github.com/etro-js/etro/issues/106)).
+- `Failed to set the 'currentTime' property on 'HTMLMediaElement'` error when seeking audio and video layers ([#227](https://github.com/etro-js/etro/pull/227)).
+- Seeking while playing not updating the movie's current time ([#233](https://github.com/etro-js/etro/issues/233)).
+
+### Security
+- Bump word-wrap from 1.2.3 to 1.2.5 ([#222](https://github.com/etro-js/etro/pull/222)).
+
+## [0.10.1] - 2023-07-16
+### Security
+- Bump engine.io and socket.io.
+- Bump socket.io-parser from 4.2.1 to 4.2.3.
+
 ## [0.10.0] - 2023-04-18
 ### Added
 - `Movie#stream()` to stream the movie to a `MediaStream`.
@@ -275,6 +292,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - Gaussian blur
   - Transform
 
+[0.11.0]: https://github.com/etro-js/etro/compare/v0.10.1...v0.11.0
+[0.10.1]: https://github.com/etro-js/etro/compare/v0.10.0...v0.10.1
 [0.10.0]: https://github.com/etro-js/etro/compare/v0.9.1...v0.10.0
 [0.9.1]: https://github.com/etro-js/etro/compare/v0.9.0...v0.9.1
 [0.9.0]: https://github.com/etro-js/etro/compare/v0.8.5...v0.9.0

package/CONTRIBUTING.md

@@ -1,5 +1,7 @@
 # Contributing
 
+> If you would like to update the docs, please see [the docs repo](https://github.com/etro-js/etro-js.github.io).
+
 ## Introduction
 
 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 code for the library. This page covers how to make changes to the repository files (either code or jsdocs).
@@ -8,73 +10,47 @@ Thank you for considering contributing to Etro! There are many ways you can cont
 
 ## Setting up your local environment
 
-#### Step 0: Dependencies
-
 - You will need Git, Node, NPM (at least 7.x) and Firefox (for headless functional testing) installed.
-
-#### Step 1: Fork
-
-- Create your own fork of Etro. Then run
-
+- To get started, create your own fork of Etro. Then run
   ```
   git clone https://github.com/YOUR_USERNAME/etro.git
   cd etro
   npm install
-  npm test
+  npm run test:unit
+  npm run test:smoke
+  npm run test:integration
   ```
 
 ## Making your changes
 
-#### Step 2: Code
-
 - Make some changes and update tests
 - If you are writing code, the linter uses [StandardJS](https://standardjs.com/rules.html) for style conventions
 - If you're adding or updating an effect:
   - Add your effect to **scripts/gen-effect-samples.html**
   - Run `npm run effects`
   - Briefly review the images in **spec/integration/assets/effect/**
-- When you're ready to submit, first run
+- As you work, you can run
   ```
-  npm run lint
+  npm run fix
   npm run build
-  npm test
+  npm test:unit
+  npm test:smoke
+  npm test:integration
   ```
 
-  to lint the code, generate the [dist](dist) files and run unit tests on them. It's helpful to put these commands in a pre-commit hook.
-
-#### Step 3: Commit
-
-- Please follow these commit message guidelines:
-  - Optionally, prefix each commit message with [an appropriate emoji](https://gitmoji.dev), such as `:bug:` for fixes.
-  - Write in the imperative tense
-  - Wrap lines after 72 characters (for Vim add `filetype indent plugin on` to ~/.vimrc, it's enabled by default in Atom).
-  - Format:
-    ```
-    :emoji: One-liner
+  to lint and compile the code and run the tests on them. Husky will run these commands automatically when you commit.
+  - *Note: Unit tests validate the logic of the code in etro, with the DOM and any other external dependencies mocked. Because audio cannot be captured in the GitHub Actions runner, the end-to-end tests are divided into two suites. All end-to-end tests that need to validate audio output should be placed in **spec/integration/**. All end-to-end tests that do **not** require an audio device should be placed in **spec/smoke/**. The integration tests can only be run locally, but the other two suites can be run anywhere.*
 
-    Optional description
-    ```
+- Please commit to a new branch, not master
 
 ## Submitting your changes
 
-#### Step 4: Push
-
-- First, rebase (please avoid merging) to integrate your work with any new changes in the main repository
-
+- Before pushing to your fork, 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 the fork
-
-#### Step 5: Pull request
-
-- 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 6: Feedback
-
+- 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
 - A large part of the submission process is receiving feedback on how you can improve you pull request. If you need to change your pull request, feel free to push more commits.
 
 ## Code overview
@@ -85,6 +61,8 @@ Check out [the user docs](https://etrojs.dev/docs/intro) for a high-level overvi
 
 ### Events
 
+> Events were deprecated in v0.10.0 in favor of async methods with callbacks.
+
 Events emitted by Etro objects use a [pub/sub system](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern). To emit an event, use `event.publish(target, type, event)`. For instance,
 
 ```js

package/README.md

@@ -2,14 +2,13 @@
 
 [![](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)
+[![Discord](https://img.shields.io/badge/Discord-%235865F2.svg?style=flat&logo=discord&logoColor=white)](https://discord.gg/myrBsQ8Cht)
 
 Etro is a typescript framework for programmatically editing videos. It lets you
 composite layers and add filters (effects). 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
@@ -42,6 +41,9 @@ movie.record({ frameRate: 24 })  // or just `play` if you don't need to save it
 The blob could then be downloaded as a video file or displayed using a `<video>`
 element.
 
+See the [documentation](https://etrojs.dev/docs/category/layers) for a list of
+all built-in layers.
+
 ## Effects
 
 Effects can transform the output of a layer or movie:
@@ -50,6 +52,9 @@ var layer = new etro.layer.Video({ startTime: 0, source: videoElement })
     .addEffect(new etro.effect.Brightness({ brightness: +100) }))
 ```
 
+See the [documentation](https://etrojs.dev/docs/category/effects) for a list of
+all built-in effects.
+
 ## Dynamic Properties
 
 Most properties also support keyframes and functions:
@@ -64,6 +69,9 @@ layer.effects[0].brightness = new etro.KeyFrame(
 layer.effects[0].brightness = () => 100 * Math.random() - 50
 ```
 
+See the [documentation](https://etrojs.dev/docs/reference/dynamic-properties)
+for more info.
+
 ## Using in Node
 
 To use Etro in Node, see the [wrapper](https://github.com/etro-js/etro-node):

package/commitlint.config.ts

@@ -0,0 +1,39 @@
+import type {UserConfig} from '@commitlint/types';
+import { RuleConfigSeverity } from "@commitlint/types";
+
+const Configuration: UserConfig = {
+  /*
+   * Resolve and load @commitlint/format from node_modules.
+   * Referenced package must be installed
+   */
+  formatter: '@commitlint/format',
+  /*
+   * Any rules defined here will override the default ones
+   */
+  rules: {
+    'header-max-length': [RuleConfigSeverity.Error, 'always', 72],
+    'body-max-line-length': [RuleConfigSeverity.Error, 'always', 72],
+  },
+  /*
+   * Functions that return true if commitlint should ignore the given message.
+   */
+  ignores: [(commit) => commit === ''],
+  /*
+   * Whether commitlint uses the default ignore rules.
+   */
+  defaultIgnores: true,
+  /*
+   * Custom URL to show upon failure
+   */
+  helpUrl:
+    'https://github.com/conventional-changelog/commitlint/#what-is-commitlint',
+  /*
+   * Custom prompt configs
+   */
+  prompt: {
+    messages: {},
+    questions: {},
+  },
+};
+
+module.exports = Configuration;

package/dist/etro-cjs.js

@@ -715,32 +715,15 @@ function AudioSourceMixin(superclass) {
             _super.prototype.attach.call(this, movie);
             // TODO: on unattach?
             subscribe(movie, 'audiodestinationupdate', function (event) {
-                // Connect to new destination if immediately connected to the existing
-                // destination.
-                if (_this._connectedToDestination) {
-                    _this.audioNode.disconnect(movie.actx.destination);
-                    _this.audioNode.connect(event.destination);
-                }
+                _this.audioNode.disconnect(_this._lastAudioDestination);
+                _this.audioNode.connect(event.destination);
+                _this._lastAudioDestination = event.destination;
             });
             // connect to audiocontext
             this._audioNode = this.audioNode || movie.actx.createMediaElementSource(this.source);
-            // Spy on connect and disconnect to remember if it connected to
-            // actx.destination (for Movie#record).
-            var oldConnect = this._audioNode.connect.bind(this.audioNode);
-            this._audioNode.connect = function (destination, outputIndex, inputIndex) {
-                _this._connectedToDestination = destination === movie.actx.destination;
-                return oldConnect(destination, outputIndex, inputIndex);
-            };
-            var oldDisconnect = this._audioNode.disconnect.bind(this.audioNode);
-            this._audioNode.disconnect = function (destination, output, input) {
-                if (_this._connectedToDestination &&
-                    destination === movie.actx.destination) {
-                    _this._connectedToDestination = false;
-                }
-                return oldDisconnect(destination, output, input);
-            };
             // Connect to actx.destination by default (can be rewired by user)
             this.audioNode.connect(movie.actx.destination);
+            this._lastAudioDestination = movie.actx.destination;
         };
         MixedAudioSource.prototype.detach = function () {
             // Cache dest before super.detach() unsets this.movie
@@ -754,7 +737,12 @@ function AudioSourceMixin(superclass) {
         };
         MixedAudioSource.prototype.seek = function (time) {
             _super.prototype.seek.call(this, time);
-            this.source.currentTime = this.currentTime + this.sourceStartTime;
+            if (isNaN(this.currentTime)) {
+                this.source.currentTime = this.sourceStartTime;
+            }
+            else {
+                this.source.currentTime = this.currentTime + this.sourceStartTime;
+            }
         };
         MixedAudioSource.prototype.render = function () {
             _super.prototype.render.call(this);
@@ -1054,17 +1042,12 @@ var Audio = /** @class */ (function (_super) {
      * Creates an audio layer
      */
     function Audio(options) {
-        var _this = this;
         if (typeof options.source === 'string') {
             var audio = document.createElement('audio');
             audio.src = options.source;
             options.source = audio;
         }
-        _this = _super.call(this, options) || this;
-        if (_this.duration === undefined) {
-            _this.duration = (_this).source.duration - _this.sourceStartTime;
-        }
-        return _this;
+        return _super.call(this, options) || this;
     }
     /**
      * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
@@ -2848,10 +2831,6 @@ var Movie = /** @class */ (function () {
         // `render`). It's only valid while rendering.
         this._renderingFrame = false;
         this.currentTime = 0;
-        // The last time `play` was called, -1 works well in comparisons
-        this._lastPlayed = -1;
-        // What `currentTime` was when `play` was called
-        this._lastPlayedOffset = -1;
     }
     Movie.prototype._whenReady = function () {
         return __awaiter(this, void 0, void 0, function () {
@@ -2873,6 +2852,7 @@ var Movie = /** @class */ (function () {
      *
      * @param [options]
      * @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
      */
@@ -2890,8 +2870,8 @@ var Movie = /** @class */ (function () {
                             throw new Error('Already playing');
                         }
                         this._paused = this._ended = false;
-                        this._lastPlayed = performance.now();
-                        this._lastPlayedOffset = this.currentTime;
+                        this._lastRealTime = performance.now();
+                        this._endTime = options.duration ? this.currentTime + options.duration : this.duration;
                         (_a = options.onStart) === null || _a === void 0 ? void 0 : _a.call(options);
                         // For backwards compatibility
                         publish(this, 'movie.play', {});
@@ -2899,15 +2879,19 @@ var Movie = /** @class */ (function () {
                         return [4 /*yield*/, new Promise(function (resolve) {
                                 if (!_this.renderingFrame) {
                                     // Not rendering (and not playing), so play.
-                                    _this._render(true, undefined, resolve);
+                                    _this._render(undefined, resolve);
                                 }
                                 // Stop rendering frame if currently doing so, because playing has higher
                                 // priority. This will affect the next _render call.
                                 _this._renderingFrame = false;
-                            })];
+                            })
+                            // After we're done playing, clear the last timestamp
+                        ];
                     case 2:
                         // Repeatedly render frames until the movie ends
                         _b.sent();
+                        // After we're done playing, clear the last timestamp
+                        this._lastRealTime = undefined;
                         return [2 /*return*/];
                 }
             });
@@ -2981,16 +2965,17 @@ var Movie = /** @class */ (function () {
                         // Create the stream
                         this._currentStream = new MediaStream(tracks);
                         // Play the movie
-                        this._endTime = options.duration ? this.currentTime + options.duration : this.duration;
                         return [4 /*yield*/, this.play({
                                 onStart: function () {
                                     // Call the user's onStart callback
                                     options.onStart(_this._currentStream);
-                                }
+                                },
+                                duration: options.duration
                             })
                             // Clear the stream after the movie is done playing
                         ];
                     case 2:
+                        // Play the movie
                         _a.sent();
                         // Clear the stream after the movie is done playing
                         this._currentStream.getTracks().forEach(function (track) {
@@ -3125,11 +3110,13 @@ var Movie = /** @class */ (function () {
         return this;
     };
     /**
+     * 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
      */
-    Movie.prototype._render = function (repeat, timestamp, done) {
+    Movie.prototype._render = function (timestamp, done) {
         var _this = this;
         if (timestamp === void 0) { timestamp = performance.now(); }
         if (done === void 0) { done = undefined; }
@@ -3166,8 +3153,6 @@ var Movie = /** @class */ (function () {
                 // value and publish a 'imeupdate' event.
                 this._currentTime = 0;
                 publish(this, 'movie.timeupdate', { movie: this });
-                this._lastPlayed = performance.now();
-                this._lastPlayedOffset = 0; // this.currentTime
                 this._renderingFrame = false;
                 // Stop playback or recording if done (except if it's playing and repeat
                 // is true)
@@ -3219,18 +3204,19 @@ var Movie = /** @class */ (function () {
         }
         // TODO: Is making a new arrow function every frame bad for performance?
         window.requestAnimationFrame(function () {
-            _this._render(repeat, undefined, done);
+            _this._render(undefined, done);
         });
     };
     Movie.prototype._updateCurrentTime = function (timestampMs, end) {
         // If we're only frame-rendering (current frame only), it doesn't matter if
         // it's paused or not.
         if (!this._renderingFrame) {
-            var sinceLastPlayed = (timestampMs - this._lastPlayed) / 1000;
-            var currentTime = this._lastPlayedOffset + sinceLastPlayed;
-            if (this.currentTime !== currentTime) {
+            var timestamp = timestampMs / 1000;
+            var delta = timestamp - this._lastRealTime;
+            this._lastRealTime = timestamp;
+            if (delta > 0) {
                 // Update the current time (don't use setter)
-                this._currentTime = currentTime;
+                this._currentTime += delta;
                 // For backwards compatibility, publish a 'movie.timeupdate' event.
                 publish(this, 'movie.timeupdate', { movie: this });
             }
@@ -3239,6 +3225,11 @@ var Movie = /** @class */ (function () {
             }
         }
     };
+    /**
+     * Draws the movie's background to the canvas
+     *
+     * @param timestamp The current high-resolution timestamp in milliseconds
+     */
     Movie.prototype._renderBackground = function (timestamp) {
         this.cctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         // Evaluate background color (since it's a dynamic property)
@@ -3249,7 +3240,7 @@ var Movie = /** @class */ (function () {
         }
     };
     /**
-     * @param [timestamp=performance.now()]
+     * Ticks all layers and renders them to the canvas
      */
     Movie.prototype._renderLayers = function () {
         for (var i = 0; i < this.layers.length; i++) {
@@ -3294,6 +3285,12 @@ var Movie = /** @class */ (function () {
             }
         }
     };
+    /**
+     * Applies all of the movie's effects to the canvas
+     *
+     * Note: This method only applies the movie's effects, not the layers'
+     * effects.
+     */
     Movie.prototype._applyEffects = function () {
         for (var i = 0; i < this.effects.length; i++) {
             var effect = this.effects[i];
@@ -3320,7 +3317,7 @@ var Movie = /** @class */ (function () {
         }
         return new Promise(function (resolve) {
             _this._renderingFrame = true;
-            _this._render(false, undefined, resolve);
+            _this._render(undefined, resolve);
         });
     };
     /**
@@ -3369,7 +3366,7 @@ var Movie = /** @class */ (function () {
          *
          * Calculated from the end time of the last layer
          */
-        // TODO: dirty flag?
+        // TODO: cache
         get: function () {
             return this.layers.reduce(function (end, layer) { return Math.max(layer.startTime + layer.duration, end); }, 0);
         },
@@ -3378,6 +3375,7 @@ var Movie = /** @class */ (function () {
     });
     /**
      * Convenience method for `layers.push()`
+     *
      * @param layer
      * @return The movie
      */
@@ -3387,6 +3385,7 @@ var Movie = /** @class */ (function () {
     };
     /**
      * Convenience method for `effects.push()`
+     *
      * @param effect
      * @return the movie
      */

package/dist/etro-iife.js

@@ -716,32 +716,15 @@ var etro = (function () {
                 _super.prototype.attach.call(this, movie);
                 // TODO: on unattach?
                 subscribe(movie, 'audiodestinationupdate', function (event) {
-                    // Connect to new destination if immediately connected to the existing
-                    // destination.
-                    if (_this._connectedToDestination) {
-                        _this.audioNode.disconnect(movie.actx.destination);
-                        _this.audioNode.connect(event.destination);
-                    }
+                    _this.audioNode.disconnect(_this._lastAudioDestination);
+                    _this.audioNode.connect(event.destination);
+                    _this._lastAudioDestination = event.destination;
                 });
                 // connect to audiocontext
                 this._audioNode = this.audioNode || movie.actx.createMediaElementSource(this.source);
-                // Spy on connect and disconnect to remember if it connected to
-                // actx.destination (for Movie#record).
-                var oldConnect = this._audioNode.connect.bind(this.audioNode);
-                this._audioNode.connect = function (destination, outputIndex, inputIndex) {
-                    _this._connectedToDestination = destination === movie.actx.destination;
-                    return oldConnect(destination, outputIndex, inputIndex);
-                };
-                var oldDisconnect = this._audioNode.disconnect.bind(this.audioNode);
-                this._audioNode.disconnect = function (destination, output, input) {
-                    if (_this._connectedToDestination &&
-                        destination === movie.actx.destination) {
-                        _this._connectedToDestination = false;
-                    }
-                    return oldDisconnect(destination, output, input);
-                };
                 // Connect to actx.destination by default (can be rewired by user)
                 this.audioNode.connect(movie.actx.destination);
+                this._lastAudioDestination = movie.actx.destination;
             };
             MixedAudioSource.prototype.detach = function () {
                 // Cache dest before super.detach() unsets this.movie
@@ -755,7 +738,12 @@ var etro = (function () {
             };
             MixedAudioSource.prototype.seek = function (time) {
                 _super.prototype.seek.call(this, time);
-                this.source.currentTime = this.currentTime + this.sourceStartTime;
+                if (isNaN(this.currentTime)) {
+                    this.source.currentTime = this.sourceStartTime;
+                }
+                else {
+                    this.source.currentTime = this.currentTime + this.sourceStartTime;
+                }
             };
             MixedAudioSource.prototype.render = function () {
                 _super.prototype.render.call(this);
@@ -1055,17 +1043,12 @@ var etro = (function () {
          * Creates an audio layer
          */
         function Audio(options) {
-            var _this = this;
             if (typeof options.source === 'string') {
                 var audio = document.createElement('audio');
                 audio.src = options.source;
                 options.source = audio;
             }
-            _this = _super.call(this, options) || this;
-            if (_this.duration === undefined) {
-                _this.duration = (_this).source.duration - _this.sourceStartTime;
-            }
-            return _this;
+            return _super.call(this, options) || this;
         }
         /**
          * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
@@ -2849,10 +2832,6 @@ var etro = (function () {
             // `render`). It's only valid while rendering.
             this._renderingFrame = false;
             this.currentTime = 0;
-            // The last time `play` was called, -1 works well in comparisons
-            this._lastPlayed = -1;
-            // What `currentTime` was when `play` was called
-            this._lastPlayedOffset = -1;
         }
         Movie.prototype._whenReady = function () {
             return __awaiter(this, void 0, void 0, function () {
@@ -2874,6 +2853,7 @@ var etro = (function () {
          *
          * @param [options]
          * @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
          */
@@ -2891,8 +2871,8 @@ var etro = (function () {
                                 throw new Error('Already playing');
                             }
                             this._paused = this._ended = false;
-                            this._lastPlayed = performance.now();
-                            this._lastPlayedOffset = this.currentTime;
+                            this._lastRealTime = performance.now();
+                            this._endTime = options.duration ? this.currentTime + options.duration : this.duration;
                             (_a = options.onStart) === null || _a === void 0 ? void 0 : _a.call(options);
                             // For backwards compatibility
                             publish(this, 'movie.play', {});
@@ -2900,15 +2880,19 @@ var etro = (function () {
                             return [4 /*yield*/, new Promise(function (resolve) {
                                     if (!_this.renderingFrame) {
                                         // Not rendering (and not playing), so play.
-                                        _this._render(true, undefined, resolve);
+                                        _this._render(undefined, resolve);
                                     }
                                     // Stop rendering frame if currently doing so, because playing has higher
                                     // priority. This will affect the next _render call.
                                     _this._renderingFrame = false;
-                                })];
+                                })
+                                // After we're done playing, clear the last timestamp
+                            ];
                         case 2:
                             // Repeatedly render frames until the movie ends
                             _b.sent();
+                            // After we're done playing, clear the last timestamp
+                            this._lastRealTime = undefined;
                             return [2 /*return*/];
                     }
                 });
@@ -2982,16 +2966,17 @@ var etro = (function () {
                             // Create the stream
                             this._currentStream = new MediaStream(tracks);
                             // Play the movie
-                            this._endTime = options.duration ? this.currentTime + options.duration : this.duration;
                             return [4 /*yield*/, this.play({
                                     onStart: function () {
                                         // Call the user's onStart callback
                                         options.onStart(_this._currentStream);
-                                    }
+                                    },
+                                    duration: options.duration
                                 })
                                 // Clear the stream after the movie is done playing
                             ];
                         case 2:
+                            // Play the movie
                             _a.sent();
                             // Clear the stream after the movie is done playing
                             this._currentStream.getTracks().forEach(function (track) {
@@ -3126,11 +3111,13 @@ var etro = (function () {
             return this;
         };
         /**
+         * 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
          */
-        Movie.prototype._render = function (repeat, timestamp, done) {
+        Movie.prototype._render = function (timestamp, done) {
             var _this = this;
             if (timestamp === void 0) { timestamp = performance.now(); }
             if (done === void 0) { done = undefined; }
@@ -3167,8 +3154,6 @@ var etro = (function () {
                     // value and publish a 'imeupdate' event.
                     this._currentTime = 0;
                     publish(this, 'movie.timeupdate', { movie: this });
-                    this._lastPlayed = performance.now();
-                    this._lastPlayedOffset = 0; // this.currentTime
                     this._renderingFrame = false;
                     // Stop playback or recording if done (except if it's playing and repeat
                     // is true)
@@ -3220,18 +3205,19 @@ var etro = (function () {
             }
             // TODO: Is making a new arrow function every frame bad for performance?
             window.requestAnimationFrame(function () {
-                _this._render(repeat, undefined, done);
+                _this._render(undefined, done);
             });
         };
         Movie.prototype._updateCurrentTime = function (timestampMs, end) {
             // If we're only frame-rendering (current frame only), it doesn't matter if
             // it's paused or not.
             if (!this._renderingFrame) {
-                var sinceLastPlayed = (timestampMs - this._lastPlayed) / 1000;
-                var currentTime = this._lastPlayedOffset + sinceLastPlayed;
-                if (this.currentTime !== currentTime) {
+                var timestamp = timestampMs / 1000;
+                var delta = timestamp - this._lastRealTime;
+                this._lastRealTime = timestamp;
+                if (delta > 0) {
                     // Update the current time (don't use setter)
-                    this._currentTime = currentTime;
+                    this._currentTime += delta;
                     // For backwards compatibility, publish a 'movie.timeupdate' event.
                     publish(this, 'movie.timeupdate', { movie: this });
                 }
@@ -3240,6 +3226,11 @@ var etro = (function () {
                 }
             }
         };
+        /**
+         * Draws the movie's background to the canvas
+         *
+         * @param timestamp The current high-resolution timestamp in milliseconds
+         */
         Movie.prototype._renderBackground = function (timestamp) {
             this.cctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
             // Evaluate background color (since it's a dynamic property)
@@ -3250,7 +3241,7 @@ var etro = (function () {
             }
         };
         /**
-         * @param [timestamp=performance.now()]
+         * Ticks all layers and renders them to the canvas
          */
         Movie.prototype._renderLayers = function () {
             for (var i = 0; i < this.layers.length; i++) {
@@ -3295,6 +3286,12 @@ var etro = (function () {
                 }
             }
         };
+        /**
+         * Applies all of the movie's effects to the canvas
+         *
+         * Note: This method only applies the movie's effects, not the layers'
+         * effects.
+         */
         Movie.prototype._applyEffects = function () {
             for (var i = 0; i < this.effects.length; i++) {
                 var effect = this.effects[i];
@@ -3321,7 +3318,7 @@ var etro = (function () {
             }
             return new Promise(function (resolve) {
                 _this._renderingFrame = true;
-                _this._render(false, undefined, resolve);
+                _this._render(undefined, resolve);
             });
         };
         /**
@@ -3370,7 +3367,7 @@ var etro = (function () {
              *
              * Calculated from the end time of the last layer
              */
-            // TODO: dirty flag?
+            // TODO: cache
             get: function () {
                 return this.layers.reduce(function (end, layer) { return Math.max(layer.startTime + layer.duration, end); }, 0);
             },
@@ -3379,6 +3376,7 @@ var etro = (function () {
         });
         /**
          * Convenience method for `layers.push()`
+         *
          * @param layer
          * @return The movie
          */
@@ -3388,6 +3386,7 @@ var etro = (function () {
         };
         /**
          * Convenience method for `effects.push()`
+         *
          * @param effect
          * @return the movie
          */

package/dist/movie/movie.d.ts

@@ -62,8 +62,8 @@ export declare class Movie {
     private _recording;
     private _currentStream;
     private _endTime;
-    private _lastPlayed;
-    private _lastPlayedOffset;
+    /** The timestamp last frame in seconds */
+    private _lastRealTime;
     /**
      * Creates a new movie.
      */
@@ -74,11 +74,13 @@ export declare class Movie {
      *
      * @param [options]
      * @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
      */
     play(options?: {
         onStart?: () => void;
+        duration?: number;
     }): Promise<void>;
     /**
      * Updates the rendering canvas and audio destination to the visible canvas
@@ -136,17 +138,30 @@ export declare class Movie {
      */
     stop(): Movie;
     /**
+     * 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
      */
     private _render;
     private _updateCurrentTime;
+    /**
+     * Draws the movie's background to the canvas
+     *
+     * @param timestamp The current high-resolution timestamp in milliseconds
+     */
     private _renderBackground;
     /**
-     * @param [timestamp=performance.now()]
+     * Ticks all layers and renders them to the canvas
      */
     private _renderLayers;
+    /**
+     * Applies all of the movie's effects to the canvas
+     *
+     * Note: This method only applies the movie's effects, not the layers'
+     * effects.
+     */
     private _applyEffects;
     /**
      * Refreshes the screen
@@ -180,12 +195,14 @@ export declare class Movie {
     get duration(): number;
     /**
      * Convenience method for `layers.push()`
+     *
      * @param layer
      * @return The movie
      */
     addLayer(layer: BaseLayer): Movie;
     /**
      * Convenience method for `effects.push()`
+     *
      * @param effect
      * @return the movie
      */

package/karma.conf.js

@@ -3,6 +3,12 @@
 
 process.env.CHROME_BIN = require('puppeteer').executablePath()
 
+// Make sure TEST_SUITE is set
+if (!process.env.TEST_SUITE) {
+  console.error('TEST_SUITE environment variable must be set')
+  process.exit(1)
+}
+
 module.exports = function (config) {
   config.set({
 
@@ -16,8 +22,8 @@ module.exports = function (config) {
     // list of files / patterns to load in the browser
     files: [
       'src/**/*.ts',
-      'spec/**/*.ts',
-      { pattern: 'spec/integration/assets/**/*', included: false }
+      `spec/${process.env.TEST_SUITE}/**/*.ts`,
+      { pattern: 'spec/assets/**/*', included: false }
     ],
 
     // list of files / patterns to exclude
@@ -57,7 +63,8 @@ module.exports = function (config) {
         base: 'Firefox',
         flags: ['-headless'],
         prefs: {
-          'network.proxy.type': 0
+          'network.proxy.type': 0,
+          'media.autoplay.default': 0  // Allow all autoplay
         }
       }
     },
@@ -65,7 +72,7 @@ module.exports = function (config) {
     client: {
       captureConsole: true,
       jasmine: {
-        timeoutInterval: 20000
+        timeoutInterval: 15000
       }
     },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etro",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "An extendable video-editing framework for the browser",
   "browser": "dist/etro-cjs.js",
   "types": "dist/index.d.ts",
@@ -10,6 +10,8 @@
     "test": "spec"
   },
   "devDependencies": {
+    "@commitlint/cli": "^17.6.6",
+    "@commitlint/format": "^17.4.4",
     "@rollup/plugin-eslint": "^8.0.2",
     "@types/jest": "^29.0.0",
     "@typescript-eslint/eslint-plugin": "^5.30.7",
@@ -25,7 +27,9 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-standard": "^5.0.0",
     "ev": "0.0.7",
+    "gitmoji-cli": "^8.4.0",
     "http-server": "^14.1.1",
+    "husky": "^8.0.3",
     "jasmine": "^3.4.0",
     "jasmine-ts": "^0.4.0",
     "karma": "^6.1.1",
@@ -48,14 +52,17 @@
   "scripts": {
     "build": "rollup -c",
     "doc": "rm -rf docs && npx typedoc src/etro.ts --excludePrivate --readme none",
-    "assets": "git fetch origin example-assets:example-assets && git cherry-pick example-assets && git reset --soft HEAD^ && git reset HEAD examples/assets",
+    "prepare": "husky install",
     "effects": "node scripts/effect/save-effect-samples.js",
     "lint": "npm run --silent lint:main && npm run --silent lint:test && npm run --silent lint:examples",
-    "lint:main": "eslint -c eslint.typescript-conf.js --ext .ts --fix src",
-    "lint:test": "eslint -c eslint.test-conf.js --ext .ts --fix spec",
-    "lint:examples": "eslint -c eslint.example-conf.js --ext .html --fix examples",
+    "fix": "npm run --silent lint:main -- --fix && npm run --silent lint:test -- --fix && npm run --silent lint:examples -- --fix",
+    "lint:main": "eslint -c eslint.typescript-conf.js --ext .ts src",
+    "lint:test": "eslint -c eslint.test-conf.js --ext .ts spec",
+    "lint:examples": "eslint -c eslint.example-conf.js --ext .html examples",
     "start": "http-server",
-    "test": "karma start",
+    "test:unit": "TEST_SUITE=unit karma start",
+    "test:smoke": "TEST_SUITE=smoke karma start",
+    "test:integration": "TEST_SUITE=integration karma start",
     "release": "shipjs prepare"
   },
   "repository": {

package/scripts/effect/save-effect-samples.js

@@ -39,7 +39,7 @@ function createDirs(filePath) {
     // remove prefix and save to png
     const buffer = Buffer.from(item.data.replace(/^data:image\/png;base64,/, ''), 'base64')
     console.log(`writing ${item.path} ...`)
-    const path = projectDir + '/spec/integration/assets/effect/' + item.path
+    const path = projectDir + '/spec/assets/effect/' + item.path
     createDirs(path)
     fs.writeFileSync(path, buffer)
   })

package/src/layer/audio-source.ts

@@ -50,7 +50,7 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
     private _unstretchedDuration: number
     private _playbackRate: number
     private _initialized: boolean
-    private _connectedToDestination: boolean
+    private _lastAudioDestination: AudioNode
 
     /**
      * @param options
@@ -123,36 +123,18 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
 
       // TODO: on unattach?
       subscribe(movie, 'audiodestinationupdate', event => {
-        // Connect to new destination if immediately connected to the existing
-        // destination.
-        if (this._connectedToDestination) {
-          this.audioNode.disconnect(movie.actx.destination)
-          this.audioNode.connect(event.destination)
-        }
+        this.audioNode.disconnect(this._lastAudioDestination)
+        this.audioNode.connect(event.destination)
+
+        this._lastAudioDestination = event.destination
       })
 
       // connect to audiocontext
       this._audioNode = this.audioNode || movie.actx.createMediaElementSource(this.source)
 
-      // Spy on connect and disconnect to remember if it connected to
-      // actx.destination (for Movie#record).
-      const oldConnect = this._audioNode.connect.bind(this.audioNode)
-      this._audioNode.connect = <T extends AudioDestinationNode>(destination: T, outputIndex?: number, inputIndex?: number): AudioNode => {
-        this._connectedToDestination = destination === movie.actx.destination
-        return oldConnect(destination, outputIndex, inputIndex)
-      }
-      const oldDisconnect = this._audioNode.disconnect.bind(this.audioNode)
-      this._audioNode.disconnect = <T extends AudioDestinationNode>(destination?: T | number, output?: number, input?: number): AudioNode => {
-        if (this._connectedToDestination &&
-        destination === movie.actx.destination) {
-          this._connectedToDestination = false
-        }
-
-        return oldDisconnect(destination, output, input)
-      }
-
       // Connect to actx.destination by default (can be rewired by user)
       this.audioNode.connect(movie.actx.destination)
+      this._lastAudioDestination = movie.actx.destination
     }
 
     detach () {
@@ -170,7 +152,11 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
     seek (time: number): void {
       super.seek(time)
 
-      this.source.currentTime = this.currentTime + this.sourceStartTime
+      if (isNaN(this.currentTime)) {
+        this.source.currentTime = this.sourceStartTime
+      } else {
+        this.source.currentTime = this.currentTime + this.sourceStartTime
+      }
     }
 
     render () {

package/src/layer/audio.ts

@@ -31,10 +31,6 @@ class Audio extends AudioSourceMixin<BaseOptions>(Base) {
     }
 
     super(options)
-
-    if (this.duration === undefined) {
-      this.duration = (this).source.duration - this.sourceStartTime
-    }
   }
 
   /**

package/src/movie/movie.ts

@@ -74,8 +74,8 @@ export class Movie {
   private _recording = false
   private _currentStream: MediaStream
   private _endTime: number
-  private _lastPlayed: number
-  private _lastPlayedOffset: number
+  /** The timestamp last frame in seconds */
+  private _lastRealTime: number
 
   /**
    * Creates a new movie.
@@ -111,11 +111,6 @@ export class Movie {
     // `render`). It's only valid while rendering.
     this._renderingFrame = false
     this.currentTime = 0
-
-    // The last time `play` was called, -1 works well in comparisons
-    this._lastPlayed = -1
-    // What `currentTime` was when `play` was called
-    this._lastPlayedOffset = -1
   }
 
   private async _whenReady (): Promise<void> {
@@ -130,11 +125,13 @@ export class Movie {
    *
    * @param [options]
    * @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
    */
   async play (options: {
     onStart?: () => void,
+    duration?: number,
   } = {}): Promise<void> {
     await this._whenReady()
 
@@ -143,8 +140,8 @@ export class Movie {
     }
 
     this._paused = this._ended = false
-    this._lastPlayed = performance.now()
-    this._lastPlayedOffset = this.currentTime
+    this._lastRealTime = performance.now()
+    this._endTime = options.duration ? this.currentTime + options.duration : this.duration
 
     options.onStart?.()
 
@@ -155,13 +152,16 @@ export class Movie {
     await new Promise<void>(resolve => {
       if (!this.renderingFrame) {
         // Not rendering (and not playing), so play.
-        this._render(true, undefined, resolve)
+        this._render(undefined, resolve)
       }
 
       // Stop rendering frame if currently doing so, because playing has higher
       // priority. This will affect the next _render call.
       this._renderingFrame = false
     })
+
+    // After we're done playing, clear the last timestamp
+    this._lastRealTime = undefined
   }
 
   /**
@@ -244,12 +244,12 @@ export class Movie {
     this._currentStream = new MediaStream(tracks)
 
     // Play the movie
-    this._endTime = options.duration ? this.currentTime + options.duration : this.duration
     await this.play({
       onStart: () => {
         // Call the user's onStart callback
         options.onStart(this._currentStream)
-      }
+      },
+      duration: options.duration
     })
 
     // Clear the stream after the movie is done playing
@@ -371,7 +371,7 @@ export class Movie {
       if (Object.prototype.hasOwnProperty.call(this.layers, i)) {
         const layer = this.layers[i]
 
-        if(layer.active) {
+        if (layer.active) {
           layer.stop()
           layer.active = false
         }
@@ -396,11 +396,13 @@ export class Movie {
   }
 
   /**
+   * 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
    */
-  private _render (repeat, timestamp = performance.now(), done = undefined) {
+  private _render (timestamp = performance.now(), done = undefined) {
     clearCachedValues(this)
 
     if (!this.rendering) {
@@ -444,8 +446,6 @@ export class Movie {
         this._currentTime = 0
         publish(this, 'movie.timeupdate', { movie: this })
 
-        this._lastPlayed = performance.now()
-        this._lastPlayedOffset = 0 // this.currentTime
         this._renderingFrame = false
 
         // Stop playback or recording if done (except if it's playing and repeat
@@ -505,7 +505,7 @@ export class Movie {
 
     // TODO: Is making a new arrow function every frame bad for performance?
     window.requestAnimationFrame(() => {
-      this._render(repeat, undefined, done)
+      this._render(undefined, done)
     })
   }
 
@@ -513,11 +513,12 @@ export class Movie {
     // If we're only frame-rendering (current frame only), it doesn't matter if
     // it's paused or not.
     if (!this._renderingFrame) {
-      const sinceLastPlayed = (timestampMs - this._lastPlayed) / 1000
-      const currentTime = this._lastPlayedOffset + sinceLastPlayed
-      if (this.currentTime !== currentTime) {
+      const timestamp = timestampMs / 1000
+      const delta = timestamp - this._lastRealTime
+      this._lastRealTime = timestamp
+      if (delta > 0) {
         // Update the current time (don't use setter)
-        this._currentTime = currentTime
+        this._currentTime += delta
 
         // For backwards compatibility, publish a 'movie.timeupdate' event.
         publish(this, 'movie.timeupdate', { movie: this })
@@ -529,7 +530,12 @@ export class Movie {
     }
   }
 
-  private _renderBackground (timestamp) {
+  /**
+   * Draws the movie's background to the canvas
+   *
+   * @param timestamp The current high-resolution timestamp in milliseconds
+   */
+  private _renderBackground (timestamp: number) {
     this.cctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
 
     // Evaluate background color (since it's a dynamic property)
@@ -541,7 +547,7 @@ export class Movie {
   }
 
   /**
-   * @param [timestamp=performance.now()]
+   * Ticks all layers and renders them to the canvas
    */
   private _renderLayers () {
     for (let i = 0; i < this.layers.length; i++) {
@@ -595,6 +601,12 @@ export class Movie {
     }
   }
 
+  /**
+   * Applies all of the movie's effects to the canvas
+   *
+   * Note: This method only applies the movie's effects, not the layers'
+   * effects.
+   */
   private _applyEffects () {
     for (let i = 0; i < this.effects.length; i++) {
       const effect = this.effects[i]
@@ -624,7 +636,7 @@ export class Movie {
 
     return new Promise(resolve => {
       this._renderingFrame = true
-      this._render(false, undefined, resolve)
+      this._render(undefined, resolve)
     })
   }
 
@@ -665,13 +677,14 @@ export class Movie {
    *
    * Calculated from the end time of the last layer
    */
-  // TODO: dirty flag?
+  // TODO: cache
   get duration (): number {
     return this.layers.reduce((end, layer) => Math.max(layer.startTime + layer.duration, end), 0)
   }
 
   /**
    * Convenience method for `layers.push()`
+   *
    * @param layer
    * @return The movie
    */
@@ -681,6 +694,7 @@ export class Movie {
 
   /**
    * Convenience method for `effects.push()`
+   *
    * @param effect
    * @return the movie
    */