michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

better !?

Browse source
This commit is contained in:
C0ffeeCode 2022-01-05 12:37:10 +01:00
parent da09ab1469
commit 62b7074860
4 changed files with 56 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/app/organisms/room/AttachmentFrame.jsx → src/app/organisms/room/AttachmentUis/AttachmentFrame.jsx
View file

@ -1,14 +1,14 @@
/* eslint-disable react/prop-types */ /* eslint-disable react/prop-types */
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { attachmentUiFrameTypes } from './AttachmentTypeSelector'; import { attachmentUiFrameTypes } from '../AttachmentTypeSelector';
import { funnyFunc, VoiceMailRecorder } from './VoiceMailRecorder'; import { VoiceMailRecorder } from './VoiceMailRecorder';
import RawIcon from '../../atoms/system-icons/RawIcon'; import RawIcon from '../../../atoms/system-icons/RawIcon';
import VLCIC from '../../../../public/res/ic/outlined/vlc.svg'; import VLCIC from '../../../../../public/res/ic/outlined/vlc.svg';
import VolumeFullIC from '../../../../public/res/ic/outlined/volume-full.svg'; import VolumeFullIC from '../../../../../public/res/ic/outlined/volume-full.svg';
import FileIC from '../../../../public/res/ic/outlined/file.svg'; import FileIC from '../../../../../public/res/ic/outlined/file.svg';
import Text from '../../atoms/text/Text'; import Text from '../../../atoms/text/Text';
import { bytesToSize } from '../../../util/common'; import { bytesToSize } from '../../../../util/common';
function AttachmentFrame({ function AttachmentFrame({
attachmentOrUi, attachmentOrUi,

65
src/app/organisms/room/VoiceMailRecorder.jsx → src/app/organisms/room/AttachmentUis/VoiceMailRecorder.jsx
View file

@ -1,14 +1,15 @@
import React, { useEffect, useRef } from 'react'; import React from 'react';
import PropTypes, { func } from 'prop-types'; import PropTypes from 'prop-types';
import Text from '../../atoms/text/Text'; 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';
import SendIC from '../../../../public/res/ic/outlined/send.svg'; import ChevronBottomIC from '../../../../../public/res/ic/outlined/chevron-bottom.svg';
import ArrowIC from '../../../../public/res/ic/outlined/leave-arrow.svg'; import ArrowIC from '../../../../../public/res/ic/outlined/leave-arrow.svg';
import PauseIC from '../../../../public/res/ic/outlined/pause.svg'; import PauseIC from '../../../../../public/res/ic/outlined/pause.svg';
import PlayIC from '../../../../public/res/ic/outlined/play.svg'; import PlayIC from '../../../../../public/res/ic/outlined/play.svg';
import IconButton from '../../atoms/button/IconButton'; import IconButton from '../../../atoms/button/IconButton';
import Timer from '../../../util/Timer'; import './VoiceMailRecorder.scss';
// import Timer from '../../../../util/Timer';
let _stream; let _stream;
let _mediaRecorder; let _mediaRecorder;
@ -78,21 +79,24 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
} }
initiateInitiation(); initiateInitiation();
function stopAndSubmit() { function stopAndSubmit(skipSubmission) {
if (_mediaRecorder.state !== 'inactive') _mediaRecorder.stop(); if (_mediaRecorder.state !== 'inactive') _mediaRecorder.stop();
_stream.getTracks().forEach((track) => track.stop()); _stream.getTracks().forEach((track) => track.stop());
setTimeout(() => { if (!skipSubmission) {
_mediaRecorder = null; setTimeout(() => {
_stream = null; _mediaRecorder = null;
_stream = null;
const opts = { type: 'audio/webm' }; const opts = { type: 'audio/webm' };
const audioBlob = new Blob(audioChunks, opts); const audioBlob = new Blob(audioChunks, opts);
console.log('audioBlob', audioBlob); console.log('audioBlob', audioBlob);
const audioFile = new File([audioBlob], 'voicemail.webm', opts); const audioFile = new File([audioBlob], 'voicemail.webm', opts);
fnHowToSubmit(audioFile); fnHowToSubmit(audioFile);
}, 300); // TODO: Fix this hack, stop does not mean dataavailable but its going to happen soon // 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); fnCancel(stopAndSubmit);
fnRequestResult(stopAndSubmit); fnRequestResult(stopAndSubmit);
@ -103,14 +107,17 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
<RawIcon src={VolumeFullIC} /> <RawIcon src={VolumeFullIC} />
</div> </div>
<div className="room-attachment__info"> <div className="room-attachment__info">
<Text variant="b1"> <div>
{state} <Text variant="b1">
</Text> {state}
<Text variant="b3">for some time maybe?</Text> </Text>
<IconButton onClick={pauseRec} src={PauseIC}>Pause</IconButton> <Text variant="b3">for some time maybe?</Text>
<IconButton onClick={startOrResumeRec} src={PlayIC}>Start</IconButton> </div>
<IconButton onClick={restartRec} src={ArrowIC}>Reset</IconButton> {(_mediaRecorder && _mediaRecorder.state === 'recording')
<IconButton onClick={() => stopAndSubmit()} src={SendIC} type="submit">Submit</IconButton> ? (<IconButton onClick={pauseRec} src={PauseIC}>Pause</IconButton>)
: (<IconButton onClick={startOrResumeRec} src={PlayIC}>Start</IconButton>)}
<IconButton onClick={restartRec} src={ArrowIC} tooltip="Start over">Reset</IconButton>
<IconButton onClick={() => stopAndSubmit()} src={ChevronBottomIC} type="Add as attachment">Submit</IconButton>
</div> </div>
</div> </div>
); );

11
src/app/organisms/room/AttachmentUis/VoiceMailRecorder.scss Normal file
View file

@ -0,0 +1,11 @@
@use '../../../partials/flex';
.room-attachment__info {
display: flex;
div {
width: 150px;
max-width: 100%;
// max-width: ;
}
}

3
src/app/organisms/room/RoomViewInput.jsx
View file

@ -26,8 +26,7 @@ import ShieldIC from '../../../../public/res/ic/outlined/shield.svg';
import MarkdownIC from '../../../../public/res/ic/outlined/markdown.svg'; import MarkdownIC from '../../../../public/res/ic/outlined/markdown.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 AttachmentFrame from './AttachmentFrame'; import AttachmentFrame from './AttachmentUis/AttachmentFrame';
import { VoiceMailRecorder } from './VoiceMailRecorder';
const CMD_REGEX = /(^\/|:|@)(\S*)$/; const CMD_REGEX = /(^\/|:|@)(\S*)$/;
let isTyping = false; let isTyping = false;