From 9949d3a8dbf4a051f7baa46047974cb09002769c Mon Sep 17 00:00:00 2001 From: Bill Thornton Date: Thu, 2 Sep 2021 16:44:55 -0400 Subject: [PATCH] Simplify SyncPlay settings screen and remove unused translations --- .../syncPlay/ui/settings/SettingsEditor.js | 71 +------------------ .../syncPlay/ui/settings/advancedTab.html | 29 -------- .../syncPlay/ui/settings/editor.html | 66 +++++++++++++++-- .../syncPlay/ui/settings/localTab.html | 24 ------- src/strings/en-us.json | 6 -- 5 files changed, 62 insertions(+), 134 deletions(-) delete mode 100644 src/components/syncPlay/ui/settings/advancedTab.html delete mode 100644 src/components/syncPlay/ui/settings/localTab.html diff --git a/src/components/syncPlay/ui/settings/SettingsEditor.js b/src/components/syncPlay/ui/settings/SettingsEditor.js index b8c9e986b..954cae4cc 100644 --- a/src/components/syncPlay/ui/settings/SettingsEditor.js +++ b/src/components/syncPlay/ui/settings/SettingsEditor.js @@ -10,6 +10,8 @@ import layoutManager from '../../../layoutManager'; import loading from '../../../loading/loading'; import toast from '../../../toast/toast'; import globalize from '../../../../scripts/globalize'; +import { toBoolean, toFloat } from '../../../../scripts/stringUtils'; + import 'material-design-icons-iconfont'; import '../../../../elements/emby-input/emby-input'; import '../../../../elements/emby-select/emby-select'; @@ -18,7 +20,6 @@ import '../../../../elements/emby-button/paper-icon-button-light'; import '../../../../elements/emby-checkbox/emby-checkbox'; import '../../../listview/listview.scss'; import '../../../formdialog.scss'; -import { toBoolean, toFloat } from '../../../../scripts/stringUtils'; function centerFocus(elem, horiz, on) { import('../../../../scripts/scrollHelper').then((scrollHelper) => { @@ -35,31 +36,6 @@ class SettingsEditor { this.apiClient = apiClient; this.timeSyncCore = timeSyncCore; this.options = options; - - this.tabNames = []; - this.tabs = {}; - } - - insertBefore(newNode, existingNode) { - existingNode.parentNode.insertBefore(newNode, existingNode); - } - - addTab(name, tab) { - this.tabNames.push(name); - this.tabs[name] = tab; - } - - showTab(tabName) { - this.tabNames.forEach(id => { - this.tabs[id].style.display = 'none'; - this.context.querySelector('#show-' + id).classList.remove('ui-btn-active'); - }); - - const tab = this.tabs[tabName]; - if (tab) { - tab.style.display = 'block'; - this.context.querySelector('#show-' + tabName).classList.add('ui-btn-active'); - } } async embed() { @@ -79,33 +55,6 @@ class SettingsEditor { const { default: editorTemplate } = await import('./editor.html'); this.context.innerHTML = globalize.translateHtml(editorTemplate, 'core'); - const footer = this.context.querySelector('#footer'); - - // Create tabs - const { default: localTabTemplate } = await import('./localTab.html'); - const localTab = this.translateTemplate(localTabTemplate); - - const { default: advancedTabTemplate } = await import('./advancedTab.html'); - const advancedTab = this.translateTemplate(advancedTabTemplate); - - this.insertBefore(localTab, footer); - this.insertBefore(advancedTab, footer); - - // Switch tabs using nav - this.addTab('localTab', localTab); - this.addTab('advancedTab', advancedTab); - - this.showTab('localTab'); - - const tabButtons = this.context.querySelectorAll('.controlGroupButton'); - tabButtons.forEach(button => { - button.addEventListener('click', (event) => { - const tabName = event.target.getAttribute('data-showTab'); - if (tabName) { - this.showTab(tabName); - } - }); - }); // Set callbacks for form submission this.context.querySelector('form').addEventListener('submit', (event) => { @@ -156,22 +105,6 @@ class SettingsEditor { context.querySelector('#chkSkipToSync').checked = toBoolean(SyncPlay.Settings.get('useSkipToSync'), true); } - /** - * @param {string} html HTML string representing a single element. - * @return {Element} The element. - */ - htmlToElement(html) { - const template = document.createElement('template'); - html = html.trim(); // Avoid returning a text node of whitespace. - template.innerHTML = html; - return template.content.firstChild; - } - - translateTemplate(template) { - const translatedTemplate = globalize.translateHtml(template, 'core'); - return this.htmlToElement(translatedTemplate); - } - onSubmit() { this.save(); dialogHelper.close(this.context); diff --git a/src/components/syncPlay/ui/settings/advancedTab.html b/src/components/syncPlay/ui/settings/advancedTab.html deleted file mode 100644 index e853215d2..000000000 --- a/src/components/syncPlay/ui/settings/advancedTab.html +++ /dev/null @@ -1,29 +0,0 @@ -
-

${HeaderSyncPlayTimeSyncSettings}

-
- -
${LabelSyncPlaySettingsExtraTimeOffsetHelp}
-
-

${HeaderSyncPlayPlaybackSettings}

-
- -
${LabelSyncPlaySettingsMinDelaySpeedToSyncHelp}
-
-
- -
${LabelSyncPlaySettingsMaxDelaySpeedToSyncHelp}
-
-
- -
${LabelSyncPlaySettingsSpeedToSyncDurationHelp}
-
-
- -
${LabelSyncPlaySettingsMinDelaySkipToSyncHelp}
-
-
diff --git a/src/components/syncPlay/ui/settings/editor.html b/src/components/syncPlay/ui/settings/editor.html index 5df312c67..6267d9cf0 100644 --- a/src/components/syncPlay/ui/settings/editor.html +++ b/src/components/syncPlay/ui/settings/editor.html @@ -6,12 +6,66 @@
-
- - -
+ +
+

${HeaderSyncPlayPlaybackSettings}

+ + +
+ +
${LabelSyncPlaySettingsSyncCorrectionHelp}
+
+ + +
+ +
${LabelSyncPlaySettingsSpeedToSyncHelp}
+
+
+ +
${LabelSyncPlaySettingsMinDelaySpeedToSyncHelp}
+
+
+ +
${LabelSyncPlaySettingsMaxDelaySpeedToSyncHelp}
+
+
+ +
${LabelSyncPlaySettingsSpeedToSyncDurationHelp}
+
+ + +
+ +
${LabelSyncPlaySettingsSkipToSyncHelp}
+
+
+ +
${LabelSyncPlaySettingsMinDelaySkipToSyncHelp}
+
+ + +

${HeaderSyncPlayTimeSyncSettings}

+
+ +
${LabelSyncPlaySettingsExtraTimeOffsetHelp}
+
+
+