etro 0.8.3 → 0.9.0

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

@@ -1,9 +1,8 @@
-import { AudioContext, IAudioNode } from 'standardized-audio-context';
 import { Base, BaseOptions } from './base';
 declare type Constructor<T> = new (...args: unknown[]) => T;
 interface AudioSource extends Base {
     readonly source: HTMLMediaElement;
-    readonly audioNode: IAudioNode<AudioContext>;
+    readonly audioNode: AudioNode;
     playbackRate: number;
     /** The audio source node for the media */
     sourceStartTime: number;

package/dist/layer/image.d.ts

@@ -1,5 +1,5 @@
-import { VisualOptions } from './visual';
-declare type ImageOptions = VisualOptions;
+import { VisualSourceOptions } from './visual-source';
+declare type ImageOptions = VisualSourceOptions;
 declare const Image_base: new (...args: unknown[]) => import("./visual-source").VisualSource;
 declare class Image extends Image_base {
 }

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

@@ -1,11 +1,13 @@
 /**
  * @module movie
  */
-import { AudioContext } from 'standardized-audio-context';
 import { Dynamic } from './util';
 import { Base as BaseLayer } from './layer/index';
 import { Base as BaseEffect } from './effect/index';
 declare global {
+    interface Window {
+        webkitAudioContext: typeof AudioContext;
+    }
     interface HTMLCanvasElement {
         captureStream(frameRate?: number): MediaStream;
     }
@@ -30,10 +32,19 @@ export declare class MovieOptions {
  */
 export declare class Movie {
     type: string;
+    /**
+     * @deprecated Auto-refresh will be removed in the future (see issue #130).
+     */
     publicExcludes: string[];
     propertyFilters: Record<string, <T>(value: T) => T>;
     repeat: boolean;
-    /** Call `refresh` when the user changes a property on the movie or any of its layers or effects */
+    /**
+     * Call `refresh` when the user changes a property on the movie or any of its
+     * layers or effects
+     *
+     * @deprecated Auto-refresh will be removed in the future. If you want to
+     * refresh the canvas, call `refresh`. See issue #130.
+     */
     autoRefresh: boolean;
     /** The background color of the movie as a cSS string */
     background: Dynamic<string>;
@@ -186,7 +197,5 @@ export declare class Movie {
     get height(): number;
     set height(height: number);
     get movie(): Movie;
-    getDefaultOptions(): MovieOptions & {
-        _actx: AudioContext;
-    };
+    getDefaultOptions(): MovieOptions;
 }

package/dist/util.d.ts

@@ -120,6 +120,8 @@ export declare function mapPixels(mapper: (pixels: Uint8ClampedArray, i: number)
  * <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
  */
 export declare function watchPublic(target: EtroObject): EtroObject;

package/karma.conf.js

@@ -1,6 +1,8 @@
 // Karma configuration
 // Generated on Thu Sep 19 2019 02:05:06 GMT-0400 (Eastern Daylight Time)
 
+process.env.CHROME_BIN = require('puppeteer').executablePath()
+
 module.exports = function (config) {
   config.set({
 
@@ -49,7 +51,25 @@ module.exports = function (config) {
 
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['ChromeHeadless'],
+    browsers: ['FirefoxHeadless'],
+
+    customLaunchers: {
+      'FirefoxHeadless': {
+        base: 'Firefox',
+        flags: ['-headless'],
+        prefs: {
+          'network.proxy.type': 0
+        }
+      }
+    },
+
+    client: {
+      captureConsole: true
+    },
+
+    browserConsoleLogOptions: {
+      level: 'log'
+    },
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits
@@ -57,6 +77,12 @@ module.exports = function (config) {
 
     // Concurrency level
     // how many browser should be started simultaneous
-    concurrency: Infinity
+    concurrency: Infinity,
+
+    client: {
+      jasmine: {
+        timeoutInterval: 10000
+      }
+    }
   })
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etro",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "description": "An extendable video-editing framework for the browser and Node",
   "browser": "dist/etro-cjs.js",
   "types": "dist/index.d.ts",
@@ -9,9 +9,6 @@
     "example": "examples",
     "test": "spec"
   },
-  "dependencies": {
-    "standardized-audio-context": "^25.1.13"
-  },
   "devDependencies": {
     "@types/dom-mediacapture-record": "^1.0.7",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
@@ -26,30 +23,30 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "ev": "0.0.7",
-    "http-server": "^0.12.3",
+    "http-server": "^14.1.1",
     "jasmine": "^3.4.0",
     "karma": "^6.1.1",
-    "karma-chrome-launcher": "^3.1.0",
     "karma-es6-shim": "^1.0.0",
+    "karma-firefox-launcher": "^2.1.2",
     "karma-jasmine": "^2.0.1",
     "karma-requirejs": "^1.1.0",
     "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",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-uglify-es": "^0.0.1",
-    "shipjs": "0.23.3",
-    "typedoc": "^0.20.34",
+    "shipjs": "^0.24.4",
+    "typedoc": "^0.22.11",
     "typescript": "^4.1.3"
   },
   "scripts": {
     "build": "rollup -c",
-    "doc": "rm -rf docs && npx typedoc src/etro.ts --excludePrivate --readme none --theme minimal",
+    "doc": "rm -rf docs && npx typedoc src/etro.ts --excludePrivate --readme none",
     "assets": "git fetch origin example-assets:example-assets && git cherry-pick example-assets && git reset --soft HEAD^ && git reset HEAD examples/assets",
     "effects": "node scripts/save-effect-samples.js",
     "lint": "npm run --silent lint:main && npm run --silent lint:test && npm run --silent lint:examples",

package/scripts/gen-effect-samples.html

@@ -43,26 +43,35 @@
     /**
      * Save an effect sample to the disk
      */
-    function saveSample(original, effect, path) {
-      // don't overwrite original's contents
-      const buffer = document.createElement('canvas')
-      buffer.width = original.width
-      buffer.height = original.height
-      const ctx = buffer.getContext('2d')
-      ctx.drawImage(original, 0, 0)
-      const movie = {
-        canvas: buffer, cctx: ctx,
-        width: original.width, height: original.height
-      }
-      // for util.cache()
-      effect._target = { movie }
-      // Run effect
-      effect.apply(movie)
+    async function saveSample(original, effect, path) {
+      // Create movie (needed for layer to render)
+      const movie = new etro.Movie({
+        canvas: document.createElement('canvas'),
+        autoRefresh: false
+      })
+
+      // Convert canvas to image
+      const originalImg = new Image()
+      await new Promise(resolve => {
+        originalImg.onload = resolve
+        originalImg.src = original.toDataURL()
+      })
+
+      // Add an image layer with the effect to the movie
+      const layer = new etro.layer.Image({
+        startTime: 0,
+        duration: 1,
+        source: originalImg
+      })
+      layer.effects.push(effect)
+      movie.layers.push(layer)
 
-      save(buffer, path)
+      // Render and save the layer
+      layer.render()
+      save(layer.canvas, path)
     }
 
-    window.onload = () => {
+    window.onload = async () => {
       const original = genRandomNoise(16, 16)
       save(original, 'original.png')
 
@@ -91,7 +100,7 @@
 
       for (let path in samples) {
         const effect = samples[path]
-        saveSample(original, effect, path)
+        await saveSample(original, effect, path)
       }
       window.done = true
     }

package/scripts/save-effect-samples.js

@@ -20,8 +20,13 @@ function createDirs(filePath) {
 }
 
 (async () => {
-  const browser = await puppeteer.launch()
+  const browser = await puppeteer.launch({
+    args: ['--autoplay-policy=no-user-gesture-required']
+  })
   const page = await browser.newPage()
+  page.on('console', msg => {
+    console.log(`[CONSOLE] ${msg.text()}`)
+  })
 
   await page.goto(`file://${__dirname}/gen-effect-samples.html`)
   await page.waitForFunction(() => window.done);

package/src/effect/base.ts

@@ -1,11 +1,11 @@
 import { watchPublic } from '../util'
 import { publish, subscribe } from '../event'
 import { Movie } from '../movie'
-import { Visual } from '../layer/index'
+import { Base as BaseLayer } 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
@@ -14,7 +14,7 @@ export class Base implements BaseObject {
 
   enabled: boolean
 
-  private _target: Movie | Visual
+  private _target: Movie | BaseLayer
   /**
    * The number of times this effect has been attached to a target minus the
    * number of times it's been detached. (Used for the target's array proxy with
@@ -45,14 +45,14 @@ export class Base implements BaseObject {
    * Attaches this effect to `target` if not already attached.
    * @ignore
    */
-  tryAttach (target: Movie | Visual): void {
+  tryAttach (target: Movie | BaseLayer): void {
     if (this._occurrenceCount === 0)
       this.attach(target)
 
     this._occurrenceCount++
   }
 
-  attach (movie: Movie | Visual): void {
+  attach (movie: Movie | BaseLayer): void {
     this._target = movie
   }
 
@@ -87,7 +87,7 @@ export class Base implements BaseObject {
    * (will soon be replaced with an instance getter)
    * @abstract
    */
-  apply (target: Movie | Visual, reltime: number): void {} // eslint-disable-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+  apply (target: Movie | BaseLayer, reltime: number): void {} // eslint-disable-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
 
   /**
    * The current time of the target
@@ -96,7 +96,7 @@ export class Base implements BaseObject {
     return this._target ? this._target.currentTime : undefined
   }
 
-  get parent (): Movie | Visual {
+  get parent (): Movie | BaseLayer {
     return this._target
   }
 

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,21 @@
+import { Movie } from '../movie'
+import { Visual as VisualLayer } from '../layer/index'
+import { Base } from './base'
+
+/**
+ * Modifies the visual contents of a layer.
+ */
+export class Visual extends Base {
+  // 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
+   */
+  apply (target: Movie | VisualLayer, reltime: number): void { // eslint-disable-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+    super.apply(target, reltime)
+  }
+}

package/src/layer/audio-source.ts

@@ -1,4 +1,3 @@
-import { AudioContext, IAudioNode, IAudioDestinationNode } from 'standardized-audio-context'
 import { Movie } from '../movie'
 import { subscribe } from '../event'
 import { applyOptions, val } from '../util'
@@ -8,7 +7,7 @@ type Constructor<T> = new (...args: unknown[]) => T
 
 interface AudioSource extends Base {
   readonly source: HTMLMediaElement
-  readonly audioNode: IAudioNode<AudioContext>
+  readonly audioNode: AudioNode
   playbackRate: number
   /** The audio source node for the media */
   sourceStartTime: number
@@ -41,7 +40,7 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
     readonly source: HTMLMediaElement
 
     private __startTime: number
-    private _audioNode: IAudioNode<AudioContext>
+    private _audioNode: AudioNode
     private _sourceStartTime: number
     private _unstretchedDuration: number
     private _playbackRate: number
@@ -117,12 +116,12 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
       // Spy on connect and disconnect to remember if it connected to
       // actx.destination (for Movie#record).
       const oldConnect = this._audioNode.connect.bind(this.audioNode)
-      this._audioNode.connect = <T extends IAudioDestinationNode<AudioContext>>(destination: T, outputIndex?: number, inputIndex?: number): AudioNode => {
+      this._audioNode.connect = <T extends AudioDestinationNode>(destination: T, outputIndex?: number, inputIndex?: number): AudioNode => {
         this._connectedToDestination = destination === movie.actx.destination
         return oldConnect(destination, outputIndex, inputIndex)
       }
       const oldDisconnect = this._audioNode.disconnect.bind(this.audioNode)
-      this._audioNode.disconnect = <T extends IAudioDestinationNode<AudioContext>>(destination?: T | number, output?: number, input?: number): AudioNode => {
+      this._audioNode.disconnect = <T extends AudioDestinationNode>(destination?: T | number, output?: number, input?: number): AudioNode => {
         if (this._connectedToDestination &&
         destination === movie.actx.destination)
           this._connectedToDestination = false
@@ -135,7 +134,10 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
     }
 
     detach () {
-      this.audioNode.disconnect(this.movie.actx.destination)
+      // Cache dest before super.detach() unsets this.movie
+      const dest = this.movie.actx.destination
+      super.detach()
+      this.audioNode.disconnect(dest)
     }
 
     start () {

package/src/layer/base.ts

@@ -169,7 +169,7 @@ class Base implements EtroObject {
 // 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 = {}
 
 export { Base, BaseOptions }

package/src/layer/image.ts

@@ -1,7 +1,7 @@
-import { Visual, VisualOptions } from './visual'
-import { VisualSourceMixin } from './visual-source'
+import { Visual } from './visual'
+import { VisualSourceMixin, VisualSourceOptions } from './visual-source'
 
-type ImageOptions = VisualOptions
+type ImageOptions = VisualSourceOptions
 
 class Image extends VisualSourceMixin(Visual) {}
 

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
   }