npm - etro - Versions diffs - 0.6.0 - Mend

etro 0.6.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 (103) hide show

package/.env +2 -0
package/.github/workflows/nodejs.yml +27 -0
package/CHANGELOG.md +109 -0
package/CODE_OF_CONDUCT.md +77 -0
package/CONTRIBUTING.md +155 -0
package/LICENSE +674 -0
package/README.md +57 -0
package/dist/etro.js +3397 -0
package/docs/effect.js.html +1215 -0
package/docs/event.js.html +145 -0
package/docs/index.html +81 -0
package/docs/index.js.html +92 -0
package/docs/layer.js.html +888 -0
package/docs/module-effect-GaussianBlurComponent.html +345 -0
package/docs/module-effect.Brightness.html +339 -0
package/docs/module-effect.Channels.html +319 -0
package/docs/module-effect.ChromaKey.html +611 -0
package/docs/module-effect.Contrast.html +339 -0
package/docs/module-effect.EllipticalMask.html +200 -0
package/docs/module-effect.GaussianBlur.html +202 -0
package/docs/module-effect.GaussianBlurHorizontal.html +242 -0
package/docs/module-effect.GaussianBlurVertical.html +242 -0
package/docs/module-effect.Pixelate.html +330 -0
package/docs/module-effect.Shader.html +1227 -0
package/docs/module-effect.Stack.html +406 -0
package/docs/module-effect.Transform.Matrix.html +193 -0
package/docs/module-effect.Transform.html +1174 -0
package/docs/module-effect.html +148 -0
package/docs/module-event.html +473 -0
package/docs/module-index.html +186 -0
package/docs/module-layer-Media.html +1116 -0
package/docs/module-layer-MediaMixin.html +164 -0
package/docs/module-layer.Audio.html +1188 -0
package/docs/module-layer.Base.html +629 -0
package/docs/module-layer.Image.html +1421 -0
package/docs/module-layer.Text.html +1731 -0
package/docs/module-layer.Video.html +1938 -0
package/docs/module-layer.Visual.html +1698 -0
package/docs/module-layer.html +137 -0
package/docs/module-movie.html +3118 -0
package/docs/module-util.Color.html +702 -0
package/docs/module-util.Font.html +395 -0
package/docs/module-util.html +845 -0
package/docs/movie.js.html +689 -0
package/docs/scripts/collapse.js +20 -0
package/docs/scripts/linenumber.js +25 -0
package/docs/scripts/nav.js +12 -0
package/docs/scripts/polyfill.js +4 -0
package/docs/scripts/prettify/Apache-License-2.0.txt +202 -0
package/docs/scripts/prettify/lang-css.js +2 -0
package/docs/scripts/prettify/prettify.js +28 -0
package/docs/scripts/search.js +83 -0
package/docs/styles/jsdoc.css +671 -0
package/docs/styles/prettify.css +79 -0
package/docs/util.js.html +503 -0
package/eslint.conf.js +28 -0
package/eslint.test-conf.js +4 -0
package/examples/application/readme-screenshot.html +86 -0
package/examples/application/video-player.html +131 -0
package/examples/application/webcam.html +28 -0
package/examples/introduction/audio.html +52 -0
package/examples/introduction/effects.html +56 -0
package/examples/introduction/export.html +70 -0
package/examples/introduction/functions.html +35 -0
package/examples/introduction/hello-world1.html +33 -0
package/examples/introduction/hello-world2.html +32 -0
package/examples/introduction/keyframes.html +67 -0
package/examples/introduction/media.html +55 -0
package/examples/introduction/text.html +27 -0
package/jsdoc.conf.json +3 -0
package/karma.conf.js +60 -0
package/package.json +63 -0
package/private-todo.txt +70 -0
package/rename-file.sh +18 -0
package/rename-versions.sh +14 -0
package/rename.sh +22 -0
package/rollup.config.js +31 -0
package/screenshots/2019-08-17_0.png +0 -0
package/scripts/gen-effect-samples.html +99 -0
package/scripts/save-effect-samples.js +43 -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 +352 -0
package/spec/event.spec.js +25 -0
package/spec/layer.spec.js +128 -0
package/spec/movie.spec.js +154 -0
package/spec/util.spec.js +285 -0
package/src/effect.js +1265 -0
package/src/event.js +78 -0
package/src/index.js +23 -0
package/src/layer.js +875 -0
package/src/movie.js +636 -0
package/src/util.js +487 -0

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

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Video player in Etro</title>
+  <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 type="module">
+    import etro from '../../src/index.js'
+    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
+      })
+      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(0, video)
+      )
+      controls.progressBar.max = movie.duration
+    })
+  </script>
+  <div id="container">
+    <video src="../assets/sample.ogv"></video>
+    <img src="../assets/sample.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 ADDED Viewed

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>getUserMedia()</title>
+</head>
+<body>
+  <video style="display:none"></video>
+  <canvas></canvas>
+  <script type="module">
+    import etro from '../../src/index.js'
+    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 movie = new etro.Movie(document.querySelector('canvas'))
+      .addLayer(new etro.layer.Visual(0, Infinity, { background: 'black' }))
+      .addLayer(new etro.layer.Video(0, video)
+        .addEffect(new etro.effect.ChromaKey(etro.parseColor('black'), 100)))
+  </script>
+</body>
+</html>

package/examples/introduction/audio.html ADDED Viewed

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Manipulating Audio in Etro</title>
+</head>
+<body>
+  <script type="module">
+    import etro from '../../src/index.js'
+    let movie
+    const initMovie = () => {
+      // initialize movie
+      movie = new etro.Movie(document.createElement('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 })
+      /*
+          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 intermediate audio
+      // effect nodes.
+      layer1.source.disconnect(movie.actx.destination)
+      const muter = movie.actx.createGain()
+      muter.gain.value = 0
+      layer1.source.connect(muter).connect(movie.actx.destination)
+      layer2.source.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)
+      // Manipulating the audio graph is not always necessary
+      layer3.playbackRate = 2 // double the speed
+      movie.play()
+    }
+    window.addEventListener('load', initMovie)
+  </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>
+</body>
+</html>

package/examples/introduction/effects.html ADDED Viewed

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Effects in Etro</title>
+</head>
+<body>
+  <script type="module">
+    import etro from '../../src/index.js'
+    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(0, 2, 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)
+          )
+        )
+        .addLayer(
+          new etro.layer.Image(4, 2, 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 } })
+          )
+        )
+        .addLayer(
+          new etro.layer.Image(6, 2, 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(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)
+          )
+        )
+        .play()
+    }
+  </script>
+  <img src="../assets/sample.jpg" style="display: none;"/>
+</body>
+</html>

package/examples/introduction/export.html ADDED Viewed

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Media in Etro</title>
+</head>
+<body>
+  <script type="module">
+    // TODO: test audio output on a device that actually has drivers
+    import etro from '../../src/index.js'
+    let movie
+    window.addEventListener('load', () => {
+      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(0, 3, document.querySelector('#input img'), {
+          // crop @ (150, 150) extending (200, 200)
+          clipX: 100,
+          clipY: 100,
+          x: 100,
+          y: 100,
+          clipWidth: 400,
+          clipHeight: 400,
+          width: 400,
+          height: 400
+        }))
+        .addLayer(new etro.layer.Video(3, video, {
+          // trim video to only include 3 seconds starting 2 minutes into the video in the video
+          mediaStartTime: 120,
+          duration: 3
+        }))
+        .addLayer(new etro.layer.Audio(6, document.querySelector('#input audio'), {
+          mediaStartTime: 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)
+        .then(blob => {
+          const video = document.querySelector('#output video')
+          video.src = URL.createObjectURL(blob)
+          document.querySelector('p').innerHTML = 'Done'
+        })
+        .catch(error => {
+          throw error
+        })
+    }
+  </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 ADDED Viewed

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Functions in Etro</title>
+</head>
+<body>
+  <script type="module">
+    import etro from '../../src/index.js'
+    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(0, 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 ADDED Viewed

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Hello World in Etro</title>
+</head>
+<body>
+  <script type="module">
+    import etro from '../../src/index.js'
+    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(0, 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, {
+          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 ADDED Viewed

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Hello World in Etro</title>
+</head>
+<body>
+  <script type="module">
+    import etro from '../../src/index.js'
+    window.addEventListener('load', () => {
+      const canvas = document.createElement('canvas')
+      document.body.appendChild(canvas)
+      const video = document.createElement('video')
+      video.src = '../assets/sample.ogv'
+      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(0, video))
+          .play()
+        // FOR TESTING issue#8 (don't delete):
+        // movie.setCurrentTime(1);
+        // movie.play();
+      }
+    })
+  </script>
+</body>
+</html>

package/examples/introduction/keyframes.html ADDED Viewed

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Keyframes in Etro</title>
+</head>
+<body>
+  <script type="module">
+    import etro from '../../src/index.js'
+    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(0, 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: { 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(3, 3, {
+          background: { 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(6, 3, { 0: 'Hello ...', 1.5: '...world' }))
+      // When interpolating, you can specify how the keyframes will be interpolated
+        .addLayer(new etro.layer.Visual(9, 3, {
+          width: { 0: movie.width, 3: 0, interpolate: etro.linearInterp }, // (obviously) linear
+          height: { 0: movie.height, 3: 0, interpolate: etro.cosineInterp }, // curved
+          background: 'blue'
+        }))
+      // Of course, you can have more than two keyframes
+        .addLayer(new etro.layer.Text(12, 6, 'Etro', {
+          background: {
+            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: {
+            0: etro.parseFont('28px monospace'),
+            6: etro.parseFont('36px monospace'),
+            interpolate: etro.cosineInterp
+          }
+        }))
+        .play()
+    }
+  </script>
+</body>
+</html>

package/examples/introduction/media.html ADDED Viewed

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Media in Etro</title>
+  <style> img, video {display: none;} </style>
+</head>
+<body>
+  <script type="module">
+    import etro from '../../src/index.js'
+    let movie
+    window.addEventListener('load', () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = 600
+      canvas.height = 400
+      document.body.appendChild(canvas)
+      initMovie(canvas)
+    })
+    const initMovie = canvas => {
+      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'), {
+          // crop @ (150, 150) extending (200, 200)
+          clipX: 100,
+          clipY: 100,
+          x: 100,
+          y: 100,
+          clipWidth: 400,
+          clipHeight: 400,
+          width: 400,
+          height: 400
+        }))
+        .addLayer(new etro.layer.Video(3, video, {
+          // trim video to only include 3 seconds starting 2 minutes into the video in the video
+          mediaStartTime: 120,
+          duration: 3
+        }))
+        .addLayer(new etro.layer.Audio(6, document.querySelector('audio'), {
+          mediaStartTime: 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 ADDED Viewed

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Text in Etro</title>
+</head>
+<body>
+  <script type="module">
+    import etro from '../../src/index.js'
+    let movie
+    window.addEventListener('load', () => {
+      const canvas = document.createElement('canvas')
+      canvas.width = 600
+      canvas.height = 400
+      document.body.appendChild(canvas)
+      initMovie(canvas)
+    })
+    const initMovie = canvas => {
+      movie = new etro.Movie(canvas)
+      movie.addLayer(new etro.layer.Text(0, 4, 'Hello world', {
+        font: '24px monospace', color: 'blue'
+      })).play()
+    }
+  </script>
+</body>
+</html>

package/jsdoc.conf.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "plugins": ["../node_modules/jsdoc-export-default-interop/dist/index"]
+}

package/karma.conf.js ADDED Viewed

@@ -0,0 +1,60 @@
+// Karma configuration
+// Generated on Thu Sep 19 2019 02:05:06 GMT-0400 (Eastern Daylight Time)
+module.exports = function (config) {
+  config.set({
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '',
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+    // list of files / patterns to load in the browser
+    files: [
+      'dist/etro.js',
+      'spec/*.spec.js',
+      { pattern: 'spec/assets/**/*', included: false }
+    ],
+    // list of files / patterns to exclude
+    exclude: [
+    ],
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+    },
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['progress'],
+    // web server port
+    port: 9876,
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['ChromeHeadless'],
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: true,
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity
+  })
+}