feat: styling + play entire video after finish

1 files changed, 144 insertions, 163 deletions

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