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) => {
|
const fnRequestResult = (func) => {
|
||||||
requestResult = func;
|
requestResult = func;
|
||||||
};
|
};
|
||||||
let howToSubmit;
|
let submission;
|
||||||
const fnHowToSubmit = (func) => {
|
const fnHowToSubmit = (func) => {
|
||||||
howToSubmit = func;
|
submission = func;
|
||||||
|
console.log(submission);
|
||||||
};
|
};
|
||||||
|
|
||||||
// If there already is an attachment, show it
|
// If there already is an attachment, show it
|
||||||
|
|
|
@ -1,68 +1,83 @@
|
||||||
import React, { useRef } from 'react';
|
import React, { useEffect, useRef } from 'react';
|
||||||
import PropTypes, { func } from 'prop-types';
|
import PropTypes, { func } 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 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 IconButton from '../../atoms/button/IconButton';
|
||||||
|
import Timer from '../../../util/Timer';
|
||||||
|
|
||||||
let _stream;
|
let _stream;
|
||||||
let _mediaRecorder;
|
let _mediaRecorder;
|
||||||
const audioChunks = [];
|
const audioChunks = [];
|
||||||
|
|
||||||
console.log('record voice, new recorder');
|
|
||||||
// TODO: Check if supported
|
// TODO: Check if supported
|
||||||
|
|
||||||
navigator.mediaDevices.getUserMedia({ audio: true })
|
async function init() {
|
||||||
.then((stream) => {
|
if (_mediaRecorder) return;
|
||||||
_stream = stream;
|
|
||||||
_mediaRecorder = new MediaRecorder(_stream);
|
|
||||||
|
|
||||||
|
console.log('record voice, new recorder');
|
||||||
|
_stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
||||||
|
|
||||||
|
_mediaRecorder = new MediaRecorder(_stream);
|
||||||
|
|
||||||
|
// Remove previous recording
|
||||||
|
audioChunks.length = 0;
|
||||||
|
|
||||||
|
_mediaRecorder.ondataavailable = (event) => {
|
||||||
|
audioChunks.push(event.data);
|
||||||
|
console.log('ondataavailable');
|
||||||
|
};
|
||||||
|
_mediaRecorder.onerror = (error) => {
|
||||||
|
console.log(error);
|
||||||
|
_mediaRecorder.stop();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function pauseRec() {
|
||||||
|
if (_mediaRecorder.state === 'recording') {
|
||||||
|
_mediaRecorder.pause();
|
||||||
|
console.log('pause');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function startOrResumeRec() {
|
||||||
|
if (_mediaRecorder.state === 'paused') {
|
||||||
|
_mediaRecorder.resume();
|
||||||
|
console.log('resume');
|
||||||
|
} else if (_mediaRecorder.state === 'inactive') {
|
||||||
|
audioChunks.length = 0;
|
||||||
_mediaRecorder.start();
|
_mediaRecorder.start();
|
||||||
|
console.log('start');
|
||||||
_mediaRecorder.ondataavailable = (event) => audioChunks.push(event.data);
|
}
|
||||||
_mediaRecorder.onerror = (error) => {
|
}
|
||||||
console.log(error);
|
function restartRec() {
|
||||||
_mediaRecorder.stop();
|
if (_mediaRecorder.state !== 'inactive') _mediaRecorder.stop();
|
||||||
};
|
audioChunks.length = 0;
|
||||||
})
|
startOrResumeRec();
|
||||||
.catch(console.log);
|
}
|
||||||
|
|
||||||
// TODO: Handle turning off the recorder to remove the browser indicator
|
// TODO: Handle turning off the recorder to remove the browser indicator
|
||||||
function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
|
function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
|
||||||
const [state, setState] = React.useState('unknown');
|
const [state, setState] = React.useState('unknown');
|
||||||
|
const [duration, setDuraction] = React.useState('unknown');
|
||||||
|
|
||||||
while (!_mediaRecorder) {
|
async function initiateInitiation() {
|
||||||
// Blocking
|
if (!_mediaRecorder) {
|
||||||
}
|
await init();
|
||||||
|
startOrResumeRec();
|
||||||
_mediaRecorder.onstop = () => setState('stopped');
|
|
||||||
_mediaRecorder.onstart = () => setState('started');
|
|
||||||
_mediaRecorder.onpause = () => setState('paused');
|
|
||||||
_mediaRecorder.onresume = () => setState('resumed');
|
|
||||||
|
|
||||||
function pauseRec() {
|
|
||||||
if (_mediaRecorder.state === 'recording') {
|
|
||||||
_mediaRecorder.pause();
|
|
||||||
console.log('pause');
|
|
||||||
}
|
}
|
||||||
|
_mediaRecorder.onstop = () => setState('stopped');
|
||||||
|
_mediaRecorder.onstart = () => setState('started');
|
||||||
|
_mediaRecorder.onpause = () => setState('paused');
|
||||||
|
_mediaRecorder.onresume = () => setState('resumed');
|
||||||
}
|
}
|
||||||
function startOrResumeRec() {
|
initiateInitiation();
|
||||||
if (_mediaRecorder.state === 'paused') {
|
|
||||||
_mediaRecorder.resume();
|
|
||||||
console.log('resume');
|
|
||||||
} else if (_mediaRecorder.state === 'inactive') {
|
|
||||||
audioChunks.length = 0;
|
|
||||||
_mediaRecorder.start();
|
|
||||||
console.log('start');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function restartRec() {
|
|
||||||
_mediaRecorder.stop();
|
|
||||||
startOrResumeRec();
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopAndSubmit() {
|
function stopAndSubmit() {
|
||||||
_mediaRecorder.stop();
|
if (_mediaRecorder.state !== 'inactive') _mediaRecorder.stop();
|
||||||
|
|
||||||
_stream.getTracks().forEach((track) => track.stop());
|
_stream.getTracks().forEach((track) => track.stop());
|
||||||
|
|
||||||
|
@ -73,6 +88,7 @@ function VoiceMailRecorder({ fnCancel, fnRequestResult, fnHowToSubmit }) {
|
||||||
fnHowToSubmit(audioFile);
|
fnHowToSubmit(audioFile);
|
||||||
}
|
}
|
||||||
fnCancel(stopAndSubmit);
|
fnCancel(stopAndSubmit);
|
||||||
|
fnRequestResult(stopAndSubmit);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="room-attachment">
|
<div className="room-attachment">
|
||||||
|
@ -80,13 +96,15 @@ 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">Recording...{state}</Text>
|
<Text variant="b1">
|
||||||
<Text variant="b3">{`for: ${'some time '}`}</Text>
|
Recording...
|
||||||
<button onClick={pauseRec} type="button">Pause</button>
|
{state}
|
||||||
<button onClick={startOrResumeRec} type="button">Start</button>
|
</Text>
|
||||||
<button onClick={startOrResumeRec} type="button">Stop</button>
|
<Text variant="b3">{`for: ${duration}`}</Text>
|
||||||
<button onClick={restartRec} type="button">Restart</button>
|
<IconButton onClick={pauseRec} src={PauseIC}>Pause</IconButton>
|
||||||
<button onClick={fnHowToSubmit(stopAndSubmit)} type="submit">Submit</button>
|
<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>
|
||||||
</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