- 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 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 }) {
|
|||
<MenuHeader>Attachment</MenuHeader>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
toggleMenu(); actOnAttaching(AttachmentTypes.file);
|
||||
toggleMenu(); actOnAttaching(attachmentUiFrameTypes.file);
|
||||
}}
|
||||
iconSrc={FileIC}
|
||||
>
|
||||
|
@ -28,7 +33,7 @@ function AttachmentTypeSelector({ alreadyHasAttachment, actOnAttaching }) {
|
|||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
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 };
|
||||
|
|
|
@ -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 (
|
||||
<VoiceMailRecorder
|
||||
returnedFileHandler={(blob) => {
|
||||
setAttachmentOrUi(blob);
|
||||
roomsInput.setAttachment(roomId, blob);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
default:
|
||||
console.log('unhandled attachmentOrUi');
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function attachReply() {
|
||||
return (
|
||||
<div className="room-reply">
|
||||
|
@ -450,7 +440,7 @@ function RoomViewInput({
|
|||
return (
|
||||
<>
|
||||
{ replyTo !== null && attachReply()}
|
||||
{ attachmentOrUi !== null && attachFile() }
|
||||
{ attachmentOrUi !== null && attachmentFrame() }
|
||||
<form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
|
||||
{
|
||||
renderInputs()
|
||||
|
|
Loading…
Reference in a new issue