retrowave-player/player.js

(function () {
    let isPlaying = false;
    let currentTracks = [];
    let cursor = 0;
    let howlerInstance;
    const retroWaveRu = "https://retrowave.ru";
    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", (event) => {
        const isNoPause = event.target.classList.contains("no-pause");
        if (howlerInstance && !isNoPause) {
            isPlaying = !isPlaying;

            if (isPlaying) {
                howlerInstance.play();
            } else {
                howlerInstance.pause();
            }
        }
    });

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

    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() {
        modalEl.classList.add("open");
    }

    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}`;
        howlerInstance = new Howl({
            src: [fullTrack],
            html5: true,
            onend: function () {
                currentTracks.shift();
                if (currentTracks.length <= 3) {
                    getMusic();
                }
                playMusic();
            },
        });
        isPlaying = true;

        updateInfo(currentTrack);

        addToHistory(currentTrack);
        howlerInstance.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);
    }
})();