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 enhancements

Browse source 
BlockUI style backdrop, escape key exits video, click video to toggle
playback, dbl-click to toggle fullscreen.
This commit is contained in:
Tim Hobbs 2014-03-05 05:56:15 -08:00
parent f9541e56fd
commit 4b43d4c9e7
2 changed files with 199 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -74,10 +74,14 @@
z-index: 99998;
background: #000;
border: 1px solid #444;
width: 320px;
cursor: pointer;
margin: 20px;
position: fixed;
top: 50%;
left: 50%;
width: 320px;
margin-left: -160px;
margin-top: -90px;
}
.fullscreenVideo {
@ -93,6 +97,71 @@
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;
overflow: hidden;
border: 1px solid green;
top: 50%;
left: 50%;
margin-left: -170px;
margin-top: -115px;
}
#videoPlayer.fullscreenVideo,
.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;
z-index: 999999 !important;
margin: 0 !important;
}
#videoPlayer #mediaElement {
position: absolute;
top: 0;
left: 0;
}
#videoPlayer .itemVideo {
position: static;
margin: 0;
margin: 20px 20px 60px;
}
#videoPlayer .nowPlayingBar {
padding: 0;
border: none !important;
height: 40px;
overflow: hidden;
background-color: #1d1d1d;
position: absolute;
right: 0;
bottom: 10px;
left: 0;
}
#videoPlayer .nowPlayingBar .barBackground {
display: none;
}
.currentTime {
display: inline-block;
position: relative;
@ -284,36 +353,71 @@ input[type="range"]::-ms-fill-upper {
padding-left: 5px;
}
@media (min-width: 640px) {
@media (min-width: 640px) and (min-height: 360px) {
.itemVideo:not(.fullscreenVideo) {
width: 480px;
margin-left: -240px;
margin-top: -135px;
}
#videoPlayer {
margin-left: -250px;
margin-top: -160px;
}
}
@media (min-width: 800px) {
@media (min-width: 800px) and (min-height: 450px) {
.itemVideo:not(.fullscreenVideo) {
width: 640px;
margin-left: -320px;
margin-top: -180px;
}
#videoPlayer {
margin-left: -330px;
margin-top: -205px;
}
}
@media (min-width: 960px) {
@media (min-width: 960px) and (min-height: 540px) {
.itemVideo:not(.fullscreenVideo) {
width: 720px;
margin-left: -360px;
margin-top: -203px;
}
#videoPlayer {
margin-left: -370px;
margin-top: -228px;
}
}
@media (min-width: 1200px) {
@media (min-width: 1200px) and (min-height: 720px) {
.itemVideo:not(.fullscreenVideo) {
width: 1080px;
margin-left: -540px;
margin-top: -304px;
}
#videoPlayer {
margin-left: -550px;
margin-top: -329px;
}
}
@media (min-width: 1440px) {
@media (min-width: 1440px) and (min-height: 720px) {
.itemVideo:not(.fullscreenVideo) {
width: 1080px;
margin-left: -540px;
margin-top: -304px;
}
#videoPlayer {
margin-left: -550px;
margin-top: -329px;
}
.positionSliderContainer {
width: 300px;
}
}
}