Export as wav file (#96)

* Implement OpusMediaRecorder in useToneAudio hook

* Add file name + type fields to ExportDialog, remove Alert regarding .webm conversions

* Move Tone.Transport.start after recorder starts to avoid cutting off start audio, set default file name as download prop if empty

* Remove unused code

Author: brandongregoryscott

package-lock.json

@@ -20,6 +20,7 @@
         "jotai": "1.5.2",
         "lodash": "4.17.21",
         "luxon": "2.0.2",
+        "opus-media-recorder": "0.8.0",
         "react": "17.0.2",
         "react-beautiful-dnd": "13.1.0",
         "react-dom": "17.0.2",

package.json

@@ -1,30 +1,46 @@
 import { Dialog, DialogProps } from "components/dialog";
 import {
-    Alert,
     Button,
     ExportIcon,
-    Link,
     Text,
     majorScale,
     Paragraph,
     RecordIcon,
     Spinner,
+    Pane,
+    TextInput,
+    Label,
+    minorScale,
 } from "evergreen-ui";
 import { List } from "immutable";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { useListFiles } from "utils/hooks/domain/files/use-list-files";
 import { useListInstruments } from "utils/hooks/domain/instruments/use-list-instruments";
 import { useBoolean } from "utils/hooks/use-boolean";
 import { useToneAudio } from "utils/hooks/use-tone-audio";
 import { useWorkstationState } from "utils/hooks/use-workstation-state";
 import * as Tone from "tone";
-import { formatNow } from "utils/date-utils";
 import { ProjectRecord } from "models/project-record";
 import { useTheme } from "utils/hooks/use-theme";
+import { MimeType } from "enums/mime-type";
+import { enumToSelectMenuItems } from "utils/select-menu-utils";
+import { SelectMenu, SelectMenuItem } from "components/select-menu";
+import { getExtension } from "utils/mime-type-utils";
+import slugify from "slugify";
+import { unixTime } from "utils/core-utils";
+import { useInput } from "utils/hooks/use-input";
+import { isEmpty } from "lodash";
 
 interface ExportDialogProps
     extends Pick<DialogProps, "isShown" | "onCloseComplete"> {}
 
+const options: Array<SelectMenuItem<MimeType>> = enumToSelectMenuItems(
+    MimeType
+).map((item) => {
+    const mimeType = item.value as MimeType;
+    return { ...item, label: getExtension(mimeType)! };
+}) as Array<SelectMenuItem<MimeType>>;
+
 const title = "Export as Audio";
 
 const ExportDialog: React.FC<ExportDialogProps> = (
@@ -44,6 +60,12 @@ const ExportDialog: React.FC<ExportDialogProps> = (
         setTrue: startRecording,
         setFalse: stopRecording,
     } = useBoolean();
+
+    const { value: fileName, ...inputProps } = useInput({
+        initialValue: getDefaultFileName(state.project),
+        isRequired: true,
+    });
+    const [mimeType, setMimeType] = useState<MimeType>(MimeType.WAV);
     const [blob, setBlob] = useState<Blob>();
     const handleRecordingComplete = useCallback(
         (file: Blob) => {
@@ -56,6 +78,7 @@ const ExportDialog: React.FC<ExportDialogProps> = (
     const { isLoading: isLoadingSamples } = useToneAudio({
         lengthInMs: state.getLengthInMs(),
         onRecordingComplete: handleRecordingComplete,
+        mimeType,
         isRecording,
         files,
         instruments,
@@ -77,6 +100,22 @@ const ExportDialog: React.FC<ExportDialogProps> = (
         stopRecording();
         onCloseComplete?.();
     }, [onCloseComplete, stopRecording]);
+
+    const handleSelect = useCallback(
+        (item: SelectMenuItem<MimeType>) => setMimeType(item.value),
+        []
+    );
+
+    const fullFileName = useMemo(() => {
+        const extension = getExtension(mimeType)!;
+        if (isEmpty(fileName)) {
+            return `${getDefaultFileName(state.project)}${extension}`;
+        }
+
+        return `${fileName}${extension}`;
+    }, [fileName, mimeType, state.project]);
+    const hasFile = blob != null;
+
     return (
         <Dialog
             confirmLabel="Close"
@@ -93,54 +132,72 @@ const ExportDialog: React.FC<ExportDialogProps> = (
                         below. Recording happens in real-time, and you'll be
                         able to download the file once complete.
                     </Paragraph>
-                    <Alert
-                        marginBottom={majorScale(2)}
-                        title="The file will be exported as a .webm file">
-                        <Text>
-                            Use a site like{" "}
-                            <Link
-                                href="https://cloudconvert.com/webm-converter"
-                                target="_blank">
-                                CloudConvert
-                            </Link>{" "}
-                            to convert it to your desired format.
-                        </Text>
-                    </Alert>
+                    <Pane
+                        display="flex"
+                        flexDirection="row"
+                        marginBottom={majorScale(2)}>
+                        <Pane
+                            display="flex"
+                            flexDirection="column"
+                            marginRight={majorScale(1)}
+                            width="88%">
+                            <Label marginBottom={minorScale(1)}>Name</Label>
+                            <TextInput
+                                {...inputProps}
+                                value={fileName}
+                                width="100%"
+                            />
+                        </Pane>
+                        <Pane display="flex" flexDirection="column" width="12%">
+                            <Label marginBottom={minorScale(1)}>Type</Label>
+                            <SelectMenu
+                                calculateHeight={true}
+                                closeOnSelect={true}
+                                hasFilter={false}
+                                isMultiSelect={false}
+                                onSelect={handleSelect}
+                                options={options}
+                                title="Type"
+                                width={majorScale(16)}>
+                                <Button disabled={hasFile || isRecording}>
+                                    {getExtension(mimeType)}
+                                </Button>
+                            </SelectMenu>
+                        </Pane>
+                    </Pane>
                     <Button
                         allowUnsafeHref={true}
-                        appearance={blob == null ? "default" : "primary"}
-                        download={getFileName(state.project)}
-                        href={
-                            blob != null ? URL.createObjectURL(blob) : undefined
-                        }
+                        appearance={hasFile ? "primary" : "default"}
+                        download={fullFileName}
+                        href={hasFile ? URL.createObjectURL(blob) : undefined}
                         iconBefore={
-                            blob == null ? (
+                            hasFile ? (
+                                ExportIcon
+                            ) : (
                                 <RecordIcon
                                     color={
                                         isRecording ? colors.red600 : undefined
                                     }
                                 />
-                            ) : (
-                                ExportIcon
                             )
                         }
                         is="a"
                         isLoading={isRecording}
-                        onClick={blob == null ? handleExportClick : undefined}
+                        onClick={hasFile ? undefined : handleExportClick}
                         width="100%">
-                        {blob == null && !isRecording && "Export"}
+                        {!hasFile && !isRecording && "Export"}
                         {isRecording && (
                             <Text color={colors.red600}>Recording...</Text>
                         )}
-                        {blob != null && !isRecording && "Download file"}
+                        {hasFile && !isRecording && "Download file"}
                     </Button>
                 </React.Fragment>
             )}
         </Dialog>
     );
 };
 
-const getFileName = (project: ProjectRecord): string =>
-    `${project.name} ${formatNow()}.webm`;
+const getDefaultFileName = (project: ProjectRecord): string =>
+    slugify(`${project.name} ${project.bpm} BPM ${unixTime()}`);
 
 export { ExportDialog };

public/opus-media-recorder/OggOpusEncoder.wasm

@@ -0,0 +1,7 @@
+enum MimeType {
+    OGG = "audio/ogg",
+    WAV = "audio/wav",
+    WEBM = "audio/webm",
+}
+
+export { MimeType };

public/opus-media-recorder/WebMOpusEncoder.wasm

@@ -0,0 +1,17 @@
+declare module "opus-media-recorder" {
+    declare class OpusMediaRecorder extends MediaRecorder {
+        constructor(
+            stream: MediaStream,
+            options?: MediaRecorderOptions,
+            workerOptions?: OpusMediaRecorderWorkerOptions
+        );
+    }
+
+    export interface OpusMediaRecorderWorkerOptions {
+        encoderWorkerFactory: () => Worker;
+        OggOpusEncoderWasmPath: string;
+        WebMOpusEncoderWasmPath: string;
+    }
+
+    export = OpusMediaRecorder;
+}