milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

use viewSettings instead of libraryBrowser.showLayoutMenu

Browse source
This commit is contained in:
grafixeyehero 2022-10-05 02:44:28 +03:00
parent 0dc9ad8904
commit 1ac97c878a
15 changed files with 287 additions and 168 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/viewSettings/viewSettings.js
View file

@ -57,7 +57,7 @@ function showIfAllowed(context, selector, visible) {
class ViewSettings {
show(options) {
return new Promise(function (resolve, reject) {
return new Promise(function (resolve) {
const dialogOptions = {
removeOnClose: true,
scrollY: false
@ -99,8 +99,9 @@ class ViewSettings {
initEditor(dlg, options.settings);
dlg.querySelector('.selectImageType').addEventListener('change', function () {
showIfAllowed(dlg, '.chkTitleContainer', this.value !== 'list');
showIfAllowed(dlg, '.chkYearContainer', this.value !== 'list');
showIfAllowed(dlg, '.chkTitleContainer', this.value !== 'list' && this.value !== 'banner');
showIfAllowed(dlg, '.chkYearContainer', this.value !== 'list' && this.value !== 'banner');
showIfAllowed(dlg, '.chkCardLayoutContainer', this.value !== 'list' && this.value !== 'banner');
});
dlg.querySelector('.btnCancel').addEventListener('click', function () {
@ -126,11 +127,10 @@ class ViewSettings {
if (submitted) {
saveValues(dlg, options.settings, options.settingsKey);
resolve();
return;
return resolve();
}
reject();
return resolve();
});
});
}

7
src/components/viewSettings/viewSettings.template.html
View file

@ -35,6 +35,13 @@
<span>${GroupBySeries}</span>
</label>
</div>
<div class="checkboxContainer viewSetting viewSetting-checkboxContainer hide chkCardLayoutContainer" data-settingname="cardLayout">
<label>
<input is="emby-checkbox" type="checkbox" />
<span>${EnableCardLayout}</span>
</label>
</div>
</div>
</form>
</div>

1
src/strings/en-us.json
View file

@ -236,6 +236,7 @@
"EnableNextVideoInfoOverlayHelp": "At the end of a video, display info about the next video coming up in the current playlist.",
"EnablePhotos": "Display the photos",
"EnablePhotosHelp": "Images will be detected and displayed alongside other media files.",
"EnableCardLayout": "Display visual CardBox",
"EnableRewatchingNextUp": "Enable Rewatching in Next Up",
"EnableRewatchingNextUpHelp": "Enable showing already watched episodes in 'Next Up' sections.",
"EnableQuickConnect": "Enable Quick Connect on this server",

39
src/view/components/AlphaPickerContainer.tsx
View file

@ -1,33 +1,34 @@
import React, { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import AlphaPicker from '../../components/alphaPicker/alphaPicker';
import { IQuery } from './type';
import { AlphaPickerValueI, QueryI } from './interface';
type AlphaPickerProps = {
query: IQuery;
reloadItems: () => void;
};
interface AlphaPickerContainerI {
getQuery: () => QueryI
setAlphaPickerValue: React.Dispatch<AlphaPickerValueI>;
setStartIndex: React.Dispatch<React.SetStateAction<number>>;
}
const AlphaPickerContainer: FunctionComponent<AlphaPickerProps> = ({ query, reloadItems }: AlphaPickerProps) => {
const AlphaPickerContainer: FC<AlphaPickerContainerI> = ({ getQuery, setAlphaPickerValue, setStartIndex }) => {
const [ alphaPicker, setAlphaPicker ] = useState<AlphaPicker>();
const element = useRef<HTMLDivElement>(null);
const query = getQuery();
alphaPicker?.updateControls(query);
const onAlphaPickerChange = useCallback((e) => {
const newValue = (e as CustomEvent).detail.value;
let updatedValue;
if (newValue === '#') {
query.NameLessThan = 'A';
delete query.NameStartsWith;
updatedValue = {NameLessThan: 'A'};
} else {
query.NameStartsWith = newValue;
delete query.NameLessThan;
updatedValue = {NameStartsWith: newValue};
}
query.StartIndex = 0;
reloadItems();
}, [query, reloadItems]);
setAlphaPickerValue(updatedValue);
setStartIndex(0);
}, [setStartIndex, setAlphaPickerValue]);
useEffect(() => {
const alphaPickerElement = element.current?.querySelector('.alphaPicker');
const alphaPickerElement = element.current;
setAlphaPicker(new AlphaPicker({
element: alphaPickerElement,
@ -37,12 +38,14 @@ const AlphaPickerContainer: FunctionComponent<AlphaPickerProps> = ({ query, relo
if (alphaPickerElement) {
alphaPickerElement.addEventListener('alphavaluechanged', onAlphaPickerChange);
}
return () => {
alphaPickerElement?.removeEventListener('alphavaluechanged', onAlphaPickerChange);
};
}, [onAlphaPickerChange]);
return (
<div ref={element}>
<div className='alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical alphabetPicker-right' />
</div>
<div ref={element} className='alphaPicker alphaPicker-fixed alphaPicker-fixed-right alphaPicker-vertical alphabetPicker-right' />
);
};

2
src/view/components/GenresItemsContainer.tsx
View file

@ -1,7 +1,7 @@
import '../../elements/emby-button/emby-button';
import '../../elements/emby-itemscontainer/emby-itemscontainer';
import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client';
import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
import escapeHTML from 'escape-html';
import React, { FC, useCallback, useEffect, useRef } from 'react';

138
src/view/components/ItemsContainer.tsx
View file

@ -1,5 +1,5 @@
import { BaseItemDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
import React, { FC, useEffect, useRef } from 'react';
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback, useEffect, useRef } from 'react';
import ItemsContainerElement from '../../elements/ItemsContainerElement';
import cardBuilder from '../../components/cardbuilder/cardBuilder';
@ -7,82 +7,78 @@ import listview from '../../components/listview/listview';
import globalize from '../../scripts/globalize';
import imageLoader from '../../components/images/imageLoader';
import '../../elements/emby-itemscontainer/emby-itemscontainer';
import { QueryI } from './interface';
import { CardOptionsI } from './interface';
interface ItemsContainerI {
getCurrentViewStyle: () => string;
query: QueryI;
getViewSettings: () => {
showTitle: string | boolean;
cardLayout: string | boolean;
showYear: string | boolean;
imageType: string;
viewType: string;
};
getContext: () => string | null;
items?: BaseItemDto[] | null;
noItemsMessage?: string;
}
const ItemsContainer: FC<ItemsContainerI> = ({ getCurrentViewStyle, query, getContext, items = [], noItemsMessage }) => {
const ItemsContainer: FC<ItemsContainerI> = ({ getViewSettings, getContext, items = [], noItemsMessage }) => {
const element = useRef<HTMLDivElement>(null);
const viewStyle = getCurrentViewStyle();
const viewsettings = getViewSettings();
useEffect(() => {
let html;
const getCardOptions = useCallback(() => {
let shape;
let preferThumb;
let preferDisc;
let preferLogo;
if (viewStyle == 'Thumb') {
html = cardBuilder.getCardsHtml(items, {
items: items,
shape: 'backdrop',
preferThumb: true,
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.showTitle,
cardLayout: viewsettings.cardLayout,
centerText: true,
context: getContext(),
lazy: true,
overlayPlayButton: true,
showTitle: true,
showYear: true,
centerText: true
});
} else if (viewStyle == 'ThumbCard') {
html = cardBuilder.getCardsHtml(items, {
items: items,
shape: 'backdrop',
preferThumb: true,
context: getContext(),
lazy: true,
cardLayout: true,
showTitle: true,
showYear: true,
centerText: true
});
} else if (viewStyle == 'Banner') {
html = cardBuilder.getCardsHtml(items, {
items: items,
shape: 'banner',
preferBanner: true,
context: getContext(),
lazy: true
});
} else if (viewStyle == 'List') {
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]);
const getItemsHtml = useCallback(() => {
const settings = getViewSettings();
let html = '';
if (settings.imageType === 'list') {
html = listview.getListViewHtml({
items: items,
context: getContext(),
sortBy: query.SortBy
});
} else if (viewStyle == 'PosterCard') {
html = cardBuilder.getCardsHtml(items, {
items: items,
shape: 'portrait',
context: getContext(),
showTitle: true,
showYear: true,
centerText: true,
lazy: true,
cardLayout: true
});
context: getContext()});
} else {
html = cardBuilder.getCardsHtml(items, {
items: items,
shape: 'portrait',
context: getContext(),
overlayPlayButton: true,
showTitle: true,
showYear: true,
centerText: true
});
html = cardBuilder.getCardsHtml(items, getCardOptions());
}
if (!items?.length) {
@ -94,12 +90,16 @@ const ItemsContainer: FC<ItemsContainerI> = ({ getCurrentViewStyle, query, getCo
html += '</div>';
}
const itemsContainer = element.current?.querySelector('.itemsContainer') as HTMLDivElement;
itemsContainer.innerHTML = html;
imageLoader.lazyChildren(itemsContainer);
}, [query.SortBy, items, noItemsMessage, viewStyle, getContext]);
return html;
}, [getCardOptions, getContext, getViewSettings, items, noItemsMessage]);
const cssClass = viewStyle == 'List' ? 'vertical-list' : 'vertical-wrap';
useEffect(() => {
const itemsContainer = element.current?.querySelector('.itemsContainer') as HTMLDivElement;
itemsContainer.innerHTML = getItemsHtml();
imageLoader.lazyChildren(itemsContainer);
}, [getItemsHtml]);
const cssClass = viewsettings.imageType == 'List' ? 'vertical-list' : 'vertical-wrap';
return (
<div ref={element}>

34
src/view/components/Pagination.tsx
View file

@ -1,36 +1,35 @@
import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client';
import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback, useEffect, useRef } from 'react';
import IconButtonElement from '../../elements/IconButtonElement';
import globalize from '../../scripts/globalize';
import { QueryI } from './interface';
import * as userSettings from '../../scripts/settings/userSettings';
interface PaginationI {
query: QueryI;
startIndex: number
setStartIndex: React.Dispatch<React.SetStateAction<number>>;
itemsResult?: BaseItemDtoQueryResult;
reloadItems: () => void;
}
const Pagination: FC<PaginationI> = ({ query, itemsResult = {}, reloadItems }) => {
const startIndex = query.StartIndex;
const limit = query.Limit;
const Pagination: FC<PaginationI> = ({ startIndex, setStartIndex, itemsResult = {} }) => {
const limit = userSettings.libraryPageSize(undefined);
const totalRecordCount = itemsResult.TotalRecordCount || 0;
const recordsEnd = Math.min(startIndex + limit, totalRecordCount);
const showControls = limit < totalRecordCount;
const element = useRef<HTMLDivElement>(null);
const onNextPageClick = useCallback(() => {
if (query.Limit > 0) {
query.StartIndex += query.Limit;
if (limit > 0) {
const newIndex = startIndex + limit;
setStartIndex(newIndex);
}
reloadItems();
}, [query, reloadItems]);
}, [limit, setStartIndex, startIndex]);
const onPreviousPageClick = useCallback(() => {
if (query.Limit > 0) {
query.StartIndex = Math.max(0, query.StartIndex - query.Limit);
if (limit > 0) {
const newIndex = Math.max(0, startIndex - limit);
setStartIndex(newIndex);
}
reloadItems();
}, [query, reloadItems]);
}, [limit, setStartIndex, startIndex]);
useEffect(() => {
const btnNextPage = element.current?.querySelector('.btnNextPage') as HTMLButtonElement;
@ -52,6 +51,11 @@ const Pagination: FC<PaginationI> = ({ query, itemsResult = {}, reloadItems }) =
}
btnPreviousPage.addEventListener('click', onPreviousPageClick);
}
return () => {
btnNextPage?.removeEventListener('click', onNextPageClick);
btnPreviousPage?.removeEventListener('click', onPreviousPageClick);
};
}, [totalRecordCount, onNextPageClick, onPreviousPageClick, limit, startIndex]);
return (

2
src/view/components/RecommendationContainer.tsx
View file

@ -1,4 +1,4 @@
import { RecommendationDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
import type { RecommendationDto } from '@jellyfin/sdk/lib/generated-client';
import React, { FC } from 'react';
import globalize from '../../scripts/globalize';

2
src/view/components/SectionContainer.tsx
View file

@ -1,6 +1,6 @@
import '../../elements/emby-itemscontainer/emby-itemscontainer';
import { BaseItemDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useEffect, useRef } from 'react';
import cardBuilder from '../../components/cardbuilder/cardBuilder';

49
src/view/components/SelectView.tsx
View file

@ -1,32 +1,43 @@
import React, { FC, useEffect, useRef } from 'react';
import React, { FC, useCallback, useEffect, useRef } from 'react';
import IconButtonElement from '../../elements/IconButtonElement';
import libraryBrowser from '../../scripts/libraryBrowser';
import * as userSettings from '../../scripts/settings/userSettings';
import { QueryI } from './interface';
interface SelectViewI {
getCurrentViewStyle: () => string;
query: QueryI;
getViewSettings: () => string;
getSettingsKey: () => string;
getVisibleViewSettings: () => string[];
getViewSettings: () => {
showTitle: string | boolean;
cardLayout: string | boolean;
showYear: string | boolean;
imageType: string;
viewType: string;
};
reloadItems: () => void;
}
const SelectView: FC<SelectViewI> = ({ getCurrentViewStyle, getViewSettings, query, reloadItems }) => {
const SelectView: FC<SelectViewI> = ({ getSettingsKey, getVisibleViewSettings, getViewSettings, reloadItems }) => {
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(() => {
reloadItems();
});
});
}, [getSettingsKey, getViewSettings, getVisibleViewSettings, reloadItems]);
useEffect(() => {
const btnSelectView = element.current?.querySelector('.btnSelectView') as HTMLButtonElement;
btnSelectView.addEventListener('click', (e) => {
libraryBrowser.showLayoutMenu(e.target, getCurrentViewStyle(), 'Banner,List,Poster,PosterCard,Thumb,ThumbCard'.split(','));
});
btnSelectView.addEventListener('layoutchange', (e) => {
const viewStyle = (e as CustomEvent).detail.viewStyle;
userSettings.set(getViewSettings(), viewStyle, false);
query.StartIndex = 0;
reloadItems();
});
}, [getCurrentViewStyle, query, reloadItems, getViewSettings]);
btnSelectView?.addEventListener('click', showViewSettingsMenu);
return () => {
btnSelectView?.removeEventListener('click', showViewSettingsMenu);
};
}, [showViewSettingsMenu]);
return (
<div ref={element}>

2
src/view/components/Shuffle.tsx
View file

@ -1,4 +1,4 @@
import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client';
import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback, useEffect, useRef } from 'react';
import { playbackManager } from '../../components/playback/playbackmanager';

92
src/view/components/ViewItemsContainer.tsx
View file

@ -1,5 +1,5 @@
import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client';
import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import loading from '../../components/loading/loading';
import * as userSettings from '../../scripts/settings/userSettings';
@ -10,9 +10,10 @@ import Pagination from './Pagination';
import SelectView from './SelectView';
import Shuffle from './Shuffle';
import Sort from './Sort';
import { QueryI } from './interface';
import NewCollection from './NewCollection';
import globalize from '../../scripts/globalize';
import layoutManager from '../../components/layoutManager';
import { AlphaPickerValueI, QueryI } from './interface';
interface ViewItemsContainerI {
topParentId: string | null;
@ -36,15 +37,37 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
getNoItemsMessage
}) => {
const [ itemsResult, setItemsResult ] = useState<BaseItemDtoQueryResult>({});
const [ startIndex, setStartIndex ] = useState<number>(0);
const [ alphaPickerValue, setAlphaPickerValue ] = useState<AlphaPickerValueI>({});
const element = useRef<HTMLDivElement>(null);
const queryAlphaPickerValue = useMemo(() => ({
...alphaPickerValue
}), [alphaPickerValue]);
const getSettingsKey = useCallback(() => {
return `${topParentId} - ${getBasekey()}`;
}, [getBasekey, topParentId]);
const getVisibleViewSettings = useCallback(() => {
return [
'showTitle',
'showYear',
'imageType',
'cardLayout'
];
}, []);
const getViewSettings = useCallback(() => {
return `${getSettingsKey()} -view`;
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(() => {
@ -102,16 +125,26 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
}, []);
const getQuery = useCallback(() => {
let fields = 'BasicSyncInfo,MediaSourceCount';
const viewsettings = getViewSettings();
if (viewsettings.imageType === 'primary') {
fields += ',PrimaryImageAspectRatio';
}
if (viewsettings.showYear) {
fields += ',ProductionYear';
}
const query: QueryI = {
SortBy: getSortValues().sortBy,
SortOrder: getSortValues().sortOrder,
IncludeItemTypes: getItemTypes().join(','),
Recursive: true,
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
Fields: fields,
ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb,Disc,Logo',
Limit: userSettings.libraryPageSize(undefined),
StartIndex: 0,
StartIndex: startIndex,
ParentId: topParentId
};
@ -119,13 +152,13 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
query.IsFavorite = true;
}
userSettings.loadQuerySettings(getSettingsKey(), query);
return query;
}, [getSortValues, getItemTypes, topParentId, getBasekey, getSettingsKey]);
const queryInfo: QueryI = Object.assign(query, queryAlphaPickerValue || {});
return queryInfo;
}, [getViewSettings, getSortValues, getItemTypes, startIndex, topParentId, getBasekey, queryAlphaPickerValue]);
const getQueryWithFilters = useCallback(() => {
const query = getQuery();
const queryFilters = [];
let hasFilters;
@ -248,10 +281,6 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
}];
}, []);
const getCurrentViewStyle = useCallback(() => {
return userSettings.get(getViewSettings(), false) || 'Poster';
}, [getViewSettings]);
const getContext = useCallback(() => {
const itemType = getItemTypes().join(',');
if (itemType === 'Movie' || itemType === 'BoxSet') {
@ -269,8 +298,8 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
return;
}
loading.show();
const querywithfilters = getQueryWithFilters().query;
window.ApiClient.getItems(window.ApiClient.getCurrentUserId(), querywithfilters).then((result) => {
const query = getQueryWithFilters().query;
window.ApiClient.getItems(window.ApiClient.getCurrentUserId(), query).then((result) => {
setItemsResult(result);
window.scrollTo(0, 0);
@ -289,10 +318,20 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
return (
<div ref={element}>
<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={getQuery()} reloadItems={reloadItems} />
<Pagination
itemsResult= {itemsResult}
startIndex={startIndex}
setStartIndex={setStartIndex}
/>
{isBtnShuffleEnabled && <Shuffle itemsResult={itemsResult} topParentId={topParentId} />}
<SelectView getCurrentViewStyle={getCurrentViewStyle} getViewSettings={getViewSettings} query={getQuery()} reloadItems={reloadItems} />
{<SelectView
getSettingsKey={getSettingsKey}
getVisibleViewSettings={getVisibleViewSettings}
getViewSettings={getViewSettings}
reloadItems={reloadItems}
/>}
<Sort
getSortMenuOptions={getSortMenuOptions}
@ -315,18 +354,25 @@ const ViewItemsContainer: FC<ViewItemsContainerI> = ({
</div>
{isAlphaPickerEnabled && <AlphaPickerContainer query={getQuery()} reloadItems={reloadItems} />}
{isAlphaPickerEnabled && <AlphaPickerContainer
getQuery={getQuery}
setAlphaPickerValue={setAlphaPickerValue}
setStartIndex={setStartIndex}
/>}
<ItemsContainer
getCurrentViewStyle={getCurrentViewStyle}
query={getQuery()}
getViewSettings={getViewSettings}
getContext={getContext}
items={itemsResult?.Items}
noItemsMessage={getNoItemsMessage()}
/>
<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={getQuery()} reloadItems={reloadItems} />
<Pagination
itemsResult= {itemsResult}
startIndex={startIndex}
setStartIndex={setStartIndex}
/>
</div>
</div>
);

65
src/view/components/interface.ts
View file

@ -1,3 +1,9 @@
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
export interface AlphaPickerValueI {
NameLessThan?: string;
NameStartsWith?: string | null;
}
export interface QueryI {
SortBy?: string;
SortOrder?: string;
@ -7,14 +13,14 @@ export interface QueryI {
ImageTypeLimit?: number;
EnableTotalRecordCount?: boolean;
EnableImageTypes?: string;
StartIndex: number;
StartIndex?: number;
ParentId?: string | null;
IsFavorite?: boolean;
IsMissing?: boolean;
Limit:number;
NameStartsWithOrGreater?: string;
NameLessThan?: string;
NameStartsWith?: string;
NameStartsWith?: string | null;
VideoTypes?: string;
GenreIds?: string;
Is4K?: boolean;
@ -48,8 +54,9 @@ export interface FiltersI {
}
export interface CardOptionsI {
itemsContainer?: HTMLElement;
parentContainer?: HTMLElement;
itemsContainer?: HTMLElement | null;
parentContainer?: HTMLElement | null;
items?: BaseItemDto[] | null;
allowBottomPadding?: boolean;
centerText?: boolean;
coverImage?: boolean;
@ -58,17 +65,19 @@ export interface CardOptionsI {
overlayPlayButton?: boolean;
overlayText?: boolean;
preferThumb?: boolean;
preferDisc?: boolean;
preferLogo?: boolean;
scalable?: boolean;
shape?: string;
shape?: string | null;
lazy?: boolean;
cardLayout?: boolean;
cardLayout?: boolean | string;
showParentTitle?: boolean;
showParentTitleOrTitle?: boolean;
showAirTime?: boolean;
showAirDateTime?: boolean;
showChannelName?: boolean;
showTitle?: boolean;
showYear?: boolean;
showTitle?: boolean | string;
showYear?: boolean | string;
showDetailsMenu?: boolean;
missingIndicator?: boolean;
showLocationTypeIndicator?: boolean;
@ -76,5 +85,43 @@ export interface CardOptionsI {
showUnplayedIndicator?: boolean;
showChildCountIndicator?: boolean;
lines?: number;
context?: string;
context?: string | null;
action?: string | null;
defaultShape?: string;
indexBy?: string;
parentId?: string | null;
showMenu?: boolean;
cardCssClass?: string | null;
cardClass?: string | null;
centerPlayButton?: boolean;
overlayInfoButton?: boolean;
autoUpdate?: boolean;
cardFooterAside?: string;
includeParentInfoInTitle?: boolean;
maxLines?: number;
overlayMarkPlayedButton?: boolean;
overlayRateButton?: boolean;
showAirEndTime?: boolean;
showCurrentProgram?: boolean;
showCurrentProgramTime?: boolean;
showItemCounts?: boolean;
showPersonRoleOrType?: boolean;
showProgressBar?: boolean;
showPremiereDate?: boolean;
showRuntime?: boolean;
showSeriesTimerTime?: boolean;
showSeriesTimerChannel?: boolean;
showSongCount?: boolean;
width?: number;
showChannelLogo?: boolean;
showLogo?: boolean;
serverId?: string;
collectionId?: string | null;
playlistId?: string | null;
defaultCardImageIcon?: string;
disableHoverMenu?: boolean;
disableIndicators?: boolean;
showGroupCount?: boolean;
containerClass?: string;
noItemsMessage?: string;
}

2
src/view/movies/GenresView.tsx
View file

@ -1,4 +1,4 @@
import { BaseItemDtoQueryResult } from '@thornbill/jellyfin-sdk/dist/generated-client';
import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import loading from '../../components/loading/loading';

6
src/view/movies/SuggestionsView.tsx
View file

@ -1,5 +1,5 @@
import { BaseItemDto, BaseItemDtoQueryResult, RecommendationDto } from '@thornbill/jellyfin-sdk/dist/generated-client';
import React, { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
import type { BaseItemDto, BaseItemDtoQueryResult, RecommendationDto } from '@jellyfin/sdk/lib/generated-client';
import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
import layoutManager from '../../components/layoutManager';
import loading from '../../components/loading/loading';
@ -12,7 +12,7 @@ interface SuggestionsViewI {
topParentId: string | null;
}
const SuggestionsView: FunctionComponent<SuggestionsViewI> = ({topParentId}) => {
const SuggestionsView: FC<SuggestionsViewI> = ({topParentId}) => {
const [ latestItems, setLatestItems ] = useState<BaseItemDto[]>([]);
const [ resumeResult, setResumeResult ] = useState<BaseItemDtoQueryResult>({});
const [ recommendations, setRecommendations ] = useState<RecommendationDto[]>([]);