npm - etro - Versions diffs - 0.6.0 - Mend

etro 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (103) hide show

package/.env +2 -0
package/.github/workflows/nodejs.yml +27 -0
package/CHANGELOG.md +109 -0
package/CODE_OF_CONDUCT.md +77 -0
package/CONTRIBUTING.md +155 -0
package/LICENSE +674 -0
package/README.md +57 -0
package/dist/etro.js +3397 -0
package/docs/effect.js.html +1215 -0
package/docs/event.js.html +145 -0
package/docs/index.html +81 -0
package/docs/index.js.html +92 -0
package/docs/layer.js.html +888 -0
package/docs/module-effect-GaussianBlurComponent.html +345 -0
package/docs/module-effect.Brightness.html +339 -0
package/docs/module-effect.Channels.html +319 -0
package/docs/module-effect.ChromaKey.html +611 -0
package/docs/module-effect.Contrast.html +339 -0
package/docs/module-effect.EllipticalMask.html +200 -0
package/docs/module-effect.GaussianBlur.html +202 -0
package/docs/module-effect.GaussianBlurHorizontal.html +242 -0
package/docs/module-effect.GaussianBlurVertical.html +242 -0
package/docs/module-effect.Pixelate.html +330 -0
package/docs/module-effect.Shader.html +1227 -0
package/docs/module-effect.Stack.html +406 -0
package/docs/module-effect.Transform.Matrix.html +193 -0
package/docs/module-effect.Transform.html +1174 -0
package/docs/module-effect.html +148 -0
package/docs/module-event.html +473 -0
package/docs/module-index.html +186 -0
package/docs/module-layer-Media.html +1116 -0
package/docs/module-layer-MediaMixin.html +164 -0
package/docs/module-layer.Audio.html +1188 -0
package/docs/module-layer.Base.html +629 -0
package/docs/module-layer.Image.html +1421 -0
package/docs/module-layer.Text.html +1731 -0
package/docs/module-layer.Video.html +1938 -0
package/docs/module-layer.Visual.html +1698 -0
package/docs/module-layer.html +137 -0
package/docs/module-movie.html +3118 -0
package/docs/module-util.Color.html +702 -0
package/docs/module-util.Font.html +395 -0
package/docs/module-util.html +845 -0
package/docs/movie.js.html +689 -0
package/docs/scripts/collapse.js +20 -0
package/docs/scripts/linenumber.js +25 -0
package/docs/scripts/nav.js +12 -0
package/docs/scripts/polyfill.js +4 -0
package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
package/docs/scripts/prettify/lang-css.js +2 -0
package/docs/scripts/prettify/prettify.js +28 -0
package/docs/scripts/search.js +83 -0
package/docs/styles/jsdoc.css +671 -0
package/docs/styles/prettify.css +79 -0
package/docs/util.js.html +503 -0
package/eslint.conf.js +28 -0
package/eslint.test-conf.js +4 -0
package/examples/application/readme-screenshot.html +86 -0
package/examples/application/video-player.html +131 -0
package/examples/application/webcam.html +28 -0
package/examples/introduction/audio.html +52 -0
package/examples/introduction/effects.html +56 -0
package/examples/introduction/export.html +70 -0
package/examples/introduction/functions.html +35 -0
package/examples/introduction/hello-world1.html +33 -0
package/examples/introduction/hello-world2.html +32 -0
package/examples/introduction/keyframes.html +67 -0
package/examples/introduction/media.html +55 -0
package/examples/introduction/text.html +27 -0
package/jsdoc.conf.json +3 -0
package/karma.conf.js +60 -0
package/package.json +63 -0
package/private-todo.txt +70 -0
package/rename-file.sh +18 -0
package/rename-versions.sh +14 -0
package/rename.sh +22 -0
package/rollup.config.js +31 -0
package/screenshots/2019-08-17_0.png +0 -0
package/scripts/gen-effect-samples.html +99 -0
package/scripts/save-effect-samples.js +43 -0
package/spec/assets/effect/gaussian-blur-horizontal.png +0 -0
package/spec/assets/effect/gaussian-blur-vertical.png +0 -0
package/spec/assets/effect/original.png +0 -0
package/spec/assets/effect/pixelate.png +0 -0
package/spec/assets/effect/transform/multiply.png +0 -0
package/spec/assets/effect/transform/rotate.png +0 -0
package/spec/assets/effect/transform/scale-fraction.png +0 -0
package/spec/assets/effect/transform/scale.png +0 -0
package/spec/assets/effect/transform/translate-fraction.png +0 -0
package/spec/assets/effect/transform/translate.png +0 -0
package/spec/assets/layer/audio.wav +0 -0
package/spec/assets/layer/image.jpg +0 -0
package/spec/effect.spec.js +352 -0
package/spec/event.spec.js +25 -0
package/spec/layer.spec.js +128 -0
package/spec/movie.spec.js +154 -0
package/spec/util.spec.js +285 -0
package/src/effect.js +1265 -0
package/src/event.js +78 -0
package/src/index.js +23 -0
package/src/layer.js +875 -0
package/src/movie.js +636 -0
package/src/util.js +487 -0

package/docs/movie.js.html ADDED Viewed

@@ -0,0 +1,689 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>movie.js - Documentation</title>
+    <script src="scripts/prettify/prettify.js"></script>
+    <script src="scripts/prettify/lang-css.js"></script>
+    <!--[if lt IE 9]>
+      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
+    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
+    <script src="scripts/nav.js" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+<input type="checkbox" id="nav-trigger" class="nav-trigger" />
+<label for="nav-trigger" class="navicon-button x">
+  <div class="navicon"></div>
+</label>
+<label for="nav-trigger" class="overlay"></label>
+<nav >
+    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="module-effect.Brightness.html">Brightness</a></li><li><a href="module-effect.Channels.html">Channels</a></li><li><a href="module-effect.ChromaKey.html">ChromaKey</a></li><li><a href="module-effect.Contrast.html">Contrast</a></li><li><a href="module-effect.EllipticalMask.html">EllipticalMask</a></li><li><a href="module-effect.GaussianBlur.html">GaussianBlur</a></li><li><a href="module-effect.GaussianBlurHorizontal.html">GaussianBlurHorizontal</a></li><li><a href="module-effect.GaussianBlurVertical.html">GaussianBlurVertical</a></li><li><a href="module-effect.Pixelate.html">Pixelate</a></li><li><a href="module-effect.Shader.html">Shader</a><ul class='methods'><li data-type='method'><a href="module-effect.Shader.html#._initBuffer">_initBuffer</a></li><li data-type='method'><a href="module-effect.Shader.html#._loadTexture">_loadTexture</a></li><li data-type='method'><a href="module-effect.Shader.html#_prepareValue">_prepareValue</a></li></ul></li><li><a href="module-effect.Stack.html">Stack</a><ul class='methods'><li data-type='method'><a href="module-effect.Stack.html#addEffect">addEffect</a></li></ul></li><li><a href="module-effect.Transform.html">Transform</a><ul class='methods'><li data-type='method'><a href="module-effect.Transform.html#.Matrix#cell">Matrix#cell</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#multiply">Matrix#multiply</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#rotate">Matrix#rotate</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#scale">Matrix#scale</a></li><li data-type='method'><a href="module-effect.Transform.html#.Matrix#translate">Matrix#translate</a></li></ul></li><li><a href="module-effect.Transform.Matrix.html">Matrix</a></li><li><a href="module-effect-GaussianBlurComponent.html">GaussianBlurComponent</a></li><li><a href="module-layer.Audio.html">Audio</a></li><li><a href="module-layer.Base.html">Base</a><ul class='methods'><li data-type='method'><a href="module-layer.Base.html#_render">_render</a></li></ul></li><li><a href="module-layer.Image.html">Image</a></li><li><a href="module-layer.Text.html">Text</a></li><li><a href="module-layer.Video.html">Video</a></li><li><a href="module-layer.Visual.html">Visual</a><ul class='methods'><li data-type='method'><a href="module-layer.Visual.html#_render">_render</a></li><li data-type='method'><a href="module-layer.Visual.html#addEffect">addEffect</a></li></ul></li><li><a href="module-layer-Media.html">Media</a></li><li><a href="module-movie.html">movie</a><ul class='methods'><li data-type='method'><a href="module-movie.html#addEffect">addEffect</a></li><li data-type='method'><a href="module-movie.html#addLayer">addLayer</a></li><li data-type='method'><a href="module-movie.html#pause">pause</a></li><li data-type='method'><a href="module-movie.html#play">play</a></li><li data-type='method'><a href="module-movie.html#publishToLayers">publishToLayers</a></li><li data-type='method'><a href="module-movie.html#record">record</a></li><li data-type='method'><a href="module-movie.html#refresh">refresh</a></li><li data-type='method'><a href="module-movie.html#setCurrentTime">setCurrentTime</a></li><li data-type='method'><a href="module-movie.html#stop">stop</a></li></ul></li><li><a href="module-util.Color.html">Color</a><ul class='methods'><li data-type='method'><a href="module-util.Color.html#toString">toString</a></li></ul></li><li><a href="module-util.Font.html">Font</a><ul class='methods'><li data-type='method'><a href="module-util.Font.html#toString">toString</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-effect.html">effect</a></li><li><a href="module-event.html">event</a><ul class='methods'><li data-type='method'><a href="module-event.html#.publish">publish</a></li><li data-type='method'><a href="module-event.html#.subscribe">subscribe</a></li></ul></li><li><a href="module-index.html">index</a></li><li><a href="module-layer.html">layer</a></li><li><a href="module-movie.html">movie</a><ul class='methods'><li data-type='method'><a href="module-movie.html#addEffect">addEffect</a></li><li data-type='method'><a href="module-movie.html#addLayer">addLayer</a></li><li data-type='method'><a href="module-movie.html#pause">pause</a></li><li data-type='method'><a href="module-movie.html#play">play</a></li><li data-type='method'><a href="module-movie.html#publishToLayers">publishToLayers</a></li><li data-type='method'><a href="module-movie.html#record">record</a></li><li data-type='method'><a href="module-movie.html#refresh">refresh</a></li><li data-type='method'><a href="module-movie.html#setCurrentTime">setCurrentTime</a></li><li data-type='method'><a href="module-movie.html#stop">stop</a></li></ul></li><li><a href="module-util.html">util</a><ul class='methods'><li data-type='method'><a href="module-util.html#.parseColor">parseColor</a></li><li data-type='method'><a href="module-util.html#.parseFont">parseFont</a></li><li data-type='method'><a href="module-util.html#.watchPublic">watchPublic</a></li><li data-type='method'><a href="module-util.html#~isKeyFrames">isKeyFrames</a></li></ul></li></ul><h3>Mixins</h3><ul><li><a href="module-layer-MediaMixin.html">MediaMixin</a></li></ul>
+</nav>
+<div id="main">
+    <h1 class="page-title">movie.js</h1>
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>/**
+ * @module movie
+ */
+import { subscribe, publish } from './event.js'
+import { val, applyOptions, watchPublic } from './util.js'
+import { Audio as AudioLayer, Video as VideoLayer } from './layer.js' // `Media` mixins
+/**
+ * Contains all layers and movie information&lt;br>
+ * Implements a sub/pub system (adapted from https://gist.github.com/lizzie/4993046)
+ *
+ * @todo Implement event "durationchange", and more
+ * @todo Add width and height options
+ * @todo Make record option to make recording video output to the user while it's recording
+ * @todo rename renderingFrame -> refreshing
+ */
+export default class Movie {
+  /**
+   * Creates a new &lt;code>Movie&lt;/code> instance (project)
+   *
+   * @param {HTMLCanvasElement} canvas - the canvas to display image data on
+   * @param {object} [options] - various optional arguments
+   * @param {BaseAudioContext} [options.audioContext=new AudioContext()]
+   * @param {string} [options.background="#000"] - the background color of the movijse,
+   *  or &lt;code>null&lt;/code> for a transparent background
+   * @param {boolean} [options.repeat=false] - whether to loop playbackjs
+   * @param {boolean} [options.autoRefresh=true] - whether to call `.refresh()` on init and when relevant layers
+   *  are added/removed
+   */
+  constructor (canvas, options = {}) {
+    // TODO: move into multiple methods!
+    // Rename audioContext -> _actx
+    if ('audioContext' in options) {
+      options._actx = options.audioContext
+    }
+    delete options.audioContext // TODO: move up a line :P
+    const newThis = watchPublic(this) // proxy that will be returned by constructor
+    // Don't send updates when initializing, so use this instead of newThis:
+    // output canvas
+    this._canvas = canvas
+    // output canvas context
+    this._cctx = canvas.getContext('2d') // TODO: make private?
+    applyOptions(options, this)
+    // proxy arrays
+    const that = newThis
+    this._effectsBack = []
+    this._effects = new Proxy(newThis._effectsBack, {
+      apply: function (target, thisArg, argumentsList) {
+        return thisArg[target].apply(newThis, argumentsList)
+      },
+      deleteProperty: function (target, property) {
+        // Refresh screen when effect is removed, if the movie isn't playing already.
+        const value = target[property]
+        publish(that, 'movie.change.effect.remove', { source: value })
+        publish(target[property], 'effect.detach', { source: that })
+        delete target[property]
+        return true
+      },
+      set: function (target, property, value) {
+        if (!isNaN(property)) { // if property is an number (index)
+          if (target[property]) {
+            delete target[property] // call deleteProperty
+          }
+          publish(value, 'effect.attach', { source: that }) // Attach effect to movie (first)
+          // Refresh screen when effect is set, if the movie isn't playing already.
+          publish(that, 'movie.change.effect.add', { source: value })
+        }
+        target[property] = value
+        return true
+      }
+    })
+    this._layersBack = []
+    this._layers = new Proxy(newThis._layersBack, {
+      apply: function (target, thisArg, argumentsList) {
+        return thisArg[target].apply(newThis, argumentsList)
+      },
+      deleteProperty: function (target, property) {
+        const value = target[property]
+        const current = that.currentTime >= value.startTime &amp;&amp; that.currentTime &lt; value.startTime + value.duration
+        if (current) {
+          publish(that, 'movie.change.layer.remove', { source: value })
+        }
+        delete target[property]
+        return true
+      },
+      set: function (target, property, value) {
+        target[property] = value
+        if (!isNaN(property)) { // if property is an number (index)
+          publish(value, 'layer.attach', { movie: that }) // Attach layer to movie (first)
+          // Refresh screen when a relevant layer is added or removed
+          const current = that.currentTime >= value.startTime &amp;&amp; that.currentTime &lt; value.startTime + value.duration
+          if (current) {
+            publish(that, 'movie.change.layer.add', { source: that })
+          }
+        }
+        return true
+      }
+    })
+    this._paused = true
+    this._ended = false
+    // to prevent multiple frame-rendering loops at the same time (see `render`)
+    this._renderingFrame = false // only applicable when rendering
+    this._currentTime = 0
+    this._mediaRecorder = null // for recording
+    // NOTE: -1 works well in inequalities
+    this._lastPlayed = -1 // the last time `play` was called
+    this._lastPlayedOffset = -1 // what was `currentTime` when `play` was called
+    // newThis._updateInterval = 0.1; // time in seconds between each "timeupdate" event
+    // newThis._lastUpdate = -1;
+    if (newThis.autoRefresh) {
+      newThis.refresh() // render single frame on init
+    }
+    // Subscribe to own event "change" (child events propogate up)
+    subscribe(newThis, 'movie.change', () => {
+      if (newThis.autoRefresh &amp;&amp; !newThis.rendering) {
+        newThis.refresh()
+      }
+    })
+    // Subscribe to own event "ended"
+    subscribe(newThis, 'movie.ended', () => {
+      if (newThis.recording) {
+        newThis._mediaRecorder.requestData() // I shouldn't have to call newThis right? err
+        newThis._mediaRecorder.stop()
+      }
+    })
+    return newThis
+  }
+  /**
+   * Plays the movie
+   * @return {Promise} fulfilled when done playing, never fails
+   */
+  play () {
+    return new Promise((resolve, reject) => {
+      if (!this.paused) {
+        throw new Error('Already playing')
+      }
+      this._paused = this._ended = false
+      this._lastPlayed = performance.now()
+      this._lastPlayedOffset = this.currentTime
+      if (!this._renderingFrame) {
+        // Not rendering (and not playing), so play
+        this._render(undefined, resolve)
+      }
+      // Stop rendering frame if currently doing so, because playing has higher priority.
+      this._renderingFrame = false // this will effect the next _render call
+    })
+  }
+  // TEST: *support recording that plays back with audio!*
+  // TODO: figure out a way to record faster than playing (i.e. not in real time)
+  // TODO: improve recording performance to increase frame rate?
+  /**
+   * Plays the movie in the background and records it
+   *
+   * @param {number} framerate
+   * @param {object} [options]
+   * @param {boolean} [options.video=true] - whether to include video in recording
+   * @param {boolean} [options.audio=true] - whether to include audio in recording
+   * @param {object} [options.mediaRecorderOptions=undefined] - options to pass to the &lt;code>MediaRecorder&lt;/code>
+   *  constructor
+   * @return {Promise} resolves when done recording, rejects when internal media recorder errors
+   */
+  record (framerate, options = {}) {
+    if (options.video === options.audio === false) {
+      throw new Error('Both video and audio cannot be disabled')
+    }
+    if (!this.paused) {
+      throw new Error('Cannot record movie while already playing or recording')
+    }
+    return new Promise((resolve, reject) => {
+      // https://developers.google.com/web/updates/2016/01/mediarecorder
+      const canvasCache = this.canvas
+      // record on a temporary canvas context
+      this._canvas = document.createElement('canvas')
+      this.canvas.width = canvasCache.width
+      this.canvas.height = canvasCache.height
+      this._cctx = this.canvas.getContext('2d')
+      const recordedChunks = [] // frame blobs
+      // combine image + audio, or just pick one
+      let tracks = []
+      if (options.video !== false) {
+        const visualStream = this.canvas.captureStream(framerate)
+        tracks = tracks.concat(visualStream.getTracks())
+      }
+      // Check if there's a layer that's an instance of a Media mixin (Audio or Video)
+      const hasMediaTracks = this.layers.some(layer => layer instanceof AudioLayer || layer instanceof VideoLayer)
+      // If no media tracks present, don't include an audio stream, because Chrome doesn't record silence
+      // when an audio stream is present.
+      if (hasMediaTracks &amp;&amp; options.audio !== false) {
+        const audioDestination = this.actx.createMediaStreamDestination()
+        const audioStream = audioDestination.stream
+        tracks = tracks.concat(audioStream.getTracks())
+        this.publishToLayers('movie.audiodestinationupdate', { movie: this, destination: audioDestination })
+      }
+      const stream = new MediaStream(tracks)
+      const mediaRecorder = new MediaRecorder(stream, options.mediaRecorderOptions)
+      // TODO: publish to movie, not layers
+      mediaRecorder.ondataavailable = event => {
+        // if (this._paused) reject(new Error("Recording was interrupted"));
+        if (event.data.size > 0) {
+          recordedChunks.push(event.data)
+        }
+      }
+      mediaRecorder.onstop = () => {
+        this._ended = true
+        this._canvas = canvasCache
+        this._cctx = this.canvas.getContext('2d')
+        this.publishToLayers(
+          'movie.audiodestinationupdate',
+          { movie: this, destination: this.actx.destination }
+        )
+        this._mediaRecorder = null
+        // construct super-blob
+        // this is the exported video as a blob!
+        resolve(new Blob(recordedChunks, { type: 'video/webm' }/*, {"type" : "audio/ogg; codecs=opus"} */))
+      }
+      mediaRecorder.onerror = reject
+      mediaRecorder.start()
+      this._mediaRecorder = mediaRecorder
+      this.play()
+    })
+  }
+  /**
+   * Stops the movie, without reseting the playback position
+   * @return {Movie} the movie (for chaining)
+   */
+  pause () {
+    this._paused = true
+    // disable all layers
+    const event = { movie: this }
+    for (let i = 0; i &lt; this.layers.length; i++) {
+      const layer = this.layers[i]
+      publish(layer, 'layer.stop', event)
+      layer._active = false
+    }
+    return this
+  }
+  /**
+   * Stops playback and resets the playback position
+   * @return {Movie} the movie (for chaining)
+   */
+  stop () {
+    this.pause()
+    this.currentTime = 0 // use setter?
+    return this
+  }
+  /**
+   * @param {number} [timestamp=performance.now()]
+   * @param {function} [done=undefined] - called when done playing or when the current frame is loaded
+   * @private
+   */
+  _render (timestamp = performance.now(), done = undefined) {
+    if (!this.rendering) {
+      // (!this.paused || this._renderingFrame) is true (it's playing or it's rendering a single frame)
+      done &amp;&amp; done()
+      return
+    }
+    this._updateCurrentTime(timestamp)
+    // bad for performance? (remember, it's calling Array.reduce)
+    const end = this.duration
+    const ended = this.currentTime >= end
+    if (ended) {
+      publish(this, 'movie.ended', { movie: this, repeat: this.repeat })
+      this._currentTime = 0 // don't use setter
+      publish(this, 'movie.timeupdate', { movie: this })
+      this._lastPlayed = performance.now()
+      this._lastPlayedOffset = 0 // this.currentTime
+      this._renderingFrame = false
+      if (!this.repeat || this.recording) {
+        this._ended = true
+        // disable all layers
+        const event = { movie: this }
+        for (let i = 0; i &lt; this.layers.length; i++) {
+          const layer = this.layers[i]
+          publish(layer, 'layer.stop', event)
+          layer._active = false
+        }
+      }
+      done &amp;&amp; done()
+      return
+    }
+    // do render
+    this._renderBackground(timestamp)
+    const frameFullyLoaded = this._renderLayers(timestamp)
+    this._applyEffects()
+    if (frameFullyLoaded) {
+      publish(this, 'movie.loadeddata', { movie: this })
+    }
+    // if instant didn't load, repeatedly frame-render until frame is loaded
+    // if the expression below is false, don't publish an event, just silently stop render loop
+    if (this._renderingFrame &amp;&amp; frameFullyLoaded) {
+      this._renderingFrame = false
+      done &amp;&amp; done()
+      return
+    }
+    window.requestAnimationFrame(timestamp => {
+      this._render(timestamp)
+    }) // TODO: research performance cost
+  }
+  _updateCurrentTime (timestamp) {
+    // if we're only instant-rendering (current frame only), it doens't matter if it's paused or not
+    if (!this._renderingFrame) {
+      // if ((timestamp - this._lastUpdate) >= this._updateInterval) {
+      const sinceLastPlayed = (timestamp - this._lastPlayed) / 1000
+      this._currentTime = this._lastPlayedOffset + sinceLastPlayed // don't use setter
+      publish(this, 'movie.timeupdate', { movie: this })
+      // this._lastUpdate = timestamp;
+      // }
+    }
+  }
+  _renderBackground (timestamp) {
+    this.cctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
+    if (this.background) {
+      this.cctx.fillStyle = val(this.background, this, timestamp)
+      this.cctx.fillRect(0, 0, this.canvas.width, this.canvas.height)
+    }
+  }
+  /**
+   * @return {boolean} whether or not video frames are loaded
+   * @param {number} [timestamp=performance.now()]
+   * @private
+   */
+  _renderLayers (timestamp) {
+    let frameFullyLoaded = true
+    for (let i = 0; i &lt; this.layers.length; i++) {
+      const layer = this.layers[i]
+      // Cancel operation if outside layer time interval
+      //                                                         > or >= ?
+      if (this.currentTime &lt; layer.startTime || this.currentTime > layer.startTime + layer.duration) {
+        // outside time interval
+        // if only rendering this frame (instant==true), we are not "starting" the layer
+        if (layer.active &amp;&amp; !this._renderingFrame) {
+          // TODO: make a `deactivate()` method?
+          // console.log("stop");
+          publish(layer, 'layer.stop', { movie: this })
+          layer._active = false
+        }
+        continue
+      }
+      // if only rendering this frame, we are not "starting" the layer
+      if (!layer.active &amp;&amp; !this._renderingFrame) {
+        // TODO: make an `activate()` method?
+        // console.log("start");
+        publish(layer, 'layer.start', { movie: this })
+        layer._active = true
+      }
+      if (layer.media) {
+        frameFullyLoaded = frameFullyLoaded &amp;&amp; layer.media.readyState >= 2
+      } // frame loaded
+      const reltime = this.currentTime - layer.startTime
+      layer._render(reltime) // pass relative time for convenience
+      // if the layer has visual component
+      if (layer.canvas) {
+        // layer.canvas.width and layer.canvas.height should already be interpolated
+        // if the layer has an area (else InvalidStateError from canvas)
+        if (layer.canvas.width * layer.canvas.height > 0) {
+          this.cctx.drawImage(layer.canvas,
+            val(layer.x, layer, reltime), val(layer.y, layer, reltime), layer.canvas.width, layer.canvas.height
+          )
+        }
+      }
+    }
+    return frameFullyLoaded
+  }
+  _applyEffects () {
+    for (let i = 0; i &lt; this.effects.length; i++) {
+      const effect = this.effects[i]
+      effect.apply(this, this.currentTime)
+    }
+  }
+  /**
+   * Refreshes the screen (only use this if auto-refresh is disabled)
+   * @return {Promise} - resolves when the frame is loaded
+   */
+  refresh () {
+    if (this.rendering) {
+      throw new Error('Cannot refresh frame while already rendering')
+    }
+    return new Promise((resolve, reject) => {
+      this._renderingFrame = true
+      this._render(undefined, resolve)
+    })
+  }
+  /**
+   * Convienence method
+   * @todo Make private
+   */
+  publishToLayers (type, event) {
+    for (let i = 0; i &lt; this.layers.length; i++) {
+      publish(this.layers[i], type, event)
+    }
+  }
+  /**
+   * If the movie is playing, recording or refreshing
+   * @type boolean
+   */
+  get rendering () {
+    return !this.paused || this._renderingFrame
+  }
+  /**
+   * If the movie is refreshing current frame
+   * @type boolean
+   */
+  get renderingFrame () {
+    return this._renderingFrame
+  }
+  /**
+   * If the movie is recording
+   * @type boolean
+   */
+  get recording () {
+    return !!this._mediaRecorder
+  }
+  /**
+   * The combined duration of all layers
+   * @type number
+   */
+  get duration () { // TODO: dirty flag?
+    return this.layers.reduce((end, layer) => Math.max(layer.startTime + layer.duration, end), 0)
+  }
+  /**
+   * @type layer.Base[]
+   */
+  get layers () {
+    return this._layers
+  }
+  // (proxy)
+  /**
+   * Convienence method for &lt;code>layers.push()&lt;/code>
+   * @param {BaseLayer} layer
+   * @return {Movie} the movie (for chaining)
+   */
+  addLayer (layer) {
+    this.layers.push(layer); return this
+  }
+  /**
+   * @type effect.Base[]
+   */
+  get effects () {
+    return this._effects // private (because it's a proxy)
+  }
+  /**
+   * Convienence method for &lt;code>effects.push()&lt;/code>
+   * @param {BaseEffect} effect
+   * @return {Movie} the movie (for chaining)
+   */
+  addEffect (effect) {
+    this.effects.push(effect); return this
+  }
+  /**
+   * @type boolean
+   */
+  get paused () {
+    return this._paused
+  }
+  /**
+   * If the playback position is at the end of the movie
+   * @type boolean
+   */
+  get ended () {
+    return this._ended
+  }
+  /**
+   * The current playback position
+   * @type number
+   */
+  get currentTime () {
+    return this._currentTime
+  }
+  /**
+   * Sets the current playback position. This is a more powerful version of `set currentTime`.
+   *
+   * @param {number} time - the new cursor's time value in seconds
+   * @param {boolean} [refresh=true] - whether to render a single frame to match new time or not
+   * @return {Promise} resolves when the current frame is rendered if &lt;code>refresh&lt;/code> is true,
+   *  otherwise resolves immediately
+   *
+   * @todo Refresh ionly f auto-refreshing is enabled
+   */
+  setCurrentTime (time, refresh = true) {
+    return new Promise((resolve, reject) => {
+      this._currentTime = time
+      publish(this, 'movie.seek', {})
+      if (refresh) {
+        // pass promise callbacks to `refresh`
+        this.refresh().then(resolve).catch(reject)
+      } else {
+        resolve()
+      }
+    })
+  }
+  set currentTime (time) {
+    this._currentTime = time
+    publish(this, 'movie.seek', {})
+    this.refresh() // render single frame to match new time
+  }
+  /**
+   * The rendering canvas
+   * @type HTMLCanvasElement
+   */
+  get canvas () {
+    return this._canvas
+  }
+  /**
+   * The rendering canvas's context
+   * @type CanvasRenderingContext2D
+   */
+  get cctx () {
+    return this._cctx
+  }
+  /**
+   * The audio context to which audio is played
+   * @type BaseAudioContext
+   */
+  get actx () {
+    return this._actx
+  }
+  /**
+   * The width of the rendering canvas
+   * @type number
+   */
+  get width () {
+    return this.canvas.width
+  }
+  /**
+   * The height of the rendering canvas
+   * @type number
+   */
+  get height () {
+    return this.canvas.height
+  }
+  set width (width) {
+    this.canvas.width = width
+  }
+  set height (height) {
+    this.canvas.height = height
+  }
+}
+// id for events (independent of instance, but easy to access when on prototype chain)
+Movie.prototype._type = 'movie'
+Movie.prototype.getDefaultOptions = function () {
+  return {
+    _actx: new AudioContext(),
+    /**
+     * @name module:movie#background
+     * @type string
+     * @desc The css color for the background, or &lt;code>null&lt;/code> for transparency
+     */
+    background: '#000',
+    /**
+     * @name module:movie#repeat
+     * @type boolean
+     */
+    repeat: false,
+    /**
+     * @name module:movie#autoRefresh
+     * @type boolean
+     * @desc Whether to refresh when changes are made that would effect the current frame
+     */
+    autoRefresh: true
+  }
+}
+// TODO: refactor so we don't need to explicitly exclude some of these
+Movie.prototype._publicExcludes = ['canvas', 'cctx', 'actx', 'layers', 'effects']
+</code></pre>
+        </article>
+    </section>
+</div>
+<br class="clear">
+<footer>
+    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Sun Oct 13 2019 15:38:43 GMT-0400 (Eastern Daylight Time) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
+</footer>
+<script>prettyPrint();</script>
+<script src="scripts/polyfill.js"></script>
+<script src="scripts/linenumber.js"></script>
+</body>
+</html>