fix stuff

html/poketube.ejs

@@ -697,7 +697,7 @@ background-color: #0000;
   </style>
 </noscript>
 <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 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>'
 
@@ -743,9 +743,11 @@ document.addEventListener("DOMContentLoaded", () => {
   localStorage.setItem(`progress-${new URLSearchParams(window.location.search).get('v')}`, 0);
   // Controls and high-res playback
   //TODO - a
-  let setTime = false
-  const seekbar = document.getElementById("duration-slider")
+  let setTime = false;
+  const seekbar = document.getElementById("duration-slider");
   const video = document.getElementById("video");
+  const aud = document.getElementById("aud");
+  
   video.addEventListener("timeupdate", (event) => {
     seekbar.value = event.target.currentTime;
     const timestamps = document.getElementById("timestamps");
@@ -764,6 +766,7 @@ document.addEventListener("DOMContentLoaded", () => {
   // Play/Pause
   const playPauseButton = document.getElementById("play-pause");
   playPauseButton.innerHTML = pauseSVG;
+  
   function toggleVideo() {
     if (document.getElementById("popupMenu").style.display == "none") {
       if (!document.fullscreen) {
@@ -785,13 +788,17 @@ document.addEventListener("DOMContentLoaded", () => {
       document.getElementById("popupMenu").style.display = "none";
     }
   }
+  
   playPauseButton.addEventListener("click", () => {
     toggleVideo();
   });
+  
   video.addEventListener("click", toggleVideo);
+  
   video.addEventListener("dblclick", () => {
     document.documentElement.requestFullscreen();
   });
+  
   document.getElementById("muteOption").addEventListener("click", () => {
     if (qua != "medium") {
       aud.volume == 0 ? aud.volume = 1 : aud.volume = 0;
@@ -799,12 +806,14 @@ document.addEventListener("DOMContentLoaded", () => {
       video.volume == 0 ? video.volume = 1 : video.volume = 0;
     }
   });
+  
   document.getElementById("syncOption").addEventListener("click", () => {
     video.pause();
     aud.pause();
     playPauseButton.innerHTML = playSVG;
     video.currentTime > aud.currentTime ? aud.currentTime = video.currentTime : video.currentTime = aud.currentTime;
   });
+  
   document.addEventListener("fullscreenchange", function() {
     if (document.fullscreen) {
       video.controlsList = "noplaybackrate nodownload";
@@ -819,10 +828,12 @@ document.addEventListener("DOMContentLoaded", () => {
       video.controls = false;
     }
   });
+  
   video.addEventListener("fullscreenchange", () => {
     video.fullscreen = false;
     document.exitFullscreen();
   });
+  
   video.addEventListener("contextmenu", (event) => {
     if (document.fullscreen) {
       event.preventDefault();
@@ -837,6 +848,18 @@ document.addEventListener("DOMContentLoaded", () => {
     }
   });
 
+  video.addEventListener("waiting", () => {
+    if (qua != "medium") {
+      aud.pause();
+    }
+  });
+
+  video.addEventListener("playing", () => {
+    if (qua != "medium" && !video.paused) {
+      aud.play();
+    }
+  });
+
   function startPlayback() {
     // Final prepare
     seekbar.max = video.duration;
@@ -880,32 +903,29 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   let shouldPlay = 0;
-  const aud = document.getElementById("aud");
-  const vid = document.getElementById("video");
 
   function checkReadyState() {
-    if (vid.readyState >= 3) { // HAVE_FUTURE_DATA or higher
+    if (video.readyState >= 3) { // HAVE_FUTURE_DATA or higher
       if (aud.readyState < 3) {
         aud.load(); // load the audio if not ready
       }
-      if (vid.readyState >= 3 && aud.readyState >= 3) {
-        startPlayback();
-      }
     }
   }
 
-  vid.addEventListener("canplay", () => {
-    shouldPlay++;
-    if (shouldPlay >= 2) {
-      checkReadyState();
-      shouldPlay = 0;
-    }
-  });
-
   aud.addEventListener("canplay", () => {
     shouldPlay++;
     if (shouldPlay >= 2) {
       checkReadyState();
+      startPlayback();
+      shouldPlay = 0;
+    }
+  });
+
+  video.addEventListener("canplay", () => {
+    shouldPlay++;
+    if (shouldPlay >= 2) {
+      checkReadyState();
+      startPlayback();
       shouldPlay = 0;
     }
   });