works or something like that disk 2

src/app/organisms/room/AttachmentFrame.jsx

@@ -48,9 +48,10 @@ function AttachmentFrame({
     const fnRequestResult = (func) => {
       requestResult = func;
     };
-    let howToSubmit;
+    let submission;
     const fnHowToSubmit = (func) => {
-      howToSubmit = func;
+      submission = func;
+      console.log(submission);
     };
 
     // If there already is an attachment, show it

src/app/organisms/room/VoiceMailRecorder.jsx

@@ -1,45 +1,42 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes, { func } from 'prop-types';
 import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
 import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg';
+import SendIC from '../../../../public/res/ic/outlined/send.svg';
+import ArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg';
+import PauseIC from '../../../../public/res/ic/outlined/pause.svg';
+import PlayIC from '../../../../public/res/ic/outlined/play.svg';
 import IconButton from '../../atoms/button/IconButton';
+import Timer from '../../../util/Timer';
 
 let _stream;
 let _mediaRecorder;
 const audioChunks = [];
 
-console.log('record voice, new recorder');
 // TODO: Check if supported
 
-navigator.mediaDevices.getUserMedia({ audio: true })
-  .then((stream) => {
-    _stream = stream;
+async function init() {
+  if (_mediaRecorder) return;
+
+  console.log('record voice, new recorder');
+  _stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
   _mediaRecorder = new MediaRecorder(_stream);
 
-    _mediaRecorder.start();
+  // Remove previous recording
+  audioChunks.length = 0;
 
-    _mediaRecorder.ondataavailable = (event) => audioChunks.push(event.data);
+  _mediaRecorder.ondataavailable = (event) => {
+    audioChunks.push(event.data);
+    console.log('ondataavailable');
+  };
   _mediaRecorder.onerror = (error) => {
     console.log(error);
     _mediaRecorder.stop();
   };
-  })
-  .catch(console.log);
-
-// TODO: Handle turning off the recorder to remove the browser indicator
-function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
-  const [state, setState] = React.useState('unknown');
-
-  while (!_mediaRecorder) {
-    // Blocking
 }
 
-  _mediaRecorder.onstop = () => setState('stopped');
-  _mediaRecorder.onstart = () => setState('started');
-  _mediaRecorder.onpause = () => setState('paused');
-  _mediaRecorder.onresume = () => setState('resumed');
-
 function pauseRec() {
   if (_mediaRecorder.state === 'recording') {
     _mediaRecorder.pause();
@@ -57,12 +54,30 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
   }
 }
 function restartRec() {
-    _mediaRecorder.stop();
+  if (_mediaRecorder.state !== 'inactive') _mediaRecorder.stop();
+  audioChunks.length = 0;
   startOrResumeRec();
 }
 
+// TODO: Handle turning off the recorder to remove the browser indicator
+function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
+  const [state, setState] = React.useState('unknown');
+  const [duration, setDuraction] = React.useState('unknown');
+
+  async function initiateInitiation() {
+    if (!_mediaRecorder) {
+      await init();
+      startOrResumeRec();
+    }
+    _mediaRecorder.onstop = () => setState('stopped');
+    _mediaRecorder.onstart = () => setState('started');
+    _mediaRecorder.onpause = () => setState('paused');
+    _mediaRecorder.onresume = () => setState('resumed');
+  }
+  initiateInitiation();
+
   function stopAndSubmit() {
-    _mediaRecorder.stop();
+    if (_mediaRecorder.state !== 'inactive') _mediaRecorder.stop();
 
     _stream.getTracks().forEach((track) => track.stop());
 
@@ -73,6 +88,7 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
     fnHowToSubmit(audioFile);
   }
   fnCancel(stopAndSubmit);
+  fnRequestResult(stopAndSubmit);
 
   return (
     <div className="room-attachment">
@@ -80,13 +96,15 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
         <RawIcon src={VolumeFullIC} />
       </div>
       <div className="room-attachment__info">
-        <Text variant="b1">Recording...{state}</Text>
-        <Text variant="b3">{`for: ${'some time '}`}</Text>
-        <button onClick={pauseRec} type="button">Pause</button>
-        <button onClick={startOrResumeRec} type="button">Start</button>
-        <button onClick={startOrResumeRec} type="button">Stop</button>
-        <button onClick={restartRec} type="button">Restart</button>
-        <button onClick={fnHowToSubmit(stopAndSubmit)} type="submit">Submit</button>
+        <Text variant="b1">
+          Recording...
+          {state}
+        </Text>
+        <Text variant="b3">{`for: ${duration}`}</Text>
+        <IconButton onClick={pauseRec} src={PauseIC}>Pause</IconButton>
+        <IconButton onClick={startOrResumeRec} src={PlayIC}>Start</IconButton>
+        <IconButton onClick={restartRec} src={ArrowIC}>Reset</IconButton>
+        <IconButton onClick={() => stopAndSubmit()} src={SendIC} type="submit">Submit</IconButton>
       </div>
     </div>
   );

src/util/Timer.js

@@ -0,0 +1,26 @@
+class Timer {
+  constructor() {
+    this.savedTime = 0;
+    this.timeStarted = new Date().getTime();
+  }
+
+  esume() {
+    this.timeStarted = new Date().getTime();
+  }
+
+  pause() {
+    this.savedTime += this.timeStarted - new Date().getTime();
+    this.timeStarted = null;
+  }
+
+  get gett() {
+    return this.savedTime + (this.timeStarted - new Date().getTime());
+  }
+
+  stop() {
+    this.pause();
+    return this.savedTime;
+  }
+}
+
+export default Timer;