From 62b707486094df23d1441833a34d66145a5d4e99 Mon Sep 17 00:00:00 2001
From: C0ffeeCode <ritters_werth@outlook.com>
Date: Wed, 5 Jan 2022 12:37:10 +0100
Subject: [PATCH] better !?

---
 .../{ => AttachmentUis}/AttachmentFrame.jsx   | 16 ++---
 .../{ => AttachmentUis}/VoiceMailRecorder.jsx | 65 ++++++++++---------
 .../room/AttachmentUis/VoiceMailRecorder.scss | 11 ++++
 src/app/organisms/room/RoomViewInput.jsx      |  3 +-
 4 files changed, 56 insertions(+), 39 deletions(-)
 rename src/app/organisms/room/{ => AttachmentUis}/AttachmentFrame.jsx (84%)
 rename src/app/organisms/room/{ => AttachmentUis}/VoiceMailRecorder.jsx (55%)
 create mode 100644 src/app/organisms/room/AttachmentUis/VoiceMailRecorder.scss

diff --git a/src/app/organisms/room/AttachmentFrame.jsx b/src/app/organisms/room/AttachmentUis/AttachmentFrame.jsx
similarity index 84%
rename from src/app/organisms/room/AttachmentFrame.jsx
rename to src/app/organisms/room/AttachmentUis/AttachmentFrame.jsx
index ba79f8ba..348106e7 100644
--- a/src/app/organisms/room/AttachmentFrame.jsx
+++ b/src/app/organisms/room/AttachmentUis/AttachmentFrame.jsx
@@ -1,14 +1,14 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { attachmentUiFrameTypes } from './AttachmentTypeSelector';
-import { funnyFunc, VoiceMailRecorder } from './VoiceMailRecorder';
-import RawIcon from '../../atoms/system-icons/RawIcon';
-import VLCIC from '../../../../public/res/ic/outlined/vlc.svg';
-import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg';
-import FileIC from '../../../../public/res/ic/outlined/file.svg';
-import Text from '../../atoms/text/Text';
-import { bytesToSize } from '../../../util/common';
+import { attachmentUiFrameTypes } from '../AttachmentTypeSelector';
+import { VoiceMailRecorder } from './VoiceMailRecorder';
+import RawIcon from '../../../atoms/system-icons/RawIcon';
+import VLCIC from '../../../../../public/res/ic/outlined/vlc.svg';
+import VolumeFullIC from '../../../../../public/res/ic/outlined/volume-full.svg';
+import FileIC from '../../../../../public/res/ic/outlined/file.svg';
+import Text from '../../../atoms/text/Text';
+import { bytesToSize } from '../../../../util/common';
 
 function AttachmentFrame({
   attachmentOrUi,
diff --git a/src/app/organisms/room/VoiceMailRecorder.jsx b/src/app/organisms/room/AttachmentUis/VoiceMailRecorder.jsx
similarity index 55%
rename from src/app/organisms/room/VoiceMailRecorder.jsx
rename to src/app/organisms/room/AttachmentUis/VoiceMailRecorder.jsx
index 63c48f49..bb5fc08f 100644
--- a/src/app/organisms/room/VoiceMailRecorder.jsx
+++ b/src/app/organisms/room/AttachmentUis/VoiceMailRecorder.jsx
@@ -1,14 +1,15 @@
-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';
+import React from 'react';
+import PropTypes 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 ChevronBottomIC from '../../../../../public/res/ic/outlined/chevron-bottom.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 './VoiceMailRecorder.scss';
+// import Timer from '../../../../util/Timer';
 
 let _stream;
 let _mediaRecorder;
@@ -78,21 +79,24 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
   }
   initiateInitiation();
 
-  function stopAndSubmit() {
+  function stopAndSubmit(skipSubmission) {
     if (_mediaRecorder.state !== 'inactive') _mediaRecorder.stop();
 
     _stream.getTracks().forEach((track) => track.stop());
 
-    setTimeout(() => {
-      _mediaRecorder = null;
-      _stream = null;
+    if (!skipSubmission) {
+      setTimeout(() => {
+        _mediaRecorder = null;
+        _stream = null;
 
-      const opts = { type: 'audio/webm' };
-      const audioBlob = new Blob(audioChunks, opts);
-      console.log('audioBlob', audioBlob);
-      const audioFile = new File([audioBlob], 'voicemail.webm', opts);
-      fnHowToSubmit(audioFile);
-    }, 300); // TODO: Fix this hack, stop does not mean dataavailable but its going to happen soon
+        const opts = { type: 'audio/webm' };
+        const audioBlob = new Blob(audioChunks, opts);
+        console.log('audioBlob', audioBlob);
+        const audioFile = new File([audioBlob], 'voicemail.webm', opts);
+        fnHowToSubmit(audioFile);
+      // BUG: This will cause the recorder to add the file although it was to be cancelled
+      }, 300); // TODO: Fix this hack, stop does not mean dataavailable but its going to happen soon
+    }
   }
   fnCancel(stopAndSubmit);
   fnRequestResult(stopAndSubmit);
@@ -103,14 +107,17 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
         <RawIcon src={VolumeFullIC} />
       </div>
       <div className="room-attachment__info">
-        <Text variant="b1">
-          {state}
-        </Text>
-        <Text variant="b3">for some time maybe?</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>
+          <Text variant="b1">
+            {state}
+          </Text>
+          <Text variant="b3">for some time maybe?</Text>
+        </div>
+        {(_mediaRecorder && _mediaRecorder.state === 'recording')
+          ? (<IconButton onClick={pauseRec} src={PauseIC}>Pause</IconButton>)
+          : (<IconButton onClick={startOrResumeRec} src={PlayIC}>Start</IconButton>)}
+        <IconButton onClick={restartRec} src={ArrowIC} tooltip="Start over">Reset</IconButton>
+        <IconButton onClick={() => stopAndSubmit()} src={ChevronBottomIC} type="Add as attachment">Submit</IconButton>
       </div>
     </div>
   );
diff --git a/src/app/organisms/room/AttachmentUis/VoiceMailRecorder.scss b/src/app/organisms/room/AttachmentUis/VoiceMailRecorder.scss
new file mode 100644
index 00000000..295c315c
--- /dev/null
+++ b/src/app/organisms/room/AttachmentUis/VoiceMailRecorder.scss
@@ -0,0 +1,11 @@
+@use '../../../partials/flex';
+
+.room-attachment__info {
+    display: flex;
+
+    div {
+        width: 150px;
+        max-width: 100%;
+        // max-width: ;
+    }
+}
\ No newline at end of file
diff --git a/src/app/organisms/room/RoomViewInput.jsx b/src/app/organisms/room/RoomViewInput.jsx
index b42f6f1f..a9dade7c 100644
--- a/src/app/organisms/room/RoomViewInput.jsx
+++ b/src/app/organisms/room/RoomViewInput.jsx
@@ -26,8 +26,7 @@ import ShieldIC from '../../../../public/res/ic/outlined/shield.svg';
 import MarkdownIC from '../../../../public/res/ic/outlined/markdown.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
 import { AttachmentTypeSelector, attachmentUiFrameTypes } from './AttachmentTypeSelector';
-import AttachmentFrame from './AttachmentFrame';
-import { VoiceMailRecorder } from './VoiceMailRecorder';
+import AttachmentFrame from './AttachmentUis/AttachmentFrame';
 
 const CMD_REGEX = /(^\/|:|@)(\S*)$/;
 let isTyping = false;