mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Major video player overhaul
Updates, enhancements and some bug fixes too.
This commit is contained in:
parent
4b43d4c9e7
commit
97e9b8ceea
7 changed files with 1287 additions and 1013 deletions
BIN
dashboard-ui/css/images/media/pause.png
Normal file
BIN
dashboard-ui/css/images/media/pause.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 2.3 KiB |
BIN
dashboard-ui/css/images/media/play.png
Normal file
BIN
dashboard-ui/css/images/media/play.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.6 KiB |
|
@ -1,27 +1,33 @@
|
|||
/* Now playing bar */
|
||||
.nowPlayingBar {
|
||||
padding: 6px 0 24px 0;
|
||||
border-top: 2px solid green;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nowPlayingBar .highPosition {
|
||||
z-index: 99999;
|
||||
position: relative;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.nowPlayingBar .highPosition:hover:not(.barBackground ) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.nowPlayingBar .barBackground {
|
||||
border-top: 2px solid green;
|
||||
position: absolute;
|
||||
margin: -8px -0.5em -26px !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#videoPlayer.fullscreenVideo .nowPlayingBar {
|
||||
opacity: 0.5;
|
||||
-webkit-transition: top 0.6s ease-in-out;
|
||||
-moz-transition: top 0.6s ease-in-out;
|
||||
-o-transition: top 0.6s ease-in-out;
|
||||
transition: top 0.6s ease-in-out;
|
||||
top: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#videoPlayer.fullscreenVideo:hover .nowPlayingBar {
|
||||
top: 95% !important;
|
||||
}
|
||||
|
||||
.nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
|
||||
position: relative;
|
||||
}
|
||||
|
@ -39,6 +45,15 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.fullscreenVideo #mediaElement {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.nowPlayingMediaInfo div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
@ -49,15 +64,17 @@
|
|||
|
||||
|
||||
.nowPlayingMediaInfo {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: 3px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.nowPlayingText {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
margin-left: 3px;
|
||||
margin-right: 2em;
|
||||
margin: 0 2em 0 5px;
|
||||
font-weight: normal;
|
||||
top: -7px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 650px) {
|
||||
|
@ -75,7 +92,6 @@
|
|||
background: #000;
|
||||
border: 1px solid #444;
|
||||
width: 320px;
|
||||
cursor: pointer;
|
||||
margin: 20px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
|
@ -112,7 +128,6 @@
|
|||
z-index: 99997;
|
||||
background: #1d1d1d;
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
border: 1px solid green;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
@ -130,15 +145,12 @@
|
|||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: 0 !important;
|
||||
z-index: 999999 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#videoPlayer #mediaElement {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.fullscreenVideo .itemVideo {
|
||||
z-index: 99996;
|
||||
}
|
||||
|
||||
#videoPlayer .itemVideo {
|
||||
position: static;
|
||||
|
@ -147,19 +159,23 @@
|
|||
}
|
||||
|
||||
#videoPlayer .nowPlayingBar {
|
||||
z-index: 99999;
|
||||
padding: 0;
|
||||
border: none !important;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
height: 50px;
|
||||
background-color: #1d1d1d;
|
||||
position: absolute;
|
||||
top: initial;
|
||||
right: 0;
|
||||
bottom: 10px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#videoPlayer .nowPlayingBar .barBackground {
|
||||
display: none;
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
#videoPlayer.fullscreenVideo .nowPlayingBar .barBackground {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.currentTime {
|
||||
|
@ -181,6 +197,7 @@
|
|||
|
||||
.sliderContainer {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.positionSliderContainer {
|
||||
|
@ -240,21 +257,24 @@ input[type="range"]::-ms-fill-upper {
|
|||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 640px) {
|
||||
.positionSliderContainer {
|
||||
width: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 600px) {
|
||||
.chaptersButton, .audioTracksButton, .sendMediaButton {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
.positionSliderContainer, .currentTime {
|
||||
.positionSliderContainer {
|
||||
top: 0!important;
|
||||
position: relative!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 500px) {
|
||||
.positionSliderContainer {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.previousTrackButton, .nextTrackButton {
|
||||
display: none!important;
|
||||
|
@ -278,13 +298,31 @@ input[type="range"]::-ms-fill-upper {
|
|||
border: 1px solid #999;
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
bottom: 78px;
|
||||
bottom: 64px;
|
||||
margin-left: -50px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.fullscreenVideo .mediaPlayerFlyout {
|
||||
-webkit-transition: top 0.6s ease-in-out;
|
||||
-moz-transition: top 0.6s ease-in-out;
|
||||
-o-transition: top 0.6s ease-in-out;
|
||||
transition: top 0.6s ease-in-out;
|
||||
top: 100%;
|
||||
bottom: 100%;
|
||||
}
|
||||
|
||||
#videoPlayer.fullscreenVideo:hover .mediaPlayerFlyout {
|
||||
-webkit-transition: top 0.6s ease-out;
|
||||
-moz-transition: top 0.6s ease-out;
|
||||
-o-transition: top 0.6s ease-out;
|
||||
transition: top 0.6s ease-out;
|
||||
top: -303px !important;
|
||||
bottom: -3px !important;
|
||||
ss}
|
||||
|
||||
.chaptersFlyout {
|
||||
width: 250px;
|
||||
}
|
||||
|
@ -420,4 +458,81 @@ input[type="range"]::-ms-fill-upper {
|
|||
.positionSliderContainer {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -75px;
|
||||
margin-left: -75px;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
#play {
|
||||
background-image: url(images/media/play.png);
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pause {
|
||||
background-image: url(images/media/pause.png);
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.fadeOut {
|
||||
animation-name: fadeOut;
|
||||
-webkit-animation-name: fadeOut;
|
||||
animation-duration: .25s;
|
||||
-webkit-animation-duration: .25s;
|
||||
animation-timing-function: ease-in-out;
|
||||
-webkit-animation-timing-function: ease-in-out;
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
transform: scale(.25);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: scale(.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: scale(.75);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeOut {
|
||||
0% {
|
||||
-webkit-transform: scale(.25);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
60% {
|
||||
-webkit-transform: scale(.5);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: scale(.75);
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
|
@ -683,6 +683,7 @@ h1 .imageLink {
|
|||
z-index: 99997;
|
||||
color: #fff;
|
||||
border: 0 !important;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.footerNotification {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue