diff --git a/html/poketube.ejs b/html/poketube.ejs index 081ed59d..313f0fde 100644 --- a/html/poketube.ejs +++ b/html/poketube.ejs @@ -658,6 +658,7 @@ background-color: #0000; } #timestamps { margin-right: 40px; + text-shadow: 1px 1px 2px black; } html:fullscreen video { display: block !important; @@ -739,6 +740,7 @@ background-color: #0000; } document.getElementById("buffer-failed-warning").style.display = "block"; } + let canPlayPause = true; document.addEventListener("DOMContentLoaded", () => { //FIXME: saved playback intentionally overwritten localStorage.setItem(`progress-${new URLSearchParams(window.location.search).get('v')}`, 0); @@ -754,6 +756,7 @@ background-color: #0000; }); seekbar.addEventListener("input", (event) => { video.pause() + canPlayPause = false; if(qua != "medium") { aud.pause() aud.currentTime = event.target.value @@ -762,9 +765,11 @@ background-color: #0000; }); // Play/Pause + const playPauseButton = document.getElementById("play-pause"); playPauseButton.innerHTML = pauseSVG; function toggleVideo() { + if(!canPlayPause) return; if(document.getElementById("popupMenu").style.display == "none") { if(!document.fullscreen) { if(!video.paused) { @@ -795,8 +800,9 @@ background-color: #0000; } }); 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; + playPauseButton.innerHTML = pauseSVG; }); document.addEventListener("fullscreenchange", function() { if(document.fullscreen) { @@ -834,24 +840,17 @@ background-color: #0000; seekbar.max = video.duration const timestamps = document.getElementById("timestamps"); timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`; - // Media controls fix - if(qua != "medium") { - aud.addEventListener("pause", () => { - vid.pause(); playPauseButton.innerHTML = playSVG; - }); - aud.addEventListener("play", () => { - vid.play(); playPauseButton.innerHTML = pauseSVG; - }); - vid.addEventListener("pause", () => { - aud.pause(); playPauseButton.innerHTML = playSVG; - }); - vid.addEventListener("play", () => { - aud.play(); playPauseButton.innerHTML = pauseSVG; - }); - aud.addEventListener("timechange", () => { - vid.currentTime = aud.currentTime; - }); - } + video.addEventListener("seeked", (event) => { + setTimeout(()=>{ + canPlayPause = true; + video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG; + },1) + }); + aud.addEventListener("seeked", (event) => { + setTimeout(()=>{ + video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG; + },1) + }); // Show controls try { vid.play(); @@ -868,23 +867,15 @@ background-color: #0000; } } - let shouldPlay = 0; const aud = document.getElementById("aud"); const vid = document.getElementById("video"); - aud.addEventListener("canplay", () => { - shouldPlay++; - if(shouldPlay >= 2) { + function shouldPlay() { + if(vid.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA && aud.readyState === HTMLMediaElement.HAVE_ENOUGH_DATA) { startPlayback(); - shouldPlay = 0; } - }); - vid.addEventListener("canplay", () => { - shouldPlay++; - if(shouldPlay >= 2) { - startPlayback(); - shouldPlay = 0; - } - }); + } + aud.addEventListener("canplaythrough", shouldPlay); + vid.addEventListener("canplaythrough", shouldPlay); }) <% if(shortsui) { %>