Cosmetic Changes

History Upload implementation

player.js

@@ -1,28 +1,60 @@
 (function () {
-    openDialog();
     let isPlaying = false;
     let currentTracks = [];
     let cursor = 0;
-    let howerInstance;
+    let howlerInstance;
     const retroWaveRu = "https://retrowave.ru";
-    getMusic();
-
     let titleEl = document.getElementById("track-name");
     let coverArtEl = document.getElementsByClassName("music-player")[0];
+    const modalEl = document.getElementById("intro-modal");
+    const uploadInfoEl = document.getElementById("upload-info");
+    const fileUploadEl = document.getElementById("file-upload");
+    openDialog();
+    getMusic();
+    listenUploadFileChange();
 
-    coverArtEl.addEventListener("click", () => {
-        if (howerInstance) {
+    coverArtEl.addEventListener("click", (event) => {
+        const isNoPause = event.target.classList.contains("no-pause");
+        if (howlerInstance && !isNoPause) {
             isPlaying = !isPlaying;
 
             if (isPlaying) {
-                howerInstance.play();
+                howlerInstance.play();
             } else {
-                howerInstance.pause();
+                howlerInstance.pause();
             }
         }
     });
 
-    document.getElementById("initButton").addEventListener("click", () => {
+    uploadInfoEl.addEventListener("click", () => {
+        const confirmText = `Do you really want to change your playlist?\nThis will replace all your retrowave music history.\nIf you are sure about this, make sure to upload a valid json file probably downloaded using history link.`;
+
+        if (confirm(confirmText)) {
+            fileUploadEl.click();
+        }
+    });
+
+    function listenUploadFileChange() {
+        fileUploadEl.onchange = function () {
+            const selectedFile = fileUploadEl.files[0];
+            console.log(selectedFile);
+            const reader = new FileReader();
+            reader.readAsText(selectedFile, "UTF-8");
+            reader.onload = function (event) {
+                console.log(event.target.result);
+                try {
+                    const uploadedPlaylist = JSON.parse(event.target.result);
+                    localStorage.setItem("retrowave-history", event.target.result);
+
+                } catch (error) {
+                    alert("malformed/invalid json file");
+                }
+            };
+        };
+    }
+
+    document.getElementById("initButton")?.addEventListener("click", () => {
+        modalEl.classList.remove("open");
         playMusic();
     });
 
@@ -66,8 +98,7 @@
     }
 
     function openDialog() {
-        const dialog = document.getElementById("dialog");
-        dialog.showModal();
+        modalEl.classList.add("open");
     }
 
     function getMusic() {
@@ -88,7 +119,7 @@
         const currentTrack = currentTracks[0];
         const singleTrack = currentTrack.streamUrl;
         const fullTrack = `${retroWaveRu}${singleTrack}`;
-        howerInstance = new Howl({
+        howlerInstance = new Howl({
             src: [fullTrack],
             html5: true,
             onend: function () {
@@ -104,7 +135,7 @@
         updateInfo(currentTrack);
 
         addToHistory(currentTrack);
-        howerInstance.play();
+        howlerInstance.play();
     }
 
     function updateInfo(trackDetails) {