Merge pull request #203 from RandomStudio/new-video-controls

New video controls

.vscode/settings.json

@@ -27,5 +27,8 @@
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   }
 }

src/components/Video/Controls/Controls.module.scss

@@ -0,0 +1,43 @@
+.wrapper {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+  padding-left: 1rem;
+  padding-bottom: 24px;
+  font-size: 17px;
+
+  button,
+  a {
+    background: none;
+    border: none;
+    color: white;
+    text-decoration: none;
+    width: 7rem;
+    display: flex;
+    align-items: center;
+    text-align: left;
+    margin: 0;
+    padding: 0;
+  }
+
+  .muteToggle {
+    margin-left: 590px; // Progress bar width
+  }
+
+  .playToggle {
+    width: 4rem;
+  }
+}
+.pullRight {
+  display: flex;
+  margin-left: auto;
+  margin-right: 0;
+
+  a,
+  button {
+    text-align: right;
+  }
+}

src/components/Video/Controls/Controls.tsx

@@ -0,0 +1,48 @@
+import styles from './Controls.module.scss';
+import { VideoData } from '../../../types/types';
+
+type ControlsTypes = {
+  handlePlayToggle: () => void;
+  handleMuteToggle: () => void;
+  isPlaying: boolean;
+  isMuted: boolean;
+  video: VideoData;
+};
+
+const Controls = ({
+  handlePlayToggle,
+  handleMuteToggle,
+  isMuted,
+  isPlaying,
+  video,
+}: ControlsTypes) => {
+  return (
+    <div className={styles.wrapper}>
+      <button
+        className={styles.playToggle}
+        onClick={handlePlayToggle}
+        type="button"
+      >
+        {isPlaying ? 'Pause' : 'Play'}
+      </button>
+
+      <button
+        className={styles.muteToggle}
+        onClick={handleMuteToggle}
+        type="button"
+      >
+        {isMuted ? 'Sound On' : 'Sound Off'}
+      </button>
+
+      <div className={styles.pullRight}>
+        <a download href={`${video.baseUrl}/original`}>
+          {'Download'}
+        </a>
+
+        <button type="button">{'Share'}</button>
+      </div>
+    </div>
+  );
+};
+
+export default Controls;

src/components/Video/Video.module.scss

@@ -1,7 +1,93 @@
+.newControls {
+  :global(.video-js) {
+    * {
+      font-size: 14px;
+    }
+    &.hover {
+      * {
+        font-size: 14px;
+      }
+    }
+
+    // Custom video player styling
+    :global(.vjs-control-bar) {
+      max-width: 600px;
+      background: none;
+      margin-left: 4rem;
+      z-index: 9;
+      margin-bottom: 13px; // Visually align with controls
+
+      * {
+        font-family: "Random Regular";
+      }
+    }
+
+    // The minus in front of total duration
+    :global(.vjs-remaining-time) > span[aria-hidden="true"] {
+      display: none;
+    }
+
+    :global(.vjs-progress-control) {
+      // Popup on mousehover with current time
+      :global(.vjs-play-progress .vjs-time-tooltip) {
+        color: white;
+        font-size: 14px;
+        background: none;
+        top: -2em;
+      }
+
+      :global(.vjs-progress-holder) {
+        * {
+          font-size: 14px;
+        }
+        height: 1px;
+        background: rgba(255, 255, 255, 0.4);
+
+        :global(.vjs-play-progress) {
+          background: white;
+          height: 3px;
+          transform: translateY(-1px);
+        }
+
+        :global(.vjs-load-progress) {
+          display: none;
+        }
+      }
+    }
+
+    // Total duration
+    :global(.vjs-remaining-time-display) {
+      font-size: 17px;
+    }
+
+    :global(.vjs-play-progress)::before {
+      content: "";
+    }
+  }
+}
+
+.oldControls {
+  :global(.video-js) {
+    :global(.vjs-control) {
+      height: 3em;
+    }
+
+    :global(.vjs-control-bar) {
+      height: 3.5em;
+      background-color: none;
+      background: linear-gradient(transparent, rgb(0 0 0 / 0.35));
+    }
+
+    :global(.vjs-control):focus {
+      text-shadow: none;
+    }
+  }
+}
+
 .frame {
   position: relative;
   overflow: hidden;
-  > div {
+  .video {
     width: 100%;
     height: 100%;
     top: 0;
@@ -14,26 +100,10 @@
     width: 100%;
     height: 100% !important;
     padding: 0 !important;
-    background-color: var(--background-color);
 
     video {
       position: relative;
     }
-
-    // Custom video player styling
-    :global(.vjs-control) {
-      height: 3em;
-    }
-
-    :global(.vjs-control-bar) {
-      height: 3.5em;
-      background-color: none;
-      background: linear-gradient(transparent, rgb(0 0 0 / 0.35));
-    }
-
-    :global(.vjs-control):focus {
-      text-shadow: none;
-    }
   }
 }