etro 0.8.0 → 0.8.1

package/dist/layer/base.d.ts

@@ -36,7 +36,20 @@ declare class Base implements EtroObject {
      * movie's timeline
      */
     constructor(options: BaseOptions);
+    /**
+     * Attaches this layer to `movie` if not already attached.
+     * @ignore
+     */
+    tryAttach(movie: Movie): void;
     attach(movie: Movie): void;
+    /**
+     * Dettaches this layer from its movie if the number of times `tryDetach` has
+     * been called (including this call) equals the number of times `tryAttach`
+     * has been called.
+     *
+     * @ignore
+     */
+    tryDetach(): void;
     detach(): void;
     /**
      * Called when the layer is activated

package/eslint.conf.js

@@ -15,6 +15,7 @@ module.exports = {
     sourceType: 'module'
   },
   rules: {
-    'brace-style': ['error', '1tbs', { allowSingleLine: false }]
+    'brace-style': ['error', '1tbs', { allowSingleLine: false }],
+    curly: ['error', 'multi', 'consistent']
   },
 }

package/eslint.test-conf.js

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

package/examples/application/readme-screenshot.html

@@ -15,9 +15,8 @@
       document.body.appendChild(canvas)
       movie = new etro.Movie({ canvas })
       etro.event.subscribe(movie, 'movie.timeupdate', () => {
-        if (movie.currentTime >= 11) {
+        if (movie.currentTime >= 11)
           movie.pause()
-        }
       })
 
       sample = document.createElement('video')
@@ -32,15 +31,14 @@
       const width = movie.width / cols; const height = movie.height / rows
       let numbLoaded = 0
 
-      for (let y = 0; y < movie.height; y += height) {
+      for (let y = 0; y < movie.height; y += height)
         for (let x = 0; x < movie.width; x += width) {
           const video = document.createElement('video')
           video.src = '../assets/desert.mp4'
-          if (x * y) {
+          if (x * y)
             video.onplay = event => {
               console.log(event)
             }
-          }
 
           video.onloadedmetadata = () => {
             const layer = new etro.layer.Video({
@@ -54,12 +52,10 @@
             movie.addLayer(layer)
             numbLoaded++
 
-            if (numbLoaded === rows * cols) {
+            if (numbLoaded === rows * cols)
               end()
-            }
           }
         }
-      }
     }
 
     const end = () => {

package/examples/application/video-player.html

@@ -83,14 +83,13 @@
       canvas.addEventListener('click', controls.playPause.click) // FIXME: isn"t firing
       document.body.addEventListener('keyup', event => {
         const key = event.which || event.keyCode || 0
-        if (key === 32) {
+        if (key === 32)
           controls.playPause.click()
-        } // spacebar
+        // spacebar
       })
       etro.event.subscribe(movie, 'movie.ended', event => {
-        if (!event.repeat) {
+        if (!event.repeat)
           controls.playPause.className = 'play'
-        }
       })
 
       controls.progressBar.min = 0

package/examples/introduction/effects.html

@@ -26,13 +26,18 @@
       // create a transparent blue 500x200 at (50, 20) that starts at time 1 and lasts 2 seconds
         .addLayer(
           new etro.layer.Image({ startTime: 2, duration: 2, source: image }).addEffect(
-            new etro.effect.GaussianBlur(3)
+            new etro.effect.GaussianBlur({ radius: 3 })
           )
         )
         .addLayer(
           new etro.layer.Image({ startTime: 4, duration: 2, source: image }).addEffect(
             // you can also use keyframes for almost any property in Etro
-            new etro.effect.Channels({ 0: { r: 2, g: 0.5 }, 2: { r: 0.5, g: 2 } })
+            new etro.effect.Channels({
+              factors: new etro.KeyFrame(
+                [0, { r: 2, g: 0.5 }],
+                [2, { r: 0.5, g: 2 }]
+              )
+            })
           )
         )
         .addLayer(
@@ -44,14 +49,28 @@
             width: movie.width,
             height: movie.height
           }).addEffect(
-            new etro.effect.Transform(new etro.effect.Transform.Matrix().rotate(Math.PI / 6)) // 30d
+            new etro.effect.Transform({
+              matrix: new etro.effect.Transform.Matrix().rotate(Math.PI / 6) // 30d
+            })
           )
         )
         .addLayer(
           new etro.layer.Image({ startTime: 8, duration: 2, source: image }).addEffect(
-            new etro.effect.EllipticalMask(image.width / 2, image.height / 2, image.width / 2, image.height / 2)
+            new etro.effect.EllipticalMask({
+              x: image.width / 2,
+              y: image.height / 2,
+              radiusX: image.width / 2,
+              radiusY: image.height / 2
+            })
           )
         )
+        // .addEffect(new etro.effect.GaussianBlur({ radius: 5 }))
+
+      setTimeout(() => {
+        // console.log(movie.layers[1].effects[0].effects[1].shape)
+      }, 3100)
+
+      movie
         .play()
     }
   </script>

package/karma.conf.js

@@ -9,12 +9,14 @@ module.exports = function (config) {
 
     // frameworks to use
     // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-    frameworks: ['jasmine'],
+    frameworks: ['jasmine', 'requirejs', 'es6-shim'],
 
     // list of files / patterns to load in the browser
     files: [
       'dist/etro-iife.js',
-      'spec/*.spec.js',
+      { pattern: 'spec/*.spec.js', included: false },
+      { pattern: 'node_modules/resemblejs/*.js', included: false },
+      'spec/main.js',
       { pattern: 'spec/assets/**/*', included: false }
     ],
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etro",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "An extendable video-editing framework for the browser and Node",
   "browser": "dist/etro-cjs.js",
   "types": "dist/index.d.ts",
@@ -32,9 +32,12 @@
     "jsdoc-export-default-interop": "^0.3.1",
     "karma": "^6.1.1",
     "karma-chrome-launcher": "^3.1.0",
+    "karma-es6-shim": "^1.0.0",
     "karma-jasmine": "^2.0.1",
+    "karma-requirejs": "^1.1.0",
     "karma-super-dots-reporter": "^0.2.0",
     "puppeteer": "^2.0.0",
+    "resemblejs": "^3.2.5",
     "rollup": "^1.19.4",
     "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-eslint": "^7.0.0",

package/scripts/gen-effect-samples.html

@@ -74,9 +74,6 @@
         'transform/translate.png': new etro.effect.Transform({
           matrix: new etro.effect.Transform.Matrix().translate(-3, 5)
         }),
-        'transform/translate-fraction.png': new etro.effect.Transform({
-          matrix: new etro.effect.Transform.Matrix().translate(0.5, 0.5)
-        }),
         'transform/scale.png': new etro.effect.Transform({
           matrix: new etro.effect.Transform.Matrix().scale(2, 2)
         }),

package/src/effect/base.ts

@@ -31,9 +31,9 @@ export class Base implements BaseObject {
 
     // Propogate up to target
     subscribe(newThis, 'effect.change.modify', event => {
-      if (!newThis._target) {
+      if (!newThis._target)
         return
-      }
+
       const type = `${newThis._target.type}.change.effect.modify`
       publish(newThis._target, type, { ...event, target: newThis._target, source: newThis, type })
     })
@@ -41,22 +41,41 @@ export class Base implements BaseObject {
     return newThis
   }
 
-  attach (target: Movie | Visual): void {
+  /**
+   * Attaches this effect to `target` if not already attached.
+   * @ignore
+   */
+  tryAttach (target: Movie | Visual): void {
+    if (this._occurrenceCount === 0)
+      this.attach(target)
+
     this._occurrenceCount++
-    this._target = target
   }
 
-  detach (): void {
-    if (this._target === null) {
+  attach (movie: Movie | Visual): void {
+    this._target = movie
+  }
+
+  /**
+   * Dettaches 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)
       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) {
-      this._target = null
-    }
+    if (this._occurrenceCount === 0)
+      this.detach()
+  }
+
+  detach (): void {
+    this._target = null
   }
 
   // subclasses must implement apply

package/src/effect/gaussian-blur.ts

@@ -63,12 +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
 
     super.apply(target, reltime)
@@ -106,28 +106,28 @@ 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++) {
       const nextRow = []
       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
     }
     return currRow

package/src/effect/pixelate.ts

@@ -50,9 +50,8 @@ export class Pixelate extends Shader {
 
   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

@@ -117,9 +117,9 @@ export class Shader extends Base {
   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,9 +127,9 @@ export class Shader extends Base {
   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) {
       const userOptions: TextureOptions = userTextures[name]
@@ -143,9 +143,9 @@ export class Shader extends Base {
          * 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
       }
@@ -309,14 +309,12 @@ export class Shader extends Base {
 
     // 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
@@ -371,43 +369,41 @@ export class Shader extends Base {
       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++
       }
     }
 
     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}`)
     }
@@ -513,9 +509,9 @@ export class Shader extends Base {
     } 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)
     }

package/src/effect/stack.ts

@@ -19,6 +19,7 @@ export class Stack extends Base {
     super()
 
     this._effectsBack = []
+    // TODO: Throw 'change' events in handlers
     this.effects = new Proxy(this._effectsBack, {
       deleteProperty: function (target: Base[], property: number | string): boolean {
         const value = target[property]
@@ -29,9 +30,9 @@ export class Stack extends Base {
       set: function (target: Base[], property: number | string, value: Base): boolean {
         // TODO: make sure type check works
         if (!isNaN(Number(property))) { // if property is a number (index)
-          if (target[property]) {
+          if (target[property])
             target[property].detach() // Detach old effect from movie
-          }
+
           value.attach(this._target) // Attach effect to movie
         }
         target[property] = value
@@ -39,6 +40,8 @@ export class Stack extends Base {
       }
     })
     options.effects.forEach(effect => this.effects.push(effect))
+
+    // TODO: Propogate 'change' events from children up
   }
 
   attach (movie: Movie): void {

package/src/effect/transform.ts

@@ -36,12 +36,12 @@ class Transform extends Base {
   }
 
   apply (target: Movie | Visual, reltime: number): void {
-    if (target.canvas.width !== this._tmpCanvas.width) {
+    if (target.canvas.width !== this._tmpCanvas.width)
       this._tmpCanvas.width = target.canvas.width
-    }
-    if (target.canvas.height !== this._tmpCanvas.height) {
+
+    if (target.canvas.height !== this._tmpCanvas.height)
       this._tmpCanvas.height = target.canvas.height
-    }
+
     // Use data, since that's the underlying storage
     this._tmpMatrix.data = val(this, 'matrix.data', reltime)
 
@@ -81,9 +81,8 @@ namespace Transform { // eslint-disable-line @typescript-eslint/no-namespace
     }
 
     identity (): Matrix {
-      for (let i = 0; i < this.data.length; i++) {
+      for (let i = 0; i < this.data.length; i++)
         this.data[i] = Matrix.IDENTITY.data[i]
-      }
 
       return this
     }
@@ -94,9 +93,9 @@ namespace Transform { // eslint-disable-line @typescript-eslint/no-namespace
      * @param [val]
      */
     cell (x: number, y: number, val?: number): number {
-      if (val !== undefined) {
+      if (val !== undefined)
         this.data[3 * y + x] = val
-      }
+
       return this.data[3 * y + x]
     }
 
@@ -131,19 +130,19 @@ namespace Transform { // eslint-disable-line @typescript-eslint/no-namespace
      */
     multiply (other: Matrix): Matrix {
       // copy to temporary matrix to avoid modifying `this` while reading from it
-      for (let x = 0; x < 3; x++) {
+      for (let x = 0; x < 3; x++)
         for (let y = 0; y < 3; y++) {
           let sum = 0
-          for (let i = 0; i < 3; i++) {
+          for (let i = 0; i < 3; i++)
             sum += this.cell(x, i) * other.cell(i, y)
-          }
+
           Matrix._TMP_MATRIX.cell(x, y, sum)
         }
-      }
+
       // copy data from TMP_MATRIX to this
-      for (let i = 0; i < Matrix._TMP_MATRIX.data.length; i++) {
+      for (let i = 0; i < Matrix._TMP_MATRIX.data.length; i++)
         this.data[i] = Matrix._TMP_MATRIX.data[i]
-      }
+
       return this
     }
 

package/src/event.ts

@@ -21,15 +21,13 @@ class TypeId {
   }
 
   contains (other) {
-    if (other._parts.length > this._parts.length) {
+    if (other._parts.length > this._parts.length)
       return false
-    }
 
-    for (let i = 0; i < other._parts.length; i++) {
-      if (other._parts[i] !== this._parts[i]) {
+    for (let i = 0; i < other._parts.length; i++)
+      if (other._parts[i] !== this._parts[i])
         return false
-      }
-    }
+
     return true
   }
 
@@ -47,9 +45,8 @@ class TypeId {
  * @param listener
  */
 export function subscribe (target: EtroObject, type: string, listener: <T extends Event>(T) => void): void {
-  if (!listeners.has(target)) {
+  if (!listeners.has(target))
     listeners.set(target, [])
-  }
 
   listeners.get(target).push(
     { type: new TypeId(type), listener }
@@ -67,9 +64,8 @@ export function subscribe (target: EtroObject, type: string, listener: <T extend
 export function unsubscribe (target: EtroObject, listener: <T extends Event>(T) => void): void {
   // Make sure `listener` has been added with `subscribe`.
   if (!listeners.has(target) ||
-  !listeners.get(target).map(pair => pair.listener).includes(listener)) {
+  !listeners.get(target).map(pair => pair.listener).includes(listener))
     throw new Error('No matching event listener to remove')
-  }
 
   const removed = listeners.get(target)
     .filter(pair => pair.listener !== listener)
@@ -90,18 +86,16 @@ export function publish (target: EtroObject, type: string, event: Record<string,
 
   const t = new TypeId(type)
 
-  if (!listeners.has(target)) {
+  if (!listeners.has(target))
     // No event fired
     return null
-  }
 
   // Call event listeners for this event.
   const listenersForType = []
   for (let i = 0; i < listeners.get(target).length; i++) {
     const item = listeners.get(target)[i]
-    if (t.contains(item.type)) {
+    if (t.contains(item.type))
       listenersForType.push(item.listener)
-    }
   }
 
   for (let i = 0; i < listenersForType.length; i++) {