etro 0.10.1 → 0.12.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,10 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint
+
+if [ -z "$SKIP_TESTS" ]; then
+    npm run test:unit
+    npm run test:smoke
+    npm run test:integration
+fi

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,28 @@ 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.12.0] - 2024-01-15
+### Added
+- `stroke` option for `Text` layer ([#239](https://github.com/etro-js/etro/pull/239)).
+
+### Security
+- Bump @babel/traverse from 7.18.13 to 7.23.2 ([#244](https://github.com/etro-js/etro/pull/244)).
+- Bump browserify-sign from 4.2.1 to 4.2.2 ([#245](https://github.com/etro-js/etro/pull/245)).
+- Bump follow-redirects from 1.14.9 to 1.15.4 ([#247](https://github.com/etro-js/etro/pull/247)).
+- Bump gitmoji-cli from 8.4.0 to 9.0.0.
+
+## [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.
@@ -280,6 +302,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - Gaussian blur
   - Transform
 
+[0.12.0]: https://github.com/etro-js/etro/compare/v0.11.0...v0.12.0
+[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

package/CONTRIBUTING.md

@@ -10,83 +10,58 @@ 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 run test:unit
+  npm run test:smoke
+  npm run 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.
+  to lint and compile the code and run the tests on them. Husky will run these commands automatically when you commit.
 
-#### 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
-
-    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
+## Tests
 
-### Etro Overview
+Automated tests are run with [KarmaJS](https://karma-runner.github.io/) in a headless Firefox session. 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.
 
-Check out [the user docs](https://etrojs.dev/docs/intro) for a high-level overview of Etro.
+## Code overview
 
 ### 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

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

@@ -667,9 +667,11 @@ function AudioSourceMixin(superclass) {
             _this._sourceStartTime = options.sourceStartTime || 0;
             applyOptions(options, _this);
             var load = function () {
-                // TODO:              && ?
-                if ((options.duration || (_this.source.duration - _this.sourceStartTime)) < 0) {
-                    throw new Error('Invalid options.duration or options.sourceStartTime');
+                if (options.duration < 0) {
+                    throw new Error('Invalid options.duration. It must be a non-negative value.');
+                }
+                if (_this.sourceStartTime > _this.source.duration) {
+                    throw new Error('options.sourceStartTime cannot exceed options.source.duration');
                 }
                 _this._unstretchedDuration = options.duration || (_this.source.duration - _this.sourceStartTime);
                 _this.duration = _this._unstretchedDuration / (_this.playbackRate);
@@ -715,32 +717,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 +739,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);
@@ -1444,6 +1434,12 @@ var Image = /** @class */ (function (_super) {
     return Image;
 }(VisualSourceMixin(Visual)));
 
+var TextStrokePosition;
+(function (TextStrokePosition) {
+    TextStrokePosition[TextStrokePosition["Inside"] = 0] = "Inside";
+    TextStrokePosition[TextStrokePosition["Center"] = 1] = "Center";
+    TextStrokePosition[TextStrokePosition["Outside"] = 2] = "Outside";
+})(TextStrokePosition || (TextStrokePosition = {}));
 var Text = /** @class */ (function (_super) {
     __extends(Text, _super);
     /**
@@ -1468,6 +1464,7 @@ var Text = /** @class */ (function (_super) {
         // this._prevMaxWidth = undefined;
     }
     Text.prototype.doRender = function () {
+        var _a, _b;
         _super.prototype.doRender.call(this);
         var text = val(this, 'text', this.currentTime);
         var font = val(this, 'font', this.currentTime);
@@ -1481,6 +1478,28 @@ var Text = /** @class */ (function (_super) {
         this.cctx.textBaseline = val(this, 'textBaseline', this.currentTime);
         this.cctx.direction = val(this, 'textDirection', this.currentTime);
         this.cctx.fillText(text, val(this, 'textX', this.currentTime), val(this, 'textY', this.currentTime), maxWidth);
+        var textStroke = val(this, 'textStroke', this.currentTime);
+        if (textStroke) {
+            this.cctx.strokeStyle = textStroke.color;
+            this.cctx.lineWidth = (_a = textStroke.thickness) !== null && _a !== void 0 ? _a : 1;
+            var position = (_b = textStroke.position) !== null && _b !== void 0 ? _b : 'outer';
+            // Save the globalCompositeOperation, we have to revert it after stroking the text.
+            var globalCompositionOperation = this.cctx.globalCompositeOperation;
+            switch (position) {
+                case TextStrokePosition.Inside:
+                    this.cctx.globalCompositeOperation = 'source-atop';
+                    this.cctx.lineWidth *= 2;
+                    break;
+                case TextStrokePosition.Center:
+                    break;
+                case TextStrokePosition.Outside:
+                    this.cctx.globalCompositeOperation = 'destination-over';
+                    this.cctx.lineWidth *= 2;
+                    break;
+            }
+            this.cctx.strokeText(text, val(this, 'textX', this.currentTime), val(this, 'textY', this.currentTime), maxWidth);
+            this.cctx.globalCompositeOperation = globalCompositionOperation;
+        }
         this._prevText = text;
         this._prevFont = font;
         this._prevMaxWidth = maxWidth;
@@ -1509,7 +1528,7 @@ var Text = /** @class */ (function (_super) {
      * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
      */
     Text.prototype.getDefaultOptions = function () {
-        return __assign(__assign({}, Visual.prototype.getDefaultOptions()), { background: null, text: undefined, font: '10px sans-serif', color: parseColor('#fff'), textX: 0, textY: 0, maxWidth: null, textAlign: 'start', textBaseline: 'top', textDirection: 'ltr' });
+        return __assign(__assign({}, Visual.prototype.getDefaultOptions()), { background: null, text: undefined, font: '10px sans-serif', color: parseColor('#fff'), textX: 0, textY: 0, maxWidth: null, textAlign: 'start', textBaseline: 'top', textDirection: 'ltr', textStroke: null });
     };
     return Text;
 }(Visual));
@@ -1547,6 +1566,7 @@ var index = /*#__PURE__*/Object.freeze({
     Base: Base,
     Image: Image,
     Text: Text,
+    get TextStrokePosition () { return TextStrokePosition; },
     Video: Video,
     VisualSourceMixin: VisualSourceMixin,
     Visual: Visual
@@ -2843,10 +2863,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 () {
@@ -2868,6 +2884,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
      */
@@ -2885,8 +2902,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', {});
@@ -2894,15 +2911,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*/];
                 }
             });
@@ -2976,16 +2997,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) {
@@ -3120,11 +3142,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; }
@@ -3161,8 +3185,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)
@@ -3214,18 +3236,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 });
             }
@@ -3234,6 +3257,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)
@@ -3244,7 +3272,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++) {
@@ -3289,6 +3317,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];
@@ -3315,7 +3349,7 @@ var Movie = /** @class */ (function () {
         }
         return new Promise(function (resolve) {
             _this._renderingFrame = true;
-            _this._render(false, undefined, resolve);
+            _this._render(undefined, resolve);
         });
     };
     /**
@@ -3364,7 +3398,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);
         },
@@ -3373,6 +3407,7 @@ var Movie = /** @class */ (function () {
     });
     /**
      * Convenience method for `layers.push()`
+     *
      * @param layer
      * @return The movie
      */
@@ -3382,6 +3417,7 @@ var Movie = /** @class */ (function () {
     };
     /**
      * Convenience method for `effects.push()`
+     *
      * @param effect
      * @return the movie
      */