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/util.js.html ADDED Viewed

@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>util.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">util.js</h1>
+    <section>
+        <article>
+            <pre class="prettyprint source linenums"><code>/**
+ * @module util
+ */
+import { publish } from './event.js'
+/**
+ * Merges `options` with `defaultOptions`, and then copies the properties with the keys in `defaultOptions`
+ *  from the merged object to `destObj`.
+ *
+ * @return {undefined}
+ * @todo Make methods like getDefaultOptions private
+ */
+export function applyOptions (options, destObj) {
+  const defaultOptions = destObj.getDefaultOptions()
+  // validate; make sure `keys` doesn't have any extraneous items
+  for (const option in options) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!defaultOptions.hasOwnProperty(option)) {
+      throw new Error("Invalid option: '" + option + "'")
+    }
+  }
+  // merge options and defaultOptions
+  options = { ...defaultOptions, ...options }
+  // copy options
+  for (const option in options) {
+    if (!(option in destObj)) {
+      destObj[option] = options[option]
+    }
+  }
+}
+// https://stackoverflow.com/a/8024294/3783155
+/**
+ * Get all inherited keys
+ * @param {object} obj
+ * @param {boolean} excludeObjectClass - don't add properties of the &lt;code>Object&lt;/code> prototype
+ * @private
+ */
+function getAllPropertyNames (obj, excludeObjectClass) {
+  let props = []
+  do {
+    props = props.concat(Object.getOwnPropertyNames(obj))
+  } while ((obj = Object.getPrototypeOf(obj)) &amp;&amp; (excludeObjectClass ? obj.constructor.name !== 'Object' : true))
+  return props
+}
+/**
+ * @return {boolean} &lt;code>true&lt;/code> if &lt;code>property&lt;/code> is a non-array object and all of its own
+ *  property keys are numbers or &lt;code>"interpolate"&lt;/code> or &lt;code>"interpolationKeys"&lt;/code>, and
+ * &lt;code>false&lt;/code>  otherwise.
+ */
+function isKeyFrames (property) {
+  if ((typeof property !== 'object' || property === null) || Array.isArray(property)) {
+    return false
+  }
+  // is reduce slow? I think it is
+  // let keys = Object.keys(property);   // own propeties
+  const keys = getAllPropertyNames(property, true) // includes non-enumerable properties (except that of `Object`)
+  for (let i = 0; i &lt; keys.length; i++) {
+    const key = keys[i]
+    // convert key to number, because object keys are always converted to strings
+    if (isNaN(key) &amp;&amp; !(key === 'interpolate' || key === 'interpolationKeys')) {
+      return false
+    }
+  }
+  // If it's an empty object, don't treat is as keyframe set.
+  // https://stackoverflow.com/a/32108184/3783155
+  const isEmpty = property.constructor === Object &amp;&amp; Object.entries(property).length === 0
+  return !isEmpty
+}
+/**
+ * Calculates the value of keyframe set &lt;code>property&lt;/code> at &lt;code>time&lt;/code> if
+ * &lt;code>property&lt;/code> is an array, or returns &lt;code>property&lt;/code>, assuming that it's a number.
+ *
+ * @param {(*|module:util.KeyFrames)} property - value or map of time-to-value pairs for keyframes
+ * @param {object} element - the object to which the property belongs
+ * @param {number} time - time to calculate keyframes for, if necessary
+ *
+ * Note that only values used in keyframes that numbers or objects (including arrays) are interpolated.
+ * All other values are taken sequentially with no interpolation. JavaScript will convert parsed colors,
+ * if created correctly, to their string representations when assigned to a CanvasRenderingContext2D property
+ * (I'm pretty sure).
+ *
+ * @todo Is this function efficient?
+ * @todo Update doc @params to allow for keyframes
+ *
+ * @typedef {Object} module:util.KeyFrames
+ * @property {function} interpolate - the function to interpolate between keyframes, defaults to
+ *  {@link module:util.linearInterp}
+ * @property {string[]} interpolationKeys - keys to interpolate for objects, defaults to all
+ *  own enumerable properties
+ */
+export function val (property, element, time) {
+  if (isKeyFrames(property)) {
+    // if (Object.keys(property).length === 0) throw "Empty key frame set"; // this will never be executed
+    if (time === undefined) {
+      throw new Error('|time| is undefined or null')
+    }
+    // I think .reduce and such are slow to do per-frame (or more)?
+    // lower is the max beneath time, upper is the min above time
+    let lowerTime = 0; let upperTime = Infinity
+    let lowerValue = null; let upperValue = null // default values for the inequalities
+    for (let keyTime in property) {
+      const keyValue = property[keyTime]
+      keyTime = +keyTime // valueOf to convert to number
+      if (lowerTime &lt;= keyTime &amp;&amp; keyTime &lt;= time) {
+        lowerValue = keyValue
+        lowerTime = keyTime
+      }
+      if (time &lt;= keyTime &amp;&amp; keyTime &lt;= upperTime) {
+        upperValue = keyValue
+        upperTime = keyTime
+      }
+    }
+    // TODO: support custom interpolation for 'other' types
+    if (lowerValue === null) {
+      throw new Error(`No keyframes located before or at time ${time}.`)
+    }
+    // no need for upperValue if it is flat interpolation
+    if (!(typeof lowerValue === 'number' || typeof lowerValue === 'object')) {
+      return lowerValue
+    }
+    if (upperValue === null) {
+      throw new Error(`No keyframes located after or at time ${time}.`)
+    }
+    if (typeof lowerValue !== typeof upperValue) {
+      throw new Error('Type mismatch in keyframe values')
+    }
+    // interpolate
+    // the following should mean that there is a key frame *at* |time|; prevents division by zero below
+    if (upperTime === lowerTime) {
+      return upperValue
+    }
+    const progress = time - lowerTime; const percentProgress = progress / (upperTime - lowerTime)
+    const interpolate = property.interpolate || linearInterp
+    return interpolate(lowerValue, upperValue, percentProgress, property.interpolationKeys)
+  } else if (typeof property === 'function') {
+    return property(element, time) // TODO? add more args
+  } else {
+    return property // "primitive" value
+  }
+}
+/* export function floorInterp(x1, x2, t, objectKeys) {
+    // https://stackoverflow.com/a/25835337/3783155 (TODO: preserve getters/setters, etc?)
+    return !objectKeys ? x1 : objectKeys.reduce((a, x) => {
+        if (x1.hasOwnProperty(x)) a[x] = o[x];  // ignore x2
+        return a;
+    }, Object.create(Object.getPrototypeOf(x1)));
+} */
+export function linearInterp (x1, x2, t, objectKeys) {
+  if (typeof x1 !== typeof x2) {
+    throw new Error('Type mismatch')
+  }
+  if (typeof x1 !== 'number' &amp;&amp; typeof x1 !== 'object') {
+    return x1
+  } // flat interpolation (floor)
+  if (typeof x1 === 'object') { // to work with objects (including arrays)
+    // TODO: make this code DRY
+    if (Object.getPrototypeOf(x1) !== Object.getPrototypeOf(x2)) {
+      throw new Error('Prototype mismatch')
+    }
+    const int = Object.create(Object.getPrototypeOf(x1)) // preserve prototype of objects
+    // only take the union of properties
+    const keys = Object.keys(x1) || objectKeys
+    for (let i = 0; i &lt; keys.length; i++) {
+      const key = keys[i]
+      // (only take the union of properties)
+      // eslint-disable-next-line no-prototype-builtins
+      if (!x1.hasOwnProperty(key) || !x2.hasOwnProperty(key)) {
+        continue
+      }
+      int[key] = linearInterp(x1[key], x2[key], t)
+    }
+    return int
+  }
+  return (1 - t) * x1 + t * x2
+}
+export function cosineInterp (x1, x2, t, objectKeys) {
+  if (typeof x1 !== typeof x2) {
+    throw new Error('Type mismatch')
+  }
+  if (typeof x1 !== 'number' &amp;&amp; typeof x1 !== 'object') {
+    return x1
+  } // flat interpolation (floor)
+  if (typeof x1 === 'object' &amp;&amp; typeof x2 === 'object') { // to work with objects (including arrays)
+    if (Object.getPrototypeOf(x1) !== Object.getPrototypeOf(x2)) {
+      throw new Error('Prototype mismatch')
+    }
+    const int = Object.create(Object.getPrototypeOf(x1)) // preserve prototype of objects
+    // only take the union of properties
+    const keys = Object.keys(x1) || objectKeys
+    for (let i = 0; i &lt; keys.length; i++) {
+      const key = keys[i]
+      // (only take the union of properties)
+      // eslint-disable-next-line no-prototype-builtins
+      if (!x1.hasOwnProperty(key) || !x2.hasOwnProperty(key)) {
+        continue
+      }
+      int[key] = cosineInterp(x1[key], x2[key], t)
+    }
+    return int
+  }
+  const cos = Math.cos(Math.PI / 2 * t)
+  return cos * x1 + (1 - cos) * x2
+}
+/**
+ * An rgba color, for proper interpolation and shader effects
+ */
+export class Color {
+  /**
+   * @param {number} r
+   * @param {number} g
+   * @param {number} b
+   * @param {number} a
+   */
+  constructor (r, g, b, a = 255) {
+    /** @type number */
+    this.r = r
+    /** @type number */
+    this.g = g
+    /** @type number */
+    this.b = b
+    /** @type number */
+    this.a = a
+  }
+  /**
+   * Converts to css color
+   */
+  toString () {
+    return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`
+  }
+}
+// https://stackoverflow.com/a/19366389/3783155
+function memoize (factory, ctx) {
+  const cache = {}
+  return key => {
+    if (!(key in cache)) {
+      cache[key] = factory.call(ctx, key)
+    }
+    return cache[key]
+  }
+}
+const parseColorCanvas = document.createElement('parseColorCanvas')
+parseColorCanvas.width = parseColorCanvas.height = 1
+const parseColorCtx = parseColorCanvas.getContext('2d')
+/**
+ * Converts a css color string to a {@link module:util.Color} object representation.
+ * @param {string} str
+ * @return {module:util.Color} the parsed color
+ */
+export function parseColor (str) {
+  // TODO - find a better way to cope with the fact that invalid
+  //        values of "col" are ignored
+  parseColorCtx.clearRect(0, 0, 1, 1)
+  parseColorCtx.fillStyle = str
+  parseColorCtx.fillRect(0, 0, 1, 1)
+  return new Color(...parseColorCtx.getImageData(0, 0, 1, 1).data)
+}
+/**
+ * A font, for proper interpolation
+ */
+export class Font {
+  /**
+   * @param {number} size
+   * @param {string} family
+   * @param {string} sizeUnit
+   */
+  constructor (size, family, sizeUnit = 'px') {
+    this.size = size
+    this.family = family
+    this.sizeUnit = sizeUnit
+  }
+  /**
+   * Converts to a css font
+   */
+  toString () {
+    return `${this.size}${this.sizeUnit} ${this.family}`
+  }
+}
+/**
+ * Converts a css font string to a {@link module:util.Font} object representation.
+ * @param {string} str
+ * @return {module:util.Font} the parsed font
+ */
+export function parseFont (str) {
+  const split = str.split(' ')
+  if (split.length !== 2) {
+    throw new Error(`Invalid font '${str}'`)
+  }
+  const sizeWithUnit = split[0]; const family = split[1]
+  const size = parseFloat(sizeWithUnit); const sizeUnit = sizeWithUnit.substring(size.toString().length)
+  return new Font(size, family, sizeUnit)
+}
+/*
+ * Attempts to solve the diamond inheritance problem using mixins
+ * See {@link http://javascriptweblog.wordpress.com/2011/05/31/a-fresh-look-at-javascript-mixins/}&lt;br>
+ *
+ * &lt;strong>Note that the caller has to explicitly update the class value and as well as the class's property
+ * &lt;code>constructor&lt;/code> to its prototype's constructor.&lt;/strong>&lt;br>
+ *
+ * This throws an error when composing functions with return values; unless if the composed function is a
+ * constructor, which is handled specially.
+ *
+ * Note that all properties must be functions for this to work as expected.
+ *
+ * If the destination and source have the methods with the same name (key), assign a new function
+ * that calls both with the given arguments. The arguments list passed to each subfunction will be the
+ * argument list that was called to the composite function.
+ *
+ * This function only works with functions, getters and setters.
+ *
+ * TODO: make a lot more robust
+ * TODO: rethink my ways... this is evil
+ */
+/* export function extendProto(destination, source) {
+    for (let name in source) {
+        const extendMethod = (sourceDescriptor, which) => {
+            let sourceFn = sourceDescriptor[which],
+                origDestDescriptor = Object.getOwnPropertyDescriptor(destination, name),
+                origDestFn = origDestDescriptor ? origDestDescriptor[which] : undefined;
+            let destFn = !origDestFn ? sourceFn : function compositeMethod() {   // `function` or `()` ?
+                try {
+                    // |.apply()| because we're seperating the method from the object, so return the value
+                    // of |this| back to the function
+                    let r1 = origDestFn.apply(this, arguments),
+                        r2 = sourceFn.apply(this, arguments);
+                    if (r1 || r2) throw "Return value in composite method"; // null will slip by ig
+                } catch (e) {
+                    if (e.toString() === "TypeError: class constructors must be invoked with |new|") {
+                        let inst = new origDestFn(...arguments);
+                        sourceFn.apply(inst, arguments);
+                        return inst;
+                    } else throw e;
+                }
+            };
+            let destDescriptor = {...sourceDescriptor}; // shallow clone
+            destDescriptor[which] = destFn;
+            Object.defineProperty(destination, name, destDescriptor);
+        };
+        let descriptor = Object.getOwnPropertyDescriptor(source, name);
+        if (descriptor) {   // if hasOwnProperty
+            if (descriptor.get) extendMethod(descriptor, 'get');
+            if (descriptor.set) extendMethod(descriptor, 'set');
+            if (descriptor.value) extendMethod(descriptor, 'value');
+        }
+    }
+} */
+// TODO: remove this function
+export function mapPixels (mapper, canvas, ctx, x, y, width, height, flush = true) {
+  x = x || 0
+  y = y || 0
+  width = width || canvas.width
+  height = height || canvas.height
+  const frame = ctx.getImageData(x, y, width, height)
+  for (let i = 0, l = frame.data.length; i &lt; l; i += 4) {
+    mapper(frame.data, i)
+  }
+  if (flush) {
+    ctx.putImageData(frame, x, y)
+  }
+}
+/**
+ * &lt;p>Emits "change" event when direct public properties updated. Should be called after
+ * all prototype methods are defined in class and after all public properties are
+ * initialized in constructor.
+ * &lt;p>Must be called before any watchable properties are set, and only once in the prototype chain.
+ *
+ * @param {object} target - object to watch
+ */
+export function watchPublic (target) {
+  const getPath = (obj, prop) =>
+    (obj === target ? '' : (target.__watchPublicPath + '.')) + prop
+  const callback = function (obj, prop, val) {
+    // Public API property updated, emit 'modify' event.
+    publish(proxy, `${obj._type}.change.modify`, { property: getPath(obj, prop), newValue: val })
+  }
+  const check = prop => !(prop.startsWith('_') || target._publicExcludes.includes(prop))
+  const handler = {
+    set (obj, prop, val, receiver) {
+      // Recurse
+      if (typeof val === 'object' &amp;&amp; val !== null &amp;&amp; !val.__watchPublicPath &amp;&amp; check(prop)) {
+        val = new Proxy(val, handler)
+        val.__watchPublicPath = getPath(obj, prop)
+      }
+      const was = prop in obj
+      // set property or attribute
+      // Search prototype chain for the closest setter
+      let objProto = obj
+      while ((objProto = Object.getPrototypeOf(objProto))) {
+        const propDesc = Object.getOwnPropertyDescriptor(objProto, prop)
+        if (propDesc &amp;&amp; propDesc.set) {
+          propDesc.set.call(receiver, val) // call setter, supplying proxy as this (fixes event bugs)
+          break
+        }
+      }
+      if (!objProto) { // couldn't find setter; set value on instance
+        obj[prop] = val
+      }
+      // Check if it already existed and if it's a valid property to watch, if on root object
+      if (obj !== target || (was &amp;&amp; check(prop))) {
+        callback(obj, prop, val)
+      }
+      return true
+    }
+  }
+  const proxy = new Proxy(target, handler)
+  return proxy
+}
+</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>

package/eslint.conf.js ADDED Viewed

@@ -0,0 +1,28 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true
+  },
+  extends: [
+    'standard'
+  ],
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly'
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module'
+  },
+  plugins: [
+    'html'
+  ],
+  rules: {
+    'brace-style': ['error', '1tbs', { allowSingleLine: false }]
+  },
+  settings: {
+    html: {
+      indent: '+2'
+    }
+  }
+}

package/eslint.test-conf.js ADDED Viewed

@@ -0,0 +1,4 @@
+const conf = require('./eslint.conf.js')
+conf.env.jasmine = true
+conf.globals.etro = 'readonly'
+module.exports = conf

package/examples/application/readme-screenshot.html ADDED Viewed

@@ -0,0 +1,86 @@
+<!-- TODO: fix -->
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Fun with Etro</title>
+</head>
+<body>
+  <script type="module">
+    import etro from '../../src/index.js'
+    const cols = 2; const rows = 2
+    let movie, sample
+    const begin = () => {
+      const canvas = document.createElement('canvas')
+      document.body.appendChild(canvas)
+      movie = new etro.Movie(canvas)
+      etro.event.subscribe(movie, 'movie.timeupdate', () => {
+        if (movie.currentTime >= 11) {
+          movie.pause()
+        }
+      })
+      sample = document.createElement('video')
+      sample.src = '../assets/sample.ogv'
+      sample.onloadedmetadata = addLayers
+    }
+    const addLayers = () => {
+      movie.width = sample.videoWidth // you could also do canvas.width = sample.videoWidth;
+      movie.height = sample.videoHeight
+      const width = movie.width / cols; const height = movie.height / rows
+      let numbLoaded = 0
+      for (let y = 0; y < movie.height; y += height) {
+        for (let x = 0; x < movie.width; x += width) {
+          const video = document.createElement('video')
+          video.src = '../assets/sample.ogv'
+          if (x * y) {
+            video.onplay = event => {
+              console.log(event)
+            }
+          }
+          video.onloadedmetadata = () => {
+            const layer = new etro.layer.Video(0, video, {
+              x: x, y: y, width: width, height: height
+              // mediaStartTime: 0
+            }).addEffect(new etro.effect.Channels({
+              r: 0.5 + Math.random() * 0.5,
+              g: 0.5 + Math.random() * 0.5,
+              b: 0.5 + Math.random() * 0.5
+            }))
+            movie.addLayer(layer)
+            numbLoaded++
+            if (numbLoaded === rows * cols) {
+              end()
+            }
+          }
+        }
+      }
+    }
+    const end = () => {
+      movie
+        .addLayer(new etro.layer.Text(0, sample.duration, 'etro', {
+          width: movie.width / 2,
+          height: movie.height / 2,
+          x: movie.width / 4,
+          y: movie.height / 4,
+          textX: -movie.width / 4 + movie.width / 2,
+          textY: -movie.height / 4 + movie.height / 2,
+          background: 'rgba(255,0,200,0.4)',
+          color: 'rgba(255,255,255,0.7)',
+          font: '24px monospace',
+          textAlign: 'center',
+          textBaseline: 'middle'
+        }))
+        .play()
+    }
+    window.addEventListener('load', begin)
+  </script>
+</body>
+</html>