etro 0.11.0 → 0.12.0

package/.husky/pre-commit

@@ -2,6 +2,9 @@
 . "$(dirname -- "$0")/_/husky.sh"
 
 npm run lint
-npm run test:unit
-npm run test:smoke
-npm run test:integration
+
+if [ -z "$SKIP_TESTS" ]; then
+    npm run test:unit
+    npm run test:smoke
+    npm run test:integration
+fi

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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)).
@@ -292,6 +302,7 @@ 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

package/CONTRIBUTING.md

@@ -33,13 +33,12 @@ Thank you for considering contributing to Etro! There are many ways you can cont
   ```
   npm run fix
   npm run build
-  npm test:unit
-  npm test:smoke
-  npm test:integration
+  npm run test:unit
+  npm run test:smoke
+  npm run test:integration
   ```
 
   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.*
 
 - Please commit to a new branch, not master
 
@@ -53,11 +52,11 @@ Thank you for considering contributing to Etro! There are many ways you can cont
 - 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
 

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);
@@ -1432,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);
     /**
@@ -1456,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);
@@ -1469,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;
@@ -1497,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));
@@ -1535,6 +1566,7 @@ var index = /*#__PURE__*/Object.freeze({
     Base: Base,
     Image: Image,
     Text: Text,
+    get TextStrokePosition () { return TextStrokePosition; },
     Video: Video,
     VisualSourceMixin: VisualSourceMixin,
     Visual: Visual

package/dist/etro-iife.js

@@ -668,9 +668,11 @@ var etro = (function () {
                 _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);
@@ -1433,6 +1435,12 @@ var etro = (function () {
         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);
         /**
@@ -1457,6 +1465,7 @@ var etro = (function () {
             // 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);
@@ -1470,6 +1479,28 @@ var etro = (function () {
             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;
@@ -1498,7 +1529,7 @@ var etro = (function () {
          * @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));
@@ -1536,6 +1567,7 @@ var etro = (function () {
         Base: Base,
         Image: Image,
         Text: Text,
+        get TextStrokePosition () { return TextStrokePosition; },
         Video: Video,
         VisualSourceMixin: VisualSourceMixin,
         Visual: Visual

package/dist/layer/text.d.ts

@@ -1,5 +1,10 @@
 import { Dynamic, Color } from '../util';
 import { Visual, VisualOptions } from './visual';
+declare enum TextStrokePosition {
+    Inside = 0,
+    Center = 1,
+    Outside = 2
+}
 interface TextOptions extends VisualOptions {
     text: Dynamic<string>;
     font?: Dynamic<string>;
@@ -23,6 +28,11 @@ interface TextOptions extends VisualOptions {
      * @see [`CanvasRenderingContext2D#direction`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline)
      */
     textDirection?: Dynamic<string>;
+    textStroke?: Dynamic<{
+        color: Color;
+        position?: TextStrokePosition;
+        thickness?: number;
+    }>;
 }
 declare class Text extends Visual {
     text: Dynamic<string>;
@@ -47,6 +57,11 @@ declare class Text extends Visual {
      * @see [`CanvasRenderingContext2D#direction`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline)
      */
     textDirection: Dynamic<string>;
+    textStroke?: Dynamic<{
+        color: Color;
+        position?: TextStrokePosition;
+        thickness?: number;
+    }>;
     private _prevText;
     private _prevFont;
     private _prevMaxWidth;
@@ -60,4 +75,4 @@ declare class Text extends Visual {
      */
     getDefaultOptions(): TextOptions;
 }
-export { Text, TextOptions };
+export { Text, TextOptions, TextStrokePosition };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etro",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "An extendable video-editing framework for the browser",
   "browser": "dist/etro-cjs.js",
   "types": "dist/index.d.ts",
@@ -17,6 +17,7 @@
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
     "canvas": "^2.11.2",
+    "cross-env": "^7.0.3",
     "docdash": "^1.1.1",
     "ecstatic": ">=4.1.3",
     "eslint": "^8.20.0",
@@ -27,7 +28,7 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-standard": "^5.0.0",
     "ev": "0.0.7",
-    "gitmoji-cli": "^8.4.0",
+    "gitmoji-cli": "^9.0.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "jasmine": "^3.4.0",
@@ -60,9 +61,9 @@
     "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:unit": "TEST_SUITE=unit karma start",
-    "test:smoke": "TEST_SUITE=smoke karma start",
-    "test:integration": "TEST_SUITE=integration karma start",
+    "test:unit": "cross-env TEST_SUITE=unit karma start",
+    "test:smoke": "cross-env TEST_SUITE=smoke karma start",
+    "test:integration": "cross-env TEST_SUITE=integration karma start",
     "release": "shipjs prepare"
   },
   "repository": {

package/ship.config.js

@@ -24,7 +24,18 @@ module.exports = {
     release.setDate(new Date()) // today
     const newChangelog = parsed.toString()
     fs.writeFileSync(changelogFile, newChangelog, 'utf8')
-  }
+  },
+  releases: [
+    {
+      extractChangelog: ({ version, dir }) => {
+        const changelogFile = `${dir}/CHANGELOG.md`
+        const changelog = fs.readFileSync(changelogFile, 'utf8')
+        const parsed = parser(changelog)
+        const release = parsed.findRelease(version)
+        return `${release.toString()}\n${release.getCompareLink()}`
+      },
+    }
+  ]
 }
 
 class Changelog {

package/src/layer/audio-source.ts

@@ -85,9 +85,12 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
       applyOptions(options, this)
 
       const load = () => {
-        // 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)

package/src/layer/text.ts

@@ -1,6 +1,12 @@
 import { Dynamic, val, applyOptions, Color, parseColor } from '../util'
 import { Visual, VisualOptions } from './visual'
 
+enum TextStrokePosition {
+  Inside,
+  Center,
+  Outside,
+}
+
 interface TextOptions extends VisualOptions {
   text: Dynamic<string>
   font?: Dynamic<string>
@@ -24,6 +30,12 @@ interface TextOptions extends VisualOptions {
    * @see [`CanvasRenderingContext2D#direction`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline)
    */
   textDirection?: Dynamic<string>
+
+  textStroke?: Dynamic<{
+    color: Color,
+    position?: TextStrokePosition
+    thickness?: number
+  }>
 }
 
 class Text extends Visual {
@@ -49,6 +61,11 @@ class Text extends Visual {
    * @see [`CanvasRenderingContext2D#direction`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/textBaseline)
    */
   textDirection: Dynamic<string>
+  textStroke?: Dynamic<{
+    color: Color,
+    position?: TextStrokePosition
+    thickness?: number
+  }>
 
   private _prevText: string
   private _prevFont: string
@@ -94,6 +111,34 @@ class Text extends Visual {
       maxWidth
     )
 
+    const textStroke = val(this, 'textStroke', this.currentTime)
+    if (textStroke) {
+      this.cctx.strokeStyle = textStroke.color
+      this.cctx.lineWidth = textStroke.thickness ?? 1
+      const position = textStroke.position ?? 'outer'
+      // Save the globalCompositeOperation, we have to revert it after stroking the text.
+      const 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
@@ -137,9 +182,10 @@ class Text extends Visual {
       maxWidth: null,
       textAlign: 'start',
       textBaseline: 'top',
-      textDirection: 'ltr'
+      textDirection: 'ltr',
+      textStroke: null
     }
   }
 }
 
-export { Text, TextOptions }
+export { Text, TextOptions, TextStrokePosition }