etro 0.8.1 → 0.8.4

package/dist/layer/audio-source.d.ts

@@ -1,9 +1,8 @@
-import { AudioContext, IAudioNode } from 'standardized-audio-context';
 import { Base, BaseOptions } from './base';
 declare type Constructor<T> = new (...args: unknown[]) => T;
 interface AudioSource extends Base {
     readonly source: HTMLMediaElement;
-    readonly audioNode: IAudioNode<AudioContext>;
+    readonly audioNode: AudioNode;
     playbackRate: number;
     /** The audio source node for the media */
     sourceStartTime: number;

package/dist/movie.d.ts

@@ -1,11 +1,13 @@
 /**
  * @module movie
  */
-import { AudioContext } from 'standardized-audio-context';
 import { Dynamic } from './util';
 import { Base as BaseLayer } from './layer/index';
 import { Base as BaseEffect } from './effect/index';
 declare global {
+    interface Window {
+        webkitAudioContext: typeof AudioContext;
+    }
     interface HTMLCanvasElement {
         captureStream(frameRate?: number): MediaStream;
     }

package/karma.conf.js

@@ -1,6 +1,8 @@
 // Karma configuration
 // Generated on Thu Sep 19 2019 02:05:06 GMT-0400 (Eastern Daylight Time)
 
+process.env.CHROME_BIN = require('puppeteer').executablePath()
+
 module.exports = function (config) {
   config.set({
 
@@ -49,7 +51,21 @@ module.exports = function (config) {
 
     // start these browsers
     // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['ChromeHeadless'],
+    browsers: ['FirefoxHeadless'],
+
+    customLaunchers: {
+      'FirefoxHeadless': {
+        base: 'Firefox',
+        flags: ['-headless'],
+        prefs: {
+          'network.proxy.type': 0
+        }
+      }
+    },
+
+    client: {
+      captureConsole: true
+    },
 
     // Continuous Integration mode
     // if true, Karma captures browsers, runs the tests and exits

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "etro",
-  "version": "0.8.1",
+  "version": "0.8.4",
   "description": "An extendable video-editing framework for the browser and Node",
   "browser": "dist/etro-cjs.js",
   "types": "dist/index.d.ts",
@@ -9,9 +9,6 @@
     "example": "examples",
     "test": "spec"
   },
-  "dependencies": {
-    "standardized-audio-context": "^25.1.13"
-  },
   "devDependencies": {
     "@types/dom-mediacapture-record": "^1.0.7",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
@@ -28,14 +25,13 @@
     "ev": "0.0.7",
     "http-server": "^0.12.3",
     "jasmine": "^3.4.0",
-    "jsdoc": "^3.6.3",
-    "jsdoc-export-default-interop": "^0.3.1",
     "karma": "^6.1.1",
-    "karma-chrome-launcher": "^3.1.0",
     "karma-es6-shim": "^1.0.0",
+    "karma-firefox-launcher": "^2.1.2",
     "karma-jasmine": "^2.0.1",
     "karma-requirejs": "^1.1.0",
     "karma-super-dots-reporter": "^0.2.0",
+    "keep-a-changelog": "^0.10.4",
     "puppeteer": "^2.0.0",
     "resemblejs": "^3.2.5",
     "rollup": "^1.19.4",
@@ -44,12 +40,13 @@
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-typescript2": "^0.29.0",
     "rollup-plugin-uglify-es": "^0.0.1",
-    "typedoc": "^0.20.34",
+    "shipjs": "0.23.3",
+    "typedoc": "^0.22.11",
     "typescript": "^4.1.3"
   },
   "scripts": {
     "build": "rollup -c",
-    "doc": "rm -rf docs && npx typedoc src/etro.ts --excludePrivate --readme none --theme minimal",
+    "doc": "rm -rf docs && npx typedoc src/etro.ts --excludePrivate --readme none",
     "assets": "git fetch origin example-assets:example-assets && git cherry-pick example-assets && git reset --soft HEAD^ && git reset HEAD examples/assets",
     "effects": "node scripts/save-effect-samples.js",
     "lint": "npm run --silent lint:main && npm run --silent lint:test && npm run --silent lint:examples",
@@ -57,7 +54,8 @@
     "lint:test": "eslint -c eslint.test-conf.js spec",
     "lint:examples": "eslint -c eslint.example-conf.js --ext .html examples",
     "start": "http-server",
-    "test": "karma start"
+    "test": "karma start",
+    "release": "shipjs prepare"
   },
   "repository": {
     "type": "git",

package/scripts/gen-effect-samples.html

@@ -43,26 +43,35 @@
     /**
      * Save an effect sample to the disk
      */
-    function saveSample(original, effect, path) {
-      // don't overwrite original's contents
-      const buffer = document.createElement('canvas')
-      buffer.width = original.width
-      buffer.height = original.height
-      const ctx = buffer.getContext('2d')
-      ctx.drawImage(original, 0, 0)
-      const movie = {
-        canvas: buffer, cctx: ctx,
-        width: original.width, height: original.height
-      }
-      // for util.cache()
-      effect._target = { movie }
-      // Run effect
-      effect.apply(movie)
+    async function saveSample(original, effect, path) {
+      // Create movie (needed for layer to render)
+      const movie = new etro.Movie({
+        canvas: document.createElement('canvas'),
+        autoRefresh: false
+      })
+
+      // Convert canvas to image
+      const originalImg = new Image()
+      await new Promise(resolve => {
+        originalImg.onload = resolve
+        originalImg.src = original.toDataURL()
+      })
+
+      // Add an image layer with the effect to the movie
+      const layer = new etro.layer.Image({
+        startTime: 0,
+        duration: 1,
+        source: originalImg
+      })
+      layer.effects.push(effect)
+      movie.layers.push(layer)
 
-      save(buffer, path)
+      // Render and save the layer
+      layer.render()
+      save(layer.canvas, path)
     }
 
-    window.onload = () => {
+    window.onload = async () => {
       const original = genRandomNoise(16, 16)
       save(original, 'original.png')
 
@@ -91,7 +100,7 @@
 
       for (let path in samples) {
         const effect = samples[path]
-        saveSample(original, effect, path)
+        await saveSample(original, effect, path)
       }
       window.done = true
     }

package/scripts/save-effect-samples.js

@@ -20,8 +20,13 @@ function createDirs(filePath) {
 }
 
 (async () => {
-  const browser = await puppeteer.launch()
+  const browser = await puppeteer.launch({
+    args: ['--autoplay-policy=no-user-gesture-required']
+  })
   const page = await browser.newPage()
+  page.on('console', msg => {
+    console.log(`[CONSOLE] ${msg.text()}`)
+  })
 
   await page.goto(`file://${__dirname}/gen-effect-samples.html`)
   await page.waitForFunction(() => window.done);

package/ship.config.js

@@ -0,0 +1,80 @@
+const { parser } = require('keep-a-changelog')
+const fs = require('fs')
+const semver = require('semver')
+
+module.exports = {
+  updateChangelog: false,
+  formatCommitMessage: ({ version }) => `Release v${version}`,
+  formatPullRequestTitle: ({ version }) => `Release v${version}`,
+  getNextVersion: ({ currentVersion, dir }) => {
+    const changelog = new Changelog(`${dir}/CHANGELOG.md`)
+    return changelog.nextVersion(currentVersion)
+  },
+  versionUpdated: async ({ version, _releaseType, dir, _exec }) => {
+    const parsedVersion = semver.parse(version)
+    if (parsedVersion.prerelease.length)
+      return
+
+    // Release 'Unreleased' section in changelog
+    const changelogFile = `${dir}/CHANGELOG.md`
+    const oldChangelog = fs.readFileSync(changelogFile, 'utf8')
+    const parsed = parser(oldChangelog)
+    const release = parsed.findRelease() // get 'Unreleased' section
+    release.setVersion(version) // release
+    release.setDate(new Date()) // today
+    const newChangelog = parsed.toString()
+    fs.writeFileSync(changelogFile, newChangelog, 'utf8')
+  }
+}
+
+class Changelog {
+  constructor (path) {
+    const data = fs.readFileSync(path, 'utf8')
+    const lines = data.split(/\r?\n/)
+    const headings = []
+    let unreleased = false
+
+    this.releaseTag = 'latest'
+    lines.every((line) => {
+      if (line.startsWith('## [Unreleased]')) {
+        unreleased = true
+        const tagMatch = line.match(/## \[Unreleased\]\[(.*)\]/)
+        if (tagMatch)
+          this.releaseTag = tagMatch[1].trim()
+      } else if (line.startsWith('## ')) {
+        return false
+      }
+
+      if (unreleased)
+        if (line.startsWith('### ')) {
+          headings.push(line.match(/### (.*)/)[1].trim())
+        }
+
+      return true
+    })
+
+    if (headings.includes('Changed'))
+      this.releaseType = 'major'
+    else if (headings.includes('Added'))
+      this.releaseType = 'minor'
+    else
+      this.releaseType = 'patch'
+  }
+
+  nextVersion (version) {
+    const parsedVersion = semver.parse(version)
+
+    if (this.releaseTag !== 'latest')
+      if (parsedVersion.prerelease.length) {
+        parsedVersion.inc('prerelease', this.releaseTag)
+      } else {
+        parsedVersion.inc(this.releaseType)
+        parsedVersion.prerelease = [this.releaseTag, 0]
+        parsedVersion.format()
+      }
+    else
+      parsedVersion.inc(this.releaseType)
+
+    return parsedVersion.version
+  }
+}

package/src/effect/stack.ts

@@ -46,7 +46,7 @@ export class Stack extends Base {
 
   attach (movie: Movie): void {
     super.attach(movie)
-    this.effects.forEach(effect => {
+    this.effects.filter(effect => !!effect).forEach(effect => {
       effect.detach()
       effect.attach(movie)
     })
@@ -54,7 +54,7 @@ export class Stack extends Base {
 
   detach (): void {
     super.detach()
-    this.effects.forEach(effect => {
+    this.effects.filter(effect => !!effect).forEach(effect => {
       effect.detach()
     })
   }
@@ -62,6 +62,7 @@ export class Stack extends Base {
   apply (target: Movie | Visual, reltime: number): void {
     for (let i = 0; i < this.effects.length; i++) {
       const effect = this.effects[i]
+      if (!effect) continue
       effect.apply(target, reltime)
     }
   }

package/src/layer/audio-source.ts

@@ -1,4 +1,3 @@
-import { AudioContext, IAudioNode, IAudioDestinationNode } from 'standardized-audio-context'
 import { Movie } from '../movie'
 import { subscribe } from '../event'
 import { applyOptions, val } from '../util'
@@ -8,7 +7,7 @@ type Constructor<T> = new (...args: unknown[]) => T
 
 interface AudioSource extends Base {
   readonly source: HTMLMediaElement
-  readonly audioNode: IAudioNode<AudioContext>
+  readonly audioNode: AudioNode
   playbackRate: number
   /** The audio source node for the media */
   sourceStartTime: number
@@ -41,7 +40,7 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
     readonly source: HTMLMediaElement
 
     private __startTime: number
-    private _audioNode: IAudioNode<AudioContext>
+    private _audioNode: AudioNode
     private _sourceStartTime: number
     private _unstretchedDuration: number
     private _playbackRate: number
@@ -117,12 +116,12 @@ function AudioSourceMixin<OptionsSuperclass extends BaseOptions> (superclass: Co
       // 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._audioNode.connect = <T extends AudioDestinationNode>(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 => {
+      this._audioNode.disconnect = <T extends AudioDestinationNode>(destination?: T | number, output?: number, input?: number): AudioNode => {
         if (this._connectedToDestination &&
         destination === movie.actx.destination)
           this._connectedToDestination = false

package/src/layer/visual.ts

@@ -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()
@@ -125,7 +131,7 @@ class Visual extends Base {
   _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

@@ -2,7 +2,6 @@
  * @module movie
  */
 
-import { AudioContext } from 'standardized-audio-context'
 import { subscribe, publish } from './event'
 import { Dynamic, val, clearCachedValues, applyOptions, watchPublic } from './util'
 import { Base as BaseLayer, Audio as AudioLayer, Video as VideoLayer, Visual } from './layer/index' // `Media` mixins
@@ -10,6 +9,10 @@ import { AudioSource } from './layer/audio-source' // not exported from ./layer/
 import { Base as BaseEffect } from './effect/index'
 
 declare global {
+  interface Window {
+    webkitAudioContext: typeof AudioContext
+  }
+
   interface HTMLCanvasElement {
     captureStream(frameRate?: number): MediaStream
  }
@@ -75,7 +78,11 @@ export class Movie {
   constructor (options: MovieOptions) {
     // TODO: move into multiple methods!
     // Set actx option manually, because it's readonly.
-    this.actx = options.actx || options.audioContext || new AudioContext()
+    this.actx = options.actx ||
+      options.audioContext ||
+      new AudioContext() ||
+      // eslint-disable-next-line new-cap
+      new window.webkitAudioContext()
     delete options.actx
 
     // Proxy that will be returned by constructor
@@ -255,6 +262,10 @@ export class Movie {
     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
@@ -285,7 +296,11 @@ 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)
@@ -293,6 +308,7 @@ export class Movie {
       }
       // TODO: publish to movie, not layers
       mediaRecorder.onstop = () => {
+        this._paused = true
         this._ended = true
         this._canvas = canvasCache
         this._cctx = this.canvas.getContext('2d')
@@ -303,7 +319,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
           })
         )
       }
@@ -324,11 +340,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
   }
@@ -370,27 +388,31 @@ export class Movie {
     const end = this.duration
     const ended = this.currentTime > end
     if (ended) {
-      publish(this, 'movie.ended', { movie: this, repeat: this.repeat })
-      // TODO: only reset currentTime if repeating
-      this._currentTime = 0 // don't use setter
-      publish(this, 'movie.timeupdate', { movie: this })
       this._lastPlayed = performance.now()
       this._lastPlayedOffset = 0 // this.currentTime
       this._renderingFrame = false
       if (!this.repeat || this.recording) {
+        this._paused = true
         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
-
-          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]
+            // 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
+          }
       }
+
+      publish(this, 'movie.ended', { movie: this, repeat: this.repeat })
+
+      // TODO: only reset currentTime if repeating
+      this._currentTime = 0 // don't use setter
+      publish(this, 'movie.timeupdate', { movie: this })
     }
 
     // Stop playback or recording if done
@@ -421,8 +443,8 @@ export class Movie {
       return
     }
 
-    window.requestAnimationFrame(timestamp => {
-      this._render(repeat, timestamp)
+    window.requestAnimationFrame(() => {
+      this._render(repeat, undefined, done)
     }) // TODO: research performance cost
   }
 
@@ -456,6 +478,8 @@ 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).
@@ -532,7 +556,8 @@ export class Movie {
    */
   private _publishToLayers (type, event) {
     for (let i = 0; i < this.layers.length; i++)
-      publish(this.layers[i], type, event)
+      if (Object.prototype.hasOwnProperty.call(this.layers, i))
+        publish(this.layers[i], type, event)
   }
 
   /**
@@ -606,7 +631,8 @@ export class Movie {
     this._currentTime = time
     publish(this, 'movie.seek', {})
     // Render single frame to match new time
-    this.refresh()
+    if (this.autoRefresh)
+      this.refresh()
   }
 
   /**

package/src/util.ts

@@ -425,7 +425,7 @@ export function watchPublic (target: EtroObject): EtroObject {
     publish(proxy, `${target.type}.change.modify`, { property: getPath(receiver, prop), newValue: val })
   }
   const canWatch = (receiver, prop) => !prop.startsWith('_') &&
-    (target.publicExcludes === undefined || !target.publicExcludes.includes(prop))
+    (receiver.publicExcludes === undefined || !receiver.publicExcludes.includes(prop))
 
   // The path to each child property (each is a unique proxy)
   const paths = new WeakMap()