Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web

5 files changed, 34 insertions, 39 deletions

diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx
index 017dc6286..03b2a2297 100644
--- a/src/client/views/nodes/AudioBox.tsx
+++ b/src/client/views/nodes/AudioBox.tsx
@@ -19,6 +19,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { DocumentView } from "./DocumentView";
 import { Docs } from "../../documents/Documents";
 import { ComputedField } from "../../../new_fields/ScriptField";
+import { Networking } from "../../Network";
 
 // testing testing 
 
@@ -138,33 +139,20 @@ export class AudioBox extends DocExtendableComponent<FieldViewProps, AudioDocume
         }
     }
 
-    recordAudioAnnotation = () => {
-        const self = this;
-        navigator.mediaDevices.getUserMedia({
-            audio: true
-        }).then(function (stream) {
-            self._stream = stream;
-            self._recorder = new MediaRecorder(stream);
-            self.dataDoc[self.props.fieldKey + "-recordingStart"] = new DateField(new Date());
-            AudioBox.ActiveRecordings.push(self.props.Document);
-            self._recorder.ondataavailable = async function (e: any) {
-                const formData = new FormData();
-                formData.append("file", e.data);
-                const res = await fetch(Utils.prepend("/uploadFormData"), {
-                    method: 'POST',
-                    body: formData
-                });
-                const files = await res.json();
-                const url = Utils.prepend(files[0].result.accessPaths.agnostic.client);
-                // upload to server with known URL 
-                self.props.Document[self.props.fieldKey] = new AudioField(url);
-            };
-            self._recordStart = new Date().getTime();
-            runInAction(() => self.audioState = "recording");
-            setTimeout(self.updateRecordTime, 0);
-            self._recorder.start();
-            setTimeout(() => self._recorder && self.stopRecording(), 60 * 1000); // stop after an hour
-        });
+    recordAudioAnnotation = async () => {
+        this._stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        this._recorder = new MediaRecorder(this._stream);
+        this.dataDoc[this.props.fieldKey + "-recordingStart"] = new DateField(new Date());
+        AudioBox.ActiveRecordings.push(this.props.Document);
+        this._recorder.ondataavailable = async (e: any) => {
+            const [{ result }] = await Networking.UploadFilesToServer(e.data);
+            this.props.Document[this.props.fieldKey] = new AudioField(Utils.prepend(result.accessPaths.agnostic.client));
+        };
+        this._recordStart = new Date().getTime();
+        runInAction(() => this.audioState = "recording");
+        setTimeout(this.updateRecordTime, 0);
+        this._recorder.start();
+        setTimeout(() => this._recorder && this.stopRecording(), 60 * 1000); // stop after an hour
     }
 
     specificContextMenu = (e: React.MouseEvent): void => {
diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts
index 42e33ece0..98f029c7d 100644
--- a/src/server/ApiManagers/UploadManager.ts
+++ b/src/server/ApiManagers/UploadManager.ts
@@ -43,7 +43,6 @@ export default class UploadManager extends ApiManager {
             method: Method.POST,
             subscription: "/uploadFormData",
             secureHandler: async ({ req, res }) => {
-                console.log("/upload register");
                 const form = new formidable.IncomingForm();
                 form.uploadDir = pathToDirectory(Directory.parsed_files);
                 form.keepExtensions = true;
diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index bc5d1d95b..2af816df8 100644
--- a/src/server/DashUploadUtils.ts
+++ b/src/server/DashUploadUtils.ts
@@ -60,7 +60,7 @@ export namespace DashUploadUtils {
         const types = type.split("/");
 
         const category = types[0];
-        const format = `.${types[1]}`;
+        let format = `.${types[1]}`;
 
         switch (category) {
             case "image":
@@ -77,8 +77,12 @@ export namespace DashUploadUtils {
                     return UploadPdf(file);
                 }
             case "audio":
+                const components = format.split(";");
+                if (components.length > 1) {
+                    format = components[0];
+                }
                 if (audioFormats.includes(format)) {
-                    return MoveParsedFile(file, Directory.audio);
+                    return UploadAudio(file, format);
                 }
         }
 
@@ -86,12 +90,6 @@ export namespace DashUploadUtils {
         return { source: file, result: new Error(`Could not upload unsupported file (${name}) with upload type (${type}).`) };
     }
 
-    async function UploadAudio(file: File) {
-        const { path: sourcePath } = file;
-
-        return MoveParsedFile(file, Directory.audio);
-    }
-
     async function UploadPdf(file: File) {
         const { path: sourcePath } = file;
         const dataBuffer = readFileSync(sourcePath);
@@ -105,6 +103,13 @@ export namespace DashUploadUtils {
         return MoveParsedFile(file, Directory.pdfs);
     }
 
+    const manualSuffixes = [".webm"];
+
+    async function UploadAudio(file: File, format: string) {
+        const suffix = manualSuffixes.includes(format) ? format : undefined;
+        return MoveParsedFile(file, Directory.audio, suffix);
+    }
+
     /**
      * Uploads an image specified by the @param source to Dash's /public/files/
      * directory, and returns information generated during that upload 
@@ -193,9 +198,10 @@ export namespace DashUploadUtils {
         };
     };
 
-    export async function MoveParsedFile(file: File, destination: Directory): Promise<Upload.FileResponse> {
+    export async function MoveParsedFile(file: File, destination: Directory, suffix: string | undefined = undefined): Promise<Upload.FileResponse> {
         const { path: sourcePath } = file;
-        const name = path.basename(sourcePath);
+        let name = path.basename(sourcePath);
+        suffix && (name += suffix);
         return new Promise(resolve => {
             const destinationPath = serverPathToFile(destination, name);
             rename(sourcePath, destinationPath, error => {
diff --git a/src/server/SharedMediaTypes.ts b/src/server/SharedMediaTypes.ts
index 3d3683912..2495123b7 100644
--- a/src/server/SharedMediaTypes.ts
+++ b/src/server/SharedMediaTypes.ts
@@ -10,7 +10,7 @@ export namespace AcceptibleMedia {
     export const imageFormats = [...pngs, ...jpgs, ...gifs, ...webps, ...tiffs];
     export const videoFormats = [".mov", ".mp4"];
     export const applicationFormats = [".pdf"];
-    export const audioFormats = [".wav", ".mp3", ".flac", ".au", ".aiff", ".m4a", ".webm;codecs=opus"];
+    export const audioFormats = [".wav", ".mp3", ".flac", ".au", ".aiff", ".m4a", ".webm"];
 }
 
 export namespace Upload {
diff --git a/src/server/index.ts b/src/server/index.ts
index 10205314a..f4446352f 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -25,6 +25,7 @@ import { yellow } from "colors";
 import { DashSessionAgent } from "./DashSession/DashSessionAgent";
 import SessionManager from "./ApiManagers/SessionManager";
 import { AppliedSessionAgent } from "./DashSession/Session/agents/applied_session_agent";
+import { Utils } from "../Utils";
 
 export const onWindows = process.platform === "win32";
 export let sessionAgent: AppliedSessionAgent;
@@ -37,6 +38,7 @@ export const filesDirectory = path.resolve(publicDirectory, "files");
  * before clients can access the server should be run or awaited here.
  */
 async function preliminaryFunctions() {
+    // Utils.TraceConsoleLog();
     await Logger.initialize();
     await GoogleCredentialsLoader.loadCredentials();
     GoogleApiServerUtils.processProjectCredentials();