From 264dafb8a437bb7fb6c3dec6760c9123a9d485aa Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Thu, 15 Oct 2015 13:21:18 -0400
Subject: [PATCH] begin rework of library setup

---
 dashboard-ui/css/card.css                     |  14 +-
 dashboard-ui/library.html                     |  23 +-
 dashboard-ui/scripts/loginpage.js             |   2 +-
 dashboard-ui/scripts/medialibrarypage.js      | 638 +++++++++++-------
 dashboard-ui/scripts/plugincatalogpage.js     |   2 +-
 dashboard-ui/scripts/pluginspage.js           |   2 +-
 dashboard-ui/scripts/userparentalcontrol.js   |   2 +-
 dashboard-ui/scripts/userprofilespage.js      |   4 +-
 dashboard-ui/strings/javascript/en-US.json    |   3 +-
 .../strings/javascript/javascript.json        |   3 +-
 dashboard-ui/thirdparty/emby-icons.html       |   1 +
 dashboard-ui/vulcanize-out.html               |   1 +
 dashboard-ui/wizardlibrary.html               |   7 +-
 13 files changed, 413 insertions(+), 289 deletions(-)

diff --git a/dashboard-ui/css/card.css b/dashboard-ui/css/card.css
index 119d29866e..a411e009cb 100644
--- a/dashboard-ui/css/card.css
+++ b/dashboard-ui/css/card.css
@@ -309,19 +309,15 @@
 }
 
 .iconCardImage {
+    display: flex;
+    align-items: center;
     text-align: center;
-    position: relative;
+    justify-content: center;
 }
 
     .iconCardImage iron-icon {
-        color: rgb(255, 255, 255);
-        position: absolute;
-        left: 0;
-        right: 0;
-        width: 50%;
-        height: 50%;
-        margin: auto;
-        top: 22%;
+        width: 30%;
+        height: 30%;
     }
 
 .bannerCard {
diff --git a/dashboard-ui/library.html b/dashboard-ui/library.html
index 7df07c8a29..7385ffad83 100644
--- a/dashboard-ui/library.html
+++ b/dashboard-ui/library.html
@@ -13,24 +13,17 @@
                     <a href="librarypathmapping.html" data-role="button">${TabPathSubstitution}</a>
                     <a href="librarysettings.html" data-role="button">${TabAdvanced}</a>
                 </div>
-                <div class="readOnlyContent">
-                    <div id="divMediaLibrary">
-                        <p>
-                            <button type="button" data-mini="true" data-icon="plus" data-iconpos="right" onclick="MediaLibraryPage.addVirtualFolder();">${ButtonAddMediaFolder}</button>
-                        </p>
-                        <div id="divVirtualFolders"></div>
-                    </div>
+                <div id="divVirtualFolders"></div>
 
-                    <br />
-                    <div class="readOnlyContent">
-                        <paper-button raised class="btnRefresh block submit"><iron-icon icon="refresh"></iron-icon><span>${ButtonScanLibrary}</span></paper-button>
-                        <div style="margin:5px;">
-                            <progress max="100" min="0" style="width: 100%;" class="refreshProgress"></progress>
-                            <div style="margin-top: 5px;">${LabelLastResult} <span class="lastRefreshResult"></span></div>
-                        </div>
+                <br />
+                <div>
+                    <paper-button raised class="btnRefresh block submit"><iron-icon icon="refresh"></iron-icon><span>${ButtonScanLibrary}</span></paper-button>
+                    <div style="margin:5px;">
+                        <progress max="100" min="0" style="width: 100%;" class="refreshProgress"></progress>
+                        <div style="margin-top: 5px;">${LabelLastResult} <span class="lastRefreshResult"></span></div>
                     </div>
-
                 </div>
+
             </div>
         </div>
         <div data-role="popup" id="popupEnterText" class="popup">
diff --git a/dashboard-ui/scripts/loginpage.js b/dashboard-ui/scripts/loginpage.js
index 741b5079bf..8edff44447 100644
--- a/dashboard-ui/scripts/loginpage.js
+++ b/dashboard-ui/scripts/loginpage.js
@@ -133,7 +133,7 @@
         for (var i = 0, length = users.length; i < length; i++) {
             var user = users[i];
 
-            html += '<div class="card squareCard alternateHover bottomPaddedCard"><div class="cardBox visualCardBox">';
+            html += '<div class="card squareCard bottomPaddedCard"><div class="cardBox visualCardBox">';
 
             html += '<div class="cardScalable">';
 
diff --git a/dashboard-ui/scripts/medialibrarypage.js b/dashboard-ui/scripts/medialibrarypage.js
index ac85749c79..13c611b6f1 100644
--- a/dashboard-ui/scripts/medialibrarypage.js
+++ b/dashboard-ui/scripts/medialibrarypage.js
@@ -1,155 +1,5 @@
 var MediaLibraryPage = {
 
-    onPageInit: function () {
-
-        var page = this;
-        $('#selectCollectionType', page).on('change', function () {
-
-            var index = this.selectedIndex;
-            if (index != -1) {
-
-                var name = this.options[index].innerHTML
-                    .replace('*', '')
-                    .replace('&amp;', '&');
-
-                var value = this.value;
-
-                $('#txtValue', page).val(name);
-
-                var folderOption = MediaLibraryPage.getCollectionTypeOptions().filter(function (i) {
-
-                    return i.value == value;
-
-                })[0];
-
-                $('.collectionTypeFieldDescription', page).html(folderOption.message || '');
-            }
-        });
-    },
-
-    onPageShow: function () {
-
-        var page = this;
-        MediaLibraryPage.lastVirtualFolderName = "";
-
-        MediaLibraryPage.reloadLibrary(page);
-    },
-
-    reloadLibrary: function (page) {
-
-        Dashboard.showLoadingMsg();
-
-        ApiClient.getVirtualFolders().done(function (result) {
-            MediaLibraryPage.reloadVirtualFolders(page, result);
-        });
-
-        $('#divMediaLibrary', page).show();
-    },
-
-    shouldRefreshLibraryAfterChanges: function () {
-
-        return $($.mobile.activePage).is('#mediaLibraryPage');
-    },
-
-    reloadVirtualFolders: function (page, virtualFolders) {
-
-        if (virtualFolders) {
-            MediaLibraryPage.virtualFolders = virtualFolders;
-        } else {
-            virtualFolders = MediaLibraryPage.virtualFolders;
-        }
-
-        var html = '';
-
-        var addPathMappingInfo = $(page).is('#mediaLibraryPage');
-
-        for (var i = 0, length = virtualFolders.length; i < length; i++) {
-
-            var virtualFolder = virtualFolders[i];
-
-            var isCollapsed = MediaLibraryPage.lastVirtualFolderName != virtualFolder.Name;
-
-
-            html += MediaLibraryPage.getVirtualFolderHtml(virtualFolder, isCollapsed, i, addPathMappingInfo);
-        }
-
-        $('#divVirtualFolders', page).html(html).trigger('create');
-
-        Dashboard.hideLoadingMsg();
-    },
-
-    changeCollectionType: function () {
-
-        Dashboard.alert({
-            message: Globalize.translate('HeaderChangeFolderTypeHelp'),
-            title: Globalize.translate('HeaderChangeFolderType')
-        });
-    },
-
-    getVirtualFolderHtml: function (virtualFolder, isCollapsed, index, addPathMappingInfo) {
-
-        isCollapsed = isCollapsed ? "true" : "false";
-        var html = '<div class="collapsibleVirtualFolder" data-mini="true" data-role="collapsible" data-collapsed="' + isCollapsed + '">';
-
-        html += '<h3>' + virtualFolder.Name + '</h3>';
-
-        var typeName = MediaLibraryPage.getCollectionTypeOptions().filter(function (t) {
-
-            return t.value == virtualFolder.CollectionType;
-
-        })[0];
-
-        typeName = typeName ? typeName.name : Globalize.translate('FolderTypeUnset');
-
-        html += '<p style="padding-left:.5em;">';
-
-        html += Globalize.translate('LabelContentTypeValue').replace('{0}', '<b>' + typeName + '</b>');
-        html += '</p><ul class="mediaFolderLocations" data-inset="true" data-role="listview" data-split-icon="minus">';
-
-        html += '<li data-role="list-divider" class="mediaLocationsHeader">' + Globalize.translate('HeaderMediaLocations');
-        html += '<paper-fab class="mini subdued" icon="add" title="' + Globalize.translate('ButtonAdd') + '" onclick="MediaLibraryPage.addMediaLocation(' + index + ');" style="margin-left:1em;"></paper-fab>';
-        html += '</li>';
-
-        for (var i = 0, length = virtualFolder.Locations.length; i < length; i++) {
-
-            var location = virtualFolder.Locations[i];
-            html += '<li>';
-            html += '<a style="font-size:14px;" class="lnkMediaLocation" href="#">' + location + '</a>';
-            html += '<a href="#" data-index="' + i + '" data-folderindex="' + index + '" onclick="MediaLibraryPage.deleteMediaLocation(this);"></a>';
-            html += '</li>';
-        }
-        html += '</ul>';
-
-        if (addPathMappingInfo) {
-            html += '<div class="fieldDescription" style="margin:.5em 0 1.5em;">' + Globalize.translate('LabelPathSubstitutionHelp') + '</div>';
-        }
-
-        html += '<p>';
-        html += '<button type="button" data-inline="true" data-icon="minus" data-folderindex="' + index + '" onclick="MediaLibraryPage.deleteVirtualFolder(this);" data-mini="true">' + Globalize.translate('ButtonRemove') + '</button>';
-        html += '<button type="button" data-inline="true" data-icon="edit" data-folderindex="' + index + '" onclick="MediaLibraryPage.renameVirtualFolder(this);" data-mini="true">' + Globalize.translate('ButtonRename') + '</button>';
-        html += '<button type="button" data-inline="true" data-icon="edit" data-folderindex="' + index + '" onclick="MediaLibraryPage.changeCollectionType(this);" data-mini="true">' + Globalize.translate('ButtonChangeType') + '</button>';
-        html += '</p>';
-
-        html += '</div>';
-
-        return html;
-    },
-
-    addVirtualFolder: function () {
-
-        $('.collectionTypeFieldDescription').show();
-
-        MediaLibraryPage.getTextValue(Globalize.translate('HeaderAddMediaFolder'), Globalize.translate('LabelName'), "", true, function (name, type) {
-
-            MediaLibraryPage.lastVirtualFolderName = name;
-
-            var refreshAfterChange = MediaLibraryPage.shouldRefreshLibraryAfterChanges();
-
-            ApiClient.addVirtualFolder(name, type, refreshAfterChange).done(MediaLibraryPage.processOperationResult);
-
-        });
-    },
-
     addMediaLocation: function (virtualFolderIndex) {
 
         MediaLibraryPage.selectDirectory(function (path) {
@@ -160,7 +10,7 @@
 
                 MediaLibraryPage.lastVirtualFolderName = virtualFolder.Name;
 
-                var refreshAfterChange = MediaLibraryPage.shouldRefreshLibraryAfterChanges();
+                var refreshAfterChange = shouldRefreshLibraryAfterChanges();
 
                 ApiClient.addMediaPath(virtualFolder.Name, path, refreshAfterChange).done(MediaLibraryPage.processOperationResult);
             }
@@ -183,7 +33,48 @@
         });
     },
 
-    getTextValue: function (header, label, initialValue, showCollectionType, callback) {
+    deleteMediaLocation: function (button) {
+
+        var folderIndex = button.getAttribute('data-folderindex');
+        var index = parseInt(button.getAttribute('data-index'));
+
+        var virtualFolder = MediaLibraryPage.virtualFolders[folderIndex];
+
+        MediaLibraryPage.lastVirtualFolderName = virtualFolder.Name;
+
+        var location = virtualFolder.Locations[index];
+
+        Dashboard.confirm(Globalize.translate('MessageConfirmRemoveMediaLocation'), Globalize.translate('HeaderRemoveMediaLocation'), function (confirmResult) {
+
+            if (confirmResult) {
+
+                var refreshAfterChange = shouldRefreshLibraryAfterChanges();
+
+                ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).done(MediaLibraryPage.processOperationResult);
+            }
+        });
+    }
+
+};
+
+(function () {
+
+    function changeCollectionType(page, virtualFolder) {
+
+        Dashboard.alert({
+            message: Globalize.translate('HeaderChangeFolderTypeHelp'),
+            title: Globalize.translate('HeaderChangeFolderType')
+        });
+    }
+
+    function processOperationResult(result) {
+
+        var page = $($.mobile.activePage)[0];
+
+        reloadLibrary(page);
+    }
+
+    function getTextValue(header, label, initialValue, showCollectionType, callback) {
 
         var page = $.mobile.activePage;
 
@@ -201,7 +92,7 @@
             $('#selectCollectionType', popup).removeAttr('required');
         }
 
-        $('#selectCollectionType', popup).html(MediaLibraryPage.getCollectionTypeOptionsHtml()).val('');
+        $('#selectCollectionType', popup).html(getCollectionTypeOptionsHtml()).val('');
 
         popup.on("popupafterclose", function () {
             $(this).off("popupafterclose").off("click");
@@ -230,11 +121,168 @@
 
             return false;
         });
-    },
+    }
 
-    getCollectionTypeOptionsHtml: function () {
+    function addVirtualFolder(page) {
 
-        return MediaLibraryPage.getCollectionTypeOptions().filter(function (i) {
+        getTextValue(Globalize.translate('HeaderAddMediaFolder'), Globalize.translate('LabelName'), "", true, function (name, type) {
+
+            var refreshAfterChange = shouldRefreshLibraryAfterChanges();
+
+            ApiClient.addVirtualFolder(name, type, refreshAfterChange).done(processOperationResult);
+
+        });
+    }
+
+    function deleteVirtualFolder(page, virtualFolder) {
+
+        var msg = Globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder');
+
+        if (virtualFolder.Locations.length) {
+            msg += "<br/><br/>" + Globalize.translate("MessageTheFollowingLocationWillBeRemovedFromLibrary") + "<br/><br/>";
+            msg += virtualFolder.Locations.join("<br/>");
+        }
+
+        Dashboard.confirm(msg, Globalize.translate('HeaderRemoveMediaFolder'), function (confirmResult) {
+
+            if (confirmResult) {
+
+                var refreshAfterChange = shouldRefreshLibraryAfterChanges();
+
+                ApiClient.removeVirtualFolder(virtualFolder.Name, refreshAfterChange).done(processOperationResult);
+            }
+
+        });
+    }
+
+    function renameVirtualFolder(page, virtualFolder) {
+
+        require(['prompt'], function (prompt) {
+
+            prompt({
+                text: Globalize.translate('LabelNewName'),
+                title: Globalize.translate('HeaderRenameMediaFolder'),
+                callback: function (newName) {
+
+                    if (newName && newName != virtualFolder.Name) {
+
+                        var refreshAfterChange = shouldRefreshLibraryAfterChanges();
+
+                        ApiClient.renameVirtualFolder(virtualFolder.Name, newName, refreshAfterChange).done(processOperationResult);
+                    }
+                }
+            });
+
+        });
+    }
+
+    function showCardMenu(page, elem, virtualFolders) {
+
+        var card = $(elem).parents('.card')[0];
+        var index = parseInt(card.getAttribute('data-index'));
+        var virtualFolder = virtualFolders[index];
+
+        var menuItems = [];
+
+        menuItems.push({
+            name: Globalize.translate('ButtonChangeType'),
+            id: 'changetype',
+            ironIcon: 'folder'
+        });
+
+        menuItems.push({
+            name: Globalize.translate('ButtonRemove'),
+            id: 'delete',
+            ironIcon: 'remove'
+        });
+
+        menuItems.push({
+            name: Globalize.translate('ButtonRename'),
+            id: 'rename',
+            ironIcon: 'mode-edit'
+        });
+
+        require(['actionsheet'], function () {
+
+            ActionSheetElement.show({
+                items: menuItems,
+                positionTo: elem,
+                callback: function (resultId) {
+
+                    switch (resultId) {
+
+                        case 'changetype':
+                            changeCollectionType(page, virtualFolder);
+                            break;
+                        case 'rename':
+                            renameVirtualFolder(page, virtualFolder);
+                            break;
+                        case 'delete':
+                            deleteVirtualFolder(page, virtualFolder);
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            });
+
+        });
+    }
+
+    function reloadLibrary(page) {
+
+        Dashboard.showLoadingMsg();
+
+        ApiClient.getVirtualFolders().done(function (result) {
+            reloadVirtualFolders(page, result);
+        });
+    }
+
+    function shouldRefreshLibraryAfterChanges() {
+
+        return $($.mobile.activePage).is('#mediaLibraryPage');
+    }
+
+    function reloadVirtualFolders(page, virtualFolders) {
+
+        var html = '';
+
+        virtualFolders.push({
+            Name: 'Add Media Library',
+            icon: 'add-circle',
+            Locations: [],
+            showType: false,
+            showLocations: false,
+            showMenu: false,
+            showNameWithIcon: true,
+            color: 'green',
+            contentClass: 'addLibrary'
+        });
+
+        for (var i = 0, length = virtualFolders.length; i < length; i++) {
+
+            var virtualFolder = virtualFolders[i];
+
+            html += getVirtualFolderHtml(virtualFolder, i);
+        }
+
+        var divVirtualFolders = page.querySelector('#divVirtualFolders');
+        divVirtualFolders.innerHTML = html;
+
+        $('.btnCardMenu', divVirtualFolders).on('click', function () {
+            showCardMenu(page, this, virtualFolders);
+        });
+
+        $('.addLibrary', divVirtualFolders).on('click', function () {
+            addVirtualFolder(page);
+        });
+
+        Dashboard.hideLoadingMsg();
+    }
+
+    function getCollectionTypeOptionsHtml() {
+
+        return getCollectionTypeOptions().filter(function (i) {
 
             return i.isSelectable !== false;
 
@@ -243,9 +291,9 @@
             return '<option value="' + i.value + '">' + i.name + '</option>';
 
         }).join("");
-    },
+    }
 
-    getCollectionTypeOptions: function () {
+    function getCollectionTypeOptions() {
 
         return [
 
@@ -261,99 +309,185 @@
             { name: Globalize.translate('FolderTypeUnset'), value: "mixed", message: Globalize.translate('MessageUnsetContentHelp') }
         ];
 
-    },
-
-    renameVirtualFolder: function (button) {
-
-        var folderIndex = button.getAttribute('data-folderindex');
-        var virtualFolder = MediaLibraryPage.virtualFolders[folderIndex];
-
-        MediaLibraryPage.lastVirtualFolderName = virtualFolder.Name;
-
-        $('.collectionTypeFieldDescription').hide();
-
-        MediaLibraryPage.getTextValue(Globalize.translate('HeaderRenameMediaFolder'), Globalize.translate('LabelNewName'), virtualFolder.Name, false, function (newName) {
-
-            if (virtualFolder.Name != newName) {
-
-                var refreshAfterChange = MediaLibraryPage.shouldRefreshLibraryAfterChanges();
-
-                ApiClient.renameVirtualFolder(virtualFolder.Name, newName, refreshAfterChange).done(MediaLibraryPage.processOperationResult);
-            }
-        });
-    },
-
-    deleteVirtualFolder: function (button) {
-
-        var folderIndex = button.getAttribute('data-folderindex');
-        var virtualFolder = MediaLibraryPage.virtualFolders[folderIndex];
-
-        var parent = $(button).parents('.collapsibleVirtualFolder');
-
-        var locations = $('.lnkMediaLocation', parent).map(function () {
-            return this.innerHTML;
-        }).get();
-
-        var msg = Globalize.translate('MessageAreYouSureYouWishToRemoveMediaFolder');
-
-        if (locations.length) {
-            msg += "<br/><br/>" + Globalize.translate("MessageTheFollowingLocationWillBeRemovedFromLibrary") + "<br/><br/>";
-            msg += locations.join("<br/>");
-        }
-
-        MediaLibraryPage.lastVirtualFolderName = virtualFolder.Name;
-
-        Dashboard.confirm(msg, Globalize.translate('HeaderRemoveMediaFolder'), function (confirmResult) {
-
-            if (confirmResult) {
-
-                var refreshAfterChange = MediaLibraryPage.shouldRefreshLibraryAfterChanges();
-
-                ApiClient.removeVirtualFolder(virtualFolder.Name, refreshAfterChange).done(MediaLibraryPage.processOperationResult);
-            }
-
-        });
-    },
-
-    deleteMediaLocation: function (button) {
-
-        var folderIndex = button.getAttribute('data-folderindex');
-        var index = parseInt(button.getAttribute('data-index'));
-
-        var virtualFolder = MediaLibraryPage.virtualFolders[folderIndex];
-
-        MediaLibraryPage.lastVirtualFolderName = virtualFolder.Name;
-
-        var location = virtualFolder.Locations[index];
-
-        Dashboard.confirm(Globalize.translate('MessageConfirmRemoveMediaLocation'), Globalize.translate('HeaderRemoveMediaLocation'), function (confirmResult) {
-
-            if (confirmResult) {
-
-                var refreshAfterChange = MediaLibraryPage.shouldRefreshLibraryAfterChanges();
-
-                ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).done(MediaLibraryPage.processOperationResult);
-            }
-        });
-    },
-
-    processOperationResult: function (result) {
-        Dashboard.hideLoadingMsg();
-
-        var page = $.mobile.activePage;
-
-        $('#popupEnterText', page).popup("close");
-
-        if (MediaLibraryPage.directoryPicker) {
-            MediaLibraryPage.directoryPicker.close();
-            MediaLibraryPage.directoryPicker = null;
-        }
-
-        MediaLibraryPage.reloadLibrary(page);
     }
-};
 
-$(document).on('pageinit', ".mediaLibraryPage", MediaLibraryPage.onPageInit).on('pageshow', ".mediaLibraryPage", MediaLibraryPage.onPageShow);
+    function getIcon(type) {
+
+        switch (type) {
+            case "movies":
+                return "local-movies";
+            case "music":
+                return "library-music";
+            case "photos":
+                return "photo";
+            case "livetv":
+                return "live-tv";
+            case "tvshows":
+                return "live-tv";
+            case "games":
+                return "folder";
+            case "trailers":
+                return "local-movies";
+            case "homevideos":
+                return "video-library";
+            case "musicvideos":
+                return "video-library";
+            case "books":
+                return "folder";
+            case "channels":
+                return "folder";
+            case "playlists":
+                return "folder";
+            default:
+                return "folder";
+        }
+    }
+
+    function getVirtualFolderHtml(virtualFolder, index) {
+
+        var html = '';
+
+        html += '<div class="card backdropCard" style="max-width:300px;" data-index="' + index + '">';
+
+        html += '<div class="cardBox visualCardBox">';
+        html += '<div class="cardScalable">';
+
+        html += '<div class="cardPadder"></div>';
+
+        var contentClass = "cardContent";
+        if (virtualFolder.contentClass) {
+            contentClass += " " + virtualFolder.contentClass;
+        }
+
+        html += '<div class="' + contentClass + '">';
+        var imgUrl = '';
+        if (imgUrl) {
+            html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
+        } else {
+            html += '<div class="cardImage iconCardImage">';
+
+            if (virtualFolder.color) {
+                html += '<div style="color:' + virtualFolder.color + ';cursor:pointer;">';
+            } else {
+                html += '<div>';
+            }
+            html += '<iron-icon icon="' + (virtualFolder.icon || getIcon(virtualFolder.CollectionType)) + '"></iron-icon>';
+
+            if (virtualFolder.showNameWithIcon) {
+                html += '<div style="margin-top:1em;position:absolute;width:100%;">';
+                html += virtualFolder.Name;
+                html += "</div>";
+            }
+            html += "</div>";
+
+            html += '</div>';
+        }
+
+        // cardContent
+        html += "</div>";
+
+        // cardScalable
+        html += "</div>";
+
+        html += '<div class="cardFooter">';
+
+        if (virtualFolder.showMenu !== false) {
+            html += '<div class="cardText" style="text-align:right; float:right;padding-top:5px;">';
+            html += '<paper-icon-button icon="' + AppInfo.moreIcon + '" class="btnCardMenu"></paper-icon-button>';
+            html += "</div>";
+        }
+
+        html += "<div class='cardText'>";
+        if (virtualFolder.showNameWithIcon) {
+            html += '&nbsp;';
+        } else {
+            html += virtualFolder.Name;
+        }
+        html += "</div>";
+
+        var typeName = getCollectionTypeOptions().filter(function (t) {
+
+            return t.value == virtualFolder.CollectionType;
+
+        })[0];
+
+        typeName = typeName ? typeName.name : Globalize.translate('FolderTypeUnset');
+
+        html += "<div class='cardText'>";
+        if (virtualFolder.showType === false) {
+            html += '&nbsp;';
+        } else {
+            html += typeName;
+        }
+        html += "</div>";
+
+        if (virtualFolder.showLocations === false) {
+            html += "<div class='cardText'>";
+            html += '&nbsp;';
+            html += "</div>";
+        } else if (!virtualFolder.Locations.length) {
+            html += "<div class='cardText' style='color:#cc3333;'>";
+            html += Globalize.translate('NumLocationsValue', virtualFolder.Locations.length);
+            html += "</div>";
+        }
+        else if (virtualFolder.Locations.length == 1) {
+            html += "<div class='cardText'>";
+            html += virtualFolder.Locations[0];
+            html += "</div>";
+        }
+        else {
+            html += "<div class='cardText'>";
+            html += Globalize.translate('NumLocationsValue', virtualFolder.Locations.length);
+            html += "</div>";
+        }
+
+        // cardFooter
+        html += "</div>";
+
+        // cardBox
+        html += "</div>";
+
+        // card
+        html += "</div>";
+
+        return html;
+    }
+
+    pageClassOn('pageinit', "mediaLibraryPage", function () {
+
+        var page = this;
+        $('#selectCollectionType', page).on('change', function () {
+
+            var index = this.selectedIndex;
+            if (index != -1) {
+
+                var name = this.options[index].innerHTML
+                    .replace('*', '')
+                    .replace('&amp;', '&');
+
+                var value = this.value;
+
+                $('#txtValue', page).val(name);
+
+                var folderOption = getCollectionTypeOptions().filter(function (i) {
+
+                    return i.value == value;
+
+                })[0];
+
+                $('.collectionTypeFieldDescription', page).html(folderOption.message || '');
+            }
+        });
+    });
+
+    pageClassOn('pageshow', "mediaLibraryPage", function () {
+
+        var page = this;
+        reloadLibrary(page);
+
+    });
+
+})();
 
 var WizardLibraryPage = {
 
@@ -377,7 +511,7 @@ var WizardLibraryPage = {
 
 (function ($, document, window) {
 
-    $(document).on('pageshow', "#mediaLibraryPage", function () {
+    pageIdOn('pageshow', "mediaLibraryPage", function () {
 
         var page = this;
 
@@ -389,7 +523,9 @@ var WizardLibraryPage = {
             taskKey: 'RefreshLibrary'
         });
 
-    }).on('pagebeforehide', "#mediaLibraryPage", function () {
+    });
+
+    pageIdOn('pagebeforehide', "mediaLibraryPage", function () {
 
         var page = this;
 
diff --git a/dashboard-ui/scripts/plugincatalogpage.js b/dashboard-ui/scripts/plugincatalogpage.js
index 358f52ad76..87e20c4ec8 100644
--- a/dashboard-ui/scripts/plugincatalogpage.js
+++ b/dashboard-ui/scripts/plugincatalogpage.js
@@ -171,7 +171,7 @@
         }
         var target = plugin.externalUrl ? ' target="_blank"' : '';
 
-        html += "<div class='card backdropCard alternateHover bottomPaddedCard'>";
+        html += "<div class='card backdropCard bottomPaddedCard'>";
 
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable">';
diff --git a/dashboard-ui/scripts/pluginspage.js b/dashboard-ui/scripts/pluginspage.js
index a90d8795c9..de83a6bdf9 100644
--- a/dashboard-ui/scripts/pluginspage.js
+++ b/dashboard-ui/scripts/pluginspage.js
@@ -44,7 +44,7 @@
             configPageUrl :
             null;
 
-        html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' class='card backdropCard alternateHover bottomPaddedCard'>";
+        html += "<div data-id='" + plugin.Id + "' data-name='" + plugin.Name + "' class='card backdropCard bottomPaddedCard'>";
 
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable">';
diff --git a/dashboard-ui/scripts/userparentalcontrol.js b/dashboard-ui/scripts/userparentalcontrol.js
index e92b217ec0..5cf0522d20 100644
--- a/dashboard-ui/scripts/userparentalcontrol.js
+++ b/dashboard-ui/scripts/userparentalcontrol.js
@@ -343,7 +343,7 @@
         require(['prompt'], function (prompt) {
 
             prompt({
-                text: Globalize.translate('LabelTag:'),
+                text: Globalize.translate('LabelTag'),
                 title: Globalize.translate('HeaderAddTag'),
                 callback: function(value) {
                     
diff --git a/dashboard-ui/scripts/userprofilespage.js b/dashboard-ui/scripts/userprofilespage.js
index 6567089ef6..124559a6f3 100644
--- a/dashboard-ui/scripts/userprofilespage.js
+++ b/dashboard-ui/scripts/userprofilespage.js
@@ -111,7 +111,7 @@
 
         var html = '';
 
-        var cssClass = "card squareCard alternateHover bottomPaddedCard";
+        var cssClass = "card squareCard bottomPaddedCard";
 
         if (user.Policy.IsDisabled) {
             cssClass += ' grayscale';
@@ -255,7 +255,7 @@
 
         var html = '';
 
-        var cssClass = "card squareCard alternateHover bottomPaddedCard";
+        var cssClass = "card squareCard bottomPaddedCard";
 
         html += "<div data-id='" + user.Id + "' class='" + cssClass + "'>";
 
diff --git a/dashboard-ui/strings/javascript/en-US.json b/dashboard-ui/strings/javascript/en-US.json
index 2c3d3ba57d..4cc6963897 100644
--- a/dashboard-ui/strings/javascript/en-US.json
+++ b/dashboard-ui/strings/javascript/en-US.json
@@ -903,5 +903,6 @@
     "LoginDisclaimer": "Emby is designed to help you manage your personal media library, such as home videos and photos. Please see our terms of use. Downloading any Emby software constitutes acceptance of these terms.",
     "TermsOfUse": "Terms of use",
     "HeaderTryMultiSelect": "Try Multi-Select",
-    "TryMultiSelectMessage": "To edit multiple media items, just click and hold any poster and select the items you want to manage. Try it!"
+    "TryMultiSelectMessage": "To edit multiple media items, just click and hold any poster and select the items you want to manage. Try it!",
+    "NumLocationsValue": "{0} folders"
 }
\ No newline at end of file
diff --git a/dashboard-ui/strings/javascript/javascript.json b/dashboard-ui/strings/javascript/javascript.json
index 2f5f4ca722..59a2a4c337 100644
--- a/dashboard-ui/strings/javascript/javascript.json
+++ b/dashboard-ui/strings/javascript/javascript.json
@@ -914,5 +914,6 @@
     "LoginDisclaimer": "Emby is designed to help you manage your personal media library, such as home videos and photos. Please see our terms of use. Downloading any Emby software constitutes acceptance of these terms.",
     "TermsOfUse": "Terms of use",
     "HeaderTryMultiSelect": "Try Multi-Select",
-    "TryMultiSelectMessage": "To edit multiple media items, just click and hold any poster and select the items you want to manage. Try it!"
+    "TryMultiSelectMessage": "To edit multiple media items, just click and hold any poster and select the items you want to manage. Try it!",
+    "NumLocationsValue": "{0} folders"
 }
diff --git a/dashboard-ui/thirdparty/emby-icons.html b/dashboard-ui/thirdparty/emby-icons.html
index 202d59803d..aaf9e3653d 100644
--- a/dashboard-ui/thirdparty/emby-icons.html
+++ b/dashboard-ui/thirdparty/emby-icons.html
@@ -37,6 +37,7 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
     <svg>
         <defs>
             <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" /></g>
+            <g id="add-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" /></g>
             <g id="clear-all"><path d="M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z" /></g>
             <g id="airplay"><defs><path id="a" d="M0 0h24v24H0V0z" /></defs><defs><path id="c" d="M0 0h24v24H0V0z" /></defs><clipPath id="b"><use xlink:href="#a" overflow="visible" /></clipPath><clipPath id="d" clip-path="url(#b)"><use xlink:href="#c" overflow="visible" /></clipPath><path d="M6 22h12l-6-6zM21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V5h18v12h-4v2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" clip-path="url(#d)" /></g>
             <g id="album"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z" /></g>
diff --git a/dashboard-ui/vulcanize-out.html b/dashboard-ui/vulcanize-out.html
index d3717efb20..d2a2f2688c 100644
--- a/dashboard-ui/vulcanize-out.html
+++ b/dashboard-ui/vulcanize-out.html
@@ -19491,6 +19491,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
     <svg>
         <defs>
             <g id="add"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></g>
+            <g id="add-circle"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></g>
             <g id="clear-all"><path d="M5 13h14v-2H5v2zm-2 4h14v-2H3v2zM7 7v2h14V7H7z"></path></g>
             <g id="airplay"><defs><path id="a" d="M0 0h24v24H0V0z"></path></defs><defs><path id="c" d="M0 0h24v24H0V0z"></path></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><clipPath id="d" clip-path="url(#b)"><use xlink:href="#c" overflow="visible"></use></clipPath><path d="M6 22h12l-6-6zM21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V5h18v12h-4v2h4c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" clip-path="url(#d)"></path></g>
             <g id="album"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 14.5c-2.49 0-4.5-2.01-4.5-4.5S9.51 7.5 12 7.5s4.5 2.01 4.5 4.5-2.01 4.5-4.5 4.5zm0-5.5c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1z"></path></g>
diff --git a/dashboard-ui/wizardlibrary.html b/dashboard-ui/wizardlibrary.html
index 8e64b56c1f..3f527e1302 100644
--- a/dashboard-ui/wizardlibrary.html
+++ b/dashboard-ui/wizardlibrary.html
@@ -18,12 +18,7 @@
                 </div>
 
                 <br />
-                <div id="divMediaLibrary">
-                    <p>
-                        <button type="button" data-mini="true" data-icon="plus" onclick="MediaLibraryPage.addVirtualFolder();">${ButtonAddMediaFolder}</button>
-                    </p>
-                    <div id="divVirtualFolders"></div>
-                </div>
+                <div id="divVirtualFolders"></div>
 
                 <div data-role="popup" id="popupEnterText" class="popup">