Add non intrusive refresh button

[jakamy]

my solution for truenas jellyfin app of a non intrusive refresh button.

copy the files of jellyfin-web to the media folder subfolder temp (trunas permisison issues)

• create folder then confirm exist in jellyfin shell "ls -ld /media/temp"
  
• cp -r /jellyfin/jellyfin-web/* /media/temp/
  
• after it finishes copy back these files to a folder "jellyfin-web" alongside your jellyfin "config" folder
  
• Add hostpath  "jellyfin-web" (ex: /mnt/NVMePool/minidocker/jellyfin/jellyfin-web) as a mount path in truenas mount path app "/jellyfin/jellyfin-web"
  
• and update the app
  
• now I assume you of course have smb access to the jellyfin config and now jellyfin-web folder.
  

add to index.html style and script before /body
in index.html add this before the </style>:
#custom-refresh-btn {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}
#custom-refresh-btn:hover {
    opacity: 0.6;
}
and this before </body>:
<script>
document.addEventListener("DOMContentLoaded", function () {
    const refreshBtn = document.createElement("button");
    refreshBtn.id = "custom-refresh-btn";
    //refreshBtn.innerHTML = "🔄"; // replace with an image if preferred like bellow
refreshBtn.innerHTML = '<img src="assets/img/refresh-transparent.png" alt="Refresh" style="width:32px;height:32px;">';
    refreshBtn.title = "Refresh";

    refreshBtn.onclick = function () {
        const baseUrl = location.origin + location.pathname;
        const uniqueParam = "?refresh=" + new Date().getTime();
        location.href = baseUrl + uniqueParam;
    };

    document.body.appendChild(refreshBtn);
  // Scroll detection logic
    let scrollTimeout;
    const showBtn = () => {
        refreshBtn.style.opacity = "0.5";
        refreshBtn.style.pointerEvents = "auto";
    };
    const hideBtn = () => {
        refreshBtn.style.opacity = "0";
        refreshBtn.style.pointerEvents = "none";
    };

    window.addEventListener("scroll", () => {
        showBtn();
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(hideBtn, 2000); // stays visible for 2 seconds after scroll stops
    });

    // Initially hidden
    hideBtn();
});
</script>

• add png half transparent in jellyfin-web/asset/img/ named as (refresh-transparent.png mine white, set it to match your main theme in paint.net)
  

   
now it loads not showing, only when scrolling is done it shows for 2 seconds and fade off
and on click refresh page
   
its now clickable on lg tv and android app
Cheers