etro 0.7.0 → 0.8.0

package/src/effect/transform.ts

@@ -0,0 +1,194 @@
+import { Visual } from '../layer/index'
+import { Movie } from '../movie'
+import { val, Dynamic } from '../util'
+import { Base } from './base'
+
+export interface TransformOptions {
+  matrix: Dynamic<Transform.Matrix> // eslint-disable-line no-use-before-define
+}
+
+/**
+ * Transforms a layer or movie using a transformation matrix. Use {@link
+ * Transform.Matrix} to either A) calculate those values based on a series of
+ * translations, scalings and rotations) or B) input the matrix values
+ * directly, using the optional argument in the constructor.
+ */
+class Transform extends Base {
+  /** Matrix that determines how to transform the target */
+  matrix: Dynamic<Transform.Matrix>
+
+  private _tmpMatrix: Transform.Matrix
+  private _tmpCanvas: HTMLCanvasElement
+  private _tmpCtx: CanvasRenderingContext2D
+
+  /**
+   * @param matrix - matrix that determines how to transform the target
+   */
+  constructor (options: TransformOptions) {
+    super()
+    /**
+     * How to transform the target
+     */
+    this.matrix = options.matrix
+    this._tmpMatrix = new Transform.Matrix()
+    this._tmpCanvas = document.createElement('canvas')
+    this._tmpCtx = this._tmpCanvas.getContext('2d')
+  }
+
+  apply (target: Movie | Visual, reltime: number): void {
+    if (target.canvas.width !== this._tmpCanvas.width) {
+      this._tmpCanvas.width = target.canvas.width
+    }
+    if (target.canvas.height !== this._tmpCanvas.height) {
+      this._tmpCanvas.height = target.canvas.height
+    }
+    // Use data, since that's the underlying storage
+    this._tmpMatrix.data = val(this, 'matrix.data', reltime)
+
+    this._tmpCtx.setTransform(
+      this._tmpMatrix.a, this._tmpMatrix.b, this._tmpMatrix.c,
+      this._tmpMatrix.d, this._tmpMatrix.e, this._tmpMatrix.f
+    )
+    this._tmpCtx.drawImage(target.canvas, 0, 0)
+    // Assume it was identity for now
+    this._tmpCtx.setTransform(1, 0, 0, 0, 1, 0)
+    target.cctx.clearRect(0, 0, target.canvas.width, target.canvas.height)
+    target.cctx.drawImage(this._tmpCanvas, 0, 0)
+  }
+}
+
+namespace Transform { // eslint-disable-line @typescript-eslint/no-namespace
+
+  /**
+   * @class
+   * A 3x3 matrix for storing 2d transformations
+   */
+  export class Matrix {
+    /**
+     * The identity matrix
+     */
+    static IDENTITY = new Matrix()
+    private static _TMP_MATRIX = new Matrix()
+
+    data: number[]
+
+    constructor (data?: number[]) {
+      this.data = data || [
+        1, 0, 0,
+        0, 1, 0,
+        0, 0, 1
+      ]
+    }
+
+    identity (): Matrix {
+      for (let i = 0; i < this.data.length; i++) {
+        this.data[i] = Matrix.IDENTITY.data[i]
+      }
+
+      return this
+    }
+
+    /**
+     * @param x
+     * @param y
+     * @param [val]
+     */
+    cell (x: number, y: number, val?: number): number {
+      if (val !== undefined) {
+        this.data[3 * y + x] = val
+      }
+      return this.data[3 * y + x]
+    }
+
+    /* For canvas context setTransform */
+    get a (): number {
+      return this.data[0]
+    }
+
+    get b (): number {
+      return this.data[3]
+    }
+
+    get c (): number {
+      return this.data[1]
+    }
+
+    get d (): number {
+      return this.data[4]
+    }
+
+    get e (): number {
+      return this.data[2]
+    }
+
+    get f (): number {
+      return this.data[5]
+    }
+
+    /**
+     * Combines <code>this</code> with another matrix <code>other</code>
+     * @param other
+     */
+    multiply (other: Matrix): Matrix {
+      // copy to temporary matrix to avoid modifying `this` while reading from it
+      for (let x = 0; x < 3; x++) {
+        for (let y = 0; y < 3; y++) {
+          let sum = 0
+          for (let i = 0; i < 3; i++) {
+            sum += this.cell(x, i) * other.cell(i, y)
+          }
+          Matrix._TMP_MATRIX.cell(x, y, sum)
+        }
+      }
+      // copy data from TMP_MATRIX to this
+      for (let i = 0; i < Matrix._TMP_MATRIX.data.length; i++) {
+        this.data[i] = Matrix._TMP_MATRIX.data[i]
+      }
+      return this
+    }
+
+    /**
+     * @param x
+     * @param y
+     */
+    translate (x: number, y: number): Matrix {
+      this.multiply(new Matrix([
+        1, 0, x,
+        0, 1, y,
+        0, 0, 1
+      ]))
+
+      return this
+    }
+
+    /**
+     * @param x
+     * @param y
+     */
+    scale (x: number, y: number): Matrix {
+      this.multiply(new Matrix([
+        x, 0, 0,
+        0, y, 0,
+        0, 0, 1
+      ]))
+
+      return this
+    }
+
+    /**
+     * @param a - the angle or rotation in radians
+     */
+    rotate (a: number): Matrix {
+      const c = Math.cos(a); const s = Math.sin(a)
+      this.multiply(new Matrix([
+        c, s, 0,
+        -s, c, 0,
+        0, 0, 1
+      ]))
+
+      return this
+    }
+  }
+}
+
+export { Transform }

package/src/etro.ts

@@ -0,0 +1,26 @@
+/*
+ * Typedoc can't handle default exports. To let users import default export and
+ * make typedoc work, this module exports everything as named exports. Then,
+ * ./index imports everything from this module and exports it as a default
+ * export. Typedoc uses this file, and rollup and NPM use ./index
+ */
+
+// TODO: investigate possibility of changing movie (canvas) width/height after
+// layers added. I think it's fine, but still make sure.
+// TODO: create built-in audio gain node for volume control in movie and/or
+// layer.
+// TODO: figure out InvalidStateError in beginning only when reloaded
+
+import * as layer from './layer/index'
+import * as effect from './effect/index'
+import * as event from './event'
+import EtroObject from './object'
+
+export * from './movie'
+export * from './util'
+export {
+  EtroObject,
+  layer,
+  effect,
+  event
+}

package/src/event.ts

@@ -0,0 +1,118 @@
+/**
+ * @module event
+ */
+
+import EtroObject from './object'
+
+export interface Event {
+  target: EtroObject
+  type: string
+}
+
+/**
+ * An event type
+ * @private
+ */
+class TypeId {
+  private _parts: string[]
+
+  constructor (id) {
+    this._parts = id.split('.')
+  }
+
+  contains (other) {
+    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]) {
+        return false
+      }
+    }
+    return true
+  }
+
+  toString () {
+    return this._parts.join('.')
+  }
+}
+
+/**
+ * Listen for an event or category of events
+ *
+ * @param target - a etro object
+ * @param type - the id of the type (can contain subtypes, such as
+ * "type.subtype")
+ * @param listener
+ */
+export function subscribe (target: EtroObject, type: string, listener: <T extends Event>(T) => void): void {
+  if (!listeners.has(target)) {
+    listeners.set(target, [])
+  }
+
+  listeners.get(target).push(
+    { type: new TypeId(type), listener }
+  )
+}
+
+/**
+ * Remove an event listener
+ *
+ * @param target - a etro object
+ * @param type - the id of the type (can contain subtypes, such as
+ * "type.subtype")
+ * @param listener
+ */
+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)) {
+    throw new Error('No matching event listener to remove')
+  }
+
+  const removed = listeners.get(target)
+    .filter(pair => pair.listener !== listener)
+  listeners.set(target, removed)
+}
+
+/**
+ * Emits an event to all listeners
+ *
+ * @param target - a etro object
+ * @param type - the id of the type (can contain subtypes, such as
+ * "type.subtype")
+ * @param event - any additional event data
+ */
+export function publish (target: EtroObject, type: string, event: Record<string, unknown>): Event {
+  (event as unknown as Event).target = target; // could be a proxy
+  (event as unknown as Event).type = type
+
+  const t = new TypeId(type)
+
+  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)) {
+      listenersForType.push(item.listener)
+    }
+  }
+
+  for (let i = 0; i < listenersForType.length; i++) {
+    const listener = listenersForType[i]
+    listener(event)
+  }
+
+  return event as unknown as Event
+}
+
+const listeners: WeakMap<EtroObject, {
+  type: TypeId,
+  listener: (Event) => void
+}[]> = new WeakMap()

package/src/index.ts

@@ -0,0 +1,8 @@
+/**
+ * The entry point
+ * @module index
+ */
+
+import * as etro from './etro'
+
+export default etro

package/src/layer/audio-source.ts

@@ -0,0 +1,217 @@
+import { AudioContext, IAudioNode, IAudioDestinationNode } from 'standardized-audio-context'
+import { Movie } from '../movie'
+import { subscribe } from '../event'
+import { applyOptions, val } from '../util'
+import { Base, BaseOptions } from './base'
+
+type Constructor<T> = new (...args: unknown[]) => T
+
+interface AudioSource extends Base {
+  readonly source: HTMLMediaElement
+  readonly audioNode: IAudioNode<AudioContext>
+  playbackRate: number
+  /** The audio source node for the media */
+  sourceStartTime: number
+}
+
+interface AudioSourceOptions extends BaseOptions {
+  source: HTMLMediaElement
+  sourceStartTime?: number
+  muted?: boolean
+  volume?: number
+  playbackRate: number
+  onload?: (source: HTMLMediaElement, options: AudioSourceOptions) => void
+}
+
+/**
+ * A layer that gets its audio from an HTMLMediaElement
+ * @mixin AudioSourceMixin
+ */
+// TODO: Implement playback rate
+// The generic is just for type-checking. The argument is for functionality
+// (survives when compiled to javascript).
+
+function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Constructor<Base>): Constructor<AudioSource> {
+  type MixedAudioSourceOptions = OptionsSuperclass & AudioSourceOptions
+
+  class MixedAudioSource extends superclass {
+    /**
+     * The raw html media element
+     */
+    readonly source: HTMLMediaElement
+
+    private __startTime: number
+    private _audioNode: IAudioNode<AudioContext>
+    private _sourceStartTime: number
+    private _unstretchedDuration: number
+    private _playbackRate: number
+    private _initialized: boolean
+    private _connectedToDestination: boolean
+
+    /**
+     * @param options
+     * @param options.source
+     * @param options.onload
+     * @param [options.sourceStartTime=0] - at what time in the audio
+     * the layer starts
+     * @param [options.duration=media.duration-options.sourceStartTime]
+     * @param [options.muted=false]
+     * @param [options.volume=1]
+     * @param [options.playbackRate=1]
+     */
+    constructor (options: MixedAudioSourceOptions) {
+      const onload = options.onload
+      // Don't set as instance property
+      delete options.onload
+      super(options)
+      this._initialized = false
+      this._sourceStartTime = options.sourceStartTime || 0
+      applyOptions(options, this)
+
+      const load = () => {
+        // TODO:              && ?
+        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) {
+        // this frame's data is available now
+        load()
+      } 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)
+      })
+    }
+
+    attach (movie: Movie) {
+      super.attach(movie)
+
+      subscribe(movie, 'movie.seek', () => {
+        const time = movie.currentTime
+        if (time < this.startTime || time >= this.startTime + this.duration) {
+          return
+        }
+        this.source.currentTime = time - this.startTime
+      })
+
+      // TODO: on unattach?
+      subscribe(movie, 'movie.audiodestinationupdate', event => {
+        // Connect to new destination if immeidately connected to the existing
+        // destination.
+        if (this._connectedToDestination) {
+          this.audioNode.disconnect(movie.actx.destination)
+          this.audioNode.connect(event.destination)
+        }
+      })
+
+      // connect to audiocontext
+      this._audioNode = movie.actx.createMediaElementSource(this.source)
+
+      // Spy on connect and disconnect to remember if it connected to
+      // actx.destination (for Movie#record).
+      const oldConnect = this._audioNode.connect.bind(this.audioNode)
+      this._audioNode.connect = <T extends IAudioDestinationNode<AudioContext>>(destination: T, outputIndex?: number, inputIndex?: number): AudioNode => {
+        this._connectedToDestination = destination === movie.actx.destination
+        return oldConnect(destination, outputIndex, inputIndex)
+      }
+      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) {
+          this._connectedToDestination = false
+        }
+        return oldDisconnect(destination, output, input)
+      }
+
+      // Connect to actx.destination by default (can be rewired by user)
+      this.audioNode.connect(movie.actx.destination)
+    }
+
+    start () {
+      this.source.currentTime = this.currentTime + this.sourceStartTime
+      this.source.play()
+    }
+
+    render () {
+      super.render()
+      // TODO: implement Issue: Create built-in audio node to support built-in
+      // audio nodes, as this does nothing rn
+      this.source.muted = val(this, 'muted', this.currentTime)
+      this.source.volume = val(this, 'volume', this.currentTime)
+      this.source.playbackRate = val(this, 'playbackRate', this.currentTime)
+    }
+
+    stop () {
+      this.source.pause()
+    }
+
+    /**
+     * The audio source node for the media
+     */
+    get audioNode () {
+      return this._audioNode
+    }
+
+    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
+    }
+
+    set startTime (val) {
+      this.__startTime = val
+      if (this._initialized) {
+        const mediaProgress = this.movie.currentTime - this.startTime
+        this.source.currentTime = this.sourceStartTime + mediaProgress
+      }
+    }
+
+    set sourceStartTime (val) {
+      this._sourceStartTime = val
+      if (this._initialized) {
+        const mediaProgress = this.movie.currentTime - this.startTime
+        this.source.currentTime = mediaProgress + this.sourceStartTime
+      }
+    }
+
+    /**
+     * Time in the media at which the layer starts
+     */
+    get sourceStartTime () {
+      return this._sourceStartTime
+    }
+
+    getDefaultOptions (): MixedAudioSourceOptions {
+      return {
+        ...superclass.prototype.getDefaultOptions(),
+        source: undefined, // required
+        sourceStartTime: 0,
+        duration: undefined, // important to include undefined keys, for applyOptions
+        muted: false,
+        volume: 1,
+        playbackRate: 1
+      }
+    }
+  }
+
+  return MixedAudioSource
+}
+
+export { AudioSource, AudioSourceOptions, AudioSourceMixin }

package/src/layer/audio.ts

@@ -0,0 +1,35 @@
+// TODO: rename to something more consistent with the naming convention of Visual and VisualSourceMixin
+
+import { Base, BaseOptions } from './base'
+import { AudioSourceMixin, AudioSourceOptions } from './audio-source'
+
+type AudioOptions = AudioSourceOptions
+
+/**
+ * @extends AudioSource
+ */
+class Audio extends AudioSourceMixin<BaseOptions>(Base) {
+  /**
+   * Creates an audio layer
+   */
+  constructor (options: AudioOptions) {
+    super(options)
+    if (this.duration === undefined) {
+      this.duration = (this).source.duration - this.sourceStartTime
+    }
+  }
+
+  getDefaultOptions (): AudioOptions {
+    return {
+      ...Object.getPrototypeOf(this).getDefaultOptions(),
+      /**
+       * @name module:layer.Audio#sourceStartTime
+       * @desc Where in the media to start playing when the layer starts
+       */
+      sourceStartTime: 0,
+      duration: undefined
+    }
+  }
+}
+
+export { Audio, AudioOptions }