Major video player overhaul

Updates, enhancements and some bug fixes too.

dashboard-ui/css/mediaplayer.css

@@ -1,27 +1,33 @@
 /* Now playing bar */
 .nowPlayingBar {
-    padding: 6px 0 24px 0;
+    position: absolute;
-    border-top: 2px solid green;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
 }
 
-    .nowPlayingBar .highPosition {
-        z-index: 99999;
-        position: relative;
-        opacity: 0.5;
-    }
-
-        .nowPlayingBar .highPosition:hover:not(.barBackground ) {
-            opacity: 0.9;
-        }
-
     .nowPlayingBar .barBackground {
         border-top: 2px solid green;
         position: absolute;
-        margin: -8px -0.5em -26px !important;
         width: 100%;
         height: 100%;
     }
 
+    #videoPlayer.fullscreenVideo .nowPlayingBar {
+        opacity: 0.5;
+        -webkit-transition: top 0.6s ease-in-out;
+        -moz-transition: top 0.6s ease-in-out;
+        -o-transition: top 0.6s ease-in-out;
+        transition: top 0.6s ease-in-out;
+        top: 100%;
+        height: 100%;
+    }
+
+    #videoPlayer.fullscreenVideo:hover .nowPlayingBar {
+        top: 95% !important;
+    }
+
     .nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer):not(.barBackground ) {
         position: relative;
     }
@@ -39,6 +45,15 @@
     position: relative;
 }
 
+.fullscreenVideo #mediaElement {
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+
 .nowPlayingMediaInfo div {
     display: inline-block;
 }
@@ -49,15 +64,17 @@
 
 
 .nowPlayingMediaInfo {
+    position: relative;
     display: inline-block;
+    margin-top: 3px;
+    vertical-align: top;
 }
 
 .nowPlayingText {
     position: relative;
-    top: -3px;
+    margin: 0 2em 0 5px;
-    margin-left: 3px;
-    margin-right: 2em;
     font-weight: normal;
+    top: -7px;
 }
 
 @media all and (max-width: 650px) {
@@ -75,7 +92,6 @@
     background: #000;
     border: 1px solid #444;
     width: 320px;
-    cursor: pointer;
     margin: 20px;
     position: fixed;
     top: 50%;
@@ -112,7 +128,6 @@
     z-index: 99997;
     background: #1d1d1d;
     position: fixed;
-    overflow: hidden;
     border: 1px solid green;
     top: 50%;
     left: 50%;
@@ -130,15 +145,12 @@
     width: 100% !important;
     height: 100% !important;
     border: 0 !important;
-    z-index: 999999 !important;
     margin: 0 !important;
 }
 
-    #videoPlayer #mediaElement {
+.fullscreenVideo .itemVideo {
-        position: absolute;
+    z-index: 99996;
-        top: 0;
+}
-        left: 0;
-    }
     
     #videoPlayer .itemVideo {
         position: static;
@@ -147,19 +159,23 @@
     }
 
     #videoPlayer .nowPlayingBar {
+        z-index: 99999;
         padding: 0;
-        border: none !important;
+        height: 50px;
-        height: 40px;
-        overflow: hidden;
         background-color: #1d1d1d;
         position: absolute;
+        top: initial;
         right: 0;
-        bottom: 10px;
+        bottom: 0;
         left: 0;
     }
 
     #videoPlayer .nowPlayingBar .barBackground {
-        display: none;
+        border-width: 0;
+    }
+
+    #videoPlayer.fullscreenVideo .nowPlayingBar .barBackground {
+        border-width: 2px;
     }
 
 .currentTime {
@@ -181,6 +197,7 @@
 
 .sliderContainer {
     display: inline-block;
+    margin-top: 10px;
 }
 
 .positionSliderContainer {
@@ -240,21 +257,24 @@ input[type="range"]::-ms-fill-upper {
     }
 }
 
+@media all and (max-width: 640px) {
+    .positionSliderContainer {
+        width: 80px;
+    }
+}
+
 @media all and (max-width: 600px) {
     .chaptersButton, .audioTracksButton, .sendMediaButton {
         display: none!important;
     }
 
-    .positionSliderContainer, .currentTime {
+    .positionSliderContainer {
         top: 0!important;
         position: relative!important;
     }
 }
 
 @media all and (max-width: 500px) {
-    .positionSliderContainer {
-        width: 80px;
-    }
 
     .previousTrackButton, .nextTrackButton {
         display: none!important;
@@ -278,13 +298,31 @@ input[type="range"]::-ms-fill-upper {
     border: 1px solid #999;
     position: absolute;
     z-index: 99999;
-    bottom: 78px;
+    bottom: 64px;
     margin-left: -50px;
     max-height: 300px;
     overflow-y: auto;
     font-size: 13px;
 }
 
+.fullscreenVideo .mediaPlayerFlyout {
+    -webkit-transition: top 0.6s ease-in-out;
+    -moz-transition: top 0.6s ease-in-out;
+    -o-transition: top 0.6s ease-in-out;
+    transition: top 0.6s ease-in-out;
+    top: 100%;
+    bottom: 100%;
+}
+
+#videoPlayer.fullscreenVideo:hover .mediaPlayerFlyout {
+    -webkit-transition: top 0.6s ease-out;
+    -moz-transition: top 0.6s ease-out;
+    -o-transition: top 0.6s ease-out;
+    transition: top 0.6s ease-out;
+    top: -303px !important;
+    bottom: -3px !important;
+ss}
+
 .chaptersFlyout {
     width: 250px;
 }
@@ -420,4 +458,81 @@ input[type="range"]::-ms-fill-upper {
     .positionSliderContainer {
         width: 300px;
     }
+}
+
+.status {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -75px;
+    margin-left: -75px;
+    width: 150px;
+    height: 150px;
+    z-index: 99999;
+}
+
+#play {
+    background-image: url(images/media/play.png);
+    opacity: 0;
+    display: none;
+}
+
+#pause {
+    background-image: url(images/media/pause.png);
+    opacity: 0;
+    display: none;
+}
+
+.fadeOut {
+    animation-name: fadeOut;
+    -webkit-animation-name: fadeOut;
+    animation-duration: .25s;
+    -webkit-animation-duration: .25s;
+    animation-timing-function: ease-in-out;
+    -webkit-animation-timing-function: ease-in-out;
+    visibility: visible !important;
+}
+
+@keyframes fadeOut {
+    0% {
+        transform: scale(.25);
+        opacity: 0.7;
+    }
+
+    60% {
+        transform: scale(.5);
+        opacity: 0.5;
+    }
+
+    80% {
+        transform: scale(.75);
+        opacity: 0.3;
+    }
+
+    100% {
+        transform: scale(1);
+        opacity: 0;
+    }
+}
+
+@-webkit-keyframes fadeOut {
+    0% {
+        -webkit-transform: scale(.25);
+        opacity: 0.7;
+    }
+
+    60% {
+        -webkit-transform: scale(.5);
+        opacity: 0.5;
+    }
+
+    80% {
+        -webkit-transform: scale(.75);
+        opacity: 0.3;
+    }
+
+    100% {
+        -webkit-transform: scale(1);
+        opacity: 0;
+    }
 }

dashboard-ui/css/site.css

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

dashboard-ui/scripts/site.js

@@ -1304,18 +1304,18 @@ $(ApiClient).on("websocketmessage", Dashboard.onWebSocketMessageReceived);
 
 
 $(function () {
+    var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b" style="display: none;">';
 
-    var footerHtml = '<div id="footer" data-theme="b" class="ui-bar-b">';
+    footerHtml += '<div id="mediaElement"></div>';
-    footerHtml += '<div id="nowPlayingBar" class="nowPlayingBar" style="display:none;">';
+
-    footerHtml += '<div class="barBackground ui-bar-b"></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>';
     footerHtml += '<button id="playButton" class="mediaButton" title="Play" type="button" onclick="MediaPlayer.unpause();" data-icon="play" data-iconpos="notext" data-inline="true">Play</button>';
     footerHtml += '<button id="pauseButton" class="mediaButton" title="Pause" type="button" onclick="MediaPlayer.pause();" data-icon="pause" data-iconpos="notext" data-inline="true">Pause</button>';
 
-    footerHtml += '<div id="mediaElement"></div>';
-
     footerHtml += '<button id="stopButton" class="mediaButton" title="Stop" type="button" onclick="MediaPlayer.stop();" data-icon="stop" data-iconpos="notext" data-inline="true">Stop</button>';
     footerHtml += '<button id="nextTrackButton" class="mediaButton nextTrackButton" title="Next Track" type="button" onclick="MediaPlayer.nextTrack();" data-icon="next-track" data-iconpos="notext" data-inline="true">Next Track</button>';
 
@@ -1333,6 +1333,8 @@ $(function () {
     footerHtml += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="1" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
     footerHtml += '</div>';
 
+    footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="action" data-iconpos="notext" data-inline="true">Fullscreen</button>';
+
     footerHtml += '<button onclick="MediaPlayer.showQualityFlyout();" id="qualityButton" class="mediaButton qualityButton" title="Quality" type="button" data-icon="gear" data-iconpos="notext" data-inline="true">Quality</button>';
     footerHtml += '<div class="mediaFlyoutContainer"><div id="qualityFlyout" style="display:none;" class="mediaPlayerFlyout"></div></div>';
 
@@ -1345,13 +1347,14 @@ $(function () {
     footerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="chaptersButton" class="mediaButton chaptersButton" title="Scenes" type="button" data-icon="video" data-iconpos="notext" data-inline="true">Scenes</button>';
     footerHtml += '<div class="mediaFlyoutContainer"><div id="chaptersFlyout" style="display:none;" class="mediaPlayerFlyout chaptersFlyout"></div></div>';
 
-    footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="mediaButton fullscreenButton" title="Fullscreen" type="button" data-icon="action" data-iconpos="notext" data-inline="true">Fullscreen</button>';
-
     footerHtml += '<button onclick="MediaPlayer.showSendMediaMenu();" id="sendMediaButton" class="mediaButton sendMediaButton" title="Remote" type="button" data-icon="wireless" data-iconpos="notext" data-inline="true">Remote</button>';
 
     footerHtml += '</div>';
 
     footerHtml += '<div id="footerNotifications"></div>';
+
+    footerHtml += '</div>';
+
     footerHtml += '</div>';
 
     $(document.body).append(footerHtml);
@@ -1359,7 +1362,7 @@ $(function () {
     var footerElem = $('#footer', document.body);
     footerElem.trigger('create');
 
-    $(window).on("beforeunload", function () {
+    $(window).on("beforeunload popstate", function () {
 
         // Close the connection gracefully when possible
         if (ApiClient.isWebSocketOpen() && !MediaPlayer.isPlaying()) {