add options to library setup

dashboard-ui/components/libraryoptionseditor/libraryoptionseditor.js

@@ -0,0 +1,55 @@
+define(['globalize', 'emby-checkbox'], function (globalize) {
+
+    function embed(parent, contentType) {
+
+        return new Promise(function (resolve, reject) {
+
+            var xhr = new XMLHttpRequest();
+            xhr.open('GET', 'components/libraryoptionseditor/libraryoptionseditor.template.html', true);
+
+            xhr.onload = function (e) {
+
+                var template = this.response;
+                parent.innerHTML = globalize.translateDocument(template);
+
+                setContentType(parent, contentType);
+
+                resolve();
+            }
+
+            xhr.send();
+        });
+    }
+
+    function setContentType(parent, contentType) {
+
+        if (contentType == 'music' || contentType == 'tvshows' || contentType == 'movies' || contentType == 'homevideos' || contentType == 'musicvideos' || contentType == 'mixed') {
+            parent.querySelector('.chkArhiveAsMediaContainer').classList.remove('hide');
+        } else {
+            parent.querySelector('.chkArhiveAsMediaContainer').classList.add('hide');
+        }
+
+        if (contentType == 'music' || contentType == 'tvshows' || contentType == 'movies' || contentType == 'homevideos' || contentType == 'musicvideos' || contentType == 'mixed') {
+            parent.classList.remove('hide');
+        } else {
+            parent.classList.add('hide');
+        }
+    }
+
+    function getLibraryOptions(parent) {
+
+        var options = {
+            EnableVideoArchiveFiles: parent.querySelector('.chkArhiveAsMedia').checked
+        };
+
+        options.EnableAudioArchiveFiles = options.EnableVideoArchiveFiles;
+
+        return options;
+    }
+
+    return {
+        embed: embed,
+        setContentType: setContentType,
+        getLibraryOptions: getLibraryOptions
+    };
+});

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

@@ -0,0 +1,8 @@
+<h1>${HeaderSettings}</h1>
+<div class="checkboxContainer checkboxContainer-withDescription chkArhiveAsMediaContainer">
+    <label>
+        <input type="checkbox" is="emby-checkbox" class="chkArhiveAsMedia" />
+        <span>${OptionDetectArchiveFilesAsMedia}</span>
+    </label>
+    <div class="fieldDescription checkboxFieldDescription">${OptionDetectArchiveFilesAsMediaHelp}</div>
+</div>

dashboard-ui/components/medialibrarycreator/medialibrarycreator.js

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'jQuery', 'emby-input', 'emby-select', 'paper-icon-button-light', 'listViewStyle', 'formDialogStyle'], function (dialogHelper, $) {
+define(['dialogHelper', 'jQuery', 'components/libraryoptionseditor/libraryoptionseditor', 'emby-input', 'emby-select', 'paper-icon-button-light', 'listViewStyle', 'formDialogStyle'], function (dialogHelper, $, libraryoptionseditor) {
 
     var currentDeferred;
     var hasChanges;
@@ -27,7 +27,9 @@
             type = null;
         }
 
-        ApiClient.addVirtualFolder(name, type, currentOptions.refresh, paths).then(function () {
+        var libraryOptions = libraryoptionseditor.getLibraryOptions(dlg.querySelector('.libraryOptions'));
+
+        ApiClient.addVirtualFolder(name, type, currentOptions.refresh, paths, libraryOptions).then(function () {
 
             hasChanges = true;
             dialogHelper.close(dlg);
@@ -59,12 +61,16 @@
 
         $('#selectCollectionType', page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val('').on('change', function () {
 
-            if (this.value == 'mixed') {
-                return;
-            }
+            var value = this.value;
 
             var dlg = $(this).parents('.dialog')[0];
 
+            libraryoptionseditor.setContentType(dlg.querySelector('.libraryOptions'), value);
+
+            if (value == 'mixed') {
+                return;
+            }
+
             var index = this.selectedIndex;
             if (index != -1) {
 
@@ -72,8 +78,6 @@
                     .replace('*', '')
                     .replace('&', '&');
 
-                var value = this.value;
-
                 $('#txtValue', dlg).val(name);
 
                 var folderOption = collectionTypeOptions.filter(function (i) {
@@ -178,6 +182,10 @@
         currentDeferred.resolveWith(null, [hasChanges]);
     }
 
+    function initLibraryOptions(dlg) {
+        libraryoptionseditor.embed(dlg.querySelector('.libraryOptions'));
+    }
+
     function editor() {
 
         var self = this;
@@ -225,6 +233,7 @@
 
                 paths = [];
                 renderPaths(dlg);
+                initLibraryOptions(dlg);
             }
 
             xhr.send();

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

@@ -14,10 +14,10 @@
                 </div>
             </div>
             <div class="inputContainer">
-                <input is="emby-input" type="text" id="txtValue" required="required" label="${LabelDisplayName}" />
+                <input is="emby-input" type="text" id="txtValue" required="required" label="${LabelDisplayName}"/>
             </div>
-            <div>
-                <h1 style="display:inline-block;vertical-align:middle;">${HeadersFolders}</h1>
+            <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>
@@ -25,6 +25,8 @@
             </div>
             <div class="paperList folderList hide" style="padding: .7em 0;"></div>
 
+            <br />
+            <div class="libraryOptions"></div>
             <br />
             <div>
                 <button is="emby-button" type="submit" class="raised submit block">