mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Add ItemsScrollerContainerElement for ResumableItemsContainer & RecentlyAddedItemsContainer

Browse source
This commit is contained in:
grafixeyehero 2022-08-10 22:19:26 +03:00
parent 111cc430db
commit 368a6064c2
5 changed files with 24 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -103,7 +103,6 @@ const ItemsContainer: FunctionComponent<ItemsContainerProps> = ({ getCurrentView
return ( return (
<div ref={element}> <div ref={element}>
<ItemsContainerElement <ItemsContainerElement
id=''
className={`itemsContainer ${cssClass} centered padded-left padded-right`} className={`itemsContainer ${cssClass} centered padded-left padded-right`}
/> />
</div> </div>

27
src/view/components/RecentlyAddedItemsContainer.tsx
View file

@ -6,6 +6,7 @@ import React, { FunctionComponent, useEffect, useRef } from 'react';
import cardBuilder from '../../components/cardbuilder/cardBuilder'; import cardBuilder from '../../components/cardbuilder/cardBuilder';
import globalize from '../../scripts/globalize'; import globalize from '../../scripts/globalize';
import ItemsContainerElement from '../../elements/ItemsContainerElement'; import ItemsContainerElement from '../../elements/ItemsContainerElement';
import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
type RecentlyAddedItemsContainerProps = { type RecentlyAddedItemsContainerProps = {
getPortraitShape: () => string; getPortraitShape: () => string;
@ -17,21 +18,13 @@ const RecentlyAddedItemsContainer: FunctionComponent<RecentlyAddedItemsContainer
const element = useRef<HTMLDivElement>(null); const element = useRef<HTMLDivElement>(null);
useEffect(() => { 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, { cardBuilder.buildCards(items, {
itemsContainer: container, itemsContainer: element.current?.querySelector('.itemsContainer'),
parentContainer: element.current?.querySelector('#recentlyAddedItemsSection'),
shape: getPortraitShape(), shape: getPortraitShape(),
scalable: true, scalable: true,
overlayPlayButton: true, overlayPlayButton: true,
allowBottomPadding: allowBottomPadding, allowBottomPadding: true,
showTitle: true, showTitle: true,
showYear: true, showYear: true,
centerText: true centerText: true
@ -47,10 +40,14 @@ const RecentlyAddedItemsContainer: FunctionComponent<RecentlyAddedItemsContainer
</h2> </h2>
</div> </div>
<ItemsContainerElement {enableScrollX() ? <ItemsScrollerContainerElement
id='recentlyAddedItems' scrollerclassName='padded-top-focusscale padded-bottom-focusscale'
className='itemsContainer padded-left padded-right' dataMousewheel='false'
/> dataCenterfocus='true'
className='itemsContainer scrollSlider focuscontainer-x'
/> : <ItemsContainerElement
className='itemsContainer focuscontainer-x padded-left padded-right vertical-wrap'
/>}
</div> </div>
</div> </div>

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

@ -43,7 +43,6 @@ const RecommendationContainer: FunctionComponent<RecommendationContainerProps> =
useEffect(() => { useEffect(() => {
cardBuilder.buildCards(recommendation.Items || [], { cardBuilder.buildCards(recommendation.Items || [], {
itemsContainer: element.current?.querySelector('.itemsContainer'), itemsContainer: element.current?.querySelector('.itemsContainer'),
parentContainer: element.current,
shape: getPortraitShape(), shape: getPortraitShape(),
scalable: true, scalable: true,
overlayPlayButton: true, overlayPlayButton: true,

24
src/view/components/ResumableItemsContainer.tsx
View file

@ -6,6 +6,7 @@ import React, { FunctionComponent, useEffect, useRef } from 'react';
import cardBuilder from '../../components/cardbuilder/cardBuilder'; import cardBuilder from '../../components/cardbuilder/cardBuilder';
import globalize from '../../scripts/globalize'; import globalize from '../../scripts/globalize';
import ItemsContainerElement from '../../elements/ItemsContainerElement'; import ItemsContainerElement from '../../elements/ItemsContainerElement';
import ItemsScrollerContainerElement from '../../elements/ItemsScrollerContainerElement';
type ResumableItemsContainerProps = { type ResumableItemsContainerProps = {
getThumbShape: () => string; getThumbShape: () => string;
@ -17,17 +18,10 @@ const ResumableItemsContainer: FunctionComponent<ResumableItemsContainerProps> =
const element = useRef<HTMLDivElement>(null); const element = useRef<HTMLDivElement>(null);
useEffect(() => { 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 allowBottomPadding = !enableScrollX();
const container = element.current?.querySelector('#resumableItems') as HTMLDivElement;
cardBuilder.buildCards(itemsResult.Items || [], { cardBuilder.buildCards(itemsResult.Items || [], {
itemsContainer: container, itemsContainer: element.current?.querySelector('.itemsContainer'),
parentContainer: element.current?.querySelector('#resumableSection'),
preferThumb: true, preferThumb: true,
shape: getThumbShape(), shape: getThumbShape(),
scalable: true, scalable: true,
@ -49,10 +43,14 @@ const ResumableItemsContainer: FunctionComponent<ResumableItemsContainerProps> =
</h2> </h2>
</div> </div>
<ItemsContainerElement {enableScrollX() ? <ItemsScrollerContainerElement
id='resumableItems' scrollerclassName='padded-top-focusscale padded-bottom-focusscale'
className='itemsContainer padded-left padded-right' dataMousewheel='false'
/> dataCenterfocus='true'
className='itemsContainer scrollSlider focuscontainer-x'
/> : <ItemsContainerElement
className='itemsContainer focuscontainer-x padded-left padded-right vertical-wrap'
/>}
</div> </div>
</div> </div>

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

@ -113,41 +113,6 @@ const SuggestionsView: FunctionComponent<IProps> = (props: IProps) => {
loadSuggestions(view, userId); loadSuggestions(view, userId);
}, [loadLatest, loadResume, loadSuggestions, props.topParentId]); }, [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(() => { useEffect(() => {
const page = element.current; const page = element.current;
@ -156,9 +121,8 @@ const SuggestionsView: FunctionComponent<IProps> = (props: IProps) => {
return; return;
} }
initSuggestedTab(page);
loadSuggestionsTab(page); loadSuggestionsTab(page);
}, [initSuggestedTab, loadSuggestionsTab]); }, [loadSuggestionsTab]);
return ( return (
<div ref={element}> <div ref={element}>
@ -173,7 +137,6 @@ const SuggestionsView: FunctionComponent<IProps> = (props: IProps) => {
</div> : recommendations.map((recommendation, index) => { </div> : recommendations.map((recommendation, index) => {
return <RecommendationContainer key={index} getPortraitShape={getPortraitShape} enableScrollX={enableScrollX} recommendation={recommendation} />; return <RecommendationContainer key={index} getPortraitShape={getPortraitShape} enableScrollX={enableScrollX} recommendation={recommendation} />;
})} })}
{}
</div> </div>
</div> </div>
); );