Add Secondary Media Info & Media Info Stats

src/components/listview/List/ListContent.tsx

@@ -78,12 +78,13 @@ const ListContent: FC<ListContentProps> = ({
             {listOptions.showMediaInfo !== false && enableSideMediaInfo && (
                 <PrimaryMediaInfo
                     className='secondary listItemMediaInfo'
+                    infoclass='mediaInfoText'
                     item={item}
-                    isRuntimeEnabled={true}
-                    isStarRatingEnabled={true}
-                    isCaptionIndicatorEnabled={true}
-                    isEpisodeTitleEnabled={true}
-                    isOfficialRatingEnabled={true}
+                    showRuntimeInfo
+                    showOfficialRatingInfo
+                    showOriginalAirDateInfo
+                    showStarRatingInfo
+                    showCaptionIndicatorInfo
                     getMissingIndicator={indicator.getMissingIndicator}
                 />
             )}

src/components/listview/List/ListItemBody.tsx

@@ -61,10 +61,11 @@ const ListItemBody: FC<ListItemBodyProps> = ({
             {listOptions.showMediaInfo !== false && !enableSideMediaInfo && (
                 <PrimaryMediaInfo
                     className='secondary listItemMediaInfo listItemBodyText'
+                    infoclass='mediaInfoText'
                     item={item}
-                    isEpisodeTitleEnabled={true}
-                    isOriginalAirDateEnabled={true}
-                    isCaptionIndicatorEnabled={true}
+                    showEpisodeTitleInfo
+                    showOriginalAirDateInfo
+                    showCaptionIndicatorInfo
                     getMissingIndicator={getMissingIndicator}
                 />
             )}

src/components/listview/listview.scss

@@ -7,6 +7,7 @@
 
 .listItemMediaInfo {
     align-items: center;
+    margin-right: 1em;
 }
 
 .listItem {

src/components/mediainfo/CaptionMediaInfo.tsx

@@ -10,14 +10,13 @@ interface CaptionMediaInfoProps {
 const CaptionMediaInfo: FC<CaptionMediaInfoProps> = ({ className }) => {
     const cssClass = classNames(
         'mediaInfoItem',
-        'mediaInfoText',
         'closedCaptionMediaInfoText',
         className
     );
 
     return (
         <Box className={cssClass}>
-            <ClosedCaptionIcon fontSize={'small'} />
+            <ClosedCaptionIcon />
         </Box>
     );
 };

src/components/mediainfo/EndsAt.tsx

@@ -12,7 +12,6 @@ interface EndsAtProps {
 const EndsAt: FC<EndsAtProps> = ({ runTimeTicks, className }) => {
     const cssClass = classNames(
         'mediaInfoItem',
-        'mediaInfoText',
         'endsAt',
         className
     );

src/components/mediainfo/MediaInfoItem.tsx

@@ -1,25 +1,38 @@
 import React, { type FC } from 'react';
 import Box from '@mui/material/Box';
+import Link from '@mui/material/Link';
 import classNames from 'classnames';
 import type { MiscInfo } from 'types/mediaInfoItem';
 
 interface MediaInfoItemProps {
     className?: string;
-    miscInfo?: MiscInfo ;
+    miscInfo: MiscInfo ;
 
 }
 
 const MediaInfoItem: FC<MediaInfoItemProps> = ({ className, miscInfo }) => {
-    const cssClass = classNames(
-        'mediaInfoItem',
-        'mediaInfoText',
-        className,
-        miscInfo?.cssClass
-    );
+    const { text, textAction, cssClass, type } = miscInfo;
+
+    const renderText = () => {
+        if (textAction) {
+            return (
+                <Link
+                    className={classNames(textAction.cssClass, className)}
+                    href={textAction.url}
+                    title={textAction.title}
+                    color='inherit'
+                >
+                    {textAction.title}
+                </Link>
+            );
+        } else {
+            return text;
+        }
+    };
 
     return (
-        <Box className={cssClass}>
-            {miscInfo?.text}
+        <Box className={classNames('mediaInfoItem', cssClass, type, className)}>
+            {renderText()}
         </Box>
     );
 };

src/components/mediainfo/MediaInfoStats.tsx

@@ -0,0 +1,49 @@
+import React, { type FC } from 'react';
+import classNames from 'classnames';
+import Box from '@mui/material/Box';
+import useMediaInfoStats from './useMediaInfoStats';
+
+import MediaInfoItem from './MediaInfoItem';
+import type { ItemDto } from 'types/base/models/item-dto';
+import type { MiscInfo } from 'types/mediaInfoItem';
+import type { MediaInfoStatsOpts } from './type';
+
+interface MediaInfoStatsProps extends MediaInfoStatsOpts {
+    className?: string;
+    infoclass?: string;
+    item: ItemDto;
+}
+
+const MediaInfoStats: FC<MediaInfoStatsProps> = ({
+    className,
+    infoclass,
+    item,
+    showResolutionInfo,
+    showVideoStreamCodecInfo,
+    showAudoChannelInfo,
+    showAudioStreamCodecInfo,
+    showDateAddedInfo
+}) => {
+    const mediaInfoStats = useMediaInfoStats({
+        item,
+        showResolutionInfo,
+        showVideoStreamCodecInfo,
+        showAudoChannelInfo,
+        showAudioStreamCodecInfo,
+        showDateAddedInfo
+    });
+
+    const cssClass = classNames(className);
+
+    const renderMediaInfo = (info: MiscInfo, index: number) => (
+        <MediaInfoItem key={index} className={infoclass} miscInfo={info} />
+    );
+
+    return (
+        <Box className={cssClass}>
+            {mediaInfoStats.map((info, index) => renderMediaInfo(info, index))}
+        </Box>
+    );
+};
+
+export default MediaInfoStats;

src/components/mediainfo/PrimaryMediaInfo.tsx

@@ -12,54 +12,59 @@ import EndsAt from './EndsAt';
 import { ItemMediaKind } from 'types/base/models/item-media-kind';
 import type { ItemDto } from 'types/base/models/item-dto';
 import type { MiscInfo } from 'types/mediaInfoItem';
+import type { PrimaryInfoOpts } from './type';
 
-interface PrimaryMediaInfoProps {
+interface PrimaryMediaInfoProps extends PrimaryInfoOpts {
     className?: string;
+    infoclass?: string;
     item: ItemDto;
-    isYearEnabled?: boolean;
-    isContainerEnabled?: boolean;
-    isEpisodeTitleEnabled?: boolean;
-    isCriticRatingEnabled?: boolean;
-    isEndsAtEnabled?: boolean;
-    isOriginalAirDateEnabled?: boolean;
-    isRuntimeEnabled?: boolean;
-    isProgramIndicatorEnabled?: boolean;
-    isEpisodeTitleIndexNumberEnabled?: boolean;
-    isOfficialRatingEnabled?: boolean;
-    isStarRatingEnabled?: boolean;
-    isCaptionIndicatorEnabled?: boolean;
-    isMissingIndicatorEnabled?: boolean;
-    getMissingIndicator: () => React.JSX.Element | null
+    showStarRatingInfo?: boolean;
+    showCaptionIndicatorInfo?: boolean;
+    showCriticRatingInfo?: boolean;
+    showEndsAtInfo?: boolean;
+    getMissingIndicator?: () => React.JSX.Element | null;
 }
 
 const PrimaryMediaInfo: FC<PrimaryMediaInfoProps> = ({
     className,
+    infoclass,
     item,
-    isYearEnabled = false,
-    isContainerEnabled = false,
-    isEpisodeTitleEnabled = false,
-    isCriticRatingEnabled = false,
-    isEndsAtEnabled = false,
-    isOriginalAirDateEnabled = false,
-    isRuntimeEnabled = false,
-    isProgramIndicatorEnabled = false,
-    isEpisodeTitleIndexNumberEnabled = false,
-    isOfficialRatingEnabled = false,
-    isStarRatingEnabled = false,
-    isCaptionIndicatorEnabled = false,
-    isMissingIndicatorEnabled = false,
+    showYearInfo,
+    showAudioContainerInfo,
+    showEpisodeTitleInfo,
+    showOriginalAirDateInfo,
+    showFolderRuntimeInfo,
+    showRuntimeInfo,
+    showItemCountInfo,
+    showSeriesTimerInfo,
+    showStartDateInfo,
+    showProgramIndicatorInfo,
+    includeEpisodeTitleIndexNumber,
+    showOfficialRatingInfo,
+    showVideo3DFormatInfo,
+    showPhotoSizeInfo,
+    showStarRatingInfo = false,
+    showCaptionIndicatorInfo = false,
+    showCriticRatingInfo = false,
+    showEndsAtInfo = false,
     getMissingIndicator
 }) => {
     const miscInfo = usePrimaryMediaInfo({
         item,
-        isYearEnabled,
-        isContainerEnabled,
-        isEpisodeTitleEnabled,
-        isOriginalAirDateEnabled,
-        isRuntimeEnabled,
-        isProgramIndicatorEnabled,
-        isEpisodeTitleIndexNumberEnabled,
-        isOfficialRatingEnabled
+        showYearInfo,
+        showAudioContainerInfo,
+        showEpisodeTitleInfo,
+        showOriginalAirDateInfo,
+        showFolderRuntimeInfo,
+        showRuntimeInfo,
+        showItemCountInfo,
+        showSeriesTimerInfo,
+        showStartDateInfo,
+        showProgramIndicatorInfo,
+        includeEpisodeTitleIndexNumber,
+        showOfficialRatingInfo,
+        showVideo3DFormatInfo,
+        showPhotoSizeInfo
     });
     const {
         StartDate,
@@ -72,32 +77,40 @@ const PrimaryMediaInfo: FC<PrimaryMediaInfoProps> = ({
 
     const cssClass = classNames(className);
 
-    const renderMediaInfo = (info: MiscInfo | undefined, index: number) => (
-        <MediaInfoItem key={index} miscInfo={info} />
+    const renderMediaInfo = (info: MiscInfo, index: number) => (
+        <MediaInfoItem key={index} className={infoclass} miscInfo={info} />
     );
 
     return (
         <Box className={cssClass}>
             {miscInfo.map((info, index) => renderMediaInfo(info, index))}
 
-            {isStarRatingEnabled && CommunityRating && (
-                <StarIcons communityRating={CommunityRating} />
+            {showStarRatingInfo && CommunityRating && (
+                <StarIcons
+                    className={infoclass}
+                    communityRating={CommunityRating}
+                />
             )}
 
-            {HasSubtitles && isCaptionIndicatorEnabled && <CaptionMediaInfo />}
+            {showCaptionIndicatorInfo && HasSubtitles && (
+                <CaptionMediaInfo className={infoclass} />
+            )}
 
-            {CriticRating && isCriticRatingEnabled && (
-                <CriticRatingMediaInfo criticRating={CriticRating} />
+            {showCriticRatingInfo && CriticRating && (
+                <CriticRatingMediaInfo
+                    className={infoclass}
+                    criticRating={CriticRating}
+                />
             )}
 
-            {isEndsAtEnabled
+            {showEndsAtInfo
                 && MediaType === ItemMediaKind.Video
                 && RunTimeTicks
-                && !StartDate && <EndsAt runTimeTicks={RunTimeTicks} />}
-
-            {isMissingIndicatorEnabled && (
-                getMissingIndicator()
+                && !StartDate && (
+                <EndsAt className={infoclass} runTimeTicks={RunTimeTicks} />
             )}
+
+            {getMissingIndicator?.()}
         </Box>
     );
 };

src/components/mediainfo/SecondaryMediaInfo.tsx

@@ -0,0 +1,55 @@
+import React, { type FC } from 'react';
+import classNames from 'classnames';
+import Box from '@mui/material/Box';
+import useSecondaryMediaInfo from './useSecondaryMediaInfo';
+import useIndicator from 'components/indicators/useIndicator';
+import MediaInfoItem from './MediaInfoItem';
+import type { ItemDto } from 'types/base/models/item-dto';
+import { MiscInfo } from 'types/mediaInfoItem';
+import type { SecondaryInfoOpts } from './type';
+
+interface SecondaryMediaInfoProps extends SecondaryInfoOpts {
+    className?: string;
+    infoclass?: string;
+    item: ItemDto;
+    showTimerIndicatorInfo?: boolean;
+}
+
+const SecondaryMediaInfo: FC<SecondaryMediaInfoProps> = ({
+    className,
+    infoclass,
+    item,
+    showProgramTimeInfo,
+    showStartDateInfo,
+    showChannelNumberInfo,
+    showChannelInfo,
+    channelInteractive,
+    showTimerIndicatorInfo = false
+}) => {
+    const miscInfo = useSecondaryMediaInfo({
+        item,
+        showProgramTimeInfo,
+        showStartDateInfo,
+        showChannelNumberInfo,
+        showChannelInfo,
+        channelInteractive
+    });
+
+    const indicator = useIndicator(item);
+
+    const cssClass = classNames(className);
+
+    const renderMediaInfo = (info: MiscInfo, index: number) => (
+        <MediaInfoItem key={index} className={infoclass} miscInfo={info} />
+    );
+
+    return (
+        <Box className={cssClass}>
+            {miscInfo.map((info, index) => renderMediaInfo(info, index))}
+
+            {showTimerIndicatorInfo !== false && indicator.getTimerIndicator()}
+        </Box>
+    );
+};
+
+export default SecondaryMediaInfo;

src/components/mediainfo/StarIcons.tsx

@@ -13,16 +13,18 @@ const StarIcons: FC<StarIconsProps> = ({ className, communityRating }) => {
     const theme = useTheme();
     const cssClass = classNames(
         'mediaInfoItem',
-        'mediaInfoText',
         'starRatingContainer',
         className
     );
 
     return (
         <Box className={cssClass}>
-            <StarIcon fontSize={'small'} sx={{
-                color: theme.palette.starIcon.main
-            }} />
+            <StarIcon
+                fontSize={'small'}
+                sx={{
+                    color: theme.palette.starIcon.main
+                }}
+            />
             {communityRating.toFixed(1)}
         </Box>
     );