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 
* Removed js to add class name for 4:3 aspect ratio
* Added min/max width for video to try and eliminate layout issues
This commit is contained in:
Tim Hobbs 2014-03-18 17:55:46 -07:00
parent 16cf53b2cf
commit d388e3ae4b
2 changed files with 25 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -98,7 +98,9 @@
.itemVideo { .itemVideo {
z-index: 99998; z-index: 99998;
background: #000; background: #000;
width: 320px; min-width: 241px;
max-width: 320px;
max-height: 181px;
margin: 20px; margin: 20px;
position: fixed; position: fixed;
top: 50%; top: 50%;
@ -142,12 +144,8 @@
margin-top: -115px; margin-top: -115px;
} }
#videoPlayer.aspect43 {
margin-top: -163px;
}
#videoPlayer.fullscreenVideo, #videoPlayer.fullscreenVideo,
.fullscreenVideo .itemVideo { #videoPlayer.fullscreenVideo .itemVideo {
position: fixed !important; position: fixed !important;
top: 0 !important; top: 0 !important;
bottom: 0 !important; bottom: 0 !important;
@ -157,6 +155,8 @@
height: 100% !important; height: 100% !important;
border: 0 !important; border: 0 !important;
margin: 0 !important; margin: 0 !important;
max-width: 100%;
max-height: 100%;
} }
.fullscreenVideo .itemVideo { .fullscreenVideo .itemVideo {
@ -342,7 +342,7 @@ input[type="range"]::-ms-fill-upper {
transition: top 0.6s ease-out; transition: top 0.6s ease-out;
top: -303px !important; top: -303px !important;
bottom: -3px !important; bottom: -3px !important;
ss} }
.chaptersFlyout { .chaptersFlyout {
width: 250px; width: 250px;
@ -414,7 +414,9 @@ ss}
@media (min-width: 640px) and (min-height: 360px) { @media (min-width: 640px) and (min-height: 360px) {
.itemVideo:not(.fullscreenVideo) { .itemVideo:not(.fullscreenVideo) {
width: 480px; min-width: 361px;
max-width: 480px;
max-height: 271px;
margin-left: -240px; margin-left: -240px;
margin-top: -135px; margin-top: -135px;
} }
@ -423,44 +425,28 @@ ss}
margin-left: -250px; margin-left: -250px;
margin-top: -160px; margin-top: -160px;
} }
.aspect43 .itemVideo:not(.fullscreenVideo) {
width: 440px;
margin-left: -220px;
}
#videoPlayer.aspect43 {
margin-left: -230px;
margin-top: -208px;
}
} }
@media (min-width: 800px) and (min-height: 450px) { @media (min-width: 800px) and (min-height: 450px) {
.itemVideo:not(.fullscreenVideo) { .itemVideo:not(.fullscreenVideo) {
width: 640px; min-width: 481px;
max-width: 640px;
max-height: 362px;
margin-left: -320px; margin-left: -320px;
margin-top: -180px; margin-top: -181px;
} }
#videoPlayer { #videoPlayer {
margin-left: -330px; margin-left: -330px;
margin-top: -205px; margin-top: -205px;
} }
.aspect43 .itemVideo:not(.fullscreenVideo) {
width: 560px;
margin-left: -280px;
}
#videoPlayer.aspect43 {
margin-left: -290px;
margin-top: -253px;
}
} }
@media (min-width: 960px) and (min-height: 540px) { @media (min-width: 960px) and (min-height: 540px) {
.itemVideo:not(.fullscreenVideo) { .itemVideo:not(.fullscreenVideo) {
width: 720px; min-width: 541px;
max-width: 720px;
max-height: 406px;
margin-left: -360px; margin-left: -360px;
margin-top: -203px; margin-top: -203px;
} }
@ -469,46 +455,30 @@ ss}
margin-left: -370px; margin-left: -370px;
margin-top: -228px; margin-top: -228px;
} }
.aspect43 .itemVideo:not(.fullscreenVideo) {
width: 640px;
margin-left: -320px;
}
#videoPlayer.aspect43 {
margin-left: -330px;
margin-top: -283px;
}
} }
@media (min-width: 1200px) and (min-height: 720px) { @media (min-width: 1200px) and (min-height: 720px) {
.itemVideo:not(.fullscreenVideo) { .itemVideo:not(.fullscreenVideo) {
width: 1080px; min-width: 812px;
max-width: 1080px;
max-height: 610px;
margin-left: -540px; margin-left: -540px;
margin-top: -304px; margin-top: -305px;
} }
#videoPlayer { #videoPlayer {
margin-left: -550px; margin-left: -550px;
margin-top: -329px; margin-top: -329px;
} }
.aspect43 .itemVideo:not(.fullscreenVideo) {
width: 900px;
margin-left: -450px;
}
#videoPlayer.aspect43 {
margin-left: -460px;
margin-top: -380px;
}
} }
@media (min-width: 1440px) and (min-height: 720px) { @media (min-width: 1440px) and (min-height: 720px) {
.itemVideo:not(.fullscreenVideo) { .itemVideo:not(.fullscreenVideo) {
width: 1080px; min-width: 812px;
max-width: 1080px;
max-height: 610px;
margin-left: -540px; margin-left: -540px;
margin-top: -304px; margin-top: -305px;
} }
#videoPlayer { #videoPlayer {
@ -519,16 +489,6 @@ ss}
.positionSliderContainer { .positionSliderContainer {
width: 300px; width: 300px;
} }
.aspect43 .itemVideo:not(.fullscreenVideo) {
width: 900px;
margin-left: -450px;
}
#videoPlayer.aspect43 {
margin-left: -460px;
margin-top: -380px;
}
} }
.status { .status {

20
dashboard-ui/scripts/mediaplayer-video.js
View file

@ -276,7 +276,6 @@
footer.css("top", "101%"); footer.css("top", "101%");
var videoPlayer = $("#videoPlayer", footer) var videoPlayer = $("#videoPlayer", footer)
//.hide()
.append(nowPlayingBar); .append(nowPlayingBar);
// Stop playback on browser back button nav // Stop playback on browser back button nav
@ -328,10 +327,6 @@
$("html").css("cursor", "default"); $("html").css("cursor", "default");
//videoPlayer.fadeIn();
checkAspectRatio();
}); });
$(".mediaFlyoutContainer").on("click", "a", function (e) { $(".mediaFlyoutContainer").on("click", "a", function (e) {
@ -374,21 +369,6 @@
fullscreenExited = false; fullscreenExited = false;
}; };
function checkAspectRatio() {
// Resize player window if 4:3 aspect ratio
var footer = $("#footer");
var videoElement = $("video", footer);
var w = $(videoElement).width();
var h = $(videoElement).height();
if (w / h < 1.7) {
$("#videoPlayer", footer).addClass("aspect43");
}
}
function changeHandler(event) { function changeHandler(event) {
document.addEventListener(event, function () { document.addEventListener(event, function () {