Customizing Items Shown On Hero Section about custom-tweaks HOT 2 CLOSED

async function fetchMovieDetails(movieId) {
    try {
        var response = await fetch(server + '/Users/' + userId + '/Items/' + movieId + '?Fields=Id%2CName%2COverview%2CImageTags', {
            method: 'GET',
            headers: {
                'X-Emby-Token': apiKey // Użyj klucza API w nagłówku
            }
        });
        if (response.ok) {
            var movie = await response.json();
            return movie;
        }
    } catch (error) {
        console.error(error);
    }
    return null;
}

async function customMovieList() {
    try {
        var movies = [];
        for (var i = 0; i < selectedMovieIds.length; i++) {
            var movie = await fetchMovieDetails(selectedMovieIds[i]);
            if (movie) {
                movies.push(movie);
            }
        }

        if (heroHasRun || document.querySelectorAll('#indexPage:not(.hide) .heroContainer').length > 0) {
            return;
        }

        addHero();

        var i = 0;
        while (true) {
            var heroTitle = document.querySelector("#indexPage:not(.hide) .heroTitle");
            var heroDescription = document.querySelector("#indexPage:not(.hide) .heroDescription");
            var heroButton = document.querySelector("#indexPage:not(.hide) .heroButton");
            var heroLogoImage = document.querySelector("#indexPage:not(.hide) .heroLogoImage");

            heroTitle.innerHTML = movies[i]["Name"];
            document.querySelector("#indexPage:not(.hide) .heroLogo").classList.remove("hide");
            heroTitle.classList.remove("noLogo");
            heroDescription.innerHTML = movies[i]["Overview"];

            heroButton.onclick = function () {
                var url = "/web/index.html#!/details?id=" + movies[i]["Id"];
                window.history.state.url = url;
                window.history.pushState(window.history.state, "", url);
                window.history.go(0);
            };

            var heroBackgroundContainer = document.querySelector("#indexPage:not(.hide) .heroBackgroundContainer");
            heroBackgroundContainer.innerHTML = '';

            for (var j = 0; j < movies.length; j++) {
                var temp = document.createElement("img");
                temp.className = "heroBackground hide";
                temp.src = server + "/Items/" + movies[j]["Id"] + "/Images/Backdrop?maxWidth=1920&tag=" + movies[j]["ImageTags"]["Backdrop"] + "&quality=50";
                temp.id = movies[j]["BackdropImageTags"];
                heroBackgroundContainer.appendChild(temp);
            }

            document.querySelectorAll(".heroBackground").forEach(function (element) {
                element.classList.add("hide");
            });

            document.querySelectorAll("[id='" + movies[i]["BackdropImageTags"] + "']").forEach(function (element) {
                element.classList.remove("hide");
            });

            await new Promise(r => setTimeout(r, 5000));
            i = (i + 1) % movies.length;
        }
    } catch (error) {
        console.error(error);
    }
}

if (pageLocation() == "home") {
    customMovieList();
}