diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/js-player.css | 37 | ||||
| m--------- | web/script/jshelper | 0 | ||||
| -rw-r--r-- | web/script/player/mod.ts | 10 | ||||
| -rw-r--r-- | web/script/player/player.ts | 32 |
4 files changed, 61 insertions, 18 deletions
diff --git a/web/js-player.css b/web/js-player.css index 3df8cde..3bb8613 100644 --- a/web/js-player.css +++ b/web/js-player.css @@ -86,3 +86,40 @@ .jsp-stats pre { margin: 0.1em; } + +.jsp .jsh-log { + position: absolute; + bottom: var(--csize); + left: 0px; +} +.jsp .jsh-log-line { + font-size: 1em; + height: 1.2em; + animation-name: appear; + animation-timing-function: linear; + animation-duration: 0.5s; + animation-fill-mode: forwards; +} +.jsp .jsh-log-line-disappear { + animation-name: disappear; + animation-timing-function: linear; + animation-duration: 0.2s; + animation-fill-mode: forwards; +} + +@keyframes appear { + from { + opacity: 0; + } + to { + opacity: 1; + } +} +@keyframes disappear { + from { + opacity: 1; + } + to { + opacity: 0; + } +} diff --git a/web/script/jshelper b/web/script/jshelper -Subproject 5528c6a2ee1b80770b046855fdd6be937bfafc2 +Subproject bd8b233316820cd35178085ef132f82279be050 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 } |