chore(prettier): extend formatting to examples

.prettierignore

@@ -0,0 +1 @@
+**/*.min.js

examples/browser/camera/simple-metadata-player.js

@@ -1,7 +1,7 @@
 const { pipelines } = window.mediaStreamLibrary
 
 // force auth
-const authorize = async host => {
+const authorize = async (host) => {
   // Force a login by fetching usergroup
   const fetchOptions = {
     credentials: 'include',
@@ -18,7 +18,7 @@ const authorize = async host => {
   }
 }
 
-const play = host => {
+const play = (host) => {
   const initialTime = window.performance.now()
   // Setup a new pipeline
   const pipeline = new pipelines.MetadataPipeline({
@@ -31,7 +31,7 @@ const play = host => {
     rtsp: {
       uri: `rtsp://${host}/axis-media/media.amp?event=on&video=0&audio=0`,
     },
-    metadataHandler: msg => {
+    metadataHandler: (msg) => {
       const title = document.createElement('div')
       title.textContent = `+${window.performance.now() - initialTime}`
       title.classList.add('metadata-title')
@@ -54,7 +54,7 @@ let pipeline
 
 // Each time a device ip is entered, authorize and then play
 const playButton = document.querySelector('#play')
-playButton.addEventListener('click', async e => {
+playButton.addEventListener('click', async (e) => {
   pipeline && pipeline.close()
 
   const device = document.querySelector('#device')

examples/browser/camera/simple-overlay-player.js

@@ -2,7 +2,7 @@ const { components, pipelines, utils } = window.mediaStreamLibrary
 const d3 = window.d3
 
 // force auth
-const authorize = async host => {
+const authorize = async (host) => {
   // Force a login by fetching usergroup
   const fetchOptions = {
     credentials: 'include',
@@ -64,29 +64,20 @@ const play = (host, encoding) => {
     height: svgHeight,
   } = svg.node().getBoundingClientRect()
 
-  const x = d3
-    .scaleLinear()
-    .domain([0, 59])
-    .rangeRound([0, svgWidth])
+  const x = d3.scaleLinear().domain([0, 59]).rangeRound([0, svgWidth])
   let maxBytes = 0
-  let y = d3
-    .scaleLinear()
-    .domain([0, maxBytes])
-    .rangeRound([svgHeight, 0])
+  let y = d3.scaleLinear().domain([0, maxBytes]).rangeRound([svgHeight, 0])
   const line = d3
     .line()
     .x((d, i) => x(i))
-    .y(d => y(d))
+    .y((d) => y(d))
     .curve(d3.curveStep)
 
-  const draw = msg => {
+  const draw = (msg) => {
     data.push(msg.data.length)
     if (maxBytes < msg.data.length - 100) {
       maxBytes = 2 * msg.data.length
-      y = d3
-        .scaleLinear()
-        .domain([0, maxBytes])
-        .rangeRound([svgHeight, 0])
+      y = d3.scaleLinear().domain([0, maxBytes]).rangeRound([svgHeight, 0])
     }
     if (data.length > 60) {
       data.shift()
@@ -96,10 +87,10 @@ const play = (host, encoding) => {
   }
   const scheduler = new utils.Scheduler(pipeline, draw)
 
-  const runScheduler = components.Tube.fromHandlers(msg => scheduler.run(msg))
+  const runScheduler = components.Tube.fromHandlers((msg) => scheduler.run(msg))
   pipeline.insertBefore(pipeline.lastComponent, runScheduler)
 
-  pipeline.onSync = ntpPresentationTime => {
+  pipeline.onSync = (ntpPresentationTime) => {
     console.log('sync!', ntpPresentationTime)
     scheduler.init(ntpPresentationTime)
   }
@@ -115,7 +106,7 @@ let pipeline
 
 // Each time a device ip is entered, authorize and then play
 const playButton = document.querySelector('#play')
-playButton.addEventListener('click', async e => {
+playButton.addEventListener('click', async (e) => {
   pipeline && pipeline.close()
   group && group.remove()
   data = []

examples/browser/camera/simple-player.js

@@ -1,7 +1,7 @@
 const { pipelines } = window.mediaStreamLibrary
 
 // force auth
-const authorize = async host => {
+const authorize = async (host) => {
   // Force a login by fetching usergroup
   const fetchOptions = {
     credentials: 'include',
@@ -55,7 +55,7 @@ let pipeline
 
 // Each time a device ip is entered, authorize and then play
 const playButton = document.querySelector('#play')
-playButton.addEventListener('click', async e => {
+playButton.addEventListener('click', async (e) => {
   pipeline && pipeline.close()
 
   const device = document.querySelector('#device')

examples/browser/test/h264-overlay-player.js

@@ -1,7 +1,7 @@
 const { components, pipelines, utils } = window.mediaStreamLibrary
 const d3 = window.d3
 
-const play = host => {
+const play = (host) => {
   // Grab a reference to the video element
   const mediaElement = document.querySelector('video')
 
@@ -19,18 +19,12 @@ const play = host => {
     height: svgHeight,
   } = svg.node().getBoundingClientRect()
 
-  const x = d3
-    .scaleLinear()
-    .domain([0, 59])
-    .rangeRound([0, svgWidth])
-  const y = d3
-    .scaleLinear()
-    .domain([0, 150000])
-    .rangeRound([svgHeight, 0])
+  const x = d3.scaleLinear().domain([0, 59]).rangeRound([0, svgWidth])
+  const y = d3.scaleLinear().domain([0, 150000]).rangeRound([svgHeight, 0])
   const line = d3
     .line()
     .x((d, i) => x(i))
-    .y(d => y(d))
+    .y((d) => y(d))
     .curve(d3.curveStep)
 
   svg
@@ -40,7 +34,7 @@ const play = host => {
 
   // Create a function that will be used to draw the data
   let data = []
-  const draw = msg => {
+  const draw = (msg) => {
     data.push(msg.data.length)
     if (data.length > 60) {
       data.shift()
@@ -59,12 +53,12 @@ const play = host => {
   // a peek component, which will call the run method of the
   // scheduler every time a message passes on the pipeline.
   const scheduler = new utils.Scheduler(pipeline, draw)
-  const runScheduler = components.Component.peek(msg => scheduler.run(msg))
+  const runScheduler = components.Component.peek((msg) => scheduler.run(msg))
   pipeline.insertBefore(pipeline.lastComponent, runScheduler)
 
   // When we now the UNIX time of the start of the presentation,
   // initialize the scheduler with it.
-  pipeline.onSync = ntpPresentationTime => {
+  pipeline.onSync = (ntpPresentationTime) => {
     scheduler.init(ntpPresentationTime)
   }
 

examples/browser/test/h264-player.js

@@ -1,6 +1,6 @@
 const { pipelines } = window.mediaStreamLibrary
 
-const play = host => {
+const play = (host) => {
   // Grab a reference to the video element
   const mediaElement = document.querySelector('video')
 

examples/browser/test/mjpeg-overlay-player.js

@@ -1,7 +1,7 @@
 const { components, pipelines, utils } = window.mediaStreamLibrary
 const d3 = window.d3
 
-const play = host => {
+const play = (host) => {
   // Grab a reference to the video element
   const mediaElement = document.querySelector('canvas')
 
@@ -19,23 +19,17 @@ const play = host => {
     height: svgHeight,
   } = svg.node().getBoundingClientRect()
 
-  const x = d3
-    .scaleLinear()
-    .domain([0, 59])
-    .rangeRound([0, svgWidth])
-  const y = d3
-    .scaleLinear()
-    .domain([0, 200000])
-    .rangeRound([svgHeight, 0])
+  const x = d3.scaleLinear().domain([0, 59]).rangeRound([0, svgWidth])
+  const y = d3.scaleLinear().domain([0, 200000]).rangeRound([svgHeight, 0])
   const line = d3
     .line()
     .x((d, i) => x(i))
-    .y(d => y(d))
+    .y((d) => y(d))
     .curve(d3.curveStep)
 
   // Create a function that will be used to draw the data
   let data = []
-  const draw = msg => {
+  const draw = (msg) => {
     const bits = 8 * msg.data.length
     data.push(bits)
     if (data.length > 60) {
@@ -55,12 +49,12 @@ const play = host => {
   // a peek component, which will call the run method of the
   // scheduler every time a message passes on the pipeline.
   const scheduler = new utils.Scheduler(pipeline, draw)
-  const runScheduler = components.Component.peek(msg => scheduler.run(msg))
+  const runScheduler = components.Component.peek((msg) => scheduler.run(msg))
   pipeline.insertBefore(pipeline.lastComponent, runScheduler)
 
   // When we now the UNIX time of the start of the presentation,
   // initialize the scheduler with it.
-  pipeline.onSync = ntpPresentationTime => {
+  pipeline.onSync = (ntpPresentationTime) => {
     scheduler.init(ntpPresentationTime)
   }
 

examples/browser/test/mjpeg-player.js

@@ -1,6 +1,6 @@
 const { pipelines } = window.mediaStreamLibrary
 
-const play = host => {
+const play = (host) => {
   // Grab a reference to the video element
   const mediaElement = document.querySelector('canvas')
 

package.json

@@ -20,8 +20,8 @@
     "build:es5": "tsc -p tsconfig.es5.json",
     "build:bundle": "webpack",
     "eslint": "eslint --ext '.ts,.js' lib/",
-    "prettier:check": "prettier --check 'lib/**/*.{ts,js}'",
-    "prettier:fix": "prettier --write 'lib/**/*.{ts,js}' --fix --loglevel silent",
+    "prettier:check": "prettier --check '{lib,examples}/**/*.{ts,js}'",
+    "prettier:fix": "prettier --write '{lib,examples}/**/*.{ts,js}' --fix --loglevel silent",
     "rtsp": "rtsp-ws-server/start.sh",
     "examples": "http-server examples/browser",
     "dev": "yarn build && concurrently \"yarn webpack --mode development --watch\" \"yarn rtsp\" \"yarn examples\"",