etro 0.12.1 → 0.14.0

package/src/movie/movie.ts

@@ -3,9 +3,11 @@
  */
 
 import { publish, deprecate } from '../event'
-import { Dynamic, val, clearCachedValues, applyOptions, Color, parseColor } from '../util'
+import { Dynamic, val, clearCachedValues, applyOptions, Color, parseColor, serializeProperty, deserializeProperty } from '../util'
 import { Base as BaseLayer, Audio as AudioLayer, Video as VideoLayer, Visual } from '../layer/index' // `Media` mixins
 import { Base as BaseEffect } from '../effect/index'
+import * as Layers from '../layer/index'
+import * as Effects from '../effect/index'
 import { MovieEffects } from './effects'
 import { MovieLayers } from './layers'
 
@@ -124,12 +126,13 @@ export class Movie {
    * Plays the movie
    *
    * @param [options]
+   * @param [options.onDraw] Called when the current frame is drawn to the canvas
    * @param [options.onStart] Called when the movie starts playing
    * @param [options.duration] The duration of the movie to play in seconds
-   *
    * @return Fulfilled when the movie is done playing, never fails
    */
   async play (options: {
+    onDraw?: () => void,
     onStart?: () => void,
     duration?: number,
   } = {}): Promise<void> {
@@ -152,7 +155,7 @@ export class Movie {
     await new Promise<void>(resolve => {
       if (!this.renderingFrame) {
         // Not rendering (and not playing), so play.
-        this._render(undefined, resolve)
+        this._render(undefined, resolve, options.onDraw)
       }
 
       // Stop rendering frame if currently doing so, because playing has higher
@@ -181,7 +184,7 @@ export class Movie {
    * Streams the movie to a MediaStream
    *
    * @param options Options for the stream
-   * @param options.frameRate The frame rate of the stream's video
+   * @param options.frameRate The maximum frame rate of the stream's video
    * @param options.duration The duration of the stream in seconds
    * @param options.video Whether to stream video. Defaults to true.
    * @param options.audio Whether to stream audio. Defaults to true.
@@ -264,7 +267,7 @@ export class Movie {
    * Plays the movie in the background and records it
    *
    * @param options
-   * @param [options.frameRate] - Video frame rate
+   * @param [options.frameRate] - Maximum video frame rate (fps)
    * @param [options.video=true] - whether to include video in recording
    * @param [options.audio=true] - whether to include audio in recording
    * @param [options.mediaRecorderOptions=undefined] - Options to pass to the
@@ -399,10 +402,10 @@ export class Movie {
    * Processes one frame of the movie and draws it to the canvas
    *
    * @param [timestamp=performance.now()]
-   * @param [done=undefined] - Called when done playing or when the current
-   * frame is loaded
+   * @param [done=undefined] - Called when done playing or when the current frame is loaded
+   * @param [onFrameRender=undefined] - Called when the current frame is rendered
    */
-  private _render (timestamp = performance.now(), done = undefined) {
+  private _render (timestamp = performance.now(), done = undefined, onFrameRender = undefined) {
     clearCachedValues(this)
 
     if (!this.rendering) {
@@ -482,6 +485,7 @@ export class Movie {
       this._renderBackground(timestamp)
       this._renderLayers()
       this._applyEffects()
+      onFrameRender?.()
     } else {
       // If we are recording, pause the media recorder until the movie is
       // ready.
@@ -852,6 +856,117 @@ export class Movie {
       repeat: false
     }
   }
+
+  toJSON (): object {
+    return {
+      type: 'movie',
+      canvas: this.canvas ? { width: this.canvas.width, height: this.canvas.height } : undefined,
+      background: serializeProperty(this.background),
+      repeat: this.repeat,
+      layers: this.layers.map(layer => (layer as any).toJSON()),
+      effects: this.effects.map(effect => (effect as any).toJSON())
+    }
+  }
+
+  static fromJSON (json: any, canvas?: HTMLCanvasElement, actx?: AudioContext): Movie {
+    if (!canvas) {
+      canvas = document.createElement('canvas')
+      if (json.canvas) {
+        canvas.width = json.canvas.width
+        canvas.height = json.canvas.height
+      }
+    }
+    const options: any = {
+      canvas,
+      actx,
+      background: deserializeProperty(json.background),
+      repeat: json.repeat
+    }
+    const movie = new Movie(options)
+
+    const deserializeEffect = (effectJson: any): any => {
+      const type = effectJson.type.replace('effect.', '')
+      const EffectClass = (Effects as any)[type]
+      if (!EffectClass) {
+        throw new Error(`Unknown effect type: ${type}`)
+      }
+
+      const effectOptions: any = {}
+      const defaultOptions = EffectClass.prototype.getDefaultOptions ? EffectClass.prototype.getDefaultOptions() : {}
+
+      for (const key in effectJson) {
+        if (key !== 'type' && key !== 'effects') {
+          if (key in defaultOptions) {
+            effectOptions[key] = deserializeProperty(effectJson[key])
+          }
+        }
+      }
+
+      if (effectJson.effects) {
+        effectOptions.effects = effectJson.effects.map((subEffectJson: any) => deserializeEffect(subEffectJson))
+      }
+
+      const effect = new EffectClass(effectOptions)
+      for (const key in effectJson) {
+        if (key !== 'type' && key !== 'effects' && !(key in defaultOptions)) {
+          effect[key] = deserializeProperty(effectJson[key])
+        }
+      }
+      return effect
+    }
+
+    const deserializeLayer = (layerJson: any): any => {
+      const type = layerJson.type.replace('layer.', '')
+      const LayerClass = (Layers as any)[type]
+      if (!LayerClass) {
+        throw new Error(`Unknown layer type: ${type}`)
+      }
+
+      const layerOptions: any = {}
+      const defaultOptions = LayerClass.prototype.getDefaultOptions ? LayerClass.prototype.getDefaultOptions() : {}
+      if (!('startTime' in defaultOptions)) {
+        defaultOptions.startTime = undefined
+      }
+      if (!('duration' in defaultOptions)) {
+        defaultOptions.duration = undefined
+      }
+
+      for (const key in layerJson) {
+        if (key !== 'type' && key !== 'effects') {
+          if (key in defaultOptions) {
+            layerOptions[key] = deserializeProperty(layerJson[key])
+          }
+        }
+      }
+
+      const layer = new LayerClass(layerOptions)
+      for (const key in layerJson) {
+        if (key !== 'type' && key !== 'effects' && !(key in defaultOptions)) {
+          layer[key] = deserializeProperty(layerJson[key])
+        }
+      }
+      if (layerJson.effects) {
+        for (const effectJson of layerJson.effects) {
+          layer.addEffect(deserializeEffect(effectJson))
+        }
+      }
+      return layer
+    }
+
+    if (json.layers) {
+      for (const layerJson of json.layers) {
+        movie.addLayer(deserializeLayer(layerJson))
+      }
+    }
+
+    if (json.effects) {
+      for (const effectJson of json.effects) {
+        movie.addEffect(deserializeEffect(effectJson))
+      }
+    }
+
+    return movie
+  }
 }
 
 // Id for events

package/src/util.ts

@@ -91,6 +91,13 @@ export function clearCachedValues (movie: Movie): void {
   valCache.delete(movie)
 }
 
+type Interpolate = <U = number | object>(
+  startValue: U,
+  endValue: U,
+  percentProgress: number,
+  interpolationKeys: string[]
+) => U
+
 /**
  * A keyframe set.
  *
@@ -101,7 +108,7 @@ export function clearCachedValues (movie: Movie): void {
  * TypeScript users need to specify the type of the value as a type parameter.
  */
 export class KeyFrame<T> {
-  value: unknown[][]
+  value: (number|T|Interpolate)[][]
   /** Keys to interpolate, or all keys if undefined */
   interpolationKeys: string[]
 
@@ -115,6 +122,25 @@ export class KeyFrame<T> {
     return this
   }
 
+  toJSON (): object {
+    return {
+      type: 'KeyFrame',
+      value: this.value.map(point => {
+        const out: any[] = [point[0], serializeProperty(point[1])]
+        if (point.length === 3) {
+          const interp = point[2] as Interpolate
+          if (interp === linearInterp) {
+            out.push('linear')
+          } else if (interp === cosineInterp) {
+            out.push('cosine')
+          }
+        }
+        return out
+      }),
+      interpolationKeys: this.interpolationKeys
+    }
+  }
+
   evaluate (time: number): T {
     if (this.value.length === 0) {
       throw new Error('Empty keyframe')
@@ -133,8 +159,10 @@ export class KeyFrame<T> {
     for (let i = 0; i < this.value.length; i++) {
       const startTime = this.value[i][0] as number
       const startValue = this.value[i][1] as T
-      type interpolateType = <U = number | object>(startValue: U, endValue: U, percentProgress: number, interpolationKeys: string[]) => U // eslint-disable-line @typescript-eslint/ban-types
-      const interpolate = this.value[i].length === 3 ? this.value[i][2] as interpolateType : linearInterp
+      const interpolate =
+        this.value[i].length === 3
+          ? (this.value[i][2] as Interpolate)
+          : linearInterp
       if (i + 1 < this.value.length) {
         const endTime = this.value[i + 1][0] as number
         const endValue = this.value[i + 1][1] as T
@@ -313,6 +341,10 @@ export class Color {
   toString (): string {
     return `rgba(${this.r}, ${this.g}, ${this.b}, ${this.a})`
   }
+
+  toJSON (): object {
+    return { type: 'Color', r: this.r, g: this.g, b: this.b, a: this.a }
+  }
 }
 
 const parseColorCanvas = document.createElement('canvas')
@@ -389,6 +421,20 @@ export class Font {
 
     return s
   }
+
+  toJSON (): object {
+    return {
+      type: 'Font',
+      size: this.size,
+      sizeUnit: this.sizeUnit,
+      family: this.family,
+      style: this.style,
+      variant: this.variant,
+      weight: this.weight,
+      stretch: this.stretch,
+      lineHeight: this.lineHeight
+    }
+  }
 }
 
 const parseFontEl = document.createElement('div')
@@ -445,3 +491,70 @@ export function mapPixels (
     ctx.putImageData(frame, x, y)
   }
 }
+
+export function serializeProperty (val: any): any {
+  if (val && typeof val === 'object') {
+    if (typeof val.toJSON === 'function') {
+      return val.toJSON()
+    }
+    if (Array.isArray(val)) {
+      return val.map(serializeProperty)
+    }
+    if (val instanceof HTMLImageElement || val instanceof HTMLVideoElement || val instanceof HTMLAudioElement) {
+      // It's a DOM element serving as a media source
+      return val.getAttribute('src') || val.src
+    }
+    // plain object
+    if (val.constructor === Object) {
+      const out: any = {}
+      for (const k in val) {
+        if (Object.prototype.hasOwnProperty.call(val, k)) {
+          out[k] = serializeProperty(val[k])
+        }
+      }
+      return out
+    }
+  }
+  return val
+}
+
+export function deserializeProperty (val: any): any {
+  if (val && typeof val === 'object') {
+    if (Array.isArray(val)) {
+      return val.map(deserializeProperty)
+    }
+    if (val.type === 'Color') {
+      return new Color(val.r, val.g, val.b, val.a)
+    }
+    if (val.type === 'Font') {
+      return new Font(val.size, val.sizeUnit, val.family, val.style, val.variant, val.weight, val.stretch, val.lineHeight)
+    }
+    if (val.type === 'KeyFrame') {
+      const kf = new KeyFrame()
+      kf.value = val.value.map((point: any[]) => {
+        const out: any[] = [point[0], deserializeProperty(point[1])]
+        if (point.length === 3) {
+          if (point[2] === 'linear') {
+            out.push(linearInterp)
+          } else if (point[2] === 'cosine') {
+            out.push(cosineInterp)
+          }
+        }
+        return out
+      })
+      kf.interpolationKeys = val.interpolationKeys
+      return kf
+    }
+    // plain object
+    if (val.constructor === Object) {
+      const out: any = {}
+      for (const k in val) {
+        if (Object.prototype.hasOwnProperty.call(val, k)) {
+          out[k] = deserializeProperty(val[k])
+        }
+      }
+      return out
+    }
+  }
+  return val
+}

package/tsconfig.json

@@ -1,7 +1,8 @@
 {
     "compilerOptions": {
-        "lib": ["es6", "DOM"],
-        "target": "es5",
+        "lib": ["es2016", "DOM"],
+        "target": "es6",
+        "moduleResolution": "node",
         "declaration": true
     },
     "include": [

package/.husky/commit-msg

@@ -1,4 +0,0 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx --no -- commitlint --edit ${1}

package/.husky/prepare-commit-msg

@@ -1,11 +0,0 @@
-#!/usr/bin/env bash
-
-# gitmoji as a commit hook
-if npx -v >&/dev/null
-then
-  exec < /dev/tty
-  npx -c "gitmoji --hook $1 $2"
-else
-  exec < /dev/tty
-  gitmoji --hook $1 $2
-fi

package/commitlint.config.ts

@@ -1,39 +0,0 @@
-import type {UserConfig} from '@commitlint/types';
-import { RuleConfigSeverity } from "@commitlint/types";
-
-const Configuration: UserConfig = {
-  /*
-   * Resolve and load @commitlint/format from node_modules.
-   * Referenced package must be installed
-   */
-  formatter: '@commitlint/format',
-  /*
-   * Any rules defined here will override the default ones
-   */
-  rules: {
-    'header-max-length': [RuleConfigSeverity.Error, 'always', 72],
-    'body-max-line-length': [RuleConfigSeverity.Error, 'always', 72],
-  },
-  /*
-   * Functions that return true if commitlint should ignore the given message.
-   */
-  ignores: [(commit) => commit === ''],
-  /*
-   * Whether commitlint uses the default ignore rules.
-   */
-  defaultIgnores: true,
-  /*
-   * Custom URL to show upon failure
-   */
-  helpUrl:
-    'https://github.com/conventional-changelog/commitlint/#what-is-commitlint',
-  /*
-   * Custom prompt configs
-   */
-  prompt: {
-    messages: {},
-    questions: {},
-  },
-};
-
-module.exports = Configuration;