html player

This commit is contained in:
j 2026-02-04 16:36:13 +01:00
commit 74f8e1a387

View file

@ -60,8 +60,8 @@
/* Grid container */ /* Grid container */
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(10, 70px); grid-template-columns: repeat(10, 150px);
grid-template-rows: repeat(3, 70px); grid-template-rows: repeat(3, 150px);
gap: 12px; gap: 12px;
justify-content: center; justify-content: center;
align-content: center; align-content: center;
@ -76,7 +76,7 @@
background: rgba(0,0,0, 0.6); background: rgba(0,0,0, 0.6);
border: 2px solid #333; border: 2px solid #333;
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 16px;
transition: background 0.2s ease, transform 0.2s ease; transition: background 0.2s ease, transform 0.2s ease;
&.current { &.current {
background: #909090; background: #909090;
@ -269,11 +269,9 @@
} }
} }
function play() { function play() {
let blocked = false, loading let blocked = false, loading
isPlaying = true
document.querySelectorAll("video,audio").forEach(async (media) => { document.querySelectorAll("video,audio").forEach(async (media) => {
if (blocked) { return } if (blocked) { return }
return media.play().then(() => { return media.play().then(() => {
@ -305,11 +303,28 @@
}) })
} }
function pause() { function pause() {
document.createElementAll("video,audio").forEach(media => { isPlaying = false
media.paused = true document.querySelectorAll("video,audio").forEach(media => {
media.pause()
}) })
} }
var isPlaying = false
function toggle() {
if (isPlaying) {
pause()
} else {
play()
}
}
window.addEventListener('keydown', event => {
console.log('keydown')
if (event.key == " ") {
toggle()
}
});
function render() { function render() {
name = document.location.hash.slice(1) name = document.location.hash.slice(1)
console.log('on load', name) console.log('on load', name)
@ -338,7 +353,8 @@
for (let i = 1; i <= 30; i++) { for (let i = 1; i <= 30; i++) {
const box = document.createElement("div"); const box = document.createElement("div");
box.className = "box box" + i; box.className = "box box" + i;
box.textContent = i; box.textContent = titles[i - 1];
box.dataset.id = i - 1
box.addEventListener("mouseenter", () => { box.addEventListener("mouseenter", () => {
titleEl.textContent = titles[i - 1]; titleEl.textContent = titles[i - 1];
@ -348,9 +364,9 @@
titleEl.textContent = ""; titleEl.textContent = "";
}); });
box.addEventListener("click", () => { box.addEventListener("click", () => {
console.log("clicked", box.textContent) console.log("clicked", box.dataset.id)
document.querySelector(".page").style.display = "" document.querySelector(".page").style.display = ""
current = parseInt(box.textContent) - 1 current = parseInt(box.dataset.id) - 1
nextVideo.src = prefix + name + playlist[current] nextVideo.src = prefix + name + playlist[current]
fetch(nextVideo.src.replace(/.mp4/, '.ass') + '?' +random).then(async (res) => { fetch(nextVideo.src.replace(/.mp4/, '.ass') + '?' +random).then(async (res) => {
const content = await res.text() const content = await res.text()