+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: CSS for Playerbar hide time (/t-css-for-playerbar-hide-time)
CSS for Playerbar hide time - atma_weaponvi - 2024-10-18
Hi community,
I'm wondering if anyone had CSS that can change the speed at which the player bar hides itself? I would like the ability to speed up the auto hide function if possible.
Warm Regards,
Atma
RE: CSS for Playerbar hide time - SethBacon - 2024-10-21
Sorry this is not a good answer for you, but ive been working on some similar tinkering and heres some thoughts. If you want to speed up the rate that the UI disappears that is changeable in CSS:
/* Speed up transition for the skinHeader (top controls) */
.skinHeader {
transition: opacity 0.2s ease, transform 0.2s ease !important;
}
/* Speed up transition for the videoOsdBottom (bottom controls) */
.videoOsdBottom {
transition: opacity 0.2s ease, transform 0.2s ease !important;
}
/* Ensure hidden states also have reduced transition durations */
.osdHeader-hidden,
.videoOsdBottom-hidden,
.hide {
transition: opacity 0.2s ease, transform 0.2s ease !important;
}
But the actual length of time the UI stays up is on a 3 second javascript timer under the control of JF-web. Confusingly, JF plugins cannot adjust JF-Web behaviour, you would need to inject code either on your browser through something like tampermokey:
// ==UserScript==
// @name Jellyfin Auto-Hide Timer Modifier
// @namespace http://tampermonkey.net/
// @version 1.0
// @description Reduce the auto-hide delay for Jellyfin player controls
// @author Your Name
// @match http://localhost:8096/* // Adjust the URL to match your Jellyfin server
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Wait for the page to load
window.addEventListener('load', function() {
// Function to override setTimeout
const originalSetTimeout = window.setTimeout;
window.setTimeout = function(callback, delay, ...args) {
// If the delay is 3000ms, change it to 1000ms
if (delay === 3000) {
return originalSetTimeout(callback, 1000, ...args);
}
return originalSetTimeout(callback, delay, ...args);
};
}, false);
})();
which would work on that browser only,
Or inject it into jfweb's index.html ala spotlight https://github.com/tedhinklater/Jellyfin-Featured-Content-Bar and that would work for all users on desktop JMP or android (Not android-TV)