begin rework of library setup

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);
+        width: 30%;
-        position: absolute;
+        height: 30%;
-        left: 0;
-        right: 0;
-        width: 50%;
-        height: 50%;
-        margin: auto;
-        top: 22%;
     }
 
 .bannerCard {

dashboard-ui/library.html

@@ -13,16 +13,10 @@
                     <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>
 
                 <br />
-                    <div class="readOnlyContent">
+                <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>
@@ -32,7 +26,6 @@
 
             </div>
         </div>
-        </div>
         <div data-role="popup" id="popupEnterText" class="popup">
 
             <div class="ui-bar-a" style="text-align: center; padding: 0 20px;">

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">';
 

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('&', '&');
-
-                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) {
+    function getIcon(type) {
 
-        var folderIndex = button.getAttribute('data-folderindex');
+        switch (type) {
-        var virtualFolder = MediaLibraryPage.virtualFolders[folderIndex];
+            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";
+        }
+    }
 
-        MediaLibraryPage.lastVirtualFolderName = virtualFolder.Name;
+    function getVirtualFolderHtml(virtualFolder, index) {
 
-        $('.collectionTypeFieldDescription').hide();
+        var html = '';
 
-        MediaLibraryPage.getTextValue(Globalize.translate('HeaderRenameMediaFolder'), Globalize.translate('LabelNewName'), virtualFolder.Name, false, function (newName) {
+        html += '<div class="card backdropCard" style="max-width:300px;" data-index="' + index + '">';
 
-            if (virtualFolder.Name != newName) {
+        html += '<div class="cardBox visualCardBox">';
+        html += '<div class="cardScalable">';
 
-                var refreshAfterChange = MediaLibraryPage.shouldRefreshLibraryAfterChanges();
+        html += '<div class="cardPadder"></div>';
 
-                ApiClient.renameVirtualFolder(virtualFolder.Name, newName, refreshAfterChange).done(MediaLibraryPage.processOperationResult);
+        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 || '');
             }
         });
-    },
+    });
 
-    deleteVirtualFolder: function (button) {
+    pageClassOn('pageshow', "mediaLibraryPage", function () {
 
-        var folderIndex = button.getAttribute('data-folderindex');
+        var page = this;
-        var virtualFolder = MediaLibraryPage.virtualFolders[folderIndex];
+        reloadLibrary(page);
-
-        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);
 
 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;
 

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">';

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">';

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) {
                     

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 + "'>";
 

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"
 }

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"
 }

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>

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>

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 data-role="popup" id="popupEnterText" class="popup">