Video player "menu" button added

Toggles display of all appropriate video controls for video player sizes
< 100%

dashboard-ui/css/mediaplayer-video.css

@@ -91,6 +91,10 @@
     display: block;
 }
 
+#mediaPlayer #videoControls #video-subtitleButton:disabled, #mediaPlayer #videoControls #video-muteButton:disabled, #mediaPlayer #videoControls #video-unmuteButton:disabled {
+    display: none!important
+}
+
 /* Media queries
     ***************************************/
 
@@ -140,6 +144,10 @@
         margin-left: -550px;
         margin-top: -329px;
     }
+
+    #video-videoPlayerMenuButton {
+        display: none;
+    }
 }
 
 @media all and (min-width: 1440px) and (min-height: 720px) {
@@ -157,31 +165,88 @@
 /****************************************/
 
 @media all and (max-width: 1200px), all and (max-height: 720px) {
-    #mediaPlayer .volumeSliderContainer, #mediaPlayer .sendMediaButton {
+    #mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton, #mediaPlayer .sendMediaButton {
+        display: none!important;
+    }
+
+    #mediaPlayer.showVideoMenu .muteButton, #mediaPlayer.showVideoMenu .unmuteButton, #mediaPlayer.showVideoMenu .qualityButton,  #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .subtitleButton {
+        display: initial!important;
+    }
+
+    #mediaPlayer.showVideoMenu .nowPlayingMediaInfo {
         display: none!important;
     }
 }
 
 @media all and (max-width: 960px), all and (max-height: 550px) {
-    #mediaPlayer .volumeSliderContainer, #mediaPlayer .audioTracksButton, #mediaPlayer .chaptersButton, #mediaPlayer .sendMediaButton {
+    #mediaPlayer .nowPlayingBarImage, #mediaPlayer .qualityButton,  #mediaPlayer .audioTracksButton, #mediaPlayer .chaptersButton, #mediaPlayer .sendMediaButton {
+        display: none!important;
+    }
+
+    #mediaPlayer.showVideoMenu .muteButton, #mediaPlayer.showVideoMenu .unmuteButton, #mediaPlayer.showVideoMenu .qualityButton,  #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .subtitleButton {
+        display: initial!important;
+    }
+
+    #mediaPlayer.showVideoMenu .nowPlayingMediaInfo {
         display: none!important;
     }
 }
 
 @media all and (max-width: 800px), all and (max-height: 460px) {
-    #mediaPlayer .volumeButton, #mediaPlayer .volumeSliderContainer, #mediaPlayer .muteButton, #mediaPlayer .unmuteButton, #mediaPlayer .nowPlayingMediaInfo, #mediaPlayer .sendMediaButton {
+    #mediaPlayer .muteButton, #mediaPlayer .unmuteButton, #mediaPlayer .nowPlayingMediaInfo, #mediaPlayer .sendMediaButton {
         display: none!important;
     }
+
+    #mediaPlayer .volumeButton, #mediaPlayer .volumeSliderContainer {
+        display: inline-block!important;
+    }
+
+    #mediaPlayer.showVideoMenu #videoPlayer {
+        margin-top: -180px;
+    }
+
+    #mediaPlayer.showVideoMenu .itemVideo {
+        margin-bottom: 120px;
+    }
+
+    #mediaPlayer.showVideoMenu #videoControls {
+        height: 120px;
+    }
+
+    #mediaPlayer.showVideoMenu .muteButton, #mediaPlayer.showVideoMenu .unmuteButton, #mediaPlayer.showVideoMenu .qualityButton,  #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .subtitleButton {
+        display: initial!important;
+    }
 }
 
 @media all and (max-width: 640px), all and (max-height: 365px) {
-    #mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton, #mediaPlayer .qualityButton, #mediaPlayer .subtitleButton {
+    #mediaPlayer .fullscreenButton, #mediaPlayer .chaptersButton, #mediaPlayer .audioTracksButton, #mediaPlayer .qualityButton, #mediaPlayer .subtitleButton {
         display: none!important;
     }
 
     #mediaPlayer .currentTime {
         margin-top: 15px;
     }
+    
+    #mediaPlayer .volumeSliderContainer {
+        vertical-align: middle;
+        margin-top: -5px;
+    }
+
+    #mediaPlayer.showVideoMenu #videoPlayer {
+        margin-top: -135px;
+    }
+
+    #mediaPlayer.showVideoMenu .itemVideo {
+        margin-bottom: 120px;
+    }
+
+    #mediaPlayer.showVideoMenu #videoControls {
+        height: 120px;
+    }
+
+    #mediaPlayer.showVideoMenu .fullscreenButton, #mediaPlayer.showVideoMenu .chaptersButton, #mediaPlayer.showVideoMenu .audioTracksButton, #mediaPlayer.showVideoMenu .qualityButton, #mediaPlayer.showVideoMenu .subtitleButton {
+        display: initial!important;
+    }
 }
 
 @media all and (max-width: 500px) {

dashboard-ui/css/mediaplayer.css

@@ -50,12 +50,6 @@
     font-weight: normal;
 }
 
-@media all and (max-width: 650px) {
-    .nowPlayingMediaInfo {
-        display: none;
-    }
-}
-
 .mediaButton img {
     height: 24px;
 }
@@ -134,6 +128,12 @@ input[type="range"]::-ms-fill-upper {
     }
 }
 
+@media all and (max-width: 650px) {
+    .nowPlayingMediaInfo {
+        display: none;
+    }
+}
+
 @media all and (max-width: 600px) {
     .chaptersButton, .audioTracksButton, .sendMediaButton {
         display: none!important;

dashboard-ui/scripts/mediaplayer-video.js

@@ -22,6 +22,7 @@
         var fullscreenExited = false;
         var idleState = true;
         var remoteFullscreen = false;
+        var videoMenuVisible = false;
 
         self.initVideoPlayer = function () {
             video = playVideo(item, mediaSource, startPosition, user);
@@ -139,6 +140,21 @@
             }
         };
 
+        self.toggleVideoPlayerMenu = function () {
+            
+            var mediaPlayer = $("#mediaPlayer");
+
+            if (videoMenuVisible) {
+                $(mediaPlayer).removeClass("showVideoMenu");
+            } else {
+                $(mediaPlayer).addClass("showVideoMenu");
+            }
+
+            videoMenuVisible = !videoMenuVisible;
+
+            console.log("show vid click");
+        };
+
         $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function (e) {
 
             var videoControls = $('#videoControls');
@@ -831,9 +847,9 @@
             if (mediaStreams.filter(function (i) {
                 return i.Type == "Subtitle";
             }).length) {
-                $('#video-subtitleButton', videoControls).show();
+                $('#video-subtitleButton', videoControls).show().prop("disabled", false);
             } else {
-                $('#video-subtitleButton', videoControls).hide();
+                $('#video-subtitleButton', videoControls).hide().prop("disabled", true);;
             }
 
             if (item.Chapters && item.Chapters.length) {

dashboard-ui/scripts/mediaplayer.js

@@ -30,11 +30,11 @@
         self.updateVolumeButtons = function (vol) {
 
             if (vol) {
-                self.muteButton.show();
+                self.muteButton.show().prop("disabled", false);
-                self.unmuteButton.hide();
+                self.unmuteButton.hide().prop("disabled", true);
             } else {
-                self.muteButton.hide();
+                self.muteButton.hide().prop("disabled", true);
-                self.unmuteButton.show();
+                self.unmuteButton.show().prop("disabled", false);
             }
         };
 

dashboard-ui/scripts/site.js

@@ -1367,6 +1367,8 @@ $(function () {
 
     videoPlayerHtml += '<button onclick="MediaPlayer.showSendMediaMenu();" id="video-sendMediaButton" class="mediaButton sendMediaButton" title="Remote" type="button" data-icon="wireless" data-iconpos="notext" data-inline="true">Remote</button>';
 
+    videoPlayerHtml += '<button onclick="MediaPlayer.toggleVideoPlayerMenu();" id="video-videoPlayerMenuButton" class="mediaButton videoPlayerMenuButton" title="Menu" type="button" data-icon="bars" data-iconpos="notext" data-inline="true">Menu</button>';
+
     videoPlayerHtml += '</div>'; // videoControls
 
     videoPlayerHtml += '</div>'; // videoPlayer