npm - etro - Versions diffs - 0.6.0 → 0.8.1 - Mend

etro 0.6.0 → 0.8.1

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 (157) hide show

package/.github/workflows/nodejs.yml +4 -2
package/CHANGELOG.md +85 -4
package/CODE_OF_CONDUCT.md +5 -5
package/CONTRIBUTING.md +33 -79
package/README.md +93 -26
package/dist/effect/base.d.ts +51 -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 +9387 -0
package/dist/etro-iife.js +9390 -0
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 +82 -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 +2 -9
package/eslint.example-conf.js +9 -0
package/eslint.test-conf.js +1 -0
package/eslint.typescript-conf.js +5 -0
package/examples/application/readme-screenshot.html +16 -17
package/examples/application/video-player.html +10 -11
package/examples/application/webcam.html +6 -6
package/examples/introduction/audio.html +30 -18
package/examples/introduction/effects.html +37 -14
package/examples/introduction/export.html +40 -27
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 +6 -4
package/package.json +34 -13
package/rollup.config.js +19 -3
package/scripts/gen-effect-samples.html +27 -26
package/scripts/save-effect-samples.js +14 -15
package/src/effect/base.ts +115 -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 +58 -0
package/src/effect/shader.ts +557 -0
package/src/effect/stack.ts +77 -0
package/src/effect/transform.ts +193 -0
package/src/etro.ts +26 -0
package/src/event.ts +112 -0
package/src/index.ts +8 -0
package/src/layer/audio-source.ts +219 -0
package/src/layer/audio.ts +34 -0
package/src/layer/base.ts +175 -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 +197 -0
package/src/movie.ts +701 -0
package/src/object.ts +14 -0
package/src/util.ts +466 -0
package/tsconfig.json +8 -0
package/dist/etro.js +0 -3397
package/docs/effect.js.html +0 -1215
package/docs/event.js.html +0 -145
package/docs/index.html +0 -81
package/docs/index.js.html +0 -92
package/docs/layer.js.html +0 -888
package/docs/module-effect-GaussianBlurComponent.html +0 -345
package/docs/module-effect.Brightness.html +0 -339
package/docs/module-effect.Channels.html +0 -319
package/docs/module-effect.ChromaKey.html +0 -611
package/docs/module-effect.Contrast.html +0 -339
package/docs/module-effect.EllipticalMask.html +0 -200
package/docs/module-effect.GaussianBlur.html +0 -202
package/docs/module-effect.GaussianBlurHorizontal.html +0 -242
package/docs/module-effect.GaussianBlurVertical.html +0 -242
package/docs/module-effect.Pixelate.html +0 -330
package/docs/module-effect.Shader.html +0 -1227
package/docs/module-effect.Stack.html +0 -406
package/docs/module-effect.Transform.Matrix.html +0 -193
package/docs/module-effect.Transform.html +0 -1174
package/docs/module-effect.html +0 -148
package/docs/module-event.html +0 -473
package/docs/module-index.html +0 -186
package/docs/module-layer-Media.html +0 -1116
package/docs/module-layer-MediaMixin.html +0 -164
package/docs/module-layer.Audio.html +0 -1188
package/docs/module-layer.Base.html +0 -629
package/docs/module-layer.Image.html +0 -1421
package/docs/module-layer.Text.html +0 -1731
package/docs/module-layer.Video.html +0 -1938
package/docs/module-layer.Visual.html +0 -1698
package/docs/module-layer.html +0 -137
package/docs/module-movie.html +0 -3118
package/docs/module-util.Color.html +0 -702
package/docs/module-util.Font.html +0 -395
package/docs/module-util.html +0 -845
package/docs/movie.js.html +0 -689
package/docs/scripts/collapse.js +0 -20
package/docs/scripts/linenumber.js +0 -25
package/docs/scripts/nav.js +0 -12
package/docs/scripts/polyfill.js +0 -4
package/docs/scripts/prettify/Apache-License-2.0.txt +0 -202
package/docs/scripts/prettify/lang-css.js +0 -2
package/docs/scripts/prettify/prettify.js +0 -28
package/docs/scripts/search.js +0 -83
package/docs/styles/jsdoc.css +0 -671
package/docs/styles/prettify.css +0 -79
package/docs/util.js.html +0 -503
package/screenshots/2019-08-17_0.png +0 -0
package/spec/assets/effect/gaussian-blur-horizontal.png +0 -0
package/spec/assets/effect/gaussian-blur-vertical.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/assets/layer/audio.wav +0 -0
package/spec/assets/layer/image.jpg +0 -0
package/spec/effect.spec.js +0 -352
package/spec/event.spec.js +0 -25
package/spec/layer.spec.js +0 -128
package/spec/movie.spec.js +0 -154
package/spec/util.spec.js +0 -285
package/src/effect.js +0 -1265
package/src/event.js +0 -78
package/src/index.js +0 -23
package/src/layer.js +0 -875
package/src/movie.js +0 -636
package/src/util.js +0 -487

package/eslint.conf.js CHANGED Viewed

@@ -14,15 +14,8 @@ module.exports = {
     ecmaVersion: 2018,
     sourceType: 'module'
   },
-  plugins: [
-    'html'
-  ],
   rules: {
-    'brace-style': ['error', '1tbs', { allowSingleLine: false }]
+    'brace-style': ['error', '1tbs', { allowSingleLine: false }],
+    curly: ['error', 'multi', 'consistent']
   },
-  settings: {
-    html: {
-      indent: '+2'
-    }
-  }
 }

package/eslint.example-conf.js ADDED Viewed

@@ -0,0 +1,9 @@
+const conf = require('./eslint.conf.js')
+conf.globals.etro = 'readonly'
+conf.plugins = ['html']
+conf.settings = {
+  html: {
+    indent: '+2'
+  }
+}
+module.exports = conf

package/eslint.test-conf.js CHANGED Viewed

@@ -1,4 +1,5 @@
 const conf = require('./eslint.conf.js')
 conf.env.jasmine = true
+conf.globals.define = 'readonly'
 conf.globals.etro = 'readonly'
 module.exports = conf

package/eslint.typescript-conf.js ADDED Viewed

@@ -0,0 +1,5 @@
+const conf = require('./eslint.conf.js')
+conf.extends.push('plugin:@typescript-eslint/recommended')
+conf.parser = '@typescript-eslint/parser'
+conf.plugins = ['@typescript-eslint']
+module.exports = conf

package/examples/application/readme-screenshot.html CHANGED Viewed

@@ -3,25 +3,24 @@
 <html>
 <head>
   <title>Fun with Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
+  <script>
     const cols = 2; const rows = 2
     let movie, sample
     const begin = () => {
       const canvas = document.createElement('canvas')
       document.body.appendChild(canvas)
-      movie = new etro.Movie(canvas)
+      movie = new etro.Movie({ canvas })
       etro.event.subscribe(movie, 'movie.timeupdate', () => {
-        if (movie.currentTime >= 11) {
+        if (movie.currentTime >= 11)
           movie.pause()
-        }
       })
       sample = document.createElement('video')
-      sample.src = '../assets/sample.ogv'
+      sample.src = '../assets/desert.mp4'
       sample.onloadedmetadata = addLayers
     }
@@ -32,20 +31,19 @@
       const width = movie.width / cols; const height = movie.height / rows
       let numbLoaded = 0
-      for (let y = 0; y < movie.height; y += height) {
+      for (let y = 0; y < movie.height; y += height)
         for (let x = 0; x < movie.width; x += width) {
           const video = document.createElement('video')
-          video.src = '../assets/sample.ogv'
-          if (x * y) {
+          video.src = '../assets/desert.mp4'
+          if (x * y)
             video.onplay = event => {
               console.log(event)
             }
-          }
           video.onloadedmetadata = () => {
-            const layer = new etro.layer.Video(0, video, {
-              x: x, y: y, width: width, height: height
-              // mediaStartTime: 0
+            const layer = new etro.layer.Video({
+              startTime: 0, source: video, x, y, width, height
+              // sourceStartTime: 0
             }).addEffect(new etro.effect.Channels({
               r: 0.5 + Math.random() * 0.5,
               g: 0.5 + Math.random() * 0.5,
@@ -54,17 +52,18 @@
             movie.addLayer(layer)
             numbLoaded++
-            if (numbLoaded === rows * cols) {
+            if (numbLoaded === rows * cols)
               end()
-            }
           }
         }
-      }
     }
     const end = () => {
       movie
-        .addLayer(new etro.layer.Text(0, sample.duration, 'etro', {
+        .addLayer(new etro.layer.Text({
+          startTime: 0,
+          duration: sample.duration,
+          text: 'etro',
           width: movie.width / 2,
           height: movie.height / 2,
           x: movie.width / 4,

package/examples/application/video-player.html CHANGED Viewed

@@ -2,6 +2,7 @@
 <html>
 <head>
   <title>Video player in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
   <style>
     body {
       background: #333;
@@ -58,9 +59,7 @@
   </style>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
+  <script>
     window.addEventListener('load', () => {
       const canvas = document.getElementById('output')
@@ -69,7 +68,7 @@
         progressBar: document.getElementById('progress')
       }
-      const movie = new etro.Movie(canvas, { repeat: true })
+      const movie = new etro.Movie({ canvas, repeat: true })
       // FIXME: resetting to beginning every time paused and played
       controls.playPause.onclick = event => {
@@ -84,14 +83,13 @@
       canvas.addEventListener('click', controls.playPause.click) // FIXME: isn"t firing
       document.body.addEventListener('keyup', event => {
         const key = event.which || event.keyCode || 0
-        if (key === 32) {
+        if (key === 32)
           controls.playPause.click()
-        } // spacebar
+        // spacebar
       })
       etro.event.subscribe(movie, 'movie.ended', event => {
-        if (!event.repeat) {
+        if (!event.repeat)
           controls.playPause.className = 'play'
-        }
       })
       controls.progressBar.min = 0
@@ -103,6 +101,7 @@
       controls.progressBar.value = 0 // just for sure, it's weird
       controls.progressBar.addEventListener('input', () => {
         movie.currentTime = 1 * controls.progressBar.value
+        movie.refresh()
       })
       etro.event.subscribe(movie, 'movie.timeupdate', () => {
         controls.progressBar.value = movie.currentTime
@@ -114,15 +113,15 @@
       // For simplicity, only use one layer
       movie.addLayer(
-        new etro.layer.Video(0, video)
+        new etro.layer.Video({ startTime: 0, source: video })
       )
       controls.progressBar.max = movie.duration
     })
   </script>
   <div id="container">
-    <video src="../assets/sample.ogv"></video>
-    <img src="../assets/sample.jpg"/>
+    <video src="../assets/desert.mp4"></video>
+    <img src="../assets/lake.jpg"/>
     <canvas id="output"></canvas><br>
     <button id="pause-play" class="play"><!-- styled --></button>
     <input id="progress" type="range" value="0"/>

package/examples/application/webcam.html CHANGED Viewed

@@ -2,13 +2,12 @@
 <html>
 <head>
   <title>getUserMedia()</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
   <video style="display:none"></video>
   <canvas></canvas>
-  <script type="module">
-    import etro from '../../src/index.js'
+  <script>
     const video = document.querySelector('video')
     navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
       video.srcObject = stream
@@ -19,9 +18,10 @@
       }
     })
-    const movie = new etro.Movie(document.querySelector('canvas'))
-      .addLayer(new etro.layer.Visual(0, Infinity, { background: 'black' }))
-      .addLayer(new etro.layer.Video(0, video)
+    const canvas = document.querySelector('canvas')
+    const movie = new etro.Movie({ canvas })
+      .addLayer(new etro.layer.Visual({ startTime: 0, duration: Infinity, background: 'black' }))
+      .addLayer(new etro.layer.Video({ startTime: 0, source: video })
         .addEffect(new etro.effect.ChromaKey(etro.parseColor('black'), 100)))
   </script>
 </body>

package/examples/introduction/audio.html CHANGED Viewed

@@ -2,19 +2,26 @@
 <html>
 <head>
   <title>Manipulating Audio in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
-    let movie
-    const initMovie = () => {
+  <script>
+    const start = () => {
+      button.disabled = true
       // initialize movie
-      movie = new etro.Movie(document.createElement('canvas'))
+      const canvas = document.createElement('canvas')
+      const movie = new etro.Movie({ canvas })
       // initialize layers (all with durations clipped to 5 seconds)
-      const layer1 = new etro.layer.Audio(0, document.getElementById('layer1'), { duration: 5 })
-      const layer2 = new etro.layer.Audio(layer1.duration, document.getElementById('layer2'), { duration: 5 })
-      const layer3 = new etro.layer.Audio(layer2.startTime + layer2.duration, document.getElementById('layer3'), { duration: 5 })
+      const audio1 = document.getElementById('layer1')
+      const audio2 = document.getElementById('layer2')
+      const audio3 = document.getElementById('layer3')
+      const layer1 = new etro.layer.Audio({ startTime: 0, source: audio1, duration: 5 })
+      const layer2 = new etro.layer.Audio({ startTime: layer1.duration, source: audio2, duration: 5 })
+      const layer3 = new etro.layer.Audio({
+        startTime: layer2.startTime + layer2.duration,
+        source: audio3,
+        duration: 5
+      })
       /*
           Once a media layer is added to the movie, it will automatically be connected to the movie's `actx`
@@ -24,29 +31,34 @@
       // movie.layers.push.apply(movie.layers, [layer1, layer2, layer3])
       movie.layers.push(layer1, layer2, layer3)
-      // Now, disconnect the layers from the audio node graph and reconnect them with intermediate audio
+      // Now, disconnect the layers from the audio node graph and reconnect them with intersourcete audio
       // effect nodes.
-      layer1.source.disconnect(movie.actx.destination)
+      layer1.audioNode.disconnect(movie.actx.destination)
       const muter = movie.actx.createGain()
       muter.gain.value = 0
-      layer1.source.connect(muter).connect(movie.actx.destination)
+      layer1.audioNode.connect(muter).connect(movie.actx.destination)
-      layer2.source.disconnect(movie.actx.destination)
+      layer2.audioNode.disconnect(movie.actx.destination)
       const panner = movie.actx.createStereoPanner()
       panner.pan.value = +1 // completely to the right
-      layer2.source.connect(panner).connect(movie.actx.destination)
+      layer2.audioNode.connect(panner).connect(movie.actx.destination)
       // Manipulating the audio graph is not always necessary
       layer3.playbackRate = 2 // double the speed
+      etro.event.subscribe(movie, 'movie.ended', () => {
+        button.disabled = false
+      })
       movie.play()
     }
-    window.addEventListener('load', initMovie)
+    const button = document.querySelector('button')
+    button.addEventListener('click', start)
   </script>
-  <audio id="layer1" src="../assets/sample.wav"></audio>
-  <audio id="layer2" src="../assets/sample.wav"></audio>
-  <audio id="layer3" src="../assets/sample.wav"></audio>
+  <button>Start</button>
+  <audio id="layer1" src="../assets/strings.wav"></audio>
+  <audio id="layer2" src="../assets/strings.wav"></audio>
+  <audio id="layer3" src="../assets/strings.wav"></audio>
 </body>
 </html>

package/examples/introduction/effects.html CHANGED Viewed

@@ -2,10 +2,10 @@
 <html>
 <head>
   <title>Effects 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')
@@ -15,42 +15,65 @@
     })
     const initMovie = canvas => {
-      movie = new etro.Movie(canvas)
+      movie = new etro.Movie({ canvas })
       const image = document.querySelector('img')
       canvas.width = image.width
       canvas.height = image.height
       // create a red 400x400 rectangle that starts at time 0 and lasts 2 seconds
       movie
-        .addLayer(new etro.layer.Image(0, 2, image))
+        .addLayer(new etro.layer.Image({ startTime: 0, duration: 2, source: image }))
       // create a transparent blue 500x200 at (50, 20) that starts at time 1 and lasts 2 seconds
         .addLayer(
-          new etro.layer.Image(2, 2, image).addEffect(
-            new etro.effect.GaussianBlur(3)
+          new etro.layer.Image({ startTime: 2, duration: 2, source: image }).addEffect(
+            new etro.effect.GaussianBlur({ radius: 3 })
           )
         )
         .addLayer(
-          new etro.layer.Image(4, 2, image).addEffect(
+          new etro.layer.Image({ startTime: 4, duration: 2, source: image }).addEffect(
             // you can also use keyframes for almost any property in Etro
-            new etro.effect.Channels({ 0: { r: 2, g: 0.5 }, 2: { r: 0.5, g: 2 } })
+            new etro.effect.Channels({
+              factors: new etro.KeyFrame(
+                [0, { r: 2, g: 0.5 }],
+                [2, { r: 0.5, g: 2 }]
+              )
+            })
           )
         )
         .addLayer(
-          new etro.layer.Image(6, 2, image, {
+          new etro.layer.Image({
+            startTime: 6,
+            duration: 2,
+            source: image,
             // allow rotated image to fill entire screen by setting the size of the layer, which is not the image
-            width: movie.width, height: movie.height
+            width: movie.width,
+            height: movie.height
           }).addEffect(
-            new etro.effect.Transform(new etro.effect.Transform.Matrix().rotate(Math.PI / 6)) // 30d
+            new etro.effect.Transform({
+              matrix: new etro.effect.Transform.Matrix().rotate(Math.PI / 6) // 30d
+            })
           )
         )
         .addLayer(
-          new etro.layer.Image(8, 2, image).addEffect(
-            new etro.effect.EllipticalMask(image.width / 2, image.height / 2, image.width / 2, image.height / 2)
+          new etro.layer.Image({ startTime: 8, duration: 2, source: image }).addEffect(
+            new etro.effect.EllipticalMask({
+              x: image.width / 2,
+              y: image.height / 2,
+              radiusX: image.width / 2,
+              radiusY: image.height / 2
+            })
           )
         )
+        // .addEffect(new etro.effect.GaussianBlur({ radius: 5 }))
+      setTimeout(() => {
+        // console.log(movie.layers[1].effects[0].effects[1].shape)
+      }, 3100)
+      movie
         .play()
     }
   </script>
-  <img src="../assets/sample.jpg" style="display: none;"/>
+  <img src="../assets/lake.jpg" style="display: none;"/>
 </body>
 </html>

package/examples/introduction/export.html CHANGED Viewed

@@ -2,13 +2,25 @@
 <html>
 <head>
   <title>Media in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
-  <script type="module">
+  <div id="input">
+    <img src="../assets/lake.jpg" style="display:none"/>
+    <video src="../assets/desert.mp4" style="display:none"></video>
+    <audio src="../assets/strings.wav" style="display:none"></audio>
+  </div>
+  <div id="output">
+    <video controls></video><br>
+  </div>
+  <button>Record</button>
+  <script>
     // TODO: test audio output on a device that actually has drivers
-    import etro from '../../src/index.js'
     let movie
-    window.addEventListener('load', () => {
+    const btn = document.querySelector('button')
+    btn.addEventListener('click', () => {
+      btn.disabled = true
       const canvas = document.createElement('canvas')
       canvas.width = 600
       canvas.height = 400
@@ -18,53 +30,54 @@
     })
     const initMovie = canvas => {
-      movie = new etro.Movie(canvas)
+      movie = new etro.Movie({ canvas })
       const video = document.querySelector('#input video')
       movie.width = video.videoWidth
       movie.height = video.videoHeight
       movie
-        .addLayer(new etro.layer.Image(0, 3, document.querySelector('#input img'), {
+        .addLayer(new etro.layer.Image({
+          startTime: 0,
+          duration: 3,
+          source: document.querySelector('#input 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
+          destWidth: 400,
+          destHeight: 400
         }))
-        .addLayer(new etro.layer.Video(3, video, {
+        .addLayer(new etro.layer.Video({
+          startTime: 3,
+          source: video,
           // 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('#input audio'), {
-          mediaStartTime: 9, // start audio at 9s
+        .addLayer(new etro.layer.Audio({
+          startTime: 6,
+          source: document.querySelector('#input 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)
         }))
-        .record(25)
+        .record({ frameRate: 25 })
         .then(blob => {
           const video = document.querySelector('#output video')
           video.src = URL.createObjectURL(blob)
-          document.querySelector('p').innerHTML = 'Done'
         })
         .catch(error => {
           throw error
         })
+      window.addEventListener('unload', () => {
+        const video = document.querySelector('#output video')
+        URL.revokeObjectURL(video.src)
+      })
     }
   </script>
-  <div id="input">
-    <img src="../assets/sample.jpg" style="display:none"/>
-    <video src="../assets/sample.ogv" style="display:none"></video>
-    <audio src="../assets/sample.wav" style="display:none"></audio>
-  </div>
-  <div id="output">
-    <video controls></video><br>
-  </div>
-  <p>Recording</p>
 </body>
 </html>

package/examples/introduction/functions.html CHANGED Viewed

@@ -2,10 +2,10 @@
 <html>
 <head>
   <title>Functions 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')
@@ -15,14 +15,16 @@
     })
     const initMovie = canvas => {
-      movie = new etro.Movie(canvas)
+      movie = new etro.Movie({ canvas })
       canvas.width = canvas.height = 400
       movie
       // Functions are callbacks that are called every time a property value is queried.
       // For instance, you can set a layer's opacity to the function `Math.random`, which will make the
       // layer's opacity randomized each animation frame.
-        .addLayer(new etro.layer.Visual(0, 3, {
+        .addLayer(new etro.layer.Visual({
+          startTime: 0,
+          duration: 3,
           // omitting width or height sets the respective element to fill the screen
           background: 'green',

package/examples/introduction/hello-world1.html CHANGED Viewed

@@ -2,23 +2,27 @@
 <html>
 <head>
   <title>Hello World in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
+  <script>
     window.addEventListener('load', () => {
       const canvas = document.createElement('canvas')
       canvas.width = 600
       canvas.height = 400
       document.body.appendChild(canvas)
-      new etro.Movie(canvas)
+      new etro.Movie({ canvas })
       // create a red rectangle that starts at time 0 and lasts 4 seconds and fills the entire screen
-        .addLayer(new etro.layer.Visual(0, 4, {
+        .addLayer(new etro.layer.Visual({
+          startTime: 0,
+          duration: 4,
           background: 'red'
         }))
       // create a transparent blue 500x200 at (50, 20) that starts at time 1 and lasts 2 seconds
-        .addLayer(new etro.layer.Visual(1, 2, {
+        .addLayer(new etro.layer.Visual({
+          startTime: 1,
+          duration: 2,
           background: '#0000ff80',
           border: { color: '#00f', thickness: 4 },
           width: 500,

package/examples/introduction/hello-world2.html CHANGED Viewed

@@ -2,24 +2,24 @@
 <html>
 <head>
   <title>Hello World in Etro</title>
+  <script src="../../dist/etro-iife.js"></script>
 </head>
 <body>
-  <script type="module">
-    import etro from '../../src/index.js'
+  <script>
     window.addEventListener('load', () => {
       const canvas = document.createElement('canvas')
       document.body.appendChild(canvas)
       const video = document.createElement('video')
-      video.src = '../assets/sample.ogv'
+      video.src = '../assets/desert.mp4'
       video.onloadeddata = () => {
         canvas.width = video.videoWidth // you could also do movie.width = video.videoWidth;
         canvas.height = video.videoHeight
-        const movie = new etro.Movie(canvas)
+        const movie = new etro.Movie({ canvas })
         movie
         // add a video layer at 0s in the timeline
-          .addLayer(new etro.layer.Video(0, video))
+          .addLayer(new etro.layer.Video({ startTime: 0, source: video }))
           .play()
         // FOR TESTING issue#8 (don't delete):