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 */
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,

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 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 }) {
<RawIcon src={VolumeFullIC} />
</div>
<div className="room-attachment__info">
<Text variant="b1">
{state}
</Text>
<Text variant="b3">for some time maybe?</Text>
<IconButton onClick={pauseRec} src={PauseIC}>Pause</IconButton>
<IconButton onClick={startOrResumeRec} src={PlayIC}>Start</IconButton>
<IconButton onClick={restartRec} src={ArrowIC}>Reset</IconButton>
<IconButton onClick={() => stopAndSubmit()} src={SendIC} type="submit">Submit</IconButton>
<div>
<Text variant="b1">
{state}
</Text>
<Text variant="b3">for some time maybe?</Text>
</div>
{(_mediaRecorder && _mediaRecorder.state === 'recording')
? (<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>
);

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