Code Refactoring and Error Handling

3 files changed, 57 insertions, 17 deletions

diff --git a/hg.css b/hg.css
index 015a3e3..578d6a4 100644
--- a/hg.css
+++ b/hg.css
@@ -326,3 +326,12 @@ canvas {
   right: 0;
   margin-right: 5px;
 }
+
+.ERRORS {
+  position: absolute;
+  bottom: 0;
+  z-index: 999;
+  color: #ffff;
+  left: 0;
+  margin-left: 5px;
+}
diff --git a/index.html b/index.html
index 8fa8498..353acc5 100644
--- a/index.html
+++ b/index.html
@@ -119,6 +119,7 @@
     </div>
     <div id="codef-canvas"></div>
     <div class="OVR hidden"></div>
+    <div class="ERRORS hidden"></div>
     <input id="file-upload" type="file" accept="application/json" />
     <!-- <script src="libs/codef_core.js"></script>
     <script src="libs/codef_starfield.js"></script>
diff --git a/player.js b/player.js
index 51ae188..69a9f28 100644
--- a/player.js
+++ b/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."
+      );
     }
   }
 })();