Jellyfin

Adding a footer

Inspired by Github - Adding a footer to Jellyfin.

Add this before </body></html>

<script>
let footerTimeout;

function hideFooterTimeout() {
    clearTimeout(footerTimeout);

    setTimeout(() => {
        footer.style.display = "none";
    }, 5000)
}

window.onload = () => {
    let footerTimeout;
    const footer = document.getElementById("footer");

    // Try to not run the code if it isn't necessary
    /*if (footer.style.display == "none") {
        return;
    }*/

    addEventListener("mousemove", (event) => {
        footer.style.display = "block";
        hideFooterTimeout();
    });
    
    hideFooterTimeout();
};
</script>
<div id="footer"></div>

And this to the admin's CSS panel:

#footer {
    position: fixed;  bottom: 0; width: 100%; height: 20px; background: #191818; z-index: 0;text-align: center;
    /* Comment this to show the footer */
    display: none !important;
}

#footer span {
    display: none;
}
#footer:after {
    content: 'Footer content. Changeme.';
}

The difference between and the linked reference is that this one doesn't call a function on an interval. It works by setting a timeout every time the footer is shown to hide it. It also uses vanilla JS vs jQuery.