Beatmap Packs on osu! beatmap pages.

beatmap-packs.user.js

// ==UserScript==
// @name         Beatmap Packs
// @namespace    https://gist.github.com/respektive/b48062f2d23bf715252a832e45bf14e3
// @version      0.2
// @description  Adds the Beatmap Packs on Beatmaps Pages.
// @author       respektive
// @match        http://osu.ppy.sh/*
// @match        https://osu.ppy.sh/*
// @grant        none
// @updateURL    https://gist.github.com/respektive/b48062f2d23bf715252a832e45bf14e3/raw/97e9a2399066af44c4c92396a2fa679267f03837/beatmap-packs.user.js
// @downloadURL  https://gist.github.com/respektive/b48062f2d23bf715252a832e45bf14e3/raw/97e9a2399066af44c4c92396a2fa679267f03837/beatmap-packs.user.js
// ==/UserScript==

(function() {
    'use strict';

    let packsVisible = false;

    async function addScoreRank() {
        const infoElement = document.querySelectorAll(".beatmapset-info__box")[1];

        if (infoElement) {
            const path = window.location.href.split("/");
            const beatmapId = path[5];
            const beatmapInfo = await (await fetch(`https://osu.respektive.pw/b/${beatmapId}`)).json();
            const beatmapPacks = beatmapInfo.beatmap.packs;

            if (beatmapPacks != "") {
                let packsElement = document.createElement("div");
                packsElement.classList.add("beatmapset-info__row", "beatmap_packs");
                let packsHeader = document.createElement("h3");
                packsHeader.classList.add("beatmapset-info__header");
                packsHeader.innerHTML = "Beatmap Packs"
                packsElement.append(packsHeader);
                let packsValue = document.createElement("div");
                let packs = beatmapPacks.split(",").map(pack_id => '<a href="https://osu.ppy.sh/beatmaps/packs/' + pack_id + '">' + pack_id + '</a>');

                packsValue.innerHTML = packs.join(", ");
                packsElement.append(packsValue);

                if (!packsVisible) {
                    infoElement.append(packsElement);
                    packsVisible = true
                }
            }
        }
    }

    let lastUrl = location.href;
    new MutationObserver(() => {
        const url = location.href;
        if (url !== lastUrl) {
            lastUrl = url;
            let elem = document.querySelector(".beatmap_packs");
            if (elem) {
                elem.remove();
            }
            packsVisible = false;
            setTimeout(onUrlChange, 1500);
        }
    }).observe(document, {subtree: true, childList: true});

    function onUrlChange() {
            observer.observe(document, {childList: true, subtree: true});
    }

    const observer = new MutationObserver(check)
    observer.observe(document, {childList: true, subtree: true});

    function check(changes, observer) {
        if(document.querySelector(".beatmapset-info")) {
            observer.disconnect();
            addScoreRank();
        }
    }

})();