updated browse to command

dashboard-ui/css/site.css

@@ -702,7 +702,7 @@ progress {
 }
 
 
-    #nowPlayingBar > *:not(#mediaElement) {
+    #nowPlayingBar > *:not(#mediaElement):not(.mediaFlyoutContainer) {
         margin: 0 1em;
     }
 
@@ -872,6 +872,21 @@ input[type="range"]::-ms-fill-upper {
     }
 }
 
+.mediaFlyoutContainer {
+    display: inline-block;
+}
+
+.mediaPlayerFlyout {
+    width: 200px;
+    color: #000;
+    background-color: #fff;
+    border: 1px solid #999;
+    position: absolute;
+    z-index: 99999;
+    bottom: 55px;
+    margin-left: -50px;
+}
+
 .installedPluginTitle {
     max-width: 85px;
     overflow: hidden;

dashboard-ui/scripts/mediaplayer.js

@@ -315,6 +315,11 @@
                 $('#playlistButton', nowPlayingBar).show();
             }
 
+            $('#qualityButton', nowPlayingBar).hide();
+            $('#audioTracksButton', nowPlayingBar).hide();
+            $('#subtitleButton', nowPlayingBar).hide();
+            $('#chaptersButton', nowPlayingBar).hide();
+
             $('#mediaElement', nowPlayingBar).html(html);
             var audioElement = $("audio", nowPlayingBar);
 
@@ -464,6 +469,23 @@
             $('#nextTrackButton', nowPlayingBar).hide();
             $('#mediaElement', nowPlayingBar).html(html);
 
+            $('#qualityButton', nowPlayingBar).show();
+            $('#audioTracksButton', nowPlayingBar).show();
+
+            if (item.MediaStreams.filter(function (i) {
+                return i.Type == "Subtitle";
+            }).length) {
+                $('#subtitleButton', nowPlayingBar).show();
+            } else {
+                $('#subtitleButton', nowPlayingBar).hide();
+            }
+
+            if (item.Chapters.length) {
+                $('#chaptersButton', nowPlayingBar).show();
+            } else {
+                $('#chaptersButton', nowPlayingBar).hide();
+            }
+
             if ($.browser.msie) {
                 $('#fullscreenButton', nowPlayingBar).hide();
             } else {
@@ -885,6 +907,69 @@
         self.isPlaying = function () {
             return currentMediaElement;
         };
+
+        function showFlyout(flyout, button) {
+
+            $(document.body).off("mousedown.mediaflyout").on("mousedown.mediaflyout", function (e) {
+
+                var elem = $(e.target);
+
+                var flyoutId = flyout[0].id;
+                var safeItems = button + ',#' + flyoutId;
+
+                if (!elem.is(safeItems) && !elem.parents(safeItems).length) {
+                    flyout.hide();
+                    $(document.body).off("mousedown.hidesearchhints");
+                }
+
+            });
+
+            flyout.show();
+        }
+
+        self.showAudioTracksFlyout = function () {
+
+            var flyout = $('#audioTracksFlyout');
+
+            if (!flyout.is(':visible')) {
+
+                showFlyout(flyout, '#audioTracksButton');
+
+            }
+        };
+
+        self.showChaptersFlyout = function () {
+
+            var flyout = $('#chaptersFlyout');
+
+            if (!flyout.is(':visible')) {
+
+                showFlyout(flyout, '#chaptersButton');
+
+            }
+        };
+
+        self.showQualityFlyout = function () {
+
+            var flyout = $('#qualityFlyout');
+
+            if (!flyout.is(':visible')) {
+
+                showFlyout(flyout, '#qualityButton');
+
+            }
+        };
+
+        self.showSubtitleMenu = function () {
+
+            var flyout = $('#subtitleFlyout');
+
+            if (!flyout.is(':visible')) {
+
+                showFlyout(flyout, '#subtitleButton');
+
+            }
+        };
     }
 
     window.MediaPlayer = new mediaPlayer();

dashboard-ui/scripts/site.js

@@ -898,19 +898,19 @@ var Dashboard = {
 
         var url;
 
-        var type = cmd.ItemType.toLowerCase();
+        var type = (cmd.ItemType || "").toLowerCase();
 
         if (type == "genre") {
-            url = "itembynamedetails.html?genre=" + ApiClient.encodeName(cmd.ItemIdentifier) + "&context=" + context;
+            url = "itembynamedetails.html?genre=" + ApiClient.encodeName(cmd.ItemName) + "&context=" + context;
         }
         else if (type == "studio") {
-            url = "itembynamedetails.html?studio=" + ApiClient.encodeName(cmd.ItemIdentifier) + "&context=" + context;
+            url = "itembynamedetails.html?studio=" + ApiClient.encodeName(cmd.ItemName) + "&context=" + context;
         }
         else if (type == "person") {
-            url = "itembynamedetails.html?person=" + ApiClient.encodeName(cmd.ItemIdentifier) + "&context=" + context;
+            url = "itembynamedetails.html?person=" + ApiClient.encodeName(cmd.ItemName) + "&context=" + context;
         }
         else if (type == "artist") {
-            url = "itembynamedetails.html?artist=" + ApiClient.encodeName(cmd.ItemIdentifier) + "&context=" + (context || "music");
+            url = "itembynamedetails.html?artist=" + ApiClient.encodeName(cmd.ItemName) + "&context=" + (context || "music");
         }
 
         if (url) {
@@ -918,7 +918,7 @@ var Dashboard = {
             return;
         }
 
-        ApiClient.getItem(Dashboard.getCurrentUserId(), cmd.ItemIdentifier).done(function (item) {
+        ApiClient.getItem(Dashboard.getCurrentUserId(), cmd.ItemId).done(function (item) {
 
             Dashboard.navigate(LibraryBrowser.getHref(item, context));
 
@@ -1114,12 +1114,24 @@ $(function () {
     footerHtml += '<div class="currentTime"></div>';
     footerHtml += '<div id="mediaElement"></div>';
     footerHtml += '<div class="nowPlayingMediaInfo"></div>';
-    
+
     footerHtml += '<button id="muteButton" onclick="MediaPlayer.mute();" class="imageButton mediaButton volumeButton" title="Volume" type="button"><img src="css/images/media/volume.png" /></button>';
     footerHtml += '<button id="unmuteButton" onclick="MediaPlayer.unmute();" class="imageButton mediaButton volumeButton" title="Volume" type="button"><img src="css/images/media/mute.png" /></button>';
     footerHtml += '<input type="range" class="mediaSlider volumeSlider" step=".05" min="0" max="1" value="0" />';
     footerHtml += '<button onclick="MediaPlayer.toggleFullscreen();" id="fullscreenButton" class="imageButton mediaButton fullscreenButton" title="Fullscreen" type="button"><img src="css/images/media/fullscreen.png" /></button>';
 
+    footerHtml += '<button onclick="MediaPlayer.showQualityFlyout();" id="qualityButton" class="imageButton mediaButton qualityButton" title="Quality" type="button"><img src="css/images/media/quality.png" /></button>';
+    footerHtml += '<div class="mediaFlyoutContainer"><div id="qualityFlyout" style="display:none;" class="mediaPlayerFlyout">Coming soon</div></div>';
+
+    footerHtml += '<button onclick="MediaPlayer.showAudioTracksFlyout();" id="audioTracksButton" class="imageButton mediaButton audioTracksButton" title="Audio tracks" type="button"><img src="css/images/media/audiotrack.png" /></button>';
+    footerHtml += '<div class="mediaFlyoutContainer"><div id="audioTracksFlyout" style="display:none;" class="mediaPlayerFlyout">Coming soon</div></div>';
+
+    footerHtml += '<button onclick="MediaPlayer.showSubtitleMenu();" id="subtitleButton" class="imageButton mediaButton subtitleButton" title="Subtitles" type="button"><img src="css/images/media/subtitles.png" /></button>';
+    footerHtml += '<div class="mediaFlyoutContainer"><div id="subtitleFlyout" style="display:none;" class="mediaPlayerFlyout">Coming soon</div></div>';
+
+    footerHtml += '<button onclick="MediaPlayer.showChaptersFlyout();" id="chaptersButton" class="imageButton mediaButton chaptersButton" title="Scenes" type="button"><img src="css/images/media/chapters.png" /></button>';
+    footerHtml += '<div class="mediaFlyoutContainer"><div id="chaptersFlyout" style="display:none;" class="mediaPlayerFlyout">Coming soon</div></div>';
+
     footerHtml += '</div>';
 
     footerHtml += '<div id="footerNotifications"></div>';