Initial Commit

TODO: Keyboard Navigation

1 files changed, 145 insertions, 0 deletions

diff --git a/player.js b/player.js
new file mode 100644
index 0000000..8cf2151
--- /dev/null
+++ b/player.js
@@ -0,0 +1,145 @@
+(function () {
+    openDialog();
+    let isPlaying = false;
+    let currentTracks = [];
+    let cursor = 0;
+    let howerInstance;
+    const retroWaveRu = "https://retrowave.ru";
+    getMusic();
+
+    let titleEl = document.getElementById("track-name");
+    let coverArtEl = document.getElementsByClassName("music-player")[0];
+
+    coverArtEl.addEventListener("click", () => {
+        if (howerInstance) {
+            isPlaying = !isPlaying;
+
+            if (isPlaying) {
+                howerInstance.play();
+            } else {
+                howerInstance.pause();
+            }
+        }
+    });
+
+    document.getElementById("initButton").addEventListener("click", () => {
+        playMusic();
+    });
+
+    document.getElementById("history").addEventListener("click", () => {
+        downloadHistory();
+    });
+
+    document.addEventListener("keyup", (event) => {
+        const { key } = event;
+        switch (key) {
+            case "Space":
+                break;
+            case "ArrowLeft":
+                break;
+            case "ArrowRight":
+                break;
+        }
+    });
+
+    let touchstartX = 0;
+    let touchendX = 0;
+    const musixPlayerEl = document.getElementsByClassName("music-player")[0];
+    if (musixPlayerEl) {
+        musixPlayerEl.addEventListener("touchstart", (e) => {
+            touchstartX = e.changedTouches[0].screenX;
+        });
+
+        musixPlayerEl.addEventListener("touchend", (e) => {
+            touchendX = e.changedTouches[0].screenX;
+            checkDirection();
+        });
+    }
+
+    function checkDirection() {
+        if (touchendX < touchstartX) {
+            // Swipe Left
+        }
+        if (touchendX > touchstartX) {
+            // Swipe Right
+        }
+    }
+
+    function openDialog() {
+        const dialog = document.getElementById("dialog");
+        dialog.showModal();
+    }
+
+    function getMusic() {
+        fetch(`https://retrowave.ru/api/v1/tracks?limit=5&cursor=${cursor}`)
+            .then((res) => res.json())
+            .then((res) => {
+                const {
+                    body: { tracks, cursor: currentCursor },
+                } = res;
+                cursor = currentCursor;
+                currentTracks = tracks;
+            });
+    }
+
+    function initPlayer() { }
+
+    function playMusic() {
+        const currentTrack = currentTracks[0];
+        const singleTrack = currentTrack.streamUrl;
+        const fullTrack = `${retroWaveRu}${singleTrack}`;
+        howerInstance = new Howl({
+            src: [fullTrack],
+            html5: true,
+            onend: function () {
+                currentTracks.shift();
+                if (currentTracks.length <= 3) {
+                    getMusic();
+                }
+                playMusic();
+            },
+        });
+        isPlaying = true;
+
+        updateInfo(currentTrack);
+
+        addToHistory(currentTrack);
+        howerInstance.play();
+    }
+
+    function updateInfo(trackDetails) {
+        titleEl.innerText = trackDetails.title;
+        coverArtEl.style.backgroundImage = `url("${retroWaveRu}${trackDetails.artworkUrl}")`;
+    }
+
+    function getHistory() {
+        let localHistoryStore = localStorage.getItem("retrowave-history") || "[]";
+        let historyArray = JSON.parse(localHistoryStore);
+        console.log(historyArray);
+        return historyArray;
+    }
+
+    function addToHistory(trackDetails) {
+        let historyArray = getHistory();
+        historyArray.push(trackDetails);
+        localStorage.setItem("retrowave-history", JSON.stringify(historyArray));
+    }
+
+    function downloadHistory() {
+        const historyArray = getHistory();
+        let element = document.createElement("a");
+        element.setAttribute(
+            "href",
+            "data:application/json;charset=utf-8," +
+            encodeURIComponent(JSON.stringify(historyArray))
+        );
+        element.setAttribute("download", "history.json");
+
+        element.style.display = "none";
+        document.body.appendChild(element);
+
+        element.click();
+
+        document.body.removeChild(element);
+    }
+})();