etro 0.6.0 → 0.7.0

package/src/layer.js

@@ -480,21 +480,15 @@ export class Image extends Visual {
    * @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()
@@ -505,13 +499,21 @@ export class Image extends Visual {
 
   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
     )
   }
 
@@ -548,19 +550,7 @@ export class Image extends Visual {
        * @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
     }
   }
 }
@@ -599,7 +589,8 @@ export const MediaMixin = superclass => {
         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)
       }
@@ -608,7 +599,7 @@ export const MediaMixin = superclass => {
         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)
@@ -616,9 +607,12 @@ export const MediaMixin = superclass => {
 
       // 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)
+        }
       })
     }
 
@@ -634,6 +628,24 @@ export const MediaMixin = superclass => {
       })
       // 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)
     }
 
@@ -671,6 +683,17 @@ export const MediaMixin = superclass => {
       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
     }
@@ -759,21 +782,15 @@ export class Video extends MediaMixin(Visual) {
    * @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
@@ -782,11 +799,28 @@ export class Video extends MediaMixin(Visual) {
 
   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 () {
@@ -805,29 +839,17 @@ export class Video extends MediaMixin(Visual) {
        */
       clipY: 0,
       /**
-       * @name module:layer.Video#mediaX
+       * @name module:layer.Video#clipWidth
        * @type number
-       * @desc Video offset relative to layer
+       * @desc Video source width, or <code>undefined</code> to fill the entire layer
        */
-      mediaX: 0,
-      /**
-       * @name module:layer.Video#mediaY
-       * @type number
-       * @desc Video offset relative to layer
-       */
-      mediaY: 0,
-      /**
-       * @name module:layer.Video#mediaWidth
-       * @type number
-       * @desc Video destination width
-       */
-      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
     }
   }
 }

package/src/movie.js

@@ -158,7 +158,7 @@ export default class Movie {
 
       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
@@ -178,11 +178,12 @@ export default class Movie {
    * @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')
     }
 
@@ -235,7 +236,11 @@ export default class Movie {
         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
 
@@ -277,7 +282,7 @@ export default class Movie {
    * @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) {
@@ -321,14 +326,14 @@ export default class Movie {
 
     // 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
   }
 
@@ -363,7 +368,7 @@ export default class Movie {
       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
@@ -377,7 +382,7 @@ export default class Movie {
         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)
@@ -416,13 +421,9 @@ export default class Movie {
    * @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)
     })
   }
 

package/src/util.js

@@ -4,6 +4,22 @@
 
 import { publish } from './event.js'
 
+/**
+ * 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`.
@@ -27,7 +43,9 @@ export function applyOptions (options, destObj) {
 
   // 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]
     }
   }