From 9bddacf1efbaa34a4fa83f290ce6be36e4fc8564 Mon Sep 17 00:00:00 2001
From: biglyderv <eggseggsarecool+git@gmail.com>
Date: Mon, 25 Nov 2024 14:12:43 -0500
Subject: [PATCH] add video player

---
 static/main.css        | 22 +++++++++++++++++++++-
 static/main.js         | 31 +++++++++++++++++++++++++++++++
 views/header_block.ejs |  2 +-
 views/player.ejs       |  7 ++++++-
 4 files changed, 59 insertions(+), 3 deletions(-)

diff --git a/static/main.css b/static/main.css
index 0f366d9..2d8423a 100644
--- a/static/main.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/static/main.js b/static/main.js
index 43bb324..88f9a85 100644
--- a/static/main.js
+++ b/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);
+    }
 }
\ No newline at end of file
diff --git a/views/header_block.ejs b/views/header_block.ejs
index beeaabd..cf174b3 100644
--- a/views/header_block.ejs
+++ b/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>
diff --git a/views/player.ejs b/views/player.ejs
index f3e16e6..443701e 100644
--- a/views/player.ejs
+++ b/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>