nice logger

2 files changed, 24 insertions, 18 deletions

diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts
index aea12a8..b170c95 100644
--- a/web/script/player/mod.ts
+++ b/web/script/player/mod.ts
@@ -5,6 +5,7 @@
 */
 import { OVar, show } from "../jshelper/mod.ts";
 import { e } from "../jshelper/mod.ts";
+import { Logger } from "../jshelper/src/log.ts";
 import { EncodingProfile } from "./jhls.d.ts";
 import { Player } from "./player.ts";
 
@@ -21,8 +22,9 @@ document.addEventListener("DOMContentLoaded", () => {
 function initialize_player(el: HTMLElement, node_id: string) {
     el.innerHTML = "" // clear the body
 
-    const player = new Player(node_id)
-    const show_stats = new OVar(true);
+    const logger = new Logger<string>(s => e("p", s))
+    const player = new Player(node_id, logger)
+    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) + "%"
@@ -64,9 +66,6 @@ function initialize_player(el: HTMLElement, node_id: string) {
 
     const pel = e("div", { class: "jsp" },
         player.video,
-        player.buffering_status.map(b => e("div", { class: "jsp-overlay" },
-            b ? e("p", { class: "jsp-buffering" }, b) : undefined
-        )),
         show_stats.map(do_show => player.tracks.map(tracks =>
             !do_show ? e("div") : e("div", { class: "jsp-stats" },
                 player.downloader.bandwidth.map(b => e("pre", `estimated bandwidth: ${show.metric(b, "B/s")} | ${show.metric(b * 8, "b/s")}`)),
@@ -75,6 +74,7 @@ function initialize_player(el: HTMLElement, node_id: string) {
                 ))
             )
         )),
+        logger.element,
         controls,
     )
     el.append(pel)
diff --git a/web/script/player/player.ts b/web/script/player/player.ts
index 9365658..ff43ce2 100644
--- a/web/script/player/player.ts
+++ b/web/script/player/player.ts
@@ -3,6 +3,7 @@ import { JhlsMetadata, TimeRange } from "./jhls.d.ts";
 import { SegmentDownloader } from "./download.ts";
 import { PlayerTrack } from "./track.ts";
 import { ProfileSelector } from "./profiles.ts";
+import { Logger } from "../jshelper/src/log.ts";
 
 export interface BufferRange extends TimeRange { status: "buffered" | "loading" | "queued" }
 export class Player {
@@ -16,10 +17,15 @@ export class Player {
     public duration = new OVar(1)
     public playing = new OVar(false)
     public canplay = new OVar(false)
-    public buffering_status = new OVar<string | undefined>(undefined)
     public error = new OVar<string | undefined>(undefined)
 
-    constructor(private node_id: string) {
+    private cancel_buffering_pers: undefined | (() => void)
+    set_pers(s?: string) {
+        if (this.cancel_buffering_pers) this.cancel_buffering_pers()
+        if (s) this.cancel_buffering_pers = this.logger?.log_persistent(s)
+    }
+
+    constructor(private node_id: string, public logger?: Logger<string>) {
         this.video.onloadedmetadata = () => { }
         this.video.ondurationchange = () => { }
         this.video.ontimeupdate = () => {
@@ -28,17 +34,17 @@ export class Player {
         }
         this.video.onplay = () => {
             console.log("play");
-            this.buffering_status.value = "Resuming playback...";
+            this.set_pers("Resuming playback...")
         }
         this.video.onwaiting = () => {
             console.log("waiting");
-            this.buffering_status.value = "Buffering...";
+            this.set_pers("Buffering...")
             this.canplay.value = false;
         }
         this.video.onplaying = () => {
             console.log("playing");
             this.playing.value = true;
-            this.buffering_status.value = undefined;
+            this.set_pers()
         }
         this.video.onpause = () => {
             console.log("pause");
@@ -46,16 +52,16 @@ export class Player {
         }
         this.video.oncanplay = () => {
             console.log("canplay");
-            this.buffering_status.value = undefined
+            this.set_pers()
             this.canplay.value = true
         }
         this.video.onseeking = () => {
             console.log("seeking");
-            this.buffering_status.value = "Seeking..."
+            this.set_pers("Seeking...")
         }
         this.video.onseeked = () => {
             console.log("seeked");
-            this.buffering_status.value = undefined
+            this.set_pers()
         }
         this.video.onerror = e => {
             console.error("video element error:", e);
@@ -67,12 +73,12 @@ export class Player {
     }
 
     async fetch_meta() {
-        this.buffering_status.value = "Loading JHLS metadata..."
+        this.set_pers("Fetching initial segments...")
         const res = await fetch(`/n/${encodeURIComponent(this.node_id)}/stream?format=jhls`)
         if (!res.ok) return this.error.value = "Cannot download JHLS metadata"
         const metadata = await res.json() as JhlsMetadata
+        this.set_pers()
 
-        this.buffering_status.value = undefined
         this.duration.value = metadata.duration
         this.video.src = URL.createObjectURL(this.media_source)
         this.profile_selector = new ProfileSelector(this.downloader.bandwidth, metadata)
@@ -81,10 +87,10 @@ export class Player {
             this.tracks.value.push(new PlayerTrack(this, this.node_id, 0, metadata.tracks[0]))
             this.tracks.value.push(new PlayerTrack(this, this.node_id, 1, metadata.tracks[1]))
             this.tracks.change()
-            this.buffering_status.value = "Fetching initial segments..."
+            this.set_pers("Fetching initial segments...")
             this.update()
             await this.canplay.wait_for(true)
-            this.buffering_status.value = undefined
+            this.set_pers()
         })
     }
     async update(newt?: number) {
@@ -102,7 +108,7 @@ export class Player {
         this.video["seekToNextFrame"]()
     }
     async seek(p: number) {
-        this.buffering_status.value = "Buffering at target..."
+        this.set_pers("Buffering at target...")
         await this.update(p)
         this.video.currentTime = p
     }