From 831960fb18ec9f8bf8d5e41e6ac8019b3a9b91f5 Mon Sep 17 00:00:00 2001
From: khandelwal20sid <khandelwal20sid@gmail.com>
Date: Sat, 12 Oct 2024 14:39:24 +0530
Subject: [PATCH 1/2] Updated script.js to handle error popups

---
 script.js | 80 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 78 insertions(+), 2 deletions(-)

diff --git a/script.js b/script.js
index 6a0828f..6a6f341 100644
--- a/script.js
+++ b/script.js
@@ -6,10 +6,86 @@ 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.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 id="closeErrorPopup" style="margin-top: 10px; padding: 5px 10px; float: right;">Close</button>
+    `;
+    document.body.appendChild(errorPopup);
+
+    // Close popup when the button is clicked
+    document.getElementById("closeErrorPopup").addEventListener("click", () => {
+      errorPopup.remove();
+      overlay.remove();
+    });
+  }
+
+  // Function to handle audio errors
+  function handleAudioError(error) {
+    switch (error.code) {
+      case error.MEDIA_ERR_ABORTED:
+        showErrorPopup("Playback aborted by the user.");
+        break;
+      case error.MEDIA_ERR_NETWORK:
+        showErrorPopup("Network error. Unable to load the audio.");
+        break;
+      case error.MEDIA_ERR_DECODE:
+        showErrorPopup("Audio decoding failed. Unsupported file format or corrupted file.");
+        break;
+      case error.MEDIA_ERR_SRC_NOT_SUPPORTED:
+        showErrorPopup("Audio source not supported.");
+        break;
+      default:
+        showErrorPopup("An unknown error occurred during audio playback.");
+        break;
+    }
+  }
+
+  // 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");
+
+      if (audioSource) {
+        audioPlayer.src = audioSource;
+
+        // Listen for audio errors
+        audioPlayer.onerror = () => {
+          handleAudioError(audioPlayer.error);
+        };
+
+        // Play audio and handle potential errors
+        audioPlayer.play().catch((error) => {
+          console.error("Playback failed:", error);
+          showErrorPopup("Failed to play audio. There was an issue with playback.");
+        });
+      } else {
+        showErrorPopup("Audio source not available.");
+      }
     });
   });
 

From 5541014404a48dfe4b9ac0b3f9f8748f98f5c07f Mon Sep 17 00:00:00 2001
From: khandelwal20sid <khandelwal20sid@gmail.com>
Date: Sat, 12 Oct 2024 14:48:46 +0530
Subject: [PATCH 2/2] resolved close popup issue

---
 script.js | 104 +++++++++++++++++++++---------------------------------
 1 file changed, 41 insertions(+), 63 deletions(-)

diff --git a/script.js b/script.js
index 6a6f341..884bf8d 100644
--- a/script.js
+++ b/script.js
@@ -10,78 +10,60 @@ document.addEventListener("DOMContentLoaded", function () {
   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)';
+    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.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.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 id="closeErrorPopup" style="margin-top: 10px; padding: 5px 10px; float: right;">Close</button>
+      <button style="margin-top: 10px; padding: 5px 10px; float: right;">Close</button>
     `;
+
     document.body.appendChild(errorPopup);
 
-    // Close popup when the button is clicked
-    document.getElementById("closeErrorPopup").addEventListener("click", () => {
-      errorPopup.remove();
-      overlay.remove();
+    // Attach event listener to the close button directly via DOM element
+    const closeButton = errorPopup.querySelector("button");
+    closeButton.addEventListener("click", () => {
+      errorPopup.remove(); 
+      overlay.remove(); 
     });
   }
 
-  // Function to handle audio errors
-  function handleAudioError(error) {
-    switch (error.code) {
-      case error.MEDIA_ERR_ABORTED:
-        showErrorPopup("Playback aborted by the user.");
-        break;
-      case error.MEDIA_ERR_NETWORK:
-        showErrorPopup("Network error. Unable to load the audio.");
-        break;
-      case error.MEDIA_ERR_DECODE:
-        showErrorPopup("Audio decoding failed. Unsupported file format or corrupted file.");
-        break;
-      case error.MEDIA_ERR_SRC_NOT_SUPPORTED:
-        showErrorPopup("Audio source not supported.");
-        break;
-      default:
-        showErrorPopup("An unknown error occurred during audio playback.");
-        break;
-    }
-  }
-
   // Playlist item click event
   playlistItems.forEach((item) => {
     item.addEventListener("click", function () {
       const audioSource = item.getAttribute("data-src");
 
+      // Check if the file exists before playing
       if (audioSource) {
         audioPlayer.src = audioSource;
 
-        // Listen for audio errors
-        audioPlayer.onerror = () => {
-          handleAudioError(audioPlayer.error);
-        };
-
-        // Play audio and handle potential errors
+        // Handle playback errors
         audioPlayer.play().catch((error) => {
-          console.error("Playback failed:", error);
-          showErrorPopup("Failed to play audio. There was an issue with playback.");
+          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.");
@@ -90,25 +72,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;
+  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">
+    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 () {