From cae45df542496da4bbfc30ba9ac3d678a8a73781 Mon Sep 17 00:00:00 2001
From: Luke Murphy <lukewm@riseup.net>
Date: Mon, 16 Dec 2019 21:19:26 +0700
Subject: [PATCH] Add buttons for audio handling

---
 vocoder/server.py            | 14 +++++-
 vocoder/static/vocoder.js    | 84 ++++++++++++++++++++++++++++++++----
 vocoder/templates/index.html |  4 +-
 3 files changed, 88 insertions(+), 14 deletions(-)

diff --git a/vocoder/server.py b/vocoder/server.py
index 3881073..1b977c9 100644
--- a/vocoder/server.py
+++ b/vocoder/server.py
@@ -1,10 +1,20 @@
-"""Flask server for the Vocoder back-end."""
+"""Flask server for the vocoder back-end."""
 
-from flask import Flask, render_template
+from flask import Flask, render_template, request
 
 app = Flask(__name__)
 
 
 @app.route("/")
 def root():
+    """Serve the main homepage."""
     return render_template("index.html")
+
+
+@app.route("/add-to-archive/", methods=["POST"])
+def add_to_archive():
+    """Accept audio recordings for archiving."""
+    # TODO: implement the saving of the files currently,
+    # I can't seem to get the file to send but the basic
+    # plumbing is in place
+    return ("faking it till we make it", 201)
diff --git a/vocoder/static/vocoder.js b/vocoder/static/vocoder.js
index fa30147..34969e3 100644
--- a/vocoder/static/vocoder.js
+++ b/vocoder/static/vocoder.js
@@ -1,15 +1,81 @@
+//
 // Vocoder front-end Javascript
+//
+// https://learnxinyminutes.com/docs/javascript/
+// https://developer.mozilla.org/en-US/docs/web/javascript/reference
+//
 
-// Only run our JS when everything on the page is loaded.
-// This includes images (our map tiles), see https://stackoverflow.com/a/1033448
-window.addEventListener('load', main)
+// 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 archiveUrl = serverUrl + '/add-to-archive/';
 
-function main(){
-  const mappa = new Mappa('Leaflet');
-  // TODO: once we get the leaflet map setup, we'll overlay following
-  // the example from https://mappa.js.org/docs/examples-leaflet.html
+function setupRecording(){
+  var mic, recorder, soundFile;
+  var state = 0;
+
+  mic = new p5.AudioIn();
+  mic.start();
+  recorder = new p5.SoundRecorder();
+  recorder.setInput(mic);
+  soundFile = new p5.SoundFile();
+
+  function doRecording(){
+    // TODO: handle timing out if no stopping happens
+    if (mic.enabled){
+      recorder.record(soundFile);
+    }
+  };
+
+  function doStopping(){
+    // TODO: only stop if playing/recording otherwise:
+    // "NotSupportedError: Operation is not supported"
+    recorder.stop();
+  };
+
+  function doPlaying(){
+    soundFile.play();
+  };
+
+  function doArchiving(){
+    var soundBlob = soundFile.getBlob();
+
+    var httpRequestOptions = {
+      method: 'POST',
+      body: new FormData().append('soundBlob', soundBlob),
+      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);
+  };
+
+  // TODO: we'll probably want something more glam than 
+  // some default buttons but that's fine for experimenting
+  recordButton = createButton('record');
+  recordButton.position(10, 10);
+  recordButton.mousePressed(doRecording);
+
+  stopButton = createButton('stop');
+  stopButton.position(120, 10);
+  stopButton.mousePressed(doStopping);
+
+  playButton = createButton('play');
+  playButton.position(210, 10);
+  playButton.mousePressed(doPlaying);
+
+  playButton = createButton('archive');
+  playButton.position(300, 10);
+  playButton.mousePressed(doArchiving);
+}
+
+function setup(){
+  // TODO: Replace this with the leaflet/mappa setup just 
+  // using this for now to draw something to experiment on
+  createCanvas(600, 600);
+
+  setupRecording();
 }
 
-// TODO: p5.js / mappa.js specifics for later ...
-function setup(){}
 function draw(){}
diff --git a/vocoder/templates/index.html b/vocoder/templates/index.html
index f64491b..f77132f 100644
--- a/vocoder/templates/index.html
+++ b/vocoder/templates/index.html
@@ -3,12 +3,10 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
-    <title>Vocoder.org</title>
+    <title>vocoder.org</title>
     <link rel="stylesheet" href="/static/leaflet/leaflet.css" type="text/css" media="screen" title="leaflet" charset="utf-8">
   </head>
   <body>
-    Coming Soon TM.
-
     <script src="/static/leaflet/leaflet-src.js" charset="utf-8"></script>
     <script src="/static/mappajs/mappa.min.js" charset="utf-8"></script>
     <script src="/static/p5js/p5.min.js" charset="utf-8"></script>