etro 0.8.0 → 0.8.1

package/spec/layer.spec.js

@@ -1,307 +0,0 @@
-describe('Layers', function () {
-  describe('Base', function () {
-    let layer
-
-    beforeEach(function () {
-      layer = new etro.layer.Base({ startTime: 0, duration: 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({ startTime: 0, duration: 4, background: 'blue' })
-      const movie = { width: 400, height: 400, currentTime: 0, propertyFilters: {} }
-      movie.movie = movie
-      layer.attach(movie)
-      layer.render(0)
-      // Clear cache populated by render()
-      etro.clearCachedValues(movie)
-    })
-
-    it("should use the movie's width when no layer width is given", function () {
-      const width = etro.val(layer, 'width', 0)
-      expect(width).toBe(layer.movie.width)
-    })
-
-    it("should use the movie's height when no layer height is given", function () {
-      const height = etro.val(layer, 'height', 0)
-      expect(height).toBe(layer.movie.height)
-    })
-
-    it('should use the width if provided', function () {
-      layer.width = 4
-      const width = etro.val(layer, 'width', 0)
-      expect(width).toBe(4)
-    })
-
-    it('should use the height if provided', function () {
-      layer.height = 4
-      const height = etro.val(layer, 'height', 0)
-      expect(height).toBe(4)
-    })
-
-    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)
-    })
-
-    it('should call `attach` when an effect is added', function () {
-      const effect = new etro.effect.Base()
-      spyOn(effect, 'attach')
-      layer.effects.push(effect)
-      expect(effect.attach).toHaveBeenCalled()
-    })
-
-    it('should call `detach` when an effect is removed', function () {
-      const effect = new etro.effect.Base()
-      layer.effects.push(effect)
-      spyOn(effect, 'detach')
-      layer.effects.pop()
-      expect(effect.detach).toHaveBeenCalled()
-    })
-
-    it('should call `detach` when an effect is replaced', function () {
-      const effect = new etro.effect.Base()
-      layer.effects.push(effect)
-      spyOn(effect, 'detach')
-      layer.effects[0] = new etro.effect.Base()
-      expect(effect.detach).toHaveBeenCalled()
-    })
-  })
-
-  describe('VisualSource', function () {
-    const CustomVisualSource = etro.layer.VisualSourceMixin(etro.layer.Visual)
-    let layer
-
-    beforeEach(function (done) {
-      const image = new Image()
-      image.src = '/base/spec/assets/layer/image.jpg'
-      image.onload = () => {
-        layer = new CustomVisualSource({ startTime: 0, duration: 4, source: image })
-        // Simulate attach to movie
-        const movie = { width: image.width, height: image.height, currentTime: 0, propertyFilters: [] }
-        movie.movie = movie
-        layer.attach(movie)
-        done()
-      }
-    })
-
-    it("should use the image source's width when no sourceWidth is provided", function () {
-      const sourceWidth = etro.val(layer, 'sourceWidth', 0)
-      expect(sourceWidth).toBe(layer.source.width)
-    })
-
-    it("should use the image source's height when no sourceHeight is provided", function () {
-      const sourceHeight = etro.val(layer, 'sourceHeight', 0)
-      expect(sourceHeight).toBe(layer.source.height)
-    })
-
-    it('should use sourceWidth when no destWidth is provided', function () {
-      const destWidth = etro.val(layer, 'destWidth', 0)
-      const sourceWidth = etro.val(layer, 'sourceWidth', 0)
-      expect(destWidth).toBe(sourceWidth)
-    })
-
-    it('should use sourceHeight when no destHeight is provided', function () {
-      const destHeight = etro.val(layer, 'destHeight', 0)
-      const sourceHeight = etro.val(layer, 'sourceHeight', 0)
-      expect(destHeight).toBe(sourceHeight)
-    })
-
-    it('should use destWidth when no width is provided', function () {
-      const width = etro.val(layer, 'width', 0)
-      const destWidth = etro.val(layer, 'destWidth', 0)
-      expect(width).toBe(destWidth)
-    })
-
-    it('should use destHeight when no height is provided', function () {
-      const height = etro.val(layer, 'height', 0)
-      const destHeight = etro.val(layer, 'destHeight', 0)
-      expect(height).toBe(destHeight)
-    })
-
-    it('should render', function () {
-      // Render layer (actual outcome)
-      layer.render(0)
-      const width = etro.val(layer, 'width', 0)
-      const height = etro.val(layer, 'height', 0)
-      const imageData = layer.cctx.getImageData(0, 0, width, height)
-
-      // Draw image (expected outcome)
-      const testCanv = document.createElement('canvas')
-      testCanv.width = width
-      testCanv.height = height
-      const testCtx = testCanv.getContext('2d')
-      testCtx.drawImage(layer.source, 0, 0, width, height)
-      const testImageData = testCtx.getImageData(0, 0, width, 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)
-    })
-
-    it('should scale with `imageWidth` and `imageHeight`', function () {
-      const resizedLayer = new etro.layer.Image({
-        startTime: 0,
-        duration: 1,
-        source: layer.source,
-        destWidth: 100,
-        destHeight: 100
-      })
-
-      // Render layer (actual outcome)
-      const movie = {}
-      resizedLayer.attach(movie)
-      resizedLayer.render(0)
-      const imageData = resizedLayer.cctx.getImageData(0, 0, resizedLayer.destWidth, resizedLayer.destHeight)
-
-      // Draw image (expected outcome)
-      const testCanv = document.createElement('canvas')
-      testCanv.width = resizedLayer.destWidth
-      testCanv.height = resizedLayer.destHeight
-      const testCtx = testCanv.getContext('2d')
-      testCtx.drawImage(layer.source, 0, 0, resizedLayer.destWidth, resizedLayer.destHeight)
-      const testImageData = testCtx.getImageData(0, 0, resizedLayer.destWidth, resizedLayer.destHeight)
-
-      // Compare expected outcome with actual outcome
-      expect(imageData.data).toEqual(testImageData.data)
-    })
-
-    it('should be cropped to the clip with and height', function () {
-      const newLayer = new etro.layer.Image({
-        startTime: 0,
-        duration: 1,
-        source: layer.source,
-        sourceWidth: 2,
-        sourceHeight: 3
-      })
-
-      // Render layer (actual outcome)
-      const movie = {}
-      newLayer.attach(movie)
-      newLayer.render(0)
-      const imageData = newLayer.cctx.getImageData(
-        0, 0, newLayer.sourceWidth, newLayer.sourceHeight
-      )
-
-      // Draw image (expected outcome)
-      // testCanv will contain the part of the layer with the image.
-      const testCanv = document.createElement('canvas')
-      testCanv.width = newLayer.sourceWidth
-      testCanv.height = newLayer.sourceHeight
-      const testCtx = testCanv.getContext('2d')
-      testCtx.drawImage(
-        layer.source,
-        0, 0,
-        newLayer.sourceWidth, newLayer.sourceHeight,
-        0, 0,
-        newLayer.sourceWidth, newLayer.sourceHeight
-      )
-      const testImageData = testCtx.getImageData(0, 0, newLayer.sourceWidth, newLayer.sourceHeight)
-
-      // Compare expected image data with actual image data
-      expect(imageData.data).toEqual(testImageData.data)
-    })
-  })
-
-  describe('Media', function () {
-    let layer
-    // Media is an abstract mixin, so make a concrete subclass here.
-    const CustomMedia = etro.layer.AudioSourceMixin(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({ startTime: 0, source })
-    })
-
-    it('should update its currentTime when the movie seeks', function () {
-      const movie = {
-        actx: new AudioContext(),
-        currentTime: 2 // not 0
-      }
-      layer.attach(movie)
-      etro.event.publish(movie, 'movie.seek', {})
-      expect(layer.currentTime).toBe(2)
-    })
-
-    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.source.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,346 +0,0 @@
-describe('Movie', function () {
-  let movie, canvas
-
-  beforeEach(function () {
-    if (canvas) {
-      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)
-    /*
-     * 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 () {
-    it("should be of type 'movie'", function () {
-      expect(movie.type).toBe('movie')
-    })
-  })
-
-  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()
-      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({ frameRate: 10 })
-      expect(movie.recording).toBe(true)
-    })
-
-    it('should not be paused when recording', function () {
-      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({ frameRate: 60 })
-        .then(video => {
-          expect(video.size).toBeGreaterThan(0)
-          done()
-        })
-        .catch(e => {
-          throw e
-        })
-    })
-
-    it('can record with custom MIME type', function (done) {
-      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 () {
-    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({ frameRate: 1 }).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)
-      })
-    })
-  })
-})