diff --git a/src/app/organisms/room/AttachmentFrame.jsx b/src/app/organisms/room/AttachmentFrame.jsx
new file mode 100644
index 00000000..7708736a
--- /dev/null
+++ b/src/app/organisms/room/AttachmentFrame.jsx
@@ -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 (
+
+
+ {fileType === 'image' &&
}
+ {fileType === 'video' &&
}
+ {fileType === 'audio' &&
}
+ {fileType !== 'image' && fileType !== 'video' && fileType !== 'audio' &&
}
+
+
+ {attachmentOrUi.name}
+ {`size: ${bytesToSize(attachmentOrUi.size)}`}
+
+
+ );
+ }
+
+ 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 (
+
+ );
+ 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;
diff --git a/src/app/organisms/room/RoomViewInput.jsx b/src/app/organisms/room/RoomViewInput.jsx
index cd5450ab..5f28e8be 100644
--- a/src/app/organisms/room/RoomViewInput.jsx
+++ b/src/app/organisms/room/RoomViewInput.jsx
@@ -23,13 +23,10 @@ import { MessageReply } from '../../molecules/message/Message';
import EmojiIC from '../../../../public/res/ic/outlined/emoji.svg';
import SendIC from '../../../../public/res/ic/outlined/send.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 FileIC from '../../../../public/res/ic/outlined/file.svg';
import CrossIC from '../../../../public/res/ic/outlined/cross.svg';
import { AttachmentTypeSelector, attachmentUiFrameTypes } from './AttachmentTypeSelector';
-import { VoiceMailRecorder } from './VoiceMailRecorder';
+import AttachmentFrame from './AttachmentFrame';
const CMD_REGEX = /(^\/|:|@)(\S*)$/;
let isTyping = false;
@@ -298,9 +295,9 @@ function RoomViewInput({
}
const handleAttachmentTypeSelectorReturn = (ret) => {
- console.log(`here we go ${ret}`);
switch (ret) {
case attachmentUiFrameTypes.none:
+ setAttachmentOrUi(attachmentUiFrameTypes.none);
roomsInput.cancelAttachment(roomId);
break;
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 (
-
-
- {fileType === 'image' &&
}
- {fileType === 'video' &&
}
- {fileType === 'audio' &&
}
- {fileType !== 'image' && fileType !== 'video' && fileType !== 'audio' &&
}
-
-
- {attachmentOrUi.name}
- {`size: ${bytesToSize(attachmentOrUi.size)}`}
-
-
- );
- }
-
- 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 (
@@ -440,7 +390,16 @@ function RoomViewInput({
return (
<>
{ replyTo !== null && attachReply()}
- { attachmentOrUi !== null && attachmentFrame() }
+ { attachmentOrUi !== null && (
+
{
+ setAttachmentOrUi(blob);
+ roomsInput.setAttachment(roomId, blob);
+ }}
+ />
+ ) }