jsplayer: show current time

1 files changed, 14 insertions, 2 deletions

diff --git a/server/src/routes/ui/style/js-player.js b/server/src/routes/ui/style/js-player.js
index fa2aa8b..8a6e82a 100644
--- a/server/src/routes/ui/style/js-player.js
+++ b/server/src/routes/ui/style/js-player.js
@@ -27,9 +27,11 @@ function patch_video(e) {
     pause_button.textContent = "|>"
 
     const fullscreen_button = document.createElement("button")
-    fullscreen_button.style.float = "right"
     fullscreen_button.textContent = "X"
 
+    const status_display = document.createElement("p")
+    status_display.classList.add("status")
+
     const pri = document.createElement("div")
     pri.classList.add("pri")
     const pri_current = document.createElement("div")
@@ -37,7 +39,7 @@ function patch_video(e) {
     pri_current.classList.add("pri-current")
     pri.append(pri_current)
 
-    controls.append(pause_button, pri, fullscreen_button)
+    controls.append(pause_button, status_display, pri, fullscreen_button)
     d.append(controls)
 
 
@@ -48,6 +50,7 @@ function patch_video(e) {
 
     }
     e.ontimeupdate = () => {
+        status_display.innerHTML = display_time(e.currentTime) + "<br/>" + display_time(e.currentTime - e.duration); // TODO can we have <br> with textContent?!
         pri_current.style.width = (e.currentTime / e.duration * 100) + "%"
     }
     e.onplay = () => {
@@ -99,3 +102,12 @@ function mouse_idle(e, timeout, cb) {
         }, timeout)
     }
 }
+
+function display_time(t) {
+    if (t < 0) return "-" + display_time(-t)
+    let h = 0, m = 0, s = 0;
+    while (t > 3600) t -= 3600, h++;
+    while (t > 60) t -= 60, m++;
+    while (t > 1) t -= 1, s++;
+    return (h ? h + "h" : "") + (m ? m + "m" : "") + (s ? s + "s" : "")
+}