etro 0.7.0 → 0.8.2

package/spec/effect.spec.js

@@ -1,352 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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)
-    })
-  })
-
-  describe('Media', function () {
-    let layer
-    // Media is an abstract mixin, so make a concrete subclass here.
-    const CustomMedia = etro.layer.MediaMixin(etro.layer.Base)
-    const source = new Audio()
-
-    beforeAll(function (done) {
-      source.addEventListener('canplay', done)
-      source.src = '/base/spec/assets/layer/audio.wav'
-    })
-
-    beforeEach(function () {
-      layer = new CustomMedia(0, source)
-    })
-
-    it('should have its duration depend on its playbackRate', function () {
-      const oldDuration = layer.duration
-      layer.playbackRate = 2
-      expect(layer.duration).toBe(oldDuration / 2)
-    })
-  })
-
-  // 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

@@ -1,162 +0,0 @@
-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
-        })
-    })
-
-    it('can record with custom MIME type', function (done) {
-      movie.record(60, { type: 'video/mp4' })
-        .then(video => {
-          expect(video.type).toBe('video/mp4')
-          done()
-        })
-    })
-  })
-
-  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)
-      })
-    })
-  })
-})