diff --git a/src/app/organisms/room/AttachmentFrame.jsx b/src/app/organisms/room/AttachmentUis/AttachmentFrame.jsx similarity index 84% rename from src/app/organisms/room/AttachmentFrame.jsx rename to src/app/organisms/room/AttachmentUis/AttachmentFrame.jsx index ba79f8ba..348106e7 100644 --- a/src/app/organisms/room/AttachmentFrame.jsx +++ b/src/app/organisms/room/AttachmentUis/AttachmentFrame.jsx @@ -1,14 +1,14 @@ /* eslint-disable react/prop-types */ import React from 'react'; import PropTypes from 'prop-types'; -import { attachmentUiFrameTypes } from './AttachmentTypeSelector'; -import { funnyFunc, 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'; +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, diff --git a/src/app/organisms/room/VoiceMailRecorder.jsx b/src/app/organisms/room/AttachmentUis/VoiceMailRecorder.jsx similarity index 55% rename from src/app/organisms/room/VoiceMailRecorder.jsx rename to src/app/organisms/room/AttachmentUis/VoiceMailRecorder.jsx index 63c48f49..bb5fc08f 100644 --- a/src/app/organisms/room/VoiceMailRecorder.jsx +++ b/src/app/organisms/room/AttachmentUis/VoiceMailRecorder.jsx @@ -1,14 +1,15 @@ -import React, { useEffect, useRef } from 'react'; -import PropTypes, { func } from 'prop-types'; -import Text from '../../atoms/text/Text'; -import RawIcon from '../../atoms/system-icons/RawIcon'; -import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg'; -import SendIC from '../../../../public/res/ic/outlined/send.svg'; -import ArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg'; -import PauseIC from '../../../../public/res/ic/outlined/pause.svg'; -import PlayIC from '../../../../public/res/ic/outlined/play.svg'; -import IconButton from '../../atoms/button/IconButton'; -import Timer from '../../../util/Timer'; +import React from 'react'; +import PropTypes from 'prop-types'; +import Text from '../../../atoms/text/Text'; +import RawIcon from '../../../atoms/system-icons/RawIcon'; +import VolumeFullIC from '../../../../../public/res/ic/outlined/volume-full.svg'; +import ChevronBottomIC from '../../../../../public/res/ic/outlined/chevron-bottom.svg'; +import ArrowIC from '../../../../../public/res/ic/outlined/leave-arrow.svg'; +import PauseIC from '../../../../../public/res/ic/outlined/pause.svg'; +import PlayIC from '../../../../../public/res/ic/outlined/play.svg'; +import IconButton from '../../../atoms/button/IconButton'; +import './VoiceMailRecorder.scss'; +// import Timer from '../../../../util/Timer'; let _stream; let _mediaRecorder; @@ -78,21 +79,24 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) { } initiateInitiation(); - function stopAndSubmit() { + function stopAndSubmit(skipSubmission) { if (_mediaRecorder.state !== 'inactive') _mediaRecorder.stop(); _stream.getTracks().forEach((track) => track.stop()); - setTimeout(() => { - _mediaRecorder = null; - _stream = null; + if (!skipSubmission) { + setTimeout(() => { + _mediaRecorder = null; + _stream = null; - const opts = { type: 'audio/webm' }; - const audioBlob = new Blob(audioChunks, opts); - console.log('audioBlob', audioBlob); - const audioFile = new File([audioBlob], 'voicemail.webm', opts); - fnHowToSubmit(audioFile); - }, 300); // TODO: Fix this hack, stop does not mean dataavailable but its going to happen soon + const opts = { type: 'audio/webm' }; + const audioBlob = new Blob(audioChunks, opts); + console.log('audioBlob', audioBlob); + const audioFile = new File([audioBlob], 'voicemail.webm', opts); + fnHowToSubmit(audioFile); + // BUG: This will cause the recorder to add the file although it was to be cancelled + }, 300); // TODO: Fix this hack, stop does not mean dataavailable but its going to happen soon + } } fnCancel(stopAndSubmit); fnRequestResult(stopAndSubmit); @@ -103,14 +107,17 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
- - {state} - - for some time maybe? - Pause - Start - Reset - stopAndSubmit()} src={SendIC} type="submit">Submit +
+ + {state} + + for some time maybe? +
+ {(_mediaRecorder && _mediaRecorder.state === 'recording') + ? (Pause) + : (Start)} + Reset + stopAndSubmit()} src={ChevronBottomIC} type="Add as attachment">Submit
); diff --git a/src/app/organisms/room/AttachmentUis/VoiceMailRecorder.scss b/src/app/organisms/room/AttachmentUis/VoiceMailRecorder.scss new file mode 100644 index 00000000..295c315c --- /dev/null +++ b/src/app/organisms/room/AttachmentUis/VoiceMailRecorder.scss @@ -0,0 +1,11 @@ +@use '../../../partials/flex'; + +.room-attachment__info { + display: flex; + + div { + width: 150px; + max-width: 100%; + // max-width: ; + } +} \ No newline at end of file diff --git a/src/app/organisms/room/RoomViewInput.jsx b/src/app/organisms/room/RoomViewInput.jsx index b42f6f1f..a9dade7c 100644 --- a/src/app/organisms/room/RoomViewInput.jsx +++ b/src/app/organisms/room/RoomViewInput.jsx @@ -26,8 +26,7 @@ import ShieldIC from '../../../../public/res/ic/outlined/shield.svg'; import MarkdownIC from '../../../../public/res/ic/outlined/markdown.svg'; import CrossIC from '../../../../public/res/ic/outlined/cross.svg'; import { AttachmentTypeSelector, attachmentUiFrameTypes } from './AttachmentTypeSelector'; -import AttachmentFrame from './AttachmentFrame'; -import { VoiceMailRecorder } from './VoiceMailRecorder'; +import AttachmentFrame from './AttachmentUis/AttachmentFrame'; const CMD_REGEX = /(^\/|:|@)(\S*)$/; let isTyping = false;