+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Guides, Walkthroughs & Tutorials (https://forum.jellyfin.org/f-guides-walkthroughs-tutorials)
+--- Thread: Add non intrusive refresh button (/t-add-non-intrusive-refresh-button)
Add non intrusive refresh button - jakamy - 2025-07-28
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.
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