- removed old code

- improved code style according to rules

src/app/organisms/room/AttachmentTypeSelector.jsx

@@ -68,3 +68,4 @@ AttachmentTypeSelector.defaultProps = {
 };
 
 export { AttachmentTypeSelector, attachmentUiFrameTypes };
+export default AttachmentTypeSelector;

src/app/organisms/room/AttachmentUis/AttachmentFrame.jsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { attachmentUiFrameTypes } from '../AttachmentTypeSelector';
-import { VoiceMailRecorder } from './VoiceMailRecorder';
+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';
@@ -14,12 +14,8 @@ function AttachmentFrame({
   attachmentOrUi,
   fileSetter,
   uploadProgressRef,
-  cancelNeedle,
 }) {
   function fileAttachedIndicator() {
-    console.log(attachmentOrUi.type);
-    console.log(typeof attachmentOrUi === 'object');
-
     // If this is not a file object, how can this be reached?
     if (typeof attachmentOrUi !== 'object') return null;
 
@@ -41,19 +37,13 @@ function AttachmentFrame({
   }
 
   function attachmentFrame() {
-    // let initStop;
-    // const fnInitStop = (func) => {
-    //   initStop = func;
-    //   // cancelNeedle(initStop);
+    // let requestResult;
+    // const fnRequestResult = (func) => {
+    //   requestResult = func;
     // };
-    let requestResult;
-    const fnRequestResult = (func) => {
-      requestResult = func;
-    };
     let submission;
     const fnHowToSubmit = (func) => {
       submission = func;
-      console.log(submission);
       fileSetter(submission);
     };
 
@@ -66,8 +56,7 @@ function AttachmentFrame({
         // Not too easy, need to attach function to return the audio blob
         return (
           <VoiceMailRecorder
-            // fnCancel={fnInitStop}
-            fnRequestResult={fnRequestResult}
+            // fnRequestResult={fnRequestResult}
             fnHowToSubmit={fnHowToSubmit}
           />
         );
@@ -83,7 +72,6 @@ AttachmentFrame.propTypes = {
   attachmentOrUi: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
   fileSetter: PropTypes.func.isRequired,
   uploadProgressRef: PropTypes.shape().isRequired,
-  cancelNeedle: PropTypes.func.isRequired,
 };
 
 export default AttachmentFrame;

src/app/organisms/room/AttachmentUis/VoiceMailRecorder.jsx

@@ -17,7 +17,7 @@ let _stream;
 let _mediaRecorder;
 const audioChunks = [];
 
-// TODO: Check if supported
+// TODO: Check if supported, check if browser allows
 
 async function init() {
   if (_mediaRecorder) return;
@@ -27,7 +27,6 @@ async function init() {
   _mediaRecorder = null;
   audioChunks.length = 0;
 
-  console.log('record voice, new recorder');
   _stream = await navigator.mediaDevices.getUserMedia({ audio: true });
 
   _mediaRecorder = new MediaRecorder(_stream);
@@ -39,7 +38,7 @@ async function init() {
     audioChunks.push(event.data);
   };
   _mediaRecorder.onerror = (error) => {
-    console.warn(error);
+    console.log(error);
     _mediaRecorder.stop();
   };
 }
@@ -50,6 +49,7 @@ function pauseRec() {
     timer.pause();
   }
 }
+
 function startOrResumeRec() {
   if (!_mediaRecorder) return;
 
@@ -61,7 +61,10 @@ function startOrResumeRec() {
   }
   timer.resume();
 }
+
 function restartRec() {
+  // TODO: BUG: If recording is paused before restarting
+  // it will cause the "Recording paused" not to be edited
   if (_mediaRecorder.state !== 'recording') _mediaRecorder.pause();
   if (_mediaRecorder.state !== 'inactive') _mediaRecorder.stop();
 
@@ -71,19 +74,16 @@ function restartRec() {
     .then(startOrResumeRec);
 }
 
-// TODO: Handle turning off the recorder to remove the browser indicator
-function VoiceMailRecorder({ fnRequestResult, fnHowToSubmit }) {
-  const [state, setState] = React.useState('unknown');
-  const [timeRecording, setTimeRecording] = React.useState(null);
+function VoiceMailRecorder({ fnHowToSubmit }) {
+  const [state, setState] = React.useState('Recording');
+  const [timeRecording, setTimeRecording] = React.useState('00:00');
 
   async function initiateInitiation() {
     if (!_mediaRecorder) {
       await init();
       startOrResumeRec();
     }
-    // _mediaRecorder.onstop = () => {
-    //   setState('Recording stopped');
-    // };
+
     _mediaRecorder.onstart = () => setState('Recording...');
     _mediaRecorder.onpause = () => setState('Recording paused');
     _mediaRecorder.onresume = () => setState('Recording...');
@@ -101,7 +101,7 @@ function VoiceMailRecorder({ fnRequestResult, fnHowToSubmit }) {
 
         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
@@ -128,7 +128,7 @@ function VoiceMailRecorder({ fnRequestResult, fnHowToSubmit }) {
     };
   }, []);
 
-  fnRequestResult(stopAndSubmit);
+  // fnRequestResult(stopAndSubmit);
   initiateInitiation();
 
   return (
@@ -154,9 +154,11 @@ function VoiceMailRecorder({ fnRequestResult, fnHowToSubmit }) {
 }
 
 VoiceMailRecorder.propTypes = {
-  // fnCancel: PropTypes.func.isRequired,
-  fnRequestResult: PropTypes.func.isRequired,
+  // // Might be useful in the future if
+  // // components should be requested to submit their result content when the message gets sent
+  // // so the user does not need this UI to attach its result here but can just sent it
+  // fnRequestResult: PropTypes.func.isRequired,
   fnHowToSubmit: PropTypes.func.isRequired,
 };
 
-export { VoiceMailRecorder };
+export default VoiceMailRecorder;

src/app/organisms/room/RoomViewInput.jsx

@@ -49,8 +49,6 @@ function RoomViewInput({
   const mx = initMatrix.matrixClient;
   const { roomsInput } = initMatrix;
 
-  let cancelAttachmentCmd;
-
   function requestFocusInput() {
     if (textAreaRef === null) return;
     textAreaRef.current.focus();
@@ -183,7 +181,7 @@ function RoomViewInput({
     sendIsTyping(false);
 
     roomsInput.setMessage(roomId, msgBody);
-    if (typeof attachmentOrUi === 'string') console.log('input is not FINISHED'); // TODO: remove
+    if (typeof attachmentOrUi === 'string') console.log('input is not FINISHED'); // TODO: disallow sending
     if (attachmentOrUi !== null && typeof attachmentOrUi === 'object') {
       roomsInput.setAttachment(roomId, attachmentOrUi);
     }
@@ -297,8 +295,6 @@ function RoomViewInput({
   }
 
   const handleAttachmentTypeSelectorReturn = (ret) => {
-    if (cancelAttachmentCmd) cancelAttachmentCmd();
-
     switch (ret) {
       case attachmentUiFrameTypes.none:
         setAttachmentOrUi(attachmentUiFrameTypes.none);
@@ -332,8 +328,6 @@ function RoomViewInput({
             alreadyHasAttachment={attachmentOrUi !== null}
           />
           <input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
-          {/* <IconButton onClick={handleUploadClick}
-            tooltip={attachment === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} /> */}
         </div>
         <div ref={inputBaseRef} className="room-input__input-container">
           {roomTimeline.isEncrypted() && <RawIcon size="extra-small" src={ShieldIC} />}
@@ -399,13 +393,8 @@ function RoomViewInput({
           uploadProgressRef={uploadProgressRef}
           fileSetter={(blob) => {
             setAttachmentOrUi(blob);
-            console.log(blob);
             roomsInput.setAttachment(roomId, blob);
           }}
-          cancelNeedle={(cmd) => {
-            cancelAttachmentCmd = cmd;
-            console.log(cmd);
-          }}
         />
       ) }
       <form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>