add loading stuff :3

html/poketube.ejs

@@ -290,6 +290,36 @@
   .video{
     margin-right: auto;
   }
+  
+  .loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loading .spinner {
+  display: inline-block;
+  border: 5px solid rgba(255, 255, 255, 0.2);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 1s ease-in-out infinite;
+  width: 50px;
+  height: 50px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
    </style>
  
   
@@ -1267,10 +1297,8 @@ Recommended Videos
 <script>
 // @license magnet:?xt=urn:btih:1f739d935676111cfff4b4693e3816e664797050&dn=gpl-3.0.txt GPL-3.0-or-later  
 function removeParam(paramName) {
-  
   let searchParams = new URLSearchParams(window.location.search);
   searchParams.delete(paramName);
-
   if (history.replaceState) {
     let searchString = searchParams.toString().length > 0 ? '?' + searchParams.toString() : '';
     let newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname +  searchString + window.location.hash;
@@ -1278,40 +1306,68 @@ function removeParam(paramName) {
   }
 }
 
-checkbox = document.getElementById("continue");
+let checkbox = document.getElementById("continue");
 
 checkbox.addEventListener('change', function(e) {
-  if(checkbox.checked) {
+  if (checkbox.checked) {
-    
+    console.log("[AUTOPLAY] enabled");
-    console.log("[AUTOPLAY] enabled")
+    document.getElementById('video').addEventListener('ended', autoplaynextvideo, false);
-    
+    let url = window.location.hostname + "/watch?v=<%- k.Video.Recommendations.Video[0].id%>";
-    document.getElementById('video').addEventListener('ended',autoplaynextvideo,false);
+    document.body.style.cursor = "wait"; // set cursor to "wait" before the fetch request starts
+    fetch(url)
+      .then(response => response.json())
+      .then(data => {
+        // do something with the data
+        document.body.style.cursor = "default"; // set cursor back to "default" after the fetch request completes
+      })
+      .catch(error => {
+        console.error(error);
+        document.body.style.cursor = "default"; // set cursor back to "default" after the fetch request completes
+      });
 
     function autoplaynextvideo(e) {
-    location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>"
+      location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>";
     }
   }
-  
   if (/[?&]autoplay=/.test(location.search)) {
-   if(!checkbox.checked) {
+    if (!checkbox.checked) {
-   removeParam("autoplay")
+      removeParam("autoplay");
     }    
   }
-  
 });
   
 if (/[?&]autoplay=/.test(location.search)) {
   checkbox.checked = true;
-  
+  console.log("[AUTOPLAY] enabled");
-    console.log("[AUTOPLAY] enabled")
+  let url = window.location.hostname + "/watch?v=<%- k.Video.Recommendations.Video[0].id%>";
-    
+  document.body.style.cursor = "wait"; // set cursor to "wait" before the fetch request starts
-    document.getElementById('video').addEventListener('ended',autoplaynextvideo,false);
+  fetch(url)
-      
+    .then(response => response.json())
+    .then(data => {
+      // do something with the data
+      document.body.style.cursor = "default"; // set cursor back to "default" after the fetch request completes
+    })
+    .catch(error => {
+      console.error(error);
+      document.body.style.cursor = "default"; // set cursor back to "default" after the fetch request completes
+    });
+  document.getElementById('video').addEventListener('ended', autoplaynextvideo, false);
   function autoplaynextvideo(e) {
-        location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>"
+    location.href = "/watch?v=<%- k.Video.Recommendations.Video[0].id%>&autoplay=<%-btoa("1f739d935676111cfff4b4693e3816e664797050" + k.Video.Recommendations.Video[0].id ) %>";
   }
 }
 
+// Retrieve volume from local storage or set to max if not available
+const initialVolume = localStorage.getItem('playerVolume') || 1;
+const video = document.getElementById('video');
+video.volume = initialVolume;
+
+// Save volume to local storage whenever it changes
+video.addEventListener('volumechange', function() {
+  localStorage.setItem('playerVolume', this.volume);
+});
+
+
 // Get the progress bar and container elements
 const progressBar1 = document.querySelector(".progress-bar");
 const progressContainer1 = document.querySelector(".progress-container");
@@ -1356,6 +1412,35 @@ window.addEventListener("load", () => {
   window.addEventListener('resize', lazyLoadBg);
 });
 
+  // Get all anchor links on the page
+const links = document.querySelectorAll('a');
+
+// Add a click event listener to each link
+links.forEach(link => {
+  link.addEventListener('click', e => {
+    e.preventDefault(); // Prevent the default link behavior
+    
+    // Create a loading spinner element
+    const spinner = document.createElement('div');
+    spinner.classList.add('spinner');
+    
+    // Create a loading overlay element
+    const loading = document.createElement('div');
+    loading.classList.add('loading');
+    loading.appendChild(spinner);
+    
+    // Add the loading overlay to the body
+    document.body.appendChild(loading);
+    
+    // Redirect to the link after a short delay to show the loading overlay
+    setTimeout(() => {
+      window.location.href = link.href;
+    }, 500);
+  });
+});
+
+
+
 </script>
    
  <% if (!optout) { %>