/* 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 */ globalThis.addEventListener("load", () => { for (const e of document.getElementsByTagName("video")) patch_video(e) }) function patch_video(e) { // move the video to a div const d = document.createElement("div") const p = e.parentElement p.removeChild(e) d.appendChild(e) p.prepend(d) e.removeAttribute("controls") d.classList.add("js-player") const controls = document.createElement("div") controls.classList.add("controls") const pause_button = document.createElement("button") pause_button.textContent = "|>" const fullscreen_button = document.createElement("button") fullscreen_button.style.float = "right" fullscreen_button.textContent = "X" controls.append(pause_button, fullscreen_button) d.append(controls) e.onplay = () => { pause_button.textContent = "..." } e.onwaiting = () => { pause_button.textContent = "..." } e.onplaying = () => { pause_button.textContent = "||" } e.onpause = () => { pause_button.textContent = "|>" } const toggle_playing = () => e.paused ? e.play() : e.pause() mouse_idle(e, 1000, idle => { controls.style.opacity = idle ? 0 : 1 e.style.cursor = idle ? "none" : "default" }) e.addEventListener("click", toggle_playing) pause_button.addEventListener("click", toggle_playing) fullscreen_button.addEventListener("click", () => document.body.requestFullscreen()) } function mouse_idle(e, timeout, cb) { let ct; let idle = false e.onmouseleave = () => { clearTimeout(ct) } e.onmousemove = () => { clearTimeout(ct) if (idle) { idle = false cb(idle) } ct = setTimeout(() => { idle = true cb(idle) }, timeout) } }