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

Refactoring duplicates onViewStyleChange

Browse source
This commit is contained in:
grafixeyehero 2022-08-10 22:08:49 +03:00
parent 7543e494c9
commit 111cc430db
9 changed files with 19 additions and 111 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -156,7 +156,7 @@ const GenresItemsContainer: FunctionComponent<GenresItemsContainerProps> = ({ to
return (
<div ref={element}>
<div id='items'></div>
<div id='items'/>
</div>
);
};

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

@ -18,10 +18,11 @@ type ItemsContainerProps = {
const ItemsContainer: FunctionComponent<ItemsContainerProps> = ({ getCurrentViewStyle, query, items = [], noItemsMessage }: ItemsContainerProps) => {
const element = useRef<HTMLDivElement>(null);
const viewStyle = getCurrentViewStyle();
useEffect(() => {
let html;
const viewStyle = getCurrentViewStyle();
if (viewStyle == 'Thumb') {
html = cardBuilder.getCardsHtml(items, {
items: items,
@ -95,13 +96,15 @@ const ItemsContainer: FunctionComponent<ItemsContainerProps> = ({ getCurrentView
const itemsContainer = element.current?.querySelector('.itemsContainer') as HTMLDivElement;
itemsContainer.innerHTML = html;
imageLoader.lazyChildren(itemsContainer);
}, [getCurrentViewStyle, query.SortBy, items, noItemsMessage]);
}, [query.SortBy, items, noItemsMessage, viewStyle]);
const cssClass = viewStyle == 'List' ? 'vertical-list' : 'vertical-wrap';
return (
<div ref={element}>
<ItemsContainerElement
id=''
className='itemsContainer vertical-wrap centered padded-left padded-right'
className={`itemsContainer ${cssClass} centered padded-left padded-right`}
/>
</div>
);

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

@ -54,11 +54,8 @@ const Pagination: FunctionComponent<PaginationProps> = ({ query, itemsResult = {
return (
<div ref={element}>
<div
className='paging'
/>
<div className='paging' />
</div>
);
};

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

@ -9,11 +9,10 @@ type SelectViewProps = {
getCurrentViewStyle: () => string;
query: IQuery;
savedViewKey: string;
onViewStyleChange: () => void;
reloadItems: () => void;
}
const SelectView: FunctionComponent<SelectViewProps> = ({ getCurrentViewStyle, savedViewKey, query, onViewStyleChange, reloadItems }: SelectViewProps) => {
const SelectView: FunctionComponent<SelectViewProps> = ({ getCurrentViewStyle, savedViewKey, query, reloadItems }: SelectViewProps) => {
const element = useRef<HTMLDivElement>(null);
useEffect(() => {
@ -25,10 +24,9 @@ const SelectView: FunctionComponent<SelectViewProps> = ({ getCurrentViewStyle, s
const viewStyle = (e as CustomEvent).detail.viewStyle;
userSettings.set(savedViewKey, viewStyle, false);
query.StartIndex = 0;
onViewStyleChange();
reloadItems();
});
}, [getCurrentViewStyle, onViewStyleChange, query, reloadItems, savedViewKey]);
}, [getCurrentViewStyle, query, reloadItems, savedViewKey]);
return (
<div ref={element}>

26
src/view/movies/CollectionsView.tsx
View file

@ -73,38 +73,16 @@ const CollectionsView: FunctionComponent<IProps> = ({ topParentId }: IProps) =>
});
}, [query]);
const onViewStyleChange = useCallback(() => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
const viewStyle = getCurrentViewStyle();
const itemsContainer = page.querySelector('.itemsContainer') as HTMLDivElement;
if (viewStyle == 'List') {
itemsContainer.classList.add('vertical-list');
itemsContainer.classList.remove('vertical-wrap');
} else {
itemsContainer.classList.remove('vertical-list');
itemsContainer.classList.add('vertical-wrap');
}
itemsContainer.innerHTML = '';
}, [getCurrentViewStyle]);
useEffect(() => {
onViewStyleChange();
reloadItems();
}, [onViewStyleChange, reloadItems]);
}, [reloadItems]);
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={query} reloadItems={reloadItems} />
<SelectView getCurrentViewStyle={getCurrentViewStyle} savedViewKey={savedViewKey} query={query} onViewStyleChange={onViewStyleChange} reloadItems={reloadItems} />
<SelectView getCurrentViewStyle={getCurrentViewStyle} savedViewKey={savedViewKey} query={query} reloadItems={reloadItems} />
<Sort sortMenuOptions={SortMenuOptions} query={query} savedQueryKey={savedQueryKey} reloadItems={reloadItems} />
<NewCollection />

26
src/view/movies/FavoritesView.tsx
View file

@ -96,38 +96,16 @@ const FavoritesView: FunctionComponent<IProps> = ({ topParentId }: IProps) => {
});
}, [query]);
const onViewStyleChange = useCallback(() => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
const viewStyle = getCurrentViewStyle();
const itemsContainer = page.querySelector('.itemsContainer') as HTMLDivElement;
if (viewStyle == 'List') {
itemsContainer.classList.add('vertical-list');
itemsContainer.classList.remove('vertical-wrap');
} else {
itemsContainer.classList.remove('vertical-list');
itemsContainer.classList.add('vertical-wrap');
}
itemsContainer.innerHTML = '';
}, [getCurrentViewStyle]);
useEffect(() => {
onViewStyleChange();
reloadItems();
}, [onViewStyleChange, query, reloadItems]);
}, [query, reloadItems]);
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={query} reloadItems={reloadItems} />
<SelectView getCurrentViewStyle={getCurrentViewStyle} savedViewKey={savedViewKey} query={query} onViewStyleChange={onViewStyleChange} reloadItems={reloadItems} />
<SelectView getCurrentViewStyle={getCurrentViewStyle} savedViewKey={savedViewKey} query={query} reloadItems={reloadItems} />
<Sort sortMenuOptions={SortMenuOptions} query={query} savedQueryKey={savedQueryKey} reloadItems={reloadItems} />
<Filter query={query} reloadItems={reloadItems} />

29
src/view/movies/MoviesView.tsx
View file

@ -97,34 +97,9 @@ const MoviesView: FunctionComponent<IProps> = ({ topParentId }: IProps) => {
});
}, [query]);
const onViewStyleChange = useCallback(() => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
const viewStyle = getCurrentViewStyle();
const itemsContainer = page.querySelector('.itemsContainer') as HTMLDivElement;
if (viewStyle == 'List') {
itemsContainer.classList.add('vertical-list');
itemsContainer.classList.remove('vertical-wrap');
} else {
itemsContainer.classList.remove('vertical-list');
itemsContainer.classList.add('vertical-wrap');
}
itemsContainer.innerHTML = '';
}, [getCurrentViewStyle]);
useEffect(() => {
onViewStyleChange();
}, [onViewStyleChange]);
useEffect(() => {
reloadItems();
}, [onViewStyleChange, query, reloadItems]);
}, [query, reloadItems]);
return (
<div ref={element}>
@ -133,7 +108,7 @@ const MoviesView: FunctionComponent<IProps> = ({ topParentId }: IProps) => {
<Shuffle itemsResult= {itemsResult} topParentId={topParentId} />
<SelectView getCurrentViewStyle={getCurrentViewStyle} savedViewKey={savedViewKey} query={query} onViewStyleChange={onViewStyleChange} reloadItems={reloadItems} />
<SelectView getCurrentViewStyle={getCurrentViewStyle} savedViewKey={savedViewKey} query={query} reloadItems={reloadItems} />
<Sort sortMenuOptions={SortMenuOptions} query={query} savedQueryKey={savedQueryKey} reloadItems={reloadItems} />
<Filter query={query} reloadItems={reloadItems} />

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

@ -97,8 +97,8 @@ const SuggestionsView: FunctionComponent<IProps> = (props: IProps) => {
ImageTypeLimit: 1,
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb'
});
window.ApiClient.getJSON(url).then(recommendations => {
setRecommendations(recommendations);
window.ApiClient.getJSON(url).then(result => {
setRecommendations(result);
// FIXME: Wait for all sections to load
autoFocus(page);

23
src/view/movies/TrailersView.tsx
View file

@ -83,30 +83,9 @@ const TrailersView: FunctionComponent<IProps> = ({ topParentId }: IProps) => {
});
}, [query]);
const onViewStyleChange = useCallback(() => {
const page = element.current;
if (!page) {
console.error('Unexpected null reference');
return;
}
const viewStyle = getCurrentViewStyle();
const itemsContainer = page.querySelector('.itemsContainer') as HTMLDivElement;
if (viewStyle == 'List') {
itemsContainer.classList.add('vertical-list');
itemsContainer.classList.remove('vertical-wrap');
} else {
itemsContainer.classList.remove('vertical-list');
itemsContainer.classList.add('vertical-wrap');
}
itemsContainer.innerHTML = '';
}, [getCurrentViewStyle]);
useEffect(() => {
onViewStyleChange();
reloadItems();
}, [onViewStyleChange, query, reloadItems]);
}, [query, reloadItems]);
return (
<div ref={element}>