etro 0.8.5 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etro",
-  "version": "0.8.5",
+  "version": "0.9.1",
   "description": "An extendable video-editing framework for the browser and Node",
   "browser": "dist/etro-cjs.js",
   "types": "dist/index.d.ts",
@@ -10,39 +10,39 @@
     "test": "spec"
   },
   "devDependencies": {
-    "@types/dom-mediacapture-record": "^1.0.7",
-    "@typescript-eslint/eslint-plugin": "^4.15.2",
-    "@typescript-eslint/parser": "^4.15.2",
+    "@rollup/plugin-eslint": "^8.0.2",
+    "@types/jest": "^29.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/parser": "^5.30.7",
     "docdash": "^1.1.1",
     "ecstatic": ">=4.1.3",
-    "eslint": "^6.5.1",
-    "eslint-config-standard": "^14.1.0",
-    "eslint-plugin-html": "^6.0.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-node": "^10.0.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
+    "eslint": "^8.20.0",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-html": "^7.0.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-standard": "^5.0.0",
     "ev": "0.0.7",
-    "http-server": "^0.12.3",
+    "http-server": "^14.1.1",
     "jasmine": "^3.4.0",
+    "jasmine-ts": "^0.4.0",
     "karma": "^6.1.1",
-    "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",
+    "karma-typescript": "^5.5.3",
     "keep-a-changelog": "^0.10.4",
     "puppeteer": "^2.0.0",
     "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.22.11",
-    "typescript": "^4.1.3"
+    "shipjs": "^0.24.4",
+    "typedoc": "^0.23.8",
+    "typescript": "^4.7.4"
   },
   "scripts": {
     "build": "rollup -c",
@@ -51,7 +51,7 @@
     "effects": "node scripts/save-effect-samples.js",
     "lint": "npm run --silent lint:main && npm run --silent lint:test && npm run --silent lint:examples",
     "lint:main": "eslint -c eslint.typescript-conf.js --ext .ts src",
-    "lint:test": "eslint -c eslint.test-conf.js spec",
+    "lint:test": "eslint -c eslint.test-conf.js --ext .ts spec",
     "lint:examples": "eslint -c eslint.example-conf.js --ext .html examples",
     "start": "http-server",
     "test": "karma start",

package/scripts/gen-effect-samples.html

@@ -76,10 +76,34 @@
       save(original, 'original.png')
 
       const samples = {
+        'brightness.png': new etro.effect.Brightness({
+          brightness: -100
+        }),
+        'contrast.png': new etro.effect.Contrast({
+          contrast: 0.5
+        }),
+        'channels.png': new etro.effect.Channels({
+          factors: {
+            r: 0.25,
+            g: 0.5,
+            b: 0.75
+          }
+        }),
+        'chroma-key.png': new etro.effect.ChromaKey({
+          target: etro.parseColor('green'),
+          threshold: 100
+        }),
         'gaussian-blur-horizontal.png': new etro.effect.GaussianBlurHorizontal({ radius: 5 }),
         'gaussian-blur-vertical.png': new etro.effect.GaussianBlurVertical({ radius: 5 }),
         'grayscale.png': new etro.effect.Grayscale(),
         'pixelate.png': new etro.effect.Pixelate({ pixelSize: 3 }),
+        'shader.png': new etro.effect.Shader(),
+        'stack.png': new etro.effect.Stack({
+          effects: [
+            new etro.effect.Brightness({ brightness: -100 }),
+            new etro.effect.Contrast({ contrast: 0.5 })
+          ]
+        }),
         'transform/translate.png': new etro.effect.Transform({
           matrix: new etro.effect.Transform.Matrix().translate(-3, 5)
         }),

package/scripts/save-effect-samples.js

@@ -39,7 +39,7 @@ function createDirs(filePath) {
     // remove prefix and save to png
     const buffer = Buffer.from(item.data.replace(/^data:image\/png;base64,/, ''), 'base64')
     console.log(`writing ${item.path} ...`)
-    const path = projectDir + '/spec/assets/effect/' + item.path
+    const path = projectDir + '/spec/integration/assets/effect/' + item.path
     createDirs(path)
     fs.writeFileSync(path, buffer)
   })

package/src/effect/base.ts

@@ -1,7 +1,7 @@
 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'
 
 /**
@@ -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/stack.ts

@@ -21,13 +21,13 @@ export class Stack extends Visual {
     this._effectsBack = []
     // TODO: Throw 'change' events in handlers
     this.effects = new Proxy(this._effectsBack, {
-      deleteProperty: function (target: Visual[], property: number | string): boolean {
+      deleteProperty: function (target: Visual[], property: string | symbol): boolean {
         const value = target[property]
         value.detach() // Detach effect from movie
         delete target[property]
         return true
       },
-      set: function (target: Visual[], property: number | string, value: Visual): boolean {
+      set: function (target: Visual[], property: string | symbol, value: Visual): boolean {
         // TODO: make sure type check works
         if (!isNaN(Number(property))) { // if property is a number (index)
           if (target[property])

package/src/effect/transform.ts

@@ -15,9 +15,9 @@ export interface TransformOptions {
  */
 class Transform extends Visual {
   /** Matrix that determines how to transform the target */
-  matrix: Dynamic<Transform.Matrix>
+  matrix: Dynamic<Transform.Matrix> // eslint-disable-line no-use-before-define
 
-  private _tmpMatrix: Transform.Matrix
+  private _tmpMatrix: Transform.Matrix // eslint-disable-line no-use-before-define
   private _tmpCanvas: HTMLCanvasElement
   private _tmpCtx: CanvasRenderingContext2D
 

package/src/effect/visual.ts

@@ -1,6 +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 {}
+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

@@ -134,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

@@ -141,7 +141,8 @@ class Base implements EtroObject {
    * The current time of the movie relative to this layer
    */
   get currentTime (): number {
-    return this._movie ? this._movie.currentTime - this.startTime
+    return this._movie
+      ? this._movie.currentTime - this.startTime
       : undefined
   }
 
@@ -169,7 +170,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/text.ts

@@ -1,10 +1,10 @@
-import { Dynamic, val, applyOptions } from '../util'
+import { Dynamic, val, applyOptions, Color, parseColor } 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 */
@@ -29,7 +29,7 @@ interface TextOptions extends VisualOptions {
 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 */
@@ -124,7 +124,7 @@ class Text extends Visual {
       background: null,
       text: undefined, // required
       font: '10px sans-serif',
-      color: '#fff',
+      color: parseColor('#fff'),
       textX: 0,
       textY: 0,
       maxWidth: null,

package/src/layer/visual-source.ts

@@ -1,11 +1,27 @@
 import { Dynamic, val, applyOptions } from '../util'
-import { Base, BaseOptions } from './base'
 import { Visual, VisualOptions } from './visual'
 
 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 {
@@ -32,7 +48,7 @@ interface VisualSourceOptions extends VisualOptions {
  * A layer that gets its image data from an HTML image or video element
  * @mixin VisualSourceMixin
  */
-function VisualSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Constructor<Visual>): Constructor<VisualSource> {
+function VisualSourceMixin<OptionsSuperclass extends VisualOptions> (superclass: Constructor<Visual>): Constructor<VisualSource> {
   type MixedVisualSourceOptions = OptionsSuperclass & VisualSourceOptions
 
   class MixedVisualSource extends superclass {
@@ -125,22 +141,26 @@ function VisualSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: C
       // 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)
     }
   }
 

package/src/layer/visual.ts

@@ -1,4 +1,4 @@
-import { Dynamic, val, applyOptions } from '../util'
+import { Dynamic, val, applyOptions, Color } from '../util'
 import { Base, BaseOptions } from './base'
 import { Visual as VisualEffect } from '../effect/visual'
 
@@ -7,9 +7,9 @@ interface VisualOptions extends BaseOptions {
   y?: Dynamic<number>
   width?: Dynamic<number>
   height?: Dynamic<number>
-  background?: Dynamic<string>
+  background?: Dynamic<Color>
   border?: Dynamic<{
-    color: string
+    color: Color
     thickness?: number
   }>
 
@@ -22,9 +22,9 @@ class Visual extends Base {
   y: Dynamic<number>
   width: Dynamic<number>
   height: Dynamic<number>
-  background: Dynamic<string>
+  background: Dynamic<Color>
   border: Dynamic<{
-    color: string
+    color: Color
     thickness: number
   }>
 
@@ -169,13 +169,13 @@ class Visual extends Base {
       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,
       /**

package/src/movie.ts

@@ -3,7 +3,7 @@
  */
 
 import { subscribe, publish } from './event'
-import { Dynamic, val, clearCachedValues, applyOptions, watchPublic } from './util'
+import { Dynamic, val, clearCachedValues, applyOptions, watchPublic, Color, parseColor } from './util'
 import { Base as BaseLayer, Audio as AudioLayer, Video as VideoLayer, Visual } from './layer/index' // `Media` mixins
 import { AudioSource } from './layer/audio-source' // not exported from ./layer/index
 import { Base as BaseEffect } from './effect/index'
@@ -26,7 +26,7 @@ export class MovieOptions {
   /** @deprecated Use <code>actx</code> instead */
   audioContext?: AudioContext
   /** The background color of the movie as a cSS string */
-  background?: Dynamic<string>
+  background?: Dynamic<Color>
   repeat?: boolean
   /** Call `refresh` when the user changes a property on the movie or any of its layers or effects */
   autoRefresh?: boolean
@@ -37,21 +37,28 @@ export class MovieOptions {
  *
  * 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
 export 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>
+  background: Dynamic<Color>
   /** The audio context to which audio output is sent during playback */
   readonly actx: AudioContext
   // Readonly because it's a proxy (so it can't be overwritten).
@@ -59,7 +66,7 @@ export class Movie {
   // Readonly because it's a proxy (so it can't be overwritten).
   readonly layers: BaseLayer[]
 
-  private _canvas: HTMLCanvasElement;
+  private _canvas: HTMLCanvasElement
   private _cctx: CanvasRenderingContext2D
   private _effectsBack: BaseEffect[]
   private _layersBack: BaseLayer[]
@@ -378,20 +385,34 @@ export class Movie {
       return
     }
 
-    this._updateCurrentTime(timestamp)
-    const recordingEnd = this.recording ? this._recordEndTime : this.duration
-    const recordingEnded = this.currentTime > recordingEnd
-    if (recordingEnded)
-      publish(this, 'movie.recordended', { movie: this })
+    const 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 })
+      }
 
-    // Bad for performance? (remember, it's calling Array.reduce)
-    const end = this.duration
-    const ended = this.currentTime > end
-    if (ended) {
       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
@@ -400,27 +421,18 @@ export class Movie {
             const 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
           }
-      }
-
-      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()
+        if (done)
+          done()
 
-      return
+        return
+      }
     }
 
     // Do render
@@ -448,16 +460,22 @@ export class Movie {
     }) // TODO: research performance cost
   }
 
-  private _updateCurrentTime (timestamp) {
+  private _updateCurrentTime (timestampMs: number, end: number) {
     // 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) {
-      const sinceLastPlayed = (timestamp - this._lastPlayed) / 1000
-      this._currentTime = this._lastPlayedOffset + sinceLastPlayed // don't use setter
-      publish(this, 'movie.timeupdate', { movie: this })
+      const sinceLastPlayed = (timestampMs - this._lastPlayed) / 1000
+      const 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
     }
   }
 
@@ -703,9 +721,9 @@ export class Movie {
       canvas: undefined, // required
       /**
        * @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
        */

package/src/object.ts

@@ -4,7 +4,11 @@ import { Movie } from './movie'
 export default interface EtroObject {
   /** Used in etro internals */
   type: string
-  /** Which properties to not watch for changes, for `Movie#autoRefresh` */
+  /**
+   * Which properties to not watch for changes, for `Movie#autoRefresh`
+   *
+   * @deprecated `Movie#autoRefresh` is deprecated
+   */
   publicExcludes: string[]
   /** Map of property name to function to run on result of `val` */
   propertyFilters: Record<string, <T>(value: T) => T>

package/src/util.ts

@@ -415,6 +415,8 @@ export function mapPixels (
  * <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 function watchPublic (target: EtroObject): EtroObject {

package/tsconfig.json

@@ -4,5 +4,7 @@
         "target": "es5",
         "declaration": true
     },
-    "include": ["./src/**/*"]
+    "include": [
+		"./src/**/*"
+	]
 }