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);
+
});
},