feat: styling + play entire video after finish

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 15f8c8626..905f87a1a 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.tsx
+++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx
@@ -38,7 +38,7 @@ export function RecordingView() {
 
       const [finished, setFinished] = useState<Boolean>(false)
 
-      
+
 
       const DEFAULT_MEDIA_CONSTRAINTS = {
             video: {
@@ -55,7 +55,7 @@ export function RecordingView() {
       useEffect(() => {
 
             if (finished) {
-                  let allVideoChunks : any = []
+                  let allVideoChunks: any = []
                   console.log(videos)
                   videos.forEach((vid) => {
                         console.log(vid.chunks)
@@ -65,15 +65,24 @@ export function RecordingView() {
                   console.log(allVideoChunks)
 
                   const blob = new Blob(allVideoChunks, {
-                              type: 'video/webm'
+                        type: 'video/webm'
                   })
                   const blobUrl = URL.createObjectURL(blob)
 
                   videoElementRef.current!.srcObject = null
                   videoElementRef.current!.src = blobUrl
                   videoElementRef.current!.muted = false
+
+                  // 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])
 
@@ -156,7 +165,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
@@ -169,7 +178,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 = []
@@ -204,7 +213,7 @@ export function RecordingView() {
       }
 
       const startOrResume = () => {
-          console.log('[RecordingView.tsx] startOrResume')
+            console.log('[RecordingView.tsx] startOrResume')
             if (!recorder.current || recorder.current.state === "inactive") {
                   record();
             } else if (recorder.current.state === "paused") {
@@ -212,21 +221,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
@@ -257,12 +266,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(() => {
@@ -279,37 +288,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)}>