progress indicator in jsplayer

2 files changed, 46 insertions, 5 deletions

diff --git a/server/src/routes/ui/style/js-player.css b/server/src/routes/ui/style/js-player.css
index 65fb770..303ed96 100644
--- a/server/src/routes/ui/style/js-player.css
+++ b/server/src/routes/ui/style/js-player.css
@@ -3,20 +3,37 @@
     which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
     Copyright (C) 2023 metamuffin <metamuffin.org>
 */
+
+.js-player {
+    --csize: 50px;
+}
+
 .js-player .controls {
     position: absolute;
     bottom: 0px;
     left: 0px;
     width: 100%;
-    height: 50px;
+    height: var(--csize);
     background-color: #1d1d1d99;
     transition: opacity 0.2s;
 }
 
 .js-player .controls button {
     padding: 0px;
-    width: 50px;
+    width: var(--csize);
     height: 100%;
     border: none;
     background-color: #ffffff10;
 }
+
+.pri {
+    padding: 0px;
+    display: inline-block;
+    margin: 0px;
+    width: calc(100% - var(--csize) * 2 - 2px);
+    height: var(--csize);
+}
+.pri-current {
+    height: var(--csize);
+    background-color: #ffffff20;
+}
diff --git a/server/src/routes/ui/style/js-player.js b/server/src/routes/ui/style/js-player.js
index 5f05c7e..d42e7d5 100644
--- a/server/src/routes/ui/style/js-player.js
+++ b/server/src/routes/ui/style/js-player.js
@@ -25,13 +25,31 @@ function patch_video(e) {
 
     const pause_button = document.createElement("button")
     pause_button.textContent = "|>"
+
     const fullscreen_button = document.createElement("button")
     fullscreen_button.style.float = "right"
     fullscreen_button.textContent = "X"
 
-    controls.append(pause_button, fullscreen_button)
+    const pri = document.createElement("div")
+    pri.classList.add("pri")
+    const pri_current = document.createElement("div")
+    pri_current.style.width = "0px"
+    pri_current.classList.add("pri-current")
+    pri.append(pri_current)
+
+    controls.append(pause_button, pri, fullscreen_button)
     d.append(controls)
 
+
+    e.onloadedmetadata = () => {
+
+    }
+    e.ondurationchange = () => {
+
+    }
+    e.ontimeupdate = () => {
+        pri_current.style.width = (e.currentTime / e.duration * 100) + "%"
+    }
     e.onplay = () => {
         pause_button.textContent = "..."
     }
@@ -44,7 +62,6 @@ function patch_video(e) {
     e.onpause = () => {
         pause_button.textContent = "|>"
     }
-
     const toggle_playing = () => e.paused ? e.play() : e.pause()
 
     mouse_idle(e, 1000, idle => {
@@ -54,7 +71,14 @@ function patch_video(e) {
 
     e.addEventListener("click", toggle_playing)
     pause_button.addEventListener("click", toggle_playing)
-    fullscreen_button.addEventListener("click", () => document.body.requestFullscreen())
+    fullscreen_button.addEventListener("click", () => {
+        if (document.fullscreenElement) document.exitFullscreen()
+        else document.documentElement.requestFullscreen()
+    })
+    document.body.addEventListener("keypress", k => {
+        if (k.code == "Period") e.seekToNextFrame()
+        if (k.code == "Space") toggle_playing()
+    })
 }
 
 function mouse_idle(e, timeout, cb) {