extract AttachmentFrame out of RoomViewInput

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 (
+      <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;

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 (
-      <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() {
     return (
       <div className="room-reply">
@@ -440,7 +390,16 @@ function RoomViewInput({
   return (
     <>
       { 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(); }}>
         {
           renderInputs()

src/app/organisms/room/VoiceMailRecorder.jsx

@@ -4,16 +4,12 @@ import Text from '../../atoms/text/Text';
 import RawIcon from '../../atoms/system-icons/RawIcon';
 import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg';
 
-function VoiceMailRecorder({ returnedFileHandler }) {
+function VoiceMailRecorder({ returnedFileHandler, attachmentOrUi }) {
   let mediaRecorder;
 
   const recordVoice = () => {
     console.log('record voice, new recorder');
     // TODO: Check if supported
-    // navigator.getUserMedia = navigator.getUserMedia
-    //                        || navigator.webkitGetUserMedia
-    //                        || navigator.mozGetUserMedia
-    //                        || navigator.msGetUserMedia;
 
     navigator.mediaDevices.getUserMedia({ audio: true })
       .then((stream) => {
@@ -33,9 +29,11 @@ function VoiceMailRecorder({ returnedFileHandler }) {
           const audioBlob = new Blob(audioChunks, opts);
 
           const audioFile = new File([audioBlob], 'voicemail.webm', opts);
+          console.log(`attachmentOrUi is ${attachmentOrUi}`);
           returnedFileHandler(audioFile);
         });
 
+        // Voicemails too long are not nice, lets forbid them!
         setTimeout(() => {
           mediaRecorder.stop();
         }, 5000); // 1 hour 3600000
@@ -61,6 +59,7 @@ function VoiceMailRecorder({ returnedFileHandler }) {
 
 VoiceMailRecorder.propTypes = {
   returnedFileHandler: PropTypes.func.isRequired,
+  attachmentOrUi: PropTypes.node.isRequired,
 };
 
 export { VoiceMailRecorder };