mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Simplify SyncPlay settings screen and remove unused translations
This commit is contained in:
Bill Thornton
parent
f32538ace4
commit
9949d3a8db
5 changed files with 62 additions and 134 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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"
|
||||
data-showTab="localTab">${HeaderSyncPlayLocalSettings}</button>
|
||||
<button id="show-advancedTab" class="controlGroupButton" is="emby-button"
|
||||
data-showTab="advancedTab">${HeaderSyncPlayAdvancedSettings}</button>
|
||||
</div>
|
||||
|
||||
<form style="margin: auto;">
|
||||
<h2 class="sectionTitle">${HeaderSyncPlayPlaybackSettings}</h2>
|
||||
|
||||
<!-- Sync Correction Setting -->
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue