- clear old voicerecorder
- remove AttachmentTypes - Added AttachmentFrame Bug: VoiceMailRecorder cannot be stopped using button
This commit is contained in:
parent
240d16475f
commit
9bb8d0ae47
2 changed files with 45 additions and 50 deletions
|
@ -5,10 +5,15 @@ import CirclePlusIC from '../../../../public/res/ic/outlined/circle-plus.svg';
|
||||||
import FileIC from '../../../../public/res/ic/outlined/file.svg';
|
import FileIC from '../../../../public/res/ic/outlined/file.svg';
|
||||||
import ContextMenu, { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
|
import ContextMenu, { MenuHeader, MenuItem } from '../../atoms/context-menu/ContextMenu';
|
||||||
|
|
||||||
const AttachmentTypes = {
|
// const AttachmentTypes = {
|
||||||
remove: 'remove',
|
// remove: 'remove',
|
||||||
file: 'file',
|
// file: 'file',
|
||||||
voice: 'voice',
|
// voice: 'voice',
|
||||||
|
// };
|
||||||
|
const attachmentUiFrameTypes = {
|
||||||
|
none: null,
|
||||||
|
hasFile: 'file',
|
||||||
|
voiceMailRecorder: 'voiceMailRecorder',
|
||||||
};
|
};
|
||||||
|
|
||||||
function AttachmentTypeSelector({ alreadyHasAttachment, actOnAttaching }) {
|
function AttachmentTypeSelector({ alreadyHasAttachment, actOnAttaching }) {
|
||||||
|
@ -20,7 +25,7 @@ function AttachmentTypeSelector({ alreadyHasAttachment, actOnAttaching }) {
|
||||||
<MenuHeader>Attachment</MenuHeader>
|
<MenuHeader>Attachment</MenuHeader>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
toggleMenu(); actOnAttaching(AttachmentTypes.file);
|
toggleMenu(); actOnAttaching(attachmentUiFrameTypes.file);
|
||||||
}}
|
}}
|
||||||
iconSrc={FileIC}
|
iconSrc={FileIC}
|
||||||
>
|
>
|
||||||
|
@ -28,7 +33,7 @@ function AttachmentTypeSelector({ alreadyHasAttachment, actOnAttaching }) {
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
<MenuItem
|
<MenuItem
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
toggleMenu(); actOnAttaching(AttachmentTypes.voice);
|
toggleMenu(); actOnAttaching(attachmentUiFrameTypes.voiceMailRecorder);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Audio
|
Audio
|
||||||
|
@ -41,7 +46,7 @@ function AttachmentTypeSelector({ alreadyHasAttachment, actOnAttaching }) {
|
||||||
if (!alreadyHasAttachment) {
|
if (!alreadyHasAttachment) {
|
||||||
toggleMenu();
|
toggleMenu();
|
||||||
} else {
|
} else {
|
||||||
actOnAttaching(AttachmentTypes.remove);
|
actOnAttaching(attachmentUiFrameTypes.none);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
tooltip={alreadyHasAttachment ? 'Cancel' : 'Select attachment'}
|
tooltip={alreadyHasAttachment ? 'Cancel' : 'Select attachment'}
|
||||||
|
@ -62,4 +67,4 @@ AttachmentTypeSelector.defaultProps = {
|
||||||
actOnAttaching: null,
|
actOnAttaching: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
export { AttachmentTypeSelector, AttachmentTypes };
|
export { AttachmentTypeSelector, attachmentUiFrameTypes };
|
||||||
|
|
|
@ -28,7 +28,8 @@ import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg';
|
||||||
import MarkdownIC from '../../../../public/res/ic/outlined/markdown.svg';
|
import MarkdownIC from '../../../../public/res/ic/outlined/markdown.svg';
|
||||||
import FileIC from '../../../../public/res/ic/outlined/file.svg';
|
import FileIC from '../../../../public/res/ic/outlined/file.svg';
|
||||||
import CrossIC from '../../../../public/res/ic/outlined/cross.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*)$/;
|
const CMD_REGEX = /(^\/|:|@)(\S*)$/;
|
||||||
let isTyping = false;
|
let isTyping = false;
|
||||||
|
@ -296,51 +297,17 @@ function RoomViewInput({
|
||||||
if (file !== null) roomsInput.setAttachment(roomId, file);
|
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) => {
|
const handleAttachmentTypeSelectorReturn = (ret) => {
|
||||||
console.log(ret);
|
console.log(`here we go ${ret}`);
|
||||||
switch (ret) {
|
switch (ret) {
|
||||||
case AttachmentTypes.remove:
|
case attachmentUiFrameTypes.none:
|
||||||
roomsInput.cancelAttachment(roomId);
|
roomsInput.cancelAttachment(roomId);
|
||||||
break;
|
break;
|
||||||
case AttachmentTypes.file:
|
case attachmentUiFrameTypes.file:
|
||||||
uploadInputRef.current.click();
|
uploadInputRef.current.click();
|
||||||
break;
|
break;
|
||||||
case AttachmentTypes.voice:
|
case attachmentUiFrameTypes.voiceMailRecorder:
|
||||||
recordVoice();
|
setAttachmentOrUi(attachmentUiFrameTypes.voiceMailRecorder);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
console.log('unhandled attachment type selector return');
|
console.log('unhandled attachment type selector return');
|
||||||
|
@ -401,7 +368,7 @@ function RoomViewInput({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function attachFile() {
|
function fileAttachedIndicator() {
|
||||||
console.log(attachmentOrUi.type);
|
console.log(attachmentOrUi.type);
|
||||||
console.log(typeof attachmentOrUi === 'object');
|
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 (
|
||||||
|
<VoiceMailRecorder
|
||||||
|
returnedFileHandler={(blob) => {
|
||||||
|
setAttachmentOrUi(blob);
|
||||||
|
roomsInput.setAttachment(roomId, blob);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
console.log('unhandled attachmentOrUi');
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function attachReply() {
|
function attachReply() {
|
||||||
return (
|
return (
|
||||||
<div className="room-reply">
|
<div className="room-reply">
|
||||||
|
@ -450,7 +440,7 @@ function RoomViewInput({
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{ replyTo !== null && attachReply()}
|
{ replyTo !== null && attachReply()}
|
||||||
{ attachmentOrUi !== null && attachFile() }
|
{ attachmentOrUi !== null && attachmentFrame() }
|
||||||
<form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
|
<form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
|
||||||
{
|
{
|
||||||
renderInputs()
|
renderInputs()
|
||||||
|
|
Loading…
Reference in a new issue