diff options
author | Michael Foiani <sotech117@michaels-mbp-3.devices.brown.edu> | 2022-04-21 16:49:36 -0400 |
---|---|---|
committer | Michael Foiani <sotech117@michaels-mbp-3.devices.brown.edu> | 2022-04-21 16:49:36 -0400 |
commit | 756c06b3fcc889084ad2f68e217887d651f19f54 (patch) | |
tree | 358c6d506e6bcacc01ef78409112c409e11fb81c /src/client/views/nodes/RecordingBox/RecordingView.tsx | |
parent | 0af393318adafa885d66c0fc43ffbf23f91e3c73 (diff) | |
parent | 7d59a4fee343598f4b5a4adde97c3845e051df11 (diff) |
Handle small merge conflict
Diffstat (limited to 'src/client/views/nodes/RecordingBox/RecordingView.tsx')
-rw-r--r-- | src/client/views/nodes/RecordingBox/RecordingView.tsx | 97 |
1 files changed, 53 insertions, 44 deletions
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx index 8c1ab9e2b..fab7bc990 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx @@ -40,7 +40,7 @@ export function RecordingView() { const [finished, setFinished] = useState<Boolean>(false) - + const DEFAULT_MEDIA_CONSTRAINTS = { video: { @@ -57,7 +57,7 @@ export function RecordingView() { useEffect(() => { if (finished) { - let allVideoChunks : any = [] + let allVideoChunks: any = [] console.log(videos) videos.forEach((vid) => { console.log(vid.chunks) @@ -67,7 +67,7 @@ export function RecordingView() { console.log(allVideoChunks) const blob = new Blob(allVideoChunks, { - type: 'video/webm' + type: 'video/webm' }) const blobUrl = URL.createObjectURL(blob) @@ -78,8 +78,17 @@ export function RecordingView() { // clear the recording api const presentation = RecordingApi.finish() RecordingApi.clear() + + // upload data + // const [{ result }] = await Networking.UploadFilesToServer(e.data); + // console.log("Data result", result); + // if (!(result instanceof Error)) { + // this.props.Document[this.fieldKey] = new AudioField(result.accessPaths.agnostic.client); + // } + + // change to one recording box } - + }, [finished]) @@ -162,7 +171,7 @@ export function RecordingView() { // if we have a last portion if (chunks.length > 1) { // append the current portion to the video pieces - setVideos(videos => [...videos, {chunks: chunks, endTime: recordingTimerRef.current}]) + setVideos(videos => [...videos, { chunks: chunks, endTime: recordingTimerRef.current }]) } // reset the temporary chunks @@ -175,7 +184,7 @@ export function RecordingView() { recorder.current.onpause = (event: any) => { // append the current portion to the video pieces console.log(chunks) - setVideos(videos => [...videos, {chunks: chunks, endTime: recordingTimerRef.current}]) + setVideos(videos => [...videos, { chunks: chunks, endTime: recordingTimerRef.current }]) // reset the temporary chunks chunks = [] @@ -211,7 +220,7 @@ export function RecordingView() { } const startOrResume = () => { - console.log('[RecordingView.tsx] startOrResume') + console.log('[RecordingView.tsx] startOrResume') if (!recorder.current || recorder.current.state === "inactive") { record(); const err = RecordingApi.initAndStart() @@ -220,21 +229,21 @@ export function RecordingView() { } } - const playSegment = (idx: number) => { - console.log(idx) - let currentChunks = videos[idx].chunks - console.log(currentChunks) + // const playSegment = (idx: number) => { + // console.log(idx) + // let currentChunks = videos[idx].chunks + // console.log(currentChunks) - const blob = new Blob(currentChunks, { - type: 'video/webm' - }) - const blobUrl = URL.createObjectURL(blob) - console.log(blobUrl) + // const blob = new Blob(currentChunks, { + // type: 'video/webm' + // }) + // const blobUrl = URL.createObjectURL(blob) + // console.log(blobUrl) - videoElementRef.current!.srcObject = null - videoElementRef.current!.src = blobUrl - videoElementRef.current!.muted = false - } + // videoElementRef.current!.srcObject = null + // videoElementRef.current!.src = blobUrl + // videoElementRef.current!.muted = false + // } const clearPrevious = () => { const numVideos = videos.length @@ -265,12 +274,12 @@ export function RecordingView() { const toTwoDigit = (digit: number) => { return String(digit).length == 1 ? "0" + digit : digit } - const minutes = Math.floor(( milliseconds % (1000 * 60 * 60)) / (1000 * 60)); + const minutes = Math.floor((milliseconds % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((milliseconds % (1000 * 60)) / 1000); return toTwoDigit(minutes) + " : " + toTwoDigit(seconds); } - + useEffect(() => { @@ -287,37 +296,37 @@ export function RecordingView() { onTimeUpdate={handleOnTimeUpdate} /> <div className="recording-sign"> - <span className="dot"/> + <span className="dot" /> <p className="timer">{millisecondToMinuteSecond(recordingTimer * 10)}</p> </div> <div className="controls"> - + <div className="controls-inner-container"> <div className="record-button-wrapper"> - {recording ? - <button className="stop-button" onClick={pause}/> : - <button className="record-button" onClick={startOrResume}/> + {recording ? + <button className="stop-button" onClick={pause} /> : + <button className="record-button" onClick={startOrResume} /> } </div> - {!recording && videos.length > 0 ? - - <div className="video-edit-wrapper"> - <IconContext.Provider value={{ color: "grey", className: "video-edit-buttons" }}> - <MdBackspace onClick={clearPrevious}/> - </IconContext.Provider> - <IconContext.Provider value={{ color: "#cc1c08", className: "video-edit-buttons" }}> - <FaCheckCircle onClick={stop}/> - </IconContext.Provider> - </div> - - : <></>} - + {!recording && videos.length > 0 ? + + <div className="video-edit-wrapper"> + <IconContext.Provider value={{ color: "grey", className: "video-edit-buttons" }}> + <MdBackspace onClick={clearPrevious} /> + </IconContext.Provider> + <IconContext.Provider value={{ color: "#cc1c08", className: "video-edit-buttons" }}> + <FaCheckCircle onClick={stop} /> + </IconContext.Provider> + </div> + + : <></>} + </div> - - <ProgressBar - progress={progress} + + <ProgressBar + progress={progress} marks={videos.map((elt) => elt.endTime / MAXTIME * 100)} - playSegment={playSegment} + // playSegment={playSegment} /> {/* <button className="mute-btn" onClick={() => setMuted(!muted)}> |