I call them needles 🪡

injecting 💉a function to return a function
Fixed bugs
...

src/app/organisms/room/AttachmentFrame.jsx

@@ -14,6 +14,7 @@ function AttachmentFrame({
   attachmentOrUi,
   fileSetter,
   uploadProgressRef,
+  cancelNeedle,
 }) {
   function fileAttachedIndicator() {
     console.log(attachmentOrUi.type);
@@ -43,6 +44,7 @@ function AttachmentFrame({
     let initStop;
     const fnInitStop = (func) => {
       initStop = func;
+      cancelNeedle(initStop);
     };
     let requestResult;
     const fnRequestResult = (func) => {
@@ -52,6 +54,7 @@ function AttachmentFrame({
     const fnHowToSubmit = (func) => {
       submission = func;
       console.log(submission);
+      fileSetter(submission);
     };
 
     // If there already is an attachment, show it
@@ -73,7 +76,6 @@ function AttachmentFrame({
         return null;
     }
   }
-
   return attachmentFrame();
 }
 
@@ -81,6 +83,7 @@ AttachmentFrame.propTypes = {
   attachmentOrUi: PropTypes.node.isRequired,
   fileSetter: PropTypes.func.isRequired,
   uploadProgressRef: PropTypes.node.isRequired,
+  cancelNeedle: PropTypes.func.isRequired,
 };
 
 export default AttachmentFrame;

src/app/organisms/room/RoomViewInput.jsx

@@ -50,6 +50,8 @@ function RoomViewInput({
   const mx = initMatrix.matrixClient;
   const { roomsInput } = initMatrix;
 
+  let cancelAttachmentCmd;
+
   function requestFocusInput() {
     if (textAreaRef === null) return;
     textAreaRef.current.focus();
@@ -296,6 +298,8 @@ function RoomViewInput({
   }
 
   const handleAttachmentTypeSelectorReturn = (ret) => {
+    if (cancelAttachmentCmd) cancelAttachmentCmd();
+
     switch (ret) {
       case attachmentUiFrameTypes.none:
         setAttachmentOrUi(attachmentUiFrameTypes.none);
@@ -397,8 +401,13 @@ 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(); }}>

src/app/organisms/room/VoiceMailRecorder.jsx

@@ -55,24 +55,26 @@ function startOrResumeRec() {
 }
 function restartRec() {
   if (_mediaRecorder.state !== 'inactive') _mediaRecorder.stop();
-  audioChunks.length = 0;
+
+  _mediaRecorder = null;
+  init();
+
   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.onstop = () => setState('Recording stopped');
-    _mediaRecorder.onstart = () => setState('started');
+    _mediaRecorder.onstart = () => setState('Recording...');
-    _mediaRecorder.onpause = () => setState('paused');
+    _mediaRecorder.onpause = () => setState('Recording paused');
-    _mediaRecorder.onresume = () => setState('resumed');
+    _mediaRecorder.onresume = () => setState('Recording...');
   }
   initiateInitiation();
 
@@ -81,11 +83,16 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
 
     _stream.getTracks().forEach((track) => track.stop());
 
+    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
   }
   fnCancel(stopAndSubmit);
   fnRequestResult(stopAndSubmit);
@@ -97,10 +104,9 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
       </div>
       <div className="room-attachment__info">
         <Text variant="b1">
-          Recording...
           {state}
         </Text>
-        <Text variant="b3">{`for: ${duration}`}</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>