added play buttons to song table

dashboard-ui/css/detailtable.css

@@ -1,6 +1,6 @@
 .detailTableContainer {
     width: 100%;
-    max-width: 1200px;
+    max-width: 1100px;
     text-align: center;
     margin: 0 auto;
 }

dashboard-ui/scripts/Itemdetailpage.js

@@ -472,7 +472,7 @@
 
             var item = items[i];
 
-            html += '<a class="posterItem backdropPosterItem" href="#" onclick="ItemDetailPage.playById(\'' + item.Id + '\');">';
+            html += '<a class="posterItem backdropPosterItem" href="#" onclick="MediaPlayer.playById(\'' + item.Id + '\');">';
 
             var imageTags = item.ImageTags || {};
 
@@ -618,12 +618,6 @@
         var self = this;
 
         self.play = play;
-
-        self.playById = function (id) {
-            ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
-                MediaPlayer.play([item]);
-            });
-        };
     }
 
     window.ItemDetailPage = new itemDetailPage();

dashboard-ui/scripts/librarybrowser.js

@@ -1,4 +1,4 @@
-var LibraryBrowser = (function (window, $) {
+var LibraryBrowser = (function (window, document, $) {
 
     var defaultBackground = "#999;";
 
@@ -213,6 +213,7 @@
 
             html += '<tr>';
 
+            html += '<th></th>';
             html += '<th></th>';
 
             html += '<th>Track</th>';
@@ -236,6 +237,8 @@
 
                 html += '<tr>';
 
+                html += '<td><button data-icon="play" data-mini="true" data-iconpos="notext" onclick="LibraryBrowser.showPlayMenu(this, \'' + item.Id + '\', \'Audio\');">Options</button></td>';
+
                 var num = item.IndexNumber;
 
                 if (num && item.ParentIndexNumber) {
@@ -281,6 +284,50 @@
             return html;
         },
 
+        showPlayMenu: function (positionTo, itemId, mediaType, resumePositionTicks) {
+
+            var isPlaying = MediaPlayer.isPlaying();
+
+            if (!isPlaying && !resumePositionTicks) {
+                MediaPlayer.playById(itemId);
+                return;
+            }
+
+            $('.playFlyout').popup("close").remove();
+
+            var html = '<div data-role="popup" class="playFlyout" style="max-width:300px;" data-corners="false" data-theme="c" data-history="false">';
+
+            html += '<ul data-role="listview" style="min-width: 150px;" data-theme="c">';
+            html += '<li data-role="list-divider" data-theme="a">Play Menu</li>';
+
+            html += '<li><a href="#" onclick="MediaPlayer.playById(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play</a></li>';
+
+            if (resumePositionTicks) {
+                html += '<li><a href="#" onclick="MediaPlayer.playById(\'' + itemId + '\', resumePositionTicks);LibraryBrowser.closePlayMenu();">Play</a></li>';
+            }
+
+            if (isPlaying && MediaPlayer.canQueue(mediaType)) {
+                html += '<li><a href="#" onclick="MediaPlayer.playNext(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play Next</a></li>';
+                html += '<li><a href="#" onclick="MediaPlayer.playLast(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play Last</a></li>';
+            }
+
+            html += '</ul>';
+
+            html += '</div>';
+
+            $($.mobile.activePage).append(html);
+
+            $('.playFlyout').popup({ positionTo: positionTo || "window" }).trigger('create').popup("open").on("popupafterclose", function () {
+
+                $(this).off("popupafterclose").remove();
+
+            }).parents(".ui-popup-container").css("margin-left", 100);
+        },
+
+        closePlayMenu: function () {
+            $('.playFlyout').popup("close").remove();
+        },
+
         getHref: function (item, itemByNameContext) {
 
             if (item.url) {
@@ -1472,4 +1519,4 @@
 
     };
 
-})(window, jQuery);
+})(window, document, jQuery);

dashboard-ui/scripts/mediaplayer.js

@@ -1,4 +1,4 @@
-(function (document, clearTimeout, screen, localStorage, _V_, $, setInterval) {
+(function (document, clearTimeout, screen, localStorage, _V_, $, setInterval, window) {
 
     function mediaPlayer() {
         var self = this;
@@ -8,8 +8,7 @@
         var currentMediaElement;
         var currentProgressInterval;
 
-        function playAudio(items, params) {
+        function playAudio(item, params) {
-            var item = items[0];
 
             var volume = localStorage.getItem("volume") || 0.5;
 
@@ -84,12 +83,11 @@
             }, 30000);
         }
 
-        function playVideo(items, startPosition) {
+        function playVideo(item, startPosition) {
+
             //stop/kill videoJS
             if (currentMediaElement) self.stop();
 
-            var item = items[0];
-
             // Account for screen rotation. Use the larger dimension as the width.
             var screenWidth = Math.max(screen.height, screen.width);
             var screenHeight = Math.min(screen.height, screen.width);
@@ -282,10 +280,10 @@
 
             if (item.MediaType === "Video") {
 
-                mediaElement = playVideo(items, startPosition);
+                mediaElement = playVideo(item, startPosition);
             } else if (item.MediaType === "Audio") {
 
-                mediaElement = playAudio(items);
+                mediaElement = playAudio(item);
             }
 
             if (!mediaElement) {
@@ -357,6 +355,28 @@
             $('#mediaInfo', nowPlayingBar).html(html);
         };
 
+        self.playById = function (id, startPositionTicks) {
+
+            ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {
+
+                self.play([item], startPositionTicks);
+
+            });
+
+        };
+
+        self.canQueue = function (mediaType) {
+            return mediaType == "Audio";
+        };
+
+        self.playLast = function(itemId) {
+
+        };
+
+        self.playNext = function (itemId) {
+
+        };
+
         self.stop = function () {
 
             var elem = currentMediaElement;
@@ -411,7 +431,7 @@
             if (currentProgressInterval) {
                 clearTimeout(currentProgressInterval);
             }
-        }
+        };
 
         self.stopAudio = function () {
             var itemString = $(".itemAudio source").attr('src').match(new RegExp("Audio/[0-9a-z\-]+", "g"));
@@ -427,7 +447,7 @@
             if (currentProgressInterval) {
                 clearTimeout(currentProgressInterval);
             }
-	    }
+        };
 
         self.isPlaying = function () {
             return currentMediaElement;
@@ -436,4 +456,4 @@
 
     window.MediaPlayer = new mediaPlayer();
 
-})(document, clearTimeout, screen, localStorage, _V_, $, setInterval);
+})(document, clearTimeout, screen, localStorage, _V_, $, setInterval, window);

dashboard-ui/scripts/songs.js

@@ -8,7 +8,7 @@
         IncludeItemTypes: "Audio",
         Recursive: true,
         Fields: "ItemCounts,DateCreated,UserData,AudioInfo,ParentId",
-        Limit: 300,
+        Limit: 200,
         StartIndex: 0
     };