improve genre displays

dashboard-ui/bower_components/emby-webcomponents/dialoghelper/dialoghelper.js

@@ -283,6 +283,11 @@
 
         if (!dlg.classList.contains('hide')) {
 
+            dlg.dispatchEvent(new CustomEvent('closing', {
+                bubbles: false,
+                cancelable: false
+            }));
+
             var onAnimationFinish = function () {
                 focusManager.popScope(dlg);
 

dashboard-ui/components/libraryoptionseditor/libraryoptionseditor.js

@@ -1,6 +1,6 @@
 define(['globalize', 'emby-checkbox'], function (globalize) {
 
-    function embed(parent, contentType) {
+    function embed(parent, contentType, libraryOptions) {
 
         return new Promise(function (resolve, reject) {
 
@@ -14,6 +14,10 @@
 
                 setContentType(parent, contentType);
 
+                if (libraryOptions) {
+                    setLibraryOptions(parent, libraryOptions);
+                }
+
                 resolve();
             }
 
@@ -39,17 +43,23 @@
     function getLibraryOptions(parent) {
 
         var options = {
-            EnableVideoArchiveFiles: parent.querySelector('.chkArhiveAsMedia').checked
+            EnableArchiveMediaFiles: parent.querySelector('.chkArhiveAsMedia').checked
         };
 
-        options.EnableAudioArchiveFiles = options.EnableVideoArchiveFiles;
+        options.EnableAudioArchiveFiles = options.EnableArchiveMediaFiles;
 
         return options;
     }
 
+    function setLibraryOptions(parent, options) {
+
+        parent.querySelector('.chkArhiveAsMedia').checked = options.EnableArchiveMediaFiles;;
+    }
+
     return {
         embed: embed,
         setContentType: setContentType,
-        getLibraryOptions: getLibraryOptions
+        getLibraryOptions: getLibraryOptions,
+        setLibraryOptions: setLibraryOptions
     };
 });

dashboard-ui/components/medialibraryeditor/medialibraryeditor.js

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'jQuery', 'emby-button', 'listViewStyle', 'paper-icon-button-light'], function (dialogHelper, $) {
+define(['dialogHelper', 'dom', 'components/libraryoptionseditor/libraryoptionseditor', 'emby-button', 'listViewStyle', 'paper-icon-button-light', 'formDialogStyle'], function (dialogHelper, dom, libraryoptionseditor) {
 
     var currentDeferred;
     var hasChanges;
@@ -41,7 +41,7 @@
                 ApiClient.removeMediaPath(virtualFolder.Name, location, refreshAfterChange).then(function () {
 
                     hasChanges = true;
-                    refreshLibraryFromServer($(button).parents('.editorContent')[0]);
+                    refreshLibraryFromServer(dom.parentWithClass(button, 'dlg-libraryeditor'));
 
                 }, function () {
 
@@ -96,12 +96,15 @@
 
         page.querySelector('.folderList').innerHTML = foldersHtml;
 
-        $(page.querySelectorAll('.btnRemovePath')).on('click', onRemoveClick);
+        var btnRemovePath = page.querySelectorAll('.btnRemovePath');
+        for (var i = 0, length = btnRemovePath.length; i < length; i++) {
+            btnRemovePath[i].addEventListener('click', onRemoveClick);
+        }
     }
 
     function onAddButtonClick() {
 
-        var page = $(this).parents('.editorContent')[0];
+        var page = dom.parentWithClass(this, 'dlg-libraryeditor');
 
         require(['directorybrowser'], function (directoryBrowser) {
 
@@ -121,15 +124,20 @@
         });
     }
 
-    function initEditor(page, options) {
+    function initEditor(dlg, options) {
-        renderLibrary(page, options);
+        renderLibrary(dlg, options);
+
+        dlg.querySelector('.btnAddFolder').addEventListener('click', onAddButtonClick);
+
+        libraryoptionseditor.embed(dlg.querySelector('.libraryOptions'), options.library.CollectionType, options.library.LibraryOptions);
+    }
+
+    function onDialogClosing() {
 
-        $('.btnAddFolder', page).on('click', onAddButtonClick);
     }
 
     function onDialogClosed() {
 
-        $(this).remove();
         Dashboard.hideLoadingMsg();
         currentDeferred.resolveWith(null, [hasChanges]);
     }
@@ -156,39 +164,33 @@
                     size: 'small',
 
                     // In (at least) chrome this is causing the text field to not be editable
-                    modal: false
+                    modal: false,
+                    removeOnClose: true
                 });
 
+                dlg.classList.add('dlg-libraryeditor');
                 dlg.classList.add('ui-body-a');
                 dlg.classList.add('background-theme-a');
 
-                var html = '';
+                dlg.innerHTML = Globalize.translateDocument(template);
-                html += '<h2 class="dialogHeader">';
-                html += '<button type="button" is="emby-button" icon="arrow-back" class="fab mini btnCloseDialog" tabindex="-1"><i class="md-icon">arrow_back</i></button>';
 
-                html += '<div style="display:inline-block;margin-left:.6em;vertical-align:middle;">' + options.library.Name + '</div>';
+                dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.library.Name;
-                html += '</h2>';
 
-                html += '<div class="editorContent" style="max-width:800px;margin:auto;">';
-                html += Globalize.translateDocument(template);
-                html += '</div>';
-
-                dlg.innerHTML = html;
                 document.body.appendChild(dlg);
 
-                var editorContent = dlg.querySelector('.editorContent');
+                initEditor(dlg, options);
-                initEditor(editorContent, options);
 
-                $(dlg).on('close', onDialogClosed);
+                dlg.addEventListener('closing', onDialogClosing);
+                dlg.addEventListener('close', onDialogClosed);
 
                 dialogHelper.open(dlg);
 
-                $('.btnCloseDialog', dlg).on('click', function () {
+                dlg.querySelector('.btnCancel').addEventListener('click', function () {
 
                     dialogHelper.close(dlg);
                 });
 
-                refreshLibraryFromServer(editorContent);
+                refreshLibraryFromServer(dlg);
             }
 
             xhr.send();

dashboard-ui/components/medialibraryeditor/medialibraryeditor.template.html

@@ -1,8 +1,20 @@
-<div>
+<div class="formDialogHeader">
-    <h1 style="display:inline-block;vertical-align:middle;">${HeadersFolders}</h1>
+    <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
-    <button is="emby-button" type="button" class="raised btnAddFolder submit mini" style="margin-left:1em;" title="${ButtonAdd}">
+    <div class="formDialogHeaderTitle">
-        <i class="md-icon">add</i>
+    </div>
-        <span>${ButtonAdd}</span>
+</div>
-    </button>
+
+<div class="formDialogContent smoothScrollY" style="padding-top:2em;">
+    <div class="dialogContentInner dialog-content-centered">
+        <div style="display: flex; align-items: center;">
+            <h1 style="margin: .5em 0;">${HeadersFolders}</h1>
+            <button is="emby-button" type="button" class="raised btnAddFolder submit mini" style="margin-left:1em;" title="${ButtonAdd}">
+                <i class="md-icon">add</i>
+                <span>${ButtonAdd}</span>
+            </button>
+        </div>
+        <div class="paperList folderList" style="padding:.7em 0;"></div>
+        <br />
+        <div class="libraryOptions"></div>
+    </div>
 </div>
-<div class="paperList folderList" style="padding:.7em 0;"></div>

dashboard-ui/scripts/itembynamedetailpage.js

@@ -4,6 +4,13 @@
 
         var sections = [];
 
+        if (item.ArtistCount) {
+            sections.push({
+                name: Globalize.translate('TabArtists'),
+                type: 'MusicArtist'
+            });
+        }
+
         if (item.MovieCount) {
 
             sections.push({
@@ -188,8 +195,25 @@
                     playFromHere: true,
                     showTitle: true,
                     showParentTitle: true,
-                    centerText: true,
+                    coverImage: true,
-                    overlayPlayButton: true
+                    cardLayout: true
+                });
+                break;
+
+            case 'MusicArtist':
+                loadItems(element, item, type, {
+                    MediaTypes: "",
+                    IncludeItemTypes: "MusicArtist",
+                    PersonTypes: "",
+                    ArtistIds: "",
+                    Limit: 8
+                }, {
+                    shape: "square",
+                    playFromHere: true,
+                    showTitle: true,
+                    showParentTitle: true,
+                    coverImage: true,
+                    cardLayout: true
                 });
                 break;
 

dashboard-ui/thirdparty/paper-button-style.css

@@ -168,10 +168,6 @@ div.dialogHeader {
     background-color: #101010;
 }
 
-.formDialogHeaderTitle {
-    margin-left: .75em;
-}
-
 .formDialogHeader button {
     margin-top: 0;
     margin-bottom: 0;