From 43dd77b6856dda1c6c320b9a71cff559359e69dd Mon Sep 17 00:00:00 2001 From: Tim Hobbs Date: Fri, 14 Mar 2014 21:11:58 +0000 Subject: [PATCH] 4:3 aspect fix Forgot to commit this. That is what I get for working in 2 environments :) --- dashboard-ui/css/mediaplayer.css | 54 +++++++++++++++++++++++ dashboard-ui/scripts/mediaplayer-video.js | 17 +++++++ 2 files changed, 71 insertions(+) diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css index f3348f0371..1810957dd0 100644 --- a/dashboard-ui/css/mediaplayer.css +++ b/dashboard-ui/css/mediaplayer.css @@ -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 { diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index 729be638c0..ff28251c3d 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -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 () {