etro 0.8.4 → 0.8.5

package/CHANGELOG.md

@@ -5,6 +5,13 @@ 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.8.5] - 2022-03-06
+### Deprecated
+- `vd.effect.Base` - All visual effects now inherit from `vd.effect.Visual` instead.
+
+### Fixed
+- Movie constructor throwing `Can't find variable: AudioContext` on WebKit browsers.
+
 ## [0.8.4] - 2022-02-23
 ### Fixed
 - **Major memory leak.**
@@ -201,6 +208,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
   - Gaussian blur
   - Transform
 
+[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
 [0.8.2]: https://github.com/etro-js/etro/compare/v0.8.1...v0.8.2

package/CODE_OF_CONDUCT.md

@@ -55,7 +55,7 @@ further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting me at **\@etro-js** on Twitter. All complaints will be
+reported by contacting us at etroframework\@gmail.com. All complaints will be
 reviewed and investigated and will result in a response that is deemed necessary
 and appropriate to the circumstances. The project team is obligated to maintain
 confidentiality with regard to the reporter of an incident. Further details of

package/README.md

@@ -3,25 +3,23 @@
 [![](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)
 
-> [Version 0.8 is out](https://etrojs.dev/blog/introducing-v0-8-0)!
-> Check out [this guide](https://etrojs.dev/docs/migrating-v0-8-0)
-> for migrating.
+> 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. Similar
-to GUI-based video-editing software, it lets you layer media and other
-content on a timeline. Audio, image, video and other tracks are supported,
-along with powerful video effects for existing tracks. Being very flexible
-and extendable, you can choose to only use the core components or define your
-own.
+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.
 
 ## Features
 
 - Composite video and audio layers
 - Use built-in hardware accelerated effects
 - Write your own effects in JavaScript and GLSL
-- Manipulate audio with the web audio API
-- Define layer and effect properties as keyframes and functions
-- Export to a blob or file
+- Manipulate audio with the web audio API *(audio effects coming soon)*
+- Define layer and effect parameters as keyframes or custom functions
+- Render to a blob in realtime *(offline rendering coming soon)*
 
 ## Installation
 
@@ -29,29 +27,24 @@ own.
 npm i etro
 ```
 
-## Usage
+## Basic Usage
 
-You can use CommonJS syntax:
+Let's look at an example:
 ```js
 import etro from 'etro'
-```
-
-Or include it as a global etro:
-```js
-<script src="node_modules/etro/dist/etro-iife.js"></script>
-```
 
-Let's look at an example:
-```js
 var movie = new etro.Movie({ canvas: outputCanvas })
 var layer = new etro.layer.Video({ startTime: 0, source: videoElement })  // the layer starts at 0s
 movie.addLayer(layer)
+
 movie.record({ frameRate: 24 })  // or just `play` if you don't need to save it
     .then(blob => ...)
 ```
 
-This renders `videoElement` to a blob at 24 fps. This blob can then be
-downloaded as a video file.
+The blob could then be downloaded as a video file or displayed using a `<video>`
+element.
+
+## Effects
 
 Effects can transform the output of a layer or movie:
 ```js
@@ -59,32 +52,23 @@ var layer = new etro.layer.Video({ startTime: 0, source: videoElement })
     .addEffect(new etro.effect.Brightness({ brightness: +100) }))
 ```
 
-## Using in Node
-
-To use Etro in Node, use the [wrapper](https://github.com/etro-js/etro-node):
-```
-npm i etro-node
-```
+## Dynamic Properties
 
+Most properties also support keyframes and functions:
 ```js
-var etroNode = require('etro-node')
-
-etroNode(() => {
-  // You can access inputs as html elements and pass them to Etro as usual.
-  var image = document.getElementById('input1') // <img> element
-
-  // Use etro normally ...
-
-  movie
-    .exportRaw()
-    .then(window.done)
-// Tell Etro Node what inputs to load with { id: path }
-}, { input1: 'image.png' }, 'output.mp4')
+// Keyframes
+layer.effects[0].brightness = new etro.KeyFrame(
+  [0, -75],  // brightness == -75 at 0 seconds
+  [2, +75]  // +75 at 2 seconds
+)
+
+// Function
+layer.effects[0].brightness = () => 100 * Math.random() - 50
 ```
 
-`etroNode()` takes an optional Puppeteer page argument, so you can run
-multiple Etro scripts on the same movie (useful for servers). See [the
-docs](https://github.com/etro-js/etro-node#documentation).
+## Using in Node
+
+To use Etro in Node, see the [wrapper](https://github.com/etro-js/etro-node):
 
 ## Running the Examples
 
@@ -104,12 +88,6 @@ npm start
 Now you can open any example (such as
 http://127.0.0.1:8080/examples/introduction/hello-world1.html).
 
-## TypeScript
-
-Etro is written in TypeScript, so it should work out of the box with TypeScript
-projects. However, it is also compatible with projects that do not use
-TypeScript.
-
 ## Further Reading
 
 - [Documentation](https://etrojs.dev/docs)

package/dist/effect/base.d.ts

@@ -2,7 +2,7 @@ import { Movie } from '../movie';
 import { Visual } from '../layer/index';
 import BaseObject from '../object';
 /**
- * Modifies the visual contents of a layer.
+ * @deprecated All visual effects now inherit from `Visual` instead
  */
 export declare class Base implements BaseObject {
     type: string;

package/dist/effect/elliptical-mask.d.ts

@@ -1,7 +1,7 @@
 import { Movie } from '../movie';
 import { Dynamic } from '../util';
-import { Base } from './base';
-import { Visual } from '../layer/index';
+import { Visual } from './visual';
+import { Visual as VisualLayer } from '../layer/index';
 export declare class EllipticalMaskOptions {
     x: Dynamic<number>;
     y: Dynamic<number>;
@@ -15,7 +15,7 @@ export declare class EllipticalMaskOptions {
 /**
  * Preserves an ellipse of the layer and clears the rest
  */
-export declare class EllipticalMask extends Base {
+export declare class EllipticalMask extends Visual {
     x: Dynamic<number>;
     y: Dynamic<number>;
     radiusX: Dynamic<number>;
@@ -27,5 +27,5 @@ export declare class EllipticalMask extends Base {
     private _tmpCanvas;
     private _tmpCtx;
     constructor(options: EllipticalMaskOptions);
-    apply(target: Movie | Visual, reltime: number): void;
+    apply(target: Movie | VisualLayer, reltime: number): void;
 }

package/dist/effect/index.d.ts

@@ -13,3 +13,4 @@ export * from './pixelate';
 export * from './shader';
 export * from './stack';
 export * from './transform';
+export * from './visual';

package/dist/effect/shader.d.ts

@@ -1,6 +1,6 @@
-import { Visual } from '../layer/index';
+import { Visual as VisualLayer } from '../layer/index';
 import { Movie } from '../movie';
-import { Base } from './base';
+import { Visual } from './visual';
 export interface UniformOptions {
     type?: string;
     defaultFloatComponent?: number;
@@ -26,7 +26,7 @@ export interface ShaderOptions {
 /**
  * A hardware-accelerated pixel mapping using WebGL
  */
-export declare class Shader extends Base {
+export declare class Shader extends Visual {
     /**
      * WebGL texture units consumed by {@link Shader}
      */
@@ -57,7 +57,7 @@ export declare class Shader extends Base {
     private _initTextures;
     private _initAttribs;
     private _initUniforms;
-    apply(target: Movie | Visual, reltime: number): void;
+    apply(target: Movie | VisualLayer, reltime: number): void;
     private _checkDimensions;
     private _refreshGl;
     private _enablePositionAttrib;

package/dist/effect/stack.d.ts

@@ -1,23 +1,23 @@
 import { Movie } from '../movie';
-import { Base } from './base';
-import { Visual } from '../layer';
+import { Visual } from './visual';
+import { Visual as VisualLayer } from '../layer';
 export interface StackOptions {
-    effects: Base[];
+    effects: Visual[];
 }
 /**
  * A sequence of effects to apply, treated as one effect. This can be useful
  * for defining reused effect sequences as one effect.
  */
-export declare class Stack extends Base {
-    readonly effects: Base[];
+export declare class Stack extends Visual {
+    readonly effects: Visual[];
     private _effectsBack;
     constructor(options: StackOptions);
     attach(movie: Movie): void;
     detach(): void;
-    apply(target: Movie | Visual, reltime: number): void;
+    apply(target: Movie | VisualLayer, reltime: number): void;
     /**
      * Convenience method for chaining
      * @param effect - the effect to append
      */
-    addEffect(effect: Base): Stack;
+    addEffect(effect: Visual): Stack;
 }

package/dist/effect/transform.d.ts

@@ -1,7 +1,7 @@
-import { Visual } from '../layer/index';
+import { Visual as VisualLayer } from '../layer/index';
 import { Movie } from '../movie';
 import { Dynamic } from '../util';
-import { Base } from './base';
+import { Visual } from './visual';
 export interface TransformOptions {
     matrix: Dynamic<Transform.Matrix>;
 }
@@ -11,7 +11,7 @@ export interface TransformOptions {
  * translations, scalings and rotations) or B) input the matrix values
  * directly, using the optional argument in the constructor.
  */
-declare class Transform extends Base {
+declare class Transform extends Visual {
     /** Matrix that determines how to transform the target */
     matrix: Dynamic<Transform.Matrix>;
     private _tmpMatrix;
@@ -21,7 +21,7 @@ declare class Transform extends Base {
      * @param matrix - matrix that determines how to transform the target
      */
     constructor(options: TransformOptions);
-    apply(target: Movie | Visual, reltime: number): void;
+    apply(target: Movie | VisualLayer, reltime: number): void;
 }
 declare namespace Transform {
     /**

package/dist/effect/visual.d.ts

@@ -0,0 +1,6 @@
+import { Base } from './base';
+/**
+ * Modifies the visual contents of a layer.
+ */
+export declare class Visual extends Base {
+}

package/dist/etro-cjs.js

@@ -1181,7 +1181,7 @@ var index = /*#__PURE__*/Object.freeze({
 });
 
 /**
- * Modifies the visual contents of a layer.
+ * @deprecated All visual effects now inherit from `Visual` instead
  */
 var Base$1 = /** @class */ (function () {
     function Base() {
@@ -1274,6 +1274,17 @@ Base$1.prototype.type = 'effect';
 Base$1.prototype.publicExcludes = [];
 Base$1.prototype.propertyFilters = {};
 
+/**
+ * Modifies the visual contents of a layer.
+ */
+var Visual$1 = /** @class */ (function (_super) {
+    __extends(Visual, _super);
+    function Visual() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return Visual;
+}(Base$1));
+
 /**
  * A hardware-accelerated pixel mapping using WebGL
  */
@@ -1697,7 +1708,7 @@ var Shader = /** @class */ (function (_super) {
     Shader._VERTEX_SOURCE = "\n    attribute vec4 a_VertexPosition;\n    attribute vec2 a_TextureCoord;\n\n    varying highp vec2 v_TextureCoord;\n\n    void main() {\n        // no need for projection or model-view matrices, since we're just rendering a rectangle\n        // that fills the screen (see position values)\n        gl_Position = a_VertexPosition;\n        v_TextureCoord = a_TextureCoord;\n    }\n  ";
     Shader._IDENTITY_FRAGMENT_SOURCE = "\n    precision mediump float;\n\n    uniform sampler2D u_Source;\n\n    varying highp vec2 v_TextureCoord;\n\n    void main() {\n        gl_FragColor = texture2D(u_Source, v_TextureCoord);\n    }\n  ";
     return Shader;
-}(Base$1));
+}(Visual$1));
 // Shader.prototype.getpublicExcludes = () =>
 var isPowerOf2 = function (value) { return (value && (value - 1)) === 0; };
 
@@ -1871,7 +1882,7 @@ var EllipticalMask = /** @class */ (function (_super) {
         ctx.restore();
     };
     return EllipticalMask;
-}(Base$1));
+}(Visual$1));
 
 /**
  * A sequence of effects to apply, treated as one effect. This can be useful
@@ -1935,7 +1946,7 @@ var Stack = /** @class */ (function (_super) {
         return this;
     };
     return Stack;
-}(Base$1));
+}(Visual$1));
 
 /**
  * Applies a Gaussian blur
@@ -2159,7 +2170,7 @@ var Transform = /** @class */ (function (_super) {
         target.cctx.drawImage(this._tmpCanvas, 0, 0);
     };
     return Transform;
-}(Base$1));
+}(Visual$1));
 (function (Transform) {
     /**
      * @class
@@ -2301,21 +2312,22 @@ var Transform = /** @class */ (function (_super) {
  */
 
 var index$1 = /*#__PURE__*/Object.freeze({
+    GaussianBlur: GaussianBlur,
+    GaussianBlurHorizontal: GaussianBlurHorizontal,
+    GaussianBlurVertical: GaussianBlurVertical,
     Base: Base$1,
-    Brightness: Brightness,
     Channels: Channels,
     ChromaKey: ChromaKey,
     Contrast: Contrast,
     EllipticalMaskOptions: EllipticalMaskOptions,
     EllipticalMask: EllipticalMask,
-    GaussianBlur: GaussianBlur,
-    GaussianBlurHorizontal: GaussianBlurHorizontal,
-    GaussianBlurVertical: GaussianBlurVertical,
+    Brightness: Brightness,
     Grayscale: Grayscale,
     Pixelate: Pixelate,
     Shader: Shader,
     Stack: Stack,
-    get Transform () { return Transform; }
+    get Transform () { return Transform; },
+    Visual: Visual$1
 });
 
 /**
@@ -2934,7 +2946,6 @@ var Movie = /** @class */ (function () {
     Movie.prototype.getDefaultOptions = function () {
         return {
             canvas: undefined,
-            _actx: new AudioContext(),
             /**
              * @name module:movie#background
              * @desc The css color for the background, or <code>null</code> for transparency

package/dist/etro-iife.js

@@ -1182,7 +1182,7 @@ var etro = (function () {
     });
 
     /**
-     * Modifies the visual contents of a layer.
+     * @deprecated All visual effects now inherit from `Visual` instead
      */
     var Base$1 = /** @class */ (function () {
         function Base() {
@@ -1275,6 +1275,17 @@ var etro = (function () {
     Base$1.prototype.publicExcludes = [];
     Base$1.prototype.propertyFilters = {};
 
+    /**
+     * Modifies the visual contents of a layer.
+     */
+    var Visual$1 = /** @class */ (function (_super) {
+        __extends(Visual, _super);
+        function Visual() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return Visual;
+    }(Base$1));
+
     /**
      * A hardware-accelerated pixel mapping using WebGL
      */
@@ -1698,7 +1709,7 @@ var etro = (function () {
         Shader._VERTEX_SOURCE = "\n    attribute vec4 a_VertexPosition;\n    attribute vec2 a_TextureCoord;\n\n    varying highp vec2 v_TextureCoord;\n\n    void main() {\n        // no need for projection or model-view matrices, since we're just rendering a rectangle\n        // that fills the screen (see position values)\n        gl_Position = a_VertexPosition;\n        v_TextureCoord = a_TextureCoord;\n    }\n  ";
         Shader._IDENTITY_FRAGMENT_SOURCE = "\n    precision mediump float;\n\n    uniform sampler2D u_Source;\n\n    varying highp vec2 v_TextureCoord;\n\n    void main() {\n        gl_FragColor = texture2D(u_Source, v_TextureCoord);\n    }\n  ";
         return Shader;
-    }(Base$1));
+    }(Visual$1));
     // Shader.prototype.getpublicExcludes = () =>
     var isPowerOf2 = function (value) { return (value && (value - 1)) === 0; };
 
@@ -1872,7 +1883,7 @@ var etro = (function () {
             ctx.restore();
         };
         return EllipticalMask;
-    }(Base$1));
+    }(Visual$1));
 
     /**
      * A sequence of effects to apply, treated as one effect. This can be useful
@@ -1936,7 +1947,7 @@ var etro = (function () {
             return this;
         };
         return Stack;
-    }(Base$1));
+    }(Visual$1));
 
     /**
      * Applies a Gaussian blur
@@ -2160,7 +2171,7 @@ var etro = (function () {
             target.cctx.drawImage(this._tmpCanvas, 0, 0);
         };
         return Transform;
-    }(Base$1));
+    }(Visual$1));
     (function (Transform) {
         /**
          * @class
@@ -2302,21 +2313,22 @@ var etro = (function () {
      */
 
     var index$1 = /*#__PURE__*/Object.freeze({
+        GaussianBlur: GaussianBlur,
+        GaussianBlurHorizontal: GaussianBlurHorizontal,
+        GaussianBlurVertical: GaussianBlurVertical,
         Base: Base$1,
-        Brightness: Brightness,
         Channels: Channels,
         ChromaKey: ChromaKey,
         Contrast: Contrast,
         EllipticalMaskOptions: EllipticalMaskOptions,
         EllipticalMask: EllipticalMask,
-        GaussianBlur: GaussianBlur,
-        GaussianBlurHorizontal: GaussianBlurHorizontal,
-        GaussianBlurVertical: GaussianBlurVertical,
+        Brightness: Brightness,
         Grayscale: Grayscale,
         Pixelate: Pixelate,
         Shader: Shader,
         Stack: Stack,
-        get Transform () { return Transform; }
+        get Transform () { return Transform; },
+        Visual: Visual$1
     });
 
     /**
@@ -2935,7 +2947,6 @@ var etro = (function () {
         Movie.prototype.getDefaultOptions = function () {
             return {
                 canvas: undefined,
-                _actx: new AudioContext(),
                 /**
                  * @name module:movie#background
                  * @desc The css color for the background, or <code>null</code> for transparency

package/dist/layer/visual.d.ts

@@ -1,6 +1,6 @@
 import { Dynamic } from '../util';
 import { Base, BaseOptions } from './base';
-import { Base as BaseEffect } from '../effect/base';
+import { Visual as VisualEffect } from '../effect/visual';
 interface VisualOptions extends BaseOptions {
     x?: Dynamic<number>;
     y?: Dynamic<number>;
@@ -33,7 +33,7 @@ declare class Visual extends Base {
      * The context of {@link Visual#canvas}
      */
     readonly cctx: CanvasRenderingContext2D;
-    readonly effects: BaseEffect[];
+    readonly effects: VisualEffect[];
     private _effectsBack;
     /**
      * Creates a visual layer
@@ -52,7 +52,7 @@ declare class Visual extends Base {
      * @param effect
      * @return the layer (for chaining)
      */
-    addEffect(effect: BaseEffect): Visual;
+    addEffect(effect: VisualEffect): Visual;
     getDefaultOptions(): VisualOptions;
 }
 export { Visual, VisualOptions };

package/dist/movie.d.ts

@@ -188,7 +188,5 @@ export declare class Movie {
     get height(): number;
     set height(height: number);
     get movie(): Movie;
-    getDefaultOptions(): MovieOptions & {
-        _actx: AudioContext;
-    };
+    getDefaultOptions(): MovieOptions;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etro",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "An extendable video-editing framework for the browser and Node",
   "browser": "dist/etro-cjs.js",
   "types": "dist/index.d.ts",
@@ -33,7 +33,7 @@
     "karma-super-dots-reporter": "^0.2.0",
     "keep-a-changelog": "^0.10.4",
     "puppeteer": "^2.0.0",
-    "resemblejs": "^3.2.5",
+    "resemblejs": "^4.1.0",
     "rollup": "^1.19.4",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-eslint": "^7.0.0",

package/src/effect/base.ts

@@ -5,7 +5,7 @@ import { Visual } from '../layer/index'
 import BaseObject from '../object'
 
 /**
- * Modifies the visual contents of a layer.
+ * @deprecated All visual effects now inherit from `Visual` instead
  */
 export class Base implements BaseObject {
   type: string

package/src/effect/elliptical-mask.ts

@@ -1,7 +1,7 @@
 import { Movie } from '../movie'
 import { Dynamic, val } from '../util'
-import { Base } from './base'
-import { Visual } from '../layer/index'
+import { Visual } from './visual'
+import { Visual as VisualLayer } from '../layer/index'
 
 export class EllipticalMaskOptions {
   x: Dynamic<number>
@@ -18,7 +18,7 @@ export class EllipticalMaskOptions {
  * Preserves an ellipse of the layer and clears the rest
  */
 // TODO: Parent layer mask effects will make more complex masks easier
-export class EllipticalMask extends Base {
+export class EllipticalMask extends Visual {
   x: Dynamic<number>
   y: Dynamic<number>
   radiusX: Dynamic<number>
@@ -46,7 +46,7 @@ export class EllipticalMask extends Base {
     this._tmpCtx = this._tmpCanvas.getContext('2d')
   }
 
-  apply (target: Movie | Visual, reltime: number): void {
+  apply (target: Movie | VisualLayer, reltime: number): void {
     const ctx = target.cctx
     const canvas = target.canvas
     const x = val(this, 'x', reltime)

package/src/effect/index.ts

@@ -20,3 +20,4 @@ export * from './pixelate'
 export * from './shader'
 export * from './stack'
 export * from './transform'
+export * from './visual'

package/src/effect/shader.ts

@@ -1,7 +1,7 @@
-import { Visual } from '../layer/index'
+import { Visual as VisualLayer } from '../layer/index'
 import { Movie } from '../movie'
 import { val } from '../util'
-import { Base } from './base'
+import { Visual } from './visual'
 
 export interface UniformOptions {
   type?: string
@@ -32,7 +32,7 @@ export interface ShaderOptions {
  * A hardware-accelerated pixel mapping using WebGL
  */
 // TODO: can `v_TextureCoord` be replaced by `gl_FragUV`?
-export class Shader extends Base {
+export class Shader extends Visual {
   /**
    * WebGL texture units consumed by {@link Shader}
    */
@@ -196,7 +196,7 @@ export class Shader extends Base {
         }
     } */
 
-  apply (target: Movie | Visual, reltime: number): void {
+  apply (target: Movie | VisualLayer, reltime: number): void {
     this._checkDimensions(target)
     this._refreshGl()
 

package/src/effect/stack.ts

@@ -1,19 +1,19 @@
 import { Movie } from '../movie'
-import { Base } from './base'
-import { Visual } from '../layer'
+import { Visual } from './visual'
+import { Visual as VisualLayer } from '../layer'
 
 export interface StackOptions {
-  effects: Base[]
+  effects: Visual[]
 }
 
 /**
  * A sequence of effects to apply, treated as one effect. This can be useful
  * for defining reused effect sequences as one effect.
  */
-export class Stack extends Base {
-  readonly effects: Base[]
+export class Stack extends Visual {
+  readonly effects: Visual[]
 
-  private _effectsBack: Base[]
+  private _effectsBack: Visual[]
 
   constructor (options: StackOptions) {
     super()
@@ -21,13 +21,13 @@ export class Stack extends Base {
     this._effectsBack = []
     // TODO: Throw 'change' events in handlers
     this.effects = new Proxy(this._effectsBack, {
-      deleteProperty: function (target: Base[], property: number | string): boolean {
+      deleteProperty: function (target: Visual[], property: number | string): boolean {
         const value = target[property]
         value.detach() // Detach effect from movie
         delete target[property]
         return true
       },
-      set: function (target: Base[], property: number | string, value: Base): boolean {
+      set: function (target: Visual[], property: number | string, value: Visual): boolean {
         // TODO: make sure type check works
         if (!isNaN(Number(property))) { // if property is a number (index)
           if (target[property])
@@ -59,7 +59,7 @@ export class Stack extends Base {
     })
   }
 
-  apply (target: Movie | Visual, reltime: number): void {
+  apply (target: Movie | VisualLayer, reltime: number): void {
     for (let i = 0; i < this.effects.length; i++) {
       const effect = this.effects[i]
       if (!effect) continue
@@ -71,7 +71,7 @@ export class Stack extends Base {
    * Convenience method for chaining
    * @param effect - the effect to append
    */
-  addEffect (effect: Base): Stack {
+  addEffect (effect: Visual): Stack {
     this.effects.push(effect)
     return this
   }

package/src/effect/transform.ts

@@ -1,7 +1,7 @@
-import { Visual } from '../layer/index'
+import { Visual as VisualLayer } from '../layer/index'
 import { Movie } from '../movie'
 import { val, Dynamic } from '../util'
-import { Base } from './base'
+import { Visual } from './visual'
 
 export interface TransformOptions {
   matrix: Dynamic<Transform.Matrix> // eslint-disable-line no-use-before-define
@@ -13,7 +13,7 @@ export interface TransformOptions {
  * translations, scalings and rotations) or B) input the matrix values
  * directly, using the optional argument in the constructor.
  */
-class Transform extends Base {
+class Transform extends Visual {
   /** Matrix that determines how to transform the target */
   matrix: Dynamic<Transform.Matrix>
 
@@ -35,7 +35,7 @@ class Transform extends Base {
     this._tmpCtx = this._tmpCanvas.getContext('2d')
   }
 
-  apply (target: Movie | Visual, reltime: number): void {
+  apply (target: Movie | VisualLayer, reltime: number): void {
     if (target.canvas.width !== this._tmpCanvas.width)
       this._tmpCanvas.width = target.canvas.width
 

package/src/effect/visual.ts

@@ -0,0 +1,6 @@
+import { Base } from './base'
+
+/**
+ * Modifies the visual contents of a layer.
+ */
+export class Visual extends Base {}

package/src/layer/visual.ts

@@ -1,6 +1,6 @@
 import { Dynamic, val, applyOptions } from '../util'
 import { Base, BaseOptions } from './base'
-import { Base as BaseEffect } from '../effect/base'
+import { Visual as VisualEffect } from '../effect/visual'
 
 interface VisualOptions extends BaseOptions {
   x?: Dynamic<number>
@@ -41,9 +41,9 @@ class Visual extends Base {
   readonly cctx: CanvasRenderingContext2D
 
   // readonly because it's a proxy
-  readonly effects: BaseEffect[]
+  readonly effects: VisualEffect[]
 
-  private _effectsBack: BaseEffect[]
+  private _effectsBack: VisualEffect[]
 
   /**
    * Creates a visual layer
@@ -142,7 +142,7 @@ class Visual extends Base {
    * @param effect
    * @return the layer (for chaining)
    */
-  addEffect (effect: BaseEffect): Visual {
+  addEffect (effect: VisualEffect): Visual {
     this.effects.push(effect); return this
   }
 

package/src/movie.ts

@@ -698,10 +698,9 @@ export class Movie {
     return this
   }
 
-  getDefaultOptions (): MovieOptions & { _actx: AudioContext } {
+  getDefaultOptions (): MovieOptions {
     return {
       canvas: undefined, // required
-      _actx: new AudioContext(),
       /**
        * @name module:movie#background
        * @desc The css color for the background, or <code>null</code> for transparency

package/.env

@@ -1,2 +0,0 @@
-GITHUB_TOKEN=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
-NPM_AUTH_TOKEN=9f33f7fb-82a2-4e87-a4ba-3860f13a3b68

package/private-todo.txt

@@ -1,70 +0,0 @@
-(A) 2021-04-21 offline recording with ffmpeg.wasm
-(A) 2021-04-21 document events
-(A) 2021-05-17 test recording to mp4
-(A) 2021-05-17 test that keyframes extend last frame for infinity!!
-(B) 2020-08-03 make sure each event's purpose is to notify the public world of notable things that happen in the object.
-(B) 2020-08-27 transitions?
-(B) 2020-12-30 emit modify events when effects are added to layer?
-(B) 2020-12-30 ensure order of `set` and `deleteProperty` are correct in array proxy with `pop`
-(B) 2021-04-12 disable autoRefresh in tests and test integration with this switch some other way
-(C) 2019-10-13 idea: layer inheritance
-(C) 2019-10-13 ignore leading underscore in shader uniform property names
-(C) 2019-10-13 fix opacity with shader effects
-(C) 2020-08-08 Replace val(element, 'property', reltime) with element.property.value
-(C) 2020-08-12 call URL.revokeObjectURL when recording
-(C) 2020-12-30 simplify movie.change.* into movie.change
-(C) 2021-03-28 make all color properties use `Color`
-(C) 2021-04-02 abort recording
-(C) 2021-04-21 webcam example doesn't work on FF unless autoRefresh is set to false
-(C) 2021-07-13 make all layers canvases the same size as the movie
-(C) 2021-07-18 movie stops recording a few frames late when duration is supplied
-(D) 2019-10-15 change chroma key constructor signature
-(D) 2019-11-11 treat zero as invalid for pixelate radius
-(D) 2019-11-11 decide on effect.Transform using hardware acceleration
-(D) 2019-11-18 Look at linearInterp objectKeys default value
-(D) 2019-12-25 Rename `Stack` to something else
-(D) 2020-08-02 Not every option should be set as a property on the object
-(D) 2021-01-24 Remove path support in val (because users would expect it to evaluate every path part)
-(D) 2021-01-26 Fix inheritance checking for media mixin
-(D) 2021-01-26 Media docstring type
-(D) 2021-01-26 Call super in all media mixin methods
-(D) 2021-01-27 Use options.js
-(D) 2021-04-02 error on invalid `record` options
-(D) 2021-04-12 use val() when recalculating AudioSource#duration based on playbackRate
-(D) 2021-07-09 multiple layers of proxies in watched objects
-
-x (B) 2021-04-12 make error range for pixel tests
-x (C) 2021-02-26 make sure that movie background gets val'd
-x (B) 2021-04-03 expose MovieOptions
-x (D) 2019-10-09 probably convert to typescript
-x (C) 2019-10-22 make image and video both extend a mixin
-x (C) 2021-04-03 2019-01-07 record for interval of time
-x (B) 2021-04-03 2021-04-03 add missing properties to MixedVisualSource
-x (D) 2021-04-03 2021-04-03 move opacity out of `border` in Visual
-x (B) 2021-01-28 2020-12-18 split layers up into multiple files
-x (B) 2021-01-28 2020-12-18 split effects up into multiple files
-x (B) 2020-08-27 individual interpolation for keyframe sets
-x (B) 2019-12-24 support node
-x (B) 2020-12-31 2020-12-30 Detach effect when replaced in layer
-x (D) 2020-12-18 2020-08-02 Rename `cctx` -> `vctx`
-x (B) 2019-01-02 fix movie record test failing with GitHub actions
-x (B) 2020-08-03 2020-08-03 don't set Image#clipWidth in init
-x (B) 2020-08-03 2020-08-03 remove properties like Video#mediaWidth, effectively removing layer borders
-x (B) 2020-08-03 2019-10-04 decide on the purpose of events - it's to notify the outside world of notable things that happen in the object
-x (B) 2019-12-25 decide on public / private properties
-x (C) 2019-12-25 2019-12-24 make getDefaultOptions private
-x (D) 2019-11-18 Change Color constructor default a from 255 -> 1.0
-x (A) 2019-12-06 2019-11-11 Start roadmap
-x (A) 2019-11-19 2019-10-22 Util tests
-x (A) 2019-10-22 Effect tests
-x (D) 2019-11-18 2019-11-18 update watchPublic description, removing part that says "after all public properties are initialized in constructor"
-x (B) 2019-10-13 mv examples/media examples/assets
-x (A) 2019-10-22 2019-10-22 Layer tests
-x (B) 2019-10-12 support media live streams
-x (C) 2019-10-03 research if dist/etris-esm.js is necessary
-x (A) 2019-10-04 upload to npm
-x (C) 2019-10-07 lint examples
-x (B) 2019-10-04 fix jsdoc comments after linting
-x (A) 2019-10-07 2019-10-07 fix recording silent movie on chrome
-x (A) 2019-10-05 2019-10-03 research if I can include open media in my repo
-x 2019-10-04 2019-10-03 use one of eslint's official configs

package/rename-file.sh

@@ -1,18 +0,0 @@
-#!/usr/bin/bash
-
-set -e
-
-file=$1
-
-# Update file contents
-sed -i 's/clabe45.github.io\/vidar/etrojs.dev/g' $file
-sed -i 's/calebsacks.me\/vidar/etrojs.dev/g' $file
-sed -i 's/vidar/etro/g' $file
-sed -i 's/Vidar/Etro/g' $file
-sed -i 's/vd/etro/g' $file
-sed -i 's/clabe45/etro-js/g' $file
-
-# Update file name
-rename 's/vidar/etro/' $file
-
-echo "Updated $file"

package/rename-versions.sh

@@ -1,14 +0,0 @@
-#!/usr/bin/bash
-
-set -e
-
-for version in "$@"
-do
-    git checkout v$version
-
-    $(dirname "$0")/rename.sh
-
-    git tag v$version-renamed
-
-    echo ""
-done

package/rename.sh

@@ -1,22 +0,0 @@
-#!/usr/bin/bash
-
-set -e
-
-find -type f -not -name 'rename*.sh' -not -path '*./package-lock.json' -not -path '*./.git/*' -not -path '*./node_modules/*' -exec $(dirname "$0")/rename-file.sh {} \;
-jq '.author = "Caleb Sacks (https://calebsacks.me)"' package.json > package.json.tmp
-mv package.json{.tmp,}
-
-set +e
-
-npm i && npm run lint --if-present && npm run build --if-present && npm run test --if-present
-
-if [[ $? -ne 0 ]]
-then
-    read -p "CI workflow failed. Press [Enter] to continue or Ctrl-C to exit" _
-fi
-
-set -e
-
-git add .
-git rm --cached rename*.sh
-force_commit=true git commit -m "Rename project to 'etro'"