Convert ListView to react

2025-03-30 19:56:21 +00:00 · 2024-01-31 04:20:42 +03:00 · 2024-01-31 04:20:42 +03:00 · 9efc71fa3b
commit 9efc71fa3b
parent cc87ba3859
14 changed files with 1009 additions and 0 deletions
--- a/src/components/listview/List/ListContent.tsx
+++ b/src/components/listview/List/ListContent.tsx
@ -0,0 +1,106 @@
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client';
+import React, { FC } from 'react';
+import DragHandleIcon from '@mui/icons-material/DragHandle';
+import Box from '@mui/material/Box';
+
+import useIndicator from 'components/indicators/useIndicator';
+import PrimaryMediaInfo from '../../mediainfo/PrimaryMediaInfo';
+import ListContentWrapper from './ListContentWrapper';
+import ListItemBody from './ListItemBody';
+import ListImageContainer from './ListImageContainer';
+import ListViewUserDataButtons from './ListViewUserDataButtons';
+
+import type { ItemDto } from 'types/itemDto';
+import type { ListOptions } from 'types/listOptions';
+
+interface ListContentProps {
+    item: ItemDto;
+    listOptions: ListOptions;
+    enableContentWrapper?: boolean;
+    enableOverview?: boolean;
+    enableSideMediaInfo?: boolean;
+    clickEntireItem?: boolean;
+    action?: string;
+    isLargeStyle: boolean;
+    downloadWidth?: number;
+}
+
+const ListContent: FC<ListContentProps> = ({
+    item,
+    listOptions,
+    enableContentWrapper,
+    enableOverview,
+    enableSideMediaInfo,
+    clickEntireItem,
+    action,
+    isLargeStyle,
+    downloadWidth
+}) => {
+    const indicator = useIndicator(item);
+    return (
+        <ListContentWrapper
+            itemOverview={item.Overview}
+            enableContentWrapper={enableContentWrapper}
+            enableOverview={enableOverview}
+        >
+
+            {!clickEntireItem && listOptions.dragHandle && (
+                <DragHandleIcon className='listViewDragHandle listItemIcon listItemIcon-transparent' />
+            )}
+
+            {listOptions.image !== false && (
+                <ListImageContainer
+                    item={item}
+                    listOptions={listOptions}
+                    action={action}
+                    isLargeStyle={isLargeStyle}
+                    clickEntireItem={clickEntireItem}
+                    downloadWidth={downloadWidth}
+                />
+            )}
+
+            {listOptions.showIndexNumberLeft && (
+                <Box className='listItem-indexnumberleft'>
+                    {item.IndexNumber ?? <span>&nbsp;</span>}
+                </Box>
+            )}
+
+            <ListItemBody
+                item={item}
+                listOptions={listOptions}
+                action={action}
+                enableContentWrapper={enableContentWrapper}
+                enableOverview={enableOverview}
+                enableSideMediaInfo={enableSideMediaInfo}
+                getMissingIndicator={indicator.getMissingIndicator}
+            />
+
+            {listOptions.mediaInfo !== false && enableSideMediaInfo && (
+                <PrimaryMediaInfo
+                    className='secondary listItemMediaInfo'
+                    item={item}
+                    isRuntimeEnabled={true}
+                    isStarRatingEnabled={true}
+                    isCaptionIndicatorEnabled={true}
+                    isEpisodeTitleEnabled={true}
+                    isOfficialRatingEnabled={true}
+                    getMissingIndicator={indicator.getMissingIndicator}
+                />
+            )}
+
+            {listOptions.recordButton
+                && (item.Type === 'Timer' || item.Type === BaseItemKind.Program) && (
+                indicator.getTimerIndicator('listItemAside')
+            )}
+
+            {!clickEntireItem && (
+                <ListViewUserDataButtons
+                    item={item}
+                    listOptions={listOptions}
+                />
+            )}
+        </ListContentWrapper>
+    );
+};
+
+export default ListContent;