Media player fixes

* Fix for hidden audio player
* Fullscreen hover fix

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;
 }
@@ -167,7 +175,7 @@
         height: 50px;
         background-color: #1d1d1d;
         position: absolute;
-        top: initial;
+        top: auto;
         right: 0;
         bottom: 0;
         left: 0;
@@ -598,4 +606,12 @@ ss}
         -webkit-transform: scale(1);
         opacity: 0;
     }
+}
+
+.cursor-active {
+    cursor: default;
+}
+
+.cursor-inactive {
+    cursor: none;
 }

dashboard-ui/css/site.css

@@ -683,7 +683,7 @@ h1 .imageLink {
     z-index: 99997;
     color: #fff;
     border: 0 !important;
-    max-height: 200px;
+    max-height: 220px;
 }
 
 .footerNotification {

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;

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