diff --git a/src/app/organisms/room/AttachmentTypeSelector.jsx b/src/app/organisms/room/AttachmentTypeSelector.jsx index 0c8627b2..a392e620 100644 --- a/src/app/organisms/room/AttachmentTypeSelector.jsx +++ b/src/app/organisms/room/AttachmentTypeSelector.jsx @@ -5,10 +5,15 @@ import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg'; import FileIC from '../../../../public/res/ic/outlined/file.svg'; import ContextMenu, { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu'; -const AttachmentTypes = { - remove: 'remove', - file: 'file', - voice: 'voice', +// const AttachmentTypes = { +// remove: 'remove', +// file: 'file', +// voice: 'voice', +// }; +const attachmentUiFrameTypes = { + none: null, + hasFile: 'file', + voiceMailRecorder: 'voiceMailRecorder', }; function AttachmentTypeSelector({ alreadyHasAttachment, actOnAttaching }) { @@ -20,7 +25,7 @@ function AttachmentTypeSelector({ alreadyHasAttachment, actOnAttaching }) { Attachment { - toggleMenu(); actOnAttaching(AttachmentTypes.file); + toggleMenu(); actOnAttaching(attachmentUiFrameTypes.file); }} iconSrc={FileIC} > @@ -28,7 +33,7 @@ function AttachmentTypeSelector({ alreadyHasAttachment, actOnAttaching }) { { - toggleMenu(); actOnAttaching(AttachmentTypes.voice); + toggleMenu(); actOnAttaching(attachmentUiFrameTypes.voiceMailRecorder); }} > Audio @@ -41,7 +46,7 @@ function AttachmentTypeSelector({ alreadyHasAttachment, actOnAttaching }) { if (!alreadyHasAttachment) { toggleMenu(); } else { - actOnAttaching(AttachmentTypes.remove); + actOnAttaching(attachmentUiFrameTypes.none); } }} tooltip={alreadyHasAttachment ? 'Cancel' : 'Select attachment'} @@ -62,4 +67,4 @@ AttachmentTypeSelector.defaultProps = { actOnAttaching: null, }; -export { AttachmentTypeSelector, AttachmentTypes }; +export { AttachmentTypeSelector, attachmentUiFrameTypes }; diff --git a/src/app/organisms/room/RoomViewInput.jsx b/src/app/organisms/room/RoomViewInput.jsx index d3bf2b44..cd5450ab 100644 --- a/src/app/organisms/room/RoomViewInput.jsx +++ b/src/app/organisms/room/RoomViewInput.jsx @@ -28,7 +28,8 @@ 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, AttachmentTypes } from './AttachmentTypeSelector'; +import { AttachmentTypeSelector, attachmentUiFrameTypes } from './AttachmentTypeSelector'; +import { VoiceMailRecorder } from './VoiceMailRecorder'; const CMD_REGEX = /(^\/|:|@)(\S*)$/; let isTyping = false; @@ -296,51 +297,17 @@ function RoomViewInput({ if (file !== null) roomsInput.setAttachment(roomId, file); } - const recordVoice = () => { - // TODO: Check if supported - // 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); - - const audioFile = new File([audioBlob], 'voicemail.webm', opts); - - setAttachmentOrUi(audioFile); - roomsInput.setAttachment(roomId, audioFile); - }); - - setTimeout(() => { - mediaRecorder.stop(); - }, 5000); // 1 hour 3600000 - }) - .catch(console.log); - }; - const handleAttachmentTypeSelectorReturn = (ret) => { - console.log(ret); + console.log(`here we go ${ret}`); switch (ret) { - case AttachmentTypes.remove: + case attachmentUiFrameTypes.none: roomsInput.cancelAttachment(roomId); break; - case AttachmentTypes.file: + case attachmentUiFrameTypes.file: uploadInputRef.current.click(); break; - case AttachmentTypes.voice: - recordVoice(); + case attachmentUiFrameTypes.voiceMailRecorder: + setAttachmentOrUi(attachmentUiFrameTypes.voiceMailRecorder); break; default: console.log('unhandled attachment type selector return'); @@ -401,7 +368,7 @@ function RoomViewInput({ ); } - function attachFile() { + function fileAttachedIndicator() { console.log(attachmentOrUi.type); console.log(typeof attachmentOrUi === 'object'); @@ -425,6 +392,29 @@ function RoomViewInput({ ); } + function attachmentFrame() { + // If there already is an attachment, show it + // I love Githhub Copilot + if (typeof attachmentOrUi === 'object') return fileAttachedIndicator(); + + console.log(attachmentOrUi); + switch (attachmentOrUi) { + case attachmentUiFrameTypes.voiceMailRecorder: + // Not to easy, need to attach function to return + return ( + { + setAttachmentOrUi(blob); + roomsInput.setAttachment(roomId, blob); + }} + /> + ); + default: + console.log('unhandled attachmentOrUi'); + return null; + } + } + function attachReply() { return (
@@ -450,7 +440,7 @@ function RoomViewInput({ return ( <> { replyTo !== null && attachReply()} - { attachmentOrUi !== null && attachFile() } + { attachmentOrUi !== null && attachmentFrame() }
{ e.preventDefault(); }}> { renderInputs()