0x2620/pandora_p_for_power
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update player

Browse source
This commit is contained in:
j 2026-02-01 22:12:11 +01:00
commit 6ba0f229be
1 changed files with 115 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

124
player/html/index.html
View file

@ -17,6 +17,29 @@
height: 100%; height: 100%;
font-family: Menlo, sans-serif; font-family: Menlo, sans-serif;
} }
#click-to-play {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #000000;
color: white;
display: flex;
justify-content: center;
z-index: 10;
cursor: pointer;
}
#click-to-play .text {
font-size: 16px;
width: 80%;
margin: auto;
text-align: center;
}
/* Full page container */ /* Full page container */
.page { .page {
@ -55,6 +78,9 @@
cursor: pointer; cursor: pointer;
font-size: 18px; font-size: 18px;
transition: background 0.2s ease, transform 0.2s ease; transition: background 0.2s ease, transform 0.2s ease;
&.current {
background: #909090;
}
} }
.box:hover { .box:hover {
@ -106,6 +132,7 @@
<body> <body>
<script> <script>
const random = +new Date
const sub_handlers = {}; const sub_handlers = {};
var playlist = [ var playlist = [
@ -160,7 +187,7 @@
nextVideo = currentVideo nextVideo = currentVideo
currentVideo = next currentVideo = next
sub_handlers[nextVideo.id]?.destroy() sub_handlers[nextVideo.id]?.destroy()
fetch(nextVideo.src.replace(/.mp4/, '.ass')).then(async (res) => { fetch(nextVideo.src.replace(/.mp4/, '.ass') + '?' +random ).then(async (res) => {
const content = await res.text() const content = await res.text()
const ass = new ASS(content, nextVideo, { const ass = new ASS(content, nextVideo, {
container: subtitles, container: subtitles,
@ -203,6 +230,86 @@
]; ];
function bindFullscreen() {
window.addEventListener('keydown', event => {
console.log('keydown')
event.stopPropagation()
});
window.addEventListener('mousedown', event => {
console.log('mousedown')
toggleFullscreen()
event.preventDefault()
event.stopPropagation()
});
window.addEventListener('touchstart', event => {
event.preventDefault()
event.stopPropagation()
});
}
function toggleFullscreen() {
var body = document.querySelector('body')
if (!(document.fullscreenElement === null || document.webkitFullscreenElement === null)) {
if (document.fullscreenElement) {
document.exitFullscreen()
}
if (document.webkitFullscreenElement) {
document.webkitExitFullscreen()
}
} else {
console.log('enter fullscreen?')
if (body.webkitRequestFullscreen) {
body.webkitRequestFullscreen({navigationUI: 'hide'})
} else {
body.requestFullscreen({navigationUI: 'hide'}).catch(err => {
console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
}
}
}
function play() {
let blocked = false, loading
document.querySelectorAll("video,audio").forEach(async (media) => {
if (blocked) { return }
return media.play().then(() => {
if (media.classList.contains('next')) {
media.pause()
}
}).catch(error => {
if (blocked) {
return
}
blocked = true
loading = document.createElement('div')
loading.id = 'click-to-play'
loading.innerHTML = '<div class="text"><h1>P for Power</h1><p>click to start</p></div>'
document.body.appendChild(loading)
function removeBehaviorsRestrictions() {
loading.remove()
window.removeEventListener('keydown', removeBehaviorsRestrictions);
window.removeEventListener('mousedown', removeBehaviorsRestrictions);
window.removeEventListener('touchstart', removeBehaviorsRestrictions);
blocked = false
play()
toggleFullscreen()
}
window.addEventListener('keydown', removeBehaviorsRestrictions);
window.addEventListener('mousedown', removeBehaviorsRestrictions);
window.addEventListener('touchstart', removeBehaviorsRestrictions);
})
})
}
function pause() {
document.createElementAll("video,audio").forEach(media => {
media.paused = true
})
}
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)
@ -211,7 +318,6 @@
name = parts[0] name = parts[0]
current = parseInt(parts[1]) - 1 current = parseInt(parts[1]) - 1
} }
console.log('on load', name, parts, current)
var body = document.querySelector('body') var body = document.querySelector('body')
body.innerHTML = `` body.innerHTML = ``
var stage = document.createElement("div") var stage = document.createElement("div")
@ -231,7 +337,7 @@
const titleEl = overlay.querySelector("#title"); const titleEl = overlay.querySelector("#title");
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.className = "box box" + i;
box.textContent = i; box.textContent = i;
box.addEventListener("mouseenter", () => { box.addEventListener("mouseenter", () => {
@ -246,7 +352,7 @@
document.querySelector(".page").style.display = "" document.querySelector(".page").style.display = ""
current = parseInt(box.textContent) - 1 current = parseInt(box.textContent) - 1
nextVideo.src = prefix + name + playlist[current] nextVideo.src = prefix + name + playlist[current]
fetch(nextVideo.src.replace(/.mp4/, '.ass')).then(async (res) => { fetch(nextVideo.src.replace(/.mp4/, '.ass') + '?' +random).then(async (res) => {
const content = await res.text() const content = await res.text()
const ass = new ASS(content, nextVideo, { const ass = new ASS(content, nextVideo, {
container: subtitles, container: subtitles,
@ -289,7 +395,6 @@
audio2.controls = false audio2.controls = false
audio2.volume = 1 audio2.volume = 1
audio2.loop = true audio2.loop = true
audio2.autoplay = true
audio2.classList.add("forest") audio2.classList.add("forest")
body.appendChild(audio2) body.appendChild(audio2)
@ -298,7 +403,6 @@
audio3.controls = false audio3.controls = false
audio3.volume = 1 audio3.volume = 1
audio3.loop = true audio3.loop = true
audio3.autoplay = true
audio3.currentTime = Math.random() * 60 audio3.currentTime = Math.random() * 60
audio3.classList.add("music") audio3.classList.add("music")
body.appendChild(audio3) body.appendChild(audio3)
@ -308,17 +412,19 @@
media.addEventListener('pause', sync) media.addEventListener('pause', sync)
media.addEventListener('click', () => { media.addEventListener('click', () => {
document.querySelector(".page").style.display = "flex" document.querySelector(".page").style.display = "flex"
document.querySelectorAll('.box').forEach(box => { box.classList.remove('current') })
document.querySelector('.box' + current).classList.add('current')
}) })
}) })
fetch(video1.src.replace(/.mp4/, '.ass')).then(async (res) => { fetch(video1.src.replace(/.mp4/, '.ass') + '?' +random).then(async (res) => {
const content = await res.text() const content = await res.text()
const ass = new ASS(content, video1, { const ass = new ASS(content, video1, {
container: subtitles, container: subtitles,
}); });
sub_handlers[video1.id] = ass sub_handlers[video1.id] = ass
sub_handlers[video1.id].show() sub_handlers[video1.id].show()
video1.play() play()
fetch(video2.src.replace(/.mp4/, '.ass')).then(async (res) => { fetch(video2.src.replace(/.mp4/, '.ass')+ '?' +random).then(async (res) => {
const content = await res.text() const content = await res.text()
const ass = new ASS(content, video2, { const ass = new ASS(content, video2, {
container: subtitles, container: subtitles,