Video player fixes

Mobile playback fixed - video no longer hidden by default and unhidden
on playing
Footer notifications fixed

dashboard-ui/css/mediaplayer.css

@@ -254,8 +254,20 @@ input[type="range"]::-ms-fill-upper {
     display: none; /* display and visibility only */
 }
 
+@media all and (max-width: 1200px) {
+    .volumeSliderContainer, .sendMediaButton {
+        display: none!important;
+    }
+}
+
+@media all and (max-width: 960px) {
+    .volumeSliderContainer, .audioTracksButton, .chaptersButton, .sendMediaButton {
+        display: none!important;
+    }
+}
+
 @media all and (max-width: 800px) {
-    .volumeButton, .volumeSliderContainer, .muteButton, .unmuteButton, .nowPlayingMediaInfo {
+    .volumeButton, .volumeSliderContainer, .muteButton, .unmuteButton, .nowPlayingMediaInfo, .sendMediaButton {
         display: none!important;
     }
 }
@@ -264,10 +276,8 @@ input[type="range"]::-ms-fill-upper {
     .positionSliderContainer {
         width: 80px;
     }
-}
 
-@media all and (max-width: 600px) {
+    .chaptersButton, .audioTracksButton, .qualityButton, .subtitleButton {
-    .chaptersButton, .audioTracksButton, .sendMediaButton {
         display: none!important;
     }
 

dashboard-ui/css/site.css

@@ -692,7 +692,7 @@ h1 .imageLink {
 
 .footerNotification {
     text-shadow: none;
-    padding: .75em 1em;
+    padding: 0 1em .75em;
     margin: 0;
     font-weight: normal;
     border-top: 1px solid #555;

dashboard-ui/scripts/mediaplayer-video.js

@@ -41,13 +41,26 @@
         };
 
         self.resetEnhancements = function () {
+
             var footer = $("#footer");
-            var videoBackdrop = $("#videoBackdrop", footer);
+
-            var mediaElement = $("#mediaElement", videoBackdrop);
+            var mediaPlayer = $("#mediaPlayer", footer);
-            var nowPlayingBar = $("#nowPlayingBar", videoBackdrop);
+
+            var mediaElement = $("#mediaElement", mediaPlayer);
+
+            var nowPlayingBar = $("#nowPlayingBar", mediaPlayer);
+
             mediaElement.html(""); // remove play/pause
-            footer.hide().append(mediaElement).append(nowPlayingBar);
+
-            videoBackdrop.remove();
+            mediaPlayer.hide().append(nowPlayingBar); // put elements back where they belong
+
+            $("#videoBackdrop", footer).hide();
+
+            if ($("#footerNotifications", footer).html() == "") { // only hide footer if no notifications
+
+                footer.hide();
+
+            }
         };
 
         self.exitFullScreen = function () {
@@ -216,16 +229,14 @@
 
             var play = $("<div id='play' class='status'></div>");
             var pause = $("<div id='pause' class='status'></div>");
+
             mediaElement.append(play).append(pause);
 
-            var videoBackdrop = $("<div id='videoBackdrop'></div>");
+            $("#videoBackdrop", footer).show();
-            var videoPlayer = $("<div id='videoPlayer'></div>")
-                .append(mediaElement)
-                .append(nowPlayingBar);
 
-            videoPlayer.hide();
+            var videoPlayer = $("#videoPlayer", footer)
-            videoBackdrop.append(videoPlayer);
+                //.hide()
-            footer.append(videoBackdrop);
+                .append(nowPlayingBar);
 
             // Stop playback on browser back button nav
             $(window).on("popstate", function () {
@@ -270,13 +281,13 @@
                     $("html").css("cursor", "progress");
 
                 })
-                .on("playing", function (e) {
+                .on("canplay", function () {
 
                     $(".ui-loader").hide();
 
                     $("html").css("cursor", "default");
 
-                    videoPlayer.fadeIn();
+                    //videoPlayer.fadeIn();
 
                     checkAspectRatio();
 
@@ -319,8 +330,6 @@
                 }
             });
 
-            video.play();
-
             fullscreenExited = false;
         };
 
@@ -885,9 +894,9 @@
 
             // Can't autoplay in these browsers so we need to use the full controls
             if (requiresControls) {
-                html += '<video class="itemVideo" autoplay controls preload="none">';
+                html += '<video class="itemVideo" id="itemVideo" autoplay controls preload="none">';
             } else {
-                html += '<video class="itemVideo" autoplay preload="none">';
+                html += '<video class="itemVideo" id="itemVideo" autoplay preload="none">';
             }
 
             if (!isStatic) {

dashboard-ui/scripts/mediaplayer.js

@@ -231,8 +231,6 @@
 
             self.volumeSlider = $('.volumeSlider').on('slidestop', function () {
 
-                console.log("slidestop");
-
                 var vol = this.value;
 
                 self.updateVolumeButtons(vol);
@@ -658,6 +656,8 @@
 
             var mediaElement;
 
+            $("#mediaPlayer").show();
+
             if (item.MediaType === "Video") {
 
                 videoPlayer(self, item, startPosition, user);
@@ -741,10 +741,6 @@
                 nowPlayingText = (seriesName ? seriesName : "") + "\n" + (name || "---");
             }
 
-            console.log("name", name);
-            console.log("seriesName", seriesName);
-            console.log("nowPlayingText", nowPlayingText);
-
             // Fix for apostrophes and quotes
             var htmlTitle = trimTitle(nowPlayingText).replace(/'/g, ''').replace(/"/g, '"');
             html += "<div><a href='" + href + "'><img class='nowPlayingBarImage' alt='" + htmlTitle +
@@ -1125,22 +1121,24 @@
 
             elem.pause();
 
-            $(elem).off('ended.playnext').on('ended', function () {
+            $(elem).off("ended.playnext").on("ended", function () {
 
                 $(this).remove();
                 elem.src = "";
                 currentMediaElement = null;
 
-            }).trigger('ended');
+            }).trigger("ended");
 
-            var footer = $('#footer');
+            $("#mediaPlayer").hide();
-            footer.hide();
 
             if (currentItem.MediaType == "Video") {
                 if (self.isFullScreen()) {
                     self.exitFullScreen();
                 }
                 self.resetEnhancements();
+            } else {
+                var footer = $("#footer");
+                footer.hide();
             }
         };
 

dashboard-ui/scripts/site.js

@@ -292,7 +292,9 @@ var Dashboard = {
 
         options.id = options.id || "notification" + new Date().getTime() + parseInt(Math.random());
 
-        var parentElem = $('#footerNotifications');
+        var footer = $("#footer").show();
+
+        var parentElem = $('#footerNotifications', footer);
 
         var elem = $('#' + options.id, parentElem);
 
@@ -300,7 +302,7 @@ var Dashboard = {
             elem = $('<p id="' + options.id + '" class="footerNotification"></p>').appendTo(parentElem);
         }
 
-        var onclick = removeOnHide ? "$(\"#" + options.id + "\").remove();" : "$(\"#" + options.id + "\").hide();";
+        var onclick = removeOnHide ? "$(\"#" + options.id + "\").trigger(\"notification.remove\").remove();" : "$(\"#" + options.id + "\").trigger(\"notification.hide\").hide();";
 
         if (options.allowHide !== false) {
             options.html += "<span style='margin-left: 1em;'><button type='button' onclick='" + onclick + "' data-icon='delete' data-iconpos='notext' data-mini='true' data-inline='true' data-theme='b'>Hide</button></span>";
@@ -310,20 +312,29 @@ var Dashboard = {
             elem.show();
         }
 
-        elem.html(options.html).trigger('create');
+        elem.html(options.html).trigger("create");
 
         if (options.timeout) {
 
             setTimeout(function () {
 
                 if (removeOnHide) {
-                    elem.remove();
+                    elem.trigger("notification.remove").remove();
                 } else {
-                    elem.hide();
+                    elem.trigger("notification.hide").hide();
                 }
 
             }, options.timeout);
         }
+
+        footer.on("notification.remove notification.hide", function (e) {
+            setTimeout(function () { // give the DOM time to catch up
+                console.log("html", parentElem.html() == "", this);
+                if (parentElem.html() == "") {
+                    footer.slideUp();
+                }
+            }, 50);
+        });
     },
 
     getConfigurationPageUrl: function (name) {
@@ -1306,10 +1317,20 @@ $(ApiClient).on("websocketmessage", Dashboard.onWebSocketMessageReceived);
 $(function () {
     var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b" style="display: none;">';
 
+    footerHtml += '<div id="mediaPlayer" style="display: none;">';
+
+    footerHtml += '<div id="videoBackdrop" style="display: none;">';
+
+    footerHtml += '<div id="videoPlayer">';
     footerHtml += '<div id="mediaElement"></div>';
+    footerHtml += '</div>';
+
+    footerHtml += '</div>';
 
     footerHtml += '<div id="nowPlayingBar" class="nowPlayingBar">';
+
     footerHtml += '<div class="barBackground ui-bar-b">';
+
     footerHtml += '<div style="display:inline-block;width:12px;"></div>';
     footerHtml += '<a id="playlistButton" class="mediaButton playlistButton" href="playlist.html" data-role="button" data-icon="bullets" data-iconpos="notext" data-inline="true" title="Playlist">Playlist</a>';
     footerHtml += '<button id="previousTrackButton" class="mediaButton previousTrackButton" title="Previous Track" type="button" onclick="MediaPlayer.previousTrack();" data-icon="previous-track" data-iconpos="notext" data-inline="true">Previous Track</button>';
@@ -1351,10 +1372,12 @@ $(function () {
 
     footerHtml += '</div>';
 
-    footerHtml += '<div id="footerNotifications"></div>';
+    footerHtml += '</div>';
 
     footerHtml += '</div>';
 
+    footerHtml += '<div id="footerNotifications"></div>';
+
     footerHtml += '</div>';
 
     $(document.body).append(footerHtml);