etro 0.6.0

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "etro",
+  "version": "0.6.0",
+  "description": "A flexible video-editing library for the browser",
+  "browser": "src/index.js",
+  "directories": {
+    "doc": "docs",
+    "example": "examples",
+    "test": "spec"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "docdash": "^1.1.1",
+    "eslint": "^6.5.1",
+    "eslint-config-standard": "^14.1.0",
+    "eslint-plugin-html": "^6.0.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-node": "^10.0.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.1",
+    "ev": "0.0.7",
+    "http-server": "^0.11.1",
+    "jasmine": "^3.4.0",
+    "jsdoc": "^3.6.3",
+    "jsdoc-export-default-interop": "^0.3.1",
+    "karma": "^4.3.0",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-jasmine": "^2.0.1",
+    "puppeteer": "^2.0.0",
+    "rollup": "^1.19.4",
+    "rollup-plugin-eslint": "^7.0.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-uglify-es": "^0.0.1"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "doc": "rm -rf docs && npx jsdoc -r src -d docs -t node_modules/docdash",
+    "effects": "node scripts/save-effect-samples.js",
+    "fix:main": "eslint -c eslint.conf.js --fix --ext .js,.html src examples",
+    "fix:test": "eslint -c eslint.test-conf.js --fix spec",
+    "lint": "npm run --silent lint:main && npm run --silent lint:test",
+    "lint:main": "eslint -c eslint.conf.js --ext .js,.html src examples",
+    "lint:test": "eslint -c eslint.test-conf.js spec",
+    "start": "http-server",
+    "test": "karma start"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/etro-js/etro.git"
+  },
+  "keywords": [
+    "video-editing",
+    "video-editor",
+    "browser",
+    "api-driven"
+  ],
+  "author": "Caleb Sacks (https://calebsacks.me)",
+  "license": "GPL-3.0",
+  "bugs": {
+    "url": "https://github.com/etro-js/etro/issues"
+  },
+  "homepage": "https://github.com/etro-js/etro#readme"
+}

package/private-todo.txt

@@ -0,0 +1,70 @@
+(A) 2021-04-21 offline recording with ffmpeg.wasm
+(A) 2021-04-21 document events
+(A) 2021-05-17 test recording to mp4
+(A) 2021-05-17 test that keyframes extend last frame for infinity!!
+(B) 2020-08-03 make sure each event's purpose is to notify the public world of notable things that happen in the object.
+(B) 2020-08-27 transitions?
+(B) 2020-12-30 emit modify events when effects are added to layer?
+(B) 2020-12-30 ensure order of `set` and `deleteProperty` are correct in array proxy with `pop`
+(B) 2021-04-12 disable autoRefresh in tests and test integration with this switch some other way
+(C) 2019-10-13 idea: layer inheritance
+(C) 2019-10-13 ignore leading underscore in shader uniform property names
+(C) 2019-10-13 fix opacity with shader effects
+(C) 2020-08-08 Replace val(element, 'property', reltime) with element.property.value
+(C) 2020-08-12 call URL.revokeObjectURL when recording
+(C) 2020-12-30 simplify movie.change.* into movie.change
+(C) 2021-03-28 make all color properties use `Color`
+(C) 2021-04-02 abort recording
+(C) 2021-04-21 webcam example doesn't work on FF unless autoRefresh is set to false
+(C) 2021-07-13 make all layers canvases the same size as the movie
+(C) 2021-07-18 movie stops recording a few frames late when duration is supplied
+(D) 2019-10-15 change chroma key constructor signature
+(D) 2019-11-11 treat zero as invalid for pixelate radius
+(D) 2019-11-11 decide on effect.Transform using hardware acceleration
+(D) 2019-11-18 Look at linearInterp objectKeys default value
+(D) 2019-12-25 Rename `Stack` to something else
+(D) 2020-08-02 Not every option should be set as a property on the object
+(D) 2021-01-24 Remove path support in val (because users would expect it to evaluate every path part)
+(D) 2021-01-26 Fix inheritance checking for media mixin
+(D) 2021-01-26 Media docstring type
+(D) 2021-01-26 Call super in all media mixin methods
+(D) 2021-01-27 Use options.js
+(D) 2021-04-02 error on invalid `record` options
+(D) 2021-04-12 use val() when recalculating AudioSource#duration based on playbackRate
+(D) 2021-07-09 multiple layers of proxies in watched objects
+
+x (B) 2021-04-12 make error range for pixel tests
+x (C) 2021-02-26 make sure that movie background gets val'd
+x (B) 2021-04-03 expose MovieOptions
+x (D) 2019-10-09 probably convert to typescript
+x (C) 2019-10-22 make image and video both extend a mixin
+x (C) 2021-04-03 2019-01-07 record for interval of time
+x (B) 2021-04-03 2021-04-03 add missing properties to MixedVisualSource
+x (D) 2021-04-03 2021-04-03 move opacity out of `border` in Visual
+x (B) 2021-01-28 2020-12-18 split layers up into multiple files
+x (B) 2021-01-28 2020-12-18 split effects up into multiple files
+x (B) 2020-08-27 individual interpolation for keyframe sets
+x (B) 2019-12-24 support node
+x (B) 2020-12-31 2020-12-30 Detach effect when replaced in layer
+x (D) 2020-12-18 2020-08-02 Rename `cctx` -> `vctx`
+x (B) 2019-01-02 fix movie record test failing with GitHub actions
+x (B) 2020-08-03 2020-08-03 don't set Image#clipWidth in init
+x (B) 2020-08-03 2020-08-03 remove properties like Video#mediaWidth, effectively removing layer borders
+x (B) 2020-08-03 2019-10-04 decide on the purpose of events - it's to notify the outside world of notable things that happen in the object
+x (B) 2019-12-25 decide on public / private properties
+x (C) 2019-12-25 2019-12-24 make getDefaultOptions private
+x (D) 2019-11-18 Change Color constructor default a from 255 -> 1.0
+x (A) 2019-12-06 2019-11-11 Start roadmap
+x (A) 2019-11-19 2019-10-22 Util tests
+x (A) 2019-10-22 Effect tests
+x (D) 2019-11-18 2019-11-18 update watchPublic description, removing part that says "after all public properties are initialized in constructor"
+x (B) 2019-10-13 mv examples/media examples/assets
+x (A) 2019-10-22 2019-10-22 Layer tests
+x (B) 2019-10-12 support media live streams
+x (C) 2019-10-03 research if dist/etris-esm.js is necessary
+x (A) 2019-10-04 upload to npm
+x (C) 2019-10-07 lint examples
+x (B) 2019-10-04 fix jsdoc comments after linting
+x (A) 2019-10-07 2019-10-07 fix recording silent movie on chrome
+x (A) 2019-10-05 2019-10-03 research if I can include open media in my repo
+x 2019-10-04 2019-10-03 use one of eslint's official configs

package/rename-file.sh

@@ -0,0 +1,18 @@
+#!/usr/bin/bash
+
+set -e
+
+file=$1
+
+# Update file contents
+sed -i 's/clabe45.github.io\/vidar/etrojs.dev/g' $file
+sed -i 's/calebsacks.me\/vidar/etrojs.dev/g' $file
+sed -i 's/vidar/etro/g' $file
+sed -i 's/Vidar/Etro/g' $file
+sed -i 's/vd/etro/g' $file
+sed -i 's/clabe45/etro-js/g' $file
+
+# Update file name
+rename 's/vidar/etro/' $file
+
+echo "Updated $file"

package/rename-versions.sh

@@ -0,0 +1,14 @@
+#!/usr/bin/bash
+
+set -e
+
+for version in "$@"
+do
+    git checkout v$version
+
+    $(dirname "$0")/rename.sh
+
+    git tag v$version-renamed
+
+    echo ""
+done

package/rename.sh

@@ -0,0 +1,22 @@
+#!/usr/bin/bash
+
+set -e
+
+find -type f -not -name 'rename*.sh' -not -path '*./package-lock.json' -not -path '*./.git/*' -not -path '*./node_modules/*' -exec $(dirname "$0")/rename-file.sh {} \;
+jq '.author = "Caleb Sacks (https://calebsacks.me)"' package.json > package.json.tmp
+mv package.json{.tmp,}
+
+set +e
+
+npm i && npm run lint --if-present && npm run build --if-present && npm run test --if-present
+
+if [[ $? -ne 0 ]]
+then
+    read -p "CI workflow failed. Press [Enter] to continue or Ctrl-C to exit" _
+fi
+
+set -e
+
+git add .
+git rm --cached rename*.sh
+force_commit=true git commit -m "Rename project to 'etro'"

package/rollup.config.js

@@ -0,0 +1,31 @@
+// import uglify from "rollup-plugin-uglify-es";
+import resolve from 'rollup-plugin-node-resolve'
+
+export default [
+  // iife bundle
+  {
+    input: 'src/index.js',
+    output: { file: 'dist/etro.js', format: 'iife', name: 'etro' },
+    plugins: [resolve()]
+  }
+  // // es6 module bundle
+  // {
+  //     input: "src/index.js",
+  //     output: { file: "dist/etro-esm.js", format: "esm", name: "etro" }
+  // },
+
+  /*      ERRORS FOR SOME REASON
+    // iife bundle (minified)
+    {
+        input: 'src/index.js',
+        output: { file: 'dist/etro-iife.min.js', format: 'iife', name: 'mv' },
+        plugins: [ uglify() ]
+    },
+    // es6 module bundle (minified)
+    {
+        input: 'src/index.js',
+        output: { file: 'dist/etro-esm.min.js', format: 'esm', name: 'mv' },
+        plugins: [ uglify() ]
+    }
+    */
+]

package/scripts/gen-effect-samples.html

@@ -0,0 +1,99 @@
+<!-- Used by ./save-effect-samples.js (npm run effects) -->
+<!DOCTYPE html>
+<html>
+<body>
+  <script src="../dist/etro.js"></script>
+  <script>
+    /**
+     * Prepares a canvas for saving
+     */
+    function save(canvas, path) {
+      const p = document.createElement('p')
+      p.dataset.path = path
+      p.innerHTML = canvas.toDataURL()
+      document.body.appendChild(p)
+    }
+
+    /**
+     * Create a square canvas with random opaque noise
+     * @param {number} size the width and height
+     * @return {TestCanvas}
+     *
+     * @typedef {Object} TestCanvas
+     * @property {CanvasRenderingContext2D} ctx
+     * @property {ImageData} imageData
+     */
+    function genRandomNoise (width, height) {
+      const canvas = document.createElement('canvas')
+      canvas.width = width
+      canvas.height = height
+      const ctx = canvas.getContext('2d')
+      // Create a grid of random colors
+      const imageData = ctx.createImageData(canvas.width, canvas.height)
+      // opaque so premultiplied alpha won't mess up the rgb comparisons
+      const data = imageData.data.map((_, i) => i % 4 === 3 ? 255 : Math.floor(256 * Math.random()))
+      for (let i = 0; i < data.length; i++) {
+        imageData.data[i] = data[i]
+      }
+      ctx.putImageData(imageData, 0, 0)
+
+      return canvas
+    }
+
+    /**
+     * 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)
+
+      // do effect
+      effect.apply({
+        canvas: buffer, cctx: ctx,
+        width: original.width, height: original.height
+      })
+
+      save(buffer, path)
+    }
+
+    window.onload = () => {
+      const original = genRandomNoise(16, 16)
+      save(original, 'original.png')
+
+      const samples = {
+        'gaussian-blur-horizontal.png': new etro.effect.GaussianBlurHorizontal(5),
+        'gaussian-blur-vertical.png': new etro.effect.GaussianBlurVertical(5),
+        'pixelate.png': new etro.effect.Pixelate(3),
+        'transform/translate.png': new etro.effect.Transform(
+          new etro.effect.Transform.Matrix().translate(-3, 5)
+        ),
+        'transform/translate-fraction.png': new etro.effect.Transform(
+          new etro.effect.Transform.Matrix().translate(0.5, 0.5)
+        ),
+        'transform/scale.png': new etro.effect.Transform(
+          new etro.effect.Transform.Matrix().scale(2, 2)
+        ),
+        'transform/scale-fraction.png': new etro.effect.Transform(
+          new etro.effect.Transform.Matrix().scale(0.5, 0.5)
+        ),
+        'transform/rotate.png': new etro.effect.Transform(
+          new etro.effect.Transform.Matrix().rotate(Math.PI / 6)
+        ),
+        'transform/multiply.png': new etro.effect.Transform(
+          new etro.effect.Transform.Matrix().scale(2, 2)
+            .multiply(new etro.effect.Transform.Matrix().translate(-3, 5))
+        )
+      }
+
+      for (let path in samples) {
+        const effect = samples[path]
+        saveSample(original, effect, path)
+      }
+    }
+  </script>
+</body>
+</html>

package/scripts/save-effect-samples.js

@@ -0,0 +1,43 @@
+/**
+ * @module
+ * <em>Run this script and review the results whenever you add a unit test or make an effect algorithm change.</em>
+ */
+
+const path = require('path')
+const fs = require('fs')
+const puppeteer = require('puppeteer')
+
+// parent directory
+const projectDir = __dirname.split('/').slice(0, -1).join('/')
+
+function createDirs(filePath) {
+  const dirname = path.dirname(filePath)
+  if (fs.existsSync(dirname)) {
+    return
+  }
+  createDirs(dirname)
+  fs.mkdirSync(dirname)
+}
+
+(async () => {
+  const browser = await puppeteer.launch()
+  const page = await browser.newPage()
+
+  page.on('load', async () => {
+    // console.log(await page.$$('p'));
+    const items = await page.$$eval('p', elems => elems.map(p => {
+      return { data: p.innerHTML, path: p.dataset.path }
+    }))
+
+    items.forEach(item => {
+      // remove prefix and save to png
+      const buffer = Buffer.from(item.data.replace(/^data:image\/png;base64,/, ''), 'base64')
+      console.log(`writing ${item.path} ...`)
+      const path = projectDir + '/spec/assets/effect/' + item.path
+      createDirs(path)
+      fs.writeFileSync(path, buffer)
+    })
+    await browser.close()
+  })
+  await page.goto(`file://${__dirname}/gen-effect-samples.html`)
+})()