aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/RecordingBox/RecordingView.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/nodes/RecordingBox/RecordingView.tsx')
-rw-r--r--src/client/views/nodes/RecordingBox/RecordingView.tsx27
1 files changed, 16 insertions, 11 deletions
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx
index 380ac050d..be9f342bb 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -14,7 +14,7 @@ export interface MediaSegment {
videoChunks: any[],
endTime: number,
startTime: number,
- presenation?: Presentation,
+ presentation?: Presentation,
}
interface IRecordingViewProps {
@@ -60,13 +60,14 @@ export function RecordingView(props: IRecordingViewProps) {
}
}
- useEffect(() => console.info('progess', progress), [progress])
+ // useEffect(() => console.info('progress', progress), [progress])
useEffect(() => {
if (finished) {
// make the total presentation that'll match the concatted video
- const concatPres = trackScreen ? RecordingApi.Instance.concatPresentations(videos.map(v => v.presenation as Presentation)) : undefined;
+ const concatPres = RecordingApi.Instance.concatPresentations(videos.map(v => v.presentation as Presentation));
+ console.log('concatPres', concatPres);
// this async function uses the server to create the concatted video and then sets the result to it's accessPaths
(async () => {
@@ -91,7 +92,8 @@ export function RecordingView(props: IRecordingViewProps) {
// check if the browser supports media devices on first load
useEffect(() => { if (!navigator.mediaDevices) alert('This browser does not support getUserMedia.'); }, [])
- useEffect(() => {
+ useEffect(() => {
+ console.log('recording useEffect', recording)
let interval: any = null;
if (recording) {
interval = setInterval(() => {
@@ -136,23 +138,26 @@ export function RecordingView(props: IRecordingViewProps) {
videoRecorder.current.onstart = (event: any) => {
setRecording(true);
+ // trackScreen && RecordingApi.Instance.start();
trackScreen && RecordingApi.Instance.start();
}
videoRecorder.current.onstop = () => {
- RecordingApi.Instance.stop();
+ // RecordingApi.Instance.stop();
// if we have a last portion
- if (videoChunks.length > 1) {
+ if (videoChunks.length > 1) {
+ const presentation = RecordingApi.Instance.yieldPresentation().next().value || undefined
+ console.log('presenation yield', JSON.parse(JSON.stringify(presentation)))
// append the current portion to the video pieces
setVideos(videos => [...videos, {
videoChunks: videoChunks,
endTime: recordingTimerRef.current,
startTime: videos?.lastElement()?.endTime || 0,
// RecordingApi.stop() will return undefined if no track screen
- presenation: RecordingApi.Instance.getPresentation()
+ presentation
}])
// now that we got the presentation data, we can clear for the next segment to be recorded
- RecordingApi.Instance.clear();
+ // RecordingApi.Instance.clear();
}
// reset the temporary chunks
@@ -193,7 +198,7 @@ export function RecordingView(props: IRecordingViewProps) {
setupMoveUpEvents({}, e, returnTrue, returnFalse, e => {
if (!videoRecorder.current || videoRecorder.current.state === "inactive") {
record();
- // trackScreen && RecordingApi.Instance.start();
+ // trackScreen &&
}
return true; // cancels propagation to documentView to avoid selecting it.
}, false, false);
@@ -204,7 +209,7 @@ export function RecordingView(props: IRecordingViewProps) {
setDoUndo(prev => !prev);
}
- const handleOnTimeUpdate = () => playing && setVideoProgressHelper(videoElementRef.current!.currentTime);
+ const handleOnTimeUpdate = () => { playing && setVideoProgressHelper(videoElementRef.current!.currentTime); };
const millisecondToMinuteSecond = (milliseconds: number) => {
const toTwoDigit = (digit: number) => {
@@ -221,7 +226,7 @@ export function RecordingView(props: IRecordingViewProps) {
<video id={`video-${props.id}`}
autoPlay
muted
- onTimeUpdate={handleOnTimeUpdate}
+ onTimeUpdate={() => handleOnTimeUpdate()}
ref={videoElementRef}
/>
<div className="recording-sign">