extract AttachmentFrame out of RoomViewInput
This commit is contained in:
parent
9bb8d0ae47
commit
949468da5c
3 changed files with 87 additions and 58 deletions
71
src/app/organisms/room/AttachmentFrame.jsx
Normal file
71
src/app/organisms/room/AttachmentFrame.jsx
Normal file
|
@ -0,0 +1,71 @@
|
||||||
|
/* eslint-disable react/prop-types */
|
||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { attachmentUiFrameTypes } from './AttachmentTypeSelector';
|
||||||
|
import { VoiceMailRecorder } from './VoiceMailRecorder';
|
||||||
|
import RawIcon from '../../atoms/system-icons/RawIcon';
|
||||||
|
import VLCIC from '../../../../public/res/ic/outlined/vlc.svg';
|
||||||
|
import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg';
|
||||||
|
import FileIC from '../../../../public/res/ic/outlined/file.svg';
|
||||||
|
import Text from '../../atoms/text/Text';
|
||||||
|
import { bytesToSize } from '../../../util/common';
|
||||||
|
|
||||||
|
function AttachmentFrame({
|
||||||
|
attachmentOrUi,
|
||||||
|
fileSetter,
|
||||||
|
uploadProgressRef,
|
||||||
|
}) {
|
||||||
|
function fileAttachedIndicator() {
|
||||||
|
console.log(attachmentOrUi.type);
|
||||||
|
console.log(typeof attachmentOrUi === 'object');
|
||||||
|
|
||||||
|
// If this is not a file object, how can this be reached?
|
||||||
|
if (typeof attachmentOrUi !== 'object') return null;
|
||||||
|
|
||||||
|
const fileType = attachmentOrUi.type.slice(0, attachmentOrUi.type.indexOf('/'));
|
||||||
|
return (
|
||||||
|
<div className="room-attachment">
|
||||||
|
<div className={`room-attachment__preview${fileType !== 'image' ? ' room-attachment__icon' : ''}`}>
|
||||||
|
{fileType === 'image' && <img alt={attachmentOrUi.name} src={URL.createObjectURL(attachmentOrUi)} />}
|
||||||
|
{fileType === 'video' && <RawIcon src={VLCIC} />}
|
||||||
|
{fileType === 'audio' && <RawIcon src={VolumeFullIC} />}
|
||||||
|
{fileType !== 'image' && fileType !== 'video' && fileType !== 'audio' && <RawIcon src={FileIC} />}
|
||||||
|
</div>
|
||||||
|
<div className="room-attachment__info">
|
||||||
|
<Text variant="b1">{attachmentOrUi.name}</Text>
|
||||||
|
<Text variant="b3"><span ref={uploadProgressRef}>{`size: ${bytesToSize(attachmentOrUi.size)}`}</span></Text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function attachmentFrame() {
|
||||||
|
// If there already is an attachment, show it
|
||||||
|
if (typeof attachmentOrUi === 'object') return fileAttachedIndicator();
|
||||||
|
|
||||||
|
// How to interact with components?
|
||||||
|
switch (attachmentOrUi) {
|
||||||
|
case attachmentUiFrameTypes.voiceMailRecorder:
|
||||||
|
// Not too easy, need to attach function to return the audio blob
|
||||||
|
return (
|
||||||
|
<VoiceMailRecorder
|
||||||
|
returnedFileHandler={fileSetter}
|
||||||
|
attachmentOrUi={attachmentOrUi}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
console.log('unhandled attachmentOrUi');
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return attachmentFrame();
|
||||||
|
}
|
||||||
|
|
||||||
|
AttachmentFrame.propTypes = {
|
||||||
|
attachmentOrUi: PropTypes.node.isRequired,
|
||||||
|
fileSetter: PropTypes.func.isRequired,
|
||||||
|
uploadProgressRef: PropTypes.node.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AttachmentFrame;
|
|
@ -23,13 +23,10 @@ import { MessageReply } from '../../molecules/message/Message';
|
||||||
import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
|
import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
|
||||||
import SendIC from '../../../../public/res/ic/outlined/send.svg';
|
import SendIC from '../../../../public/res/ic/outlined/send.svg';
|
||||||
import ShieldIC from '../../../../public/res/ic/outlined/shield.svg';
|
import ShieldIC from '../../../../public/res/ic/outlined/shield.svg';
|
||||||
import VLCIC from '../../../../public/res/ic/outlined/vlc.svg';
|
|
||||||
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 CrossIC from '../../../../public/res/ic/outlined/cross.svg';
|
import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
|
||||||
import { AttachmentTypeSelector, attachmentUiFrameTypes } from './AttachmentTypeSelector';
|
import { AttachmentTypeSelector, attachmentUiFrameTypes } from './AttachmentTypeSelector';
|
||||||
import { VoiceMailRecorder } from './VoiceMailRecorder';
|
import AttachmentFrame from './AttachmentFrame';
|
||||||
|
|
||||||
const CMD_REGEX = /(^\/|:|@)(\S*)$/;
|
const CMD_REGEX = /(^\/|:|@)(\S*)$/;
|
||||||
let isTyping = false;
|
let isTyping = false;
|
||||||
|
@ -298,9 +295,9 @@ function RoomViewInput({
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleAttachmentTypeSelectorReturn = (ret) => {
|
const handleAttachmentTypeSelectorReturn = (ret) => {
|
||||||
console.log(`here we go ${ret}`);
|
|
||||||
switch (ret) {
|
switch (ret) {
|
||||||
case attachmentUiFrameTypes.none:
|
case attachmentUiFrameTypes.none:
|
||||||
|
setAttachmentOrUi(attachmentUiFrameTypes.none);
|
||||||
roomsInput.cancelAttachment(roomId);
|
roomsInput.cancelAttachment(roomId);
|
||||||
break;
|
break;
|
||||||
case attachmentUiFrameTypes.file:
|
case attachmentUiFrameTypes.file:
|
||||||
|
@ -368,53 +365,6 @@ function RoomViewInput({
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function fileAttachedIndicator() {
|
|
||||||
console.log(attachmentOrUi.type);
|
|
||||||
console.log(typeof attachmentOrUi === 'object');
|
|
||||||
|
|
||||||
// If this is not a file object, how can this be reached?
|
|
||||||
if (typeof attachmentOrUi !== 'object') return null;
|
|
||||||
|
|
||||||
const fileType = attachmentOrUi.type.slice(0, attachmentOrUi.type.indexOf('/'));
|
|
||||||
return (
|
|
||||||
<div className="room-attachment">
|
|
||||||
<div className={`room-attachment__preview${fileType !== 'image' ? ' room-attachment__icon' : ''}`}>
|
|
||||||
{fileType === 'image' && <img alt={attachmentOrUi.name} src={URL.createObjectURL(attachmentOrUi)} />}
|
|
||||||
{fileType === 'video' && <RawIcon src={VLCIC} />}
|
|
||||||
{fileType === 'audio' && <RawIcon src={VolumeFullIC} />}
|
|
||||||
{fileType !== 'image' && fileType !== 'video' && fileType !== 'audio' && <RawIcon src={FileIC} />}
|
|
||||||
</div>
|
|
||||||
<div className="room-attachment__info">
|
|
||||||
<Text variant="b1">{attachmentOrUi.name}</Text>
|
|
||||||
<Text variant="b3"><span ref={uploadProgressRef}>{`size: ${bytesToSize(attachmentOrUi.size)}`}</span></Text>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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">
|
||||||
|
@ -440,7 +390,16 @@ function RoomViewInput({
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{ replyTo !== null && attachReply()}
|
{ replyTo !== null && attachReply()}
|
||||||
{ attachmentOrUi !== null && attachmentFrame() }
|
{ attachmentOrUi !== null && (
|
||||||
|
<AttachmentFrame
|
||||||
|
attachmentOrUi={attachmentOrUi}
|
||||||
|
uploadProgressRef={uploadProgressRef}
|
||||||
|
fileSetter={(blob) => {
|
||||||
|
setAttachmentOrUi(blob);
|
||||||
|
roomsInput.setAttachment(roomId, blob);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) }
|
||||||
<form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
|
<form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
|
||||||
{
|
{
|
||||||
renderInputs()
|
renderInputs()
|
||||||
|
|
|
@ -4,16 +4,12 @@ import Text from '../../atoms/text/Text';
|
||||||
import RawIcon from '../../atoms/system-icons/RawIcon';
|
import RawIcon from '../../atoms/system-icons/RawIcon';
|
||||||
import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg';
|
import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg';
|
||||||
|
|
||||||
function VoiceMailRecorder({ returnedFileHandler }) {
|
function VoiceMailRecorder({ returnedFileHandler, attachmentOrUi }) {
|
||||||
let mediaRecorder;
|
let mediaRecorder;
|
||||||
|
|
||||||
const recordVoice = () => {
|
const recordVoice = () => {
|
||||||
console.log('record voice, new recorder');
|
console.log('record voice, new recorder');
|
||||||
// TODO: Check if supported
|
// TODO: Check if supported
|
||||||
// navigator.getUserMedia = navigator.getUserMedia
|
|
||||||
// || navigator.webkitGetUserMedia
|
|
||||||
// || navigator.mozGetUserMedia
|
|
||||||
// || navigator.msGetUserMedia;
|
|
||||||
|
|
||||||
navigator.mediaDevices.getUserMedia({ audio: true })
|
navigator.mediaDevices.getUserMedia({ audio: true })
|
||||||
.then((stream) => {
|
.then((stream) => {
|
||||||
|
@ -33,9 +29,11 @@ function VoiceMailRecorder({ returnedFileHandler }) {
|
||||||
const audioBlob = new Blob(audioChunks, opts);
|
const audioBlob = new Blob(audioChunks, opts);
|
||||||
|
|
||||||
const audioFile = new File([audioBlob], 'voicemail.webm', opts);
|
const audioFile = new File([audioBlob], 'voicemail.webm', opts);
|
||||||
|
console.log(`attachmentOrUi is ${attachmentOrUi}`);
|
||||||
returnedFileHandler(audioFile);
|
returnedFileHandler(audioFile);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Voicemails too long are not nice, lets forbid them!
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
mediaRecorder.stop();
|
mediaRecorder.stop();
|
||||||
}, 5000); // 1 hour 3600000
|
}, 5000); // 1 hour 3600000
|
||||||
|
@ -61,6 +59,7 @@ function VoiceMailRecorder({ returnedFileHandler }) {
|
||||||
|
|
||||||
VoiceMailRecorder.propTypes = {
|
VoiceMailRecorder.propTypes = {
|
||||||
returnedFileHandler: PropTypes.func.isRequired,
|
returnedFileHandler: PropTypes.func.isRequired,
|
||||||
|
attachmentOrUi: PropTypes.node.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
export { VoiceMailRecorder };
|
export { VoiceMailRecorder };
|
||||||
|
|
Loading…
Reference in a new issue