Merge pull request #2204 from OancaAndrei/syncplay-settings
This commit is contained in:
Bill Thornton
GitHub
commit
6dffc58e29
15 changed files with 407 additions and 18 deletions
|
|
@ -1,5 +1,6 @@
|
|||
import { Events } from 'jellyfin-apiclient';
|
||||
import SyncPlay from '../core';
|
||||
import SyncPlaySettingsEditor from './settings/SettingsEditor';
|
||||
import loading from '../../loading/loading';
|
||||
import toast from '../../toast/toast';
|
||||
import actionsheet from '../../actionSheet/actionSheet';
|
||||
|
|
@ -77,7 +78,9 @@ class GroupSelectionMenu {
|
|||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error('SyncPlay: unexpected error listing groups:', error);
|
||||
if (error) {
|
||||
console.error('SyncPlay: unexpected error listing groups:', error);
|
||||
}
|
||||
});
|
||||
|
||||
loading.hide();
|
||||
|
|
@ -119,6 +122,14 @@ class GroupSelectionMenu {
|
|||
});
|
||||
}
|
||||
|
||||
menuItems.push({
|
||||
name: globalize.translate('Settings'),
|
||||
icon: 'video_settings',
|
||||
id: 'settings',
|
||||
selected: false,
|
||||
secondaryText: globalize.translate('LabelSyncPlaySettingsDescription')
|
||||
});
|
||||
|
||||
menuItems.push({
|
||||
name: globalize.translate('LabelSyncPlayLeaveGroup'),
|
||||
icon: 'meeting_room',
|
||||
|
|
@ -142,9 +153,19 @@ class GroupSelectionMenu {
|
|||
SyncPlay.Manager.haltGroupPlayback(apiClient);
|
||||
} else if (id == 'leave-group') {
|
||||
apiClient.leaveSyncPlayGroup();
|
||||
} else if (id == 'settings') {
|
||||
new SyncPlaySettingsEditor(apiClient, SyncPlay.Manager.getTimeSyncCore(), { groupInfo: groupInfo })
|
||||
.embed()
|
||||
.catch(error => {
|
||||
if (error) {
|
||||
console.error('Error creating SyncPlay settings editor', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
}).catch((error) => {
|
||||
console.error('SyncPlay: unexpected error showing group menu:', error);
|
||||
if (error) {
|
||||
console.error('SyncPlay: unexpected error showing group menu:', error);
|
||||
}
|
||||
});
|
||||
|
||||
loading.hide();
|
||||
|
|
|
|||
147
src/components/syncPlay/ui/settings/SettingsEditor.js
Normal file
147
src/components/syncPlay/ui/settings/SettingsEditor.js
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
/**
|
||||
* Module that displays an editor for changing SyncPlay settings.
|
||||
* @module components/syncPlay/settings/SettingsEditor
|
||||
*/
|
||||
|
||||
import { Events } from 'jellyfin-apiclient';
|
||||
import SyncPlay from '../../core';
|
||||
import { getSetting, setSetting } from '../../core/Settings';
|
||||
import dialogHelper from '../../../dialogHelper/dialogHelper';
|
||||
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';
|
||||
import '../../../../elements/emby-button/emby-button';
|
||||
import '../../../../elements/emby-button/paper-icon-button-light';
|
||||
import '../../../../elements/emby-checkbox/emby-checkbox';
|
||||
import '../../../listview/listview.scss';
|
||||
import '../../../formdialog.scss';
|
||||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
import('../../../../scripts/scrollHelper').then((scrollHelper) => {
|
||||
const fn = on ? 'on' : 'off';
|
||||
scrollHelper.centerFocus[fn](elem, horiz);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Class that displays an editor for changing SyncPlay settings.
|
||||
*/
|
||||
class SettingsEditor {
|
||||
constructor(apiClient, timeSyncCore, options = {}) {
|
||||
this.apiClient = apiClient;
|
||||
this.timeSyncCore = timeSyncCore;
|
||||
this.options = options;
|
||||
}
|
||||
|
||||
async embed() {
|
||||
const dialogOptions = {
|
||||
removeOnClose: true,
|
||||
scrollY: true
|
||||
};
|
||||
|
||||
if (layoutManager.tv) {
|
||||
dialogOptions.size = 'fullscreen';
|
||||
} else {
|
||||
dialogOptions.size = 'small';
|
||||
}
|
||||
|
||||
this.context = dialogHelper.createDialog(dialogOptions);
|
||||
this.context.classList.add('formDialog');
|
||||
|
||||
const { default: editorTemplate } = await import('./editor.html');
|
||||
this.context.innerHTML = globalize.translateHtml(editorTemplate, 'core');
|
||||
|
||||
// Set callbacks for form submission
|
||||
this.context.querySelector('form').addEventListener('submit', (event) => {
|
||||
// Disable default form submission
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
this.context.querySelector('.btnSave').addEventListener('click', () => {
|
||||
this.onSubmit();
|
||||
});
|
||||
|
||||
this.context.querySelector('.btnCancel').addEventListener('click', () => {
|
||||
dialogHelper.close(this.context);
|
||||
});
|
||||
|
||||
await this.initEditor();
|
||||
|
||||
if (layoutManager.tv) {
|
||||
centerFocus(this.context.querySelector('.formDialogContent'), false, true);
|
||||
}
|
||||
|
||||
return dialogHelper.open(this.context).then(() => {
|
||||
if (layoutManager.tv) {
|
||||
centerFocus(this.context.querySelector('.formDialogContent'), false, false);
|
||||
}
|
||||
|
||||
if (this.context.submitted) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
return Promise.reject();
|
||||
});
|
||||
}
|
||||
|
||||
async initEditor() {
|
||||
const { context } = this;
|
||||
|
||||
context.querySelector('#txtExtraTimeOffset').value = toFloat(getSetting('extraTimeOffset'), 0.0);
|
||||
context.querySelector('#chkSyncCorrection').checked = toBoolean(getSetting('enableSyncCorrection'), true);
|
||||
context.querySelector('#txtMinDelaySpeedToSync').value = toFloat(getSetting('minDelaySpeedToSync'), 60.0);
|
||||
context.querySelector('#txtMaxDelaySpeedToSync').value = toFloat(getSetting('maxDelaySpeedToSync'), 3000.0);
|
||||
context.querySelector('#txtSpeedToSyncDuration').value = toFloat(getSetting('speedToSyncDuration'), 1000.0);
|
||||
context.querySelector('#txtMinDelaySkipToSync').value = toFloat(getSetting('minDelaySkipToSync'), 400.0);
|
||||
context.querySelector('#chkSpeedToSync').checked = toBoolean(getSetting('useSpeedToSync'), true);
|
||||
context.querySelector('#chkSkipToSync').checked = toBoolean(getSetting('useSkipToSync'), true);
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
this.save();
|
||||
dialogHelper.close(this.context);
|
||||
}
|
||||
|
||||
async save() {
|
||||
loading.show();
|
||||
await this.saveToAppSettings();
|
||||
loading.hide();
|
||||
toast(globalize.translate('SettingsSaved'));
|
||||
Events.trigger(this, 'saved');
|
||||
}
|
||||
|
||||
async saveToAppSettings() {
|
||||
const { context } = this;
|
||||
|
||||
const extraTimeOffset = context.querySelector('#txtExtraTimeOffset').value;
|
||||
const syncCorrection = context.querySelector('#chkSyncCorrection').checked;
|
||||
const minDelaySpeedToSync = context.querySelector('#txtMinDelaySpeedToSync').value;
|
||||
const maxDelaySpeedToSync = context.querySelector('#txtMaxDelaySpeedToSync').value;
|
||||
const speedToSyncDuration = context.querySelector('#txtSpeedToSyncDuration').value;
|
||||
const minDelaySkipToSync = context.querySelector('#txtMinDelaySkipToSync').value;
|
||||
const useSpeedToSync = context.querySelector('#chkSpeedToSync').checked;
|
||||
const useSkipToSync = context.querySelector('#chkSkipToSync').checked;
|
||||
|
||||
setSetting('extraTimeOffset', extraTimeOffset);
|
||||
setSetting('enableSyncCorrection', syncCorrection);
|
||||
setSetting('minDelaySpeedToSync', minDelaySpeedToSync);
|
||||
setSetting('maxDelaySpeedToSync', maxDelaySpeedToSync);
|
||||
setSetting('speedToSyncDuration', speedToSyncDuration);
|
||||
setSetting('minDelaySkipToSync', minDelaySkipToSync);
|
||||
setSetting('useSpeedToSync', useSpeedToSync);
|
||||
setSetting('useSkipToSync', useSkipToSync);
|
||||
|
||||
Events.trigger(SyncPlay.Manager, 'settings-update');
|
||||
}
|
||||
}
|
||||
|
||||
export default SettingsEditor;
|
||||
75
src/components/syncPlay/ui/settings/editor.html
Normal file
75
src/components/syncPlay/ui/settings/editor.html
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<div class="formDialogHeader">
|
||||
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1">
|
||||
<span class="material-icons arrow_back"></span>
|
||||
</button>
|
||||
<h3 class="formDialogHeaderTitle">${HeaderSyncPlaySettings}</h3>
|
||||
</div>
|
||||
<div class="formDialogContent smoothScrollY">
|
||||
<div class="dialogContentInner dialog-content-centered">
|
||||
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue