Merge pull request Ctoic#50 from khandelwal20sid/issue-#42-error-popups

Enhance Audio Playback Error Handling with error popups

script.js

@@ -6,10 +6,68 @@ document.addEventListener("DOMContentLoaded", function () {
   const menuClose = document.getElementById("menu-close");
   const menu = document.getElementById("menu");
 
+  // Function to display error popup
+  function showErrorPopup(message) {
+    const overlay = document.createElement("div");
+    overlay.id = "overlay";
+    overlay.style.position = "fixed";
+    overlay.style.top = "0";
+    overlay.style.left = "0";
+    overlay.style.width = "100%";
+    overlay.style.height = "100%";
+    overlay.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
+    overlay.style.zIndex = "9998";
+    overlay.style.backdropFilter = "blur(5px)";
+    document.body.appendChild(overlay);
+
+    // Create the error popup
+    const errorPopup = document.createElement("div");
+    errorPopup.id = "errorPopup";
+    errorPopup.style.position = "fixed";
+    errorPopup.style.top = "50%";
+    errorPopup.style.left = "50%";
+    errorPopup.style.transform = "translate(-50%, -50%)";
+    errorPopup.style.backgroundColor = "#fff";
+    errorPopup.style.padding = "20px";
+    errorPopup.style.border = "1px solid #ccc";
+    errorPopup.style.zIndex = "9999";
+    errorPopup.innerHTML = `
+      <h2 style="color: red; font-weight: 600; margin-bottom: 5px;">Error</h2>
+      <p>${message}</p>
+      <button style="margin-top: 10px; padding: 5px 10px; float: right;">Close</button>
+    `;
+
+    document.body.appendChild(errorPopup);
+
+    // Attach event listener to the close button directly via DOM element
+    const closeButton = errorPopup.querySelector("button");
+    closeButton.addEventListener("click", () => {
+      errorPopup.remove(); 
+      overlay.remove(); 
+    });
+  }
+
+  // Playlist item click event
   playlistItems.forEach((item) => {
     item.addEventListener("click", function () {
-      audioPlayer.src = item.getAttribute("data-src");
-      audioPlayer.play();
+      const audioSource = item.getAttribute("data-src");
+
+      // Check if the file exists before playing
+      if (audioSource) {
+        audioPlayer.src = audioSource;
+
+        // Handle playback errors
+        audioPlayer.play().catch((error) => {
+          console.error("Audio playback error:", error);
+          if (error.name === "NotSupportedError") {
+            showErrorPopup("Failed to play audio. Unsupported format or file missing.");
+          } else {
+            showErrorPopup("Failed to play audio. There was an issue with playback.");
+          }
+        });
+      } else {
+        showErrorPopup("Audio source not available.");
+      }
     });
   });
 
@@ -62,25 +120,21 @@ document.addEventListener("DOMContentLoaded", function () {
   });
 
   // Comment Submission
-  document
-    .getElementById("comment-form")
-    .addEventListener("submit", function (e) {
-      e.preventDefault();
-      const username = document.getElementById("username").value;
-      const comment = document.getElementById("comment").value;
-
-      const commentHTML = `<div class="bg-gray-700 text-white p-4 rounded-lg">
+  document.getElementById("comment-form").addEventListener("submit", function (e) {
+    e.preventDefault();
+    const username = document.getElementById("username").value;
+    const comment = document.getElementById("comment").value;
+
+    const commentHTML = `<div class="bg-gray-700 text-white p-4 rounded-lg">
                     <strong>${username}:</strong>
                     <p>${comment}</p>
                 </div>`;
 
-      document
-        .getElementById("comments-list")
-        .insertAdjacentHTML("beforeend", commentHTML);
+    document.getElementById("comments-list").insertAdjacentHTML("beforeend", commentHTML);
 
-      // Reset form
-      document.getElementById("comment-form").reset();
-    });
+    // Reset form
+    document.getElementById("comment-form").reset();
+  });
 
   // Theme Toggle
   themeToggle.addEventListener("click", function () {