add video player

static/main.css

@@ -8,6 +8,7 @@ body {
     align-items: center;
 
     overflow-y: auto;
+
 }
 
 :root {
@@ -120,6 +121,7 @@ video {
     width: 190px;
     margin-left: 5px;
 }
+
 .video {
     width: 200px;
     height: 200px;
@@ -132,10 +134,28 @@ video {
     justify-content: space-around;
 }
 
-.videos a{
+.videos a {
     color: var(--dark-1);
 }
 
 textarea {
     display: block;
 }
+
+#progressbar {
+    background-color: var(--light-1);
+    border: solid var(--dark-2) 2px;
+    border-radius: 13px;
+    padding: 3px;
+    margin: 0;
+    position: relative;
+    top: -40px;
+    width: 680px;
+}
+
+#progressbar>div {
+    background-color: var(--light-2);
+    width: 40%;
+    height: 20px;
+    border-radius: 10px;
+}

static/main.js

@@ -19,6 +19,37 @@ async function formClick(ev) {
     }
 }
 
+function moveBar(e, bar, vid) {
+    let rect = bar.getBoundingClientRect();
+    let prog = ((e.pageX - rect.x) / rect.width);
+    
+    vid.currentTime = prog * vid.duration;
+}
+
+function prog(vid, bar) {
+    bar.querySelector('div').style.width = `${vid.currentTime / vid.duration * 100}%`;
+}
+
+function controls(vid) {
+    let bar = vid.querySelector('#progressbar');
+    let video = vid.querySelector('video');
+
+    video.onclick = () => {
+        if (video.paused) {
+            video.play();
+            return;
+        }
+        video.pause();
+    }
+
+    bar.onclick = (e) => moveBar(e, bar, video);
+
+    video.addEventListener('timeupdate', () => prog(video,bar));
+}
+
 window.onload = function () {
     document.addEventListener('submit', formClick);
+    for (let vid of document.querySelectorAll('#video')) {
+        controls(vid);
+    }
 }

views/header_block.ejs

@@ -1,5 +1,5 @@
 <div class='header'>
-    <img src='/static/img/logo.svgg'>
+    <img src='/static/img/logo.svg'>
     <a href='/'>BiglyChat</a>
     <%if (username=='!nobody' ) { %>
         <a href="/client/login">Login</a>

views/player.ejs

@@ -1,7 +1,12 @@
 <%- include('header.ejs') -%>
     <div class='area'>
         <h1>Video</h1>
-        <video controls src='/videos/<%= videoData.id %>.webm'></video>
+        <div id='video'>
+            <video src='/videos/<%= videoData.id %>.webm'></video>
+            <div id="progressbar">
+                <div></div>
+            </div>
+        </div>
         <div><b>
                 <%= videoData.title %>
             </b>