1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
/*
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 <metamuffin.org>
*/
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"
const pri = document.createElement("div")
pri.classList.add("pri")
const pri_current = document.createElement("div")
pri_current.style.width = "0px"
pri_current.classList.add("pri-current")
pri.append(pri_current)
controls.append(pause_button, pri, fullscreen_button)
d.append(controls)
e.onloadedmetadata = () => {
}
e.ondurationchange = () => {
}
e.ontimeupdate = () => {
pri_current.style.width = (e.currentTime / e.duration * 100) + "%"
}
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", () => {
if (document.fullscreenElement) document.exitFullscreen()
else document.documentElement.requestFullscreen()
})
document.body.addEventListener("keypress", k => {
if (k.code == "Period") e.seekToNextFrame()
else if (k.code == "Space") toggle_playing()
else return;
k.preventDefault()
})
}
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)
}
}
|
