Added type checks on attachment / attachmentOrUi
This commit is contained in:
parent
c2cda9786b
commit
240d16475f
1 changed files with 24 additions and 18 deletions
|
@ -37,7 +37,7 @@ let cmdCursorPos = null;
|
||||||
function RoomViewInput({
|
function RoomViewInput({
|
||||||
roomId, roomTimeline, viewEvent,
|
roomId, roomTimeline, viewEvent,
|
||||||
}) {
|
}) {
|
||||||
const [attachment, setAttachment] = useState(null);
|
const [attachmentOrUi, setAttachmentOrUi] = useState(null);
|
||||||
const [isMarkdown, setIsMarkdown] = useState(settings.isMarkdown);
|
const [isMarkdown, setIsMarkdown] = useState(settings.isMarkdown);
|
||||||
const [replyTo, setReplyTo] = useState(null);
|
const [replyTo, setReplyTo] = useState(null);
|
||||||
|
|
||||||
|
@ -84,7 +84,7 @@ function RoomViewInput({
|
||||||
}
|
}
|
||||||
function clearAttachment(myRoomId) {
|
function clearAttachment(myRoomId) {
|
||||||
if (roomId !== myRoomId) return;
|
if (roomId !== myRoomId) return;
|
||||||
setAttachment(null);
|
setAttachmentOrUi(null);
|
||||||
inputBaseRef.current.style.backgroundImage = 'unset';
|
inputBaseRef.current.style.backgroundImage = 'unset';
|
||||||
uploadInputRef.current.value = null;
|
uploadInputRef.current.value = null;
|
||||||
}
|
}
|
||||||
|
@ -152,7 +152,7 @@ function RoomViewInput({
|
||||||
if (textAreaRef?.current !== null) {
|
if (textAreaRef?.current !== null) {
|
||||||
isTyping = false;
|
isTyping = false;
|
||||||
textAreaRef.current.value = roomsInput.getMessage(roomId);
|
textAreaRef.current.value = roomsInput.getMessage(roomId);
|
||||||
setAttachment(roomsInput.getAttachment(roomId));
|
setAttachmentOrUi(roomsInput.getAttachment(roomId));
|
||||||
setReplyTo(roomsInput.getReplyTo(roomId));
|
setReplyTo(roomsInput.getReplyTo(roomId));
|
||||||
}
|
}
|
||||||
return () => {
|
return () => {
|
||||||
|
@ -179,12 +179,13 @@ function RoomViewInput({
|
||||||
requestAnimationFrame(() => deactivateCmdAndEmit());
|
requestAnimationFrame(() => deactivateCmdAndEmit());
|
||||||
const msgBody = textAreaRef.current.value;
|
const msgBody = textAreaRef.current.value;
|
||||||
if (roomsInput.isSending(roomId)) return;
|
if (roomsInput.isSending(roomId)) return;
|
||||||
if (msgBody.trim() === '' && attachment === null) return;
|
if (msgBody.trim() === '' && attachmentOrUi === null) return;
|
||||||
sendIsTyping(false);
|
sendIsTyping(false);
|
||||||
|
|
||||||
roomsInput.setMessage(roomId, msgBody);
|
roomsInput.setMessage(roomId, msgBody);
|
||||||
if (attachment !== null) {
|
if (typeof attachmentOrUi === 'string') console.log('input is not FINISHED'); // TODO: remove
|
||||||
roomsInput.setAttachment(roomId, attachment);
|
if (attachmentOrUi !== null && typeof attachmentOrUi === 'object') {
|
||||||
|
roomsInput.setAttachment(roomId, attachmentOrUi);
|
||||||
}
|
}
|
||||||
textAreaRef.current.disabled = true;
|
textAreaRef.current.disabled = true;
|
||||||
textAreaRef.current.style.cursor = 'not-allowed';
|
textAreaRef.current.style.cursor = 'not-allowed';
|
||||||
|
@ -271,8 +272,8 @@ function RoomViewInput({
|
||||||
const item = e.clipboardData.items[i];
|
const item = e.clipboardData.items[i];
|
||||||
if (item.type.indexOf('image') !== -1) {
|
if (item.type.indexOf('image') !== -1) {
|
||||||
const image = item.getAsFile();
|
const image = item.getAsFile();
|
||||||
if (attachment === null) {
|
if (attachmentOrUi === null) {
|
||||||
setAttachment(image);
|
setAttachmentOrUi(image);
|
||||||
if (image !== null) {
|
if (image !== null) {
|
||||||
roomsInput.setAttachment(roomId, image);
|
roomsInput.setAttachment(roomId, image);
|
||||||
return;
|
return;
|
||||||
|
@ -291,7 +292,7 @@ function RoomViewInput({
|
||||||
|
|
||||||
function uploadFileChange(e) {
|
function uploadFileChange(e) {
|
||||||
const file = e.target.files.item(0);
|
const file = e.target.files.item(0);
|
||||||
setAttachment(file);
|
setAttachmentOrUi(file);
|
||||||
if (file !== null) roomsInput.setAttachment(roomId, file);
|
if (file !== null) roomsInput.setAttachment(roomId, file);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -318,7 +319,7 @@ function RoomViewInput({
|
||||||
|
|
||||||
const audioFile = new File([audioBlob], 'voicemail.webm', opts);
|
const audioFile = new File([audioBlob], 'voicemail.webm', opts);
|
||||||
|
|
||||||
setAttachment(audioFile);
|
setAttachmentOrUi(audioFile);
|
||||||
roomsInput.setAttachment(roomId, audioFile);
|
roomsInput.setAttachment(roomId, audioFile);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -357,11 +358,11 @@ function RoomViewInput({
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={`room-input__option-container${attachment === null ? '' : ' room-attachment__option'}`}>
|
<div className={`room-input__option-container${attachmentOrUi === null ? '' : ' room-attachment__option'}`}>
|
||||||
<AttachmentTypeSelector
|
<AttachmentTypeSelector
|
||||||
ref={uploadInputRef}
|
ref={uploadInputRef}
|
||||||
actOnAttaching={handleAttachmentTypeSelectorReturn}
|
actOnAttaching={handleAttachmentTypeSelectorReturn}
|
||||||
alreadyHasAttachment={attachment !== null}
|
alreadyHasAttachment={attachmentOrUi !== null}
|
||||||
/>
|
/>
|
||||||
<input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
|
<input onChange={uploadFileChange} style={{ display: 'none' }} ref={uploadInputRef} type="file" />
|
||||||
{/* <IconButton onClick={handleUploadClick}
|
{/* <IconButton onClick={handleUploadClick}
|
||||||
|
@ -401,19 +402,24 @@ function RoomViewInput({
|
||||||
}
|
}
|
||||||
|
|
||||||
function attachFile() {
|
function attachFile() {
|
||||||
const fileType = attachment.type.slice(0, attachment.type.indexOf('/'));
|
console.log(attachmentOrUi.type);
|
||||||
console.log(attachment.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 (
|
return (
|
||||||
<div className="room-attachment">
|
<div className="room-attachment">
|
||||||
<div className={`room-attachment__preview${fileType !== 'image' ? ' room-attachment__icon' : ''}`}>
|
<div className={`room-attachment__preview${fileType !== 'image' ? ' room-attachment__icon' : ''}`}>
|
||||||
{fileType === 'image' && <img alt={attachment.name} src={URL.createObjectURL(attachment)} />}
|
{fileType === 'image' && <img alt={attachmentOrUi.name} src={URL.createObjectURL(attachmentOrUi)} />}
|
||||||
{fileType === 'video' && <RawIcon src={VLCIC} />}
|
{fileType === 'video' && <RawIcon src={VLCIC} />}
|
||||||
{fileType === 'audio' && <RawIcon src={VolumeFullIC} />}
|
{fileType === 'audio' && <RawIcon src={VolumeFullIC} />}
|
||||||
{fileType !== 'image' && fileType !== 'video' && fileType !== 'audio' && <RawIcon src={FileIC} />}
|
{fileType !== 'image' && fileType !== 'video' && fileType !== 'audio' && <RawIcon src={FileIC} />}
|
||||||
</div>
|
</div>
|
||||||
<div className="room-attachment__info">
|
<div className="room-attachment__info">
|
||||||
<Text variant="b1">{attachment.name}</Text>
|
<Text variant="b1">{attachmentOrUi.name}</Text>
|
||||||
<Text variant="b3"><span ref={uploadProgressRef}>{`size: ${bytesToSize(attachment.size)}`}</span></Text>
|
<Text variant="b3"><span ref={uploadProgressRef}>{`size: ${bytesToSize(attachmentOrUi.size)}`}</span></Text>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
@ -444,7 +450,7 @@ function RoomViewInput({
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{ replyTo !== null && attachReply()}
|
{ replyTo !== null && attachReply()}
|
||||||
{ attachment !== null && attachFile() }
|
{ attachmentOrUi !== null && attachFile() }
|
||||||
<form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
|
<form className="room-input" onSubmit={(e) => { e.preventDefault(); }}>
|
||||||
{
|
{
|
||||||
renderInputs()
|
renderInputs()
|
||||||
|
|
Loading…
Reference in a new issue