Merge branch 'master' of https://github.com/MediaBrowser/MediaBrowser

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;
 }

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
  */

dashboard-ui/scripts/itemdetailpage.js

@@ -1015,7 +1015,7 @@
             }
 
             if (stream.Width || stream.Height) {
-                attributes.push('<span class="mediaInfoAttribute">' + stream.Width + 'x' + stream.Height + '</span>');
+                attributes.push('<span class="mediaInfoAttribute" id="mediaWidthHeight" data-width="' + stream.Width + '" data-height="' + stream.Height + '">' + stream.Width + 'x' + stream.Height + '</span>');
             }
 
             if (stream.AspectRatio && stream.Codec != "mjpeg") {

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 () {

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);
 

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) {
+                if (!parentElem.html()) {
-                        footer.slideUp();
+                    footer.slideUp();
-                    } else {
-                        footer.css({ height: "0" });
-                        videoBackdrop.animate({ bottom: "0" }, 400);
-                    }
                 }
+
             }, 50);
+
         });
     },