etro 0.9.1 → 0.10.0

package/src/layer/video.ts

@@ -2,14 +2,41 @@ import { Visual } from './visual'
 import { VisualSourceOptions, VisualSourceMixin } from './visual-source'
 import { AudioSourceOptions, AudioSourceMixin } from './audio-source'
 
-type VideoOptions = VisualSourceOptions & AudioSourceOptions
+interface VideoOptions extends Omit<AudioSourceOptions & VisualSourceOptions, 'duration'|'source'> {
+  duration?: number
+
+  /**
+   * The raw html `<video>` element
+   */
+  source: string | HTMLVideoElement
+}
 
-// Use mixins instead of `extend`ing two classes (which isn't supported by
-// JavaScript).
 /**
+ * Layer for an HTML video element
  * @extends AudioSource
  * @extends VisualSource
  */
-class Video extends AudioSourceMixin(VisualSourceMixin(Visual)) {}
+class Video extends AudioSourceMixin(VisualSourceMixin(Visual)) {
+  /**
+   * The raw html `<video>` element
+   */
+  source: HTMLVideoElement
+
+  constructor (options: VideoOptions) {
+    if (typeof (options.source) === 'string') {
+      const video = document.createElement('video')
+      video.src = options.source
+      options.source = video
+    }
+
+    super({
+      ...options,
+
+      // Set a default duration so that the super constructor doesn't throw an
+      // error
+      duration: options.duration ?? 0
+    } as (AudioSourceOptions & VisualSourceOptions))
+  }
+}
 
 export { Video, VideoOptions }

package/src/layer/visual-source.ts

@@ -75,10 +75,40 @@ function VisualSourceMixin<OptionsSuperclass extends VisualOptions> (superclass:
     destHeight: Dynamic<number>
 
     constructor (options: MixedVisualSourceOptions) {
+      if (!options.source) {
+        throw new Error('Property "source" is required in options')
+      }
+
       super(options)
       applyOptions(options, this)
     }
 
+    async whenReady (): Promise<void> {
+      await super.whenReady()
+
+      await new Promise<void>(resolve => {
+        if (this.source instanceof HTMLImageElement) {
+          // The source is an image; wait for it to load
+          if (this.source.complete) {
+            resolve()
+          } else {
+            this.source.addEventListener('load', () => {
+              resolve()
+            })
+          }
+        } else {
+          // The source is a video; wait for the first frame to load
+          if (this.source.readyState === 4) {
+            resolve()
+          } else {
+            this.source.addEventListener('canplaythrough', () => {
+              resolve()
+            })
+          }
+        }
+      })
+    }
+
     doRender () {
       // Clear/fill background
       super.doRender()
@@ -86,7 +116,7 @@ function VisualSourceMixin<OptionsSuperclass extends VisualOptions> (superclass:
       /*
        * Source dimensions crop the image. Dest dimensions set the size that
        * the image will be rendered at *on the layer*. Note that this is
-       * different than the layer dimensions (`this.width` and `this.height`).
+       * different from the layer dimensions (`this.width` and `this.height`).
        * The main reason this distinction exists is so that an image layer can
        * be rotated without being cropped (see iss #46).
        */
@@ -100,6 +130,18 @@ function VisualSourceMixin<OptionsSuperclass extends VisualOptions> (superclass:
       )
     }
 
+    get ready (): boolean {
+      // Typescript doesn't support `super.ready` when targeting es5
+      const superReady = Object.getOwnPropertyDescriptor(superclass.prototype, 'ready').get.call(this)
+      const sourceReady = this.source instanceof HTMLImageElement
+        ? this.source.complete
+        : this.source.readyState === 4
+      return superReady && sourceReady
+    }
+
+    /**
+     * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
+     */
     getDefaultOptions (): MixedVisualSourceOptions {
       return {
         ...superclass.prototype.getDefaultOptions(),

package/src/layer/visual.ts

@@ -1,7 +1,35 @@
+import { CustomArray, CustomArrayListener } from '../custom-array'
 import { Dynamic, val, applyOptions, Color } from '../util'
 import { Base, BaseOptions } from './base'
 import { Visual as VisualEffect } from '../effect/visual'
 
+// eslint-disable-next-line no-use-before-define
+class VisualEffectsListener extends CustomArrayListener<VisualEffect> {
+  // eslint-disable-next-line no-use-before-define
+  private _layer: Visual
+
+  // eslint-disable-next-line no-use-before-define
+  constructor (layer: Visual) {
+    super()
+    this._layer = layer
+  }
+
+  onAdd (effect: VisualEffect) {
+    effect.tryAttach(this._layer)
+  }
+
+  onRemove (effect: VisualEffect) {
+    effect.tryDetach()
+  }
+}
+
+class VisualEffects extends CustomArray<VisualEffect> {
+  // eslint-disable-next-line no-use-before-define
+  constructor (target: VisualEffect[], layer: Visual) {
+    super(target, new VisualEffectsListener(layer))
+  }
+}
+
 interface VisualOptions extends BaseOptions {
   x?: Dynamic<number>
   y?: Dynamic<number>
@@ -43,40 +71,22 @@ class Visual extends Base {
   // readonly because it's a proxy
   readonly effects: VisualEffect[]
 
-  private _effectsBack: VisualEffect[]
-
   /**
    * Creates a visual layer
    */
   constructor (options: VisualOptions) {
     super(options)
-    // Only validate extra if not subclassed, because if subclcass, there will
-    // be extraneous options.
+
     applyOptions(options, this)
 
     this.canvas = document.createElement('canvas')
     this.cctx = this.canvas.getContext('2d')
+    this.effects = new VisualEffects([], this)
+  }
 
-    this._effectsBack = []
-    this.effects = new Proxy(this._effectsBack, {
-      deleteProperty: (target, property) => {
-        const value = target[property]
-        value.detach()
-        delete target[property]
-        return true
-      },
-      set: (target, property, value) => {
-        if (!isNaN(Number(property))) {
-          // The property is a number (index)
-          if (target[property])
-            target[property].detach()
-
-          value.attach(this)
-        }
-        target[property] = value
-        return true
-      }
-    })
+  async whenReady (): Promise<void> {
+    await super.whenReady()
+    await Promise.all(this.effects.map(effect => effect.whenReady()))
   }
 
   /**
@@ -86,8 +96,9 @@ class Visual extends Base {
     // 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)
+    if (width === 0 || height === 0) {
       return
+    }
 
     this.beginRender()
     this.doRender()
@@ -122,8 +133,9 @@ 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?
   }
@@ -131,14 +143,15 @@ class Visual extends Base {
   _applyEffects (): void {
     for (let i = 0; i < this.effects.length; i++) {
       const effect = this.effects[i]
-      if (effect && effect.enabled)
+      if (effect && effect.enabled) {
         // Pass relative time
         effect.apply(this, this.movie.currentTime - this.startTime)
+      }
     }
   }
 
   /**
-   * Convienence method for <code>effects.push()</code>
+   * Convenience method for <code>effects.push()</code>
    * @param effect
    * @return the layer (for chaining)
    */
@@ -146,6 +159,15 @@ class Visual extends Base {
     this.effects.push(effect); return this
   }
 
+  get ready (): boolean {
+    // Typescript doesn't support `super.ready` when targeting es5
+    const superReady = Object.getOwnPropertyDescriptor(Base.prototype, 'ready').get.call(this)
+    return superReady && this.effects.every(effect => effect.ready)
+  }
+
+  /**
+   * @deprecated See {@link https://github.com/etro-js/etro/issues/131}
+   */
   getDefaultOptions (): VisualOptions {
     return {
       ...Base.prototype.getDefaultOptions(),

package/src/movie/effects.ts

@@ -0,0 +1,26 @@
+import { CustomArray, CustomArrayListener } from '../custom-array'
+import { Visual as VisualEffect } from '../effect/index'
+import { Movie } from './movie'
+
+class MovieEffectsListener extends CustomArrayListener<VisualEffect> {
+  private _movie: Movie
+
+  constructor (movie: Movie) {
+    super()
+    this._movie = movie
+  }
+
+  onAdd (effect: VisualEffect) {
+    effect.tryAttach(this._movie)
+  }
+
+  onRemove (effect: VisualEffect) {
+    effect.tryDetach()
+  }
+}
+
+export class MovieEffects extends CustomArray<VisualEffect> {
+  constructor (target: VisualEffect[], movie: Movie) {
+    super(target, new MovieEffectsListener(movie))
+  }
+}

package/src/movie/index.ts

@@ -0,0 +1 @@
+export * from './movie'

package/src/movie/layers.ts

@@ -0,0 +1,26 @@
+import { CustomArray, CustomArrayListener } from '../custom-array'
+import { Base as BaseLayer } from '../layer/index'
+import { Movie } from './movie'
+
+class MovieLayersListener extends CustomArrayListener<BaseLayer> {
+  private _movie: Movie
+
+  constructor (movie: Movie) {
+    super()
+    this._movie = movie
+  }
+
+  onAdd (layer: BaseLayer) {
+    layer.tryAttach(this._movie)
+  }
+
+  onRemove (layer: BaseLayer) {
+    layer.tryDetach()
+  }
+}
+
+export class MovieLayers extends CustomArray<BaseLayer> {
+  constructor (target: BaseLayer[], movie: Movie) {
+    super(target, new MovieLayersListener(movie))
+  }
+}