mirror/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-11-26 17:38:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update html/poketube.ejs

Browse source
This commit is contained in:
ashley 2024-07-20 15:36:47 +00:00
parent 098c13b966
commit 7260558276
1 changed files with 246 additions and 277 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

193
html/poketube.ejs
View file

@ -704,21 +704,22 @@ background-color: #0000;
</noscript> </noscript>
<script> <script>
const qua = new URLSearchParams(new URL(window.location.href).search).get("quality") || ""; const qua = new URLSearchParams(new URL(window.location.href).search).get("quality") || "";
const playSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>play-circle-outline</title><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" /></svg>'; const playSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>play-circle-outline</title><path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M10,16.5L16,12L10,7.5V16.5Z" /></svg>'
const pauseSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>pause-circle-outline</title><path d="M13,16V8H15V16H13M9,16V8H11V16H9M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>'; const pauseSVG = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>pause-circle-outline</title><path d="M13,16V8H15V16H13M9,16V8H11V16H9M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" /></svg>'
function csts(seconds) { function csts(seconds) {
var hours = Math.floor(seconds / 3600); var hours = Math.floor(seconds / 3600);
var minutes = Math.floor((seconds - (hours * 3600)) / 60); var minutes = Math.floor((seconds - (hours * 3600)) / 60);
var secs = Math.floor(seconds - (hours * 3600) - (minutes * 60)); var secs = Math.floor(seconds - (hours * 3600) - (minutes * 60));
if (hours === 0) { if (hours === 0) {
var timeString = minutes.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0'); var timeString = minutes.toString().padStart(2, '0') + ':' +
secs.toString().padStart(2, '0');
} else { } else {
var timeString = hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + secs.toString().padStart(2, '0'); var timeString = hours.toString().padStart(2, '0') + ':' +
minutes.toString().padStart(2, '0') + ':' +
secs.toString().padStart(2, '0');
} }
return timeString; return timeString;
} }
function cstsRemaining(totalTimeInSeconds, elapsedTimeInSeconds) { function cstsRemaining(totalTimeInSeconds, elapsedTimeInSeconds) {
var remainingSeconds = totalTimeInSeconds - elapsedTimeInSeconds; var remainingSeconds = totalTimeInSeconds - elapsedTimeInSeconds;
var hours = Math.floor(remainingSeconds / 3600); var hours = Math.floor(remainingSeconds / 3600);
@ -734,218 +735,187 @@ function cstsRemaining(totalTimeInSeconds, elapsedTimeInSeconds) {
return '-' + timeString; return '-' + timeString;
} }
function showErrorCard(e) { function showErrorCard(e) {
try { try {
switch (e.target.error.code) { switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED: case e.target.error.MEDIA_ERR_ABORTED:
return; return;
break;
case e.target.error.MEDIA_ERR_NETWORK: case e.target.error.MEDIA_ERR_NETWORK:
document.querySelector("div p span").innerText = "(Network error)"; document.querySelector("div p span").innerText = "(Network error)"
break; break;
case e.target.error.MEDIA_ERR_DECODE: case e.target.error.MEDIA_ERR_DECODE:
document.querySelector("div p span").innerText = "(Decode error/lack of browser support)"; document.querySelector("div p span").innerText = "(Decode error/lack of browser support)"
break; break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
document.querySelector("div p span").innerText = "(Network error or format not supported)"; document.querySelector("div p span").innerText = "(Network error or format not supported)"
break; break;
default: default:
document.querySelector("div p span").innerText = "(Unknown error)"; document.querySelector("div p span").innerText = "(Unknown error)"
break; break;
} }
} catch { }
document.querySelector("div p span").innerText = "(Network error)"; catch {
document.querySelector("div p span").innerText = "(Network error)"
} }
document.getElementById("buffer-failed-warning").style.display = "block"; document.getElementById("buffer-failed-warning").style.display = "block";
} }
let canPlayPause = true; let canPlayPause = true;
let didFirstTimePlay = false; let didFirstTimePlay = false;
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
//FIXME: saved playback intentionally overwritten
localStorage.setItem(`progress-${new URLSearchParams(window.location.search).get('v')}`, 0); localStorage.setItem(`progress-${new URLSearchParams(window.location.search).get('v')}`, 0);
// Controls and high-res playback
let setTime = false; //TODO - a
const seekbar = document.getElementById("duration-slider"); let setTime = false
const seekbar = document.getElementById("duration-slider")
const video = document.getElementById("video"); const video = document.getElementById("video");
let shouldUseRemaining = false; let shouldUseRemaining = false;
const timestamps = document.getElementById("timestamps"); const timestamps = document.getElementById("timestamps");
video.addEventListener("timeupdate", (event) => { video.addEventListener("timeupdate", (event) => {
seekbar.value = event.target.currentTime; seekbar.value = event.target.currentTime;
timestamps.innerText = shouldUseRemaining ? `${cstsRemaining(video.duration, video.currentTime)}/${csts(video.duration)}` : `${csts(video.currentTime)}/${csts(video.duration)}`; timestamps.innerText = shouldUseRemaining ? `${cstsRemaining(video.duration, video.currentTime)}/${csts(video.duration)}` : `${csts(video.currentTime)}/${csts(video.duration)}`;
}); });
timestamps.addEventListener("mouseover", () => { timestamps.addEventListener("mouseover", () => {
shouldUseRemaining = true; shouldUseRemaining = true;
timestamps.innerText = `${cstsRemaining(video.duration, video.currentTime)}/${csts(video.duration)}`; timestamps.innerText = `${cstsRemaining(video.duration, video.currentTime)}/${csts(video.duration)}`;
}); });
timestamps.addEventListener("mouseout", () => { timestamps.addEventListener("mouseout", () => {
shouldUseRemaining = false; shouldUseRemaining = false;
timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`; timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`;
}); });
// test
seekbar.addEventListener("input", (event) => { seekbar.addEventListener("input", (event) => {
video.pause(); video.pause()
canPlayPause = false; canPlayPause = false;
if(qua != "medium") { if(qua != "medium") {
aud.pause(); aud.pause()
aud.currentTime = event.target.value; aud.currentTime = event.target.value
} }
video.currentTime = event.target.value; video.currentTime = event.target.value
canPlayPause = true; canPlayPause = true;
setTimeout(()=>{ setTimeout(()=>{
video.play(); video.play();
aud.play(); aud.play();
}, 200); }, 200)
}); });
// Play/Pause
const playPauseButton = document.getElementById("play-pause"); const playPauseButton = document.getElementById("play-pause");
playPauseButton.innerHTML = pauseSVG; playPauseButton.innerHTML = pauseSVG;
function toggleVideo() { function toggleVideo() {
if(!canPlayPause) return; if(!canPlayPause) return;
if(document.getElementById("popupMenu").style.display == "none") { if(document.getElementById("popupMenu").style.display == "none") {
if(!document.fullscreen) { if(!document.fullscreen) {
if(!video.paused) { if(!video.paused) {
video.pause(); video.pause(); if(qua != "medium") { aud.pause(); } playPauseButton.innerHTML = playSVG;
if (qua != "medium") {
aud.pause();
} }
playPauseButton.innerHTML = playSVG; else {
} else { video.play(); if(qua != "medium") { aud.play(); } playPauseButton.innerHTML = pauseSVG;
video.play();
if (qua != "medium") {
aud.play();
}
playPauseButton.innerHTML = pauseSVG;
} }
} }
} else { }
document.getElementById("popupMenu").style.display = "none"; else {
document.getElementById("popupMenu").style.display = "none"
} }
} }
playPauseButton.addEventListener("click", () => { playPauseButton.addEventListener("click", () => {
toggleVideo(); toggleVideo()
}); });
video.addEventListener("pause", ()=>{if(qua != "medium") {aud.pause()}});
video.addEventListener("pause", () => { video.addEventListener("play", ()=>{if(qua != "medium") {aud.play()}})
if (qua != "medium") {
aud.pause();
}
});
video.addEventListener("play", () => {
if (qua != "medium") {
aud.play();
}
});
video.addEventListener("click", toggleVideo); video.addEventListener("click", toggleVideo);
video.addEventListener("dblclick", () => { video.addEventListener("dblclick", () => {
document.documentElement.requestFullscreen(); document.documentElement.requestFullscreen();
}); });
function handleVolumeChange(element) { function handleVolumeChange(element) {
switch (element.volume) { switch (element.volume) {
case 1: case 1:
element.volume = 0; element.volume = 0;
document.querySelector("#muteOption #new").innerText = "25%"; document.querySelector("#muteOption #new").innerText = "25%"
document.querySelector("#muteOption #current").innerText = "0%"; document.querySelector("#muteOption #current").innerText = "0%"
break; break;
case 0: case 0:
element.volume = 0.25; element.volume = 0.25;
document.querySelector("#muteOption #new").innerText = "50%"; document.querySelector("#muteOption #new").innerText = "50%"
document.querySelector("#muteOption #current").innerText = "25%"; document.querySelector("#muteOption #current").innerText = "25%"
break; break;
case 0.25: case 0.25:
element.volume = 0.5; element.volume = 0.5;
document.querySelector("#muteOption #new").innerText = "75%"; document.querySelector("#muteOption #new").innerText = "75%"
document.querySelector("#muteOption #current").innerText = "50%"; document.querySelector("#muteOption #current").innerText = "50%"
break; break;
case 0.5: case 0.5:
element.volume = 0.75; element.volume = 0.75;
document.querySelector("#muteOption #new").innerText = "100%"; document.querySelector("#muteOption #new").innerText = "100%"
document.querySelector("#muteOption #current").innerText = "75%"; document.querySelector("#muteOption #current").innerText = "75%"
break; break;
case 0.75: case 0.75:
element.volume = 1; element.volume = 1;
document.querySelector("#muteOption #new").innerText = "0%"; document.querySelector("#muteOption #new").innerText = "0%"
document.querySelector("#muteOption #current").innerText = "100%"; document.querySelector("#muteOption #current").innerText = "100%"
break; break;
default: default:
element.volume = 1; element.volume = 1;
document.querySelector("#muteOption #new").innerText = "0%"; document.querySelector("#muteOption #new").innerText = "0%"
document.querySelector("#muteOption #current").innerText = "100%"; document.querySelector("#muteOption #current").innerText = "100%"
break; break;
} }
} }
document.getElementById("muteOption").addEventListener("click", () => { document.getElementById("muteOption").addEventListener("click", () => {
if(qua != "medium") { if(qua != "medium") {
handleVolumeChange(aud); handleVolumeChange(aud)
} else { }
handleVolumeChange(video); else {
handleVolumeChange(video)
} }
}); });
document.getElementById("syncOption").addEventListener("click", () => { document.getElementById("syncOption").addEventListener("click", () => {
aud.pause(); aud.pause(); video.pause(); playPauseButton.innerHTML = playSVG;
video.pause();
playPauseButton.innerHTML = playSVG;
video.currentTime > aud.currentTime ? aud.currentTime = video.currentTime : video.currentTime = aud.currentTime; video.currentTime > aud.currentTime ? aud.currentTime = video.currentTime : video.currentTime = aud.currentTime;
playPauseButton.innerHTML = pauseSVG; playPauseButton.innerHTML = pauseSVG;
}); });
setTimeout(()=>{ setTimeout(()=>{
if(!didFirstTimePlay) { if(!didFirstTimePlay) {
video.addEventListener("seeked", (event) => { video.addEventListener("seeked", (event) => {
setTimeout(()=>{ setTimeout(()=>{
canPlayPause = true; canPlayPause = true;
if(video.currentTime==0||aud.currentTime==0) return; if(video.currentTime==0||aud.currentTime==0) return;
video.pause(); video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG;
aud.pause(); },1)
playPauseButton.innerHTML = playSVG;
}, 1);
}); });
aud.addEventListener("seeked", (event) => { aud.addEventListener("seeked", (event) => {
setTimeout(()=>{ setTimeout(()=>{
if(video.currentTime==0||aud.currentTime==0) return; if(video.currentTime==0||aud.currentTime==0) return;
video.pause(); video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG;
aud.pause(); },1)
playPauseButton.innerHTML = playSVG;
}, 1);
}); });
didFirstTimePlay = true; didFirstTimePlay = true;
} }
}, 100); },100)
document.addEventListener("fullscreenchange", function() { document.addEventListener("fullscreenchange", function() {
if(document.fullscreen) { if(document.fullscreen) {
video.controlsList = "noplaybackrate nodownload"; video.controlsList = "noplaybackrate nodownload"
window.onscroll = function () { window.scrollTo(0, 0); }; window.onscroll = function () { window.scrollTo(0, 0); };
document.documentElement.style.overflow = "hidden"; document.documentElement.style.overflow = "hidden"
video.controls = true; video.controls = true;
} }
if(!document.fullscreen) { if(!document.fullscreen) {
video.controlsList = ""; video.controlsList = ""
window.onscroll = null; window.onscroll = null;
document.documentElement.style.overflow = null; document.documentElement.style.overflow = null
video.controls = false; video.controls = false;
} }
}); });
video.addEventListener("fullscreenchange", () => { video.addEventListener("fullscreenchange", () => {
video.fullscreen = false; video.fullscreen = false;
document.exitFullscreen(); document.exitFullscreen();
}); });
video.addEventListener("contextmenu", (event) => { video.addEventListener("contextmenu", (event) => {
if(document.fullscreen) { if(document.fullscreen) {
event.preventDefault(); event.preventDefault()
const popupMenu = document.getElementById('popupMenu'); const popupMenu = document.getElementById('popupMenu');
if (popupMenu) { if (popupMenu) {
const xPosition = event.clientX + window.pageXOffset; const xPosition = event.clientX + window.pageXOffset;
@ -953,55 +923,54 @@ document.addEventListener("DOMContentLoaded", () => {
popupMenu.style.left = `${xPosition}px`; popupMenu.style.left = `${xPosition}px`;
popupMenu.style.top = `${yPosition}px`; popupMenu.style.top = `${yPosition}px`;
} }
popupMenu.style.display = "block"; popupMenu.style.display = "block"
} }
}); });
function startPlayback() { function startPlayback() {
seekbar.max = video.duration; // Final prepare
seekbar.max = video.duration
const timestamps = document.getElementById("timestamps"); const timestamps = document.getElementById("timestamps");
timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`; timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`;
// Show controls
try { try {
playPauseButton.innerHTML = pauseSVG; playPauseButton.innerHTML = pauseSVG;
vid.play(); vid.play();
aud.play(); aud.play();
didFirstTimePlay = true; didFirstTimePlay = true;
} catch {}
}
catch {}
if(!setTime) { if(!setTime) {
aud.currentTime = 0; //FIXME: saved playback intentionally overwritten
vid.currentTime = 0; aud.currentTime = 0
seekbar.value = 0; vid.currentTime = 0
setTime = true; seekbar.value = 0
setTime = true
} }
setTimeout(()=>{ setTimeout(()=>{
video.addEventListener("seeking", (event) => { video.addEventListener("seeking", (event) => {
if(!didFirstTimePlay) return; if(!didFirstTimePlay) return;
if(qua != "medium") { if(qua != "medium") {
video.pause(); video.pause()
canPlayPause = false; canPlayPause = false;
aud.pause(); aud.pause()
aud.currentTime = event.target.currentTime; aud.currentTime = event.target.currentTime
} }
}); });
}, 500); }, 500)
} }
const aud = document.getElementById("aud"); const aud = document.getElementById("aud");
const vid = document.getElementById("video"); const vid = document.getElementById("video");
function shouldPlay() { function shouldPlay() {
if(vid.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA && aud.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA) { if(vid.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA && aud.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA) {
startPlayback(); startPlayback();
} }
} }
aud.addEventListener("canplaythrough", shouldPlay); aud.addEventListener("canplaythrough", shouldPlay);
vid.addEventListener("canplaythrough", shouldPlay); vid.addEventListener("canplaythrough", shouldPlay);
}); })
</script> </script>
<% if(shortsui) { %> <% if(shortsui) { %>
<script> <script>