mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
4:3 aspect fix
Forgot to commit this. That is what I get for working in 2 environments :)
This commit is contained in:
parent
2a8d8037f4
commit
43dd77b685
2 changed files with 71 additions and 0 deletions
|
@ -135,6 +135,10 @@
|
|||
margin-top: -115px;
|
||||
}
|
||||
|
||||
#videoPlayer.aspect43 {
|
||||
margin-top: -163px;
|
||||
}
|
||||
|
||||
#videoPlayer.fullscreenVideo,
|
||||
.fullscreenVideo .itemVideo {
|
||||
position: fixed !important;
|
||||
|
@ -402,6 +406,16 @@ ss}
|
|||
margin-left: -250px;
|
||||
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) {
|
||||
|
@ -415,6 +429,16 @@ ss}
|
|||
margin-left: -330px;
|
||||
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) {
|
||||
|
@ -428,6 +452,16 @@ ss}
|
|||
margin-left: -370px;
|
||||
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) {
|
||||
|
@ -441,6 +475,16 @@ ss}
|
|||
margin-left: -550px;
|
||||
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) {
|
||||
|
@ -458,6 +502,16 @@ ss}
|
|||
.positionSliderContainer {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.aspect43 .itemVideo:not(.fullscreenVideo) {
|
||||
width: 900px;
|
||||
margin-left: -450px;
|
||||
}
|
||||
|
||||
#videoPlayer.aspect43 {
|
||||
margin-left: -460px;
|
||||
margin-top: -380px;
|
||||
}
|
||||
}
|
||||
|
||||
.status {
|
||||
|
|
|
@ -274,6 +274,8 @@
|
|||
|
||||
videoPlayer.fadeIn();
|
||||
|
||||
checkAspectRatio();
|
||||
|
||||
});
|
||||
|
||||
$(".mediaFlyoutContainer").on("click", "a", function (e) {
|
||||
|
@ -318,6 +320,21 @@
|
|||
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) {
|
||||
|
||||
document.addEventListener(event, function () {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue