Move image resolution settings to Libraries > Metadata

src/controllers/dashboard/general.html

@@ -80,23 +80,6 @@
                     </div>
                 </div>
 
-                <div class="verticalSection">
-                    <h2>${HeaderDummyChapter}</h2>
-                    <div class="inputContainer">
-                        <input is="emby-input" type="number" id="valDummyChapterDuration" label="${LabelDummyChapterDuration}" min="1"></input>
-                        <div class="fieldDescription">${LabelDummyChapterDurationHelp}</div>
-                    </div>
-                    <div class="inputContainer">
-                        <input is="emby-input" type="number" id="valDummyChapterCount" label="${LabelDummyChapterCount}" min="1"></input>
-                        <div class="fieldDescription">${LabelDummyChapterCountHelp}</div>
-                    </div>
-                    <div class="selectContainer">
-                        <select is="emby-select" id="txtChapterImageResolution" label="${LabelChapterImageResolution}"></select>
-                        <div class="fieldDescription">
-                            <div>${LabelChapterImageResolutionHelp}</div>
-                        </div>
-                    </div>
-                </div>
                 <br />
                 <div>
                     <button is="emby-button" type="submit" class="raised button-submit block">

src/controllers/dashboard/general.js

@@ -1,4 +1,3 @@
-import { ImageResolution } from '@jellyfin/sdk/lib/generated-client/models/image-resolution';
 import 'jquery';
 
 import loading from '../../components/loading/loading';
@@ -17,30 +16,11 @@ import alert from '../../components/alert';
         page.querySelector('#txtServerName').value = systemInfo.ServerName;
         page.querySelector('#txtCachePath').value = systemInfo.CachePath || '';
         page.querySelector('#chkQuickConnectAvailable').checked = config.QuickConnectAvailable === true;
-        page.querySelector('#valDummyChapterDuration').value = config.DummyChapterDuration;
-        page.querySelector('#valDummyChapterCount').value = config.DummyChapterCount;
         $('#txtMetadataPath', page).val(systemInfo.InternalMetadataPath || '');
         $('#txtMetadataNetworkPath', page).val(systemInfo.MetadataNetworkPath || '');
         $('#selectLocalizationLanguage', page).html(languageOptions.map(function (language) {
             return '<option value="' + language.Value + '">' + language.Name + '</option>';
         })).val(config.UICulture);
-        page.querySelector('#txtChapterImageResolution').value = config.ChapterImageResolution;
-        $('#txtChapterImageResolution', page).html([
-            {
-                name: globalize.translate('ResolutionMatchSource'),
-                value: ImageResolution.MatchSource
-            },
-            { name: '2160p', value: ImageResolution.P2160 },
-            { name: '1440p', value: ImageResolution.P1440 },
-            { name: '1080p', value: ImageResolution.P1080 },
-            { name: '720p', value: ImageResolution.P720 },
-            { name: '480p', value: ImageResolution.P480 },
-            { name: '360p', value: ImageResolution.P360 },
-            { name: '240p', value: ImageResolution.P240 },
-            { name: '144p', value: ImageResolution.P144 }
-        ].map(function (resolution) {
-            return '<option value="' + resolution.value + '">' + resolution.name + '</option>';
-        })).val(config.ChapterImageResolution);
 
         loading.hide();
     }
@@ -56,9 +36,7 @@ import alert from '../../components/alert';
             config.MetadataPath = $('#txtMetadataPath', form).val();
             config.MetadataNetworkPath = $('#txtMetadataNetworkPath', form).val();
             config.QuickConnectAvailable = form.querySelector('#chkQuickConnectAvailable').checked;
-            config.DummyChapterDuration = $('#valDummyChapterDuration', form).val();
+
-            config.DummyChapterCount = $('#valDummyChapterCount', form).val();
-            config.ChapterImageResolution = $('#txtChapterImageResolution', form).val();
             ApiClient.updateServerConfiguration(config).then(function() {
                 ApiClient.getNamedConfiguration(brandingConfigKey).then(function(brandingConfig) {
                     brandingConfig.LoginDisclaimer = form.querySelector('#txtLoginDisclaimer').value;

src/controllers/dashboard/metadataImages.js

@@ -1,10 +1,35 @@
+import { ImageResolution } from '@jellyfin/sdk/lib/generated-client/models/image-resolution';
+
 import 'jquery';
+
 import loading from '../../components/loading/loading';
 import libraryMenu from '../../scripts/libraryMenu';
 import globalize from '../../scripts/globalize';
-import '../../components/listview/listview.scss';
 import Dashboard from '../../utils/dashboard';
 
+import '../../components/listview/listview.scss';
+
+function populateImageResolutionOptions(select) {
+    let html = '';
+    [
+        {
+            name: globalize.translate('ResolutionMatchSource'),
+            value: ImageResolution.MatchSource
+        },
+        { name: '2160p', value: ImageResolution.P2160 },
+        { name: '1440p', value: ImageResolution.P1440 },
+        { name: '1080p', value: ImageResolution.P1080 },
+        { name: '720p', value: ImageResolution.P720 },
+        { name: '480p', value: ImageResolution.P480 },
+        { name: '360p', value: ImageResolution.P360 },
+        { name: '240p', value: ImageResolution.P240 },
+        { name: '144p', value: ImageResolution.P144 }
+    ].forEach(({ value, name }) => {
+        html += `<option value="${value}">${name}</option>`;
+    });
+    select.innerHTML = html;
+}
+
 /* eslint-disable indent */
 
     function populateLanguages(select) {
@@ -32,11 +57,21 @@ import Dashboard from '../../utils/dashboard';
     }
 
     function loadPage(page) {
-        const promises = [ApiClient.getServerConfiguration(), populateLanguages(page.querySelector('#selectLanguage')), populateCountries(page.querySelector('#selectCountry'))];
+        const promises = [
+            ApiClient.getServerConfiguration(),
+            populateLanguages(page.querySelector('#selectLanguage')),
+            populateCountries(page.querySelector('#selectCountry'))
+        ];
+
+        populateImageResolutionOptions(page.querySelector('#txtChapterImageResolution'));
+
         Promise.all(promises).then(function(responses) {
             const config = responses[0];
             page.querySelector('#selectLanguage').value = config.PreferredMetadataLanguage || '';
             page.querySelector('#selectCountry').value = config.MetadataCountryCode || '';
+            page.querySelector('#valDummyChapterDuration').value = config.DummyChapterDuration || '';
+            page.querySelector('#valDummyChapterCount').value = config.DummyChapterCount || '';
+            page.querySelector('#txtChapterImageResolution').value = config.ChapterImageResolution || '';
             loading.hide();
         });
     }
@@ -47,6 +82,9 @@ import Dashboard from '../../utils/dashboard';
         ApiClient.getServerConfiguration().then(function(config) {
             config.PreferredMetadataLanguage = form.querySelector('#selectLanguage').value;
             config.MetadataCountryCode = form.querySelector('#selectCountry').value;
+            config.DummyChapterDuration = form.querySelector('#valDummyChapterDuration').value;
+            config.DummyChapterCount = form.querySelector('#valDummyChapterCount').value;
+            config.ChapterImageResolution = form.querySelector('#txtChapterImageResolution').value;
             ApiClient.updateServerConfiguration(config).then(Dashboard.processServerConfigurationUpdateResult);
         });
         return false;

src/controllers/dashboard/metadataimages.html

@@ -5,19 +5,42 @@
         <div class="content-primary">
 
             <form class="metadataImagesConfigurationForm">
-                <h2 style="margin-top:0;">${HeaderPreferredMetadataLanguage}</h2>
+                <div class="verticalSection">
+                    <h2 style="margin-top:0;">${HeaderPreferredMetadataLanguage}</h2>
 
-                <p style="margin:1.5em 0;">${DefaultMetadataLangaugeDescription}</p>
+                    <p style="margin:1.5em 0;">${DefaultMetadataLangaugeDescription}</p>
 
-                <div class="selectContainer">
+                    <div class="selectContainer">
-                    <select is="emby-select" id="selectLanguage" required="required" label="${LabelLanguage}"></select>
+                        <select is="emby-select" id="selectLanguage" required="required" label="${LabelLanguage}"></select>
+                    </div>
+
+                    <div class="selectContainer">
+                        <select is="emby-select" id="selectCountry" required="required" label="${LabelCountry}"></select>
+                    </div>
                 </div>
 
-                <div class="selectContainer">
+                <div class="verticalSection">
-                    <select is="emby-select" id="selectCountry" required="required" label="${LabelCountry}"></select>
+                    <h2>${HeaderDummyChapter}</h2>
+                    <div class="inputContainer">
+                        <input is="emby-input" type="number" id="valDummyChapterDuration" label="${LabelDummyChapterDuration}" min="1"></input>
+                        <div class="fieldDescription">${LabelDummyChapterDurationHelp}</div>
+                    </div>
+                    <div class="inputContainer">
+                        <input is="emby-input" type="number" id="valDummyChapterCount" label="${LabelDummyChapterCount}" min="1"></input>
+                        <div class="fieldDescription">${LabelDummyChapterCountHelp}</div>
+                    </div>
+                    <div class="selectContainer">
+                        <select is="emby-select" id="txtChapterImageResolution" label="${LabelChapterImageResolution}"></select>
+                        <div class="fieldDescription">
+                            <div>${LabelChapterImageResolutionHelp}</div>
+                        </div>
+                    </div>
                 </div>
+
                 <br />
-                <div><button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button></div>
+                <div>
+                    <button is="emby-button" type="submit" class="raised button-submit block"><span>${Save}</span></button>
+                </div>
             </form>
         </div>