Merge pull request #5850 from grafixeyehero/move-reusable-component

Move reusable Text Lines component to common file

src/components/listview/List/ListContent.tsx

@@ -75,7 +75,7 @@ const ListContent: FC<ListContentProps> = ({
                 getMissingIndicator={indicator.getMissingIndicator}
             />
 
-            {listOptions.mediaInfo !== false && enableSideMediaInfo && (
+            {listOptions.showMediaInfo !== false && enableSideMediaInfo && (
                 <PrimaryMediaInfo
                     className='secondary listItemMediaInfo'
                     item={item}

src/components/listview/List/ListItemBody.tsx

@@ -1,7 +1,8 @@
 import React, { type FC } from 'react';
 import classNames from 'classnames';
 import Box from '@mui/material/Box';
-import useListTextlines from './useListTextlines';
+
+import TextLines from 'components/common/textLines/TextLines';
 import PrimaryMediaInfo from '../../mediainfo/PrimaryMediaInfo';
 
 import type { ItemDto } from 'types/base/models/item-dto';
@@ -30,7 +31,6 @@ const ListItemBody: FC<ListItemBodyProps> = ({
     enableSideMediaInfo,
     getMissingIndicator
 }) => {
-    const { listTextLines } = useListTextlines({ item, listOptions, isLargeStyle });
     const cssClass = classNames(
         'listItemBody',
         { 'itemAction': !clickEntireItem },
@@ -40,9 +40,25 @@ const ListItemBody: FC<ListItemBodyProps> = ({
     return (
         <Box data-action={action} className={cssClass}>
 
-            {listTextLines}
+            <TextLines
+                item={item}
+                textClassName='listItemBodyText'
+                textLineOpts={{
+                    showProgramDateTime: listOptions.showProgramDateTime,
+                    showProgramTime: listOptions.showProgramTime,
+                    showChannel: listOptions.showChannel,
+                    showParentTitle: listOptions.showParentTitle,
+                    showIndexNumber: listOptions.showIndexNumber,
+                    parentTitleWithTitle: listOptions.parentTitleWithTitle,
+                    showArtist: listOptions.showArtist,
+                    includeParentInfoInTitle: listOptions.includeParentInfoInTitle,
+                    includeIndexNumber: listOptions.includeIndexNumber,
+                    showCurrentProgram: listOptions.showCurrentProgram
+                }}
+                isLargeStyle={isLargeStyle}
+            />
 
-            {listOptions.mediaInfo !== false && !enableSideMediaInfo && (
+            {listOptions.showMediaInfo !== false && !enableSideMediaInfo && (
                 <PrimaryMediaInfo
                     className='secondary listItemMediaInfo listItemBodyText'
                     item={item}

src/components/listview/List/ListTextWrapper.tsx

@@ -1,30 +0,0 @@
-import React, { type FC, type PropsWithChildren } from 'react';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-
-interface ListTextWrapperProps {
-    index?: number;
-    isLargeStyle?: boolean;
-}
-
-const ListTextWrapper: FC<PropsWithChildren<ListTextWrapperProps>> = ({
-    index,
-    isLargeStyle,
-    children
-}) => {
-    if (index === 0) {
-        if (isLargeStyle) {
-            return (
-                <Typography className='listItemBodyText' variant='h2'>
-                    {children}
-                </Typography>
-            );
-        } else {
-            return <Box className='listItemBodyText'>{children}</Box>;
-        }
-    } else {
-        return <Box className='secondary listItemBodyText'>{children}</Box>;
-    }
-};
-
-export default ListTextWrapper;

src/components/listview/List/useListTextlines.tsx

@@ -1,167 +0,0 @@
-import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client/models/base-item-kind';
-import React from 'react';
-import itemHelper from '../../itemHelper';
-import datetime from 'scripts/datetime';
-import ListTextWrapper from './ListTextWrapper';
-import type { ItemDto } from 'types/base/models/item-dto';
-import type { ListOptions } from 'types/listOptions';
-
-function getParentTitle(
-    showParentTitle: boolean | undefined,
-    item: ItemDto,
-    parentTitleWithTitle: boolean | undefined,
-    displayName: string | null | undefined
-) {
-    let parentTitle = null;
-    if (showParentTitle) {
-        if (item.Type === BaseItemKind.Episode) {
-            parentTitle = item.SeriesName;
-        } else if (item.IsSeries || (item.EpisodeTitle && item.Name)) {
-            parentTitle = item.Name;
-        }
-    }
-    if (showParentTitle && parentTitleWithTitle) {
-        if (displayName) {
-            parentTitle += ' - ';
-        }
-        parentTitle = (parentTitle ?? '') + displayName;
-    }
-    return parentTitle;
-}
-
-function getNameOrIndexWithName(
-    item: ItemDto,
-    listOptions: ListOptions,
-    showIndexNumber: boolean | undefined
-) {
-    let displayName = itemHelper.getDisplayName(item, {
-        includeParentInfo: listOptions.includeParentInfoInTitle
-    });
-
-    if (showIndexNumber && item.IndexNumber != null) {
-        displayName = `${item.IndexNumber}. ${displayName}`;
-    }
-    return displayName;
-}
-
-interface UseListTextlinesProps {
-    item: ItemDto;
-    listOptions?: ListOptions;
-    isLargeStyle?: boolean;
-}
-
-function useListTextlines({ item = {}, listOptions = {}, isLargeStyle }: UseListTextlinesProps) {
-    const {
-        showProgramDateTime,
-        showProgramTime,
-        showChannel,
-        showParentTitle,
-        showIndexNumber,
-        parentTitleWithTitle,
-        artist
-    } = listOptions;
-    const textLines: string[] = [];
-
-    const addTextLine = (text: string | null) => {
-        if (text) {
-            textLines.push(text);
-        }
-    };
-
-    const addProgramDateTime = () => {
-        if (showProgramDateTime) {
-            const programDateTime = datetime.toLocaleString(
-                datetime.parseISO8601Date(item.StartDate),
-                {
-                    weekday: 'long',
-                    month: 'short',
-                    day: 'numeric',
-                    hour: 'numeric',
-                    minute: '2-digit'
-                }
-            );
-            addTextLine(programDateTime);
-        }
-    };
-
-    const addProgramTime = () => {
-        if (showProgramTime) {
-            const programTime = datetime.getDisplayTime(
-                datetime.parseISO8601Date(item.StartDate)
-            );
-            addTextLine(programTime);
-        }
-    };
-
-    const addChannelName = () => {
-        if (showChannel && item.ChannelName) {
-            addTextLine(item.ChannelName);
-        }
-    };
-
-    const displayName = getNameOrIndexWithName(item, listOptions, showIndexNumber);
-
-    const parentTitle = getParentTitle(showParentTitle, item, parentTitleWithTitle, displayName );
-
-    const addParentTitle = () => {
-        addTextLine(parentTitle ?? '');
-    };
-
-    const addDisplayName = () => {
-        if (displayName && !parentTitleWithTitle) {
-            addTextLine(displayName);
-        }
-    };
-
-    const addAlbumArtistOrArtists = () => {
-        if (item.IsFolder && artist !== false) {
-            if (item.AlbumArtist && item.Type === BaseItemKind.MusicAlbum) {
-                addTextLine(item.AlbumArtist);
-            }
-        } else if (artist) {
-            const artistItems = item.ArtistItems;
-            if (artistItems && item.Type !== BaseItemKind.MusicAlbum) {
-                const artists = artistItems.map((a) => a.Name).join(', ');
-                addTextLine(artists);
-            }
-        }
-    };
-
-    const addCurrentProgram = () => {
-        if (item.Type === BaseItemKind.TvChannel && item.CurrentProgram) {
-            const currentProgram = itemHelper.getDisplayName(
-                item.CurrentProgram
-            );
-            addTextLine(currentProgram);
-        }
-    };
-
-    addProgramDateTime();
-    addProgramTime();
-    addChannelName();
-    addParentTitle();
-    addDisplayName();
-    addAlbumArtistOrArtists();
-    addCurrentProgram();
-
-    const renderTextlines = (text: string, index: number) => {
-        return (
-            <ListTextWrapper
-                // eslint-disable-next-line react/no-array-index-key
-                key={index}
-                index={index}
-                isLargeStyle={isLargeStyle}
-            >
-                <bdi>{text}</bdi>
-            </ListTextWrapper>
-        );
-    };
-
-    const listTextLines = textLines?.map((text, index) => renderTextlines(text, index));
-
-    return {
-        listTextLines
-    };
-}
-
-export default useListTextlines;

src/components/listview/listview.scss

@@ -5,6 +5,10 @@
     contain: layout style;
 }
 
+.listItemMediaInfo {
+    align-items: center;
+}
+
 .listItem {
     background: transparent;
     border: 0;