This commit is contained in:
ashley 2024-07-06 16:31:21 +00:00
parent 90910bfee4
commit fc08e94049

View file

@ -658,6 +658,7 @@ background-color: #0000;
} }
#timestamps { #timestamps {
margin-right: 40px; margin-right: 40px;
text-shadow: 1px 1px 2px black;
} }
html:fullscreen video { html:fullscreen video {
display: block !important; display: block !important;
@ -739,6 +740,7 @@ background-color: #0000;
} }
document.getElementById("buffer-failed-warning").style.display = "block"; document.getElementById("buffer-failed-warning").style.display = "block";
} }
let canPlayPause = true;
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
//FIXME: saved playback intentionally overwritten //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);
@ -754,6 +756,7 @@ background-color: #0000;
}); });
seekbar.addEventListener("input", (event) => { seekbar.addEventListener("input", (event) => {
video.pause() video.pause()
canPlayPause = false;
if(qua != "medium") { if(qua != "medium") {
aud.pause() aud.pause()
aud.currentTime = event.target.value aud.currentTime = event.target.value
@ -762,9 +765,11 @@ background-color: #0000;
}); });
// Play/Pause // 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(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) {
@ -795,8 +800,9 @@ background-color: #0000;
} }
}); });
document.getElementById("syncOption").addEventListener("click", () => { document.getElementById("syncOption").addEventListener("click", () => {
video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG; aud.pause(); 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;
}); });
document.addEventListener("fullscreenchange", function() { document.addEventListener("fullscreenchange", function() {
if(document.fullscreen) { if(document.fullscreen) {
@ -834,24 +840,17 @@ background-color: #0000;
seekbar.max = video.duration 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)}`;
// Media controls fix video.addEventListener("seeked", (event) => {
if(qua != "medium") { setTimeout(()=>{
aud.addEventListener("pause", () => { canPlayPause = true;
vid.pause(); playPauseButton.innerHTML = playSVG; video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG;
},1)
}); });
aud.addEventListener("play", () => { aud.addEventListener("seeked", (event) => {
vid.play(); playPauseButton.innerHTML = pauseSVG; setTimeout(()=>{
video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG;
},1)
}); });
vid.addEventListener("pause", () => {
aud.pause(); playPauseButton.innerHTML = playSVG;
});
vid.addEventListener("play", () => {
aud.play(); playPauseButton.innerHTML = pauseSVG;
});
aud.addEventListener("timechange", () => {
vid.currentTime = aud.currentTime;
});
}
// Show controls // Show controls
try { try {
vid.play(); vid.play();
@ -868,23 +867,15 @@ background-color: #0000;
} }
} }
let shouldPlay = 0;
const aud = document.getElementById("aud"); const aud = document.getElementById("aud");
const vid = document.getElementById("video"); const vid = document.getElementById("video");
aud.addEventListener("canplay", () => { function shouldPlay() {
shouldPlay++; if(vid.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA && aud.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA) {
if(shouldPlay >= 2) {
startPlayback(); startPlayback();
shouldPlay = 0;
} }
});
vid.addEventListener("canplay", () => {
shouldPlay++;
if(shouldPlay >= 2) {
startPlayback();
shouldPlay = 0;
} }
}); aud.addEventListener("canplaythrough", shouldPlay);
vid.addEventListener("canplaythrough", shouldPlay);
}) })
</script> </script>
<% if(shortsui) { %> <% if(shortsui) { %>