retrowave-player/player.js

(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);
    }
})();