etro 0.8.0 → 0.8.3

package/src/event.ts

@@ -21,15 +21,13 @@ class TypeId {
   }
 
   contains (other) {
-    if (other._parts.length > this._parts.length) {
+    if (other._parts.length > this._parts.length)
       return false
-    }
 
-    for (let i = 0; i < other._parts.length; i++) {
-      if (other._parts[i] !== this._parts[i]) {
+    for (let i = 0; i < other._parts.length; i++)
+      if (other._parts[i] !== this._parts[i])
         return false
-      }
-    }
+
     return true
   }
 
@@ -47,9 +45,8 @@ class TypeId {
  * @param listener
  */
 export function subscribe (target: EtroObject, type: string, listener: <T extends Event>(T) => void): void {
-  if (!listeners.has(target)) {
+  if (!listeners.has(target))
     listeners.set(target, [])
-  }
 
   listeners.get(target).push(
     { type: new TypeId(type), listener }
@@ -67,9 +64,8 @@ export function subscribe (target: EtroObject, type: string, listener: <T extend
 export function unsubscribe (target: EtroObject, listener: <T extends Event>(T) => void): void {
   // Make sure `listener` has been added with `subscribe`.
   if (!listeners.has(target) ||
-  !listeners.get(target).map(pair => pair.listener).includes(listener)) {
+  !listeners.get(target).map(pair => pair.listener).includes(listener))
     throw new Error('No matching event listener to remove')
-  }
 
   const removed = listeners.get(target)
     .filter(pair => pair.listener !== listener)
@@ -90,18 +86,16 @@ export function publish (target: EtroObject, type: string, event: Record<string,
 
   const t = new TypeId(type)
 
-  if (!listeners.has(target)) {
+  if (!listeners.has(target))
     // No event fired
     return null
-  }
 
   // Call event listeners for this event.
   const listenersForType = []
   for (let i = 0; i < listeners.get(target).length; i++) {
     const item = listeners.get(target)[i]
-    if (t.contains(item.type)) {
+    if (t.contains(item.type))
       listenersForType.push(item.listener)
-    }
   }
 
   for (let i = 0; i < listenersForType.length; i++) {

package/src/layer/audio-source.ts

@@ -70,22 +70,22 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
 
       const load = () => {
         // TODO:              && ?
-        if ((options.duration || (this.source.duration - this.sourceStartTime)) < 0) {
+        if ((options.duration || (this.source.duration - this.sourceStartTime)) < 0)
           throw new Error('Invalid options.duration or options.sourceStartTime')
-        }
+
         this._unstretchedDuration = options.duration || (this.source.duration - this.sourceStartTime)
         this.duration = this._unstretchedDuration / (this.playbackRate)
         // onload will use `this`, and can't bind itself because it's before
         // super()
         onload && onload.bind(this)(this.source, options)
       }
-      if (this.source.readyState >= 2) {
+      if (this.source.readyState >= 2)
         // this frame's data is available now
         load()
-      } else {
+      else
         // when this frame's data is available
         this.source.addEventListener('loadedmetadata', load)
-      }
+
       this.source.addEventListener('durationchange', () => {
         this.duration = options.duration || (this.source.duration - this.sourceStartTime)
       })
@@ -95,11 +95,10 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
       super.attach(movie)
 
       subscribe(movie, 'movie.seek', () => {
-        const time = movie.currentTime
-        if (time < this.startTime || time >= this.startTime + this.duration) {
+        if (this.currentTime < 0 || this.currentTime >= this.duration)
           return
-        }
-        this.source.currentTime = time - this.startTime
+
+        this.source.currentTime = this.currentTime + this.sourceStartTime
       })
 
       // TODO: on unattach?
@@ -113,7 +112,7 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
       })
 
       // connect to audiocontext
-      this._audioNode = movie.actx.createMediaElementSource(this.source)
+      this._audioNode = this.audioNode || movie.actx.createMediaElementSource(this.source)
 
       // Spy on connect and disconnect to remember if it connected to
       // actx.destination (for Movie#record).
@@ -125,9 +124,9 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
       const oldDisconnect = this._audioNode.disconnect.bind(this.audioNode)
       this._audioNode.disconnect = <T extends IAudioDestinationNode<AudioContext>>(destination?: T | number, output?: number, input?: number): AudioNode => {
         if (this._connectedToDestination &&
-        destination === movie.actx.destination) {
+        destination === movie.actx.destination)
           this._connectedToDestination = false
-        }
+
         return oldDisconnect(destination, output, input)
       }
 
@@ -135,6 +134,10 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
       this.audioNode.connect(movie.actx.destination)
     }
 
+    detach () {
+      this.audioNode.disconnect(this.movie.actx.destination)
+    }
+
     start () {
       this.source.currentTime = this.currentTime + this.sourceStartTime
       this.source.play()
@@ -166,9 +169,8 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
 
     set playbackRate (value) {
       this._playbackRate = value
-      if (this._unstretchedDuration !== undefined) {
+      if (this._unstretchedDuration !== undefined)
         this.duration = this._unstretchedDuration / value
-      }
     }
 
     get startTime () {

package/src/layer/audio.ts

@@ -14,9 +14,8 @@ class Audio extends AudioSourceMixin<BaseOptions>(Base) {
    */
   constructor (options: AudioOptions) {
     super(options)
-    if (this.duration === undefined) {
+    if (this.duration === undefined)
       this.duration = (this).source.duration - this.sourceStartTime
-    }
   }
 
   getDefaultOptions (): AudioOptions {

package/src/layer/base.ts

@@ -70,22 +70,41 @@ class Base implements EtroObject {
     return newThis
   }
 
-  attach (movie: Movie): void {
+  /**
+   * Attaches this layer to `movie` if not already attached.
+   * @ignore
+   */
+  tryAttach (movie: Movie): void {
+    if (this._occurrenceCount === 0)
+      this.attach(movie)
+
     this._occurrenceCount++
+  }
+
+  attach (movie: Movie): void {
     this._movie = movie
   }
 
-  detach (): void {
-    if (this.movie === null) {
+  /**
+   * Dettaches this layer from its movie if the number of times `tryDetach` has
+   * been called (including this call) equals the number of times `tryAttach`
+   * has been called.
+   *
+   * @ignore
+   */
+  tryDetach (): void {
+    if (this.movie === null)
       throw new Error('No movie to detach from')
-    }
 
     this._occurrenceCount--
     // If this layer occurs in another place in a `layers` array, do not unset
     // _movie. (For calling `unshift` on the `layers` proxy)
-    if (this._occurrenceCount === 0) {
-      this._movie = null
-    }
+    if (this._occurrenceCount === 0)
+      this.detach()
+  }
+
+  detach (): void {
+    this._movie = null
   }
 
   /**

package/src/layer/visual.ts

@@ -68,9 +68,9 @@ class Visual extends Base {
       set: (target, property, value) => {
         if (!isNaN(Number(property))) {
           // The property is a number (index)
-          if (target[property]) {
+          if (target[property])
             target[property].detach()
-          }
+
           value.attach(this)
         }
         target[property] = value
@@ -83,6 +83,12 @@ class Visual extends Base {
    * Render visual output
    */
   render (): void {
+    // Prevent empty canvas errors if the width or height is 0
+    const width = val(this, 'width', this.currentTime)
+    const height = val(this, 'height', this.currentTime)
+    if (width === 0 || height === 0)
+      return
+
     this.beginRender()
     this.doRender()
     this.endRender()
@@ -116,19 +122,18 @@ class Visual extends Base {
   endRender (): void {
     const w = val(this, 'width', this.currentTime) || val(this.movie, 'width', this.movie.currentTime)
     const h = val(this, 'height', this.currentTime) || val(this.movie, 'height', this.movie.currentTime)
-    if (w * h > 0) {
+    if (w * h > 0)
       this._applyEffects()
-    }
+
     // else InvalidStateError for drawing zero-area image in some effects, right?
   }
 
   _applyEffects (): void {
     for (let i = 0; i < this.effects.length; i++) {
       const effect = this.effects[i]
-      if (effect.enabled) {
+      if (effect && effect.enabled)
         // Pass relative time
         effect.apply(this, this.movie.currentTime - this.startTime)
-      }
     }
   }
 

package/src/movie.ts

@@ -95,7 +95,7 @@ export class Movie {
         // Refresh screen when effect is removed, if the movie isn't playing
         // already.
         const value = target[property]
-        value.detach()
+        value.tryDetach()
         delete target[property]
         publish(that, 'movie.change.effect.remove', { effect: value })
         return true
@@ -107,10 +107,10 @@ export class Movie {
             publish(that, 'movie.change.effect.remove', {
               effect: target[property]
             })
-            target[property].detach()
+            target[property].tryDetach()
           }
           // Attach effect to movie
-          value.attach(that)
+          value.tryAttach(that)
           target[property] = value
           // Refresh screen when effect is set, if the movie isn't playing
           // already.
@@ -118,6 +118,7 @@ export class Movie {
         } else {
           target[property] = value
         }
+
         return true
       }
     })
@@ -127,12 +128,12 @@ export class Movie {
       deleteProperty (target, property): boolean {
         const oldDuration = this.duration
         const value = target[property]
-        value.detach(that)
+        value.tryDetach(that)
         delete target[property]
         const current = that.currentTime >= value.startTime && that.currentTime < value.startTime + value.duration
-        if (current) {
+        if (current)
           publish(that, 'movie.change.layer.remove', { layer: value })
-        }
+
         publish(that, 'movie.change.duration', { oldDuration })
         return true
       },
@@ -144,20 +145,21 @@ export class Movie {
             publish(that, 'movie.change.layer.remove', {
               layer: target[property]
             })
-            target[property].detach()
+            target[property].tryDetach()
           }
           // Attach layer to movie
-          value.attach(that)
+          value.tryAttach(that)
           target[property] = value
           // Refresh screen when a relevant layer is added or removed
           const current = that.currentTime >= value.startTime && that.currentTime < value.startTime + value.duration
-          if (current) {
+          if (current)
             publish(that, 'movie.change.layer.add', { layer: value })
-          }
+
           publish(that, 'movie.change.duration', { oldDuration })
         } else {
           target[property] = value
         }
+
         return true
       }
     })
@@ -179,15 +181,13 @@ export class Movie {
     // newThis._updateInterval = 0.1; // time in seconds between each "timeupdate" event
     // newThis._lastUpdate = -1;
 
-    if (newThis.autoRefresh) {
+    if (newThis.autoRefresh)
       newThis.refresh() // render single frame on creation
-    }
 
     // Subscribe to own event "change" (child events propogate up)
     subscribe(newThis, 'movie.change', () => {
-      if (newThis.autoRefresh && !newThis.rendering) {
+      if (newThis.autoRefresh && !newThis.rendering)
         newThis.refresh()
-      }
     })
 
     // Subscribe to own event "ended"
@@ -207,18 +207,17 @@ export class Movie {
    */
   play (): Promise<void> {
     return new Promise(resolve => {
-      if (!this.paused) {
+      if (!this.paused)
         throw new Error('Already playing')
-      }
 
       this._paused = this._ended = false
       this._lastPlayed = performance.now()
       this._lastPlayedOffset = this.currentTime
 
-      if (!this.renderingFrame) {
+      if (!this.renderingFrame)
         // Not rendering (and not playing), so play.
         this._render(true, undefined, resolve)
-      }
+
       // Stop rendering frame if currently doing so, because playing has higher
       // priority. This will effect the next _render call.
       this._renderingFrame = false
@@ -250,13 +249,16 @@ export class Movie {
     audio?: boolean,
     mediaRecorderOptions?: Record<string, unknown>
   }): Promise<Blob> {
-    if (options.video === false && options.audio === false) {
+    if (options.video === false && options.audio === false)
       throw new Error('Both video and audio cannot be disabled')
-    }
 
-    if (!this.paused) {
+    if (!this.paused)
       throw new Error('Cannot record movie while already playing or recording')
-    }
+
+    const mimeType = options.type || 'video/webm'
+    if (MediaRecorder && MediaRecorder.isTypeSupported && !MediaRecorder.isTypeSupported(mimeType))
+      throw new Error('Please pass a valid MIME type for the exported video')
+
     return new Promise((resolve, reject) => {
       const canvasCache = this.canvas
       // Record on a temporary canvas context
@@ -287,12 +289,15 @@ export class Movie {
         )
       }
       const stream = new MediaStream(tracks)
-      const mediaRecorder = new MediaRecorder(stream, options.mediaRecorderOptions)
+      const mediaRecorderOptions = {
+        ...(options.mediaRecorderOptions || {}),
+        mimeType
+      }
+      const mediaRecorder = new MediaRecorder(stream, mediaRecorderOptions)
       mediaRecorder.ondataavailable = event => {
         // if (this._paused) reject(new Error("Recording was interrupted"));
-        if (event.data.size > 0) {
+        if (event.data.size > 0)
           recordedChunks.push(event.data)
-        }
       }
       // TODO: publish to movie, not layers
       mediaRecorder.onstop = () => {
@@ -306,7 +311,7 @@ export class Movie {
         // Construct the exported video out of all the frame blobs.
         resolve(
           new Blob(recordedChunks, {
-            type: options.type || 'video/webm'
+            type: mimeType
           })
         )
       }
@@ -327,11 +332,13 @@ export class Movie {
   pause (): Movie {
     this._paused = true
     // Deactivate all layers
-    for (let i = 0; i < this.layers.length; i++) {
-      const layer = this.layers[i]
-      layer.stop()
-      layer.active = false
-    }
+    for (let i = 0; i < this.layers.length; i++)
+      if (Object.prototype.hasOwnProperty.call(this.layers, i)) {
+        const layer = this.layers[i]
+        layer.stop()
+        layer.active = false
+      }
+
     publish(this, 'movie.pause', {})
     return this
   }
@@ -357,18 +364,17 @@ export class Movie {
     if (!this.rendering) {
       // (!this.paused || this._renderingFrame) is true so it's playing or it's
       // rendering a single frame.
-      if (done) {
+      if (done)
         done()
-      }
+
       return
     }
 
     this._updateCurrentTime(timestamp)
     const recordingEnd = this.recording ? this._recordEndTime : this.duration
     const recordingEnded = this.currentTime > recordingEnd
-    if (recordingEnded) {
+    if (recordingEnded)
       publish(this, 'movie.recordended', { movie: this })
-    }
 
     // Bad for performance? (remember, it's calling Array.reduce)
     const end = this.duration
@@ -384,24 +390,25 @@ export class Movie {
       if (!this.repeat || this.recording) {
         this._ended = true
         // Deactivate all layers
-        for (let i = 0; i < this.layers.length; i++) {
-          const layer = this.layers[i]
-          // A layer that has been deleted before layers.length has been updated
-          // (see the layers proxy in the constructor).
-          if (!layer) {
-            continue
+        for (let i = 0; i < this.layers.length; i++)
+          if (Object.prototype.hasOwnProperty.call(this.layers, i)) {
+            const layer = this.layers[i]
+            // A layer that has been deleted before layers.length has been updated
+            // (see the layers proxy in the constructor).
+            if (!layer)
+              continue
+
+            layer.stop()
+            layer.active = false
           }
-          layer.stop()
-          layer.active = false
-        }
       }
     }
 
     // Stop playback or recording if done
     if (recordingEnded || (ended && !this.repeat)) {
-      if (done) {
+      if (done)
         done()
-      }
+
       return
     }
 
@@ -410,9 +417,8 @@ export class Movie {
     const frameFullyLoaded = this._renderLayers()
     this._applyEffects()
 
-    if (frameFullyLoaded) {
+    if (frameFullyLoaded)
       publish(this, 'movie.loadeddata', { movie: this })
-    }
 
     // If didn't load in this instant, repeatedly frame-render until frame is
     // loaded.
@@ -420,9 +426,9 @@ export class Movie {
     // stop render loop.
     if (!repeat || (this._renderingFrame && frameFullyLoaded)) {
       this._renderingFrame = false
-      if (done) {
+      if (done)
         done()
-      }
+
       return
     }
 
@@ -461,12 +467,14 @@ export class Movie {
   private _renderLayers () {
     let frameFullyLoaded = true
     for (let i = 0; i < this.layers.length; i++) {
+      if (!Object.prototype.hasOwnProperty.call(this.layers, i)) continue
+
       const layer = this.layers[i]
       // A layer that has been deleted before layers.length has been updated
       // (see the layers proxy in the constructor).
-      if (!layer) {
+      if (!layer)
         continue
-      }
+
       const reltime = this.currentTime - layer.startTime
       // Cancel operation if layer disabled or outside layer time interval
       if (!val(layer, 'enabled', reltime) ||
@@ -489,9 +497,9 @@ export class Movie {
       }
 
       // if the layer has an input file
-      if ('source' in layer) {
+      if ('source' in layer)
         frameFullyLoaded = frameFullyLoaded && (layer as unknown as AudioSource).source.readyState >= 2
-      }
+
       layer.render()
 
       // if the layer has visual component
@@ -499,11 +507,10 @@ export class Movie {
         const canvas = (layer as Visual).canvas
         // layer.canvas.width and layer.canvas.height should already be interpolated
         // if the layer has an area (else InvalidStateError from canvas)
-        if (canvas.width * canvas.height > 0) {
+        if (canvas.width * canvas.height > 0)
           this.cctx.drawImage(canvas,
             val(layer, 'x', reltime), val(layer, 'y', reltime), canvas.width, canvas.height
           )
-        }
       }
     }
 
@@ -515,9 +522,9 @@ export class Movie {
       const effect = this.effects[i]
       // An effect that has been deleted before effects.length has been updated
       // (see the effectsproxy in the constructor).
-      if (!effect) {
+      if (!effect)
         continue
-      }
+
       effect.apply(this, this.currentTime)
     }
   }
@@ -537,9 +544,9 @@ export class Movie {
    * Convienence method
    */
   private _publishToLayers (type, event) {
-    for (let i = 0; i < this.layers.length; i++) {
-      publish(this.layers[i], type, event)
-    }
+    for (let i = 0; i < this.layers.length; i++)
+      if (Object.prototype.hasOwnProperty.call(this.layers, i))
+        publish(this.layers[i], type, event)
   }
 
   /**
@@ -631,12 +638,11 @@ export class Movie {
     return new Promise((resolve, reject) => {
       this._currentTime = time
       publish(this, 'movie.seek', {})
-      if (refresh) {
+      if (refresh)
         // Pass promise callbacks to `refresh`
         this.refresh().then(resolve).catch(reject)
-      } else {
+      else
         resolve()
-      }
     })
   }