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

Merge pull request #4874 from grafixeyehero/Convert-ItemsContainer-to-react

Browse source 
Convert emby-ItemsContainer to react
This commit is contained in:
Bill Thornton 2023-10-25 01:15:43 -04:00 • committed by GitHub
commit 83aec0253e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 568 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/apps/experimental/components/library/ItemsContainer.tsx
View file

@ -1,33 +0,0 @@
import React, { FC, useEffect, useRef } from 'react';
import ItemsContainerElement from 'elements/ItemsContainerElement';
import imageLoader from 'components/images/imageLoader';
import 'elements/emby-itemscontainer/emby-itemscontainer';
import { LibraryViewSettings, ViewMode } from 'types/library';
interface ItemsContainerI {
libraryViewSettings: LibraryViewSettings;
getItemsHtml: () => string
}
const ItemsContainer: FC<ItemsContainerI> = ({ libraryViewSettings, getItemsHtml }) => {
const element = useRef<HTMLDivElement>(null);
useEffect(() => {
const itemsContainer = element.current?.querySelector('.itemsContainer') as HTMLDivElement;
itemsContainer.innerHTML = getItemsHtml();
imageLoader.lazyChildren(itemsContainer);
}, [getItemsHtml]);
const cssClass = libraryViewSettings.ViewMode === ViewMode.ListView ? 'vertical-list' : 'vertical-wrap';
return (
<div ref={element}>
<ItemsContainerElement
className={`itemsContainer ${cssClass} centered padded-left padded-right padded-right-withalphapicker`}
/>
</div>
);
};
export default ItemsContainer;

8
src/apps/experimental/components/library/ItemsView.tsx
View file

@ -11,9 +11,9 @@ import listview from 'components/listview/listview';
import cardBuilder from 'components/cardbuilder/cardBuilder';
import { playbackManager } from 'components/playback/playbackmanager';
import globalize from 'scripts/globalize';
import ItemsContainer from 'elements/emby-itemscontainer/ItemsContainer';
import AlphabetPicker from './AlphabetPicker';
import FilterButton from './filter/FilterButton';
import ItemsContainer from './ItemsContainer';
import NewCollectionButton from './NewCollectionButton';
import Pagination from './Pagination';
import PlayAllButton from './PlayAllButton';
@ -67,7 +67,8 @@ const ItemsView: FC<ItemsViewProps> = ({
const {
isLoading,
data: itemsResult,
isPreviousData
isPreviousData,
refetch
} = useGetItemsViewByType(
viewType,
parentId,
@ -252,7 +253,10 @@ const ItemsView: FC<ItemsViewProps> = ({
<Loading />
) : (
<ItemsContainer
className='centered padded-left padded-right padded-right-withalphapicker'
libraryViewSettings={libraryViewSettings}
parentId={parentId}
reloadItems={refetch}
getItemsHtml={getItemsHtml}
/>
)}