works or something like that disk 2
This commit is contained in:
parent
5e97ce6f83
commit
0bebb60f19
3 changed files with 96 additions and 51 deletions
|
@ -48,9 +48,10 @@ function AttachmentFrame({
|
|||
const fnRequestResult = (func) => {
|
||||
requestResult = func;
|
||||
};
|
||||
let howToSubmit;
|
||||
let submission;
|
||||
const fnHowToSubmit = (func) => {
|
||||
howToSubmit = func;
|
||||
submission = func;
|
||||
console.log(submission);
|
||||
};
|
||||
|
||||
// If there already is an attachment, show it
|
||||
|
|
|
@ -1,52 +1,49 @@
|
|||
import React, { useRef } from 'react';
|
||||
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';
|
||||
|
||||
let _stream;
|
||||
let _mediaRecorder;
|
||||
const audioChunks = [];
|
||||
|
||||
console.log('record voice, new recorder');
|
||||
// TODO: Check if supported
|
||||
|
||||
navigator.mediaDevices.getUserMedia({ audio: true })
|
||||
.then((stream) => {
|
||||
_stream = stream;
|
||||
async function init() {
|
||||
if (_mediaRecorder) return;
|
||||
|
||||
console.log('record voice, new recorder');
|
||||
_stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||
|
||||
_mediaRecorder = new MediaRecorder(_stream);
|
||||
|
||||
_mediaRecorder.start();
|
||||
// Remove previous recording
|
||||
audioChunks.length = 0;
|
||||
|
||||
_mediaRecorder.ondataavailable = (event) => audioChunks.push(event.data);
|
||||
_mediaRecorder.ondataavailable = (event) => {
|
||||
audioChunks.push(event.data);
|
||||
console.log('ondataavailable');
|
||||
};
|
||||
_mediaRecorder.onerror = (error) => {
|
||||
console.log(error);
|
||||
_mediaRecorder.stop();
|
||||
};
|
||||
})
|
||||
.catch(console.log);
|
||||
}
|
||||
|
||||
// TODO: Handle turning off the recorder to remove the browser indicator
|
||||
function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
|
||||
const [state, setState] = React.useState('unknown');
|
||||
|
||||
while (!_mediaRecorder) {
|
||||
// Blocking
|
||||
}
|
||||
|
||||
_mediaRecorder.onstop = () => setState('stopped');
|
||||
_mediaRecorder.onstart = () => setState('started');
|
||||
_mediaRecorder.onpause = () => setState('paused');
|
||||
_mediaRecorder.onresume = () => setState('resumed');
|
||||
|
||||
function pauseRec() {
|
||||
function pauseRec() {
|
||||
if (_mediaRecorder.state === 'recording') {
|
||||
_mediaRecorder.pause();
|
||||
console.log('pause');
|
||||
}
|
||||
}
|
||||
function startOrResumeRec() {
|
||||
}
|
||||
function startOrResumeRec() {
|
||||
if (_mediaRecorder.state === 'paused') {
|
||||
_mediaRecorder.resume();
|
||||
console.log('resume');
|
||||
|
@ -55,14 +52,32 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
|
|||
_mediaRecorder.start();
|
||||
console.log('start');
|
||||
}
|
||||
}
|
||||
function restartRec() {
|
||||
_mediaRecorder.stop();
|
||||
}
|
||||
function restartRec() {
|
||||
if (_mediaRecorder.state !== 'inactive') _mediaRecorder.stop();
|
||||
audioChunks.length = 0;
|
||||
startOrResumeRec();
|
||||
}
|
||||
|
||||
// TODO: Handle turning off the recorder to remove the browser indicator
|
||||
function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
|
||||
const [state, setState] = React.useState('unknown');
|
||||
const [duration, setDuraction] = React.useState('unknown');
|
||||
|
||||
async function initiateInitiation() {
|
||||
if (!_mediaRecorder) {
|
||||
await init();
|
||||
startOrResumeRec();
|
||||
}
|
||||
_mediaRecorder.onstop = () => setState('stopped');
|
||||
_mediaRecorder.onstart = () => setState('started');
|
||||
_mediaRecorder.onpause = () => setState('paused');
|
||||
_mediaRecorder.onresume = () => setState('resumed');
|
||||
}
|
||||
initiateInitiation();
|
||||
|
||||
function stopAndSubmit() {
|
||||
_mediaRecorder.stop();
|
||||
if (_mediaRecorder.state !== 'inactive') _mediaRecorder.stop();
|
||||
|
||||
_stream.getTracks().forEach((track) => track.stop());
|
||||
|
||||
|
@ -73,6 +88,7 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
|
|||
fnHowToSubmit(audioFile);
|
||||
}
|
||||
fnCancel(stopAndSubmit);
|
||||
fnRequestResult(stopAndSubmit);
|
||||
|
||||
return (
|
||||
<div className="room-attachment">
|
||||
|
@ -80,13 +96,15 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
|
|||
<RawIcon src={VolumeFullIC} />
|
||||
</div>
|
||||
<div className="room-attachment__info">
|
||||
<Text variant="b1">Recording...{state}</Text>
|
||||
<Text variant="b3">{`for: ${'some time '}`}</Text>
|
||||
<button onClick={pauseRec} type="button">Pause</button>
|
||||
<button onClick={startOrResumeRec} type="button">Start</button>
|
||||
<button onClick={startOrResumeRec} type="button">Stop</button>
|
||||
<button onClick={restartRec} type="button">Restart</button>
|
||||
<button onClick={fnHowToSubmit(stopAndSubmit)} type="submit">Submit</button>
|
||||
<Text variant="b1">
|
||||
Recording...
|
||||
{state}
|
||||
</Text>
|
||||
<Text variant="b3">{`for: ${duration}`}</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>
|
||||
</div>
|
||||
);
|
||||
|
|
26
src/util/Timer.js
Normal file
26
src/util/Timer.js
Normal file
|
@ -0,0 +1,26 @@
|
|||
class Timer {
|
||||
constructor() {
|
||||
this.savedTime = 0;
|
||||
this.timeStarted = new Date().getTime();
|
||||
}
|
||||
|
||||
esume() {
|
||||
this.timeStarted = new Date().getTime();
|
||||
}
|
||||
|
||||
pause() {
|
||||
this.savedTime += this.timeStarted - new Date().getTime();
|
||||
this.timeStarted = null;
|
||||
}
|
||||
|
||||
get gett() {
|
||||
return this.savedTime + (this.timeStarted - new Date().getTime());
|
||||
}
|
||||
|
||||
stop() {
|
||||
this.pause();
|
||||
return this.savedTime;
|
||||
}
|
||||
}
|
||||
|
||||
export default Timer;
|
Loading…
Reference in a new issue