+- 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: Progress bar when controls hidden (/t-progress-bar-when-controls-hidden)
Progress bar when controls hidden - randomuser123 - 2024-07-25
Hello, I'm new here.
I have been looking for the feature mentioned in the subject while customizing my Jellyfin setup and found nothing on it so I decided to make one myself using CSS.
Code:
/* show small progress bar when player control bar hidden */
#videoOsdPage > div.videoOsdBottom.videoOsdBottom-maincontrols.videoOsdBottom-hidden.hide,
div.videoOsdBottom.videoOsdBottom-maincontrols.videoOsdBottom-hidden.hide{
opacity: 1 !important;
display: block !important;
margin-bottom: -13.1em;
}
#videoOsdPage > div.videoOsdBottom.videoOsdBottom-maincontrols.videoOsdBottom-hidden.hide div.sliderContainer.flex-grow.mdl-slider-container{
margin: .5em 0 .25em;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
#videoOsdPage > div.videoOsdBottom.videoOsdBottom-maincontrols.videoOsdBottom-hidden.hide div.sliderContainer.flex-grow.mdl-slider-container > input.mdl-slider-hoverthumb,
#videoOsdPage > div.videoOsdBottom.videoOsdBottom-maincontrols.videoOsdBottom-hidden.hide div.sliderContainer.flex-grow.mdl-slider-container > input.osdPositionSlider::-webkit-slider-thumb{
display: none;
}notice the blue line at the very bottom
This shows a small progress bar at the bottom of the screen when the player controls are hidden and works in regular and full screen mode.
Not sure if this is the correct approach to implement the feature but it works on all my devices (Desktop, mobile, ROG ally).
Enjoy!
RE: Progress bar when controls hidden - TheDreadPirate - 2024-07-25
I have zero custom CSS in my setup, but this is genuinely useful. Even shows chapter markers. Thanks!
RE: Progress bar when controls hidden - randomuser123 - 2024-07-25
(2024-07-25, 01:28 PM)TheDreadPirate Wrote: I have zero custom CSS in my setup, but this is genuinely useful. Even shows chapter markers. Thanks!
Didn't even know it still shows the chapter markers.
What I did was just basically destroy the default behavior of the controls when hidden and adjust it to where only the progress bar can be seen.
Glad you like it!
RE: Progress bar when controls hidden - Leania - 2024-08-13
What do I have to do to implement this? I have no idea about the structure and don't know where I need to change anything.
RE: Progress bar when controls hidden - Efficient_Good_5784 - 2024-08-13
(2024-08-13, 03:03 PM)Leania Wrote: What do I have to do to implement this? I have no idea about the structure and don't know where I need to change anything.You just copy and paste the CSS code into your dashboard's custom CSS section in the bottom of the general section.