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,68 +1,83 @@
-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 })
+async function init() {
-  .then((stream) => {
+  if (_mediaRecorder) return;
-    _stream = stream;
-    _mediaRecorder = new MediaRecorder(_stream);
 
+  console.log('record voice, new recorder');
+  _stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+
+  _mediaRecorder = new MediaRecorder(_stream);
+
+  // Remove previous recording
+  audioChunks.length = 0;
+
+  _mediaRecorder.ondataavailable = (event) => {
+    audioChunks.push(event.data);
+    console.log('ondataavailable');
+  };
+  _mediaRecorder.onerror = (error) => {
+    console.log(error);
+    _mediaRecorder.stop();
+  };
+}
+
+function pauseRec() {
+  if (_mediaRecorder.state === 'recording') {
+    _mediaRecorder.pause();
+    console.log('pause');
+  }
+}
+function startOrResumeRec() {
+  if (_mediaRecorder.state === 'paused') {
+    _mediaRecorder.resume();
+    console.log('resume');
+  } else if (_mediaRecorder.state === 'inactive') {
+    audioChunks.length = 0;
     _mediaRecorder.start();
-
+    console.log('start');
-    _mediaRecorder.ondataavailable = (event) => audioChunks.push(event.data);
+  }
-    _mediaRecorder.onerror = (error) => {
+}
-      console.log(error);
+function restartRec() {
-      _mediaRecorder.stop();
+  if (_mediaRecorder.state !== 'inactive') _mediaRecorder.stop();
-    };
+  audioChunks.length = 0;
-  })
+  startOrResumeRec();
-  .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');
+  const [duration, setDuraction] = React.useState('unknown');
 
-  while (!_mediaRecorder) {
+  async function initiateInitiation() {
-    // Blocking
+    if (!_mediaRecorder) {
-  }
+      await init();
-
+      startOrResumeRec();
-  _mediaRecorder.onstop = () => setState('stopped');
-  _mediaRecorder.onstart = () => setState('started');
-  _mediaRecorder.onpause = () => setState('paused');
-  _mediaRecorder.onresume = () => setState('resumed');
-
-  function pauseRec() {
-    if (_mediaRecorder.state === 'recording') {
-      _mediaRecorder.pause();
-      console.log('pause');
     }
+    _mediaRecorder.onstop = () => setState('stopped');
+    _mediaRecorder.onstart = () => setState('started');
+    _mediaRecorder.onpause = () => setState('paused');
+    _mediaRecorder.onresume = () => setState('resumed');
   }
-  function startOrResumeRec() {
+  initiateInitiation();
-    if (_mediaRecorder.state === 'paused') {
-      _mediaRecorder.resume();
-      console.log('resume');
-    } else if (_mediaRecorder.state === 'inactive') {
-      audioChunks.length = 0;
-      _mediaRecorder.start();
-      console.log('start');
-    }
-  }
-  function restartRec() {
-    _mediaRecorder.stop();
-    startOrResumeRec();
-  }
 
   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="b1">
-        <Text variant="b3">{`for: ${'some time '}`}</Text>
+          Recording...
-        <button onClick={pauseRec} type="button">Pause</button>
+          {state}
-        <button onClick={startOrResumeRec} type="button">Start</button>
+        </Text>
-        <button onClick={startOrResumeRec} type="button">Stop</button>
+        <Text variant="b3">{`for: ${duration}`}</Text>
-        <button onClick={restartRec} type="button">Restart</button>
+        <IconButton onClick={pauseRec} src={PauseIC}>Pause</IconButton>
-        <button onClick={fnHowToSubmit(stopAndSubmit)} type="submit">Submit</button>
+        <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;