3 files changed, 35 insertions, 10 deletions
diff --git a/web/script/player/track/mod.ts b/web/script/player/track/mod.ts
index cdb07cc..e165df6 100644
--- a/web/script/player/track/mod.ts
+++ b/web/script/player/track/mod.ts
@@ -20,5 +20,6 @@ export abstract class PlayerTrack {
     public buffered = new OVar<BufferRange[]>([]);
     public abort = new AbortController()
     async update(_target: number) { }
+    public abstract debug(): HTMLElement | OVar<HTMLElement>
 }
 
diff --git a/web/script/player/track/mse.ts b/web/script/player/track/mse.ts
index 01836b7..8e83c78 100644
--- a/web/script/player/track/mse.ts
+++ b/web/script/player/track/mse.ts
@@ -4,6 +4,8 @@ import { profile_to_partial_track, track_to_content_type } from "../mediacaps.ts
 import { BufferRange, Player } from "../player.ts";
 import { EncodingProfileExt, ProfileSelector } from "../profiles.ts";
 import { PlayerTrack, AppendRange, TARGET_BUFFER_DURATION, MIN_BUFFER_DURATION } from "./mod.ts";
+import { show_profile } from "../mod.ts";
+import { e } from "../../jshelper/src/element.ts";
 
 export class MSEPlayerTrack extends PlayerTrack {
   public source_buffer!: SourceBuffer;
@@ -21,7 +23,7 @@ export class MSEPlayerTrack extends PlayerTrack {
     private metadata: SourceTrack,
   ) {
     super(track_index);
-    this.profile_selector = new ProfileSelector(player, this, player.downloader.bandwidth);
+    this.profile_selector = new ProfileSelector(player, this, player.downloader.bandwidth_avail);
     this.init()
   }
 
@@ -143,4 +145,20 @@ export class MSEPlayerTrack extends PlayerTrack {
       this.source_buffer.appendBuffer(seg.buf);
     }
   }
+
+  public debug(): OVar<HTMLElement> {
+    const rtype = (t: string, b: BufferRange[]) => {
+      const c = b.filter(r => r.status == t);
+      return `${c.length} range${c.length != 1 ? "s" : ""}, ${c.reduce((a, v) => a + v.end - v.start, 0).toFixed(2)}s`
+    }
+    return this.profile.liftA2(this.buffered, (p, b) =>
+      e("pre",
+        `mse track ${this.track_index}: ${(p ? `profile ${p.id} (${show_profile(p)})` : `remux`)}`
+        + `\n\ttype: ${track_to_content_type(this.track_from_profile())}`
+        + `\n\tbuffered: ${rtype("buffered", b)}`
+        + `\n\tqueued: ${rtype("queued", b)}`
+        + `\n\tloading: ${rtype("loading", b)}`
+      ) as HTMLElement
+    )
+  }
 }
diff --git a/web/script/player/track/vtt.ts b/web/script/player/track/vtt.ts
index 02a7792..8301457 100644
--- a/web/script/player/track/vtt.ts
+++ b/web/script/player/track/vtt.ts
@@ -1,3 +1,4 @@
+import { e } from "../../jshelper/src/element.ts";
 import { SourceTrack, JvttCue } from "../jhls.d.ts";
 import { Player } from "../player.ts";
 import { PlayerTrack } from "./mod.ts";
@@ -48,6 +49,10 @@ export class VttPlayerTrack extends PlayerTrack {
     }
     this.on_ready()
   }
+
+  public debug(): HTMLElement {
+    return e("pre", `vtt track ${this.track_index}\n\t${this.cues?.length} cues loaded`)
+  }
 }
 
 function create_cue(cue: JvttCue): VTTCue {
@@ -55,15 +60,16 @@ function create_cue(cue: JvttCue): VTTCue {
   const props = parse_layout_properties(cue.content.split("\n")[0])
   if (props) {
     c.text = cue.content.split("\n").slice(1).join("\n")
-    // TODO this does not work at all...
-    const region = new VTTRegion()
-    if ("position" in props && props.position.endsWith("%"))
-      region.regionAnchorX = parseFloat(props.position.replace("%", ""))
-    if ("line" in props && props.line.endsWith("%"))
-      region.regionAnchorY = parseFloat(props.line.replace("%", ""))
-    if ("align" in props)
-      c.align = props.align as AlignSetting
-    c.region = region
+    // TODO re-enable when it works
+    // // TODO this does not work at all...
+    // const region = new VTTRegion()
+    // if ("position" in props && props.position.endsWith("%"))
+    //   region.regionAnchorX = parseFloat(props.position.replace("%", ""))
+    // if ("line" in props && props.line.endsWith("%"))
+    //   region.regionAnchorY = parseFloat(props.line.replace("%", ""))
+    // if ("align" in props)
+    //   c.align = props.align as AlignSetting
+    // c.region = region
   } else {
     c.line = -2;
   }