mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Video player updates

Browse source 
* All buttons shown all the time
* Added time feedback when dragging position slider
This commit is contained in:
Tim Hobbs 2014-03-31 14:39:12 -07:00
parent bb54d12ca8
commit 47d87ccfe8
5 changed files with 132 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

125
dashboard-ui/css/mediaplayer-video.css
View file

@ -52,10 +52,40 @@
margin-top: 0px;
}
#videoControls #video-basic-controls {
position: absolute;
top: 30px;
left: 20px;
bottom: 0;
width: 600px;
display: inline-block;
}
#videoControls #video-advanced-controls {
position: absolute;
top: 30px;
right: 20px;
bottom: 0;
width: 400px;
display: inline-block;
}
#videoControls .currentTime {
margin-top: 25px;
}
#slider-tooltip {
z-index: 99999;
position: absolute;
top: -30px;
left: 0;
background-color: #eee;
border: 1px solid #333;
color: #333;
border-radius: 3px;
padding: 5px;
}
/* Fullscreen
***************************************/
@ -95,6 +125,17 @@
display: none!important
}
#mediaPlayer #video-advanced-controls {
text-align: right;
}
#mediaPlayer #videoControls .mediaPlayerFlyout {
text-align: left;
margin-left: 0;
right: 0;
bottom: 83px;
}
/* Media queries
***************************************/
@ -165,87 +206,63 @@
/****************************************/
@media all and (max-width: 1200px), all and (max-height: 720px) {
#mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton {
display: none!important;
#videoControls .nowPlayingMediaInfo {
display: none;
}
#mediaPlayer.showVideoMenu .muteButton, #mediaPlayer.showVideoMenu .unmuteButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .subtitleButton {
display: initial!important;
#videoControls .currentTime {
margin-right: 0;
}
#mediaPlayer.showVideoMenu .nowPlayingMediaInfo {
display: none!important;
#videoControls #video-advanced-controls {
width: 350px;
}
}
@media all and (max-width: 960px), all and (max-height: 550px) {
#mediaPlayer .nowPlayingBarImage, #mediaPlayer .qualityButton, #mediaPlayer .audioTracksButton, #mediaPlayer .chaptersButton {
display: none!important;
}
#mediaPlayer.showVideoMenu .muteButton, #mediaPlayer.showVideoMenu .unmuteButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .subtitleButton {
display: initial!important;
}
#mediaPlayer.showVideoMenu .nowPlayingMediaInfo {
display: none!important;
#videoControls #video-advanced-controls {
width: 275px;
}
}
@media all and (max-width: 800px), all and (max-height: 460px) {
#mediaPlayer .muteButton, #mediaPlayer .unmuteButton, #mediaPlayer .nowPlayingMediaInfo {
display: none!important;
}
#mediaPlayer .volumeButton, #mediaPlayer .volumeSliderContainer {
display: inline-block!important;
}
#mediaPlayer.showVideoMenu #videoPlayer {
#mediaPlayer #videoPlayer {
margin-top: -180px;
}
#mediaPlayer.showVideoMenu .itemVideo {
#mediaPlayer .itemVideo {
margin-bottom: 120px;
}
#mediaPlayer.showVideoMenu #videoControls {
#mediaPlayer #videoControls {
height: 120px;
}
#mediaPlayer.showVideoMenu .muteButton, #mediaPlayer.showVideoMenu .unmuteButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .subtitleButton {
display: initial!important;
#mediaPlayer #video-basic-controls {
width: 250px;
}
#mediaPlayer #video-basic-controls .volumeSliderContainer {
margin-top: 8px;
}
#mediaPlayer #video-basic-controls, #mediaPlayer #video-advanced-controls {
width: 200px;
height: 120px;
}
#mediaPlayer #videoControls .mediaPlayerFlyout {
bottom: 148px;
}
}
@media all and (max-width: 640px), all and (max-height: 365px) {
#mediaPlayer .fullscreenButton, #mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton, #mediaPlayer .qualityButton, #mediaPlayer .subtitleButton {
display: none!important;
}
#mediaPlayer .currentTime {
margin-top: 15px;
}
#mediaPlayer .volumeSliderContainer {
vertical-align: middle;
margin-top: -5px;
}
#mediaPlayer.showVideoMenu #videoPlayer {
#mediaPlayer #videoPlayer {
margin-top: -135px;
}
#mediaPlayer.showVideoMenu .itemVideo {
margin-bottom: 120px;
}
#mediaPlayer.showVideoMenu #videoControls {
height: 120px;
}
#mediaPlayer.showVideoMenu .fullscreenButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .subtitleButton {
display: initial!important;
#mediaPlayer #video-advanced-controls {
width: 150px;
}
}

37
dashboard-ui/css/mediaplayer.css
View file

@ -79,6 +79,10 @@
width: 130px;
}
#nowPlayingBar .positionSliderContainer {
margin-top: 8px;
}
.volumeSliderContainer {
width: 90px;
}
@ -123,41 +127,41 @@ input[type="range"]::-ms-fill-upper {
}
@media all and (max-width: 800px) {
.volumeButton, .volumeSliderContainer, .muteButton, .unmuteButton, .nowPlayingMediaInfo {
display: none!important;
#nowPlayingBar .volumeButton, #nowPlayingBar .volumeSliderContainer, #nowPlayingBar .muteButton, #nowPlayingBar .unmuteButton, #nowPlayingBar .nowPlayingMediaInfo {
display: none; /*!important;*/
}
}
@media all and (max-width: 650px) {
.nowPlayingMediaInfo {
#nowPlayingBar .nowPlayingMediaInfo {
display: none;
}
}
@media all and (max-width: 600px) {
.chaptersButton, .audioTracksButton {
display: none!important;
#nowPlayingBar .chaptersButton, #nowPlayingBar .audioTracksButton {
display: none; /*!important;*/
}
.positionSliderContainer, .currentTime {
#nowPlayingBar .positionSliderContainer, #nowPlayingBar .currentTime {
top: 0!important;
position: relative!important;
}
}
@media all and (max-width: 500px) {
.positionSliderContainer {
#nowPlayingBar .positionSliderContainer {
width: 80px;
}
.previousTrackButton, .nextTrackButton {
display: none!important;
#nowPlayingBar .previousTrackButton, #nowPlayingBar .nextTrackButton {
display: none; /*!important;*/
}
}
@media all and (max-width: 400px) {
.playlistButton {
display: none!important;
#nowPlayingBar .playlistButton {
display: none; /*!important;*/
}
}
@ -173,18 +177,15 @@ input[type="range"]::-ms-fill-upper {
position: absolute;
z-index: 99999;
bottom: 78px;
margin-left: -50px;
margin-left: -125px;
max-height: 300px;
overflow-y: auto;
font-size: 13px;
}
.chaptersFlyout {
width: 250px;
}
.audioTracksFlyout {
.chaptersFlyout,.audioTracksFlyout {
width: 250px;
margin-left: -150px;
}
.mediaFlyoutOption {
@ -248,7 +249,7 @@ input[type="range"]::-ms-fill-upper {
}
@media (min-width: 1440px) {
.positionSliderContainer {
#nowPlayingBar .positionSliderContainer {
width: 300px;
}
}