Run prettier formatter over HTML/JS

vocoder/static/vocoder.js

@@ -7,75 +7,75 @@
 
 // TODO: Read this from the environment so it can run propoerly
 // depending on whether it is in development or production mode
-var serverUrl = 'http://localhost:5000'
+var serverUrl = "http://localhost:5000";
-var archiveUrl = serverUrl + '/add-to-archive/'
+var archiveUrl = serverUrl + "/add-to-archive/";
 
-var mic, recorder, soundFile
+var mic, recorder, soundFile;
-var recordingTimeout = 30000  // 30 seconds (in milliseconds)
+var recordingTimeout = 30000; // 30 seconds (in milliseconds)
-var shouldGenerateNewShape = false
+var shouldGenerateNewShape = false;
 
-function setupRecording(){
+function setupRecording() {
-  mic = new p5.AudioIn()
+  mic = new p5.AudioIn();
-  mic.start()
+  mic.start();
 
-  recorder = new p5.SoundRecorder()
+  recorder = new p5.SoundRecorder();
-  recorder.setInput(mic)
+  recorder.setInput(mic);
 
-  soundFile = new p5.SoundFile()
+  soundFile = new p5.SoundFile();
 
-  function doRecording(){
+  function doRecording() {
-    if (mic.enabled){
+    if (mic.enabled) {
-      setTimeout(recorder.record(soundFile), recordingTimeout)
+      setTimeout(recorder.record(soundFile), recordingTimeout);
     }
   }
 
-  function doStopping(){
+  function doStopping() {
     if (recorder.recording) {
-      recorder.stop()
+      recorder.stop();
-      shouldGenerateNewShape = true
+      shouldGenerateNewShape = true;
     }
   }
 
-  function doPlaying(){
+  function doPlaying() {
-    if (soundFile.isLoaded()){
+    if (soundFile.isLoaded()) {
-      soundFile.play()
+      soundFile.play();
     }
   }
 
-  function doArchiving(){
+  function doArchiving() {
-    var soundBlob = soundFile.getBlob()
+    var soundBlob = soundFile.getBlob();
 
     var httpRequestOptions = {
-      method: 'POST',
+      method: "POST",
-      body: new FormData().append('soundBlob', soundBlob),
+      body: new FormData().append("soundBlob", soundBlob),
-      headers: new Headers({enctype: 'multipart/form-data'})
+      headers: new Headers({ enctype: "multipart/form-data" })
-    }
+    };
 
     // TODO: do error handling when things fail
     // TODO: this doesn't actually work right now
-    httpDo(archiveUrl, httpRequestOptions)
+    httpDo(archiveUrl, httpRequestOptions);
   }
 
-  // TODO: we'll probably want something more glam than 
+  // TODO: we'll probably want something more glam than
   // some default buttons but that's fine for experimenting
-  recordButton = createButton('record')
+  recordButton = createButton("record");
-  recordButton.position(10, 90)
+  recordButton.position(10, 90);
-  recordButton.mousePressed(doRecording)
+  recordButton.mousePressed(doRecording);
 
-  stopButton = createButton('stop')
+  stopButton = createButton("stop");
-  stopButton.position(120, 90)
+  stopButton.position(120, 90);
-  stopButton.mousePressed(doStopping)
+  stopButton.mousePressed(doStopping);
 
-  playButton = createButton('play')
+  playButton = createButton("play");
-  playButton.position(210, 90)
+  playButton.position(210, 90);
-  playButton.mousePressed(doPlaying)
+  playButton.mousePressed(doPlaying);
 
-  playButton = createButton('archive')
+  playButton = createButton("archive");
-  playButton.position(300, 90)
+  playButton.position(300, 90);
-  playButton.mousePressed(doArchiving)
+  playButton.mousePressed(doArchiving);
 }
 
-function collectSoundParamters(){
+function collectSoundParamters() {
   // TODO: collect all the sound parameters
   // [x] amplitude
   // [x] length of sound
@@ -84,27 +84,27 @@ function collectSoundParamters(){
   //     btw, there is no "nuance" function for p5js. My current guess is to
   //     perhaps measure it from the "getPeaks". For all wave peaks measured,
   //     ??? (need to think this through, not really sure ...)
-  amplitude = soundFile.getPeaks()
+  amplitude = soundFile.getPeaks();
-  duration = soundFile.duration()
+  duration = soundFile.duration();
 }
 
-function generateShape(){ 
+function generateShape() {
   // TODO: take in sound parameters and generate a shape
-  ellipse(100, 100, 25, 25)
+  ellipse(100, 100, 25, 25);
 }
 
-function setup(){
+function setup() {
-  // TODO: Replace this with the leaflet/mappa setup just 
+  // TODO: Replace this with the leaflet/mappa setup just
   // using this for now to draw something to experiment on
-  createCanvas(600, 600)
+  createCanvas(600, 600);
 
-  setupRecording()
+  setupRecording();
 }
 
-function draw(){
+function draw() {
-  if (shouldGenerateNewShape){
+  if (shouldGenerateNewShape) {
-    collectSoundParamters()
+    collectSoundParamters();
-    generateShape()
+    generateShape();
-    shouldGenerateNewShape = false
+    shouldGenerateNewShape = false;
   }
 }

vocoder/templates/index.html

@@ -4,8 +4,22 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>vocoder.org: home</title>
-    <link rel="stylesheet" href="/static/leaflet/leaflet.css" type="text/css" media="screen" title="leaflet" charset="utf-8">
+    <link
-    <link rel="stylesheet" href="/static/styles.css" type="text/css" media="screen" title="custom css" charset="utf-8">
+      rel="stylesheet"
+      href="/static/leaflet/leaflet.css"
+      type="text/css"
+      media="screen"
+      title="leaflet"
+      charset="utf-8"
+    />
+    <link
+      rel="stylesheet"
+      href="/static/styles.css"
+      type="text/css"
+      media="screen"
+      title="custom css"
+      charset="utf-8"
+    />
   </head>
   <body>
     <ul>