mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
use single state and local storage
This commit is contained in:
grafixeyehero
parent
f40c565e4a
commit
6341a71fec
15 changed files with 485 additions and 508 deletions
|
|
@ -102,15 +102,8 @@ function onInputCommand(e) {
|
|||
break;
|
||||
}
|
||||
}
|
||||
function saveValues(context, settings, settingsKey) {
|
||||
function saveValues(context, settings, settingsKey, setfilters) {
|
||||
let elems = context.querySelectorAll('.simpleFilter');
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
if (elems[i].tagName === 'INPUT') {
|
||||
setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);
|
||||
} else {
|
||||
setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
|
||||
}
|
||||
}
|
||||
|
||||
// Video type
|
||||
const videoTypes = [];
|
||||
|
|
@ -121,7 +114,6 @@ function saveValues(context, settings, settingsKey) {
|
|||
videoTypes.push(elems[i].getAttribute('data-filter'));
|
||||
}
|
||||
}
|
||||
userSettings.setFilter(settingsKey + '-filter-VideoTypes', videoTypes.join(','));
|
||||
|
||||
// Series status
|
||||
const seriesStatuses = [];
|
||||
|
|
@ -132,7 +124,6 @@ function saveValues(context, settings, settingsKey) {
|
|||
seriesStatuses.push(elems[i].getAttribute('data-filter'));
|
||||
}
|
||||
}
|
||||
userSettings.setFilter(`${settingsKey}-filter-SeriesStatus`, seriesStatuses.join(','));
|
||||
|
||||
// Genres
|
||||
const genres = [];
|
||||
|
|
@ -143,7 +134,39 @@ function saveValues(context, settings, settingsKey) {
|
|||
genres.push(elems[i].getAttribute('data-filter'));
|
||||
}
|
||||
}
|
||||
userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
|
||||
|
||||
if (setfilters) {
|
||||
setfilters((prevState) => ({
|
||||
...prevState,
|
||||
StartIndex: 0,
|
||||
IsPlayed: context.querySelector('.chkPlayed').checked,
|
||||
IsUnplayed: context.querySelector('.chkUnplayed').checked,
|
||||
IsFavorite: context.querySelector('.chkFavorite').checked,
|
||||
IsResumable: context.querySelector('.chkResumable').checked,
|
||||
Is4K: context.querySelector('.chk4KFilter').checked,
|
||||
IsHD: context.querySelector('.chkHDFilter').checked,
|
||||
IsSD: context.querySelector('.chkSDFilter').checked,
|
||||
Is3D: context.querySelector('.chk3DFilter').checked,
|
||||
VideoTypes: videoTypes.join(','),
|
||||
SeriesStatus: seriesStatuses.join(','),
|
||||
HasSubtitles: context.querySelector('.chkSubtitle').checked,
|
||||
HasTrailer: context.querySelector('.chkTrailer').checked,
|
||||
HasSpecialFeature: context.querySelector('.chkSpecialFeature').checked,
|
||||
HasThemeSong: context.querySelector('.chkThemeSong').checked,
|
||||
HasThemeVideo: context.querySelector('.chkThemeVideo').checked,
|
||||
GenreIds: genres.join(',')
|
||||
}));
|
||||
} else {
|
||||
for (let i = 0, length = elems.length; i < length; i++) {
|
||||
if (elems[i].tagName === 'INPUT') {
|
||||
setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i]);
|
||||
} else {
|
||||
setBasicFilter(context, settingsKey + '-filter-' + elems[i].getAttribute('data-settingname'), elems[i].querySelector('input'));
|
||||
}
|
||||
}
|
||||
|
||||
userSettings.setFilter(settingsKey + '-filter-GenreIds', genres.join(','));
|
||||
}
|
||||
}
|
||||
function bindCheckboxInput(context, on) {
|
||||
const elems = context.querySelectorAll('.checkboxList-verticalwrap');
|
||||
|
|
@ -275,7 +298,7 @@ class FilterMenu {
|
|||
|
||||
if (submitted) {
|
||||
//if (!options.onChange) {
|
||||
saveValues(dlg, options.settings, options.settingsKey);
|
||||
saveValues(dlg, options.settings, options.settingsKey, options.setfilters);
|
||||
return resolve();
|
||||
//}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,19 +5,19 @@
|
|||
<div class="verticalSection verticalSection-extrabottompadding basicFilterSection focuscontainer-x" style="margin-top:2em;">
|
||||
<div class="checkboxList checkboxList-verticalwrap">
|
||||
<label class="viewSetting simpleFilter" data-settingname="IsUnplayed">
|
||||
<input type="checkbox" is="emby-checkbox" />
|
||||
<input type="checkbox" is="emby-checkbox" class="chkUnplayed" />
|
||||
<span>${Unplayed}</span>
|
||||
</label>
|
||||
<label class="viewSetting simpleFilter" data-settingname="IsPlayed">
|
||||
<input type="checkbox" is="emby-checkbox" />
|
||||
<input type="checkbox" is="emby-checkbox" class="chkPlayed" />
|
||||
<span>${Played}</span>
|
||||
</label>
|
||||
<label class="viewSetting simpleFilter" data-settingname="IsFavorite">
|
||||
<input type="checkbox" is="emby-checkbox" />
|
||||
<input type="checkbox" is="emby-checkbox" class="chkFavorite" />
|
||||
<span>${Favorite}</span>
|
||||
</label>
|
||||
<label class="viewSetting simpleFilter" data-settingname="IsResumable">
|
||||
<input type="checkbox" is="emby-checkbox" />
|
||||
<input type="checkbox" is="emby-checkbox" class="chkResumable" />
|
||||
<span>${ContinueWatching}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -49,22 +49,22 @@
|
|||
<div class="checkboxList checkboxList-verticalwrap">
|
||||
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="simpleFilter" data-settingname="IsHD" />
|
||||
<input type="checkbox" is="emby-checkbox" class="simpleFilter chkHDFilter" data-settingname="IsHD" />
|
||||
<span>HD</span>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="simpleFilter" data-settingname="Is4K" />
|
||||
<input type="checkbox" is="emby-checkbox" class="simpleFilter chk4KFilter" data-settingname="Is4K" />
|
||||
<span>4K</span>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="simpleFilter" data-settingname="IsSD" />
|
||||
<input type="checkbox" is="emby-checkbox" class="simpleFilter chkSDFilter" data-settingname="IsSD" />
|
||||
<span>SD</span>
|
||||
</label>
|
||||
|
||||
<label>
|
||||
<input type="checkbox" is="emby-checkbox" class="simpleFilter" data-settingname="Is3D" />
|
||||
<input type="checkbox" is="emby-checkbox" class="simpleFilter chk3DFilter" data-settingname="Is3D" />
|
||||
<span>3D</span>
|
||||
</label>
|
||||
<label>
|
||||
|
|
@ -82,23 +82,23 @@
|
|||
<h2 class="checkboxListLabel">${Features}</h2>
|
||||
<div class="checkboxList checkboxList-verticalwrap">
|
||||
<label class="viewSetting simpleFilter" data-settingname="HasSubtitles">
|
||||
<input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" />
|
||||
<input type="checkbox" is="emby-checkbox" class="chkFeatureFilter chkSubtitle" />
|
||||
<span>${Subtitles}</span>
|
||||
</label>
|
||||
<label class="viewSetting simpleFilter" data-settingname="HasTrailer">
|
||||
<input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" />
|
||||
<input type="checkbox" is="emby-checkbox" class="chkFeatureFilter chkTrailer" />
|
||||
<span>${Trailers}</span>
|
||||
</label>
|
||||
<label class="viewSetting simpleFilter" data-settingname="HasSpecialFeature">
|
||||
<input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" />
|
||||
<input type="checkbox" is="emby-checkbox" class="chkFeatureFilter chkSpecialFeature" />
|
||||
<span>${Extras}</span>
|
||||
</label>
|
||||
<label class="viewSetting simpleFilter" data-settingname="HasThemeSong">
|
||||
<input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" />
|
||||
<input type="checkbox" is="emby-checkbox" class="chkFeatureFilter chkThemeSong" />
|
||||
<span>${ThemeSongs}</span>
|
||||
</label>
|
||||
<label class="viewSetting simpleFilter" data-settingname="HasThemeVideo">
|
||||
<input type="checkbox" is="emby-checkbox" class="chkFeatureFilter" />
|
||||
<input type="checkbox" is="emby-checkbox" class="chkFeatureFilter chkThemeVideo" />
|
||||
<span>${ThemeVideos}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@ function onSubmit(e) {
|
|||
function initEditor(context, settings) {
|
||||
context.querySelector('form').addEventListener('submit', onSubmit);
|
||||
|
||||
context.querySelector('.selectSortOrder').value = settings.sortOrder;
|
||||
context.querySelector('.selectSortBy').value = settings.sortBy;
|
||||
context.querySelector('.selectSortOrder').value = settings.SortOrder;
|
||||
context.querySelector('.selectSortBy').value = settings.SortBy;
|
||||
}
|
||||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
|
|
@ -37,9 +37,18 @@ function fillSortBy(context, options) {
|
|||
}).join('');
|
||||
}
|
||||
|
||||
function saveValues(context, settingsKey) {
|
||||
userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
|
||||
userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
|
||||
function saveValues(context, settingsKey, setSortValues) {
|
||||
if (setSortValues) {
|
||||
setSortValues((prevState) => ({
|
||||
...prevState,
|
||||
StartIndex: 0,
|
||||
SortBy: context.querySelector('.selectSortBy').value,
|
||||
SortOrder: context.querySelector('.selectSortOrder').value
|
||||
}));
|
||||
} else {
|
||||
userSettings.setFilter(settingsKey + '-sortorder', context.querySelector('.selectSortOrder').value);
|
||||
userSettings.setFilter(settingsKey + '-sortby', context.querySelector('.selectSortBy').value);
|
||||
}
|
||||
}
|
||||
|
||||
class SortMenu {
|
||||
|
|
@ -95,7 +104,7 @@ class SortMenu {
|
|||
}
|
||||
|
||||
if (submitted) {
|
||||
saveValues(dlg, options.settingsKey);
|
||||
saveValues(dlg, options.settingsKey, options.setSortValues);
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -29,13 +29,24 @@ function initEditor(context, settings) {
|
|||
context.querySelector('.selectImageType').value = settings.imageType || 'primary';
|
||||
}
|
||||
|
||||
function saveValues(context, settings, settingsKey) {
|
||||
const elems = context.querySelectorAll('.viewSetting-checkboxContainer');
|
||||
for (const elem of elems) {
|
||||
userSettings.set(settingsKey + '-' + elem.getAttribute('data-settingname'), elem.querySelector('input').checked);
|
||||
}
|
||||
function saveValues(context, settings, settingsKey, setviewsettings) {
|
||||
if (setviewsettings) {
|
||||
setviewsettings((prevState) => ({
|
||||
...prevState,
|
||||
StartIndex: 0,
|
||||
imageType: context.querySelector('.selectImageType').value,
|
||||
showTitle: context.querySelector('.chkShowTitle').checked || false,
|
||||
showYear: context.querySelector('.chkShowYear').checked || false,
|
||||
cardLayout: context.querySelector('.chkEnableCardLayout').checked || false
|
||||
}));
|
||||
} else {
|
||||
const elems = context.querySelectorAll('.viewSetting-checkboxContainer');
|
||||
for (const elem of elems) {
|
||||
userSettings.set(settingsKey + '-' + elem.getAttribute('data-settingname'), elem.querySelector('input').checked);
|
||||
}
|
||||
|
||||
userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value);
|
||||
userSettings.set(settingsKey + '-imageType', context.querySelector('.selectImageType').value);
|
||||
}
|
||||
}
|
||||
|
||||
function centerFocus(elem, horiz, on) {
|
||||
|
|
@ -126,7 +137,7 @@ class ViewSettings {
|
|||
}
|
||||
|
||||
if (submitted) {
|
||||
saveValues(dlg, options.settings, options.settingsKey);
|
||||
saveValues(dlg, options.settings, options.settingsKey, options.setviewsettings);
|
||||
return resolve();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,28 +17,28 @@
|
|||
|
||||
<div class="checkboxContainer viewSetting viewSetting-checkboxContainer hide chkTitleContainer" data-settingname="showTitle">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" />
|
||||
<input is="emby-checkbox" type="checkbox" class="chkShowTitle" />
|
||||
<span>${ShowTitle}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="checkboxContainer viewSetting viewSetting-checkboxContainer hide chkYearContainer" data-settingname="showYear">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" />
|
||||
<input is="emby-checkbox" type="checkbox" class="chkShowYear" />
|
||||
<span>${ShowYear}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="checkboxContainer viewSetting viewSetting-checkboxContainer hide" data-settingname="groupBySeries">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" />
|
||||
<input is="emby-checkbox" type="checkbox" class="chkGroupBySeries" />
|
||||
<span>${GroupBySeries}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="checkboxContainer viewSetting viewSetting-checkboxContainer hide chkCardLayoutContainer" data-settingname="cardLayout">
|
||||
<label>
|
||||
<input is="emby-checkbox" type="checkbox" />
|
||||
<input is="emby-checkbox" type="checkbox" class="chkEnableCardLayout" />
|
||||
<span>${EnableCardLayout}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue