add hd video!!

html/poketube.ejs

@@ -589,8 +589,258 @@ background-color: #0000;
    position: sticky; 
    background:#0009; 
     top: 0;
+  
 }
+  #controls {
+    display: flex;
+    visibility: hidden;
+    position: absolute;
+    bottom: 0;
+    margin-bottom: 70px  !important;
+    margin: 0 20px;
+    width: 100%;
+    align-items:flex-end;
+  }
+  video:hover~#controls, #controls:hover {
+    visibility: visible;
+  }
+  .control-button {
+    width: 40px;
+    border-radius: 5px;
+    margin-bottom: 6px;
+    padding: 3px
+  }
+  .video-player-container {
+    position: relative;
+  }
+  .control-button svg {
+    fill: #c59cd0;
+    width: 40px;
+    margin-bottom: -6px;
+  }
+  #seekbar {
+    display: flex;
+    margin-left: 20px;
+    margin-right: 20px;
+    width: 100%;
+  }
+  input[id*="-slider"] {
+    flex-grow: 1;
+    -webkit-appearance: none;
+    appearance: none;
+    background: #ffffff;
+    border: 1px solid #000000;
+    margin-bottom: 23px;
+    cursor: pointer;
+    width: 0.5rem;
+    height: 5px !important;
+    display: block;
+    border-radius: 50px;
+  }
+  input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: 1px solid #000000;
+    height: 21px;
+    width: 21px;
+    border-radius: 20px;
+    background: var(--div-gradient);
+    cursor: pointer;
+    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  }
+  input[type=range]::-moz-range-thumb {
+    border: 1px solid #000000;
+    height: 21px;
+    width: 21px;
+    border-radius: 20px;
+    background: var(--div-gradient);
+    cursor: pointer;
+    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
+  }
+  #timestamps {
+    margin-right: 40px;
+  }
+  html:fullscreen video {
+    display: block !important;
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    z-index: 999999 !important;
+  }
+  html:fullscreen *:not(html, video, body, ptd-app-ejs, .app, .watch-page, .primary, .video-player-container, #popupMenu, #popupMenu *) {
+    visibility: hidden !important;
+  }
 </style>
+<noscript>
+  <style>
+    #controls {
+      display: none !important;
+    }
+  </style>
+</noscript>
+<script>
+  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>'
+  function csts(seconds) {
+    var hours = Math.floor(seconds / 3600);
+    var minutes = Math.floor((seconds - (hours * 3600)) / 60);
+    var secs = Math.floor(seconds - (hours * 3600) - (minutes * 60));
+    if (hours === 0) {
+        var timeString = minutes.toString().padStart(2, '0') + ':' +
+          secs.toString().padStart(2, '0');
+    } else {
+        var timeString = hours.toString().padStart(2, '0') + ':' +
+          minutes.toString().padStart(2, '0') + ':' +
+          secs.toString().padStart(2, '0');
+    }
+    return timeString;
+}
+  document.addEventListener("DOMContentLoaded", () => {
+    //FIXME: saved playback intentionally overwritten
+    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")
+    const video = document.getElementById("video");
+    let previousTimestamp = 0;
+    video.addEventListener("timeupdate", (event) => {
+      seekbar.value = event.target.currentTime;
+      const timestamps = document.getElementById("timestamps");
+      timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`;
+      if(event.target.currentTime - previousTimestamp >= 5 || event.target.currentTime - previousTimestamp <= -5) {
+        console.log("GAY")
+        aud.currentTime = event.target.currentTime;
+      }
+      previousTimestamp = event.target.currentTime;
+    });
+      seekbar.addEventListener("input", (event) => {
+          video.pause()
+          aud.pause()
+          aud.currentTime = event.target.value
+          video.currentTime = event.target.value
+      });
+      
+      // Play/Pause
+      const playPauseButton = document.getElementById("play-pause");
+      playPauseButton.innerHTML = pauseSVG;
+      function toggleVideo() {    
+          if(document.getElementById("popupMenu").style.display == "none") {
+            if(!document.fullscreen) {
+              if(!video.paused) {
+              video.pause(); aud.pause(); playPauseButton.innerHTML = playSVG;
+            }
+            else {
+              video.play(); aud.play(); playPauseButton.innerHTML = pauseSVG;
+            }
+            }
+          }
+          else {
+            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", () => {
+        aud.volume == 0 ? aud.volume = 1 : aud.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"
+          window.onscroll = function () { window.scrollTo(0, 0); };
+          document.documentElement.style.overflow = "hidden"
+          video.controls = true;
+        }
+        if(!document.fullscreen) {
+          video.controlsList = ""
+          window.onscroll = null;
+          document.documentElement.style.overflow = null
+          video.controls = false;
+        }
+      });
+      video.addEventListener("fullscreenchange", () => {
+        video.fullscreen = false;
+        document.exitFullscreen();
+      });
+      video.addEventListener("contextmenu", (event) => {
+        if(document.fullscreen) {
+          event.preventDefault()
+          const popupMenu = document.getElementById('popupMenu');
+          if (popupMenu) {
+            const xPosition = event.clientX + window.pageXOffset;
+            const yPosition = event.clientY + window.pageYOffset;
+            popupMenu.style.left = `${xPosition}px`;
+            popupMenu.style.top = `${yPosition}px`;
+          }
+          popupMenu.style.display = "block"
+        }
+      });
+    function startPlayback() {
+        // Final prepare
+        seekbar.max = video.duration
+        const timestamps = document.getElementById("timestamps");
+        timestamps.innerText = `${csts(video.currentTime)}/${csts(video.duration)}`;
+        // Media controls fix
+        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;
+        });
+        // Show controls
+        try {
+          aud.play();
+          vid.play();
+        }
+        catch {}
+        
+        if(!setTime) {
+          //FIXME: saved playback intentionally overwritten
+          aud.currentTime = 0
+          vid.currentTime = 0
+          seekbar.value = 0
+          setTime = true
+        }
+        
+    }
+    let shouldPlay = 0;
+    const aud = document.getElementById("aud");
+    const vid = document.getElementById("video");
+    aud.addEventListener("canplay", () => {
+      shouldPlay++;
+      if(shouldPlay >= 2) {
+        startPlayback();
+        shouldPlay = 0;
+      }
+    });
+    vid.addEventListener("canplay", () => {
+      shouldPlay++;
+      if(shouldPlay >= 2) {
+        startPlayback();
+        shouldPlay = 0;
+      }
+    });
+  })
+</script>
          <% if(shortsui) { %>
                                                        <script>
         // Function to apply styles after DOM has loaded
@@ -955,7 +1205,7 @@ Offical Discord Server! :3
                   
                    <% if (isvidious) { %>
                    <% if (!qua) { %>          
-                                                 <a href="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" style="color: #fff;" target="_blank">
+                                                 <a href="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=22&local=true" style="color: #fff;" target="_blank">
           <i class="fa-light fa-arrow-up-right-from-square"></i> Open video in new tab
 </a>
 
@@ -992,6 +1242,12 @@ Offical Discord Server! :3
               </div>
                 <div id="loopOption"> 
         <i class="fa-light fa-repeat"> </i> Loop Video
+              </div>
+              <div id="muteOption"> 
+                <i class="fa-light fa-volume-xmark"> </i> Mute/Unmute
+                      </div>
+              <div id="syncOption"> 
+                <i class="fa-light fa-rotate"> </i> Sync Audio/Video
               </div>
                        <div id="speedOption"> 
 <i class="fa-light fa-gauge"></i> Speed: 1.00x
@@ -1009,15 +1265,24 @@ Offical Discord Server! :3
           <a href="https://discord.poketube.fun" style="color: #fff;">
       <i class="fa-brands fa-discord"></i>  Discord Server</a>
               </div>
+              
                                                                                                                        
     </div>
     
     
 		<div id="<%=sha384(inv_vid.videoId)%>" class="video-player-container">
-      <video class="player video-ambient-container" id="video" style="border-radius: 16px; box-sizing: border-box; min-width: 100%; display: block;" autoplay controls>
+      
+      <% if (!qua) { //TODO - a %>
+        <audio id="aud" preload>
+          <source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=140&local=true" type="video/mp4"/>
+        </audio>
+      <% } else { %>
+        <audio id="aud"></audio>
+      <% } %>
+      <video class="player video-ambient-container" id="video" style="border-radius: 16px; box-sizing: border-box; min-width: 100%; display: block;" preload>
       <% if (isvidious) { %>
         <% if (!qua) { %>
-          <source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
+          <source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=136&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
         <% } %>
         <% if (qua === "medium") { %>
           <source src="<%=u%>/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true">
@@ -1027,7 +1292,7 @@ Offical Discord Server! :3
       <% if (!isSchoolProxy) { %>
         <% if (!isvidious) { %>
           <% if (!qua) { %>
-            <source src="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/18" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
+            <source src="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/22" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
           <% } %>
           <% if (qua === "medium") { %>
             <source src="https://tube.kuylar.dev/proxy/media/<%=inv_vid.videoId%>/18" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="sd360" selected="true">
@@ -1054,7 +1319,23 @@ Offical Discord Server! :3
         <track src="/api/subtitles?v=<%=inv_vid.videoId%>&h=<%= %>" label="<%=  video.Subtitles.Subtitle.language.replace("United States","Simplified - USA") %>" kind="subtitles">      
       <% } %>                                                       
     </video>
+    <div id="controls"> <!-- TODO: CONTROLS -->
+      <button id="play-pause" class="control-button">
+        <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>
+      </button>
       
+      <div id="seekbar">
+          <input type="range" min="0" step="any" value="0" id="duration-slider">
+      </div>
+      <p id="timestamps">...</p>
+      <!--
+      <div>
+        <span>volume</span>
+        <input type="range" min="0" max="1" step="any" value="1" id="volume-slider">
+      </div>
+      -->
+      
+  </div>
     <% if (!a) { %>
       <canvas width="12" height="6" class="ambient-canvas" id="ambient-canvas-1"></canvas>
       <canvas width="12" height="6" class="ambient-canvas" id="ambient-canvas-2"></canvas>
@@ -1084,6 +1365,7 @@ Offical Discord Server! :3
 
 
       <a onclick="toggleTheaterMode()"" class="theather"><i class="fa-sharp fa-light fa-up-right-and-down-left-from-center"></i> Theater</a>
+      <a onclick="document.documentElement.requestFullscreen()" class="theather"><i class="fa-sharp fa-light fa-up-right-and-down-left-from-center"></i> Full screen</a>
                                                                         
 <%  if (inv.comments) { %> 
                 <input type="checkbox" class="hj" id="j" style="display:none">
@@ -2096,7 +2378,6 @@ const drawPause = () => {
 }
 
 const init = () => {
-  video.pause();video.play();
   AMvideo.addEventListener("play", drawStart, false)
   AMvideo.addEventListener("pause", drawPause, false)
   AMvideo.addEventListener("ended", drawPause, false)
@@ -2136,11 +2417,13 @@ window.addEventListener("unload", cleanup)
 <!-- BUNDLE -->
 <!-- BUNDLE -->
 <!-- BUNDLE -->
-<!-- BUNDLE --><script src="/static/app.bundle.js?version=08.05.2024&bundledate=080524_1657" > </script><!-- BUNDLE -->
+<!-- BUNDLE --><script src="/static/app.bundle.js?version=08.05.2024&bundledate=080524_1657a" > </script><!-- BUNDLE -->
 <!-- BUNDLE -->
 <!-- BUNDLE -->
 <!-- BUNDLE -->
  
+
+ 
 <% if(secure) { %>
   <% if(!dnt_val) { %>
 
@@ -2401,7 +2684,7 @@ a {
 
 
                      
-                                                <source src="https://eu-proxy.poketube.fun/latest_version?id=<%=inv_vid.videoId%>&itag=18&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
+                                                <source src="https://eu-proxy.poketube.fun/latest_version?id=<%=inv_vid.videoId%>&itag=22&local=true" type="video/mp4; codecs=&quot;avc1.64001F, mp4a.40.2&quot;" label="hd720" selected="true">
 
                                                                              <% } %>                
 
@@ -3402,13 +3685,17 @@ if (userID) {
     // Optionally, you can set a default href or display an error message.
 }
   
-  
+const aud = document.getElementById("aud");
+const vid = document.getElementById("video");  
 
 // Save and resume video progress
 const videoId = new URLSearchParams(window.location.search).get('v');
 const localStorageKey = `progress-${videoId}`;
 
+
+
 function saveProgress() {
+  console.log(`Saved progress @ ${video.currentTime}`)
   localStorage.setItem(localStorageKey, video.currentTime);
 }
 
@@ -3419,7 +3706,8 @@ function removeProgress() {
 function resumeProgress() {
   const progress = localStorage.getItem(localStorageKey);
   if (progress) {
-    video.currentTime = progress;
+    aud.currentTime = progress;
+    vid.currentTime = progress;
   }
 }
 
@@ -3430,6 +3718,7 @@ function resumeProgress() {
 
 video.addEventListener('timeupdate', () => {
   if (Math.floor(video.currentTime) % 1 === 0) {
+    
     saveProgress();
   }
 });
@@ -3437,10 +3726,8 @@ video.addEventListener('timeupdate', () => {
 video.addEventListener('ended', () => {
   removeProgress();
 });
-
+window.addEventListener('DOMContentLoaded', () => {
-window.addEventListener('load', () => {
+  throw 1;
-  resumeProgress();
-});
 </script>
 
 
@@ -3457,6 +3744,7 @@ window.addEventListener('load', () => {
  <% if (!optout) { %> 
           <script src="/static/data-mobile.js"></script>
  <% } %>
+ 
 </div>
  
  </body>