mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Media player updates
* Separate code for video player * Audio player code reverted to pre-video player updates
This commit is contained in:
Tim Hobbs
parent
4721d3722f
commit
c806ef8d65
5 changed files with 816 additions and 861 deletions
|
|
@ -1,36 +1,17 @@
|
|||
/* Now playing bar */
|
||||
.nowPlayingBar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 6px 0 24px 0;
|
||||
border-top: 2px solid green;
|
||||
}
|
||||
|
||||
.nowPlayingBar .barBackground {
|
||||
border-top: 2px solid #08b;
|
||||
border-top: 2px solid green;
|
||||
position: absolute;
|
||||
margin: -8px -0.5em -26px !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#videoPlayer.fullscreenVideo .nowPlayingBar {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#videoPlayer.fullscreenVideo .inactive {
|
||||
-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 .active {
|
||||
top: 95% !important;
|
||||
}
|
||||
|
||||
.nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -48,20 +29,6 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.fullscreenVideo #mediaElement {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#mediaPlayer {
|
||||
min-height: 50px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.nowPlayingMediaInfo div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -72,17 +39,15 @@
|
|||
|
||||
|
||||
.nowPlayingMediaInfo {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-top: 3px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.nowPlayingText {
|
||||
position: relative;
|
||||
margin: 0 2em 0 5px;
|
||||
top: -3px;
|
||||
margin-left: 3px;
|
||||
margin-right: 2em;
|
||||
font-weight: normal;
|
||||
top: -7px;
|
||||
}
|
||||
|
||||
@media all and (max-width: 650px) {
|
||||
|
|
@ -95,100 +60,6 @@
|
|||
height: 24px;
|
||||
}
|
||||
|
||||
.itemVideo {
|
||||
z-index: 99998;
|
||||
background: #000;
|
||||
min-width: 241px;
|
||||
max-width: 320px;
|
||||
max-height: 181px;
|
||||
margin: 20px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -160px;
|
||||
margin-top: -90px;
|
||||
}
|
||||
|
||||
.fullscreenVideo {
|
||||
position: fixed;
|
||||
top: 0 !important;
|
||||
bottom: 0 !important;
|
||||
right: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
z-index: 99996;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
#videoBackdrop {
|
||||
z-index: 99990;
|
||||
position: fixed;
|
||||
background-color: transparent;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#videoPlayer {
|
||||
z-index: 99997;
|
||||
background: #1d1d1d;
|
||||
position: fixed;
|
||||
border: 1px solid #333;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -170px;
|
||||
margin-top: -115px;
|
||||
}
|
||||
|
||||
#videoPlayer.fullscreenVideo,
|
||||
#videoPlayer.fullscreenVideo .itemVideo {
|
||||
position: fixed !important;
|
||||
top: 0 !important;
|
||||
bottom: 0 !important;
|
||||
right: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
border: 0 !important;
|
||||
margin: 0 !important;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.fullscreenVideo .itemVideo {
|
||||
z-index: 99996;
|
||||
}
|
||||
|
||||
#videoPlayer .itemVideo {
|
||||
position: static;
|
||||
margin: 0;
|
||||
margin: 20px 20px 60px;
|
||||
}
|
||||
|
||||
#videoPlayer .nowPlayingBar {
|
||||
z-index: 99999;
|
||||
padding: 0;
|
||||
height: 50px;
|
||||
background-color: #1d1d1d;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#videoPlayer .nowPlayingBar .barBackground {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
#videoPlayer.fullscreenVideo .nowPlayingBar .barBackground {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.currentTime {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -208,7 +79,6 @@
|
|||
|
||||
.sliderContainer {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.positionSliderContainer {
|
||||
|
|
@ -227,10 +97,6 @@
|
|||
margin-left: 15px !important;
|
||||
}
|
||||
|
||||
.highPosition .ui-slider-track {
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
.volumeSliderContainer .ui-slider-track {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
|
|
@ -262,40 +128,27 @@ input[type="range"]::-ms-fill-upper {
|
|||
display: none; /* display and visibility only */
|
||||
}
|
||||
|
||||
@media all and (max-width: 1200px) {
|
||||
.volumeSliderContainer, .sendMediaButton {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 960px) {
|
||||
.volumeSliderContainer, .audioTracksButton, .chaptersButton, .sendMediaButton {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 800px) {
|
||||
.volumeButton, .volumeSliderContainer, .muteButton, .unmuteButton, .nowPlayingMediaInfo, .sendMediaButton {
|
||||
.volumeButton, .volumeSliderContainer, .muteButton, .unmuteButton, .nowPlayingMediaInfo {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 640px) {
|
||||
.positionSliderContainer {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.chaptersButton, .audioTracksButton, .qualityButton, .subtitleButton {
|
||||
@media all and (max-width: 600px) {
|
||||
.chaptersButton, .audioTracksButton, .sendMediaButton {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
.positionSliderContainer {
|
||||
.positionSliderContainer, .currentTime {
|
||||
top: 0!important;
|
||||
position: relative!important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 500px) {
|
||||
.positionSliderContainer {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.previousTrackButton, .nextTrackButton {
|
||||
display: none!important;
|
||||
|
|
@ -319,31 +172,13 @@ input[type="range"]::-ms-fill-upper {
|
|||
border: 1px solid #999;
|
||||
position: absolute;
|
||||
z-index: 99999;
|
||||
bottom: 64px;
|
||||
bottom: 78px;
|
||||
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;
|
||||
}
|
||||
|
||||
.chaptersFlyout {
|
||||
width: 250px;
|
||||
}
|
||||
|
|
@ -412,166 +247,8 @@ input[type="range"]::-ms-fill-upper {
|
|||
padding-left: 5px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) and (min-height: 360px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
min-width: 361px;
|
||||
max-width: 480px;
|
||||
max-height: 271px;
|
||||
margin-left: -240px;
|
||||
margin-top: -135px;
|
||||
}
|
||||
|
||||
#videoPlayer {
|
||||
margin-left: -250px;
|
||||
margin-top: -160px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 800px) and (min-height: 450px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
min-width: 481px;
|
||||
max-width: 640px;
|
||||
max-height: 362px;
|
||||
margin-left: -320px;
|
||||
margin-top: -181px;
|
||||
}
|
||||
|
||||
#videoPlayer {
|
||||
margin-left: -330px;
|
||||
margin-top: -205px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) and (min-height: 540px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
min-width: 541px;
|
||||
max-width: 720px;
|
||||
max-height: 406px;
|
||||
margin-left: -360px;
|
||||
margin-top: -203px;
|
||||
}
|
||||
|
||||
#videoPlayer {
|
||||
margin-left: -370px;
|
||||
margin-top: -228px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) and (min-height: 720px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
min-width: 812px;
|
||||
max-width: 1080px;
|
||||
max-height: 610px;
|
||||
margin-left: -540px;
|
||||
margin-top: -305px;
|
||||
}
|
||||
|
||||
#videoPlayer {
|
||||
margin-left: -550px;
|
||||
margin-top: -329px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) and (min-height: 720px) {
|
||||
.itemVideo:not(.fullscreenVideo) {
|
||||
min-width: 812px;
|
||||
max-width: 1080px;
|
||||
max-height: 610px;
|
||||
margin-left: -540px;
|
||||
margin-top: -305px;
|
||||
}
|
||||
|
||||
#videoPlayer {
|
||||
margin-left: -550px;
|
||||
margin-top: -329px;
|
||||
}
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-active {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.cursor-inactive {
|
||||
cursor: none;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue