feat: styling + play entire video after finish

3 files changed, 222 insertions, 233 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
index da5fa2b00..82d5e1f04 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx
@@ -5,42 +5,41 @@ import "./ProgressBar.scss"
 interface ProgressBarProps {
       progress: number,
       marks: number[],
-      playSegment: (idx: number) => void
 }
 
 export function ProgressBar(props: ProgressBarProps) {
 
-      const handleClick = (e: React.MouseEvent) => {
-            let progressbar = document.getElementById('progressbar')!
-            let bounds = progressbar!.getBoundingClientRect();
-            let x = e.clientX - bounds.left;
-            let percent = x / progressbar.clientWidth * 100
-            
-            for (let i = 0; i < props.marks.length; i++) {
-                  let start = i == 0 ? 0 : props.marks[i-1];
-                  if (percent > start && percent < props.marks[i]) {
-                        props.playSegment(i)
-                        // console.log(i)
-                        // console.log(percent)
-                        // console.log(props.marks[i])
-                        break
-                  }
-            }
-      }
+      // const handleClick = (e: React.MouseEvent) => {
+      //       let progressbar = document.getElementById('progressbar')!
+      //       let bounds = progressbar!.getBoundingClientRect();
+      //       let x = e.clientX - bounds.left;
+      //       let percent = x / progressbar.clientWidth * 100
 
-      return(
+      //       for (let i = 0; i < props.marks.length; i++) {
+      //             let start = i == 0 ? 0 : props.marks[i-1];
+      //             if (percent > start && percent < props.marks[i]) {
+      //                   props.playSegment(i)
+      //                   // console.log(i)
+      //                   // console.log(percent)
+      //                   // console.log(props.marks[i])
+      //                   break
+      //             }
+      //       }
+      // }
+
+      return (
             <div className="progressbar" id="progressbar">
-                  <div 
+                  <div
                         className="progressbar done"
                         style={{ width: `${props.progress}%` }}
-                        onClick={handleClick}
+                  // onClick={handleClick}
                   ></div>
                   {props.marks.map((mark) => {
-                        return <div 
-                                    className="progressbar mark"
-                                    style={{ width: `${mark}%` }}
-                              ></div>
+                        return <div
+                              className="progressbar mark"
+                              style={{ width: `${mark}%` }}
+                        ></div>
                   })}
-          </div>
+            </div>
       )
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/RecordingBox/RecordingView.scss b/src/client/views/nodes/RecordingBox/RecordingView.scss
index 2eaf5468d..e4d971d51 100644
--- a/src/client/views/nodes/RecordingBox/RecordingView.scss
+++ b/src/client/views/nodes/RecordingBox/RecordingView.scss
@@ -1,207 +1,188 @@
 video {
-  flex: 100%;
-  width: 100%;
-  min-height: 400px;
-  height: auto;
-  display: block;
-  background-color: black;  
+      flex: 100%;
+      width: 100%;
+      min-height: 400px;
+      height: auto;
+      display: block;
+      background-color: black;
 }
 
-button { margin: 0 .5rem }
+button {
+      margin: 0 .5rem
+}
 
 .recording-container {
-  height: 100%;
-  width: 100%;
-  display: flex;
+      height: 100%;
+      width: 100%;
+      display: flex;
 }
 
 .video-wrapper {
-  max-width: 600px;
-  max-width: 700px;
-  position: relative;
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-  border-radius: 10px;
+      max-width: 600px;
+      max-width: 700px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      overflow: hidden;
+      border-radius: 10px;
 }
 
 .video-wrapper:hover .controls {
-  bottom: 30px;
-  transform: translateY(0%);
-  opacity: 100%;
+      bottom: 30px;
+      transform: translateY(0%);
+      opacity: 100%;
 }
 
 .controls {
-  display: flex;
-  align-items: center;
-  justify-content: space-evenly;
-  position: absolute;
-  padding: 14px;
-  width: 100%;
-  max-width: 500px;
-  flex-wrap: wrap;
-  background: rgba(255, 255, 255, 0.25);
-  box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.1);
-  backdrop-filter: blur(4px);
-  border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  // transform: translateY(150%);
-  transition: all 0.3s ease-in-out;
-  // opacity: 0%;
-  bottom: 30px;
-  // bottom: -150px;
+      display: flex;
+      align-items: center;
+      justify-content: space-evenly;
+      position: absolute;
+      padding: 14px;
+      width: 100%;
+      max-width: 500px;
+      max-height: 20%;
+      flex-wrap: wrap;
+      background: rgba(255, 255, 255, 0.25);
+      box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.1);
+      backdrop-filter: blur(4px);
+      border-radius: 10px;
+      border: 1px solid rgba(255, 255, 255, 0.18);
+      // transform: translateY(150%);
+      transition: all 0.3s ease-in-out;
+      // opacity: 0%;
+      bottom: 30px;
+      // bottom: -150px;
 }
 
 .actions button {
-  background: none;
-  border: none;
-  outline: none;
-  cursor: pointer;
+      background: none;
+      border: none;
+      outline: none;
+      cursor: pointer;
 }
 
 .actions button i {
-  background-color: none;
-  color: white;
-  font-size: 30px;
+      background-color: none;
+      color: white;
+      font-size: 30px;
 }
 
-// input[type="range"] {
-//   -webkit-appearance: none !important;
-//   background: rgba(255, 255, 255, 0.2);
-//   border-radius: 20px;
-//   height: 4px;
-//   width: 350px;
-// }
-
-// input[type="range"]::-webkit-slider-thumb {
-//   -webkit-appearance: none !important;
-//   cursor: pointer;
-//   height: 6px;
-// }
-
-// input[type="range"]::-moz-range-progress {
-//   background: white;
-// }
 
 .velocity {
-  appearance: none;
-  background: none;
-  color: white;
-  outline: none;
-  border: none;
-  text-align: center;
-  font-size: 16px;
+      appearance: none;
+      background: none;
+      color: white;
+      outline: none;
+      border: none;
+      text-align: center;
+      font-size: 16px;
 }
 
 .mute-btn {
-  background: none;
-  border: none;
-  outline: none;
-  cursor: pointer;
+      background: none;
+      border: none;
+      outline: none;
+      cursor: pointer;
 }
 
 .mute-btn i {
-  background-color: none;
-  color: white;
-  font-size: 20px;
+      background-color: none;
+      color: white;
+      font-size: 20px;
 }
 
 .recording-sign {
-  height: 20px;
-  width: auto;
-  display: flex;
-  flex-direction: row;
-  position: absolute;
-  top: 10px; 
-  right: 15px; 
-  align-items: center;
-  justify-content: center;
-
-  .timer {
-    font-size: 15px;
-    color: white;
-    margin: 0;
-  }
-
-  .dot {
-    height: 15px;
-    width: 15px;
-    margin: 5px;
-    background-color: red;
-    border-radius: 50%;
-    display: inline-block;
-  }
+      height: 20px;
+      width: auto;
+      display: flex;
+      flex-direction: row;
+      position: absolute;
+      top: 10px;
+      right: 15px;
+      align-items: center;
+      justify-content: center;
+
+      .timer {
+            font-size: 15px;
+            color: white;
+            margin: 0;
+      }
+
+      .dot {
+            height: 15px;
+            width: 15px;
+            margin: 5px;
+            background-color: red;
+            border-radius: 50%;
+            display: inline-block;
+      }
 }
 
 .controls-inner-container {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      width: 100%;
 
 }
 
 .record-button-wrapper {
-  width: 35px;
-	height: 35px;
-	font-size: 0;
-	background-color: grey;
-	border: 0px;
-	border-radius: 35px;
-	margin: 10px;
-
-  .record-button {
-    position: relative;
-    background-color: red;
-    border: 0px;
-    border-radius: 50%;
-    height: 28px;
-    width: 28px;
-    top: 50%;
-    left: 50%;
-    margin: -14px 0px 0px -14px;
-  
-    &:hover {
-      width: 30px;
-      height: 30px;
-      margin: -15px 0px 0px -15px;
-    }
-  }
-
-  .stop-button{
-    position: relative;
-    background-color: red;
-    border: 0px;
-    border-radius: 10%;
-    height: 18px;
-    width: 18px;
-    top: 50%;
-    left: 50%;
-    margin: -9px 0px 0px -9px;
-  
-    // &:hover {
-    //   width: 40px;
-    //   height: 40px
-    // }
-  }
+      width: 35px;
+      height: 35px;
+      font-size: 0;
+      background-color: grey;
+      border: 0px;
+      border-radius: 35px;
+      margin: 10px;
+      display: flex;
+      justify-content: center;
+
+      .record-button {
+            background-color: red;
+            border: 0px;
+            border-radius: 50%;
+            height: 80%;
+            width: 80%;
+            align-self: center;
+            margin: 0;
+
+            &:hover {
+                  height: 85%;
+                  width: 85%;
+            }
+      }
+
+      .stop-button {
+            background-color: red;
+            border: 0px;
+            border-radius: 10%;
+            height: 80%;
+            width: 80%;
+            align-self: center;
+            margin: 0;
+
+
+            // &:hover {
+            //   width: 40px;
+            //   height: 40px
+            // }
+      }
 
 }
 
 .video-edit-wrapper {
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  right: 50% - 15;
-
-  .video-edit-buttons {
-    margin: 0 5px;
-  }
-
-}
-
-
-
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      right: 50% - 15;
+
+      .video-edit-buttons {
+            margin: 0 5px;
+      }
+
+}
\ No newline at end of file
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)}>