/* This file is part of jellything (https://codeberg.org/metamuffin/jellything) which is licensed under the GNU Affero General Public License (version 3); see /COPYING. Copyright (C) 2023 metamuffin */ /// import { OVar, e } from "../jshelper/mod.ts"; import { NodePublic, NodeUserData, SourceTrack, TimeRange } from "./jhls.d.ts"; import { SegmentDownloader } from "./download.ts"; import { PlayerTrack } from "./track.ts"; import { Logger } from "../jshelper/src/log.ts"; import { WatchedState } from "./jhls.d.ts"; export interface BufferRange extends TimeRange { status: "buffered" | "loading" | "queued" } export class Player { public video = e("video") public media_source = new MediaSource(); public tracks?: SourceTrack[]; public active_tracks = new OVar([]); public downloader: SegmentDownloader = new SegmentDownloader(); public position = new OVar(0) public duration = new OVar(1) public playing = new OVar(false) public canplay = new OVar(false) public error = new OVar(undefined) private cancel_buffering_pers: undefined | (() => void) set_pers(s?: string) { if (this.cancel_buffering_pers) this.cancel_buffering_pers(), this.cancel_buffering_pers = undefined if (s) this.cancel_buffering_pers = this.logger?.log_persistent(s) } constructor(public node_id: string, public logger?: Logger) { this.video.onloadedmetadata = () => { } this.video.ondurationchange = () => { } this.video.ontimeupdate = () => { this.position.value = this.video.currentTime this.update() // TODO maybe not here } this.video.onplay = () => { console.log("play"); this.set_pers("Resuming playback...") } this.video.onwaiting = () => { console.log("waiting"); if (this.video.currentTime > this.duration.value - 0.2) return this.set_pers("Playback finished") this.set_pers("Buffering...") this.canplay.value = false; } this.video.onplaying = () => { console.log("playing"); this.playing.value = true; this.set_pers() } this.video.onpause = () => { console.log("pause"); this.playing.value = false } this.video.oncanplay = () => { console.log("canplay"); this.set_pers() this.canplay.value = true } this.video.onseeking = () => { console.log("seeking"); this.set_pers("Seeking...") } this.video.onseeked = () => { console.log("seeked"); this.set_pers() } this.video.onerror = e => { console.error("video element error:", e); this.set_pers("MSE sucks"); } this.video.onabort = e => { console.error("video element abort:", e); this.set_pers("Aborted"); } this.fetch_meta() } async fetch_meta() { this.set_pers("Loading node...") const res = await fetch(`/n/${encodeURIComponent(this.node_id)}`, { headers: { "Accept": "application/json" } }) if (!res.ok) return this.error.value = "Cannot download node." let metadata!: NodePublic & { error: string } try { metadata = await res.json() } catch (_) { this.set_pers("Error: Failed to fetch node") } if (metadata.error) return this.set_pers("server error: " + metadata.error) this.set_pers("Loading node user data...") const udres = await fetch(`/n/${encodeURIComponent(this.node_id)}/userdata`, { headers: { "Accept": "application/json" } }) if (!udres.ok) return this.error.value = "Cannot download node." let userdata!: NodeUserData & { error: string } try { userdata = await udres.json() } catch (_) { this.set_pers("Error: Failed to fetch node") } if (userdata.error) return this.set_pers("server error: " + metadata.error) this.set_pers() this.tracks = metadata.media!.tracks this.duration.value = metadata.media!.duration 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, false) await this.set_track_enabled(1, true, false) this.set_pers("Downloading initial segments...") const start_time = get_continue_time(userdata.watched); this.update(start_time) this.video.currentTime = start_time await this.canplay.wait_for(true) this.set_pers() }) } async update(newt?: number) { await Promise.all(this.active_tracks.value.map(t => t.update(newt ?? this.video.currentTime))) } 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 != -1) { const [track] = this.active_tracks.value.splice(active_index, 1) 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() } play() { this.video.play() } pause() { this.video.pause() } frame_forward() { //@ts-ignore trust me bro this.video["seekToNextFrame"]() } async seek(p: number) { this.set_pers("Buffering at target...") await this.update(p) this.video.currentTime = p } } function get_continue_time(w: WatchedState): number { if (typeof w == "string") return 0 else return w.progress }