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/module-movie.html ADDED Viewed

@@ -0,0 +1,3118 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>module:movie - 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">module:movie</h1>
+<section>
+<header>
+        <h2>
+        module:movie
+        </h2>
+</header>
+<article>
+        <div class="container-overview">
+    <h4 class="name" id="module:movie"><span class="type-signature"></span>new (require("movie"))<span class="signature">(canvas, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line31">line 31</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Creates a new <code>Movie</code> instance (project)
+</div>
+    <h5>Parameters:</h5>
+<table class="params">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Attributes</th>
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+                <td class="name"><code>canvas</code></td>
+            <td class="type">
+<span class="param-type">HTMLCanvasElement</span>
+            </td>
+                <td class="attributes">
+                </td>
+            <td class="description last">the canvas to display image data on</td>
+        </tr>
+        <tr>
+                <td class="name"><code>options</code></td>
+            <td class="type">
+<span class="param-type">object</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+            <td class="description last">various optional arguments
+                <h6>Properties</h6>
+<table class="params">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Attributes</th>
+        <th>Default</th>
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+                <td class="name"><code>audioContext</code></td>
+            <td class="type">
+<span class="param-type">BaseAudioContext</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>new AudioContext()</code>
+                </td>
+            <td class="description last"></td>
+        </tr>
+        <tr>
+                <td class="name"><code>background</code></td>
+            <td class="type">
+<span class="param-type">string</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>"#000"</code>
+                </td>
+            <td class="description last">the background color of the movijse,
+ or <code>null</code> for a transparent background</td>
+        </tr>
+        <tr>
+                <td class="name"><code>repeat</code></td>
+            <td class="type">
+<span class="param-type">boolean</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>false</code>
+                </td>
+            <td class="description last">whether to loop playbackjs</td>
+        </tr>
+        <tr>
+                <td class="name"><code>autoRefresh</code></td>
+            <td class="type">
+<span class="param-type">boolean</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>true</code>
+                </td>
+            <td class="description last">whether to call `.refresh()` on init and when relevant layers
+ are added/removed</td>
+        </tr>
+    </tbody>
+</table>
+            </td>
+        </tr>
+    </tbody>
+</table>
+        </div>
+        <h3 class="subsection-title">Members</h3>
+<h4 class="name" id="actx"><span class="type-signature"></span>actx<span class="type-signature"> :BaseAudioContext</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line566">line 566</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    The audio context to which audio is played
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">BaseAudioContext</span>
+        </li>
+    </ul>
+<h4 class="name" id="autoRefresh"><span class="type-signature"></span>autoRefresh<span class="type-signature"> :boolean</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line611">line 611</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Whether to refresh when changes are made that would effect the current frame
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">boolean</span>
+        </li>
+    </ul>
+<h4 class="name" id="background"><span class="type-signature"></span>background<span class="type-signature"> :string</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line600">line 600</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    The css color for the background, or <code>null</code> for transparency
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">string</span>
+        </li>
+    </ul>
+<h4 class="name" id="canvas"><span class="type-signature"></span>canvas<span class="type-signature"> :HTMLCanvasElement</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line550">line 550</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    The rendering canvas
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">HTMLCanvasElement</span>
+        </li>
+    </ul>
+<h4 class="name" id="cctx"><span class="type-signature"></span>cctx<span class="type-signature"> :CanvasRenderingContext2D</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line558">line 558</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    The rendering canvas's context
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">CanvasRenderingContext2D</span>
+        </li>
+    </ul>
+<h4 class="name" id="currentTime"><span class="type-signature"></span>currentTime<span class="type-signature"> :number</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line513">line 513</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    The current playback position
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">number</span>
+        </li>
+    </ul>
+<h4 class="name" id="duration"><span class="type-signature"></span>duration<span class="type-signature"> :number</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line457">line 457</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    The combined duration of all layers
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">number</span>
+        </li>
+    </ul>
+<h4 class="name" id="effects"><span class="type-signature"></span>effects<span class="type-signature"> :Array.&lt;effect.Base></span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line481">line 481</a>
+    </li></ul></dd>
+</dl>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">Array.&lt;effect.Base></span>
+        </li>
+    </ul>
+<h4 class="name" id="ended"><span class="type-signature"></span>ended<span class="type-signature"> :boolean</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line505">line 505</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    If the playback position is at the end of the movie
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">boolean</span>
+        </li>
+    </ul>
+<h4 class="name" id="height"><span class="type-signature"></span>height<span class="type-signature"> :number</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line582">line 582</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    The height of the rendering canvas
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">number</span>
+        </li>
+    </ul>
+<h4 class="name" id="layers"><span class="type-signature"></span>layers<span class="type-signature"> :Array.&lt;layer.Base></span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line464">line 464</a>
+    </li></ul></dd>
+</dl>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">Array.&lt;layer.Base></span>
+        </li>
+    </ul>
+<h4 class="name" id="paused"><span class="type-signature"></span>paused<span class="type-signature"> :boolean</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line497">line 497</a>
+    </li></ul></dd>
+</dl>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">boolean</span>
+        </li>
+    </ul>
+<h4 class="name" id="recording"><span class="type-signature"></span>recording<span class="type-signature"> :boolean</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line449">line 449</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    If the movie is recording
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">boolean</span>
+        </li>
+    </ul>
+<h4 class="name" id="rendering"><span class="type-signature"></span>rendering<span class="type-signature"> :boolean</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line433">line 433</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    If the movie is playing, recording or refreshing
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">boolean</span>
+        </li>
+    </ul>
+<h4 class="name" id="renderingFrame"><span class="type-signature"></span>renderingFrame<span class="type-signature"> :boolean</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line441">line 441</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    If the movie is refreshing current frame
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">boolean</span>
+        </li>
+    </ul>
+<h4 class="name" id="repeat"><span class="type-signature"></span>repeat<span class="type-signature"> :boolean</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line606">line 606</a>
+    </li></ul></dd>
+</dl>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">boolean</span>
+        </li>
+    </ul>
+<h4 class="name" id="width"><span class="type-signature"></span>width<span class="type-signature"> :number</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line574">line 574</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    The width of the rendering canvas
+</div>
+    <h5>Type:</h5>
+    <ul>
+        <li>
+<span class="param-type">number</span>
+        </li>
+    </ul>
+        <h3 class="subsection-title">Methods</h3>
+    <h4 class="name" id="addEffect"><span class="type-signature"></span>addEffect<span class="signature">(effect)</span><span class="type-signature"> &rarr; {Movie}</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line490">line 490</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Convienence method for <code>effects.push()</code>
+</div>
+    <h5>Parameters:</h5>
+<table class="params">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+                <td class="name"><code>effect</code></td>
+            <td class="type">
+<span class="param-type">BaseEffect</span>
+            </td>
+            <td class="description last"></td>
+        </tr>
+    </tbody>
+</table>
+<h5>Returns:</h5>
+<div class="param-desc">
+    the movie (for chaining)
+</div>
+<dl class="param-type">
+    <dt>
+        Type
+    </dt>
+    <dd>
+<span class="param-type">Movie</span>
+    </dd>
+</dl>
+    <h4 class="name" id="addLayer"><span class="type-signature"></span>addLayer<span class="signature">(layer)</span><span class="type-signature"> &rarr; {Movie}</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line474">line 474</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Convienence method for <code>layers.push()</code>
+</div>
+    <h5>Parameters:</h5>
+<table class="params">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+                <td class="name"><code>layer</code></td>
+            <td class="type">
+<span class="param-type">BaseLayer</span>
+            </td>
+            <td class="description last"></td>
+        </tr>
+    </tbody>
+</table>
+<h5>Returns:</h5>
+<div class="param-desc">
+    the movie (for chaining)
+</div>
+<dl class="param-type">
+    <dt>
+        Type
+    </dt>
+    <dd>
+<span class="param-type">Movie</span>
+    </dd>
+</dl>
+    <h4 class="name" id="pause"><span class="type-signature"></span>pause<span class="signature">()</span><span class="type-signature"> &rarr; {Movie}</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line245">line 245</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Stops the movie, without reseting the playback position
+</div>
+<h5>Returns:</h5>
+<div class="param-desc">
+    the movie (for chaining)
+</div>
+<dl class="param-type">
+    <dt>
+        Type
+    </dt>
+    <dd>
+<span class="param-type">Movie</span>
+    </dd>
+</dl>
+    <h4 class="name" id="play"><span class="type-signature"></span>play<span class="signature">()</span><span class="type-signature"> &rarr; {Promise}</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line144">line 144</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Plays the movie
+</div>
+<h5>Returns:</h5>
+<div class="param-desc">
+    fulfilled when done playing, never fails
+</div>
+<dl class="param-type">
+    <dt>
+        Type
+    </dt>
+    <dd>
+<span class="param-type">Promise</span>
+    </dd>
+</dl>
+    <h4 class="name" id="publishToLayers"><span class="type-signature"></span>publishToLayers<span class="signature">()</span><span class="type-signature"></span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line423">line 423</a>
+    </li></ul></dd>
+    <dt class="tag-todo">To Do:</dt>
+    <dd class="tag-todo">
+        <ul>
+            <li>Make private</li>
+        </ul>
+    </dd>
+</dl>
+<div class="description">
+    Convienence method
+</div>
+    <h4 class="name" id="record"><span class="type-signature"></span>record<span class="signature">(framerate, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Promise}</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line177">line 177</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Plays the movie in the background and records it
+</div>
+    <h5>Parameters:</h5>
+<table class="params">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Attributes</th>
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+                <td class="name"><code>framerate</code></td>
+            <td class="type">
+<span class="param-type">number</span>
+            </td>
+                <td class="attributes">
+                </td>
+            <td class="description last"></td>
+        </tr>
+        <tr>
+                <td class="name"><code>options</code></td>
+            <td class="type">
+<span class="param-type">object</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+            <td class="description last">
+                <h6>Properties</h6>
+<table class="params">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Attributes</th>
+        <th>Default</th>
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+                <td class="name"><code>video</code></td>
+            <td class="type">
+<span class="param-type">boolean</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>true</code>
+                </td>
+            <td class="description last">whether to include video in recording</td>
+        </tr>
+        <tr>
+                <td class="name"><code>audio</code></td>
+            <td class="type">
+<span class="param-type">boolean</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>true</code>
+                </td>
+            <td class="description last">whether to include audio in recording</td>
+        </tr>
+        <tr>
+                <td class="name"><code>mediaRecorderOptions</code></td>
+            <td class="type">
+<span class="param-type">object</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                </td>
+            <td class="description last">options to pass to the <code>MediaRecorder</code>
+ constructor</td>
+        </tr>
+    </tbody>
+</table>
+            </td>
+        </tr>
+    </tbody>
+</table>
+<h5>Returns:</h5>
+<div class="param-desc">
+    resolves when done recording, rejects when internal media recorder errors
+</div>
+<dl class="param-type">
+    <dt>
+        Type
+    </dt>
+    <dd>
+<span class="param-type">Promise</span>
+    </dd>
+</dl>
+    <h4 class="name" id="refresh"><span class="type-signature"></span>refresh<span class="signature">()</span><span class="type-signature"> &rarr; {Promise}</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line408">line 408</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Refreshes the screen (only use this if auto-refresh is disabled)
+</div>
+<h5>Returns:</h5>
+<div class="param-desc">
+    - resolves when the frame is loaded
+</div>
+<dl class="param-type">
+    <dt>
+        Type
+    </dt>
+    <dd>
+<span class="param-type">Promise</span>
+    </dd>
+</dl>
+    <h4 class="name" id="setCurrentTime"><span class="type-signature"></span>setCurrentTime<span class="signature">(time, refresh<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Promise}</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line527">line 527</a>
+    </li></ul></dd>
+    <dt class="tag-todo">To Do:</dt>
+    <dd class="tag-todo">
+        <ul>
+            <li>Refresh ionly f auto-refreshing is enabled</li>
+        </ul>
+    </dd>
+</dl>
+<div class="description">
+    Sets the current playback position. This is a more powerful version of `set currentTime`.
+</div>
+    <h5>Parameters:</h5>
+<table class="params">
+    <thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Attributes</th>
+        <th>Default</th>
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+    <tbody>
+        <tr>
+                <td class="name"><code>time</code></td>
+            <td class="type">
+<span class="param-type">number</span>
+            </td>
+                <td class="attributes">
+                </td>
+                <td class="default">
+                </td>
+            <td class="description last">the new cursor's time value in seconds</td>
+        </tr>
+        <tr>
+                <td class="name"><code>refresh</code></td>
+            <td class="type">
+<span class="param-type">boolean</span>
+            </td>
+                <td class="attributes">
+                    &lt;optional><br>
+                </td>
+                <td class="default">
+                    <code>true</code>
+                </td>
+            <td class="description last">whether to render a single frame to match new time or not</td>
+        </tr>
+    </tbody>
+</table>
+<h5>Returns:</h5>
+<div class="param-desc">
+    resolves when the current frame is rendered if <code>refresh</code> is true,
+ otherwise resolves immediately
+</div>
+<dl class="param-type">
+    <dt>
+        Type
+    </dt>
+    <dd>
+<span class="param-type">Promise</span>
+    </dd>
+</dl>
+    <h4 class="name" id="stop"><span class="type-signature"></span>stop<span class="signature">()</span><span class="type-signature"> &rarr; {Movie}</span></h4>
+<dl class="details">
+    <dt class="tag-source">Source:</dt>
+    <dd class="tag-source"><ul class="dummy"><li>
+        <a href="movie.js.html">movie.js</a>, <a href="movie.js.html#line261">line 261</a>
+    </li></ul></dd>
+</dl>
+<div class="description">
+    Stops playback and resets the playback position
+</div>
+<h5>Returns:</h5>
+<div class="param-desc">
+    the movie (for chaining)
+</div>
+<dl class="param-type">
+    <dt>
+        Type
+    </dt>
+    <dd>
+<span class="param-type">Movie</span>
+    </dd>
+</dl>
+</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>