mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
Add ItemsScrollerContainerElement for ResumableItemsContainer & RecentlyAddedItemsContainer
This commit is contained in:
parent
111cc430db
commit
368a6064c2
5 changed files with 24 additions and 68 deletions
|
@ -103,7 +103,6 @@ const ItemsContainer: FunctionComponent<ItemsContainerProps> = ({ getCurrentView
|
|||
return (
|
||||
<div ref={element}>
|
||||
<ItemsContainerElement
|
||||
id=''
|
||||
className={`itemsContainer ${cssClass} centered padded-left padded-right`}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -6,6 +6,7 @@ import React, { FunctionComponent, useEffect, useRef } from 'react';
|
|||
import cardBuilder from '../../components/cardbuilder/cardBuilder';
|
||||
import globalize from '../../scripts/globalize';
|
||||
import ItemsContainerElement from '../../elements/ItemsContainerElement';
|
||||
import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
|
||||
|
||||
type RecentlyAddedItemsContainerProps = {
|
||||
getPortraitShape: () => string;
|
||||
|
@ -17,21 +18,13 @@ const RecentlyAddedItemsContainer: FunctionComponent<RecentlyAddedItemsContainer
|
|||
const element = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const section = element.current?.querySelector('#recentlyAddedItemsSection') as HTMLDivElement;
|
||||
if (items?.length) {
|
||||
section.classList.remove('hide');
|
||||
} else {
|
||||
section.classList.add('hide');
|
||||
}
|
||||
|
||||
const allowBottomPadding = !enableScrollX();
|
||||
const container = element.current?.querySelector('#recentlyAddedItems');
|
||||
cardBuilder.buildCards(items, {
|
||||
itemsContainer: container,
|
||||
itemsContainer: element.current?.querySelector('.itemsContainer'),
|
||||
parentContainer: element.current?.querySelector('#recentlyAddedItemsSection'),
|
||||
shape: getPortraitShape(),
|
||||
scalable: true,
|
||||
overlayPlayButton: true,
|
||||
allowBottomPadding: allowBottomPadding,
|
||||
allowBottomPadding: true,
|
||||
showTitle: true,
|
||||
showYear: true,
|
||||
centerText: true
|
||||
|
@ -47,10 +40,14 @@ const RecentlyAddedItemsContainer: FunctionComponent<RecentlyAddedItemsContainer
|
|||
</h2>
|
||||
</div>
|
||||
|
||||
<ItemsContainerElement
|
||||
id='recentlyAddedItems'
|
||||
className='itemsContainer padded-left padded-right'
|
||||
/>
|
||||
{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>
|
||||
|
|
|
@ -43,7 +43,6 @@ const RecommendationContainer: FunctionComponent<RecommendationContainerProps> =
|
|||
useEffect(() => {
|
||||
cardBuilder.buildCards(recommendation.Items || [], {
|
||||
itemsContainer: element.current?.querySelector('.itemsContainer'),
|
||||
parentContainer: element.current,
|
||||
shape: getPortraitShape(),
|
||||
scalable: true,
|
||||
overlayPlayButton: true,
|
||||
|
|
|
@ -6,6 +6,7 @@ import React, { FunctionComponent, useEffect, useRef } from 'react';
|
|||
import cardBuilder from '../../components/cardbuilder/cardBuilder';
|
||||
import globalize from '../../scripts/globalize';
|
||||
import ItemsContainerElement from '../../elements/ItemsContainerElement';
|
||||
import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
|
||||
|
||||
type ResumableItemsContainerProps = {
|
||||
getThumbShape: () => string;
|
||||
|
@ -17,17 +18,10 @@ const ResumableItemsContainer: FunctionComponent<ResumableItemsContainerProps> =
|
|||
const element = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const section = element.current?.querySelector('#resumableSection') as HTMLDivElement;
|
||||
if (itemsResult.Items?.length) {
|
||||
section.classList.remove('hide');
|
||||
} else {
|
||||
section.classList.add('hide');
|
||||
}
|
||||
|
||||
const allowBottomPadding = !enableScrollX();
|
||||
const container = element.current?.querySelector('#resumableItems') as HTMLDivElement;
|
||||
cardBuilder.buildCards(itemsResult.Items || [], {
|
||||
itemsContainer: container,
|
||||
itemsContainer: element.current?.querySelector('.itemsContainer'),
|
||||
parentContainer: element.current?.querySelector('#resumableSection'),
|
||||
preferThumb: true,
|
||||
shape: getThumbShape(),
|
||||
scalable: true,
|
||||
|
@ -49,10 +43,14 @@ const ResumableItemsContainer: FunctionComponent<ResumableItemsContainerProps> =
|
|||
</h2>
|
||||
</div>
|
||||
|
||||
<ItemsContainerElement
|
||||
id='resumableItems'
|
||||
className='itemsContainer padded-left padded-right'
|
||||
/>
|
||||
{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>
|
||||
|
|
|
@ -113,41 +113,6 @@ const SuggestionsView: FunctionComponent<IProps> = (props: IProps) => {
|
|||
loadSuggestions(view, userId);
|
||||
}, [loadLatest, loadResume, loadSuggestions, props.topParentId]);
|
||||
|
||||
const setScrollClasses = useCallback((elem, scrollX) => {
|
||||
const page = element.current;
|
||||
|
||||
if (!page) {
|
||||
console.error('Unexpected null reference');
|
||||
return;
|
||||
}
|
||||
|
||||
if (scrollX) {
|
||||
elem.classList.add('hiddenScrollX');
|
||||
|
||||
if (layoutManager.tv) {
|
||||
elem.classList.add('smoothScrollX');
|
||||
elem.classList.add('padded-top-focusscale');
|
||||
elem.classList.add('padded-bottom-focusscale');
|
||||
}
|
||||
|
||||
elem.classList.add('scrollX');
|
||||
elem.classList.remove('vertical-wrap');
|
||||
} else {
|
||||
elem.classList.remove('hiddenScrollX');
|
||||
elem.classList.remove('smoothScrollX');
|
||||
elem.classList.remove('scrollX');
|
||||
elem.classList.add('vertical-wrap');
|
||||
}
|
||||
}, []);
|
||||
|
||||
const initSuggestedTab = useCallback((view) => {
|
||||
const containers = view.querySelectorAll('.itemsContainer');
|
||||
|
||||
for (const container of containers) {
|
||||
setScrollClasses(container, enableScrollX());
|
||||
}
|
||||
}, [enableScrollX, setScrollClasses]);
|
||||
|
||||
useEffect(() => {
|
||||
const page = element.current;
|
||||
|
||||
|
@ -156,9 +121,8 @@ const SuggestionsView: FunctionComponent<IProps> = (props: IProps) => {
|
|||
return;
|
||||
}
|
||||
|
||||
initSuggestedTab(page);
|
||||
loadSuggestionsTab(page);
|
||||
}, [initSuggestedTab, loadSuggestionsTab]);
|
||||
}, [loadSuggestionsTab]);
|
||||
|
||||
return (
|
||||
<div ref={element}>
|
||||
|
@ -173,7 +137,6 @@ const SuggestionsView: FunctionComponent<IProps> = (props: IProps) => {
|
|||
</div> : recommendations.map((recommendation, index) => {
|
||||
return <RecommendationContainer key={index} getPortraitShape={getPortraitShape} enableScrollX={enableScrollX} recommendation={recommendation} />;
|
||||
})}
|
||||
{}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue