optimize code

views/episode.ejs

@@ -10,8 +10,8 @@
             <span class="visually-hidden">Loading...</span>
           </div>
         </div>
-        <!-- Streaming Iframe with Native Lazy Loading -->
-        <iframe id="streaming-iframe" loading="lazy" data-src="<%= episode.streamingUrl %>" title="Streaming Player" allowfullscreen></iframe>
+        <!-- Streaming Iframe with Lazy Loading -->
+        <iframe id="streaming-iframe" class="lazyload" data-src="<%= episode.streamingUrl %>" title="Streaming Player" allowfullscreen></iframe>
       </div>
       <div class="mb-4">
         <!-- Associated Label for the Streaming Source Dropdown -->
@@ -81,26 +81,20 @@
 <script>
   document.addEventListener("DOMContentLoaded", function () {
     const iframe = document.getElementById('streaming-iframe');
+    document.getElementById('loading-spinner');
+// Load the default source immediately
     iframe.src = iframe.getAttribute('data-src');
     iframe.classList.remove('d-none');
 
-    document.getElementById('streaming-source').addEventListener('change', async function() {
-      const selectedUrl = this.value;
-      let decodedUrl = selectedUrl;
-
-      if (selectedUrl !== "<%= episode.streamingUrl %>") {
-        decodedUrl = await decodeShortlink(selectedUrl);
-      }
-
-      iframe.classList.add('d-none');
-      document.getElementById('loading-spinner').style.display = 'flex';
-      iframe.src = formatUrlForEmbedding(decodedUrl);
-    });
-
-    iframe.addEventListener('load', function() {
-      document.getElementById('loading-spinner').style.display = 'none';
-      iframe.classList.remove('d-none');
+    // Observe the iframe in case it's not in view initially
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          observer.disconnect(); // No need to observe anymore
+        }
+      });
     });
+    observer.observe(iframe);
   });
 
   async function decodeShortlink(shortlink) {
@@ -109,7 +103,7 @@
       return await response.text();
     } catch (error) {
       console.error('Error decoding shortlink:', error);
-      return shortlink;
+      return shortlink; // Return the original shortlink if decoding fails
     }
   }
 
@@ -130,8 +124,38 @@
       const key = parts[1];
       return `https://mega.nz/embed/${fileId}#${key}`;
     }
-    return url;
+    return url; // Return the original URL if no specific format is found
   }
+
+  document.getElementById('streaming-source').addEventListener('change', async function() {
+    const selectedUrl = this.value;
+    let decodedUrl = selectedUrl;
+
+    // Only decode if it's not the default source
+    if (selectedUrl !== "<%= episode.streamingUrl %>") {
+      decodedUrl = await decodeShortlink(selectedUrl);
+    }
+
+    const iframe = document.getElementById('streaming-iframe');
+    const spinner = document.getElementById('loading-spinner');
+
+    // Show the spinner and hide the iframe while loading new content
+    spinner.style.display = 'flex';
+    iframe.classList.add('d-none');
+
+    // Update the iframe source
+    iframe.src = formatUrlForEmbedding(decodedUrl);
+  });
+
+  // Listen for iframe load event to hide spinner
+  document.getElementById('streaming-iframe').addEventListener('load', function() {
+    const spinner = document.getElementById('loading-spinner');
+    const iframe = document.getElementById('streaming-iframe');
+
+    // Hide the spinner and show the iframe once loaded
+    spinner.style.display = 'none';
+    iframe.classList.remove('d-none');
+  });
 </script>
 </body>
-</html>
+</html>