npm - etro - Versions diffs - 0.7.0 → 0.8.0 - Mend

etro 0.7.0 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/.github/workflows/nodejs.yml +1 -1
package/CHANGELOG.md +45 -1
package/CONTRIBUTING.md +23 -19
package/README.md +81 -26
package/dist/effect/base.d.ts +38 -0
package/dist/effect/brightness.d.ts +16 -0
package/dist/effect/channels.d.ts +23 -0
package/dist/effect/chroma-key.d.ts +23 -0
package/dist/effect/contrast.d.ts +15 -0
package/dist/effect/elliptical-mask.d.ts +31 -0
package/dist/effect/gaussian-blur.d.ts +60 -0
package/dist/effect/grayscale.d.ts +7 -0
package/dist/effect/index.d.ts +15 -0
package/dist/effect/pixelate.d.ts +18 -0
package/dist/effect/shader.d.ts +99 -0
package/dist/effect/stack.d.ts +23 -0
package/dist/effect/transform.d.ts +73 -0
package/dist/etro-cjs.js +9337 -3331
package/dist/etro-iife.js +9279 -3273
package/dist/etro.d.ts +7 -0
package/dist/event.d.ts +35 -0
package/dist/index.d.ts +6 -0
package/dist/layer/audio-source.d.ts +24 -0
package/dist/layer/audio.d.ts +14 -0
package/dist/layer/base.d.ts +69 -0
package/dist/layer/image.d.ts +6 -0
package/dist/layer/index.d.ts +11 -0
package/dist/layer/text.d.ts +60 -0
package/dist/layer/video.d.ts +11 -0
package/dist/layer/visual-source.d.ts +32 -0
package/dist/layer/visual.d.ts +58 -0
package/dist/movie.d.ts +192 -0
package/dist/object.d.ts +12 -0
package/dist/util.d.ts +125 -0
package/eslint.conf.js +0 -8
package/eslint.example-conf.js +9 -0
package/eslint.typescript-conf.js +5 -0
package/examples/application/readme-screenshot.html +12 -9
package/examples/application/video-player.html +7 -7
package/examples/application/webcam.html +6 -6
package/examples/introduction/audio.html +30 -18
package/examples/introduction/effects.html +14 -10
package/examples/introduction/export.html +32 -25
package/examples/introduction/functions.html +6 -4
package/examples/introduction/hello-world1.html +9 -5
package/examples/introduction/hello-world2.html +5 -5
package/examples/introduction/keyframes.html +35 -23
package/examples/introduction/media.html +26 -18
package/examples/introduction/text.html +9 -5
package/karma.conf.js +1 -1
package/package.json +29 -13
package/rollup.config.js +15 -4
package/scripts/gen-effect-samples.html +29 -25
package/scripts/save-effect-samples.js +14 -15
package/spec/assets/effect/gaussian-blur-horizontal.png +0 -0
package/spec/assets/effect/gaussian-blur-vertical.png +0 -0
package/spec/assets/effect/grayscale.png +0 -0
package/spec/assets/effect/original.png +0 -0
package/spec/assets/effect/pixelate.png +0 -0
package/spec/assets/effect/transform/multiply.png +0 -0
package/spec/assets/effect/transform/rotate.png +0 -0
package/spec/assets/effect/transform/scale-fraction.png +0 -0
package/spec/assets/effect/transform/scale.png +0 -0
package/spec/assets/effect/transform/translate-fraction.png +0 -0
package/spec/assets/effect/transform/translate.png +0 -0
package/spec/effect.spec.js +126 -57
package/spec/event.spec.js +14 -0
package/spec/layer.spec.js +175 -18
package/spec/movie.spec.js +191 -7
package/spec/util.spec.js +14 -5
package/src/effect/base.ts +96 -0
package/src/effect/brightness.ts +43 -0
package/src/effect/channels.ts +50 -0
package/src/effect/chroma-key.ts +82 -0
package/src/effect/contrast.ts +42 -0
package/src/effect/elliptical-mask.ts +75 -0
package/src/effect/gaussian-blur.ts +232 -0
package/src/effect/grayscale.ts +34 -0
package/src/effect/index.ts +22 -0
package/src/effect/pixelate.ts +59 -0
package/src/effect/shader.ts +561 -0
package/src/effect/stack.ts +74 -0
package/src/effect/transform.ts +194 -0
package/src/etro.ts +26 -0
package/src/event.ts +118 -0
package/src/index.ts +8 -0
package/src/layer/audio-source.ts +217 -0
package/src/layer/audio.ts +35 -0
package/src/layer/base.ts +156 -0
package/src/layer/image.ts +8 -0
package/src/layer/index.ts +13 -0
package/src/layer/text.ts +138 -0
package/src/layer/video.ts +15 -0
package/src/layer/visual-source.ts +150 -0
package/src/layer/visual.ts +198 -0
package/src/movie.ts +709 -0
package/src/object.ts +14 -0
package/src/util.ts +473 -0
package/tsconfig.json +8 -0
package/screenshots/2019-08-17_0.png +0 -0
package/src/effect.js +0 -1268
package/src/event.js +0 -78
package/src/index.js +0 -23
package/src/layer.js +0 -897
package/src/movie.js +0 -637
package/src/util.js +0 -505

package/examples/introduction/media.html CHANGED Viewed

@@ -2,14 +2,18 @@
 <html>
 <head>
   <title>Media in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
   <style> img, video {display: none;} </style>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
-    let movie
-    window.addEventListener('load', () => {
+  <img src="../assets/lake.jpg"/>
+  <video src="../assets/desert.mp4"></video>
+  <audio src="../assets/strings.wav"></audio>
+  <button>Start</button>
+  <script>
+    const button = document.querySelector('button')
+    button.addEventListener('click', () => {
+      button.disabled = true
       const canvas = document.createElement('canvas')
       canvas.width = 600
       canvas.height = 400
@@ -19,37 +23,41 @@
     })
     const initMovie = canvas => {
-      movie = new etro.Movie(canvas)
+      const movie = new etro.Movie({ canvas })
       const video = document.querySelector('video')
       movie.width = video.videoWidth
       movie.height = video.videoHeight
       movie
-        .addLayer(new etro.layer.Image(0, 3, document.querySelector('img'), {
+        .addLayer(new etro.layer.Image({
+          startTime: 0,
+          duration: 3,
+          source: document.querySelector('img'),
           // crop @ (150, 150) extending (200, 200)
-          clipX: 100,
-          clipY: 100,
+          sourceX: 100,
+          sourceY: 100,
+          sourceWidth: 400,
+          sourceHeight: 400,
           x: 100,
           y: 100,
-          clipWidth: 400,
-          clipHeight: 400,
           width: 400,
           height: 400
         }))
-        .addLayer(new etro.layer.Video(3, video, {
+        .addLayer(new etro.layer.Video({
+          source: video,
+          startTime: 3,
           // trim video to only include 3 seconds starting 2 minutes into the video in the video
-          mediaStartTime: 120,
+          sourceStartTime: 5,
           duration: 3
         }))
-        .addLayer(new etro.layer.Audio(6, document.querySelector('audio'), {
-          mediaStartTime: 9, // start audio at 9s
+        .addLayer(new etro.layer.Audio({
+          startTime: 6,
+          source: document.querySelector('audio'),
+          sourceStartTime: 9, // start audio at 9s
           duration: 3 // last 3s
           // volume: 0.25 // 25% of default volume (same as setting volume attribute on audio element)
         }))
         .play()
     }
   </script>
-  <img src="../assets/sample.jpg"/>
-  <video src="../assets/sample.ogv"></video>
-  <audio src="../assets/sample.wav"></audio>
 </body>
 </html>

package/examples/introduction/text.html CHANGED Viewed

@@ -2,10 +2,10 @@
 <html>
 <head>
   <title>Text in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
+  <script>
     let movie
     window.addEventListener('load', () => {
       const canvas = document.createElement('canvas')
@@ -17,9 +17,13 @@
     })
     const initMovie = canvas => {
-      movie = new etro.Movie(canvas)
-      movie.addLayer(new etro.layer.Text(0, 4, 'Hello world', {
-        font: '24px monospace', color: 'blue'
+      movie = new etro.Movie({ canvas })
+      movie.addLayer(new etro.layer.Text({
+        startTime: 0,
+        duration: 4,
+        text: 'Hello world',
+        font: '24px monospace',
+        color: 'blue'
       })).play()
     }
   </script>

package/karma.conf.js CHANGED Viewed

@@ -30,7 +30,7 @@ module.exports = function (config) {
     // test results reporter to use
     // possible values: 'dots', 'progress'
     // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-    reporters: ['progress'],
+    reporters: ['dots'],
     // web server port
     port: 9876,

package/package.json CHANGED Viewed

@@ -1,16 +1,21 @@
 {
   "name": "etro",
-  "version": "0.7.0",
-  "description": "A flexible video-editing library for the browser",
-  "main": "dist/etro-cjs.js",
-  "browser": "src/index.js",
+  "version": "0.8.0",
+  "description": "An extendable video-editing framework for the browser and Node",
+  "browser": "dist/etro-cjs.js",
+  "types": "dist/index.d.ts",
   "directories": {
     "doc": "docs",
     "example": "examples",
     "test": "spec"
   },
-  "dependencies": {},
+  "dependencies": {
+    "standardized-audio-context": "^25.1.13"
+  },
   "devDependencies": {
+    "@types/dom-mediacapture-record": "^1.0.7",
+    "@typescript-eslint/eslint-plugin": "^4.15.2",
+    "@typescript-eslint/parser": "^4.15.2",
     "docdash": "^1.1.1",
     "ecstatic": ">=4.1.3",
     "eslint": "^6.5.1",
@@ -25,24 +30,29 @@
     "jasmine": "^3.4.0",
     "jsdoc": "^3.6.3",
     "jsdoc-export-default-interop": "^0.3.1",
-    "karma": "^5.0.5",
+    "karma": "^6.1.1",
     "karma-chrome-launcher": "^3.1.0",
     "karma-jasmine": "^2.0.1",
+    "karma-super-dots-reporter": "^0.2.0",
     "puppeteer": "^2.0.0",
     "rollup": "^1.19.4",
+    "rollup-plugin-cleaner": "^1.0.0",
     "rollup-plugin-eslint": "^7.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-uglify-es": "^0.0.1"
+    "rollup-plugin-typescript2": "^0.29.0",
+    "rollup-plugin-uglify-es": "^0.0.1",
+    "typedoc": "^0.20.34",
+    "typescript": "^4.1.3"
   },
   "scripts": {
     "build": "rollup -c",
-    "doc": "rm -rf docs && npx jsdoc -r src -d docs -t node_modules/docdash",
+    "doc": "rm -rf docs && npx typedoc src/etro.ts --excludePrivate --readme none --theme minimal",
+    "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",
-    "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": "npm run --silent lint:main && npm run --silent lint:test && npm run --silent lint:examples",
+    "lint:main": "eslint -c eslint.typescript-conf.js --ext .ts src",
     "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"
   },
@@ -51,10 +61,16 @@
     "url": "git+https://github.com/etro-js/etro.git"
   },
   "keywords": [
+    "video",
+    "audio",
+    "blob",
     "video-editing",
     "video-editor",
+    "video-manipulation",
     "browser",
-    "api-driven"
+    "nodejs",
+    "api-driven",
+    "etro"
   ],
   "author": "Caleb Sacks (https://calebsacks.me)",
   "license": "GPL-3.0",

package/rollup.config.js CHANGED Viewed

@@ -1,17 +1,28 @@
 // import uglify from "rollup-plugin-uglify-es";
+import cleaner from 'rollup-plugin-cleaner'
 import resolve from 'rollup-plugin-node-resolve'
+import typescript from 'rollup-plugin-typescript2'
 export default [
   // iife bundle
   {
-    input: 'src/index.js',
+    input: 'src/index.ts',
     output: { file: 'dist/etro-iife.js', format: 'iife', name: 'etro' },
-    plugins: [resolve()]
+    plugins: [
+      cleaner({
+        targets: ['dist']
+      }),
+      typescript(),
+      resolve()
+    ]
   },
   {
-    input: 'src/index.js',
+    input: 'src/index.ts',
     output: { file: 'dist/etro-cjs.js', format: 'cjs' },
-    plugins: [resolve()]
+    plugins: [
+      typescript(),
+      resolve()
+    ]
   }
   // // es6 module bundle
   // {

package/scripts/gen-effect-samples.html CHANGED Viewed

@@ -50,12 +50,14 @@
       buffer.height = original.height
       const ctx = buffer.getContext('2d')
       ctx.drawImage(original, 0, 0)
-      // do effect
-      effect.apply({
+      const movie = {
         canvas: buffer, cctx: ctx,
         width: original.width, height: original.height
-      })
+      }
+      // for util.cache()
+      effect._target = { movie }
+      // Run effect
+      effect.apply(movie)
       save(buffer, path)
     }
@@ -65,34 +67,36 @@
       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)
+        'gaussian-blur-horizontal.png': new etro.effect.GaussianBlurHorizontal({ radius: 5 }),
+        'gaussian-blur-vertical.png': new etro.effect.GaussianBlurVertical({ radius: 5 }),
+        'grayscale.png': new etro.effect.Grayscale(),
+        'pixelate.png': new etro.effect.Pixelate({ pixelSize: 3 }),
+        'transform/translate.png': new etro.effect.Transform({
+          matrix: new etro.effect.Transform.Matrix().translate(-3, 5)
+        }),
+        'transform/translate-fraction.png': new etro.effect.Transform({
+          matrix: new etro.effect.Transform.Matrix().translate(0.5, 0.5)
+        }),
+        'transform/scale.png': new etro.effect.Transform({
+          matrix: new etro.effect.Transform.Matrix().scale(2, 2)
+        }),
+        'transform/scale-fraction.png': new etro.effect.Transform({
+          matrix: new etro.effect.Transform.Matrix().scale(0.5, 0.5)
+        }),
+        'transform/rotate.png': new etro.effect.Transform({
+          matrix: new etro.effect.Transform.Matrix().rotate(Math.PI / 6)
+        }),
+        'transform/multiply.png': new etro.effect.Transform({
+          matrix: 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)
       }
+      window.done = true
     }
   </script>
 </body>

package/scripts/save-effect-samples.js CHANGED Viewed

@@ -23,21 +23,20 @@ function createDirs(filePath) {
   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 }
-    }))
+  await page.goto(`file://${__dirname}/gen-effect-samples.html`)
+  await page.waitForFunction(() => window.done);
+  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()
+  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 page.goto(`file://${__dirname}/gen-effect-samples.html`)
+  await browser.close()
 })()