merge with presentmode

1 files changed, 207 insertions, 0 deletions

diff --git a/src/client/views/nodes/RecordingBox/RecordingView.scss b/src/client/views/nodes/RecordingBox/RecordingView.scss
new file mode 100644
index 000000000..9b2f6d070
--- /dev/null
+++ b/src/client/views/nodes/RecordingBox/RecordingView.scss
@@ -0,0 +1,207 @@
+video {
+      // flex: 100%;
+      width: 100%;
+      // min-height: 400px;
+      //height: auto;
+      height: 100%;
+      //display: block;
+      object-fit: cover;
+      background-color: black;
+}
+
+button {
+      margin: 0 .5rem
+}
+
+.recording-container {
+      height: 100%;
+      width: 100%;
+      // display: flex;
+      pointer-events: all;
+      background-color: grey;
+}
+
+.video-wrapper {
+      //   max-width: 600px;
+      //   max-width: 700px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      //   overflow: hidden;
+      border-radius: 10px;
+      margin: 0;
+}
+
+.video-wrapper:hover .controls {
+      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;
+      // 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;
+}
+
+.actions button i {
+      background-color: none;
+      color: white;
+      font-size: 30px;
+}
+
+
+.velocity {
+      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;
+}
+
+.mute-btn i {
+      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;
+      }
+}
+
+.controls-inner-container {
+      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;
+      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: 70%;
+            width: 70%;
+            align-self: center;
+            margin: 0;
+
+
+            // &:hover {
+            //   width: 40px;
+            //   height: 40px
+            // }
+      }
+
+}
+
+.options-wrapper {
+      height: 100%;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+
+      &.video-edit-wrapper {
+
+            right: 50% - 15;
+
+            .track-screen {
+                  font-weight: 200;
+            }
+
+      }
+
+      &.track-screen-wrapper {
+
+            right: 50% - 30;
+
+            .track-screen {
+                  font-weight: 200;
+            }
+
+      }
+}
\ No newline at end of file