diff options
| m--------- | web/script/jshelper | 0 | ||||
| -rw-r--r-- | web/script/player/mod.ts | 28 | ||||
| -rw-r--r-- | web/script/player/player.ts | 2 | ||||
| -rw-r--r-- | web/script/player/profiles.ts | 4 | ||||
| -rw-r--r-- | web/script/transition.ts | 6 |
5 files changed, 23 insertions, 17 deletions
diff --git a/web/script/jshelper b/web/script/jshelper -Subproject b7a3b1b81ed85c95ca8183407971aed724e3b9b +Subproject 913162afb7c901cc8b15038b6209040c0b1605f diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts index 0f30d45..c9c1ebc 100644 --- a/web/script/player/mod.ts +++ b/web/script/player/mod.ts @@ -37,6 +37,7 @@ function initialize_player(el: HTMLElement, node_id: string) { const logger = new Logger<string>(s => e("p", s)) const player = new Player(node_id, logger) const show_stats = new OVar(false); + const idle_inhibit = new OVar(false) const sync_state = new OVar<Playersync | undefined>(undefined) const toggle_playing = () => player.playing.value ? player.pause() : player.play() @@ -179,10 +180,14 @@ function initialize_player(el: HTMLElement, node_id: string) { ) el.append(pel) - mouse_idle(pel, 1000, idle => { - controls.style.opacity = idle ? "0" : "1" - pel.style.cursor = idle ? "none" : "default" - }) + controls.onmouseenter = () => idle_inhibit.value = true + controls.onmouseleave = () => idle_inhibit.value = false + mouse_idle(pel, 1000) + .liftA2(idle_inhibit, (x, y) => x && !y) + .onchangeinit(idle => { + controls.style.opacity = idle ? "0" : "1" + pel.style.cursor = idle ? "none" : "default" + }) player.video.addEventListener("click", toggle_playing) pri.addEventListener("mousedown", ev => { @@ -224,21 +229,22 @@ function send_player_progress(node_id: string, player: Player) { }, 10000) } -function mouse_idle(e: HTMLElement, timeout: number, cb: (b: boolean) => unknown) { +function mouse_idle(e: HTMLElement, timeout: number): OVar<boolean> { let ct: number; - let idle = false - e.onmouseleave = () => { clearTimeout(ct) } + const idle = new OVar(false) + // e.onmouseleave = () => { + // clearTimeout(ct) + // } e.onmousemove = () => { clearTimeout(ct) if (idle) { - idle = false - cb(idle) + idle.value = false } ct = setTimeout(() => { - idle = true - cb(idle) + idle.value = true }, timeout) } + return idle } function show_profile(profile: EncodingProfile): string { diff --git a/web/script/player/player.ts b/web/script/player/player.ts index 8fccb24..a5bccdb 100644 --- a/web/script/player/player.ts +++ b/web/script/player/player.ts @@ -97,7 +97,7 @@ export class Player { 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") } + catch (_) { this.set_pers("Error: Failed to fetch node user data") } if (userdata.error) return this.set_pers("server error: " + metadata.error) this.set_pers() diff --git a/web/script/player/profiles.ts b/web/script/player/profiles.ts index b23fbaf..021834c 100644 --- a/web/script/player/profiles.ts +++ b/web/script/player/profiles.ts @@ -25,8 +25,8 @@ export class ProfileSelector { ) { } async init() { - for (let id = 0; id < this.track.index.extra_profiles.length; id++) { - const p = this.track.index.extra_profiles[id]; + for (let id = 0; id < this.track.index!.extra_profiles.length; id++) { + const p = this.track.index!.extra_profiles[id]; if (!await test_media_capability(profile_to_partial_track(p))) continue this.profiles.push({ id, order: 0, ...p }) } diff --git a/web/script/transition.ts b/web/script/transition.ts index 4cbab41..ce0cd94 100644 --- a/web/script/transition.ts +++ b/web/script/transition.ts @@ -7,7 +7,7 @@ import { e } from "./jshelper/src/element.ts"; -const duration = 200 +const DURATION = 200 globalThis.addEventListener("DOMContentLoaded", () => { patch_page() }) @@ -79,7 +79,7 @@ function fade(dir: boolean) { overlay.style.backgroundColor = dir ? "black" : "transparent" overlay.style.animationName = dir ? "jst-fadeout" : "jst-fadein" overlay.style.animationFillMode = "forwards" - overlay.style.animationDuration = `${duration}ms` + overlay.style.animationDuration = `${DURATION}ms` document.body.appendChild(overlay) return new Promise<void>(res => { setTimeout(() => { @@ -88,6 +88,6 @@ function fade(dir: boolean) { overlay.append(spinner_element = e("div", { class: "jst-spinner" }, "This is a spinner.")) }, 500) res() - }, duration) + }, DURATION) }) } |