etro 0.6.0 → 0.7.0

package/dist/{etro.js → etro-iife.js}

@@ -89,6 +89,22 @@ var etro = (function () {
    * @module util
    */
 
+  /**
+   * Gets the first matching property descriptor in the prototype chain, or undefined.
+   * @param {Object} obj
+   * @param {string|Symbol} name
+   */
+  function getPropertyDescriptor (obj, name) {
+    do {
+      const propDesc = Object.getOwnPropertyDescriptor(obj, name);
+      if (propDesc) {
+        return propDesc
+      }
+      obj = Object.getPrototypeOf(obj);
+    } while (obj)
+    return undefined
+  }
+
   /**
    * Merges `options` with `defaultOptions`, and then copies the properties with the keys in `defaultOptions`
    *  from the merged object to `destObj`.
@@ -112,7 +128,9 @@ var etro = (function () {
 
     // copy options
     for (const option in options) {
-      if (!(option in destObj)) {
+      const propDesc = getPropertyDescriptor(destObj, option);
+      // Update the property as long as the property has not been set (unless if it has a setter)
+      if (!propDesc || propDesc.set) {
         destObj[option] = options[option];
       }
     }
@@ -1064,21 +1082,15 @@ var etro = (function () {
      * @param {number} [options.clipY=0] - image source y
      * @param {number} [options.clipWidth=undefined] - image source width, or <code>undefined</code> to fill the entire layer
      * @param {number} [options.clipHeight=undefined] - image source height, or <code>undefined</code> to fill the entire layer
-     * @param {number} [options.imageX=0] - offset of the image relative to the layer
-     * @param {number} [options.imageY=0] - offset of the image relative to the layer
      */
     constructor (startTime, duration, image, options = {}) {
       super(startTime, duration, options); // wait to set width & height
       applyOptions(options, this);
-      // clipX... => how much to show of this.image
-      // imageX... => how to project this.image onto the canvas
       this._image = image;
 
       const load = () => {
-        this.width = this.imageWidth = this.width || this.image.width;
-        this.height = this.imageHeight = this.height || this.image.height;
-        this.clipWidth = this.clipWidth || image.width;
-        this.clipHeight = this.clipHeight || image.height;
+        this.width = this.width || this.clipWidth || this.image.width;
+        this.height = this.height || this.clipHeight || this.image.height;
       };
       if (image.complete) {
         load();
@@ -1089,13 +1101,21 @@ var etro = (function () {
 
     doRender (reltime) {
       super.doRender(reltime); // clear/fill background
+
+      const w = val(this, 'width', reltime);
+      const h = val(this, 'height', reltime);
+
+      let cw = val(this, 'clipWidth', reltime);
+      if (cw === undefined) cw = w;
+      let ch = val(this, 'clipHeight', reltime);
+      if (ch === undefined) ch = h;
+
       this.cctx.drawImage(
         this.image,
         val(this, 'clipX', reltime), val(this, 'clipY', reltime),
-        val(this, 'clipWidth', reltime), val(this, 'clipHeight', reltime),
-        // this.imageX and this.imageY are relative to layer
-        val(this, 'imageX', reltime), val(this, 'imageY', reltime),
-        val(this, 'imageWidth', reltime), val(this, 'imageHeight', reltime)
+        cw, ch,
+        0, 0,
+        w, h
       );
     }
 
@@ -1132,19 +1152,7 @@ var etro = (function () {
          * @type number
          * @desc Image source height, or <code>undefined</code> to fill the entire layer
          */
-        clipHeight: undefined,
-        /**
-         * @name module:layer.Image#imageX
-         * @type number
-         * @desc Offset of the image relative to the layer
-         */
-        imageX: 0,
-        /**
-         * @name module:layer.Image#imageX
-         * @type number
-         * @desc Offset of the image relative to the layer
-         */
-        imageY: 0
+        clipHeight: undefined
       }
     }
   }
@@ -1183,7 +1191,8 @@ var etro = (function () {
           if ((options.duration || (media.duration - this.mediaStartTime)) < 0) {
             throw new Error('Invalid options.duration or options.mediaStartTime')
           }
-          this.duration = options.duration || (media.duration - this.mediaStartTime);
+          this._unstretchedDuration = options.duration || (media.duration - this.mediaStartTime);
+          this.duration = this._unstretchedDuration / (this.playbackRate);
           // onload will use `this`, and can't bind itself because it's before super()
           onload && onload.bind(this)(media, options);
         };
@@ -1192,7 +1201,7 @@ var etro = (function () {
           load();
         } else {
           // when this frame's data is available
-          media.addEventListener('canplay', load);
+          media.addEventListener('loadedmetadata', load);
         }
         media.addEventListener('durationchange', () => {
           this.duration = options.duration || (media.duration - this.mediaStartTime);
@@ -1200,9 +1209,12 @@ var etro = (function () {
 
         // TODO: on unattach?
         subscribe(this, 'movie.audiodestinationupdate', event => {
-          // reset destination
-          this.source.disconnect();
-          this.source.connect(event.destination);
+          // Connect to new destination if immeidately connected to the existing
+          // destination.
+          if (this._connectedToDestination) {
+            this.source.disconnect(this.movie.actx.destination);
+            this.source.connect(event.destination);
+          }
         });
       }
 
@@ -1218,6 +1230,24 @@ var etro = (function () {
         });
         // connect to audiocontext
         this._source = movie.actx.createMediaElementSource(this.media);
+
+        // Spy on connect and disconnect to remember if it connected to
+        // actx.destination (for Movie#record).
+        const oldConnect = this._source.connect.bind(this.source);
+        this._source.connect = (destination, outputIndex, inputIndex) => {
+          this._connectedToDestination = destination === movie.actx.destination;
+          return oldConnect(destination, outputIndex, inputIndex)
+        };
+        const oldDisconnect = this._source.disconnect.bind(this.source);
+        this._source.disconnect = (destination, output, input) => {
+          if (this.connectedToDestination &&
+          destination === movie.actx.destination) {
+            this._connectedToDestination = false;
+          }
+          return oldDisconnect(destination, output, input)
+        };
+
+        // Connect to actx.destination by default (can be rewired by user)
         this.source.connect(movie.actx.destination);
       }
 
@@ -1255,6 +1285,17 @@ var etro = (function () {
         return this._source
       }
 
+      get playbackRate () {
+        return this._playbackRate
+      }
+
+      set playbackRate (value) {
+        this._playbackRate = value;
+        if (this._unstretchedDuration !== undefined) {
+          this.duration = this._unstretchedDuration / value;
+        }
+      }
+
       get startTime () {
         return this._startTime
       }
@@ -1342,21 +1383,15 @@ var etro = (function () {
      * @param {numer} [options.duration=media.duration-options.mediaStartTime]
      * @param {number} [options.clipX=0] - video source x
      * @param {number} [options.clipY=0] - video source y
-     * @param {number} [options.clipWidth=0] - video destination width
-     * @param {number} [options.clipHeight=0] - video destination height
-     * @param {number} [options.mediaX=0] - video offset relative to the layer
-     * @param {number} [options.mediaY=0] - video offset relative to the layer
+     * @param {number} [options.clipWidth] - video destination width
+     * @param {number} [options.clipHeight] - video destination height
      */
     constructor (startTime, media, options = {}) {
       // fill in the zeros once loaded
       super(startTime, media, function () {
-        this.width = this.mediaWidth = options.width || media.videoWidth;
-        this.height = this.mediaHeight = options.height || media.videoHeight;
-        this.clipWidth = options.clipWidth || media.videoWidth;
-        this.clipHeight = options.clipHeight || media.videoHeight;
+        this.width = options.width || options.clipWidth || media.videoWidth;
+        this.height = options.height || options.clipHeight || media.videoHeight;
       }, options);
-      // clipX... => how much to show of this.media
-      // mediaX... => how to project this.media onto the canvas
       applyOptions(options, this);
       if (this.duration === undefined) {
         this.duration = media.duration - this.mediaStartTime;
@@ -1365,11 +1400,28 @@ var etro = (function () {
 
     doRender (reltime) {
       super.doRender();
+
+      // Determine layer width & height.
+      // When properties can use custom logic to return a value,
+      // this will look a lot cleaner.
+      let w = val(this, 'width', reltime);
+      let h = val(this, 'height', reltime) || this._movie.height;
+      // fall back to movie dimensions (only if user sets this.width = null)
+      if (w === undefined) w = this._movie.width;
+      if (h === undefined) h = this._movie.height;
+
+      let cw = val(this, 'clipWidth', reltime);
+      let ch = val(this, 'clipHeight', reltime);
+      // fall back to layer dimensions
+      if (cw === undefined) cw = w;
+      if (ch === undefined) ch = h;
+
       this.cctx.drawImage(this.media,
         val(this, 'clipX', reltime), val(this, 'clipY', reltime),
-        val(this, 'clipWidth', reltime), val(this, 'clipHeight', reltime),
-        val(this, 'mediaX', reltime), val(this, 'mediaY', reltime), // relative to layer
-        val(this, 'mediaWidth', reltime), val(this, 'mediaHeight', reltime));
+        cw, ch,
+        0, 0,
+        w, h
+      );
     }
 
     getDefaultOptions () {
@@ -1388,29 +1440,17 @@ var etro = (function () {
          */
         clipY: 0,
         /**
-         * @name module:layer.Video#mediaX
-         * @type number
-         * @desc Video offset relative to layer
-         */
-        mediaX: 0,
-        /**
-         * @name module:layer.Video#mediaY
-         * @type number
-         * @desc Video offset relative to layer
-         */
-        mediaY: 0,
-        /**
-         * @name module:layer.Video#mediaWidth
+         * @name module:layer.Video#clipWidth
          * @type number
-         * @desc Video destination width
+         * @desc Video source width, or <code>undefined</code> to fill the entire layer
          */
-        mediaWidth: undefined,
+        clipWidth: undefined,
         /**
-         * @name module:layer.Video#mediaHeight
+         * @name module:layer.Video#clipHeight
          * @type number
-         * @desc Video destination height
+         * @desc Video source height, or <code>undefined</code> to fill the entire layer
          */
-        mediaHeight: undefined
+        clipHeight: undefined
       }
     }
   }
@@ -1623,7 +1663,7 @@ var etro = (function () {
 
         if (!this._renderingFrame) {
           // Not rendering (and not playing), so play
-          this._render(undefined, resolve);
+          this._render(true, undefined, resolve);
         }
         // Stop rendering frame if currently doing so, because playing has higher priority.
         this._renderingFrame = false; // this will effect the next _render call
@@ -1643,11 +1683,12 @@ var etro = (function () {
      * @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 <code>MediaRecorder</code>
+     * @param {string} [options.type='video/webm'] - MIME type for exported video
      *  constructor
      * @return {Promise} resolves when done recording, rejects when internal media recorder errors
      */
     record (framerate, options = {}) {
-      if (options.video === options.audio === false) {
+      if (options.video === false && options.audio === false) {
         throw new Error('Both video and audio cannot be disabled')
       }
 
@@ -1700,7 +1741,11 @@ var etro = (function () {
           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"} */));
+          resolve(
+            new Blob(recordedChunks, {
+              type: options.type || 'video/webm'
+            }/*, {"type" : "audio/ogg; codecs=opus"} */)
+          );
         };
         mediaRecorder.onerror = reject;
 
@@ -1742,7 +1787,7 @@ var etro = (function () {
      * @param {function} [done=undefined] - called when done playing or when the current frame is loaded
      * @private
      */
-    _render (timestamp = performance.now(), done = undefined) {
+    _render (repeat, timestamp = performance.now(), done = undefined) {
       clearCachedValues(this);
 
       if (!this.rendering) {
@@ -1786,14 +1831,14 @@ var etro = (function () {
 
       // 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 && frameFullyLoaded) {
+      if (!repeat || (this._renderingFrame && frameFullyLoaded)) {
         this._renderingFrame = false;
         done && done();
         return
       }
 
       window.requestAnimationFrame(timestamp => {
-        this._render(timestamp);
+        this._render(repeat, timestamp);
       }); // TODO: research performance cost
     }
 
@@ -1828,7 +1873,7 @@ var etro = (function () {
         const layer = this.layers[i];
         const reltime = this.currentTime - layer.startTime;
         // Cancel operation if layer disabled or outside layer time interval
-        if (!layer.enabled ||
+        if (!val(layer, 'enabled', reltime) ||
           //                                                         > or >= ?
           this.currentTime < layer.startTime || this.currentTime > layer.startTime + layer.duration) {
           // outside time interval
@@ -1842,7 +1887,7 @@ var etro = (function () {
           continue
         }
         // if only rendering this frame, we are not "starting" the layer
-        if (!layer.active && layer.enabled && !this._renderingFrame) {
+        if (!layer.active && val(layer, 'enabled', reltime) && !this._renderingFrame) {
           // TODO: make an `activate()` method?
           // console.log("start");
           layer.start(reltime);
@@ -1881,13 +1926,9 @@ var etro = (function () {
      * @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);
+        this._render(false, undefined, resolve);
       })
     }
 
@@ -2349,7 +2390,6 @@ var etro = (function () {
       } */
 
     apply (target, reltime) {
-      const gl = this._gl;
       this._checkDimensions(target);
       this._refreshGl();
 
@@ -2357,7 +2397,7 @@ var etro = (function () {
       this._enableTexCoordAttrib();
       this._prepareTextures(target, reltime);
 
-      gl.useProgram(this._program);
+      this._gl.useProgram(this._program);
 
       this._prepareUniforms(target, reltime);
 
@@ -2635,6 +2675,8 @@ var etro = (function () {
     // worry about mipmaps)
     const w = target instanceof HTMLVideoElement ? target.videoWidth : target.width;
     const h = target instanceof HTMLVideoElement ? target.videoHeight : target.height;
+    gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, minFilter);
+    gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, magFilter);
     if ((w && isPowerOf2(w)) && (h && isPowerOf2(h))) {
       // Yes, it's a power of 2. All wrap modes are valid. Generate mips.
       gl.texParameteri(target, gl.TEXTURE_WRAP_S, wrapS);
@@ -2648,8 +2690,6 @@ var etro = (function () {
       }
       gl.texParameteri(target, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
       gl.texParameteri(target, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-      gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, minFilter);
-      gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, magFilter);
     }
 
     return tex
@@ -3340,11 +3380,15 @@ var etro = (function () {
     }
 
     apply (target, reltime) {
-      const ctx = target.cctx; const canvas = target.canvas;
-      const x = val(this, 'x', reltime); const y = val(this.y, target, reltime);
-      const radiusX = val(this, 'radiusX', reltime); const radiusY = val(this.radiusY, target, reltime);
+      const ctx = target.cctx;
+      const canvas = target.canvas;
+      const x = val(this, 'x', reltime);
+      const y = val(this, 'y', reltime);
+      const radiusX = val(this, 'radiusX', reltime);
+      const radiusY = val(this, 'radiusY', reltime);
       const rotation = val(this, 'rotation', reltime);
-      const startAngle = val(this, 'startAngle', reltime); const endAngle = val(this.endAngle, target, reltime);
+      const startAngle = val(this, 'startAngle', reltime);
+      const endAngle = val(this, 'endAngle', reltime);
       const anticlockwise = val(this, 'anticlockwise', reltime);
       this._tmpCanvas.width = target.canvas.width;
       this._tmpCanvas.height = target.canvas.height;

package/examples/introduction/export.html

@@ -8,7 +8,9 @@
     // TODO: test audio output on a device that actually has drivers
     import etro from '../../src/index.js'
     let movie
-    window.addEventListener('load', () => {
+    const btn = document.querySelector('button')
+    btn.addEventListener('click', () => {
+      btn.disabled = true
       const canvas = document.createElement('canvas')
       canvas.width = 600
       canvas.height = 400
@@ -36,7 +38,7 @@
         }))
         .addLayer(new etro.layer.Video(3, video, {
           // trim video to only include 3 seconds starting 2 minutes into the video in the video
-          mediaStartTime: 120,
+          mediaStartTime: 5,
           duration: 3
         }))
         .addLayer(new etro.layer.Audio(6, document.querySelector('#input audio'), {
@@ -49,11 +51,15 @@
         .then(blob => {
           const video = document.querySelector('#output video')
           video.src = URL.createObjectURL(blob)
-          document.querySelector('p').innerHTML = 'Done'
         })
         .catch(error => {
           throw error
         })
+
+      window.addEventListener('unload', () => {
+        const video = document.querySelector('#output video')
+        URL.revokeObjectURL(video.src)
+      })
     }
   </script>
   <div id="input">
@@ -65,6 +71,6 @@
     <video controls></video><br>
   </div>
 
-  <p>Recording</p>
+  <button>Record</button>
 </body>
 </html>

package/karma.conf.js

@@ -13,7 +13,7 @@ module.exports = function (config) {
 
     // list of files / patterns to load in the browser
     files: [
-      'dist/etro.js',
+      'dist/etro-iife.js',
       'spec/*.spec.js',
       { pattern: 'spec/assets/**/*', included: false }
     ],

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "etro",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A flexible video-editing library for the browser",
+  "main": "dist/etro-cjs.js",
   "browser": "src/index.js",
   "directories": {
     "doc": "docs",
@@ -11,6 +12,7 @@
   "dependencies": {},
   "devDependencies": {
     "docdash": "^1.1.1",
+    "ecstatic": ">=4.1.3",
     "eslint": "^6.5.1",
     "eslint-config-standard": "^14.1.0",
     "eslint-plugin-html": "^6.0.0",
@@ -19,11 +21,11 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "ev": "0.0.7",
-    "http-server": "^0.11.1",
+    "http-server": "^0.12.3",
     "jasmine": "^3.4.0",
     "jsdoc": "^3.6.3",
     "jsdoc-export-default-interop": "^0.3.1",
-    "karma": "^4.3.0",
+    "karma": "^5.0.5",
     "karma-chrome-launcher": "^3.1.0",
     "karma-jasmine": "^2.0.1",
     "puppeteer": "^2.0.0",

package/rollup.config.js

@@ -5,7 +5,12 @@ export default [
   // iife bundle
   {
     input: 'src/index.js',
-    output: { file: 'dist/etro.js', format: 'iife', name: 'etro' },
+    output: { file: 'dist/etro-iife.js', format: 'iife', name: 'etro' },
+    plugins: [resolve()]
+  },
+  {
+    input: 'src/index.js',
+    output: { file: 'dist/etro-cjs.js', format: 'cjs' },
     plugins: [resolve()]
   }
   // // es6 module bundle

package/scripts/gen-effect-samples.html

@@ -2,7 +2,7 @@
 <!DOCTYPE html>
 <html>
 <body>
-  <script src="../dist/etro.js"></script>
+  <script src="../dist/etro-iife.js"></script>
   <script>
     /**
      * Prepares a canvas for saving

package/spec/layer.spec.js

@@ -96,6 +96,28 @@ describe('Layers', function () {
     })
   })
 
+  describe('Media', function () {
+    let layer
+    // Media is an abstract mixin, so make a concrete subclass here.
+    const CustomMedia = etro.layer.MediaMixin(etro.layer.Base)
+    const source = new Audio()
+
+    beforeAll(function (done) {
+      source.addEventListener('canplay', done)
+      source.src = '/base/spec/assets/layer/audio.wav'
+    })
+
+    beforeEach(function () {
+      layer = new CustomMedia(0, source)
+    })
+
+    it('should have its duration depend on its playbackRate', function () {
+      const oldDuration = layer.duration
+      layer.playbackRate = 2
+      expect(layer.duration).toBe(oldDuration / 2)
+    })
+  })
+
   // I suspect this doesn't work becuase of autoplay restrictions
   /* describe('Audio', function () {
     let layer

package/spec/movie.spec.js

@@ -62,6 +62,14 @@ describe('Movie', function () {
           throw e
         })
     })
+
+    it('can record with custom MIME type', function (done) {
+      movie.record(60, { type: 'video/mp4' })
+        .then(video => {
+          expect(video.type).toBe('video/mp4')
+          done()
+        })
+    })
   })
 
   describe('events ->', function () {

package/src/effect.js

@@ -250,7 +250,6 @@ export class Shader extends Base {
     } */
 
   apply (target, reltime) {
-    const gl = this._gl
     this._checkDimensions(target)
     this._refreshGl()
 
@@ -258,7 +257,7 @@ export class Shader extends Base {
     this._enableTexCoordAttrib()
     this._prepareTextures(target, reltime)
 
-    gl.useProgram(this._program)
+    this._gl.useProgram(this._program)
 
     this._prepareUniforms(target, reltime)
 
@@ -536,6 +535,8 @@ Shader._loadTexture = (gl, source, options = {}) => {
   // worry about mipmaps)
   const w = target instanceof HTMLVideoElement ? target.videoWidth : target.width
   const h = target instanceof HTMLVideoElement ? target.videoHeight : target.height
+  gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, minFilter)
+  gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, magFilter)
   if ((w && isPowerOf2(w)) && (h && isPowerOf2(h))) {
     // Yes, it's a power of 2. All wrap modes are valid. Generate mips.
     gl.texParameteri(target, gl.TEXTURE_WRAP_S, wrapS)
@@ -549,8 +550,6 @@ Shader._loadTexture = (gl, source, options = {}) => {
     }
     gl.texParameteri(target, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
     gl.texParameteri(target, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
-    gl.texParameteri(target, gl.TEXTURE_MIN_FILTER, minFilter)
-    gl.texParameteri(target, gl.TEXTURE_MAG_FILTER, magFilter)
   }
 
   return tex
@@ -1241,11 +1240,15 @@ export class EllipticalMask extends Base {
   }
 
   apply (target, reltime) {
-    const ctx = target.cctx; const canvas = target.canvas
-    const x = val(this, 'x', reltime); const y = val(this.y, target, reltime)
-    const radiusX = val(this, 'radiusX', reltime); const radiusY = val(this.radiusY, target, reltime)
+    const ctx = target.cctx
+    const canvas = target.canvas
+    const x = val(this, 'x', reltime)
+    const y = val(this, 'y', reltime)
+    const radiusX = val(this, 'radiusX', reltime)
+    const radiusY = val(this, 'radiusY', reltime)
     const rotation = val(this, 'rotation', reltime)
-    const startAngle = val(this, 'startAngle', reltime); const endAngle = val(this.endAngle, target, reltime)
+    const startAngle = val(this, 'startAngle', reltime)
+    const endAngle = val(this, 'endAngle', reltime)
     const anticlockwise = val(this, 'anticlockwise', reltime)
     this._tmpCanvas.width = target.canvas.width
     this._tmpCanvas.height = target.canvas.height