diff --git a/dashboard-ui/css/mediaplayer.css b/dashboard-ui/css/mediaplayer.css index 2f8d452ae0..62a1f25e18 100644 --- a/dashboard-ui/css/mediaplayer.css +++ b/dashboard-ui/css/mediaplayer.css @@ -8,7 +8,7 @@ } .nowPlayingBar .barBackground { - border-top: 2px solid green; + border-top: 2px solid #08b; position: absolute; width: 100%; height: 100%; @@ -16,6 +16,9 @@ #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; @@ -24,7 +27,7 @@ height: 100%; } - #videoPlayer.fullscreenVideo:hover .nowPlayingBar { + #videoPlayer.fullscreenVideo:hover .active { top: 95% !important; } @@ -54,6 +57,11 @@ left: 0; } +#mediaPlayer { + min-height: 50px; + padding-bottom: 20px; +} + .nowPlayingMediaInfo div { display: inline-block; } @@ -90,7 +98,9 @@ .itemVideo { z-index: 99998; background: #000; - width: 320px; + min-width: 241px; + max-width: 320px; + max-height: 181px; margin: 20px; position: fixed; top: 50%; @@ -134,12 +144,8 @@ margin-top: -115px; } -#videoPlayer.aspect43 { - margin-top: -163px; -} - #videoPlayer.fullscreenVideo, -.fullscreenVideo .itemVideo { +#videoPlayer.fullscreenVideo .itemVideo { position: fixed !important; top: 0 !important; bottom: 0 !important; @@ -149,6 +155,8 @@ height: 100% !important; border: 0 !important; margin: 0 !important; + max-width: 100%; + max-height: 100%; } .fullscreenVideo .itemVideo { @@ -167,7 +175,7 @@ height: 50px; background-color: #1d1d1d; position: absolute; - top: initial; + top: auto; right: 0; bottom: 0; left: 0; @@ -334,7 +342,7 @@ input[type="range"]::-ms-fill-upper { transition: top 0.6s ease-out; top: -303px !important; bottom: -3px !important; -ss} +} .chaptersFlyout { width: 250px; @@ -406,7 +414,9 @@ ss} @media (min-width: 640px) and (min-height: 360px) { .itemVideo:not(.fullscreenVideo) { - width: 480px; + min-width: 361px; + max-width: 480px; + max-height: 271px; margin-left: -240px; margin-top: -135px; } @@ -415,44 +425,28 @@ 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) { .itemVideo:not(.fullscreenVideo) { - width: 640px; + min-width: 481px; + max-width: 640px; + max-height: 362px; margin-left: -320px; - margin-top: -180px; + margin-top: -181px; } #videoPlayer { 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) { .itemVideo:not(.fullscreenVideo) { - width: 720px; + min-width: 541px; + max-width: 720px; + max-height: 406px; margin-left: -360px; margin-top: -203px; } @@ -461,46 +455,30 @@ 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) { .itemVideo:not(.fullscreenVideo) { - width: 1080px; + min-width: 812px; + max-width: 1080px; + max-height: 610px; margin-left: -540px; - margin-top: -304px; + margin-top: -305px; } #videoPlayer { 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) { .itemVideo:not(.fullscreenVideo) { - width: 1080px; + min-width: 812px; + max-width: 1080px; + max-height: 610px; margin-left: -540px; - margin-top: -304px; + margin-top: -305px; } #videoPlayer { @@ -511,16 +489,6 @@ ss} .positionSliderContainer { width: 300px; } - - .aspect43 .itemVideo:not(.fullscreenVideo) { - width: 900px; - margin-left: -450px; - } - - #videoPlayer.aspect43 { - margin-left: -460px; - margin-top: -380px; - } } .status { @@ -598,4 +566,12 @@ ss} -webkit-transform: scale(1); opacity: 0; } +} + +.cursor-active { + cursor: default; +} + +.cursor-inactive { + cursor: none; } \ No newline at end of file diff --git a/dashboard-ui/css/site.css b/dashboard-ui/css/site.css index f6d6574d6d..132ab59b1a 100644 --- a/dashboard-ui/css/site.css +++ b/dashboard-ui/css/site.css @@ -683,6 +683,7 @@ h1 .imageLink { z-index: 99997; color: #fff; border: 0 !important; + max-height: 220px; } .footerNotification { @@ -699,6 +700,10 @@ h1 .imageLink { vertical-align: middle; } +#dashboardVersionWarning { + line-height: 50px; +} + /* * Gradient Shadow */ diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js index 782e6a381a..2e783dc3b5 100644 --- a/dashboard-ui/scripts/itemdetailpage.js +++ b/dashboard-ui/scripts/itemdetailpage.js @@ -1015,7 +1015,7 @@ } if (stream.Width || stream.Height) { - attributes.push('' + stream.Width + 'x' + stream.Height + ''); + attributes.push('' + stream.Width + 'x' + stream.Height + ''); } if (stream.AspectRatio && stream.Codec != "mjpeg") { diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js index a9003520ed..0ded57d1c7 100644 --- a/dashboard-ui/scripts/mediaplayer-video.js +++ b/dashboard-ui/scripts/mediaplayer-video.js @@ -18,8 +18,8 @@ var timeout; var video; var culturesPromise; - var idleState = true; var fullscreenExited = false; + var idleState = true; self.initVideoPlayer = function () { video = playVideo(item, startPosition, user); @@ -50,6 +50,8 @@ var nowPlayingBar = $("#nowPlayingBar", mediaPlayer); + footer.css("top", null); + mediaElement.html(""); // remove play/pause mediaPlayer.hide().append(nowPlayingBar); // put elements back where they belong @@ -61,6 +63,11 @@ footer.hide(); } + + $("html").css("cursor", "default"); + + $(".ui-loader").hide(); + }; self.exitFullScreen = function() { @@ -146,9 +153,13 @@ $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function () { var nowPlayingBar = $('#nowPlayingBar'); + + $('.itemVideo').off('mousemove keydown scroll', idleHandler); + if (self.isFullScreen()) { enterFullScreen(); idleState = true; + $('.itemVideo').on('mousemove keydown scroll', idleHandler).trigger('mousemove'); } else { nowPlayingBar.removeClass("highPosition"); exitFullScreenToWindow(); @@ -205,8 +216,36 @@ hideFlyout($('#qualityFlyout')); }); + + $("#footer").on("mousemove", "#videoPlayer.fullscreenVideo #itemVideo", function () { + + idleHandler(this); + + }); }); + function idleHandler() { + var video = $(".itemVideo"); + var nowPlayingBar = $("#nowPlayingBar"); + + if (timeout) { + window.clearTimeout(timeout); + } + + if (idleState == true) { + video.removeClass("cursor-inactive").addClass("cursor-active"); + nowPlayingBar.removeClass("inactive").addClass("active"); + } + + idleState = false; + + timeout = window.setTimeout(function () { + idleState = true; + video.removeClass("cursor-active").addClass("cursor-inactive"); + nowPlayingBar.removeClass("active").addClass("inactive"); + }, 4000); + } + function requestFullScreen(element) { // Supports most browsers and their versions. var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen; @@ -234,10 +273,9 @@ $("#videoBackdrop", footer).show(); - footer.css("height", "0"); + footer.css("top", "101%"); var videoPlayer = $("#videoPlayer", footer) - //.hide() .append(nowPlayingBar); // Stop playback on browser back button nav @@ -289,10 +327,6 @@ $("html").css("cursor", "default"); - //videoPlayer.fadeIn(); - - checkAspectRatio(); - }); $(".mediaFlyoutContainer").on("click", "a", function (e) { @@ -335,21 +369,6 @@ 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 () { diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js index 4d52d7dbda..747c59b108 100644 --- a/dashboard-ui/scripts/mediaplayer.js +++ b/dashboard-ui/scripts/mediaplayer.js @@ -79,6 +79,8 @@ ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position); + $("#mediaPlayer").hide(); + if (currentItem.MediaType == "Video") { ApiClient.stopActiveEncodings(); if (self.isFullScreen()) { @@ -357,6 +359,8 @@ $('#subtitleButton', nowPlayingBar).hide(); $('#chaptersButton', nowPlayingBar).hide(); + $("#mediaPlayer", nowPlayingBar).show(); + var mediaElement = $('#mediaElement', footer).html(html); var audioElement = $("audio", mediaElement); diff --git a/dashboard-ui/scripts/site.js b/dashboard-ui/scripts/site.js index 4a2dc2a1e4..85ccf596a8 100644 --- a/dashboard-ui/scripts/site.js +++ b/dashboard-ui/scripts/site.js @@ -292,7 +292,7 @@ var Dashboard = { options.id = options.id || "notification" + new Date().getTime() + parseInt(Math.random()); - var footer = $("#footer"); + var footer = $("#footer").css("top", "initial").show(); var parentElem = $('#footerNotifications', footer); @@ -312,22 +312,6 @@ var Dashboard = { elem.slideDown(400); } - var videoBackdrop = $("#videoBackdrop"); - - var isPlaying = false; - - if (videoBackdrop.is(":visible")) { - - videoBackdrop.css("bottom", "48px"); - - isPlaying = true; - - } else { - - footer.show(); - - } - elem.html(options.html).trigger("create"); if (options.timeout) { @@ -344,16 +328,15 @@ var Dashboard = { } footer.on("notification.remove notification.hide", function (e) { + setTimeout(function () { // give the DOM time to catch up - if (parentElem.html() == "") { - if (!isPlaying) { - footer.slideUp(); - } else { - footer.css({ height: "0" }); - videoBackdrop.animate({ bottom: "0" }, 400); - } + + if (!parentElem.html()) { + footer.slideUp(); } + }, 50); + }); },