idk what im doing vol 2

matrix-js-sdk

@@ -0,0 +1 @@
+Subproject commit f30be878793407b02fad1e85676d4c1644a7c30c

src/app/organisms/room/AttachmentTypeSelector.jsx

@@ -4,37 +4,13 @@ import IconButton from '../../atoms/button/IconButton';
 import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
 import ContextMenu, { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
 
-function AttachmentTypeSelector({ uploadFile }) {
-  const recordVoice = () => {
-    navigator.getUserMedia = navigator.getUserMedia
-                           || navigator.webkitGetUserMedia
-                           || navigator.mozGetUserMedia
-                           || navigator.msGetUserMedia;
-
-    navigator.mediaDevices.getUserMedia({ audio: true })
-      .then((stream) => {
-        const mediaRecorder = new MediaRecorder(stream);
-        mediaRecorder.start();
-        const audioChunks = [];
-
-        mediaRecorder.addEventListener('dataavailable', (event) => {
-          audioChunks.push(event.data);
-        });
-
-        mediaRecorder.addEventListener('stop', () => {
-          const audioBlob = new Blob(audioChunks, { type: 'audio/webm; codecs=opus' });
-          const audioUrl = URL.createObjectURL(audioBlob);
-
-          console.log(audioUrl);
-        });
-
-        setTimeout(() => {
-          mediaRecorder.stop();
-        }, 1000); // 1 hour 3600000
-      })
-      .catch((e) => console.log(e));
-  };
+const AttachmentTypes = {
+  remove: 'remove',
+  file: 'file',
+  voice: 'voice',
+};
 
+function AttachmentTypeSelector({ alreadyHasAttachment, actOnAttaching }) {
   return (
     <ContextMenu
       maxWidth={200}
@@ -43,34 +19,45 @@ function AttachmentTypeSelector({ uploadFile }) {
           <MenuHeader>Attachment</MenuHeader>
           <MenuItem
             onClick={() => {
-              uploadFile(); toggleMenu();
+              toggleMenu(); actOnAttaching(AttachmentTypes.file);
             }}
           >
             File
           </MenuItem>
           <MenuItem
             onClick={() => {
-              recordVoice(); toggleMenu();
+              toggleMenu(); actOnAttaching(AttachmentTypes.voice);
             }}
           >
             Audio
           </MenuItem>
-
         </>
       )}
       render={(toggleMenu) => (
-        <IconButton onClick={toggleMenu} tooltip={true === null ? 'Upload' : 'Cancel'} src={CirclePlusIC} />
+        <IconButton
+          onClick={() => {
+            if (!alreadyHasAttachment) {
+              toggleMenu();
+            } else {
+              actOnAttaching(AttachmentTypes.remove);
+            }
+          }}
+          tooltip={alreadyHasAttachment ? 'Upload' : 'Cancel'}
+          src={CirclePlusIC}
+        />
       )}
     />
   );
 }
 
 AttachmentTypeSelector.propTypes = {
-  uploadFile: PropTypes.func,
+  alreadyHasAttachment: PropTypes.bool,
+  actOnAttaching: PropTypes.func,
 };
 
 AttachmentTypeSelector.defaultProps = {
-  uploadFile: null,
+  alreadyHasAttachment: false,
+  actOnAttaching: null,
 };
 
-export { AttachmentTypeSelector };
+export { AttachmentTypeSelector, AttachmentTypes };

src/app/organisms/room/RoomViewInput.jsx

@@ -29,7 +29,7 @@ import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg';
 import MarkdownIC from '../../../../public/res/ic/outlined/markdown.svg';
 import FileIC from '../../../../public/res/ic/outlined/file.svg';
 import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
-import { AttachmentTypeSelector } from './AttachmentTypeSelector';
+import { AttachmentTypeSelector, AttachmentTypes } from './AttachmentTypeSelector';
 
 const CMD_REGEX = /(^\/|:|@)(\S*)$/;
 let isTyping = false;
@@ -290,18 +290,67 @@ function RoomViewInput({
     textAreaRef.current.focus();
   }
 
-  const handleUploadClick = () => {
-    if (attachment === null) uploadInputRef.current.click();
-    else {
-      roomsInput.cancelAttachment(roomId);
-    }
-  };
   function uploadFileChange(e) {
     const file = e.target.files.item(0);
     setAttachment(file);
+    console.log(file);
     if (file !== null) roomsInput.setAttachment(roomId, file);
   }
 
+  const recordVoice = () => {
+    navigator.getUserMedia = navigator.getUserMedia
+                           || navigator.webkitGetUserMedia
+                           || navigator.mozGetUserMedia
+                           || navigator.msGetUserMedia;
+
+    navigator.mediaDevices.getUserMedia({ audio: true })
+      .then((stream) => {
+        const mediaRecorder = new MediaRecorder(stream);
+        mediaRecorder.start();
+        const audioChunks = [];
+
+        mediaRecorder.addEventListener('dataavailable', (event) => {
+          audioChunks.push(event.data);
+        });
+
+        mediaRecorder.addEventListener('stop', () => {
+          const opts = { type: 'audio/webm' };
+          const audioBlob = new Blob(audioChunks, opts);
+
+          audioBlob.text()
+            .then(() => {
+              const a = new File([audioBlob], 'voicemail.webm', opts);
+
+              console.log(a);
+              roomsInput.setAttachment(roomId, a);
+            });
+        });
+
+        setTimeout(() => {
+          mediaRecorder.stop();
+        }, 5000); // 1 hour 3600000
+      })
+      .catch((e) => console.log(e));
+  };
+
+  const handleAttachmentTypeSelectorReturn = (ret) => {
+    console.log(ret);
+    switch (ret) {
+      case AttachmentTypes.remove:
+        roomsInput.cancelAttachment(roomId);
+        break;
+      case AttachmentTypes.file:
+        uploadInputRef.current.click();
+        break;
+      case AttachmentTypes.voice:
+        recordVoice();
+        break;
+      default:
+        console.log('unhandled attachment type selector return');
+        break;
+    }
+  };
+
   const canISend = roomTimeline.room.currentState.maySendMessage(mx.getUserId());
 
   function renderInputs() {
@@ -316,7 +365,8 @@ function RoomViewInput({
           <AttachmentTypeSelector
             ref={uploadInputRef}
             tooltip={attachment === null ? 'Upload' : 'Cancel'}
-            uploadFile={() => handleUploadClick()}
+            actOnAttaching={handleAttachmentTypeSelectorReturn}
+            alreadyHasAttachment={attachment !== null}
           />
           <input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
           {/* <IconButton onClick={handleUploadClick}

src/client/state/RoomsInput.js

@@ -216,6 +216,7 @@ class RoomsInput extends EventEmitter {
   }
 
   setAttachment(roomId, file) {
+    console.log(file);
     const input = this.getInput(roomId);
     input.attachment = {
       file,
@@ -287,6 +288,7 @@ class RoomsInput extends EventEmitter {
 
   async sendFile(roomId, file) {
     const fileType = file.type.slice(0, file.type.indexOf('/'));
+    console.log(file.type);
     const info = {
       mimetype: file.type,
       size: file.size,