mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
refactor: suggestionview and genresview
This commit is contained in:
grafixeyehero
parent
13aa3c9efa
commit
17e8ccc93a
27 changed files with 1253 additions and 602 deletions
|
|
@ -1,128 +0,0 @@
|
|||
import '../../elements/emby-button/emby-button';
|
||||
import '../../elements/emby-itemscontainer/emby-itemscontainer';
|
||||
|
||||
import type { BaseItemDtoQueryResult } from '@jellyfin/sdk/lib/generated-client';
|
||||
import escapeHTML from 'escape-html';
|
||||
import React, { FC, useCallback, useEffect, useRef } from 'react';
|
||||
|
||||
import { appRouter } from '../router/appRouter';
|
||||
import cardBuilder from '../cardbuilder/cardBuilder';
|
||||
import layoutManager from '../layoutManager';
|
||||
import lazyLoader from '../lazyLoader/lazyLoaderIntersectionObserver';
|
||||
import globalize from '../../scripts/globalize';
|
||||
import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
|
||||
import ItemsContainerElement from '../../elements/ItemsContainerElement';
|
||||
|
||||
const createLinkElement = ({ className, title, href }: { className?: string, title?: string | null, href?: string }) => ({
|
||||
__html: `<a
|
||||
is="emby-linkbutton"
|
||||
class="${className}"
|
||||
href="${href}"
|
||||
>
|
||||
<h2 class='sectionTitle sectionTitle-cards'>
|
||||
${title}
|
||||
</h2>
|
||||
<span class='material-icons chevron_right' aria-hidden='true'></span>
|
||||
</a>`
|
||||
});
|
||||
|
||||
interface GenresItemsContainerProps {
|
||||
topParentId?: string | null;
|
||||
itemsResult: BaseItemDtoQueryResult;
|
||||
}
|
||||
|
||||
const GenresItemsContainer: FC<GenresItemsContainerProps> = ({
|
||||
topParentId,
|
||||
itemsResult = {}
|
||||
}) => {
|
||||
const element = useRef<HTMLDivElement>(null);
|
||||
|
||||
const enableScrollX = useCallback(() => {
|
||||
return !layoutManager.desktop;
|
||||
}, []);
|
||||
|
||||
const getPortraitShape = useCallback(() => {
|
||||
return enableScrollX() ? 'overflowPortrait' : 'portrait';
|
||||
}, [enableScrollX]);
|
||||
|
||||
const fillItemsContainer = useCallback((entry) => {
|
||||
const elem = entry.target;
|
||||
const id = elem.getAttribute('data-id');
|
||||
|
||||
const query = {
|
||||
SortBy: 'Random',
|
||||
SortOrder: 'Ascending',
|
||||
IncludeItemTypes: 'Movie',
|
||||
Recursive: true,
|
||||
Fields: 'PrimaryImageAspectRatio,MediaSourceCount,BasicSyncInfo',
|
||||
ImageTypeLimit: 1,
|
||||
EnableImageTypes: 'Primary',
|
||||
Limit: 12,
|
||||
GenreIds: id,
|
||||
EnableTotalRecordCount: false,
|
||||
ParentId: topParentId
|
||||
};
|
||||
window.ApiClient.getItems(window.ApiClient.getCurrentUserId(), query).then((result) => {
|
||||
cardBuilder.buildCards(result.Items || [], {
|
||||
itemsContainer: elem,
|
||||
shape: getPortraitShape(),
|
||||
scalable: true,
|
||||
overlayMoreButton: true,
|
||||
allowBottomPadding: true,
|
||||
showTitle: true,
|
||||
centerText: true,
|
||||
showYear: true
|
||||
});
|
||||
}).catch(err => {
|
||||
console.error('[GenresItemsContainer] failed to fetch items', err);
|
||||
});
|
||||
}, [getPortraitShape, topParentId]);
|
||||
|
||||
useEffect(() => {
|
||||
const elem = element.current;
|
||||
lazyLoader.lazyChildren(elem, fillItemsContainer);
|
||||
}, [itemsResult.Items, fillItemsContainer]);
|
||||
|
||||
const items = itemsResult.Items || [];
|
||||
return (
|
||||
<div ref={element}>
|
||||
{
|
||||
!items.length ? (
|
||||
<div className='noItemsMessage centerMessage'>
|
||||
<h1>{globalize.translate('MessageNothingHere')}</h1>
|
||||
<p>{globalize.translate('MessageNoGenresAvailable')}</p>
|
||||
</div>
|
||||
) : items.map(item => (
|
||||
<div key={item.Id} className='verticalSection'>
|
||||
<div
|
||||
className='sectionTitleContainer sectionTitleContainer-cards padded-left'
|
||||
dangerouslySetInnerHTML={createLinkElement({
|
||||
className: 'more button-flat button-flat-mini sectionTitleTextButton btnMoreFromGenre',
|
||||
title: escapeHTML(item.Name),
|
||||
href: appRouter.getRouteUrl(item, {
|
||||
context: 'movies',
|
||||
parentId: topParentId
|
||||
})
|
||||
})}
|
||||
/>
|
||||
|
||||
{enableScrollX() ?
|
||||
<ItemsScrollerContainerElement
|
||||
scrollerclassName='padded-top-focusscale padded-bottom-focusscale'
|
||||
dataMousewheel='false'
|
||||
dataCenterfocus='true'
|
||||
className='itemsContainer scrollSlider focuscontainer-x lazy'
|
||||
dataId={item.Id}
|
||||
/> : <ItemsContainerElement
|
||||
className='itemsContainer vertical-wrap lazy padded-left padded-right'
|
||||
dataId={item.Id}
|
||||
/>
|
||||
}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GenresItemsContainer;
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
import type { RecommendationDto } from '@jellyfin/sdk/lib/generated-client';
|
||||
import React, { FC } from 'react';
|
||||
|
||||
import globalize from '../../scripts/globalize';
|
||||
import escapeHTML from 'escape-html';
|
||||
import SectionContainer from './SectionContainer';
|
||||
|
||||
interface RecommendationContainerProps {
|
||||
getPortraitShape: () => string;
|
||||
enableScrollX: () => boolean;
|
||||
recommendation?: RecommendationDto;
|
||||
}
|
||||
|
||||
const RecommendationContainer: FC<RecommendationContainerProps> = ({ getPortraitShape, enableScrollX, recommendation = {} }) => {
|
||||
let title = '';
|
||||
|
||||
switch (recommendation.RecommendationType) {
|
||||
case 'SimilarToRecentlyPlayed':
|
||||
title = globalize.translate('RecommendationBecauseYouWatched', recommendation.BaselineItemName);
|
||||
break;
|
||||
|
||||
case 'SimilarToLikedItem':
|
||||
title = globalize.translate('RecommendationBecauseYouLike', recommendation.BaselineItemName);
|
||||
break;
|
||||
|
||||
case 'HasDirectorFromRecentlyPlayed':
|
||||
case 'HasLikedDirector':
|
||||
title = globalize.translate('RecommendationDirectedBy', recommendation.BaselineItemName);
|
||||
break;
|
||||
|
||||
case 'HasActorFromRecentlyPlayed':
|
||||
case 'HasLikedActor':
|
||||
title = globalize.translate('RecommendationStarring', recommendation.BaselineItemName);
|
||||
break;
|
||||
}
|
||||
|
||||
return <SectionContainer
|
||||
sectionTitle={escapeHTML(title)}
|
||||
enableScrollX={enableScrollX}
|
||||
items={recommendation.Items || []}
|
||||
cardOptions={{
|
||||
shape: getPortraitShape(),
|
||||
showYear: true
|
||||
}}
|
||||
/>;
|
||||
};
|
||||
|
||||
export default RecommendationContainer;
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
import '../../elements/emby-itemscontainer/emby-itemscontainer';
|
||||
|
||||
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
|
||||
import React, { FC, useEffect, useRef } from 'react';
|
||||
|
||||
import cardBuilder from '../cardbuilder/cardBuilder';
|
||||
import ItemsContainerElement from '../../elements/ItemsContainerElement';
|
||||
import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
|
||||
import { CardOptions } from '../../types/interface';
|
||||
|
||||
interface SectionContainerProps {
|
||||
sectionTitle: string;
|
||||
enableScrollX: () => boolean;
|
||||
items?: BaseItemDto[];
|
||||
cardOptions?: CardOptions;
|
||||
}
|
||||
|
||||
const SectionContainer: FC<SectionContainerProps> = ({
|
||||
sectionTitle,
|
||||
enableScrollX,
|
||||
items = [],
|
||||
cardOptions = {}
|
||||
}) => {
|
||||
const element = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
cardBuilder.buildCards(items, {
|
||||
itemsContainer: element.current?.querySelector('.itemsContainer'),
|
||||
parentContainer: element.current?.querySelector('.verticalSection'),
|
||||
scalable: true,
|
||||
overlayPlayButton: true,
|
||||
showTitle: true,
|
||||
centerText: true,
|
||||
cardLayout: false,
|
||||
...cardOptions
|
||||
});
|
||||
}, [cardOptions, enableScrollX, items]);
|
||||
|
||||
return (
|
||||
<div ref={element}>
|
||||
<div className='verticalSection hide'>
|
||||
<div className='sectionTitleContainer sectionTitleContainer-cards'>
|
||||
<h2 className='sectionTitle sectionTitle-cards padded-left'>
|
||||
{sectionTitle}
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{enableScrollX() ? <ItemsScrollerContainerElement
|
||||
scrollerclassName='padded-top-focusscale padded-bottom-focusscale'
|
||||
dataMousewheel='false'
|
||||
dataCenterfocus='true'
|
||||
className='itemsContainer scrollSlider focuscontainer-x'
|
||||
/> : <ItemsContainerElement
|
||||
className='itemsContainer focuscontainer-x padded-left padded-right vertical-wrap'
|
||||
/>}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SectionContainer;
|
||||
|
|
@ -12,12 +12,13 @@ import Shuffle from './Shuffle';
|
|||
import Sort from './Sort';
|
||||
import NewCollection from './NewCollection';
|
||||
import globalize from '../../scripts/globalize';
|
||||
import { CardOptions, ViewQuerySettings } from '../../types/interface';
|
||||
import ServerConnections from '../ServerConnections';
|
||||
import { useLocalStorage } from '../../hooks/useLocalStorage';
|
||||
import listview from '../listview/listview';
|
||||
import cardBuilder from '../cardbuilder/cardBuilder';
|
||||
|
||||
import { ViewQuerySettings } from '../../types/interface';
|
||||
import { CardOptions } from '../../types/cardOptions';
|
||||
interface ViewItemsContainerProps {
|
||||
topParentId: string | null;
|
||||
isBtnShuffleEnabled?: boolean;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue