Code Refactoring and Error Handling

player.js

@@ -9,6 +9,7 @@
   let refreshBtn = document.querySelector(".refresh");
   let ovr = document.querySelector(".OVR");
   let fullScreenBtn = document.querySelector(".fullscreen");
+  let errorEl = document.querySelector(".ERRORS");
   const modalEl = document.getElementById("intro-modal");
   // const uploadInfoEl = document.getElementById("upload-info");
   const fileUploadEl = document.getElementById("file-upload");
@@ -19,7 +20,6 @@
   const synthwaveColor = 0xff2975;
 
   openDialog();
-  getMusic();
   listenUploadFileChange();
 
   function initDynamicTooltips() {
@@ -96,10 +96,12 @@
     };
   }
 
-  document.getElementById("initButton")?.addEventListener("click", () => {
+  document.getElementById("initButton")?.addEventListener("click", async () => {
     var hydra = new Hydra({ detectAudio: false });
     modalEl.classList.remove("open");
-    playMusic();
+    getMusic().then(() => {
+        playMusic();
+    });
     initHydra();
     initControls();
   });
@@ -130,10 +132,10 @@
       case "f":
         toggleFullScreen();
         break;
-     case "h":
+      case "h":
         toggleControls();
         break;
-     case 'x':
+      case "x":
         toggleEverything();
     }
   });
@@ -177,14 +179,22 @@
   }
 
   async function getMusic() {
-    const res = await fetch(
-      `https://retrowave.ru/api/v1/tracks?limit=10&cursor=${cursor}`
-    ).then((res) => res.json());
-    const {
-      body: { tracks, cursor: currentCursor },
-    } = res;
-    cursor = currentCursor;
-    currentTracks = tracks;
+    try {
+      const res = await fetch(
+        `https://retrowave.ru/api/v1/tracks?limit=10&cursor=${cursor}`
+      ).then((res) => res.json());
+      const {
+        body: { tracks, cursor: currentCursor },
+      } = res;
+      cursor = currentCursor;
+      currentTracks = tracks;
+    } catch (error) {
+        console.error("Error fetching music:", error);
+        showErrors(
+            "Failed to fetch music. Please check your internet connection or try again later."
+        );
+        throw error; // rethrow the error to be caught in the catch block below
+    }
   }
 
   function initPlayer() {}
@@ -242,7 +252,7 @@
     titleEl.innerText = trackDetails.title;
     document.title = `Now Playing... ${trackDetails.title}`;
     coverArtEl.style.backgroundImage = `url("${retroWaveRu}${trackDetails.artworkUrl}")`;
-    ovr.innerHTML = `${trackDetails.title}`
+    ovr.innerHTML = `${trackDetails.title}`;
   }
 
   function getHistory() {
@@ -310,9 +320,17 @@ https://retrowave.ru/${musicData.streamUrl}
     });
   }
 
-  function toggleFullScreen() {
+  async function toggleFullScreen() {
     if (!document.fullscreenElement) {
-      document.documentElement.requestFullscreen();
+      try {
+        await document.documentElement.requestFullscreen();
+      } catch (error) {
+        console.error("Error attempting to enable full-screen mode:", error);
+        showErrors(
+          "Failed to enter full-screen mode. Please check your browser settings." +
+            error
+        );
+      }
     } else {
       if (document.exitFullscreen) {
         document.exitFullscreen();
@@ -323,7 +341,7 @@ https://retrowave.ru/${musicData.streamUrl}
   function toggleControls() {
     const toggleableElements = document.querySelectorAll(".toggleable");
     toggleableElements.forEach((el) => {
-        el.classList.toggle("hidden");
+      el.classList.toggle("hidden");
     });
   }
 
@@ -332,6 +350,15 @@ https://retrowave.ru/${musicData.streamUrl}
     ovr.classList.toggle("hidden");
   }
 
+  function showErrors(error) {
+    errorEl.classList.remove("hidden");
+    errorEl.innerText = error;
+    setTimeout(() => {
+      errorEl.innerText = "";
+      errorEl.classList.add("hidden");
+    }, 10000);
+  }
+
   // function initCodef() {
   //     const width = window.innerWidth;
   //     const height = window.innerHeight;
@@ -371,6 +398,9 @@ https://retrowave.ru/${musicData.streamUrl}
         .out();
     } catch (error) {
       console.error("Hydra initialization failed:", error);
+      showErrors(
+        "Hydra initialization failed. Please check your browser compatibility or try again later."
+      );
     }
   }
 })();