etro 0.6.0

package/spec/effect.spec.js

@@ -0,0 +1,352 @@
+const RED = new Uint8ClampedArray([255, 0, 0, 255])
+const BLUE = new Uint8ClampedArray([0, 0, 255, 255])
+
+const clamp = (x, a, b) => Math.max(Math.min(x, b), a)
+
+function createPixel (colorData) {
+  // Create 1x1 canvas and set pixel to red
+  const ctx = document.createElement('canvas')
+    .getContext('2d')
+  ctx.canvas.width = ctx.canvas.height = 1
+  const imageData = ctx.createImageData(1, 1)
+  for (let i = 0; i < imageData.data.length; i++) {
+    imageData.data[i] = colorData[i]
+  }
+  ctx.putImageData(imageData, 0, 0)
+
+  return ctx
+}
+
+/**
+ * Create a square canvas with random opaque noise
+ * @param {number} size the width and height
+ * @return {TestCanvas}
+ *
+ * @typedef {Object} TestCanvas
+ * @property {CanvasRenderingContext2D} ctx
+ * @property {ImageData} imageData
+ */
+function createRandomCanvas (size) {
+  const ctx = document.createElement('canvas')
+    .getContext('2d')
+  ctx.canvas.width = ctx.canvas.height = size
+  // Create a grid of random colors
+  const imageData = ctx.createImageData(ctx.canvas.width, ctx.canvas.height)
+  // opaque so premultiplied alpha won't mess up the rgb comparisons
+  const data = imageData.data.map((_, i) => i % 4 === 3 ? 255 : Math.floor(256 * Math.random()))
+  for (let i = 0; i < data.length; i++) {
+    imageData.data[i] = data[i]
+  }
+  ctx.putImageData(imageData, 0, 0)
+
+  return { ctx, imageData }
+}
+
+function getImageData (path, targetCanvas = undefined) {
+  return new Promise(resolve => {
+    targetCanvas = targetCanvas || document.createElement('canvas')
+    const img = new Image()
+    img.onload = () => {
+      targetCanvas.width = img.width
+      targetCanvas.height = img.height
+      const ctx = targetCanvas.getContext('2d')
+      ctx.drawImage(img, 0, 0)
+      resolve(ctx.getImageData(0, 0, img.width, img.height))
+    }
+    img.src = 'base/spec/assets/effect/' + path
+  })
+}
+
+function copyCanvas (source) {
+  const dest = document.createElement('canvas')
+  dest.width = source.width
+  dest.height = source.height
+  dest.getContext('2d')
+    .drawImage(source, 0, 0)
+  return dest
+}
+
+function compareImageData (original, effect, path) {
+  return new Promise(resolve => {
+    const result = copyCanvas(original)
+    const ctx = result.getContext('2d')
+    effect.apply({ canvas: result, cctx: ctx, movie: new etro.Movie(dummyCanvas) }) // movie should be unique, to prevent caching!
+    const actual = ctx.getImageData(0, 0, result.width, result.height)
+
+    getImageData(path).then(expected => {
+      expect(actual).toEqual(expected)
+      resolve()
+    })
+  })
+}
+
+/*
+ * Don't reload the original image for each test, just once;
+ * However, Jasmine will exit if we don't start the tests synchronously
+ * So, start them, and then wait for the original image to load in the
+ * test
+ */
+const whenOriginalLoaded = (() => {
+  const original = document.createElement('canvas')
+  const loadedCallbacks = []
+  let loaded = false
+  getImageData('original.png', original).then(data => {
+    loaded = true
+    loadedCallbacks.forEach(callback => callback(original))
+  })
+
+  function whenOriginalLoaded (callback) {
+    if (!loaded) {
+      loadedCallbacks.push(callback)
+    } else {
+      callback(original)
+    }
+  }
+  return whenOriginalLoaded
+})()
+
+const dummyCanvas = document.createElement('canvas')
+
+/* TESTS */
+
+describe('Effects', function () {
+  describe('Base', function () {
+    let effect
+
+    beforeEach(function () {
+      effect = new etro.effect.Base(0, 3)
+    })
+
+    it("should be of type 'effect'", function () {
+      expect(effect.type).toBe('effect')
+    })
+
+    it('should set _target when attached', function () {
+      const movie = {}
+      effect.attach(movie)
+      expect(effect._target).toBe(movie)
+    })
+  })
+
+  describe('Stack', function () {
+    let effects, stack
+
+    beforeEach(function () {
+      effects = [
+        new etro.effect.Brightness(10),
+        new etro.effect.Contrast(1.5)
+      ]
+      stack = new etro.effect.Stack(effects)
+      stack.attach(new etro.Movie(dummyCanvas))
+    })
+
+    it('should attach its children to the target when attached', function () {
+      expect(effects.every(child => child._target === stack._target)).toBe(true)
+    })
+
+    it('should be the same as applying individual effects', function () {
+      const original = createRandomCanvas(4).ctx.canvas
+      const result = copyCanvas(original)
+      const resultCtx = result.getContext('2d')
+
+      effects.forEach(effect => effect.apply({
+        canvas: result, cctx: resultCtx, movie: new etro.Movie(dummyCanvas)
+      }))
+      const expected = resultCtx.getImageData(0, 0, result.width, result.height)
+
+      resultCtx.drawImage(original, 0, 0) // reset
+      stack.apply({
+        canvas: result, cctx: resultCtx, movie: new etro.Movie(dummyCanvas)
+      })
+      const actual = resultCtx.getImageData(0, 0, result.width, result.height)
+      expect(actual).toEqual(expected)
+    })
+  })
+
+  describe('Shader', function () {
+    let effect
+
+    beforeEach(function () {
+      effect = new etro.effect.Shader()
+      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+    })
+
+    it('should construct', function () {})
+
+    it('should not change the target if no arguments are passed', function () {
+      const { ctx, imageData: originalData } = createRandomCanvas(2)
+      // apply effect to a fake layer containing `ctx`
+      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: new etro.Movie(dummyCanvas) })
+      // Verify no change
+      const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height)
+      expect(imageData).toEqual(originalData)
+    })
+  })
+
+  describe('Brightness', function () {
+    it('should change the brightness', function () {
+      const effect = new etro.effect.Brightness(5)
+      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const ctx = createPixel(RED)
+      // Apply effect to a fake layer containing `ctx`
+      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: new etro.Movie(dummyCanvas) })
+      // Verify brightness changed
+      const imageData = ctx.getImageData(0, 0, 1, 1)
+      expect(imageData.data).toEqual(RED.map((c, i) => c % 4 === 3 ? c
+        : clamp(c + effect.brightness, 0, 255)))
+    })
+  })
+
+  describe('Contrast', function () {
+    it('should change the contrast', function () {
+      const effect = new etro.effect.Contrast(5)
+      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const ctx = createPixel(RED)
+      // Apply effect to a fake layer containing `ctx`
+      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: new etro.Movie(dummyCanvas) })
+      // Verify brightness changed
+      const imageData = ctx.getImageData(0, 0, 1, 1)
+      expect(imageData.data).toEqual(RED.map((c, i) => c % 4 === 3 ? c
+        : Math.round(clamp(effect.contrast * (c - 255 / 2), 0, 255))))
+    })
+  })
+
+  describe('Channels', function () {
+    it('should multiply each channel by a constant', function () {
+      const effect = new etro.effect.Channels({ r: 0.5, g: 1.25, b: 2 })
+      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const ctx = createPixel(RED)
+      // Apply effect to a fake layer containing `ctx`
+      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: new etro.Movie(dummyCanvas) })
+      // Verify brightness changed
+      const imageData = ctx.getImageData(0, 0, 1, 1)
+      expect(imageData.data).toEqual(new Uint8ClampedArray([
+        Math.floor((effect.factors.r || 1) * RED[0]),
+        Math.floor((effect.factors.g || 1) * RED[1]),
+        Math.floor((effect.factors.b || 1) * RED[2]),
+        Math.floor((effect.factors.a || 1) * RED[3])
+      ]))
+    })
+  })
+
+  describe('ChromaKey', function () {
+    let effect
+
+    beforeEach(function () {
+      effect = new etro.effect.ChromaKey({ r: 250 }, 5) // will hit r=255, because threshold is 5
+      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+    })
+
+    it('should make the target color transparent', function () {
+      const ctx = createPixel(RED)
+      // Apply effect to a fake layer containing `ctx`
+      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: new etro.Movie(dummyCanvas) })
+      // Verify brightness changed
+      const imageData = ctx.getImageData(0, 0, 1, 1)
+      const alpha = imageData.data[3]
+      expect(alpha).toBe(0)
+    })
+
+    it('should not make other colors transparent', function () {
+      const ctx = createPixel(BLUE)
+      // Apply effect to a fake layer containing `ctx`
+      effect.apply({ canvas: ctx.canvas, cctx: ctx, movie: new etro.Movie(dummyCanvas) })
+      // Verify brightness changed
+      const imageData = ctx.getImageData(0, 0, 1, 1)
+      const alpha = imageData.data[3]
+      expect(alpha).toBe(255)
+    })
+  })
+
+  describe('GaussianBlurHorizontal', function () {
+    it('should blur with 5-pixel radius', function (done) {
+      const effect = new etro.effect.GaussianBlurHorizontal(5)
+      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const path = 'gaussian-blur-horizontal.png'
+      whenOriginalLoaded(original =>
+        compareImageData(original, effect, path).then(done))
+    })
+  })
+
+  describe('GaussianBlurVertical', function () {
+    it('should blur with 5-pixel radius', function (done) {
+      const effect = new etro.effect.GaussianBlurVertical(5)
+      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const path = 'gaussian-blur-vertical.png'
+      whenOriginalLoaded(original =>
+        compareImageData(original, effect, path).then(done))
+    })
+  })
+
+  describe('Pixelate', function () {
+    it('should decimate to 3-pixel texels', function (done) {
+      const effect = new etro.effect.Pixelate(3)
+      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const path = 'pixelate.png'
+      whenOriginalLoaded(original =>
+        compareImageData(original, effect, path).then(done))
+    })
+  })
+
+  describe('Transform', function () {
+    it('should translate', function (done) {
+      const effect = new etro.effect.Transform(
+        new etro.effect.Transform.Matrix().translate(-3, 5)
+      )
+      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const path = 'transform/translate.png'
+      whenOriginalLoaded(original =>
+        compareImageData(original, effect, path).then(done))
+    })
+
+    it('should translate by non-integers', function (done) {
+      const effect = new etro.effect.Transform(
+        new etro.effect.Transform.Matrix().translate(0.5, 0.5)
+      )
+      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const path = 'transform/translate-fraction.png'
+      whenOriginalLoaded(original =>
+        compareImageData(original, effect, path).then(done))
+    })
+
+    it('should scale', function (done) {
+      const effect = new etro.effect.Transform(
+        new etro.effect.Transform.Matrix().scale(2, 2)
+      )
+      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const path = 'transform/scale.png'
+      whenOriginalLoaded(original =>
+        compareImageData(original, effect, path).then(done))
+    })
+
+    it('should scale by non-integers', function (done) {
+      const effect = new etro.effect.Transform(
+        new etro.effect.Transform.Matrix().scale(0.5, 0.5)
+      )
+      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const path = 'transform/scale-fraction.png'
+      whenOriginalLoaded(original =>
+        compareImageData(original, effect, path).then(done))
+    })
+
+    it('should rotate', function (done) {
+      const effect = new etro.effect.Transform(
+        new etro.effect.Transform.Matrix().rotate(Math.PI / 6)
+      )
+      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const path = 'transform/rotate.png'
+      whenOriginalLoaded(original =>
+        compareImageData(original, effect, path).then(done))
+    })
+
+    it('should multiply together', function (done) {
+      const effect = new etro.effect.Transform(
+        new etro.effect.Transform.Matrix().scale(2, 2)
+          .multiply(new etro.effect.Transform.Matrix().translate(-3, 5)))
+      effect._target = new etro.Movie(dummyCanvas) // so val doesn't break because it can't cache (it requires a movie)
+      const path = 'transform/multiply.png'
+      whenOriginalLoaded(original =>
+        compareImageData(original, effect, path).then(done))
+    })
+  })
+})

package/spec/event.spec.js

@@ -0,0 +1,25 @@
+describe('Events', function () {
+  it('should trigger subscribers', function () {
+    const o = {}
+
+    const types = ['foo.bar.test', 'foo.bar', 'foo']
+    types.forEach(type => {
+      etro.event.subscribe(o, type, event => {
+        expect(event.target).toEqual(o)
+        notified.push(type)
+      })
+    })
+
+    let notified = []
+    etro.event.publish(o, 'foo.bar.test', {})
+    expect(notified).toEqual(types)
+
+    notified = []
+    etro.event.publish(o, 'foo.bar', {})
+    expect(notified).toEqual(types.slice(1))
+
+    notified = []
+    etro.event.publish(o, 'foo', {})
+    expect(notified).toEqual(types.slice(2))
+  })
+})

package/spec/layer.spec.js

@@ -0,0 +1,128 @@
+describe('Layers', function () {
+  describe('Base', function () {
+    let layer
+
+    beforeEach(function () {
+      layer = new etro.layer.Base(0, 4)
+    })
+
+    it("should be of type 'layer'", function () {
+      expect(layer.type).toBe('layer')
+    })
+
+    it('should attach to movie', function () {
+      const movie = {}
+      // Simulate attach to movie
+      layer.attach(movie)
+      expect(layer._movie).toEqual(movie)
+    })
+
+    it('should propogate changes up', function () {
+      // Connect to movie to publish event to
+      const movie = {}
+      layer.attach(movie)
+
+      // Listen for event called on moive
+      let timesFired = 0
+      etro.event.subscribe(movie, 'movie.change.layer', () => {
+        timesFired++
+      })
+      // Modify layer
+      layer.startTime = 1
+      expect(timesFired).toBe(1)
+    })
+  })
+
+  describe('Visual', function () {
+    let layer
+
+    beforeEach(function () {
+      layer = new etro.layer.Visual(0, 4, { background: 'blue' })
+      layer.attach(
+        { width: 400, height: 400, currentTime: 0, movie: {}, propertyFilters: {} }
+      )
+      layer.render(0)
+    })
+
+    it('should render the background', function () {
+      const imageData = layer.cctx.getImageData(0, 0, 400, 400)
+      let allBlue = true
+      for (let i = 0; i < imageData.data.length; i += 4) {
+        allBlue = allBlue &&
+          imageData.data[i + 0] === 0 &&
+          imageData.data[i + 1] === 0 &&
+          imageData.data[i + 2] === 255 &&
+          imageData.data[i + 3] === 255
+      }
+      expect(allBlue).toBe(true)
+    })
+  })
+
+  describe('Image', function () {
+    let layer
+
+    beforeEach(function (done) {
+      const image = new Image()
+      image.src = '/base/spec/assets/layer/image.jpg'
+      image.onload = () => {
+        layer = new etro.layer.Image(0, 4, image)
+        // Simulate attach to movie
+        layer.attach(
+          { width: image.width, height: image.height, currentTime: 0 }
+        )
+        done()
+      }
+    })
+
+    it('should render', function () {
+      // Render layer (actual outcome)
+      layer.render(0)
+      const imageData = layer.cctx.getImageData(0, 0, layer.width, layer.height)
+
+      // Draw image (expected outcome)
+      const testCanv = document.createElement('canvas')
+      testCanv.width = layer.width
+      testCanv.height = layer.height
+      const testCtx = testCanv.getContext('2d')
+      testCtx.drawImage(layer.image, 0, 0, layer.width, layer.height)
+      const testImageData = testCtx.getImageData(0, 0, layer.width, layer.height)
+
+      // Compare expected outcome with actual outcome
+      let equal = true
+      for (let i = 0; i < imageData.data.length; i++) {
+        equal = equal && imageData.data[i] === testImageData.data[i]
+      }
+      expect(equal).toBe(true)
+    })
+  })
+
+  // I suspect this doesn't work becuase of autoplay restrictions
+  /* describe('Audio', function () {
+    let layer
+
+    beforeEach(function (done) {
+      const audio = new Audio()
+      audio.src = '/base/spec/assets/layer/audio.wav'
+      // audio.muted = true // until we figure out how to allow autoplay in headless chrome
+      audio.addEventListener('loadedmetadata', () => {
+        layer = new etro.layer.Audio(0, audio)
+        layer.attach(
+          { actx: new AudioContext(), currentTime: 0 }
+        )
+        done()
+      })
+    })
+
+    it('should play', function () {
+      let timesPlayed = 0
+      layer.media.addEventListener('play', () => {
+        timesPlayed++
+      })
+      for (let i = 0; i < 3; i++) {
+        layer.start(0) // reltime = 0s
+        layer.stop(0) // reltime = 0s
+      }
+      expect(timesPlayed).toBe(3)
+    })
+  }) */
+})

package/spec/movie.spec.js

@@ -0,0 +1,154 @@
+describe('Movie', function () {
+  let movie, canvas
+
+  beforeEach(function () {
+    if (canvas) {
+      document.body.removeChild(canvas)
+    }
+    canvas = document.createElement('canvas')
+    document.body.appendChild(canvas)
+    movie = new etro.Movie(canvas)
+    movie.addLayer(new etro.layer.Visual(0, 0.5))
+  })
+
+  describe('identity ->', function () {
+    it("should be of type 'movie'", function () {
+      expect(movie.type).toBe('movie')
+    })
+  })
+
+  describe('operations ->', function () {
+    it('should not be paused after playing', function () {
+      movie.play()
+      expect(movie.paused).toBe(false)
+    })
+
+    it('should be paused after pausing', function () {
+      movie.play()
+      movie.pause()
+      // No promise returned by `pause`, because code is async in implementation.
+      expect(movie.paused).toBe(true)
+    })
+
+    it('should be paused after stopping', function () {
+      movie.play()
+      movie.stop()
+      expect(movie.paused).toBe(true)
+    })
+
+    it('should be reset to beginning after stopping', function () {
+      movie.play()
+      movie.stop()
+      expect(movie.currentTime).toBe(0)
+    })
+
+    it('should be `recording` when recording', function () {
+      movie.record(10)
+      expect(movie.recording).toBe(true)
+    })
+
+    it('should not be paused when recording', function () {
+      movie.record(10)
+      expect(movie.paused).toBe(false)
+    })
+
+    it('should return blob after recording', function (done) {
+      movie.record(60)
+        .then(video => {
+          expect(video.size).toBeGreaterThan(0)
+          done()
+        })
+        .catch(e => {
+          throw e
+        })
+    })
+  })
+
+  describe('events ->', function () {
+    it("should fire 'movie.play' once", function () {
+      let timesFired = 0
+      etro.event.subscribe(movie, 'movie.play', function () {
+        timesFired++
+      })
+      movie.play().then(function () {
+        expect(timesFired).toBe(1)
+      })
+    })
+
+    it("should fire 'movie.pause' once", function () {
+      let timesFired = 0
+      etro.event.subscribe(movie, 'movie.pause', function () {
+        timesFired++
+      })
+      // play, pause and check if event was fired
+      movie.play().then(function () {
+        movie.pause()
+        expect(timesFired).toBe(1)
+      })
+    })
+
+    it("should fire 'movie.record' once", function () {
+      let timesFired = 0
+      etro.event.subscribe(movie, 'movie.record', function () {
+        timesFired++
+      })
+      movie.record().then(function () {
+        expect(timesFired).toBe(1)
+      })
+    })
+
+    it("should fire 'movie.record' with correct options", function () {
+      const options = {
+        video: true, // even default values should be passed (exactly what user provides)
+        audio: false
+      }
+      etro.event.subscribe(movie, 'movie.record', function (event) {
+        expect(event.options).toEqual(options)
+      })
+      movie.record(options)
+    })
+
+    it("should fire 'movie.ended'", function () {
+      let timesFired = 0
+      etro.event.subscribe(movie, 'movie.ended', function () {
+        timesFired++
+      })
+      movie.play().then(function () {
+        expect(timesFired).toBe(1)
+      })
+    })
+
+    it("should fire 'movie.loadeddata'", function () {
+      /*
+       * 'loadeddata' gets timesFired when when the frame is fully loaded
+       */
+
+      let firedOnce = false
+      etro.event.subscribe(movie, 'movie.loadeddata', () => {
+        firedOnce = true
+      })
+      movie.refresh().then(() => {
+        expect(firedOnce).toBe(true)
+      })
+    })
+
+    it("should fire 'movie.seek'", function () {
+      let timesFired = 0
+      etro.event.subscribe(movie, 'movie.seek', function () {
+        timesFired++
+      })
+      movie.currentTime = movie.duration / 2
+      expect(timesFired).toBe(1)
+    })
+
+    it("should fire 'movie.timeupdate'", function () {
+      let firedOnce = false
+      etro.event.subscribe(movie, 'movie.timeupdate', function () {
+        firedOnce = true
+      })
+      movie.play().then(function () {
+        expect(firedOnce).toBe(true)
+      })
+    })
+  })
+})