npm - etro - Versions diffs - 0.8.5 → 0.9.1 - Mend

etro 0.8.5 → 0.9.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 (47) hide show

package/.github/workflows/nodejs.yml +1 -1
package/CHANGELOG.md +27 -0
package/CONTRIBUTING.md +13 -26
package/README.md +8 -15
package/dist/effect/base.d.ts +5 -5
package/dist/effect/visual.d.ts +11 -0
package/dist/etro-cjs.js +84 -53
package/dist/etro-iife.js +84 -53
package/dist/layer/image.d.ts +2 -2
package/dist/layer/text.d.ts +3 -3
package/dist/layer/visual-source.d.ts +18 -3
package/dist/layer/visual.d.ts +5 -5
package/dist/movie.d.ts +13 -4
package/dist/object.d.ts +5 -1
package/dist/util.d.ts +2 -0
package/eslint.conf.js +2 -0
package/eslint.test-conf.js +1 -2
package/karma.conf.js +17 -8
package/package.json +19 -19
package/scripts/gen-effect-samples.html +24 -0
package/scripts/save-effect-samples.js +1 -1
package/src/effect/base.ts +6 -6
package/src/effect/stack.ts +2 -2
package/src/effect/transform.ts +2 -2
package/src/effect/visual.ts +16 -1
package/src/layer/audio-source.ts +4 -1
package/src/layer/base.ts +3 -2
package/src/layer/image.ts +3 -3
package/src/layer/text.ts +4 -4
package/src/layer/visual-source.ts +27 -7
package/src/layer/visual.ts +7 -7
package/src/movie.ts +55 -37
package/src/object.ts +5 -1
package/src/util.ts +2 -0
package/tsconfig.json +3 -1
package/examples/application/readme-screenshot.html +0 -85
package/examples/application/video-player.html +0 -130
package/examples/application/webcam.html +0 -28
package/examples/introduction/audio.html +0 -64
package/examples/introduction/effects.html +0 -79
package/examples/introduction/export.html +0 -83
package/examples/introduction/functions.html +0 -37
package/examples/introduction/hello-world1.html +0 -37
package/examples/introduction/hello-world2.html +0 -32
package/examples/introduction/keyframes.html +0 -79
package/examples/introduction/media.html +0 -63
package/examples/introduction/text.html +0 -31

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

@@ -1,85 +0,0 @@
-<!-- TODO: fix -->
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Fun with Etro</title>
-  <script src="../../dist/etro-iife.js"></script>
-</head>
-<body>
-  <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 })
-      etro.event.subscribe(movie, 'movie.timeupdate', () => {
-        if (movie.currentTime >= 11)
-          movie.pause()
-      })
-      sample = document.createElement('video')
-      sample.src = '../assets/desert.mp4'
-      sample.onloadedmetadata = addLayers
-    }
-    const addLayers = () => {
-      movie.width = sample.videoWidth // you could also do canvas.width = sample.videoWidth;
-      movie.height = sample.videoHeight
-      const width = movie.width / cols; const height = movie.height / rows
-      let numbLoaded = 0
-      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/desert.mp4'
-          if (x * y)
-            video.onplay = event => {
-              console.log(event)
-            }
-          video.onloadedmetadata = () => {
-            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,
-              b: 0.5 + Math.random() * 0.5
-            }))
-            movie.addLayer(layer)
-            numbLoaded++
-            if (numbLoaded === rows * cols)
-              end()
-          }
-        }
-    }
-    const end = () => {
-      movie
-        .addLayer(new etro.layer.Text({
-          startTime: 0,
-          duration: sample.duration,
-          text: 'etro',
-          width: movie.width / 2,
-          height: movie.height / 2,
-          x: movie.width / 4,
-          y: movie.height / 4,
-          textX: -movie.width / 4 + movie.width / 2,
-          textY: -movie.height / 4 + movie.height / 2,
-          background: 'rgba(255,0,200,0.4)',
-          color: 'rgba(255,255,255,0.7)',
-          font: '24px monospace',
-          textAlign: 'center',
-          textBaseline: 'middle'
-        }))
-        .play()
-    }
-    window.addEventListener('load', begin)
-  </script>
-</body>
-</html>

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

@@ -1,130 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Video player in Etro</title>
-  <script src="../../dist/etro-iife.js"></script>
-  <style>
-    body {
-      background: #333;
-    }
-    /* TODO: make chrome-compatable */
-    input[type=range]::-moz-range-progress {
-      background-color: #d0d0d0;
-    }
-    input[type=range]::-moz-range-track {
-      background-color: #808080;
-    }
-    .center-x {
-      text-align: center;
-    }
-    img, video {
-      display: none;
-    }
-    /* https://css-tricks.com/making-pure-css-playpause-button/ */
-    .play {
-      background: transparent;
-      width: 24px;
-      height: 24px;
-      box-sizing: border-box;
-      border-style: solid;
-      border-color: transparent transparent transparent #d0d0d0;
-      border-width: 12px 0 12px 24px;
-    }
-    .pause {
-      background: transparent;
-      width: 24px;
-      height: 24px;
-      border-style: double;
-      border-color: #d0d0d0;
-      border-width: 0 0 0 12px;
-    }
-    .pause:focus {
-      /* TODO: hide outline */
-    }
-    #progress {
-      width: calc(100% - 64px);  /* TODO: make better */
-      float: right;
-    }
-    #container {
-      display: inline-block;
-    }
-  </style>
-</head>
-<body>
-  <script>
-    window.addEventListener('load', () => {
-      const canvas = document.getElementById('output')
-      const controls = {
-        playPause: document.getElementById('pause-play'),
-        progressBar: document.getElementById('progress')
-      }
-      const movie = new etro.Movie({ canvas, repeat: true })
-      // FIXME: resetting to beginning every time paused and played
-      controls.playPause.onclick = event => {
-        if (controls.playPause.className === 'play') {
-          movie.play()
-          controls.playPause.className = 'pause'
-        } else {
-          movie.pause()
-          controls.playPause.className = 'play'
-        }
-      }
-      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)
-          controls.playPause.click()
-        // spacebar
-      })
-      etro.event.subscribe(movie, 'movie.ended', event => {
-        if (!event.repeat)
-          controls.playPause.className = 'play'
-      })
-      controls.progressBar.min = 0
-      /* controls.progressBar.step = movie.duration / controls.progressBar.style.getComputedStyle().width;
-            controls.progressBar.addEventListener("resize", () => {
-                controls.progressBar.step = movie.duration / controls.progressBar.style.width;
-            }); */
-      controls.progressBar.step = 0.5 // half of a second
-      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
-      })
-      const video = document.querySelector('video')
-      canvas.width = video.videoWidth
-      canvas.height = video.videoHeight
-      // For simplicity, only use one layer
-      movie.addLayer(
-        new etro.layer.Video({ startTime: 0, source: video })
-      )
-      controls.progressBar.max = movie.duration
-    })
-  </script>
-  <div id="container">
-    <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"/>
-  </div>
-</body>
-</html>

package/examples/application/webcam.html DELETED Viewed

@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>getUserMedia()</title>
-  <script src="../../dist/etro-iife.js"></script>
-</head>
-<body>
-  <video style="display:none"></video>
-  <canvas></canvas>
-  <script>
-    const video = document.querySelector('video')
-    navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
-      video.srcObject = stream
-      video.onloadedmetadata = () => {
-        movie.width = video.videoWidth
-        movie.height = video.videoHeight
-        movie.play()
-      }
-    })
-    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>
-</html>

package/examples/introduction/audio.html DELETED Viewed

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Manipulating Audio in Etro</title>
-  <script src="../../dist/etro-iife.js"></script>
-</head>
-<body>
-  <script>
-    const start = () => {
-      button.disabled = true
-      // initialize movie
-      const canvas = document.createElement('canvas')
-      const movie = new etro.Movie({ canvas })
-      // initialize layers (all with durations clipped to 5 seconds)
-      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`
-          property.
-          */
-      // add layers to movie (first, so we can reconnect it to the graph)
-      // 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 intersourcete audio
-      // effect nodes.
-      layer1.audioNode.disconnect(movie.actx.destination)
-      const muter = movie.actx.createGain()
-      muter.gain.value = 0
-      layer1.audioNode.connect(muter).connect(movie.actx.destination)
-      layer2.audioNode.disconnect(movie.actx.destination)
-      const panner = movie.actx.createStereoPanner()
-      panner.pan.value = +1 // completely to the right
-      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()
-    }
-    const button = document.querySelector('button')
-    button.addEventListener('click', start)
-  </script>
-  <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 DELETED Viewed

@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Effects in Etro</title>
-  <script src="../../dist/etro-iife.js"></script>
-</head>
-<body>
-  <script>
-    let movie
-    window.addEventListener('load', () => {
-      const canvas = document.createElement('canvas')
-      document.body.appendChild(canvas)
-      initMovie(canvas)
-    })
-    const initMovie = 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({ 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({ startTime: 2, duration: 2, source: image }).addEffect(
-            new etro.effect.GaussianBlur({ radius: 3 })
-          )
-        )
-        .addLayer(
-          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({
-              factors: new etro.KeyFrame(
-                [0, { r: 2, g: 0.5 }],
-                [2, { r: 0.5, g: 2 }]
-              )
-            })
-          )
-        )
-        .addLayer(
-          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
-          }).addEffect(
-            new etro.effect.Transform({
-              matrix: new etro.effect.Transform.Matrix().rotate(Math.PI / 6) // 30d
-            })
-          )
-        )
-        .addLayer(
-          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/lake.jpg" style="display: none;"/>
-</body>
-</html>

package/examples/introduction/export.html DELETED Viewed

@@ -1,83 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Media in Etro</title>
-  <script src="../../dist/etro-iife.js"></script>
-</head>
-<body>
-  <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
-    let movie
-    const btn = document.querySelector('button')
-    btn.addEventListener('click', () => {
-      btn.disabled = true
-      const canvas = document.createElement('canvas')
-      canvas.width = 600
-      canvas.height = 400
-      // no need to add to body, as we don't need to say the movie but just the exported video
-      initMovie(canvas)
-    })
-    const initMovie = 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({
-          startTime: 0,
-          duration: 3,
-          source: document.querySelector('#input img'),
-          // crop @ (150, 150) extending (200, 200)
-          sourceX: 100,
-          sourceY: 100,
-          sourceWidth: 400,
-          sourceHeight: 400,
-          x: 100,
-          y: 100,
-          destWidth: 400,
-          destHeight: 400
-        }))
-        .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
-          sourceStartTime: 5,
-          duration: 3
-        }))
-        .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({ frameRate: 25 })
-        .then(blob => {
-          const video = document.querySelector('#output video')
-          video.src = URL.createObjectURL(blob)
-        })
-        .catch(error => {
-          throw error
-        })
-      window.addEventListener('unload', () => {
-        const video = document.querySelector('#output video')
-        URL.revokeObjectURL(video.src)
-      })
-    }
-  </script>
-</body>
-</html>

package/examples/introduction/functions.html DELETED Viewed

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Functions in Etro</title>
-  <script src="../../dist/etro-iife.js"></script>
-</head>
-<body>
-  <script>
-    let movie
-    window.addEventListener('load', () => {
-      const canvas = document.createElement('canvas')
-      document.body.appendChild(canvas)
-      initMovie(canvas)
-    })
-    const initMovie = 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({
-          startTime: 0,
-          duration: 3,
-          // omitting width or height sets the respective element to fill the screen
-          background: 'green',
-          opacity: (element, reltime) => Math.random()
-        }))
-        .play()
-    }
-  </script>
-</body>
-</html>

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

@@ -1,37 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Hello World in Etro</title>
-  <script src="../../dist/etro-iife.js"></script>
-</head>
-<body>
-  <script>
-    window.addEventListener('load', () => {
-      const canvas = document.createElement('canvas')
-      canvas.width = 600
-      canvas.height = 400
-      document.body.appendChild(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({
-          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({
-          startTime: 1,
-          duration: 2,
-          background: '#0000ff80',
-          border: { color: '#00f', thickness: 4 },
-          width: 500,
-          height: 200,
-          x: 50,
-          y: 20
-        }))
-        .play()
-    })
-  </script>
-</body>
-</html>

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

@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Hello World in Etro</title>
-  <script src="../../dist/etro-iife.js"></script>
-</head>
-<body>
-  <script>
-    window.addEventListener('load', () => {
-      const canvas = document.createElement('canvas')
-      document.body.appendChild(canvas)
-      const video = document.createElement('video')
-      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 })
-        movie
-        // add a video layer at 0s in the timeline
-          .addLayer(new etro.layer.Video({ startTime: 0, source: video }))
-          .play()
-        // FOR TESTING issue#8 (don't delete):
-        // movie.setCurrentTime(1);
-        // movie.play();
-      }
-    })
-  </script>
-</body>
-</html>

package/examples/introduction/keyframes.html DELETED Viewed

@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Keyframes in Etro</title>
-  <script src="../../dist/etro-iife.js"></script>
-</head>
-<body>
-  <script>
-    let movie
-    window.addEventListener('load', () => {
-      const canvas = document.createElement('canvas')
-      document.body.appendChild(canvas)
-      initMovie(canvas)
-    })
-    const initMovie = canvas => {
-      movie = new etro.Movie({ canvas })
-      canvas.width = canvas.height = 400
-      movie
-      // create a red 400x400 rectangle that starts at time 0 and lasts 2 seconds
-      // Keyframes let you make a dynamic property that interpolates.
-      // For instance, you can set a layer's opacity to decrease over time, effectively making it fade out
-      // Numbers and objects interpolate (animate smoothly)
-        .addLayer(new etro.layer.Visual({
-          startTime: 0,
-          duration: 3,
-          // omitting width or height sets the respective element to fill the screen
-          background: 'green',
-          // opacity=1 @ 0s (relative to the layer) -> opacity=0 @ 1s (relative to the layer)
-          opacity: new etro.KeyFrame([0, 1], [3, 0])
-        }))
-      // Because strings don't interpolate, you need to convert colors and fonts to objects
-      // for a smooth effect (which will then be automatically `.toString()`ed when set on the canvas
-      // context).
-        .addLayer(new etro.layer.Visual({
-          startTime: 3,
-          duration: 3,
-          background: new etro.KeyFrame([0, etro.parseColor('red')], [3, new etro.Color(0, 0, 255)])
-        }))
-      // You can use other types in keyframes, but they will be used sequentially without interpolation
-        .addLayer(new etro.layer.Text({
-          startTime: 6,
-          duration: 3,
-          text: new etro.KeyFrame([0, 'Hello ...'], [1.5, '...world'])
-        }))
-      // When interpolating, you can specify how the keyframes will be interpolated
-        .addLayer(new etro.layer.Visual({
-          startTime: 9,
-          duration: 3,
-          width: new etro.KeyFrame([0, movie.width, etro.linearInterp], [3, 0]), // (obviously) linear
-          height: new etro.KeyFrame([0, movie.height, etro.linearInterp], [3, 0]), // (obviously) linear
-          background: 'blue'
-        }))
-      // Of course, you can have more than two keyframes
-        .addLayer(new etro.layer.Text({
-          text: 'Etro',
-          startTime: 12,
-          duration: 6,
-          background: new etro.KeyFrame(
-            [0, etro.parseColor('#0ff')],
-            [2, etro.parseColor('#ff0')],
-            [4, etro.parseColor('#f0f')],
-            [6, etro.parseColor('#fff')]
-          ),
-          // let's just add another property (fonts can be parsed into objects just like colors)
-          font: new etro.KeyFrame(
-            [0, etro.parseFont('28px monospace'), etro.cosineInterp],
-            [6, etro.parseFont('36px monospace')]
-          )
-        }))
-        .play()
-    }
-  </script>
-</body>
-</html>