etro 0.9.0 → 0.10.0

package/dist/util.d.ts

@@ -7,6 +7,10 @@ import { Movie } from './movie';
  * Merges `options` with `defaultOptions`, and then copies the properties with
  * the keys in `defaultOptions` from the merged object to `destObj`.
  *
+ * @deprecated Each option should be copied individually, and the default value
+ * should be set in the constructor. See
+ * {@link https://github.com/etro-js/etro/issues/131} for more info.
+ *
  * @return
  */
 export declare function applyOptions(options: object, destObj: EtroObject): void;
@@ -115,13 +119,3 @@ export declare function parseFont(str: string): Font;
  * @deprecated Use {@link effect.Shader} instead
  */
 export declare function mapPixels(mapper: (pixels: Uint8ClampedArray, i: number) => void, canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, x: number, y: number, width: number, height: number, flush?: boolean): void;
-/**
- * <p>Emits "change" event when public properties updated, recursively.
- * <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/eslint.conf.js

@@ -10,12 +10,14 @@ module.exports = {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly'
   },
+  parser: '@typescript-eslint/parser',
   parserOptions: {
+    // requireConfigFile: false,
     ecmaVersion: 2018,
     sourceType: 'module'
   },
   rules: {
-    'brace-style': ['error', '1tbs', { allowSingleLine: false }],
-    curly: ['error', 'multi', 'consistent']
+    'brace-style': ['error', '1tbs'],
+    curly: ['error', 'all']
   },
 }

package/eslint.test-conf.js

@@ -1,5 +1,4 @@
 const conf = require('./eslint.conf.js')
 conf.env.jasmine = true
-conf.globals.define = 'readonly'
-conf.globals.etro = 'readonly'
+
 module.exports = conf

package/karma.conf.js

@@ -11,15 +11,13 @@ module.exports = function (config) {
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['jasmine', 'requirejs', 'es6-shim'],
+    frameworks: ['jasmine', 'karma-typescript'],
 
     // list of files / patterns to load in the browser
     files: [
-      'dist/etro-iife.js',
-      { pattern: 'spec/*.spec.js', included: false },
-      { pattern: 'node_modules/resemblejs/*.js', included: false },
-      'spec/main.js',
-      { pattern: 'spec/assets/**/*', included: false }
+      'src/**/*.ts',
+      'spec/**/*.ts',
+      { pattern: 'spec/integration/assets/**/*', included: false }
     ],
 
     // list of files / patterns to exclude
@@ -29,12 +27,13 @@ module.exports = function (config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
+      '**/*.ts': ['karma-typescript']
     },
 
     // test results reporter to use
     // possible values: 'dots', 'progress'
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['dots'],
+    reporters: ['dots', 'karma-typescript'],
 
     // web server port
     port: 9876,
@@ -64,7 +63,10 @@ module.exports = function (config) {
     },
 
     client: {
-      captureConsole: true
+      captureConsole: true,
+      jasmine: {
+        timeoutInterval: 20000
+      }
     },
 
     browserConsoleLogOptions: {
@@ -78,11 +80,5 @@ module.exports = function (config) {
     // Concurrency level
     // how many browser should be started simultaneous
     concurrency: Infinity,
-
-    client: {
-      jasmine: {
-        timeoutInterval: 10000
-      }
-    }
   })
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "etro",
-  "version": "0.9.0",
-  "description": "An extendable video-editing framework for the browser and Node",
+  "version": "0.10.0",
+  "description": "An extendable video-editing framework for the browser",
   "browser": "dist/etro-cjs.js",
   "types": "dist/index.d.ts",
   "directories": {
@@ -10,49 +10,50 @@
     "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",
+    "canvas": "^2.11.2",
     "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": "^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.24.4",
-    "typedoc": "^0.22.11",
-    "typescript": "^4.1.3"
+    "shipjs": "^0.26.3",
+    "typedoc": "^0.23.8",
+    "typescript": "^4.7.4"
   },
   "scripts": {
     "build": "rollup -c",
     "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",
+    "effects": "node scripts/effect/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:examples": "eslint -c eslint.example-conf.js --ext .html examples",
+    "lint:main": "eslint -c eslint.typescript-conf.js --ext .ts --fix src",
+    "lint:test": "eslint -c eslint.test-conf.js --ext .ts --fix spec",
+    "lint:examples": "eslint -c eslint.example-conf.js --ext .html --fix examples",
     "start": "http-server",
     "test": "karma start",
     "release": "shipjs prepare"

package/scripts/{gen-effect-samples.html → effect/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 → effect/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/custom-array.ts

@@ -0,0 +1,43 @@
+export abstract class CustomArrayListener<T> {
+  abstract onAdd(item: T): void
+  abstract onRemove(item: T): void
+}
+
+/**
+ * An array that notifies a listener when items are added or removed.
+ */
+export class CustomArray<T> extends Array<T> {
+  constructor (target: T[], listener: CustomArrayListener<T>) {
+    super()
+
+    for (const item of target) {
+      listener.onAdd(item)
+    }
+
+    // Create proxy
+    return new Proxy(target, {
+      deleteProperty (target, property): boolean {
+        const value = target[property]
+        delete target[property]
+        listener.onRemove(value)
+        return true
+      },
+
+      set (target, property, value): boolean {
+        const oldValue = target[property]
+        target[property] = value
+
+        // Check if property is a number (index)
+        if (!isNaN(Number(property))) {
+          if (oldValue !== undefined) {
+            listener.onRemove(oldValue)
+          }
+
+          listener.onAdd(value)
+        }
+
+        return true
+      }
+    }) as T[]
+  }
+}

package/src/effect/base.ts

@@ -1,5 +1,3 @@
-import { watchPublic } from '../util'
-import { publish, subscribe } from '../event'
 import { Movie } from '../movie'
 import { Base as BaseLayer } from '../layer/index'
 import BaseObject from '../object'
@@ -23,31 +21,24 @@ export class Base implements BaseObject {
   private _occurrenceCount: number
 
   constructor () {
-    const newThis = watchPublic(this) as Base // proxy that will be returned by constructor
-
-    newThis.enabled = true
-    newThis._occurrenceCount = 0
-    newThis._target = null
-
-    // Propogate up to target
-    subscribe(newThis, 'effect.change.modify', event => {
-      if (!newThis._target)
-        return
-
-      const type = `${newThis._target.type}.change.effect.modify`
-      publish(newThis._target, type, { ...event, target: newThis._target, source: newThis, type })
-    })
-
-    return newThis
+    this.enabled = true
+    this._occurrenceCount = 0
+    this._target = null
   }
 
+  /**
+   * Wait until this effect is ready to be applied
+   */
+  async whenReady (): Promise<void> {} // eslint-disable-line @typescript-eslint/no-empty-function
+
   /**
    * Attaches this effect to `target` if not already attached.
    * @ignore
    */
   tryAttach (target: Movie | BaseLayer): void {
-    if (this._occurrenceCount === 0)
+    if (this._occurrenceCount === 0) {
       this.attach(target)
+    }
 
     this._occurrenceCount++
   }
@@ -57,21 +48,23 @@ export class Base implements BaseObject {
   }
 
   /**
-   * Dettaches this effect from its target if the number of times `tryDetach`
+   * Detaches this effect from its target if the number of times `tryDetach`
    * has been called (including this call) equals the number of times
    * `tryAttach` has been called.
    *
    * @ignore
    */
   tryDetach (): void {
-    if (this._target === null)
+    if (this._target === null) {
       throw new Error('No movie to detach from')
+    }
 
     this._occurrenceCount--
     // If this effect occurs in another place in the containing array, do not
     // unset _target. (For calling `unshift` on the `layers` proxy)
-    if (this._occurrenceCount === 0)
+    if (this._occurrenceCount === 0) {
       this.detach()
+    }
   }
 
   detach (): void {
@@ -96,6 +89,11 @@ export class Base implements BaseObject {
     return this._target ? this._target.currentTime : undefined
   }
 
+  /** `true` if this effect is ready to be applied */
+  get ready (): boolean {
+    return true
+  }
+
   get parent (): Movie | BaseLayer {
     return this._target
   }
@@ -104,6 +102,9 @@ export class Base implements BaseObject {
     return this._target ? this._target.movie : undefined
   }
 
+  /**
+   * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
+   */
   getDefaultOptions (): Record<string, unknown> {
     return {}
   }

package/src/effect/gaussian-blur.ts

@@ -12,7 +12,7 @@ export interface GaussianBlurOptions {
  * Applies a Gaussian blur
  */
 // TODO: Improve performance
-// TODO: Make sure this is truly gaussian even though it doens't require a
+// TODO: Make sure this is truly gaussian even though it doesn't require a
 // standard deviation
 export class GaussianBlur extends Stack {
   constructor (options: GaussianBlurOptions) {
@@ -63,11 +63,12 @@ class GaussianBlurComponent extends Shader {
 
   apply (target: Movie | Visual, reltime: number): void {
     const radiusVal = val(this, 'radius', reltime)
-    if (radiusVal !== this._radiusCache)
+    if (radiusVal !== this._radiusCache) {
       // Regenerate gaussian distribution canvas.
       this.shape = GaussianBlurComponent._render1DKernel(
         GaussianBlurComponent._gen1DKernel(radiusVal)
       )
+    }
 
     this._radiusCache = radiusVal
 
@@ -106,18 +107,21 @@ class GaussianBlurComponent extends Shader {
     const pascal = GaussianBlurComponent._genPascalRow(2 * radius + 1)
     // don't use `reduce` and `map` (overhead?)
     let sum = 0
-    for (let i = 0; i < pascal.length; i++)
+    for (let i = 0; i < pascal.length; i++) {
       sum += pascal[i]
+    }
 
-    for (let i = 0; i < pascal.length; i++)
+    for (let i = 0; i < pascal.length; i++) {
       pascal[i] /= sum
+    }
 
     return pascal
   }
 
   private static _genPascalRow (index: number): number[] {
-    if (index < 0)
+    if (index < 0) {
       throw new Error(`Invalid index ${index}`)
+    }
 
     let currRow = [1]
     for (let i = 1; i < index; i++) {
@@ -125,8 +129,9 @@ class GaussianBlurComponent extends Shader {
       nextRow.length = currRow.length + 1
       // edges are always 1's
       nextRow[0] = nextRow[nextRow.length - 1] = 1
-      for (let j = 1; j < nextRow.length - 1; j++)
+      for (let j = 1; j < nextRow.length - 1; j++) {
         nextRow[j] = currRow[j - 1] + currRow[j]
+      }
 
       currRow = nextRow
     }

package/src/effect/pixelate.ts

@@ -43,15 +43,15 @@ export class Pixelate extends Shader {
         pixelSize: '1i'
       }
     })
-    /**
-     */
+
     this.pixelSize = options.pixelSize || 1
   }
 
   apply (target: Movie | Visual, reltime: number): void {
     const ps = val(this, 'pixelSize', reltime)
-    if (ps % 1 !== 0 || ps < 0)
+    if (ps % 1 !== 0 || ps < 0) {
       throw new Error('Pixel size must be a nonnegative integer')
+    }
 
     super.apply(target, reltime)
   }

package/src/effect/shader.ts

@@ -4,6 +4,9 @@ import { val } from '../util'
 import { Visual } from './visual'
 
 export interface UniformOptions {
+  /**
+   * The type of the uniform.
+   */
   type?: string
   defaultFloatComponent?: number
 }
@@ -117,8 +120,9 @@ export class Shader extends Visual {
   private _initGl () {
     this._canvas = document.createElement('canvas')
     const gl = this._canvas.getContext('webgl')
-    if (gl === null)
+    if (gl === null) {
       throw new Error('Unable to initialize WebGL. Your browser or machine may not support it.')
+    }
 
     this._gl = gl
     return gl
@@ -127,8 +131,9 @@ export class Shader extends Visual {
   private _initTextures (userUniforms, userTextures, sourceTextureOptions) {
     const gl = this._gl
     const maxTextures = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS)
-    if (userTextures.length > maxTextures)
+    if (userTextures.length > maxTextures) {
       console.warn('Too many textures!')
+    }
 
     this._userTextures = {}
     for (const name in userTextures) {
@@ -143,8 +148,9 @@ export class Shader extends Visual {
          * textures, without having to define multiple properties in the effect
          * object.
          */
-        if (userUniforms[name])
+        if (userUniforms[name]) {
           throw new Error(`Texture - uniform naming conflict: ${name}!`)
+        }
 
         // Add this as a "user uniform".
         userUniforms[name] = '1i' // texture pointer
@@ -183,19 +189,6 @@ export class Shader extends Visual {
     }
   }
 
-  // Not needed, right?
-  /* watchWebGLOptions() {
-        const pubChange = () => {
-            this.publish("change", {});
-        };
-        for (let name in this._userTextures) {
-            watch(this, name, pubChange);
-        }
-        for (let name in this._userUniforms) {
-            watch(this, name, pubChange);
-        }
-    } */
-
   apply (target: Movie | VisualLayer, reltime: number): void {
     this._checkDimensions(target)
     this._refreshGl()
@@ -303,18 +296,24 @@ export class Shader extends Visual {
     }
   }
 
+  /**
+   * Set the shader's uniforms.
+   * @param target The movie or layer to apply the shader to.
+   * @param reltime The relative time of the movie or layer.
+   */
   private _prepareUniforms (target, reltime) {
     const gl = this._gl
-    // Set the shader uniforms.
 
     // Tell the shader we bound the texture to texture unit 0.
     // All base (Shader class) uniforms are optional.
-    if (this._uniformLocations.source)
+    if (this._uniformLocations.source) {
       gl.uniform1i(this._uniformLocations.source, 0)
+    }
 
     // All base (Shader class) uniforms are optional.
-    if (this._uniformLocations.size)
+    if (this._uniformLocations.size) {
       gl.uniform2iv(this._uniformLocations.size, [target.canvas.width, target.canvas.height])
+    }
 
     for (const unprefixed in this._userUniforms) {
       const options = this._userUniforms[unprefixed] as UniformOptions
@@ -343,11 +342,13 @@ export class Shader extends Visual {
   /**
    * Converts a value of a standard type for javascript to a standard type for
    * GLSL
+   *
    * @param value - the raw value to prepare
    * @param outputType - the WebGL type of |value|; example:
    * <code>1f</code> for a float
    * @param reltime - current time, relative to the target
-   * @param [options] - Optional config
+   * @param [options]
+   * @returns the prepared value
    */
   private _prepareValue (value, outputType, reltime, options: UniformOptions = {}) {
     const def = options.defaultFloatComponent || 0
@@ -369,8 +370,9 @@ export class Shader extends Visual {
       let i = 0
       for (const name in this._userTextures) {
         const testValue = val(this, name, reltime)
-        if (value === testValue)
+        if (value === testValue) {
           value = Shader.INTERNAL_TEXTURE_UNITS + i // after the internal texture units
+        }
 
         i++
       }
@@ -378,32 +380,36 @@ export class Shader extends Visual {
 
     if (outputType === '3fv') {
       // allow 4-component vectors; TODO: why?
-      if (Array.isArray(value) && (value.length === 3 || value.length === 4))
+      if (Array.isArray(value) && (value.length === 3 || value.length === 4)) {
         return value
+      }
 
       // kind of loose so this can be changed if needed
-      if (typeof value === 'object')
+      if (typeof value === 'object') {
         return [
           value.r !== undefined ? value.r : def,
           value.g !== undefined ? value.g : def,
           value.b !== undefined ? value.b : def
         ]
+      }
 
       throw new Error(`Invalid type: ${outputType} or value: ${value}`)
     }
 
     if (outputType === '4fv') {
-      if (Array.isArray(value) && value.length === 4)
+      if (Array.isArray(value) && value.length === 4) {
         return value
+      }
 
       // kind of loose so this can be changed if needed
-      if (typeof value === 'object')
+      if (typeof value === 'object') {
         return [
           value.r !== undefined ? value.r : def,
           value.g !== undefined ? value.g : def,
           value.b !== undefined ? value.b : def,
           value.a !== undefined ? value.a : def
         ]
+      }
 
       throw new Error(`Invalid type: ${outputType} or value: ${value}`)
     }
@@ -509,8 +515,9 @@ export class Shader extends Visual {
     } else {
       // No, it's not a power of 2. Turn off mips and set
       // wrapping to clamp to edge
-      if (wrapS !== gl.CLAMP_TO_EDGE || wrapT !== gl.CLAMP_TO_EDGE)
+      if (wrapS !== gl.CLAMP_TO_EDGE || wrapT !== gl.CLAMP_TO_EDGE) {
         console.warn('Wrap mode is not CLAMP_TO_EDGE for a non-power-of-two texture. Defaulting to CLAMP_TO_EDGE')
+      }
 
       gl.texParameteri(target, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
       gl.texParameteri(target, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
@@ -552,6 +559,5 @@ export class Shader extends Visual {
     return shader
   }
 }
-// Shader.prototype.getpublicExcludes = () =>
 
 const isPowerOf2 = value => (value && (value - 1)) === 0