etro 0.8.5 → 0.9.1

package/.github/workflows/nodejs.yml

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

package/CHANGELOG.md

@@ -5,6 +5,31 @@ 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.
+
+### Deprecated
+- `autoRefresh` option ([#130](https://github.com/etro-js/etro/issues/130)).
+- `publicExcludes` ([#130](https://github.com/etro-js/etro/issues/130)).
+- All `change` events ([#130](https://github.com/etro-js/etro/issues/130)).
+
+### Fixed
+- Layers no longer trigger infinite loops when their active states change ([#127](https://github.com/etro-js/etro/issues/127)).
+- Add missing `VisualSource` options to `Image` layer ([#128](https://github.com/etro-js/etro/pull/128)).
+- Layers are now stopped when recording ends.
+- `stop()` is no longer called on inactive layers.
+- Movies no longer publish `'movie.ended'` when done recording.
+- `Audio` and `Video` layers not detaching properly.
+- When done playing or recording, movies only reset their time if they're in repeat mode.
+- The `timeupdate` event is no longer fired when `currentTime` remains the same (due to `performance.now()` rounding).
+
 ## [0.8.5] - 2022-03-06
 ### Deprecated
 - `vd.effect.Base` - All visual effects now inherit from `vd.effect.Visual` instead.
@@ -208,6 +233,8 @@ 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
 [0.8.3]: https://github.com/etro-js/etro/compare/v0.8.2...v0.8.3

package/CONTRIBUTING.md

@@ -2,15 +2,15 @@
 
 ## 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).
 
-> Etro has a [Taiga Project](https://tree.taiga.io/project/etro-js-etro/epics) for managing issues and a [GitHub Discussion page](https://github.com/etro-js/etro/discussions) for questions, ideas and casual discussion
+[Join our Discord](https://discord.gg/myrBsQ8Cht)
 
 ## Setting up your local environment
 
 #### Step 0: Dependencies
 
-- You will need Git, Node, NPM (at least 7.x) and Chrome (for headless unit testing) installed
+- You will need Git, Node, NPM (at least 7.x) and Firefox (for headless functional testing) installed.
 
 #### Step 1: Fork
 
@@ -27,9 +27,9 @@ Thank you for considering contributing to Etro! There are many ways you can cont
 
 #### Step 2: Code
 
-- Make some changes.
-- If you are writing code, the linter uses [StandardJS](https://standardjs.com/rules.html) for style conventions.
-- When you're ready to submit a piece of code, first run
+- Make some changes
+- If you are writing code, the linter uses [StandardJS](https://standardjs.com/rules.html) for style conventions
+- When you're ready to submit, first run
 
   ```
   npm run lint
@@ -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
@@ -57,19 +56,18 @@ Thank you for considering contributing to Etro! There are many ways you can cont
 
 #### Step 3: Push
 
-- First, rebase (don't merge) to integrate your work with the main repository
+- First, rebase (please avoid merging) to integrate your work with any new changes in the main repository
 
   ```
   git fetch upstream
   git rebase upstream/master
   ```
 
-- Push to your fork
+- Push to the fork
 
 #### Step 4: Pull request
 
-- Open a pull request from your the branch in your fork to the main repository
-- In the PR title, include **fixes ###** for bugs and **resolves ###** for feature requests
+- Open a pull request from the branch in your fork to the main repository
 - If you changed any core functionality, make sure you explain your motives for those changes
 
 #### Step 5: Feedback
@@ -80,20 +78,9 @@ Thank you for considering contributing to Etro! There are many ways you can cont
 
 ### Etro Overview
 
-If you are new to the core elements of etro, you should probably read [the overview guide](https://etrojs.dev/docs/overview).
+Check out [the overview guide](https://etrojs.dev/docs/overview) for usage information
 
-### API Structure
-
-* `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,12 @@
 [![](https://img.shields.io/npm/v/etro)](https://www.npmjs.com/package/etro)
 [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fetro-js%2Fetro%2Fbadge&style=flat)](https://actions-badge.atrox.dev/etro-js/etro/goto)
 
-> Etro was previously known as Vidar, but it had to be renamed to avoid
-> confusion with an existing software product.
+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.
 
-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.
+[Join our Discord](https://discord.gg/myrBsQ8Cht)
 
 ## Features
 
@@ -72,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/effect/base.d.ts

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

package/dist/effect/visual.d.ts

@@ -1,6 +1,17 @@
+import { Movie } from '../movie';
+import { Visual as VisualLayer } from '../layer/index';
 import { Base } from './base';
 /**
  * Modifies the visual contents of a layer.
  */
 export declare class Visual extends Base {
+    /**
+     * Apply this effect to a target at the given time
+     *
+     * @param target
+     * @param reltime - the movie's current time relative to the layer
+     * (will soon be replaced with an instance getter)
+     * @abstract
+     */
+    apply(target: Movie | VisualLayer, reltime: number): void;
 }

package/dist/etro-cjs.js

@@ -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);
@@ -485,6 +486,8 @@ function mapPixels(mapper, canvas, ctx, x, y, width, height, flush) {
  * <p>Must be called before any watchable properties are set, and only once in
  * the prototype chain.
  *
+ * @deprecated Will be removed in the future (see issue #130)
+ *
  * @param target - object to watch
  */
 function watchPublic(target) {
@@ -493,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)); };
@@ -618,7 +621,10 @@ function AudioSourceMixin(superclass) {
             this.audioNode.connect(movie.actx.destination);
         };
         MixedAudioSource.prototype.detach = function () {
-            this.audioNode.disconnect(this.movie.actx.destination);
+            // Cache dest before super.detach() unsets this.movie
+            var dest = this.movie.actx.destination;
+            _super.prototype.detach.call(this);
+            this.audioNode.disconnect(dest);
         };
         MixedAudioSource.prototype.start = function () {
             this.source.currentTime = this.currentTime + this.sourceStartTime;
@@ -727,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;
@@ -800,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,
@@ -836,7 +843,7 @@ var Base = /** @class */ (function () {
 // id for events (independent of instance, but easy to access when on prototype
 // chain)
 Base.prototype.type = 'layer';
-Base.prototype.publicExcludes = [];
+Base.prototype.publicExcludes = ['active'];
 Base.prototype.propertyFilters = {};
 
 // TODO: rename to something more consistent with the naming convention of Visual and VisualSourceMixin
@@ -981,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, 
             /**
@@ -1062,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;
 }
@@ -1146,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));
@@ -1170,6 +1181,7 @@ var Video = /** @class */ (function (_super) {
  */
 
 var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
     AudioSourceMixin: AudioSourceMixin,
     Audio: Audio,
     Base: Base,
@@ -1193,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;
@@ -1282,6 +1294,18 @@ var Visual$1 = /** @class */ (function (_super) {
     function Visual() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    // subclasses must implement apply
+    /**
+     * Apply this effect to a target at the given time
+     *
+     * @param target
+     * @param reltime - the movie's current time relative to the layer
+     * (will soon be replaced with an instance getter)
+     * @abstract
+     */
+    Visual.prototype.apply = function (target, reltime) {
+        _super.prototype.apply.call(this, target, reltime);
+    };
     return Visual;
 }(Base$1));
 
@@ -1341,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
             }
@@ -1550,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)
@@ -1563,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;
     };
@@ -2040,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 = [];
@@ -2312,16 +2336,17 @@ var Transform = /** @class */ (function (_super) {
  */
 
 var index$1 = /*#__PURE__*/Object.freeze({
-    GaussianBlur: GaussianBlur,
-    GaussianBlurHorizontal: GaussianBlurHorizontal,
-    GaussianBlurVertical: GaussianBlurVertical,
+    __proto__: null,
     Base: Base$1,
+    Brightness: Brightness,
     Channels: Channels,
     ChromaKey: ChromaKey,
     Contrast: Contrast,
     EllipticalMaskOptions: EllipticalMaskOptions,
     EllipticalMask: EllipticalMask,
-    Brightness: Brightness,
+    GaussianBlur: GaussianBlur,
+    GaussianBlurHorizontal: GaussianBlurHorizontal,
+    GaussianBlurVertical: GaussianBlurVertical,
     Grayscale: Grayscale,
     Pixelate: Pixelate,
     Shader: Shader,
@@ -2343,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
@@ -2614,19 +2637,28 @@ var Movie = /** @class */ (function () {
                 done();
             return;
         }
-        this._updateCurrentTime(timestamp);
-        var recordingEnd = this.recording ? this._recordEndTime : this.duration;
-        var recordingEnded = this.currentTime > recordingEnd;
-        if (recordingEnded)
-            publish(this, 'movie.recordended', { movie: this });
-        // Bad for performance? (remember, it's calling Array.reduce)
-        var end = this.duration;
-        var ended = this.currentTime > end;
-        if (ended) {
+        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)
+        if (this.currentTime === end) {
+            if (this.recording)
+                publish(this, 'movie.recordended', { movie: this });
+            if (this.currentTime === this.duration)
+                publish(this, 'movie.ended', { movie: this, repeat: this.repeat });
+            // TODO: only reset currentTime if repeating
+            if (this.repeat) {
+                // Don't use setter, which publishes 'movie.seek'. Instead, update the
+                // value and publish a 'movie.timeupdate' event.
+                this._currentTime = 0;
+                publish(this, 'movie.timeupdate', { movie: this });
+            }
             this._lastPlayed = performance.now();
             this._lastPlayedOffset = 0; // this.currentTime
             this._renderingFrame = false;
-            if (!this.repeat || this.recording) {
+            // Stop playback or recording if done (except if it's playing and repeat
+            // is true)
+            if (!(!this.recording && this.repeat)) {
                 this._paused = true;
                 this._ended = true;
                 // Deactivate all layers
@@ -2635,22 +2667,15 @@ var Movie = /** @class */ (function () {
                         var layer = this.layers[i];
                         // A layer that has been deleted before layers.length has been updated
                         // (see the layers proxy in the constructor).
-                        if (!layer)
+                        if (!layer || !layer.active)
                             continue;
                         layer.stop();
                         layer.active = false;
                     }
+                if (done)
+                    done();
+                return;
             }
-            publish(this, 'movie.ended', { movie: this, repeat: this.repeat });
-            // TODO: only reset currentTime if repeating
-            this._currentTime = 0; // don't use setter
-            publish(this, 'movie.timeupdate', { movie: this });
-        }
-        // Stop playback or recording if done
-        if (recordingEnded || (ended && !this.repeat)) {
-            if (done)
-                done();
-            return;
         }
         // Do render
         this._renderBackground(timestamp);
@@ -2672,16 +2697,21 @@ 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;
-            this._currentTime = this._lastPlayedOffset + sinceLastPlayed; // don't use setter
-            publish(this, 'movie.timeupdate', { movie: this });
+            var sinceLastPlayed = (timestampMs - this._lastPlayed) / 1000;
+            var currentTime = this._lastPlayedOffset + sinceLastPlayed; // don't use setter
+            if (this.currentTime !== currentTime) {
+                this._currentTime = currentTime;
+                publish(this, 'movie.timeupdate', { movie: this });
+            }
             // this._lastUpdate = timestamp;
             // }
+            if (this.currentTime > end)
+                this.currentTime = end;
         }
     };
     Movie.prototype._renderBackground = function (timestamp) {
@@ -2948,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
              */
@@ -2978,6 +3008,7 @@ Movie.prototype.propertyFilters = {};
  */
 
 var etro = /*#__PURE__*/Object.freeze({
+    __proto__: null,
     layer: index,
     effect: index$1,
     event: event,