arimelody.me/public/script/music-gateway.js

import "./main.js";

const bg = document.getElementById("background");
bg.style.backgroundImage = `url(${bg.dataset.url})`;
bg.removeAttribute("data-url");

const share_btn = document.getElementById("share");
share_btn.onclick = (e) => {
        navigator.clipboard.writeText(window.location.href);
        share_btn.classList.remove('active');
        void share_btn.offsetWidth;
        share_btn.classList.add('active');
}

document.getElementById("go-back").addEventListener("click", () => {
        window.history.back();
});

apply_funny_bob_to_upcoming_tags();

function apply_funny_bob_to_upcoming_tags() {
        const upcomingTags = document.querySelectorAll("#type.upcoming");
        for (var i = 0; i < upcomingTags.length; i++) {
                const tag = upcomingTags[i];
                const chars = tag.innerText.split("");
                const result = chars.map((c, i) => `<span style="animation-delay: -${i * 100}ms;">${c}</span>`);
                tag.innerHTML = result.join("");
        }
}

const extras_pairs = Array.from(document.querySelectorAll("div#info > div").values().map(container => {
        return {
                container,
                button: document.getElementById("extras").querySelector(`ul li a[href="#${container.id}"]`)
        };
}));
const info_container = document.getElementById("info")
info_container.addEventListener("scroll", update_extras_buttons);
function update_extras_buttons() {
        console.clear();
        const info_rect = info_container.getBoundingClientRect();
        const info_y = info_rect.y;
        const font_size = parseFloat(getComputedStyle(document.documentElement).fontSize);
        console.log("info_y: " + info_y);
        let current = extras_pairs[0];
        extras_pairs.forEach(pair => {
                pair.button.classList.remove("active");
                const scroll_diff = pair.container.getBoundingClientRect().y -
                        info_rect.y -
                        info_rect.height / 2 +
                        4 * font_size;
                if (scroll_diff <= 0) current = pair;
                console.log(`${pair.container.id}: ${scroll_diff}`);
        })
        current.button.classList.add("active");
}
update_extras_buttons();

document.querySelectorAll("div#extras ul li a[href]").forEach(link => {
        link.addEventListener("click", event => {
                event.preventDefault();
                location.replace(link.href);
        });
});

/*
 * handling track previews (currently not implemented)

const previews = document.querySelectorAll("[id^=preview-]");
for (const preview of previews) {
        preview.addEventListener("click", (e) => {
                if (e.target.classList.contains('playing')) {
                        stopPreview(e.target);
                } else {
                        playPreview(e.target);
                }
        });
        preview.querySelector('audio').addEventListener("ended", () => { stopPreview(preview); });
}

var stupidsounds = false;

function stopPreviews() {
        for (const preview of previews) stopPreview(preview);
}

function playPreview(preview) {
        if (!stupidsounds) stopPreviews();
        const btn = preview.querySelector('i');
        btn.classList.remove("play", "fa-play");
        btn.classList.add("pause", "fa-pause");
        const audio = preview.querySelector('audio');
        audio.play();
        preview.classList.add('playing');
}

function stopPreview(preview) {
        const btn = preview.querySelector('i');
        btn.classList.remove("pause", "fa-pause");
        btn.classList.add("play", "fa-play");
        const audio = preview.querySelector('audio');
        audio.pause();
        audio.currentTime = 0;
        preview.classList.remove('playing');
}

stopPreviews();

*/