estimate bandwidth

1 files changed, 8 insertions, 11 deletions

diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts
index 02b8a12..bf294aa 100644
--- a/web/script/player/mod.ts
+++ b/web/script/player/mod.ts
@@ -3,6 +3,7 @@
     which is licensed under the GNU Affero General Public License (version 3); see /COPYING.
     Copyright (C) 2023 metamuffin <metamuffin.org>
 */
+import { OVar, show } from "../jshelper/mod.ts";
 import { e } from "../jshelper/mod.ts";
 import { Player } from "./player.ts";
 
@@ -20,6 +21,7 @@ function initialize_player(el: HTMLElement, node_id: string) {
     el.innerHTML = "" // clear the body
 
     const player = new Player(node_id)
+    const show_stats = new OVar(false);
 
     const toggle_playing = () => player.playing.value ? player.pause() : player.play()
     const pri_map = (v: number) => (v / player.duration.value * 100) + "%"
@@ -29,8 +31,8 @@ function initialize_player(el: HTMLElement, node_id: string) {
     const controls = e("div", { class: "jsp-controls" },
         player.playing.map(playing => e("button", playing ? "||" : "|>", { onclick: toggle_playing })),
         e("p", { class: "jsp-status" },
-            player.position.map(v => e("span", display_time(v))), e("br"),
-            player.position.map(v => e("span", display_time(v - player.duration.value)))
+            player.position.map(v => e("span", show.duration(v))), e("br"),
+            player.position.map(v => e("span", show.duration(v - player.duration.value)))
         ),
         pri = e("div", { class: "jsp-pri" },
             pri_current = e("div", { class: "jsp-pri-current" }),
@@ -64,6 +66,9 @@ function initialize_player(el: HTMLElement, node_id: string) {
         player.buffering_status.map(b => e("div", { class: "jsp-overlay" },
             b ? e("p", { class: "jsp-buffering" }, b) : undefined
         )),
+        show_stats.map(do_show => !do_show ? e("div") : e("div", {class: "jsp-stats"}, 
+            player.downloader.bandwidth.map(b => e("pre", `estimated bandwidth: ${show.byte_size(b)}`))
+        )),
         controls,
     )
     el.append(pel)
@@ -82,6 +87,7 @@ function initialize_player(el: HTMLElement, node_id: string) {
     document.body.addEventListener("keydown", k => {
         if (k.code == "Period") player.pause(), player.frame_forward()
         if (k.code == "Space") toggle_playing()
+        else if (k.code == "KeyV") show_stats.value = !show_stats.value
         else if (k.code == "ArrowLeft") player.seek(player.position.value - 5)
         else if (k.code == "ArrowRight") player.seek(player.position.value + 5)
         else if (k.code == "ArrowUp") player.seek(player.position.value - 60)
@@ -108,12 +114,3 @@ function mouse_idle(e: HTMLElement, timeout: number, cb: (b: boolean) => unknown
         }, timeout)
     }
 }
-function display_time(t: number): string {
-    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" : "")
-}
-