Simplify SyncPlay settings screen and remove unused translations

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

src/components/syncPlay/ui/settings/advancedTab.html

@@ -1,29 +0,0 @@
-<form style="margin: auto;">
-    <h2 class="sectionTitle">${HeaderSyncPlayTimeSyncSettings}</h2>
-    <div class="inputContainer inputContainer-withDescription">
-        <input type="number" is="emby-input" id="txtExtraTimeOffset" pattern="[0-9]*"
-            label="${LabelSyncPlaySettingsExtraTimeOffset}" />
-        <div class="fieldDescription">${LabelSyncPlaySettingsExtraTimeOffsetHelp}</div>
-    </div>
-    <h2 class="sectionTitle">${HeaderSyncPlayPlaybackSettings}</h2>
-    <div class="inputContainer inputContainer-withDescription">
-        <input type="number" is="emby-input" id="txtMinDelaySpeedToSync" pattern="[0-9]*"
-            label="${LabelSyncPlaySettingsMinDelaySpeedToSync}" />
-        <div class="fieldDescription">${LabelSyncPlaySettingsMinDelaySpeedToSyncHelp}</div>
-    </div>
-    <div class="inputContainer inputContainer-withDescription">
-        <input type="number" is="emby-input" id="txtMaxDelaySpeedToSync" pattern="[0-9]*"
-            label="${LabelSyncPlaySettingsMaxDelaySpeedToSync}" />
-        <div class="fieldDescription">${LabelSyncPlaySettingsMaxDelaySpeedToSyncHelp}</div>
-    </div>
-    <div class="inputContainer inputContainer-withDescription">
-        <input type="number" is="emby-input" id="txtSpeedToSyncDuration" pattern="[0-9]*"
-            label="${LabelSyncPlaySettingsSpeedToSyncDuration}" />
-        <div class="fieldDescription">${LabelSyncPlaySettingsSpeedToSyncDurationHelp}</div>
-    </div>
-    <div class="inputContainer inputContainer-withDescription">
-        <input type="number" is="emby-input" id="txtMinDelaySkipToSync" pattern="[0-9]*"
-            label="${LabelSyncPlaySettingsMinDelaySkipToSync}" />
-        <div class="fieldDescription">${LabelSyncPlaySettingsMinDelaySkipToSyncHelp}</div>
-    </div>
-</form>

src/components/syncPlay/ui/settings/editor.html

@@ -6,12 +6,66 @@
 </div>
 <div class="formDialogContent smoothScrollY">
     <div class="dialogContentInner dialog-content-centered">
-        <div data-role="controlgroup" data-type="horizontal" class="localnav" data-mini="true">
+
-            <button id="show-localTab" class="controlGroupButton" is="emby-button"
+        <form style="margin: auto;">
-                data-showTab="localTab">${HeaderSyncPlayLocalSettings}</button>
+            <h2 class="sectionTitle">${HeaderSyncPlayPlaybackSettings}</h2>
-            <button id="show-advancedTab" class="controlGroupButton" is="emby-button"
+
-                data-showTab="advancedTab">${HeaderSyncPlayAdvancedSettings}</button>
+            <!-- Sync Correction Setting -->
-        </div>
+            <div class="checkboxContainer checkboxContainer-withDescription">
+                <label>
+                    <input type="checkbox" is="emby-checkbox" id="chkSyncCorrection" />
+                    <span>${LabelSyncPlaySettingsSyncCorrection}</span>
+                </label>
+                <div class="fieldDescription checkboxFieldDescription">${LabelSyncPlaySettingsSyncCorrectionHelp}</div>
+            </div>
+
+            <!-- SpeedToSync Settings -->
+            <div class="checkboxContainer checkboxContainer-withDescription">
+                <label>
+                    <input type="checkbox" is="emby-checkbox" id="chkSpeedToSync" />
+                    <span>${LabelSyncPlaySettingsSpeedToSync}</span>
+                </label>
+                <div class="fieldDescription checkboxFieldDescription">${LabelSyncPlaySettingsSpeedToSyncHelp}</div>
+            </div>
+            <div class="inputContainer inputContainer-withDescription">
+                <input type="number" is="emby-input" id="txtMinDelaySpeedToSync" pattern="[0-9]*"
+                    label="${LabelSyncPlaySettingsMinDelaySpeedToSync}" />
+                <div class="fieldDescription">${LabelSyncPlaySettingsMinDelaySpeedToSyncHelp}</div>
+            </div>
+            <div class="inputContainer inputContainer-withDescription">
+                <input type="number" is="emby-input" id="txtMaxDelaySpeedToSync" pattern="[0-9]*"
+                    label="${LabelSyncPlaySettingsMaxDelaySpeedToSync}" />
+                <div class="fieldDescription">${LabelSyncPlaySettingsMaxDelaySpeedToSyncHelp}</div>
+            </div>
+            <div class="inputContainer inputContainer-withDescription">
+                <input type="number" is="emby-input" id="txtSpeedToSyncDuration" pattern="[0-9]*"
+                    label="${LabelSyncPlaySettingsSpeedToSyncDuration}" />
+                <div class="fieldDescription">${LabelSyncPlaySettingsSpeedToSyncDurationHelp}</div>
+            </div>
+
+            <!-- SkipToSync Settings -->
+            <div class="checkboxContainer checkboxContainer-withDescription">
+                <label>
+                    <input type="checkbox" is="emby-checkbox" id="chkSkipToSync" />
+                    <span>${LabelSyncPlaySettingsSkipToSync}</span>
+                </label>
+                <div class="fieldDescription checkboxFieldDescription">${LabelSyncPlaySettingsSkipToSyncHelp}</div>
+            </div>
+            <div class="inputContainer inputContainer-withDescription">
+                <input type="number" is="emby-input" id="txtMinDelaySkipToSync" pattern="[0-9]*"
+                    label="${LabelSyncPlaySettingsMinDelaySkipToSync}" />
+                <div class="fieldDescription">${LabelSyncPlaySettingsMinDelaySkipToSyncHelp}</div>
+            </div>
+
+            <!-- Time Settings -->
+            <h2 class="sectionTitle">${HeaderSyncPlayTimeSyncSettings}</h2>
+            <div class="inputContainer inputContainer-withDescription">
+                <input type="number" is="emby-input" id="txtExtraTimeOffset" pattern="[0-9]*"
+                    label="${LabelSyncPlaySettingsExtraTimeOffset}" />
+                <div class="fieldDescription">${LabelSyncPlaySettingsExtraTimeOffsetHelp}</div>
+            </div>
+        </form>
+
         <div class="formDialogFooter" id="footer">
             <button is="emby-button" type="submit" class="raised button-submit block btnSave formDialogFooterItem">
                 <span id="saveButtonText">${Save}</span>

src/components/syncPlay/ui/settings/localTab.html

@@ -1,24 +0,0 @@
-<form style="margin: auto;">
-    <h2 class="sectionTitle">${HeaderSyncPlayPlaybackSettings}</h2>
-    <div class="checkboxContainer checkboxContainer-withDescription">
-        <label>
-            <input type="checkbox" is="emby-checkbox" id="chkSyncCorrection" />
-            <span>${LabelSyncPlaySettingsSyncCorrection}</span>
-        </label>
-        <div class="fieldDescription checkboxFieldDescription">${LabelSyncPlaySettingsSyncCorrectionHelp}</div>
-    </div>
-    <div class="checkboxContainer checkboxContainer-withDescription">
-        <label>
-            <input type="checkbox" is="emby-checkbox" id="chkSpeedToSync" />
-            <span>${LabelSyncPlaySettingsSpeedToSync}</span>
-        </label>
-        <div class="fieldDescription checkboxFieldDescription">${LabelSyncPlaySettingsSpeedToSyncHelp}</div>
-    </div>
-    <div class="checkboxContainer checkboxContainer-withDescription">
-        <label>
-            <input type="checkbox" is="emby-checkbox" id="chkSkipToSync" />
-            <span>${LabelSyncPlaySettingsSkipToSync}</span>
-        </label>
-        <div class="fieldDescription checkboxFieldDescription">${LabelSyncPlaySettingsSkipToSyncHelp}</div>
-    </div>
-</form>

src/strings/en-us.json

@@ -453,10 +453,7 @@
     "HeaderSyncPlayEnabled": "SyncPlay enabled",
     "HeaderSyncPlaySelectGroup": "Join a group",
     "HeaderSyncPlaySettings": "SyncPlay Settings",
-    "HeaderSyncPlayGroupSettings": "Group",
-    "HeaderSyncPlayAdvancedSettings": "Advanced",
     "HeaderSyncPlayPlaybackSettings": "Playback",
-    "HeaderSyncPlayLocalSettings": "Local",
     "HeaderSyncPlayTimeSyncSettings": "Time sync",
     "HeaderSystemDlnaProfiles": "System Profiles",
     "HeaderTaskTriggers": "Task Triggers",
@@ -873,8 +870,6 @@
     "LabelSyncPlayTimeSyncDevice": "Time syncing with:",
     "LabelSyncPlayTimeSyncOffset": "Time offset:",
     "LabelSyncPlaySettingsDescription": "Change SyncPlay preferences",
-    "LabelSyncPlaySettingsGroupName": "Group name:",
-    "LabelSyncPlaySettingsGroupNameHelp": "Change the group's name.",
     "LabelSyncPlaySettingsExtraTimeOffset": "Extra time offset:",
     "LabelSyncPlaySettingsExtraTimeOffsetHelp": "Manually adjust time offset with selected device for time sync. Tweak with care.",
     "LabelSyncPlaySettingsSyncCorrection": "Sync Correction",
@@ -891,7 +886,6 @@
     "LabelSyncPlaySettingsSpeedToSyncHelp": "Sync correction method that consist in speeding up the playback. Sync Correction must be enabled.",
     "LabelSyncPlaySettingsSkipToSync": "Enable SkipToSync",
     "LabelSyncPlaySettingsSkipToSyncHelp": "Sync correction method that consist in seeking to the estimated position. Sync Correction must be enabled.",
-    "LabelSyncPlaySettingsCreateGroup": "Create group",
     "LabelTag": "Tag:",
     "LabelTagline": "Tagline:",
     "LabelTextBackgroundColor": "Text background color:",