etro 0.7.0 → 0.8.0

package/spec/movie.spec.js

@@ -6,9 +6,21 @@ describe('Movie', function () {
       document.body.removeChild(canvas)
     }
     canvas = document.createElement('canvas')
+    // Resolutions lower than 20x20 rreslt in empty blobs.
+    canvas.width = 20
+    canvas.height = 20
     document.body.appendChild(canvas)
-    movie = new etro.Movie(canvas)
-    movie.addLayer(new etro.layer.Visual(0, 0.5))
+    /*
+     * Because `autoRefresh` defaults to true, any operation that could effect
+     * the current frame causes a refresh. Thus, we have to wait to the test
+     * until the movie is done refreshing, to catch all possible errors.
+     * However, errors that take place while refreshing will only cause the test
+     * to timeout, without the actual error being shown in the terminal. The
+     * current best way to debug this situation would be to open the test in
+     * 'Chrome' instead of 'ChromeHeadless' (see karma.conf.js).
+     */
+    movie = new etro.Movie({ canvas, background: 'blue' })
+    movie.addLayer(new etro.layer.Visual({ startTime: 0, duration: 0.8 }))
   })
 
   describe('identity ->', function () {
@@ -17,6 +29,119 @@ describe('Movie', function () {
     })
   })
 
+  describe('layers ->', function () {
+    it('should call `attach` when a layer is added', function (done) {
+      const layer = new etro.layer.Base({ startTime: 0, duration: 1 })
+      spyOn(layer, 'attach')
+      // Manually attach layer to movie, because `attach` is stubbed.
+      // Otherwise, auto-refresh will cause errors.
+      layer._movie = movie
+
+      // Adding a layer will cause the movie to refresh. Wait until the movie's
+      // done refreshing to end the test (in case errors arise there!)
+      etro.event.subscribe(movie, 'movie.loadeddata', done)
+      // Add layer
+      movie.layers.push(layer)
+      expect(layer.attach).toHaveBeenCalled()
+    })
+
+    it('should call `detach` when a layer is removed', function (done) {
+      spyOn(movie.layers[0], 'detach')
+      // Wait to end the test until the movie's done refreshing.
+      etro.event.subscribe(movie, 'movie.loadeddata', done)
+      const layer = movie.layers.shift()
+      expect(layer.detach).toHaveBeenCalled()
+    })
+
+    it('should call `detach` when a layer is replaced', function (done) {
+      const layer = movie.layers[0]
+      spyOn(layer, 'detach')
+      // Wait to end the test until the movie's done refreshing.
+      etro.event.subscribe(movie, 'movie.loadeddata', done)
+      movie.layers[0] = new etro.layer.Base({ startTime: 0, duration: 1 })
+      expect(layer.detach).toHaveBeenCalled()
+    })
+
+    it('should implement common array methods', function (done) {
+      const dummy = () => new etro.layer.Base({ startTime: 0, duration: 1 })
+      const calls = {
+        concat: [[dummy()]],
+        every: [layer => true],
+        includes: [dummy()],
+        pop: [],
+        push: [dummy()],
+        unshift: [dummy()]
+      }
+      // Wait to end the test until the movie's done refreshing.
+      etro.event.subscribe(movie, 'movie.loadeddata', done)
+      for (const method in calls) {
+        const args = calls[method]
+        const copy = [...movie.layers]
+        const expectedResult = Array.prototype[method].apply(copy, args)
+        const actualResult = movie.layers[method](...args)
+        expect(actualResult).toEqual(expectedResult)
+        expect(movie.layers).toEqual(copy)
+      }
+    })
+  })
+
+  describe('effects ->', function () {
+    it('should call `attach` when an effect is added', function (done) {
+      const effect = new etro.effect.Base()
+      spyOn(effect, 'attach')
+      // Wait to end the test until the movie's done refreshing.
+      etro.event.subscribe(movie, 'movie.loadeddata', done)
+
+      movie.effects.push(effect)
+      expect(effect.attach).toHaveBeenCalled()
+    })
+
+    it('should call `detach` when an effect is removed', function (done) {
+      const effect = new etro.effect.Base()
+      movie.effects.push(effect)
+      spyOn(effect, 'detach')
+      // Wait to end the test until the movie's done refreshing.
+      etro.event.subscribe(movie, 'movie.loadeddata', done)
+
+      movie.effects.pop()
+      expect(effect.detach).toHaveBeenCalled()
+    })
+
+    it('should call `detach` when an effect is replaced', function (done) {
+      const effect = new etro.effect.Base()
+      movie.effects.push(effect)
+      spyOn(effect, 'detach')
+      // Wait to end the test until the movie's done refreshing.
+      etro.event.subscribe(movie, 'movie.loadeddata', done)
+
+      movie.effects[0] = new etro.effect.Base()
+      expect(effect.detach).toHaveBeenCalled()
+    })
+
+    it('should implement common array methods', function (done) {
+      const dummy = () => new etro.effect.Base()
+      const calls = {
+        concat: [[dummy()]],
+        every: [layer => true],
+        includes: [dummy()],
+        pop: [],
+        push: [dummy()],
+        unshift: [dummy()]
+      }
+      // Wait to end the test until the movie's done refreshing.
+      etro.event.subscribe(movie, 'movie.loadeddata', done)
+
+      for (const method in calls) {
+        const args = calls[method]
+        const copy = [...movie.effects]
+        const expectedResult = Array.prototype[method].apply(copy, args)
+        const actualResult = movie.effects[method](...args)
+        expect(actualResult).toEqual(expectedResult)
+        expect(movie.effects).toEqual(copy)
+      }
+    })
+  })
+
   describe('operations ->', function () {
     it('should not be paused after playing', function () {
       movie.play()
@@ -43,17 +168,32 @@ describe('Movie', function () {
     })
 
     it('should be `recording` when recording', function () {
-      movie.record(10)
+      movie.record({ frameRate: 10 })
       expect(movie.recording).toBe(true)
     })
 
     it('should not be paused when recording', function () {
-      movie.record(10)
+      movie.record({ frameRate: 10 })
       expect(movie.paused).toBe(false)
     })
 
+    it('should end recording at the right time when `duration` is supplied', function (done) {
+      movie.record({ frameRate: 10, duration: 0.4 })
+        .then(_ => {
+          // Expect movie.currentTime to be a little larger than 0.4 (the last render might land after 0.4)
+          expect(movie.currentTime).toBeGreaterThanOrEqual(0.4)
+          expect(movie.currentTime).toBeLessThan(0.4 + 0.08)
+          done()
+        })
+    })
+
+    it('should reach the end when recording with no `duration`', function (done) {
+      etro.event.subscribe(movie, 'movie.ended', done)
+      movie.record({ frameRate: 10 })
+    })
+
     it('should return blob after recording', function (done) {
-      movie.record(60)
+      movie.record({ frameRate: 60 })
         .then(video => {
           expect(video.size).toBeGreaterThan(0)
           done()
@@ -64,12 +204,56 @@ describe('Movie', function () {
     })
 
     it('can record with custom MIME type', function (done) {
-      movie.record(60, { type: 'video/mp4' })
+      movie.record({ frameRate: 60, type: 'video/mp4' })
         .then(video => {
           expect(video.type).toBe('video/mp4')
           done()
         })
     })
+
+    it('should produce correct image data when recording', function (done) {
+      movie.record({ frameRate: 10 })
+        .then(video => {
+          // Render the first frame of the video to a canvas and make sure the
+          // image data is correct.
+
+          // Load blob into html video element
+          const v = document.createElement('video')
+          v.src = URL.createObjectURL(video)
+          // Since it's a blob, we need to force-load all frames for it to
+          // render properly, using this hack:
+          v.currentTime = Number.MAX_SAFE_INTEGER
+          v.ontimeupdate = () => {
+            // Now the video is loaded. Create temporary canvas and render first
+            // frame onto it.
+            const ctx = document
+              .createElement('canvas')
+              .getContext('2d')
+            ctx.canvas.width = v.videoWidth
+            ctx.canvas.height = v.videoHeight
+            ctx.drawImage(v, 0, 0)
+            // Expect all opaque blue pixels
+            const expectedImageData = Array(v.videoWidth * v.videoHeight)
+              .fill([0, 0, 255, 255])
+              .flat(1)
+            const actualImageData = Array.from(
+              ctx.getImageData(0, 0, v.videoWidth, v.videoHeight).data
+            )
+            const maxDiff = actualImageData
+              // Calculate diff image data
+              .map((x, i) => x - expectedImageData[i])
+              // Find max pixel component diff
+              .reduce((x, max) => Math.max(x, max))
+
+            // Now, there is going to be variance due to encoding problems.
+            // Accept an error of 5 for each color component (5 is somewhat
+            // arbitrary but it works).
+            expect(maxDiff).toBeLessThanOrEqual(5)
+            URL.revokeObjectURL(v.src)
+            done()
+          }
+        })
+    })
   })
 
   describe('events ->', function () {
@@ -100,7 +284,7 @@ describe('Movie', function () {
       etro.event.subscribe(movie, 'movie.record', function () {
         timesFired++
       })
-      movie.record().then(function () {
+      movie.record({ frameRate: 1 }).then(function () {
         expect(timesFired).toBe(1)
       })
     })

package/spec/util.spec.js

@@ -65,7 +65,7 @@ describe('Util', function () {
 
     it('should interpolate keyframes', function () {
       const elem = {
-        prop: { 0: 0, 4: 1 },
+        prop: new etro.KeyFrame([0, 0], [4, 1]),
         movie: {}, // _movie is unique, so it won't depend on existing cache
         propertyFilters: {}
       }
@@ -77,18 +77,27 @@ describe('Util', function () {
 
     it('should work with noninterpolated keyframes', function () {
       const elem = {
-        prop: { 0: 'start', 4: 'end' },
+        prop: new etro.KeyFrame([0, 'start'], [4, 'end']),
         movie: {}, // _movie is unique, so it won't depend on existing cache
         propertyFilters: {}
       }
-      expect(etro.val(elem, 'prop', 0)).toBe(elem.prop[0])
+      expect(etro.val(elem, 'prop', 0)).toBe('start')
       etro.clearCachedValues(elem.movie)
-      expect(etro.val(elem, 'prop', 3)).toBe(elem.prop[0])
+      expect(etro.val(elem, 'prop', 3)).toBe('start')
       etro.clearCachedValues(elem.movie)
-      expect(etro.val(elem, 'prop', 4)).toBe(elem.prop[4])
+      expect(etro.val(elem, 'prop', 4)).toBe('end')
       etro.clearCachedValues(elem.movie)
     })
 
+    it('should use individual interpolation methods', function () {
+      const elem = {
+        prop: new etro.KeyFrame([0, 0, etro.cosineInterp], [1, 4]),
+        movie: {},
+        propertyFilters: {}
+      }
+      expect(etro.val(elem, 'prop', 0.5)).toBe(etro.cosineInterp(0, 4, 0.5))
+    })
+
     it('should call property filters', function () {
       const elem = {
         prop: 'value',

package/src/effect/base.ts

@@ -0,0 +1,96 @@
+import { watchPublic } from '../util'
+import { publish, subscribe } from '../event'
+import { Movie } from '../movie'
+import { Visual } from '../layer/index'
+import BaseObject from '../object'
+
+/**
+ * Modifies the visual contents of a layer.
+ */
+export class Base implements BaseObject {
+  type: string
+  publicExcludes: string[]
+  propertyFilters: Record<string, <T>(value: T) => T>
+
+  enabled: boolean
+
+  private _target: Movie | Visual
+  /**
+   * 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
+   * `unshift`)
+   */
+  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
+  }
+
+  attach (target: Movie | Visual): void {
+    this._occurrenceCount++
+    this._target = target
+  }
+
+  detach (): 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
+    }
+  }
+
+  // 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 | Visual, reltime: number): void {} // eslint-disable-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
+
+  /**
+   * The current time of the target
+   */
+  get currentTime (): number {
+    return this._target ? this._target.currentTime : undefined
+  }
+
+  get parent (): Movie | Visual {
+    return this._target
+  }
+
+  get movie (): Movie {
+    return this._target ? this._target.movie : undefined
+  }
+
+  getDefaultOptions (): Record<string, unknown> {
+    return {}
+  }
+}
+// id for events (independent of instance, but easy to access when on prototype
+// chain)
+Base.prototype.type = 'effect'
+Base.prototype.publicExcludes = []
+Base.prototype.propertyFilters = {}

package/src/effect/brightness.ts

@@ -0,0 +1,43 @@
+import { Dynamic } from '../util'
+import { Shader } from './shader'
+
+export interface BrightnessOptions {
+  brightness?: Dynamic<number>
+}
+
+/**
+ * Changes the brightness
+ */
+export class Brightness extends Shader {
+  brightness: Dynamic<number>
+
+  /**
+   * @param [brightness=0] - the value to add to each pixel's color
+   * channels (between -255 and 255)
+   */
+  constructor (options: BrightnessOptions = {}) {
+    super({
+      fragmentSource: `
+        precision mediump float;
+
+        uniform sampler2D u_Source;
+        uniform float u_Brightness;
+
+        varying highp vec2 v_TextureCoord;
+
+        void main() {
+          vec4 color = texture2D(u_Source, v_TextureCoord);
+          vec3 rgb = clamp(color.rgb + u_Brightness / 255.0, 0.0, 1.0);
+          gl_FragColor = vec4(rgb, color.a);
+        }
+      `,
+      uniforms: {
+        brightness: '1f'
+      }
+    })
+    /**
+     * The value to add to each pixel's color channels (between -255 and 255)
+     */
+    this.brightness = options.brightness || 0
+  }
+}

package/src/effect/channels.ts

@@ -0,0 +1,50 @@
+import { Dynamic } from '../util'
+import { Shader } from './shader'
+
+export interface ChannelsOptions {
+  factors?: Dynamic<{
+    r?: number,
+    g?: number,
+    b?: number
+  }>
+}
+
+/**
+ * Multiplies each channel by a different factor
+ */
+export class Channels extends Shader {
+  factors: Dynamic<{
+    r?: number,
+    b?: number,
+    g?: number
+  }>
+
+  /**
+   * @param factors - channel factors, each defaulting to 1
+   */
+  constructor (options: ChannelsOptions = {}) {
+    super({
+      fragmentSource: `
+        precision mediump float;
+
+        uniform sampler2D u_Source;
+        uniform vec4 u_Factors;
+
+        varying highp vec2 v_TextureCoord;
+
+        void main() {
+          vec4 color = texture2D(u_Source, v_TextureCoord);
+          gl_FragColor = clamp(u_Factors * color, 0.0, 1.0);
+        }
+      `,
+      uniforms: {
+        factors: { type: '4fv', defaultFloatComponent: 1 }
+      }
+    })
+
+    /**
+     * Channel factors, each defaulting to 1
+     */
+    this.factors = options.factors || {}
+  }
+}

package/src/effect/chroma-key.ts

@@ -0,0 +1,82 @@
+import { Dynamic, Color } from '../util'
+import { Shader } from './shader'
+
+export interface ChromaKeyOptions {
+  target?: Dynamic<Color>
+  threshold?: Dynamic<number>
+  interpolate?: Dynamic<boolean>
+  // smoothingSharpness
+}
+
+/**
+ * Reduces alpha for pixels which are close to a specified target color
+ */
+export class ChromaKey extends Shader {
+  target: Dynamic<Color>
+  threshold: Dynamic<number>
+  interpolate: Dynamic<boolean>
+
+  /**
+   * @param [target={r: 0, g: 0, b: 0, a: 1}] - the color to remove
+   * @param [threshold=0] - how much error to allow
+   * @param [interpolate=false] - <code>true</code> to interpolate
+   * the alpha channel, or <code>false</code> value for no smoothing (i.e. an
+   * alpha of either 0 or 255)
+   */
+  // TODO: Use <code>smoothingSharpness</code>
+  constructor (options: ChromaKeyOptions = {}) {
+    super({
+      fragmentSource: `
+        precision mediump float;
+
+        uniform sampler2D u_Source;
+        uniform vec3 u_Target;
+        uniform float u_Threshold;
+        uniform bool u_Interpolate;
+
+        varying highp vec2 v_TextureCoord;
+
+        void main() {
+          vec4 color = texture2D(u_Source, v_TextureCoord);
+          float alpha = color.a;
+          vec3 dist = abs(color.rgb - u_Target / 255.0);
+          if (!u_Interpolate) {
+            // Standard way that most video editors probably use (all-or-nothing method)
+            float thresh = u_Threshold / 255.0;
+            bool transparent = dist.r <= thresh && dist.g <= thresh && dist.b <= thresh;
+            if (transparent)
+              alpha = 0.0;
+          } else {
+            /*
+             better way IMHO:
+             Take the average of the absolute differences between the pixel and the target for each channel
+             */
+            float transparency = (dist.r + dist.g + dist.b) / 3.0;
+            // TODO: custom or variety of interpolation methods
+            alpha = transparency;
+          }
+          gl_FragColor = vec4(color.rgb, alpha);
+        }
+      `,
+      uniforms: {
+        target: '3fv',
+        threshold: '1f',
+        interpolate: '1i'
+      }
+    })
+    /**
+     * The color to remove
+     */
+    this.target = options.target || new Color(0, 0, 0)
+    /**
+     * How much error to allow
+     */
+    this.threshold = options.threshold || 0
+    /**
+     * <code>true<code> to interpolate the alpha channel, or <code>false<code>
+     * for no smoothing (i.e. 255 or 0 alpha)
+     */
+    this.interpolate = options.interpolate || false
+    // this.smoothingSharpness = smoothingSharpness;
+  }
+}

package/src/effect/contrast.ts

@@ -0,0 +1,42 @@
+import { Dynamic } from '../util'
+import { Shader } from './shader'
+
+export interface ContrastOptions {
+  contrast?: Dynamic<number>
+}
+
+/**
+ * Changes the contrast by multiplying the RGB channels by a constant
+ */
+export class Contrast extends Shader {
+  contrast: Dynamic<number>
+
+  /**
+   * @param [contrast=1] - the contrast multiplier
+   */
+  constructor (options: ContrastOptions = {}) {
+    super({
+      fragmentSource: `
+        precision mediump float;
+
+        uniform sampler2D u_Source;
+        uniform float u_Contrast;
+
+        varying highp vec2 v_TextureCoord;
+
+        void main() {
+          vec4 color = texture2D(u_Source, v_TextureCoord);
+          vec3 rgb = clamp(u_Contrast * (color.rgb - 0.5) + 0.5, 0.0, 1.0);
+          gl_FragColor = vec4(rgb, color.a);
+        }
+      `,
+      uniforms: {
+        contrast: '1f'
+      }
+    })
+    /**
+     * The contrast multiplier
+     */
+    this.contrast = options.contrast || 1
+  }
+}

package/src/effect/elliptical-mask.ts

@@ -0,0 +1,75 @@
+import { Movie } from '../movie'
+import { Dynamic, val } from '../util'
+import { Base } from './base'
+import { Visual } from '../layer/index'
+
+export class EllipticalMaskOptions {
+  x: Dynamic<number>
+  y: Dynamic<number>
+  radiusX: Dynamic<number>
+  radiusY: Dynamic<number>
+  rotation?: Dynamic<number>
+  startAngle?: Dynamic<number>
+  endAngle?: Dynamic<number>
+  anticlockwise?: Dynamic<boolean>
+}
+
+/**
+ * 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 {
+  x: Dynamic<number>
+  y: Dynamic<number>
+  radiusX: Dynamic<number>
+  radiusY: Dynamic<number>
+  rotation: Dynamic<number>
+  startAngle: Dynamic<number>
+  endAngle: Dynamic<number>
+  anticlockwise: Dynamic<boolean>
+
+  private _tmpCanvas
+  private _tmpCtx
+
+  constructor (options: EllipticalMaskOptions) {
+    super()
+    this.x = options.x
+    this.y = options.y
+    this.radiusX = options.radiusX
+    this.radiusY = options.radiusY
+    this.rotation = options.rotation || 0
+    this.startAngle = options.startAngle || 0
+    this.endAngle = options.endAngle !== undefined ? options.endAngle : 2 * Math.PI
+    this.anticlockwise = options.anticlockwise || false
+    // for saving image data before clearing
+    this._tmpCanvas = document.createElement('canvas')
+    this._tmpCtx = this._tmpCanvas.getContext('2d')
+  }
+
+  apply (target: Movie | Visual, reltime: number): void {
+    const ctx = target.cctx
+    const canvas = target.canvas
+    const x = val(this, 'x', reltime)
+    const y = val(this, 'y', reltime)
+    const radiusX = val(this, 'radiusX', reltime)
+    const radiusY = val(this, 'radiusY', reltime)
+    const rotation = val(this, 'rotation', reltime)
+    const startAngle = val(this, 'startAngle', reltime)
+    const endAngle = val(this, 'endAngle', reltime)
+    const anticlockwise = val(this, 'anticlockwise', reltime)
+    this._tmpCanvas.width = target.canvas.width
+    this._tmpCanvas.height = target.canvas.height
+    this._tmpCtx.drawImage(canvas, 0, 0)
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.save() // idk how to preserve clipping state without save/restore
+    // create elliptical path and clip
+    ctx.beginPath()
+    ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)
+    ctx.closePath()
+    ctx.clip()
+    // render image with clipping state
+    ctx.drawImage(this._tmpCanvas, 0, 0)
+    ctx.restore()
+  }
+}