Progress bar when controls hidden

[randomuser123]

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!

[TheDreadPirate]

I have zero custom CSS in my setup, but this is genuinely useful.  Even shows chapter markers.  Thanks!

   

[randomuser123]

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!

[Leania]

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.

[Efficient_Good_5784]

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.