2024-07-25, 01:04 PM
(This post was last modified: 2024-07-26, 09:51 AM by randomuser123. Edited 4 times in total.)
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.
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!
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!
