diff options
| -rw-r--r-- | web/script/player/mod.ts | 6 | ||||
| -rw-r--r-- | web/script/player/player.ts | 13 | ||||
| -rw-r--r-- | web/script/player/track.ts | 12 | ||||
| -rw-r--r-- | web/style/js-player.css | 10 |
4 files changed, 28 insertions, 13 deletions
diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts index 08193a7..fdb4e4a 100644 --- a/web/script/player/mod.ts +++ b/web/script/player/mod.ts @@ -60,8 +60,12 @@ function initialize_player(el: HTMLElement, node_id: string) { .filter(({ track }) => get_track_kind(track.kind) == kind) .map(({ track, index }): HTMLElement => { const active = player.active_tracks.value.find(ts => ts.track_index == index) !== undefined + const onclick = (button: HTMLElement) => { + button.textContent = "…" + player.set_track_enabled(index, !active) + } return e("div", - e("span", { class: "jsp-track-stae" }, active ? "active" : ""), " ", + e("button", { class: "jsp-track-state", onclick }, active ? "-" : "+"), " ", e("span", { class: "jsp-track-name" }, track.name), " ", e("span", { class: "jsp-track-lang" }, track.language) ) diff --git a/web/script/player/player.ts b/web/script/player/player.ts index d76d8cb..2ba2e1d 100644 --- a/web/script/player/player.ts +++ b/web/script/player/player.ts @@ -93,8 +93,8 @@ export class Player { this.video.src = URL.createObjectURL(this.media_source) this.media_source.addEventListener("sourceopen", async () => { this.set_pers("Downloading track indecies...") - await this.set_track_enabled(0, true) - await this.set_track_enabled(1, true) + await this.set_track_enabled(0, true, false) + await this.set_track_enabled(1, true, false) this.set_pers("Downloading initial segments...") this.update() await this.canplay.wait_for(true) @@ -105,14 +105,15 @@ export class Player { await Promise.all(this.active_tracks.value.map(t => t.update(newt ?? this.video.currentTime))) } - async set_track_enabled(index: number, state: boolean) { + async set_track_enabled(index: number, state: boolean, update = true) { console.log(`(${index}) set enabled ${state}`); const active_index = this.active_tracks.value.findIndex(t => t.track_index == index) - if (!state && active_index !== undefined) { + if (!state && active_index != -1) { const [track] = this.active_tracks.value.splice(active_index, 1) - track.destroy() - } else if (state && active_index === undefined) { + track.abort.abort() + } else if (state && active_index == -1) { this.active_tracks.value.push((await PlayerTrack.new(this, this.node_id, index, this.tracks![index]))!) + if (update) await this.update() } this.active_tracks.change() } diff --git a/web/script/player/track.ts b/web/script/player/track.ts index f40730f..735aab3 100644 --- a/web/script/player/track.ts +++ b/web/script/player/track.ts @@ -23,6 +23,7 @@ export class PlayerTrack { private append_queue: AppendRange[] = []; public profile = new OVar<EncodingProfileExt | undefined>(undefined); public profile_selector: ProfileSelector + public abort = new AbortController() public static async new(player: Player, node_id: string, track_index: number, metadata: SourceTrack): Promise<PlayerTrack | undefined> { try { @@ -56,8 +57,13 @@ export class PlayerTrack { const ct = track_to_content_type(this.track_from_profile())! console.log(`track ${this.track_index} source buffer content-type: ${ct}`); this.source_buffer = this.player.media_source.addSourceBuffer(ct); + this.abort.signal.addEventListener("abort", () => { + console.log(`destroy source buffer for track ${this.track_index}`); + this.player.media_source.removeSourceBuffer(this.source_buffer) + }) this.source_buffer.mode = "segments"; this.source_buffer.addEventListener("updateend", () => { + if (this.abort.signal.aborted) return if (this.current_load) { this.current_load.cb(); this.loading.delete(this.current_load.index); @@ -73,11 +79,6 @@ export class PlayerTrack { console.error("sourcebuffer abort", e); }); } - destroy() { - console.log(`destroy source buffer for track ${this.track_index}`); - this.player.media_source.removeSourceBuffer(this.source_buffer) - } - track_from_profile(): SourceTrack { if (this.profile.value) return profile_to_partial_track(this.profile.value) else return this.metadata @@ -128,6 +129,7 @@ export class PlayerTrack { const url = `/n/${encodeURIComponent(this.node_id)}/stream?format=snippet&webm=true&tracks=${this.track_index}&index=${index}${this.profile.value ? `&profile=${this.profile.value.id}` : ""}`; const buf = await this.player.downloader.download(url); await new Promise<void>(cb => { + if (this.abort.signal.aborted) return this.append_queue.push({ buf, ...this.index.segments[index], index, cb }); this.tick_append(); }); diff --git a/web/style/js-player.css b/web/style/js-player.css index ead9293..40455ed 100644 --- a/web/style/js-player.css +++ b/web/style/js-player.css @@ -44,6 +44,14 @@ margin-right: 1em; display: inherit; } +.jsp-track-state { + background-color: #0005; + border: 0px solid transparent; + font-size: x-large; +} +.jsp-track-state:hover { + background-color: rgba(113, 113, 113, 0.333); +} .jsp-track-select-popup { background-color: #303a; padding: 1em; @@ -170,4 +178,4 @@ bottom: calc(var(--csize) - 20px); opacity: 0; } -}
\ No newline at end of file +} |