etro 0.9.0 → 0.9.1

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.9.1] - 2022-09-18
+### Fixed
+- Update color types from `string` to `Color` ([#135](https://github.com/etro-js/etro/pull/135)).
+- `Image` and `Video` classes now include missing properties.
+- `Movie#currentTime` no longer exceeds the stop time.
+
 ## [0.9.0] - 2022-07-17
 ### Changed
 - Methods in the `Base` effect now accept `Base` layers instead of `Visual` layers.
@@ -227,6 +233,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - Gaussian blur
   - Transform
 
+[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
 [0.8.5]: https://github.com/etro-js/etro/compare/v0.8.4...v0.8.5
 [0.8.4]: https://github.com/etro-js/etro/compare/v0.8.3...v0.8.4

package/CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 ## 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 actual code for the library. This page covers how to make changes to the repository files (either code or docs).
+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).
 
 [Join our Discord](https://discord.gg/myrBsQ8Cht)
 
@@ -10,7 +10,7 @@ Thank you for considering contributing to Etro! There are many ways you can cont
 
 #### Step 0: Dependencies
 
-- You will need Git, Node, NPM (at least 7.x) and Firefox (for headless unit testing) installed
+- You will need Git, Node, NPM (at least 7.x) and Firefox (for headless functional testing) installed.
 
 #### Step 1: Fork
 
@@ -40,12 +40,11 @@ Thank you for considering contributing to Etro! There are many ways you can cont
   to lint the code, generate the [dist](dist) files and run unit tests on them. It may be helpful to put these commands in a pre-commit hook.
 
 - Commit your changes
-  - Please avoid squashing all your commits into one; we try to keep atomic commits.
   - Please follow these commit message guidelines:
-    - Optionally, prefix each commit message with [an appropriate emoji](https://gitmoji.dev)
+    - 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).
-    - Example:
+    - Format:
 
       ```
       :emoji: One-liner
@@ -81,18 +80,7 @@ Thank you for considering contributing to Etro! There are many ways you can cont
 
 Check out [the overview guide](https://etrojs.dev/docs/overview) for usage information
 
-### API Structure
-
-* `etro.Movie` - the movie
-* `etro.layer.*` - all layers
-* `etro.effect.*` - all (visual) effects
-- `etro.event.publish` - emit an event
-- `etro.event.subscribe` - add an event listener
-- `etro.*` - other utility classes and methods (see **src/util.ts**)
-
-### Etro concepts
-
-#### Pub/sub system
+### Pub/sub system
 
 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,
 

package/README.md

@@ -3,14 +3,10 @@
 [![](https://img.shields.io/npm/v/etro)](https://www.npmjs.com/package/etro)
 [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fetro-js%2Fetro%2Fbadge&style=flat)](https://actions-badge.atrox.dev/etro-js/etro/goto)
 
-> Etro was previously known as Etro, but it had to be renamed to avoid
-> confusion with an existing software product.
-
-Etro is a typescript framework for programmatically editing videos. Similar to
-GUI-based video-editing software, it lets you composite layers and add 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.
+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)
 
@@ -74,16 +70,11 @@ To use Etro in Node, see the [wrapper](https://github.com/etro-js/etro-node):
 
 ## Running the Examples
 
-First, download the assets for the examples:
-
-```
-npm run assets
-```
-
-Then, start the development server (only used for convience while developing;
-you don't need a server to use Etro):
+Start the development server (only used for convience while developing; you
+don't need a server to use Etro):
 
 ```
+npm i
 npm start
 ```
 

package/dist/etro-cjs.js

@@ -125,6 +125,7 @@ function publish(target, type, event) {
 var listeners = new WeakMap();
 
 var event = /*#__PURE__*/Object.freeze({
+    __proto__: null,
     subscribe: subscribe,
     unsubscribe: unsubscribe,
     publish: publish
@@ -374,7 +375,7 @@ var Color = /** @class */ (function () {
      * Converts to a CSS color
      */
     Color.prototype.toString = function () {
-        return "rgba(" + this.r + ", " + this.g + ", " + this.b + ", " + this.a + ")";
+        return "rgba(".concat(this.r, ", ").concat(this.g, ", ").concat(this.b, ", ").concat(this.a, ")");
     };
     return Color;
 }());
@@ -433,7 +434,7 @@ var Font = /** @class */ (function () {
             s += this.weight + ' ';
         if (this.stretch !== 'normal')
             s += this.stretch + ' ';
-        s += "" + this.size + this.sizeUnit + " ";
+        s += "".concat(this.size).concat(this.sizeUnit, " ");
         if (this.lineHeight !== 'normal')
             s += this.lineHeight + ' ';
         s += this.family;
@@ -450,7 +451,7 @@ var parseFontEl = document.createElement('div');
  */
 function parseFont(str) {
     // Assign css string to html element
-    parseFontEl.setAttribute('style', "font: " + str);
+    parseFontEl.setAttribute('style', "font: ".concat(str));
     var _a = parseFontEl.style, fontSize = _a.fontSize, fontFamily = _a.fontFamily, fontStyle = _a.fontStyle, fontVariant = _a.fontVariant, fontWeight = _a.fontWeight, lineHeight = _a.lineHeight;
     parseFontEl.removeAttribute('style');
     var size = parseFloat(fontSize);
@@ -495,7 +496,7 @@ function watchPublic(target) {
     };
     var callback = function (prop, val, receiver) {
         // Public API property updated, emit 'modify' event.
-        publish(proxy, target.type + ".change.modify", { property: getPath(receiver, prop), newValue: val });
+        publish(proxy, "".concat(target.type, ".change.modify"), { property: getPath(receiver, prop), newValue: val });
     };
     var canWatch = function (receiver, prop) { return !prop.startsWith('_') &&
         (receiver.publicExcludes === undefined || !receiver.publicExcludes.includes(prop)); };
@@ -732,7 +733,7 @@ var Base = /** @class */ (function () {
         // Propogate up to target
         subscribe(newThis, 'layer.change', function (event) {
             var typeOfChange = event.type.substring(event.type.lastIndexOf('.') + 1);
-            var type = "movie.change.layer." + typeOfChange;
+            var type = "movie.change.layer.".concat(typeOfChange);
             publish(newThis._movie, type, __assign(__assign({}, event), { target: newThis._movie, type: type }));
         });
         return newThis;
@@ -805,7 +806,8 @@ var Base = /** @class */ (function () {
          * The current time of the movie relative to this layer
          */
         get: function () {
-            return this._movie ? this._movie.currentTime - this.startTime
+            return this._movie
+                ? this._movie.currentTime - this.startTime
                 : undefined;
         },
         enumerable: false,
@@ -986,13 +988,13 @@ var Visual = /** @class */ (function (_super) {
             height: null, 
             /**
              * @name module:layer.Visual#background
-             * @desc The CSS color code for the background, or <code>null</code> for
+             * @desc The color code for the background, or <code>null</code> for
              * transparency
              */
             background: null, 
             /**
              * @name module:layer.Visual#border
-             * @desc The CSS border style, or <code>null</code> for no border
+             * @desc The border style, or <code>null</code> for no border
              */
             border: null, 
             /**
@@ -1067,19 +1069,23 @@ function VisualSourceMixin(superclass) {
             // instead. (TODO: fact check)
             /* eslint-disable eqeqeq */
             return destWidth != undefined
-                ? destWidth : val(this, 'sourceWidth', this.currentTime);
+                ? destWidth
+                : val(this, 'sourceWidth', this.currentTime);
         }, destHeight: function (destHeight) {
             /* eslint-disable eqeqeq */
             return destHeight != undefined
-                ? destHeight : val(this, 'sourceHeight', this.currentTime);
+                ? destHeight
+                : val(this, 'sourceHeight', this.currentTime);
         }, width: function (width) {
             /* eslint-disable eqeqeq */
             return width != undefined
-                ? width : val(this, 'destWidth', this.currentTime);
+                ? width
+                : val(this, 'destWidth', this.currentTime);
         }, height: function (height) {
             /* eslint-disable eqeqeq */
             return height != undefined
-                ? height : val(this, 'destHeight', this.currentTime);
+                ? height
+                : val(this, 'destHeight', this.currentTime);
         } });
     return MixedVisualSource;
 }
@@ -1151,7 +1157,7 @@ var Text = /** @class */ (function (_super) {
           return metrics;
       } */
     Text.prototype.getDefaultOptions = function () {
-        return __assign(__assign({}, Visual.prototype.getDefaultOptions()), { background: null, text: undefined, font: '10px sans-serif', color: '#fff', textX: 0, textY: 0, maxWidth: null, textAlign: 'start', textBaseline: 'top', textDirection: 'ltr' });
+        return __assign(__assign({}, Visual.prototype.getDefaultOptions()), { background: null, text: undefined, font: '10px sans-serif', color: parseColor('#fff'), textX: 0, textY: 0, maxWidth: null, textAlign: 'start', textBaseline: 'top', textDirection: 'ltr' });
     };
     return Text;
 }(Visual));
@@ -1175,6 +1181,7 @@ var Video = /** @class */ (function (_super) {
  */
 
 var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
     AudioSourceMixin: AudioSourceMixin,
     Audio: Audio,
     Base: Base,
@@ -1198,7 +1205,7 @@ var Base$1 = /** @class */ (function () {
         subscribe(newThis, 'effect.change.modify', function (event) {
             if (!newThis._target)
                 return;
-            var type = newThis._target.type + ".change.effect.modify";
+            var type = "".concat(newThis._target.type, ".change.effect.modify");
             publish(newThis._target, type, __assign(__assign({}, event), { target: newThis._target, source: newThis, type: type }));
         });
         return newThis;
@@ -1358,7 +1365,7 @@ var Shader = /** @class */ (function (_super) {
                  * object.
                  */
                 if (userUniforms[name_1])
-                    throw new Error("Texture - uniform naming conflict: " + name_1 + "!");
+                    throw new Error("Texture - uniform naming conflict: ".concat(name_1, "!"));
                 // Add this as a "user uniform".
                 userUniforms[name_1] = '1i'; // texture pointer
             }
@@ -1567,7 +1574,7 @@ var Shader = /** @class */ (function (_super) {
                     value.g !== undefined ? value.g : def,
                     value.b !== undefined ? value.b : def
                 ];
-            throw new Error("Invalid type: " + outputType + " or value: " + value);
+            throw new Error("Invalid type: ".concat(outputType, " or value: ").concat(value));
         }
         if (outputType === '4fv') {
             if (Array.isArray(value) && value.length === 4)
@@ -1580,7 +1587,7 @@ var Shader = /** @class */ (function (_super) {
                     value.b !== undefined ? value.b : def,
                     value.a !== undefined ? value.a : def
                 ];
-            throw new Error("Invalid type: " + outputType + " or value: " + value);
+            throw new Error("Invalid type: ".concat(outputType, " or value: ").concat(value));
         }
         return value;
     };
@@ -2057,7 +2064,7 @@ var GaussianBlurComponent = /** @class */ (function (_super) {
     };
     GaussianBlurComponent._genPascalRow = function (index) {
         if (index < 0)
-            throw new Error("Invalid index " + index);
+            throw new Error("Invalid index ".concat(index));
         var currRow = [1];
         for (var i = 1; i < index; i++) {
             var nextRow = [];
@@ -2329,6 +2336,7 @@ var Transform = /** @class */ (function (_super) {
  */
 
 var index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
     Base: Base$1,
     Brightness: Brightness,
     Channels: Channels,
@@ -2360,8 +2368,6 @@ var MovieOptions = /** @class */ (function () {
  *
  * Implements a pub/sub system.
  */
-// TODO: Implement event "durationchange", and more
-// TODO: Add width and height options
 // TODO: Make record option to make recording video output to the user while
 // it's recording
 // TODO: rename renderingFrame -> refreshing
@@ -2631,14 +2637,14 @@ var Movie = /** @class */ (function () {
                 done();
             return;
         }
-        this._updateCurrentTime(timestamp);
+        var end = this.recording ? this._recordEndTime : this.duration;
+        this._updateCurrentTime(timestamp, end);
         // TODO: Is calling duration every frame bad for performance? (remember,
         // it's calling Array.reduce)
-        var end = this.recording ? this._recordEndTime : this.duration;
-        if (this.currentTime > end) {
+        if (this.currentTime === end) {
             if (this.recording)
                 publish(this, 'movie.recordended', { movie: this });
-            if (this.currentTime > this.duration)
+            if (this.currentTime === this.duration)
                 publish(this, 'movie.ended', { movie: this, repeat: this.repeat });
             // TODO: only reset currentTime if repeating
             if (this.repeat) {
@@ -2691,12 +2697,12 @@ var Movie = /** @class */ (function () {
             _this._render(repeat, undefined, done);
         }); // TODO: research performance cost
     };
-    Movie.prototype._updateCurrentTime = function (timestamp) {
+    Movie.prototype._updateCurrentTime = function (timestampMs, end) {
         // If we're only instant-rendering (current frame only), it doens't matter
         // if it's paused or not.
         if (!this._renderingFrame) {
             // if ((timestamp - this._lastUpdate) >= this._updateInterval) {
-            var sinceLastPlayed = (timestamp - this._lastPlayed) / 1000;
+            var sinceLastPlayed = (timestampMs - this._lastPlayed) / 1000;
             var currentTime = this._lastPlayedOffset + sinceLastPlayed; // don't use setter
             if (this.currentTime !== currentTime) {
                 this._currentTime = currentTime;
@@ -2704,6 +2710,8 @@ var Movie = /** @class */ (function () {
             }
             // this._lastUpdate = timestamp;
             // }
+            if (this.currentTime > end)
+                this.currentTime = end;
         }
     };
     Movie.prototype._renderBackground = function (timestamp) {
@@ -2970,9 +2978,9 @@ var Movie = /** @class */ (function () {
             canvas: undefined,
             /**
              * @name module:movie#background
-             * @desc The css color for the background, or <code>null</code> for transparency
+             * @desc The color for the background, or <code>null</code> for transparency
              */
-            background: '#000',
+            background: parseColor('#000'),
             /**
              * @name module:movie#repeat
              */
@@ -3000,6 +3008,7 @@ Movie.prototype.propertyFilters = {};
  */
 
 var etro = /*#__PURE__*/Object.freeze({
+    __proto__: null,
     layer: index,
     effect: index$1,
     event: event,

package/dist/etro-iife.js

@@ -126,6 +126,7 @@ var etro = (function () {
     var listeners = new WeakMap();
 
     var event = /*#__PURE__*/Object.freeze({
+        __proto__: null,
         subscribe: subscribe,
         unsubscribe: unsubscribe,
         publish: publish
@@ -375,7 +376,7 @@ var etro = (function () {
          * Converts to a CSS color
          */
         Color.prototype.toString = function () {
-            return "rgba(" + this.r + ", " + this.g + ", " + this.b + ", " + this.a + ")";
+            return "rgba(".concat(this.r, ", ").concat(this.g, ", ").concat(this.b, ", ").concat(this.a, ")");
         };
         return Color;
     }());
@@ -434,7 +435,7 @@ var etro = (function () {
                 s += this.weight + ' ';
             if (this.stretch !== 'normal')
                 s += this.stretch + ' ';
-            s += "" + this.size + this.sizeUnit + " ";
+            s += "".concat(this.size).concat(this.sizeUnit, " ");
             if (this.lineHeight !== 'normal')
                 s += this.lineHeight + ' ';
             s += this.family;
@@ -451,7 +452,7 @@ var etro = (function () {
      */
     function parseFont(str) {
         // Assign css string to html element
-        parseFontEl.setAttribute('style', "font: " + str);
+        parseFontEl.setAttribute('style', "font: ".concat(str));
         var _a = parseFontEl.style, fontSize = _a.fontSize, fontFamily = _a.fontFamily, fontStyle = _a.fontStyle, fontVariant = _a.fontVariant, fontWeight = _a.fontWeight, lineHeight = _a.lineHeight;
         parseFontEl.removeAttribute('style');
         var size = parseFloat(fontSize);
@@ -496,7 +497,7 @@ var etro = (function () {
         };
         var callback = function (prop, val, receiver) {
             // Public API property updated, emit 'modify' event.
-            publish(proxy, target.type + ".change.modify", { property: getPath(receiver, prop), newValue: val });
+            publish(proxy, "".concat(target.type, ".change.modify"), { property: getPath(receiver, prop), newValue: val });
         };
         var canWatch = function (receiver, prop) { return !prop.startsWith('_') &&
             (receiver.publicExcludes === undefined || !receiver.publicExcludes.includes(prop)); };
@@ -733,7 +734,7 @@ var etro = (function () {
             // Propogate up to target
             subscribe(newThis, 'layer.change', function (event) {
                 var typeOfChange = event.type.substring(event.type.lastIndexOf('.') + 1);
-                var type = "movie.change.layer." + typeOfChange;
+                var type = "movie.change.layer.".concat(typeOfChange);
                 publish(newThis._movie, type, __assign(__assign({}, event), { target: newThis._movie, type: type }));
             });
             return newThis;
@@ -806,7 +807,8 @@ var etro = (function () {
              * The current time of the movie relative to this layer
              */
             get: function () {
-                return this._movie ? this._movie.currentTime - this.startTime
+                return this._movie
+                    ? this._movie.currentTime - this.startTime
                     : undefined;
             },
             enumerable: false,
@@ -987,13 +989,13 @@ var etro = (function () {
                 height: null, 
                 /**
                  * @name module:layer.Visual#background
-                 * @desc The CSS color code for the background, or <code>null</code> for
+                 * @desc The color code for the background, or <code>null</code> for
                  * transparency
                  */
                 background: null, 
                 /**
                  * @name module:layer.Visual#border
-                 * @desc The CSS border style, or <code>null</code> for no border
+                 * @desc The border style, or <code>null</code> for no border
                  */
                 border: null, 
                 /**
@@ -1068,19 +1070,23 @@ var etro = (function () {
                 // instead. (TODO: fact check)
                 /* eslint-disable eqeqeq */
                 return destWidth != undefined
-                    ? destWidth : val(this, 'sourceWidth', this.currentTime);
+                    ? destWidth
+                    : val(this, 'sourceWidth', this.currentTime);
             }, destHeight: function (destHeight) {
                 /* eslint-disable eqeqeq */
                 return destHeight != undefined
-                    ? destHeight : val(this, 'sourceHeight', this.currentTime);
+                    ? destHeight
+                    : val(this, 'sourceHeight', this.currentTime);
             }, width: function (width) {
                 /* eslint-disable eqeqeq */
                 return width != undefined
-                    ? width : val(this, 'destWidth', this.currentTime);
+                    ? width
+                    : val(this, 'destWidth', this.currentTime);
             }, height: function (height) {
                 /* eslint-disable eqeqeq */
                 return height != undefined
-                    ? height : val(this, 'destHeight', this.currentTime);
+                    ? height
+                    : val(this, 'destHeight', this.currentTime);
             } });
         return MixedVisualSource;
     }
@@ -1152,7 +1158,7 @@ var etro = (function () {
               return metrics;
           } */
         Text.prototype.getDefaultOptions = function () {
-            return __assign(__assign({}, Visual.prototype.getDefaultOptions()), { background: null, text: undefined, font: '10px sans-serif', color: '#fff', textX: 0, textY: 0, maxWidth: null, textAlign: 'start', textBaseline: 'top', textDirection: 'ltr' });
+            return __assign(__assign({}, Visual.prototype.getDefaultOptions()), { background: null, text: undefined, font: '10px sans-serif', color: parseColor('#fff'), textX: 0, textY: 0, maxWidth: null, textAlign: 'start', textBaseline: 'top', textDirection: 'ltr' });
         };
         return Text;
     }(Visual));
@@ -1176,6 +1182,7 @@ var etro = (function () {
      */
 
     var index = /*#__PURE__*/Object.freeze({
+        __proto__: null,
         AudioSourceMixin: AudioSourceMixin,
         Audio: Audio,
         Base: Base,
@@ -1199,7 +1206,7 @@ var etro = (function () {
             subscribe(newThis, 'effect.change.modify', function (event) {
                 if (!newThis._target)
                     return;
-                var type = newThis._target.type + ".change.effect.modify";
+                var type = "".concat(newThis._target.type, ".change.effect.modify");
                 publish(newThis._target, type, __assign(__assign({}, event), { target: newThis._target, source: newThis, type: type }));
             });
             return newThis;
@@ -1359,7 +1366,7 @@ var etro = (function () {
                      * object.
                      */
                     if (userUniforms[name_1])
-                        throw new Error("Texture - uniform naming conflict: " + name_1 + "!");
+                        throw new Error("Texture - uniform naming conflict: ".concat(name_1, "!"));
                     // Add this as a "user uniform".
                     userUniforms[name_1] = '1i'; // texture pointer
                 }
@@ -1568,7 +1575,7 @@ var etro = (function () {
                         value.g !== undefined ? value.g : def,
                         value.b !== undefined ? value.b : def
                     ];
-                throw new Error("Invalid type: " + outputType + " or value: " + value);
+                throw new Error("Invalid type: ".concat(outputType, " or value: ").concat(value));
             }
             if (outputType === '4fv') {
                 if (Array.isArray(value) && value.length === 4)
@@ -1581,7 +1588,7 @@ var etro = (function () {
                         value.b !== undefined ? value.b : def,
                         value.a !== undefined ? value.a : def
                     ];
-                throw new Error("Invalid type: " + outputType + " or value: " + value);
+                throw new Error("Invalid type: ".concat(outputType, " or value: ").concat(value));
             }
             return value;
         };
@@ -2058,7 +2065,7 @@ var etro = (function () {
         };
         GaussianBlurComponent._genPascalRow = function (index) {
             if (index < 0)
-                throw new Error("Invalid index " + index);
+                throw new Error("Invalid index ".concat(index));
             var currRow = [1];
             for (var i = 1; i < index; i++) {
                 var nextRow = [];
@@ -2330,6 +2337,7 @@ var etro = (function () {
      */
 
     var index$1 = /*#__PURE__*/Object.freeze({
+        __proto__: null,
         Base: Base$1,
         Brightness: Brightness,
         Channels: Channels,
@@ -2361,8 +2369,6 @@ var etro = (function () {
      *
      * Implements a pub/sub system.
      */
-    // TODO: Implement event "durationchange", and more
-    // TODO: Add width and height options
     // TODO: Make record option to make recording video output to the user while
     // it's recording
     // TODO: rename renderingFrame -> refreshing
@@ -2632,14 +2638,14 @@ var etro = (function () {
                     done();
                 return;
             }
-            this._updateCurrentTime(timestamp);
+            var end = this.recording ? this._recordEndTime : this.duration;
+            this._updateCurrentTime(timestamp, end);
             // TODO: Is calling duration every frame bad for performance? (remember,
             // it's calling Array.reduce)
-            var end = this.recording ? this._recordEndTime : this.duration;
-            if (this.currentTime > end) {
+            if (this.currentTime === end) {
                 if (this.recording)
                     publish(this, 'movie.recordended', { movie: this });
-                if (this.currentTime > this.duration)
+                if (this.currentTime === this.duration)
                     publish(this, 'movie.ended', { movie: this, repeat: this.repeat });
                 // TODO: only reset currentTime if repeating
                 if (this.repeat) {
@@ -2692,12 +2698,12 @@ var etro = (function () {
                 _this._render(repeat, undefined, done);
             }); // TODO: research performance cost
         };
-        Movie.prototype._updateCurrentTime = function (timestamp) {
+        Movie.prototype._updateCurrentTime = function (timestampMs, end) {
             // If we're only instant-rendering (current frame only), it doens't matter
             // if it's paused or not.
             if (!this._renderingFrame) {
                 // if ((timestamp - this._lastUpdate) >= this._updateInterval) {
-                var sinceLastPlayed = (timestamp - this._lastPlayed) / 1000;
+                var sinceLastPlayed = (timestampMs - this._lastPlayed) / 1000;
                 var currentTime = this._lastPlayedOffset + sinceLastPlayed; // don't use setter
                 if (this.currentTime !== currentTime) {
                     this._currentTime = currentTime;
@@ -2705,6 +2711,8 @@ var etro = (function () {
                 }
                 // this._lastUpdate = timestamp;
                 // }
+                if (this.currentTime > end)
+                    this.currentTime = end;
             }
         };
         Movie.prototype._renderBackground = function (timestamp) {
@@ -2971,9 +2979,9 @@ var etro = (function () {
                 canvas: undefined,
                 /**
                  * @name module:movie#background
-                 * @desc The css color for the background, or <code>null</code> for transparency
+                 * @desc The color for the background, or <code>null</code> for transparency
                  */
-                background: '#000',
+                background: parseColor('#000'),
                 /**
                  * @name module:movie#repeat
                  */
@@ -3001,6 +3009,7 @@ var etro = (function () {
      */
 
     var etro = /*#__PURE__*/Object.freeze({
+        __proto__: null,
         layer: index,
         effect: index$1,
         event: event,

package/dist/layer/text.d.ts

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

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

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