From e29307136d98bf89cb7d1f1b84f1c14c73a06428 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Fri, 8 Aug 2014 00:36:51 -0400
Subject: [PATCH] add additional playlist buttons

---
 dashboard-ui/itemdetails.html                 |  4 +-
 dashboard-ui/mypreferenceswebclient.html      |  2 +-
 dashboard-ui/scripts/favorites.js             |  2 +-
 dashboard-ui/scripts/itemdetailpage.js        | 25 ++++---
 dashboard-ui/scripts/librarybrowser.js        | 67 +++++++++++++++++--
 dashboard-ui/scripts/librarylist.js           | 28 ++++++--
 .../scripts/mypreferenceswebclient.js         |  7 ++
 dashboard-ui/songs.html                       |  2 +-
 8 files changed, 110 insertions(+), 27 deletions(-)

diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html
index 4dae69d0f4..0fa6419c0c 100644
--- a/dashboard-ui/itemdetails.html
+++ b/dashboard-ui/itemdetails.html
@@ -136,7 +136,7 @@
                                 <button class="btnPlayTrailer hide" type="button" data-icon="video" data-inline="true" data-mini="true">${ButtonPlayTrailer}</button>
                                 <a class="btnPlayExternalTrailer hide" data-role="button" data-icon="video" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlayTrailer}</a>
                                 <a class="btnPlayExternal hide" data-role="button" data-icon="play" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlay}</a>
-                                <a class="btnEdit hide" data-role="button" data-icon="edit" data-inline="true" data-mini="true" href="#">${ButtonEdit}</a>
+                                <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonMore}</button>
                                 <a class="btnSync hide" data-role="button" data-icon="refresh" data-inline="true" data-mini="true" href="#">${ButtonSync}</a>
                             </div>
                         </td>
@@ -153,7 +153,7 @@
                     <button class="btnPlayTrailer hide" type="button" data-icon="video" data-inline="true" data-mini="true">${ButtonPlayTrailer}</button>
                     <a class="btnPlayExternalTrailer hide" data-role="button" data-icon="video" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlayTrailer}</a>
                     <a class="btnPlayExternal hide" data-role="button" data-icon="play" data-inline="true" data-mini="true" href="#" target="_blank">${ButtonPlay}</a>
-                    <a class="btnEdit hide" data-role="button" data-icon="edit" data-inline="true" data-mini="true" href="#">${ButtonEdit}</a>
+                    <button class="btnMoreCommands hide" type="button" data-icon="ellipsis-v" data-inline="true" data-mini="true">${ButtonMore}</button>
                     <a class="btnSync hide" data-role="button" data-icon="refresh" data-inline="true" data-mini="true" href="#">${ButtonSync}</a>
                 </div>
                 <p class="itemGenres mobileGenres"></p>
diff --git a/dashboard-ui/mypreferenceswebclient.html b/dashboard-ui/mypreferenceswebclient.html
index 1e8b8c807a..f2805bf8e0 100644
--- a/dashboard-ui/mypreferenceswebclient.html
+++ b/dashboard-ui/mypreferenceswebclient.html
@@ -97,7 +97,7 @@
                     </select>
                     <div class="fieldDescription">${LabelEnableThemeSongsHelp}</div>
                 </li>
-                <li>
+                <li class="fldEnableBackdrops" style="display:none;">
                     <label for="selectBackdrop">${LabelEnableBackdrops}</label>
                     <select id="selectBackdrop" data-mini="true">
                         <option value="">${OptionAuto}</option>
diff --git a/dashboard-ui/scripts/favorites.js b/dashboard-ui/scripts/favorites.js
index 5110ac7909..d69dd98776 100644
--- a/dashboard-ui/scripts/favorites.js
+++ b/dashboard-ui/scripts/favorites.js
@@ -56,7 +56,7 @@
 
                     var href = "favorites.html?sectionid=" + section.id;
 
-                    html += '<a data-role="button" href="' + href + '" data-mini="true" data-inline="true">' + Globalize.translate('ButtonMore') + '</a>';
+                    html += '<a data-role="button" href="' + href + '" data-mini="true" data-inline="true">' + Globalize.translate('ButtonMoreItems') + '</a>';
                     html += '</div>';
                 }
                 html += '</div>';
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index a0a112f314..b2cfab4975 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -28,8 +28,6 @@
 
             reloadFromItem(page, item);
         });
-
-        $('.btnEdit', page).attr('href', "edititemmetadata.html?id=" + id);
     }
 
     function reloadFromItem(page, item) {
@@ -51,13 +49,6 @@
             renderDetails(page, item, context);
             LibraryBrowser.renderDetailPageBackdrop(page, item);
 
-            if (user.Configuration.IsAdministrator) {
-                $('.btnEdit', page).removeClass('hide');
-
-            } else {
-                $('.btnEdit', page).addClass('hide');
-            }
-
             var externalPlayUrl = getExternalPlayUrl(item);
             $('.btnPlayExternal', page).attr('href', externalPlayUrl || '#');
 
@@ -104,6 +95,12 @@
             } else {
                 $('.splitVersionContainer', page).hide();
             }
+
+            if (LibraryBrowser.getMoreCommands(item, user).length) {
+                $('.btnMoreCommands', page).show();
+            } else {
+                $('.btnMoreCommands', page).show();
+            }
         });
 
         if (item.LocationType == "Offline") {
@@ -1494,6 +1491,16 @@
             SyncManager.showMenu([currentItem]);
         });
 
+        $('.btnMoreCommands', page).on('click', function () {
+
+            var button = this;
+
+            Dashboard.getCurrentUser().done(function (user) {
+
+                LibraryBrowser.showMoreCommands(button, currentItem.Id, LibraryBrowser.getMoreCommands(currentItem, user));
+            });
+        });
+
     }).on('pageshow', "#itemDetailPage", function () {
 
         var page = this;
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 31a090ec10..c7e9bfe129 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -223,7 +223,6 @@
 
             html += '<tr>';
 
-            html += LibraryBrowser.getSongHeaderCellHtml('', '', options.enableColumnSorting);
             html += LibraryBrowser.getSongHeaderCellHtml('Disc', 'desktopColumn', options.enableColumnSorting);
             html += LibraryBrowser.getSongHeaderCellHtml('#', 'desktopColumn', options.enableColumnSorting);
             html += LibraryBrowser.getSongHeaderCellHtml('Track', '', options.enableColumnSorting, 'Name', options.sortBy, options.sortOrder);
@@ -241,6 +240,8 @@
             html += LibraryBrowser.getSongHeaderCellHtml('Runtime', 'tabletColumn', options.enableColumnSorting, 'Runtime,AlbumArtist,Album,SortName', options.sortBy, options.sortOrder);
             html += LibraryBrowser.getSongHeaderCellHtml('Plays', 'desktopColumn', options.enableColumnSorting, 'PlayCount,AlbumArtist,Album,SortName', options.sortBy, options.sortOrder);
 
+            html += LibraryBrowser.getSongHeaderCellHtml('', '', options.enableColumnSorting);
+
             html += '</tr></thead>';
 
             html += '<tbody>';
@@ -251,10 +252,6 @@
 
                 html += '<tr>';
 
-                html += '<td class="detailTableButtonsCell">';
-                html += '<button class="btnPlay" data-icon="play" type="button" data-iconpos="notext" onclick="LibraryBrowser.showPlayMenu(this, \'' + item.Id + '\', \'Audio\', false, \'Audio\');" data-inline="true" title="Play">Play</button>';
-                html += '</td>';
-
                 html += '<td class="desktopColumn">' + (item.ParentIndexNumber || "") + '</td>';
                 html += '<td class="desktopColumn">' + (item.IndexNumber || "") + '</td>';
 
@@ -297,6 +294,10 @@
 
                 html += '<td class="desktopColumn">' + (item.UserData ? item.UserData.PlayCount : 0) + '</td>';
 
+                html += '<td class="detailTableButtonsCell">';
+                html += '<button class="btnPlay" data-icon="ellipsis-v" type="button" data-iconpos="notext" onclick="LibraryBrowser.showPlayMenu(this, \'' + item.Id + '\', \'Audio\', false, \'Audio\', null, true);" data-inline="true" title="Play">Play</button>';
+                html += '</td>';
+
                 html += '</tr>';
             }
 
@@ -323,7 +324,7 @@
             return html;
         },
 
-        showPlayMenu: function (positionTo, itemId, itemType, isFolder, mediaType, resumePositionTicks) {
+        showPlayMenu: function (positionTo, itemId, itemType, isFolder, mediaType, resumePositionTicks, showAddToPlaylist) {
 
             if (!resumePositionTicks && mediaType != "Audio" && !isFolder) {
                 MediaController.play(itemId);
@@ -335,7 +336,7 @@
             var html = '<div data-role="popup" class="playFlyout" data-history="false" data-theme="a">';
 
             html += '<ul data-role="listview" style="min-width: 180px;">';
-            html += '<li data-role="list-divider">Play Menu</li>';
+            html += '<li data-role="list-divider">Menu</li>';
 
             html += '<li><a href="#" onclick="MediaController.play(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Play</a></li>';
 
@@ -355,6 +356,10 @@
                 html += '<li><a href="#" onclick="MediaController.shuffle(\'' + itemId + '\');LibraryBrowser.closePlayMenu();">Shuffle</a></li>';
             }
 
+            if (showAddToPlaylist) {
+                html += '<li><a href="#" onclick="PlaylistManager.showPanel([\'' + itemId + '\']);LibraryBrowser.closePlayMenu();">Add to playlist</a></li>';
+            }
+
             html += '</ul>';
 
             html += '</div>';
@@ -372,6 +377,54 @@
             $('.playFlyout').popup("close").remove();
         },
 
+        getMoreCommands: function (item, user) {
+
+            var commands = [];
+
+            if (PlaylistManager.supportsPlaylists(item)) {
+                commands.push('playlist');
+            }
+
+            if (user.Configuration.IsAdministrator) {
+                if (item.Type != "Recording" && item.Type != "Program") {
+                    commands.push('edit');
+                }
+            }
+
+            return commands;
+        },
+
+        showMoreCommands: function (positionTo, itemId, commands) {
+
+            $('.playFlyout').popup("close").remove();
+
+            var html = '<div data-role="popup" class="playFlyout" data-history="false" data-theme="a">';
+
+            html += '<ul data-role="listview" style="min-width: 180px;">';
+            html += '<li data-role="list-divider">Menu</li>';
+
+            if (commands.indexOf('playlist') != -1) {
+                html += '<li><a href="#" onclick="PlaylistManager.showPanel([\'' + itemId + '\']);">Add to playlist</a></li>';
+            }
+
+            if (commands.indexOf('edit') != -1) {
+                html += '<li><a href="edititemmetadata.html?id=' + itemId + '">Edit metadata</a></li>';
+                html += '<li><a href="edititemimages.html?id=' + itemId + '">Edit images</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", 55);
+        },
+
         getHref: function (item, context, topParentId) {
 
             var href = LibraryBrowser.getHrefInternal(item);
diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js
index 26720e800a..531508c58d 100644
--- a/dashboard-ui/scripts/librarylist.js
+++ b/dashboard-ui/scripts/librarylist.js
@@ -123,8 +123,10 @@
             buttonCount++;
         }
 
-        if (currentUser.Configuration.IsAdministrator && commands.indexOf('edit') != -1) {
-            html += '<a data-role="button" data-mini="true" data-inline="true" data-icon="edit" data-iconpos="notext" title="' + Globalize.translate('ButtonEdit') + '" href="edititemmetadata.html?id=' + item.Id + '" style="' + buttonMargin + '">' + Globalize.translate('ButtonEdit') + '</button>';
+        var moreCommands = LibraryBrowser.getMoreCommands(item, currentUser);
+
+        if (moreCommands.length) {
+            html += '<button data-role="button" class="btnMoreCommands" data-morecommands="' + moreCommands.join(',') + '" data-itemid="' + item.Id + '" data-mini="true" data-inline="true" data-icon="ellipsis-v" data-iconpos="notext" title="' + Globalize.translate('ButtonMore') + '" style="' + buttonMargin + '">' + Globalize.translate('ButtonMore') + '</button>';
             buttonCount++;
         }
 
@@ -149,8 +151,21 @@
         return false;
     }
 
+    function onMoreButtonClick() {
+
+        var id = this.getAttribute('data-itemid');
+        var commands = this.getAttribute('data-morecommands').split(',');
+
+        LibraryBrowser.showMoreCommands(this, id, commands);
+
+        // Used by the tab menu, not the slide up
+        $('.tapHoldMenu').popup('close');
+
+        return false;
+    }
+
     function onAddToPlaylistButtonClick() {
-        
+
         var id = this.getAttribute('data-itemid');
 
         PlaylistManager.showPanel([id]);
@@ -162,7 +177,7 @@
     }
 
     function onRemoveFromPlaylistButtonClick() {
-        
+
         var id = this.getAttribute('data-itemid');
 
         var page = $(this).parents('.page');
@@ -495,6 +510,7 @@
                 innerElem.html(getOverlayHtml(item, user, elem, commands)).trigger('create');
 
                 $('.btnPlayTrailer', innerElem).on('click', onTrailerButtonClick);
+                $('.btnMoreCommands', innerElem).on('click', onMoreButtonClick);
             });
 
             innerElem.show().each(function () {
@@ -651,7 +667,7 @@
     }
 
     function addToPlaylist(page) {
-        
+
         var selection = getSelectedItems(page);
 
         if (selection.length < 1) {
@@ -700,7 +716,7 @@
 
         }).join('')).selectmenu('refresh');
 
-        $('.itemsContainer', page).on('itemsrendered', function() {
+        $('.itemsContainer', page).on('itemsrendered', function () {
 
             $('.btnToggleSelections', page).off('click.toggleselections').on('click.toggleselections', function () {
                 toggleSelections(page);
diff --git a/dashboard-ui/scripts/mypreferenceswebclient.js b/dashboard-ui/scripts/mypreferenceswebclient.js
index 92b74a2e72..d936e793ce 100644
--- a/dashboard-ui/scripts/mypreferenceswebclient.js
+++ b/dashboard-ui/scripts/mypreferenceswebclient.js
@@ -65,6 +65,13 @@
             loadForm(page, userId, result);
 
         });
+
+        // See backrops.js for comments on this
+        if ($.browser.msie) {
+            $('.fldEnableBackdrops', page).hide();
+        } else {
+            $('.fldEnableBackdrops', page).show();
+        }
     });
 
     window.WebClientPreferencesPage = {
diff --git a/dashboard-ui/songs.html b/dashboard-ui/songs.html
index 9747f6eb00..dcc6f93f3d 100644
--- a/dashboard-ui/songs.html
+++ b/dashboard-ui/songs.html
@@ -19,7 +19,7 @@
                 <div class="listTopPaging">
                 </div>
             </div>
-            <div id="items" class="itemsContainer"></div>
+            <div id="items" class="itemsContainer" style="max-width:1200px;margin: 0 auto;"></div>
         </div>
 
         <div data-role="panel" class="viewPanel" data-theme="a" data-position="right" data-display="overlay" data-position-fixed="true">