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'));
|
||||
}
|
||||
}
|
||||
|
||||
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) {
|
||||
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) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -76,8 +76,8 @@ import LibraryMenu from '../scripts/libraryMenu';
|
|||
const sortValues = instance.getSortValues();
|
||||
|
||||
if (!query.SortBy) {
|
||||
query.SortBy = sortValues.sortBy;
|
||||
query.SortOrder = sortValues.sortOrder;
|
||||
query.SortBy = sortValues.SortBy;
|
||||
query.SortOrder = sortValues.SortOrder;
|
||||
}
|
||||
|
||||
query.Fields = query.Fields ? query.Fields + ',PrimaryImageAspectRatio' : 'PrimaryImageAspectRatio';
|
||||
|
|
@ -202,7 +202,7 @@ import LibraryMenu from '../scripts/libraryMenu';
|
|||
const btnSortIcon = instance.btnSortIcon;
|
||||
|
||||
if (btnSortIcon) {
|
||||
setSortButtonIcon(btnSortIcon, values.sortOrder === 'Descending' ? 'arrow_downward' : 'arrow_upward');
|
||||
setSortButtonIcon(btnSortIcon, values.SortOrder === 'Descending' ? 'arrow_downward' : 'arrow_upward');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -963,8 +963,8 @@ class ItemsView {
|
|||
getSortValues() {
|
||||
const basekey = this.getSettingsKey();
|
||||
return {
|
||||
sortBy: userSettings.getFilter(basekey + '-sortby') || this.getDefaultSortBy(),
|
||||
sortOrder: userSettings.getFilter(basekey + '-sortorder') === 'Descending' ? 'Descending' : 'Ascending'
|
||||
SortBy: userSettings.getFilter(basekey + '-sortby') || this.getDefaultSortBy(),
|
||||
SortOrder: userSettings.getFilter(basekey + '-sortorder') === 'Descending' ? 'Descending' : 'Ascending'
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,30 +1,32 @@
|
|||
import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
|
||||
import AlphaPicker from '../../components/alphaPicker/alphaPicker';
|
||||
import { QueryI } from './interface';
|
||||
import { ViewSettingsI } from './interface';
|
||||
|
||||
interface AlphaPickerContainerProps {
|
||||
getQuery: () => QueryI;
|
||||
setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
|
||||
viewSettings: ViewSettingsI
|
||||
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
|
||||
}
|
||||
|
||||
const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ getQuery, setQuery }) => {
|
||||
const AlphaPickerContainer: FC<AlphaPickerContainerProps> = ({ viewSettings, setViewSettings }) => {
|
||||
const [ alphaPicker, setAlphaPicker ] = useState<AlphaPicker>();
|
||||
const element = useRef<HTMLDivElement>(null);
|
||||
const query = getQuery();
|
||||
|
||||
alphaPicker?.updateControls(query);
|
||||
alphaPicker?.updateControls(viewSettings);
|
||||
|
||||
const onAlphaPickerChange = useCallback((e) => {
|
||||
const newValue = (e as CustomEvent).detail.value;
|
||||
let updatedValue;
|
||||
let updatedValue: React.SetStateAction<ViewSettingsI>;
|
||||
if (newValue === '#') {
|
||||
updatedValue = {NameLessThan: 'A'};
|
||||
} else {
|
||||
updatedValue = {NameStartsWith: newValue};
|
||||
}
|
||||
|
||||
setQuery({StartIndex: 0, ...updatedValue});
|
||||
}, [setQuery]);
|
||||
setViewSettings((prevState) => ({
|
||||
...prevState,
|
||||
StartIndex: 0,
|
||||
...updatedValue
|
||||
}));
|
||||
}, [setViewSettings]);
|
||||
|
||||
useEffect(() => {
|
||||
const alphaPickerElement = element.current;
|
||||
|
|
|
|||
|
|
@ -1,27 +1,23 @@
|
|||
import React, { FC, useCallback, useEffect, useRef } from 'react';
|
||||
import IconButtonElement from '../../elements/IconButtonElement';
|
||||
import { FiltersI, QueryI } from './interface';
|
||||
import { ViewSettingsI } from './interface';
|
||||
|
||||
interface FilterProps {
|
||||
topParentId?: string | null;
|
||||
getItemTypes: () => string[];
|
||||
getFilters: () => FiltersI;
|
||||
getSettingsKey: () => string;
|
||||
getFilterMenuOptions: () => Record<string, never>;
|
||||
getVisibleFilters: () => string[];
|
||||
setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
|
||||
reloadItems: () => void;
|
||||
viewSettings: ViewSettingsI;
|
||||
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
|
||||
}
|
||||
|
||||
const Filter: FC<FilterProps> = ({
|
||||
topParentId,
|
||||
getItemTypes,
|
||||
getSettingsKey,
|
||||
getFilters,
|
||||
getVisibleFilters,
|
||||
getFilterMenuOptions,
|
||||
setQuery,
|
||||
reloadItems
|
||||
viewSettings,
|
||||
setViewSettings
|
||||
}) => {
|
||||
const element = useRef<HTMLDivElement>(null);
|
||||
|
||||
|
|
@ -29,19 +25,16 @@ const Filter: FC<FilterProps> = ({
|
|||
import('../../components/filtermenu/filtermenu').then(({default: FilterMenu}) => {
|
||||
const filterMenu = new FilterMenu();
|
||||
filterMenu.show({
|
||||
settingsKey: getSettingsKey(),
|
||||
settings: getFilters(),
|
||||
settings: viewSettings,
|
||||
visibleSettings: getVisibleFilters(),
|
||||
parentId: topParentId,
|
||||
itemTypes: getItemTypes(),
|
||||
serverId: window.ApiClient.serverId(),
|
||||
filterMenuOptions: getFilterMenuOptions()
|
||||
}).then(() => {
|
||||
setQuery({StartIndex: 0});
|
||||
reloadItems();
|
||||
filterMenuOptions: getFilterMenuOptions(),
|
||||
setfilters: setViewSettings
|
||||
});
|
||||
});
|
||||
}, [getSettingsKey, getFilters, getVisibleFilters, topParentId, getItemTypes, getFilterMenuOptions, setQuery, reloadItems]);
|
||||
}, [viewSettings, getVisibleFilters, topParentId, getItemTypes, getFilterMenuOptions, setViewSettings]);
|
||||
|
||||
useEffect(() => {
|
||||
const btnFilter = element.current?.querySelector('.btnFilter');
|
||||
|
|
|
|||
|
|
@ -1,95 +1,17 @@
|
|||
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
|
||||
import React, { FC, useCallback, useEffect, useRef } from 'react';
|
||||
import React, { FC, useEffect, useRef } from 'react';
|
||||
|
||||
import ItemsContainerElement from '../../elements/ItemsContainerElement';
|
||||
import cardBuilder from '../../components/cardbuilder/cardBuilder';
|
||||
import listview from '../../components/listview/listview';
|
||||
import globalize from '../../scripts/globalize';
|
||||
import imageLoader from '../../components/images/imageLoader';
|
||||
import '../../elements/emby-itemscontainer/emby-itemscontainer';
|
||||
import { CardOptionsI } from './interface';
|
||||
import { ViewSettingsI } from './interface';
|
||||
|
||||
interface ItemsContainerI {
|
||||
getViewSettings: () => {
|
||||
showTitle: string | boolean;
|
||||
cardLayout: string | boolean;
|
||||
showYear: string | boolean;
|
||||
imageType: string;
|
||||
viewType: string;
|
||||
};
|
||||
getContext: () => string | null;
|
||||
items?: BaseItemDto[] | null;
|
||||
noItemsMessage?: string;
|
||||
viewSettings: ViewSettingsI;
|
||||
getItemsHtml: () => string
|
||||
}
|
||||
|
||||
const ItemsContainer: FC<ItemsContainerI> = ({ getViewSettings, getContext, items = [], noItemsMessage }) => {
|
||||
const ItemsContainer: FC<ItemsContainerI> = ({ viewSettings, getItemsHtml }) => {
|
||||
const element = useRef<HTMLDivElement>(null);
|
||||
const viewsettings = getViewSettings();
|
||||
|
||||
const getCardOptions = useCallback(() => {
|
||||
let shape;
|
||||
let preferThumb;
|
||||
let preferDisc;
|
||||
let preferLogo;
|
||||
|
||||
if (viewsettings.imageType === 'banner') {
|
||||
shape = 'banner';
|
||||
} else if (viewsettings.imageType === 'disc') {
|
||||
shape = 'square';
|
||||
preferDisc = true;
|
||||
} else if (viewsettings.imageType === 'logo') {
|
||||
shape = 'backdrop';
|
||||
preferLogo = true;
|
||||
} else if (viewsettings.imageType === 'thumb') {
|
||||
shape = 'backdrop';
|
||||
preferThumb = true;
|
||||
} else {
|
||||
shape = 'autoVertical';
|
||||
}
|
||||
|
||||
const cardOptions: CardOptionsI = {
|
||||
shape: shape,
|
||||
showTitle: viewsettings.showTitle,
|
||||
showYear: viewsettings.showYear,
|
||||
cardLayout: viewsettings.cardLayout,
|
||||
centerText: true,
|
||||
context: getContext(),
|
||||
coverImage: true,
|
||||
preferThumb: preferThumb,
|
||||
preferDisc: preferDisc,
|
||||
preferLogo: preferLogo,
|
||||
overlayPlayButton: false,
|
||||
overlayMoreButton: true,
|
||||
overlayText: !viewsettings.showTitle
|
||||
};
|
||||
|
||||
cardOptions.items = items;
|
||||
|
||||
return cardOptions;
|
||||
}, [getContext, items, viewsettings.cardLayout, viewsettings.imageType, viewsettings.showTitle, viewsettings.showYear]);
|
||||
|
||||
const getItemsHtml = useCallback(() => {
|
||||
const settings = getViewSettings();
|
||||
|
||||
let html = '';
|
||||
|
||||
if (settings.imageType === 'list') {
|
||||
html = listview.getListViewHtml({
|
||||
items: items,
|
||||
context: getContext()});
|
||||
} else {
|
||||
html = cardBuilder.getCardsHtml(items, getCardOptions());
|
||||
}
|
||||
|
||||
if (!items?.length) {
|
||||
html += '<div class="noItemsMessage centerMessage">';
|
||||
html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
|
||||
html += '<p>' + globalize.translate(noItemsMessage) + '</p>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
return html;
|
||||
}, [getCardOptions, getContext, getViewSettings, items, noItemsMessage]);
|
||||
|
||||
useEffect(() => {
|
||||
const itemsContainer = element.current?.querySelector('.itemsContainer') as HTMLDivElement;
|
||||
|
|
@ -97,7 +19,7 @@ const ItemsContainer: FC<ItemsContainerI> = ({ getViewSettings, getContext, item
|
|||
imageLoader.lazyChildren(itemsContainer);
|
||||
}, [getItemsHtml]);
|
||||
|
||||
const cssClass = viewsettings.imageType == 'List' ? 'vertical-list' : 'vertical-wrap';
|
||||
const cssClass = viewSettings.imageType == 'list' ? 'vertical-list' : 'vertical-wrap';
|
||||
|
||||
return (
|
||||
<div ref={element}>
|
||||
|
|
|
|||
|
|
@ -3,18 +3,18 @@ import React, { FC, useCallback, useEffect, useRef } from 'react';
|
|||
import IconButtonElement from '../../elements/IconButtonElement';
|
||||
import globalize from '../../scripts/globalize';
|
||||
import * as userSettings from '../../scripts/settings/userSettings';
|
||||
import { QueryI } from './interface';
|
||||
import { ViewSettingsI } from './interface';
|
||||
|
||||
interface PaginationProps {
|
||||
query: QueryI;
|
||||
setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
|
||||
viewSettings: ViewSettingsI;
|
||||
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
|
||||
itemsResult?: BaseItemDtoQueryResult;
|
||||
}
|
||||
|
||||
const Pagination: FC<PaginationProps> = ({ query, setQuery, itemsResult = {} }) => {
|
||||
const Pagination: FC<PaginationProps> = ({ viewSettings, setViewSettings, itemsResult = {} }) => {
|
||||
const limit = userSettings.libraryPageSize(undefined);
|
||||
const totalRecordCount = itemsResult.TotalRecordCount || 0;
|
||||
const startIndex = query.StartIndex || 0;
|
||||
const startIndex = viewSettings.StartIndex || 0;
|
||||
const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
|
||||
const showControls = limit < totalRecordCount;
|
||||
const element = useRef<HTMLDivElement>(null);
|
||||
|
|
@ -22,16 +22,22 @@ const Pagination: FC<PaginationProps> = ({ query, setQuery, itemsResult = {} })
|
|||
const onNextPageClick = useCallback(() => {
|
||||
if (limit > 0) {
|
||||
const newIndex = startIndex + limit;
|
||||
setQuery({StartIndex: newIndex});
|
||||
setViewSettings((prevState) => ({
|
||||
...prevState,
|
||||
StartIndex: newIndex
|
||||
}));
|
||||
}
|
||||
}, [limit, setQuery, startIndex]);
|
||||
}, [limit, setViewSettings, startIndex]);
|
||||
|
||||
const onPreviousPageClick = useCallback(() => {
|
||||
if (limit > 0) {
|
||||
const newIndex = Math.max(0, startIndex - limit);
|
||||
setQuery({StartIndex: newIndex});
|
||||
setViewSettings((prevState) => ({
|
||||
...prevState,
|
||||
StartIndex: newIndex
|
||||
}));
|
||||
}
|
||||
}, [limit, setQuery, startIndex]);
|
||||
}, [limit, setViewSettings, startIndex]);
|
||||
|
||||
useEffect(() => {
|
||||
const btnNextPage = element.current?.querySelector('.btnNextPage') as HTMLButtonElement;
|
||||
|
|
|
|||
|
|
@ -1,37 +1,30 @@
|
|||
import React, { FC, useCallback, useEffect, useRef } from 'react';
|
||||
import IconButtonElement from '../../elements/IconButtonElement';
|
||||
import { QueryI } from './interface';
|
||||
import { ViewSettingsI } from './interface';
|
||||
|
||||
interface SelectViewProps {
|
||||
getSettingsKey: () => string;
|
||||
getVisibleViewSettings: () => string[];
|
||||
getViewSettings: () => {
|
||||
showTitle: string | boolean;
|
||||
cardLayout: string | boolean;
|
||||
showYear: string | boolean;
|
||||
imageType: string;
|
||||
viewType: string;
|
||||
};
|
||||
setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
|
||||
reloadItems: () => void;
|
||||
viewSettings: ViewSettingsI
|
||||
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
|
||||
}
|
||||
|
||||
const SelectView: FC<SelectViewProps> = ({ setQuery, getSettingsKey, getVisibleViewSettings, getViewSettings, reloadItems }) => {
|
||||
const SelectView: FC<SelectViewProps> = ({
|
||||
getVisibleViewSettings,
|
||||
viewSettings,
|
||||
setViewSettings
|
||||
}) => {
|
||||
const element = useRef<HTMLDivElement>(null);
|
||||
|
||||
const showViewSettingsMenu = useCallback(() => {
|
||||
import('../../components/viewSettings/viewSettings').then(({default: ViewSettings}) => {
|
||||
const viewSettings = new ViewSettings();
|
||||
viewSettings.show({
|
||||
settingsKey: getSettingsKey(),
|
||||
settings: getViewSettings(),
|
||||
visibleSettings: getVisibleViewSettings()
|
||||
}).then(() => {
|
||||
setQuery({StartIndex: 0});
|
||||
reloadItems();
|
||||
const viewsettings = new ViewSettings();
|
||||
viewsettings.show({
|
||||
settings: viewSettings,
|
||||
visibleSettings: getVisibleViewSettings(),
|
||||
setviewsettings: setViewSettings
|
||||
});
|
||||
});
|
||||
}, [getSettingsKey, getViewSettings, getVisibleViewSettings, reloadItems, setQuery]);
|
||||
}, [getVisibleViewSettings, viewSettings, setViewSettings]);
|
||||
|
||||
useEffect(() => {
|
||||
const btnSelectView = element.current?.querySelector('.btnSelectView') as HTMLButtonElement;
|
||||
|
|
|
|||
|
|
@ -1,37 +1,34 @@
|
|||
import React, { FC, useCallback, useEffect, useRef } from 'react';
|
||||
import IconButtonElement from '../../elements/IconButtonElement';
|
||||
import { QueryI } from './interface';
|
||||
import { ViewSettingsI } from './interface';
|
||||
|
||||
interface SortProps {
|
||||
getSortMenuOptions: () => {
|
||||
name: string;
|
||||
value: string;
|
||||
}[]
|
||||
getSortValues: () => {
|
||||
sortBy: string;
|
||||
sortOrder: string;
|
||||
}
|
||||
getSettingsKey: () => string;
|
||||
setQuery: React.Dispatch<React.SetStateAction<QueryI>>;
|
||||
reloadItems: () => void;
|
||||
}[];
|
||||
viewSettings: ViewSettingsI
|
||||
setViewSettings: React.Dispatch<React.SetStateAction<ViewSettingsI>>;
|
||||
}
|
||||
|
||||
const Sort: FC<SortProps> = ({ getSortMenuOptions, getSortValues, getSettingsKey, setQuery, reloadItems }) => {
|
||||
const Sort: FC<SortProps> = ({
|
||||
getSortMenuOptions,
|
||||
viewSettings,
|
||||
//setSortValues,
|
||||
setViewSettings
|
||||
}) => {
|
||||
const element = useRef<HTMLDivElement>(null);
|
||||
|
||||
const showSortMenu = useCallback(() => {
|
||||
import('../../components/sortmenu/sortmenu').then(({default: SortMenu}) => {
|
||||
const sortMenu = new SortMenu();
|
||||
sortMenu.show({
|
||||
settingsKey: getSettingsKey(),
|
||||
settings: getSortValues(),
|
||||
sortOptions: getSortMenuOptions()
|
||||
}).then(() => {
|
||||
setQuery({StartIndex: 0});
|
||||
reloadItems();
|
||||
settings: viewSettings,
|
||||
sortOptions: getSortMenuOptions(),
|
||||
setSortValues: setViewSettings
|
||||
});
|
||||
});
|
||||
}, [getSettingsKey, getSortMenuOptions, getSortValues, reloadItems, setQuery]);
|
||||
}, [getSortMenuOptions, viewSettings, setViewSettings]);
|
||||
|
||||
useEffect(() => {
|
||||
const btnSort = element.current?.querySelector('.btnSort');
|
||||
|
|
|
|||
|
|
@ -12,7 +12,11 @@ import Shuffle from './Shuffle';
|
|||
import Sort from './Sort';
|
||||
import NewCollection from './NewCollection';
|
||||
import globalize from '../../scripts/globalize';
|
||||
import { QueryI } from './interface';
|
||||
import { CardOptionsI, QueryI, ViewSettingsI } from './interface';
|
||||
import ServerConnections from '../../components/ServerConnections';
|
||||
import { useLocalStorage } from '../hook/useLocalStorage';
|
||||
import listview from '../../components/listview/listview';
|
||||
import cardBuilder from '../../components/cardbuilder/cardBuilder';
|
||||
|
||||
interface ViewItemsContainerProps {
|
||||
topParentId: string | null;
|
||||
|
|
@ -25,87 +29,24 @@ interface ViewItemsContainerProps {
|
|||
getNoItemsMessage: () => string;
|
||||
}
|
||||
|
||||
const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
|
||||
topParentId,
|
||||
isBtnShuffleEnabled = false,
|
||||
isBtnFilterEnabled = true,
|
||||
isBtnNewCollectionEnabled = false,
|
||||
isAlphaPickerEnabled = true,
|
||||
getBasekey,
|
||||
getItemTypes,
|
||||
getNoItemsMessage
|
||||
}) => {
|
||||
const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
|
||||
const [ query, setQuery ] = useState<QueryI>({
|
||||
StartIndex: 0
|
||||
});
|
||||
const getDefaultSortBy = () => {
|
||||
return 'SortName';
|
||||
};
|
||||
|
||||
const element = useRef<HTMLDivElement>(null);
|
||||
|
||||
const getSettingsKey = useCallback(() => {
|
||||
return `${topParentId} - ${getBasekey()}`;
|
||||
}, [getBasekey, topParentId]);
|
||||
|
||||
const getVisibleViewSettings = useCallback(() => {
|
||||
const getVisibleViewSettings = () => {
|
||||
return [
|
||||
'showTitle',
|
||||
'showYear',
|
||||
'imageType',
|
||||
'cardLayout'
|
||||
];
|
||||
}, []);
|
||||
};
|
||||
|
||||
const getViewSettings = useCallback(() => {
|
||||
const basekey = getSettingsKey();
|
||||
return {
|
||||
showTitle: userSettings.get(basekey + '-showTitle', false) !== 'false',
|
||||
showYear: userSettings.get(basekey + '-showYear', false) !== 'false',
|
||||
imageType: userSettings.get(basekey + '-imageType', false) || 'primary',
|
||||
viewType: userSettings.get(basekey + '-viewType', false) || 'images',
|
||||
cardLayout: userSettings.get(basekey + '-cardLayout', false) !== 'false'
|
||||
};
|
||||
}, [getSettingsKey]);
|
||||
|
||||
const getDefaultSortBy = useCallback(() => {
|
||||
return 'SortName';
|
||||
}, []);
|
||||
|
||||
const getSortValues = useCallback(() => {
|
||||
const basekey = getSettingsKey();
|
||||
|
||||
return {
|
||||
sortBy: userSettings.getFilter(basekey + '-sortby') || getDefaultSortBy(),
|
||||
sortOrder: userSettings.getFilter(basekey + '-sortorder') === 'Descending' ? 'Descending' : 'Ascending'
|
||||
};
|
||||
}, [getDefaultSortBy, getSettingsKey]);
|
||||
|
||||
const getFilters = useCallback(() => {
|
||||
const basekey = getSettingsKey();
|
||||
return {
|
||||
IsPlayed: userSettings.getFilter(basekey + '-filter-IsPlayed') === 'true',
|
||||
IsUnplayed: userSettings.getFilter(basekey + '-filter-IsUnplayed') === 'true',
|
||||
IsFavorite: userSettings.getFilter(basekey + '-filter-IsFavorite') === 'true',
|
||||
IsResumable: userSettings.getFilter(basekey + '-filter-IsResumable') === 'true',
|
||||
Is4K: userSettings.getFilter(basekey + '-filter-Is4K') === 'true',
|
||||
IsHD: userSettings.getFilter(basekey + '-filter-IsHD') === 'true',
|
||||
IsSD: userSettings.getFilter(basekey + '-filter-IsSD') === 'true',
|
||||
Is3D: userSettings.getFilter(basekey + '-filter-Is3D') === 'true',
|
||||
VideoTypes: userSettings.getFilter(basekey + '-filter-VideoTypes'),
|
||||
SeriesStatus: userSettings.getFilter(basekey + '-filter-SeriesStatus'),
|
||||
HasSubtitles: userSettings.getFilter(basekey + '-filter-HasSubtitles'),
|
||||
HasTrailer: userSettings.getFilter(basekey + '-filter-HasTrailer'),
|
||||
HasSpecialFeature: userSettings.getFilter(basekey + '-filter-HasSpecialFeature'),
|
||||
HasThemeSong: userSettings.getFilter(basekey + '-filter-HasThemeSong'),
|
||||
HasThemeVideo: userSettings.getFilter(basekey + '-filter-HasThemeVideo'),
|
||||
GenreIds: userSettings.getFilter(basekey + '-filter-GenreIds')
|
||||
};
|
||||
}, [getSettingsKey]);
|
||||
|
||||
const getFilterMenuOptions = useCallback(() => {
|
||||
const getFilterMenuOptions = () => {
|
||||
return {};
|
||||
}, []);
|
||||
};
|
||||
|
||||
const getVisibleFilters = useCallback(() => {
|
||||
const getVisibleFilters = () => {
|
||||
return [
|
||||
'IsUnplayed',
|
||||
'IsPlayed',
|
||||
|
|
@ -118,132 +59,9 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
|
|||
'HasThemeSong',
|
||||
'HasThemeVideo'
|
||||
];
|
||||
}, []);
|
||||
};
|
||||
|
||||
const getQuery = useCallback(() => {
|
||||
let fields = 'BasicSyncInfo,MediaSourceCount';
|
||||
const viewsettings = getViewSettings();
|
||||
if (viewsettings.imageType === 'primary') {
|
||||
fields += ',PrimaryImageAspectRatio';
|
||||
}
|
||||
|
||||
if (viewsettings.showYear) {
|
||||
fields += ',ProductionYear';
|
||||
}
|
||||
|
||||
const options: QueryI = {
|
||||
SortBy: getSortValues().sortBy,
|
||||
SortOrder: getSortValues().sortOrder,
|
||||
IncludeItemTypes: getItemTypes().join(','),
|
||||
Recursive: true,
|
||||
Fields: fields,
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb,Disc,Logo',
|
||||
Limit: userSettings.libraryPageSize(undefined),
|
||||
StartIndex: query.StartIndex,
|
||||
NameLessThan: query.NameLessThan,
|
||||
NameStartsWith: query.NameStartsWith,
|
||||
ParentId: topParentId
|
||||
};
|
||||
|
||||
if (getBasekey() === 'favorites') {
|
||||
options.IsFavorite = true;
|
||||
}
|
||||
|
||||
return options;
|
||||
}, [getViewSettings, getSortValues, getItemTypes, query.StartIndex, query.NameLessThan, query.NameStartsWith, topParentId, getBasekey]);
|
||||
|
||||
const getQueryWithFilters = useCallback(() => {
|
||||
const query = getQuery();
|
||||
const queryFilters = [];
|
||||
let hasFilters;
|
||||
|
||||
const filters = getFilters();
|
||||
|
||||
if (filters.IsPlayed) {
|
||||
queryFilters.push('IsPlayed');
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.IsUnplayed) {
|
||||
queryFilters.push('IsUnplayed');
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.IsFavorite) {
|
||||
queryFilters.push('IsFavorite');
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.IsResumable) {
|
||||
queryFilters.push('IsResumable');
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.VideoTypes) {
|
||||
hasFilters = true;
|
||||
query.VideoTypes = filters.VideoTypes;
|
||||
}
|
||||
|
||||
if (filters.GenreIds) {
|
||||
hasFilters = true;
|
||||
query.GenreIds = filters.GenreIds;
|
||||
}
|
||||
|
||||
if (filters.Is4K) {
|
||||
query.Is4K = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.IsHD) {
|
||||
query.IsHD = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.IsSD) {
|
||||
query.IsHD = false;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.Is3D) {
|
||||
query.Is3D = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.HasSubtitles) {
|
||||
query.HasSubtitles = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.HasTrailer) {
|
||||
query.HasTrailer = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.HasSpecialFeature) {
|
||||
query.HasSpecialFeature = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.HasThemeSong) {
|
||||
query.HasThemeSong = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
if (filters.HasThemeVideo) {
|
||||
query.HasThemeVideo = true;
|
||||
hasFilters = true;
|
||||
}
|
||||
|
||||
query.Filters = queryFilters.length ? queryFilters.join(',') : null;
|
||||
|
||||
return {
|
||||
query: query,
|
||||
hasFilters: hasFilters
|
||||
};
|
||||
}, [getQuery, getFilters]);
|
||||
|
||||
const getSortMenuOptions = useCallback(() => {
|
||||
const getSortMenuOptions = () => {
|
||||
return [{
|
||||
name: globalize.translate('Name'),
|
||||
value: 'SortName,ProductionYear'
|
||||
|
|
@ -275,7 +93,59 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
|
|||
name: globalize.translate('Runtime'),
|
||||
value: 'Runtime,SortName,ProductionYear'
|
||||
}];
|
||||
}, []);
|
||||
};
|
||||
|
||||
const defaultViewSettingsValue: ViewSettingsI = {
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
imageType: 'primary',
|
||||
viewType: '',
|
||||
cardLayout: true,
|
||||
SortBy: getDefaultSortBy(),
|
||||
SortOrder: 'Ascending',
|
||||
IsPlayed: false,
|
||||
IsUnplayed: false,
|
||||
IsFavorite: false,
|
||||
IsResumable: false,
|
||||
Is4K: null,
|
||||
IsHD: null,
|
||||
IsSD: null,
|
||||
Is3D: null,
|
||||
VideoTypes: '',
|
||||
SeriesStatus: '',
|
||||
HasSubtitles: null,
|
||||
HasTrailer: null,
|
||||
HasSpecialFeature: null,
|
||||
HasThemeSong: null,
|
||||
HasThemeVideo: null,
|
||||
GenreIds: '',
|
||||
StartIndex: 0
|
||||
};
|
||||
|
||||
const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
|
||||
topParentId,
|
||||
isBtnShuffleEnabled = false,
|
||||
isBtnFilterEnabled = true,
|
||||
isBtnNewCollectionEnabled = false,
|
||||
isAlphaPickerEnabled = true,
|
||||
getBasekey,
|
||||
getItemTypes,
|
||||
getNoItemsMessage
|
||||
}) => {
|
||||
const getSettingsKey = useCallback(() => {
|
||||
return `${topParentId} - ${getBasekey()}`;
|
||||
}, [getBasekey, topParentId]);
|
||||
|
||||
const [isLoading, setisLoading] = useState(false);
|
||||
|
||||
const [viewSettings, setViewSettings] = useLocalStorage<ViewSettingsI>(
|
||||
getSettingsKey() + 'viewSettings',
|
||||
defaultViewSettingsValue
|
||||
);
|
||||
|
||||
const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
|
||||
|
||||
const element = useRef<HTMLDivElement>(null);
|
||||
|
||||
const getContext = useCallback(() => {
|
||||
const itemType = getItemTypes().join(',');
|
||||
|
|
@ -286,6 +156,151 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
|
|||
return null;
|
||||
}, [getItemTypes]);
|
||||
|
||||
const getCardOptions = useCallback(() => {
|
||||
let shape;
|
||||
let preferThumb;
|
||||
let preferDisc;
|
||||
let preferLogo;
|
||||
|
||||
if (viewSettings.imageType === 'banner') {
|
||||
shape = 'banner';
|
||||
} else if (viewSettings.imageType === 'disc') {
|
||||
shape = 'square';
|
||||
preferDisc = true;
|
||||
} else if (viewSettings.imageType === 'logo') {
|
||||
shape = 'backdrop';
|
||||
preferLogo = true;
|
||||
} else if (viewSettings.imageType === 'thumb') {
|
||||
shape = 'backdrop';
|
||||
preferThumb = true;
|
||||
} else {
|
||||
shape = 'autoVertical';
|
||||
}
|
||||
|
||||
const cardOptions: CardOptionsI = {
|
||||
shape: shape,
|
||||
showTitle: viewSettings.showTitle,
|
||||
showYear: viewSettings.showYear,
|
||||
cardLayout: viewSettings.cardLayout,
|
||||
centerText: true,
|
||||
context: getContext(),
|
||||
coverImage: true,
|
||||
preferThumb: preferThumb,
|
||||
preferDisc: preferDisc,
|
||||
preferLogo: preferLogo,
|
||||
overlayPlayButton: false,
|
||||
overlayMoreButton: true,
|
||||
overlayText: !viewSettings.showTitle
|
||||
};
|
||||
|
||||
cardOptions.items = itemsResult.Items || [];
|
||||
console.log('cardOptions', cardOptions);
|
||||
return cardOptions;
|
||||
}, [getContext, itemsResult.Items, viewSettings.cardLayout, viewSettings.imageType, viewSettings.showTitle, viewSettings.showYear]);
|
||||
|
||||
const getItemsHtml = useCallback(() => {
|
||||
let html = '';
|
||||
|
||||
if (viewSettings.imageType === 'list') {
|
||||
html = listview.getListViewHtml({
|
||||
items: itemsResult.Items || [],
|
||||
context: getContext()
|
||||
});
|
||||
} else {
|
||||
html = cardBuilder.getCardsHtml(itemsResult.Items || [], getCardOptions());
|
||||
}
|
||||
|
||||
if (!itemsResult.Items?.length) {
|
||||
html += '<div class="noItemsMessage centerMessage">';
|
||||
html += '<h1>' + globalize.translate('MessageNothingHere') + '</h1>';
|
||||
html += '<p>' + globalize.translate(getNoItemsMessage()) + '</p>';
|
||||
html += '</div>';
|
||||
}
|
||||
|
||||
return html;
|
||||
}, [getCardOptions, getContext, itemsResult.Items, getNoItemsMessage, viewSettings.imageType]);
|
||||
|
||||
const getQuery = useCallback(() => {
|
||||
let fields = 'BasicSyncInfo,MediaSourceCount';
|
||||
|
||||
if (viewSettings.imageType === 'primary') {
|
||||
fields += ',PrimaryImageAspectRatio';
|
||||
}
|
||||
|
||||
if (viewSettings.showYear) {
|
||||
fields += ',ProductionYear';
|
||||
}
|
||||
|
||||
const queryFilters: string[] = [];
|
||||
|
||||
if (viewSettings.IsPlayed) {
|
||||
queryFilters.push('IsPlayed');
|
||||
}
|
||||
|
||||
if (viewSettings.IsUnplayed) {
|
||||
queryFilters.push('IsUnplayed');
|
||||
}
|
||||
|
||||
if (viewSettings.IsFavorite) {
|
||||
queryFilters.push('IsFavorite');
|
||||
}
|
||||
|
||||
if (viewSettings.IsResumable) {
|
||||
queryFilters.push('IsResumable');
|
||||
}
|
||||
|
||||
let queryIsHD;
|
||||
|
||||
if (viewSettings.IsHD) {
|
||||
queryIsHD = true;
|
||||
}
|
||||
|
||||
if (viewSettings.IsSD) {
|
||||
queryIsHD = false;
|
||||
}
|
||||
|
||||
const options: QueryI = {
|
||||
SortBy: viewSettings.SortBy,
|
||||
SortOrder: viewSettings.SortOrder,
|
||||
IncludeItemTypes: getItemTypes().join(','),
|
||||
Recursive: true,
|
||||
Fields: fields,
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb,Disc,Logo',
|
||||
Limit: userSettings.libraryPageSize(undefined),
|
||||
IsFavorite: getBasekey() === 'favorites' ? true : null,
|
||||
VideoTypes: viewSettings.VideoTypes,
|
||||
GenreIds: viewSettings.GenreIds,
|
||||
Is4K: viewSettings.Is4K ? true : null,
|
||||
IsHD: queryIsHD,
|
||||
Is3D: viewSettings.Is3D ? true : null,
|
||||
HasSubtitles: viewSettings.HasSubtitles ? true : null,
|
||||
HasTrailer: viewSettings.HasTrailer ? true : null,
|
||||
HasSpecialFeature: viewSettings.HasSpecialFeature ? true : null,
|
||||
HasThemeSong: viewSettings.HasThemeSong ? true : null,
|
||||
HasThemeVideo: viewSettings.HasThemeVideo ? true : null,
|
||||
Filters: queryFilters.length ? queryFilters.join(',') : null,
|
||||
StartIndex: viewSettings.StartIndex,
|
||||
NameLessThan: viewSettings.NameLessThan,
|
||||
NameStartsWith: viewSettings.NameStartsWith,
|
||||
ParentId: topParentId
|
||||
};
|
||||
console.log('options', options);
|
||||
return options;
|
||||
}, [viewSettings.imageType, viewSettings.showYear, viewSettings.IsPlayed, viewSettings.IsUnplayed, viewSettings.IsFavorite, viewSettings.IsResumable, viewSettings.IsHD, viewSettings.IsSD, viewSettings.SortBy, viewSettings.SortOrder, viewSettings.VideoTypes, viewSettings.GenreIds, viewSettings.Is4K, viewSettings.Is3D, viewSettings.HasSubtitles, viewSettings.HasTrailer, viewSettings.HasSpecialFeature, viewSettings.HasThemeSong, viewSettings.HasThemeVideo, viewSettings.StartIndex, viewSettings.NameLessThan, viewSettings.NameStartsWith, getItemTypes, getBasekey, topParentId]);
|
||||
|
||||
const fetchData = useCallback(() => {
|
||||
loading.show();
|
||||
|
||||
const apiClient = ServerConnections.getApiClient(window.ApiClient.serverId());
|
||||
return apiClient.getItems(
|
||||
apiClient.getCurrentUserId(),
|
||||
{
|
||||
...getQuery()
|
||||
}
|
||||
);
|
||||
}, [getQuery]);
|
||||
|
||||
const reloadItems = useCallback(() => {
|
||||
const page = element.current;
|
||||
|
||||
|
|
@ -293,19 +308,19 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
|
|||
console.error('Unexpected null reference');
|
||||
return;
|
||||
}
|
||||
loading.show();
|
||||
const query = getQueryWithFilters().query;
|
||||
window.ApiClient.getItems(window.ApiClient.getCurrentUserId(), query).then((result) => {
|
||||
setisLoading(false);
|
||||
fetchData().then((result) => {
|
||||
setItemsResult(result);
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
loading.hide();
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
import('../../components/autoFocuser').then(({ default: autoFocuser }) => {
|
||||
autoFocuser.autoFocus(page);
|
||||
});
|
||||
loading.hide();
|
||||
setisLoading(true);
|
||||
});
|
||||
}, [getQueryWithFilters]);
|
||||
}, [fetchData]);
|
||||
|
||||
useEffect(() => {
|
||||
reloadItems();
|
||||
|
|
@ -316,37 +331,31 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
|
|||
<div className='flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x'>
|
||||
<Pagination
|
||||
itemsResult= {itemsResult}
|
||||
query={query}
|
||||
setQuery={setQuery}
|
||||
viewSettings={viewSettings}
|
||||
setViewSettings={setViewSettings}
|
||||
/>
|
||||
|
||||
{isBtnShuffleEnabled && <Shuffle itemsResult={itemsResult} topParentId={topParentId} />}
|
||||
|
||||
{<SelectView
|
||||
getSettingsKey={getSettingsKey}
|
||||
<SelectView
|
||||
getVisibleViewSettings={getVisibleViewSettings}
|
||||
getViewSettings={getViewSettings}
|
||||
setQuery={setQuery}
|
||||
reloadItems={reloadItems}
|
||||
/>}
|
||||
viewSettings={viewSettings}
|
||||
setViewSettings={setViewSettings}
|
||||
/>
|
||||
|
||||
<Sort
|
||||
getSortMenuOptions={getSortMenuOptions}
|
||||
getSortValues={getSortValues}
|
||||
getSettingsKey={getSettingsKey}
|
||||
setQuery={setQuery}
|
||||
reloadItems={reloadItems}
|
||||
viewSettings={viewSettings}
|
||||
setViewSettings={setViewSettings}
|
||||
/>
|
||||
|
||||
{isBtnFilterEnabled && <Filter
|
||||
topParentId={topParentId}
|
||||
getFilters={getFilters}
|
||||
getSettingsKey={getSettingsKey}
|
||||
getItemTypes={getItemTypes}
|
||||
getVisibleFilters={getVisibleFilters}
|
||||
getFilterMenuOptions={getFilterMenuOptions}
|
||||
setQuery={setQuery}
|
||||
reloadItems={reloadItems}
|
||||
viewSettings={viewSettings}
|
||||
setViewSettings={setViewSettings}
|
||||
/>}
|
||||
|
||||
{isBtnNewCollectionEnabled && <NewCollection />}
|
||||
|
|
@ -354,22 +363,20 @@ const ViewItemsContainer: FC<ViewItemsContainerProps> = ({
|
|||
</div>
|
||||
|
||||
{isAlphaPickerEnabled && <AlphaPickerContainer
|
||||
getQuery={getQuery}
|
||||
setQuery={setQuery}
|
||||
viewSettings={viewSettings}
|
||||
setViewSettings={setViewSettings}
|
||||
/>}
|
||||
|
||||
<ItemsContainer
|
||||
getViewSettings={getViewSettings}
|
||||
getContext={getContext}
|
||||
items={itemsResult?.Items}
|
||||
noItemsMessage={getNoItemsMessage()}
|
||||
/>
|
||||
{isLoading && <ItemsContainer
|
||||
viewSettings={viewSettings}
|
||||
getItemsHtml={getItemsHtml}
|
||||
/>}
|
||||
|
||||
<div className='flex align-items-center justify-content-center flex-wrap-wrap padded-top padded-left padded-right padded-bottom focuscontainer-x'>
|
||||
<Pagination
|
||||
itemsResult= {itemsResult}
|
||||
query={query}
|
||||
setQuery={setQuery}
|
||||
viewSettings={viewSettings}
|
||||
setViewSettings={setViewSettings}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,48 @@
|
|||
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
|
||||
|
||||
export interface QueryI {
|
||||
SortBy?: string;
|
||||
SortOrder?: string;
|
||||
export interface QueryI extends ViewSettingsI {
|
||||
IncludeItemTypes?: string;
|
||||
Recursive?: boolean;
|
||||
Fields?: string;
|
||||
Fields?: string | null;
|
||||
ImageTypeLimit?: number;
|
||||
EnableTotalRecordCount?: boolean;
|
||||
EnableImageTypes?: string;
|
||||
StartIndex?: number;
|
||||
ParentId?: string | null;
|
||||
IsFavorite?: boolean;
|
||||
IsMissing?: boolean;
|
||||
IsMissing?: boolean | null;
|
||||
Limit?:number;
|
||||
NameStartsWithOrGreater?: string;
|
||||
NameLessThan?: string;
|
||||
NameStartsWith?: string | null;
|
||||
VideoTypes?: string;
|
||||
GenreIds?: string;
|
||||
Is4K?: boolean;
|
||||
IsHD?: boolean;
|
||||
Is3D?: boolean;
|
||||
HasSubtitles?: boolean;
|
||||
HasTrailer?: boolean;
|
||||
HasSpecialFeature?: boolean;
|
||||
HasThemeSong?: boolean;
|
||||
HasThemeVideo?: boolean;
|
||||
Filters?: string | null;
|
||||
}
|
||||
|
||||
export interface FiltersI {
|
||||
IsPlayed: boolean;
|
||||
IsUnplayed: boolean;
|
||||
IsFavorite: boolean;
|
||||
IsResumable: boolean;
|
||||
Is4K: boolean;
|
||||
IsHD: boolean;
|
||||
IsSD: boolean;
|
||||
Is3D: boolean;
|
||||
VideoTypes: string;
|
||||
SeriesStatus: string;
|
||||
HasSubtitles: string;
|
||||
HasTrailer: string;
|
||||
HasSpecialFeature: string;
|
||||
HasThemeSong: string;
|
||||
HasThemeVideo: string;
|
||||
GenreIds: string;
|
||||
export interface ViewSettingsI {
|
||||
showTitle?: boolean;
|
||||
showYear?: boolean;
|
||||
imageType?: string;
|
||||
viewType?: string;
|
||||
cardLayout?: boolean;
|
||||
SortBy?: string | null;
|
||||
SortOrder?: string | null;
|
||||
IsPlayed?: boolean | null;
|
||||
IsUnplayed?: boolean | null;
|
||||
IsFavorite?: boolean | null;
|
||||
IsResumable?: boolean | null;
|
||||
Is4K?: boolean | null;
|
||||
IsHD?: boolean | null;
|
||||
IsSD?: boolean | null;
|
||||
Is3D?: boolean | null;
|
||||
VideoTypes?: string | null;
|
||||
SeriesStatus?: string | null;
|
||||
HasSubtitles?: boolean | null;
|
||||
HasTrailer?: boolean | null;
|
||||
HasSpecialFeature?: boolean | null;
|
||||
ParentIndexNumber?: boolean | null;
|
||||
HasThemeSong?: boolean | null;
|
||||
HasThemeVideo?: boolean | null;
|
||||
GenreIds?: string | null;
|
||||
NameLessThan?: string | null;
|
||||
NameStartsWith?: string | null;
|
||||
StartIndex?: number;
|
||||
}
|
||||
|
||||
export interface CardOptionsI {
|
||||
itemsContainer?: HTMLElement | null;
|
||||
parentContainer?: HTMLElement | null;
|
||||
|
|
|
|||
20
src/view/hook/useLocalStorage.tsx
Normal file
20
src/view/hook/useLocalStorage.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { useEffect, useState } from 'react';
|
||||
|
||||
export function useLocalStorage<T>(key: string, initialValue: T | (() => T)) {
|
||||
const [value, setValue] = useState<T>(() => {
|
||||
const storedValues = localStorage.getItem(key);
|
||||
if (storedValues != null) return JSON.parse(storedValues);
|
||||
|
||||
if (typeof initialValue === 'function') {
|
||||
return (initialValue as () => T)();
|
||||
} else {
|
||||
return initialValue;
|
||||
}
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem(key, JSON.stringify(value));
|
||||
}, [key, value]);
|
||||
|
||||
return [value, setValue] as [typeof value, typeof setValue];
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue