Add more options for PrimaryMediaInfo

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}
                     showRuntimeInfo
+                    showOfficialRatingInfo
+                    showOriginalAirDateInfo
                     showStarRatingInfo
                     showCaptionIndicatorInfo
-                    showEpisodeTitleInfo
-                    showOfficialRatingInfo
                     getMissingIndicator={indicator.getMissingIndicator}
                 />
             )}

src/components/listview/List/ListItemBody.tsx

@@ -61,6 +61,7 @@ const ListItemBody: FC<ListItemBodyProps> = ({
             {listOptions.showMediaInfo !== false && !enableSideMediaInfo && (
                 <PrimaryMediaInfo
                     className='secondary listItemMediaInfo listItemBodyText'
+                    infoclass='mediaInfoText'
                     item={item}
                     showEpisodeTitleInfo
                     showOriginalAirDateInfo

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

@@ -12,7 +12,6 @@ interface MediaInfoItemProps {
 const MediaInfoItem: FC<MediaInfoItemProps> = ({ className, miscInfo }) => {
     const cssClass = classNames(
         'mediaInfoItem',
-        'mediaInfoText',
         className,
         miscInfo?.cssClass
     );

src/components/mediainfo/PrimaryMediaInfo.tsx

@@ -16,26 +16,34 @@ import type { PrimaryInfoOpts } from './type';
 
 interface PrimaryMediaInfoProps extends PrimaryInfoOpts {
     className?: string;
+    infoclass?: string;
     item: ItemDto;
     showStarRatingInfo?: boolean;
     showCaptionIndicatorInfo?: boolean;
     showCriticRatingInfo?: boolean;
     showEndsAtInfo?: boolean;
     showMissingIndicatorInfo?: boolean;
-    getMissingIndicator?: () => React.JSX.Element | null
+    getMissingIndicator?: () => React.JSX.Element | null;
 }
 
 const PrimaryMediaInfo: FC<PrimaryMediaInfoProps> = ({
     className,
+    infoclass,
     item,
     showYearInfo,
     showAudioContainerInfo,
     showEpisodeTitleInfo,
     showOriginalAirDateInfo,
+    showFolderRuntimeInfo,
     showRuntimeInfo,
+    showItemCountInfo,
+    showSeriesTimerInfo,
+    showStartDateInfo,
     showProgramIndicatorInfo,
     includeEpisodeTitleIndexNumber,
     showOfficialRatingInfo,
+    showVideo3DFormatInfo,
+    showPhotoSizeInfo,
     showStarRatingInfo = false,
     showCaptionIndicatorInfo = false,
     showCriticRatingInfo = false,
@@ -48,10 +56,16 @@ const PrimaryMediaInfo: FC<PrimaryMediaInfoProps> = ({
         showAudioContainerInfo,
         showEpisodeTitleInfo,
         showOriginalAirDateInfo,
+        showFolderRuntimeInfo,
         showRuntimeInfo,
+        showItemCountInfo,
+        showSeriesTimerInfo,
+        showStartDateInfo,
         showProgramIndicatorInfo,
         includeEpisodeTitleIndexNumber,
-        showOfficialRatingInfo
+        showOfficialRatingInfo,
+        showVideo3DFormatInfo,
+        showPhotoSizeInfo
     });
     const {
         StartDate,
@@ -64,8 +78,8 @@ const PrimaryMediaInfo: FC<PrimaryMediaInfoProps> = ({
 
     const cssClass = classNames(className);
 
-    const renderMediaInfo = (info: MiscInfo | undefined, index: number) => (
+    const renderMediaInfo = (info: MiscInfo, index: number) => (
-        <MediaInfoItem key={index} miscInfo={info} />
+        <MediaInfoItem key={index} className={infoclass} miscInfo={info} />
     );
 
     return (
@@ -73,19 +87,29 @@ const PrimaryMediaInfo: FC<PrimaryMediaInfoProps> = ({
             {miscInfo.map((info, index) => renderMediaInfo(info, index))}
 
             {showStarRatingInfo && CommunityRating && (
-                <StarIcons communityRating={CommunityRating} />
+                <StarIcons
+                    className={infoclass}
+                    communityRating={CommunityRating}
+                />
             )}
 
-            {showCaptionIndicatorInfo && HasSubtitles && <CaptionMediaInfo />}
+            {showCaptionIndicatorInfo && HasSubtitles && (
+                <CaptionMediaInfo className={infoclass} />
+            )}
 
             {showCriticRatingInfo && CriticRating && (
-                <CriticRatingMediaInfo criticRating={CriticRating} />
+                <CriticRatingMediaInfo
+                    className={infoclass}
+                    criticRating={CriticRating}
+                />
             )}
 
             {showEndsAtInfo
                 && MediaType === ItemMediaKind.Video
                 && RunTimeTicks
-                && !StartDate && <EndsAt runTimeTicks={RunTimeTicks} />}
+                && !StartDate && (
+                <EndsAt className={infoclass} runTimeTicks={RunTimeTicks} />
+            )}
 
             {getMissingIndicator?.()}
         </Box>

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={{
+            <StarIcon
-                color: theme.palette.starIcon.main
+                fontSize={'small'}
-            }} />
+                sx={{
+                    color: theme.palette.starIcon.main
+                }}
+            />
             {communityRating.toFixed(1)}
         </Box>
     );

src/components/mediainfo/mediainfo.js

@@ -271,7 +271,7 @@ export function getMediaInfoHtml(item, options = {}) {
     if (options.officialRating !== false && item.OfficialRating && item.Type !== 'Season' && item.Type !== 'Episode') {
         miscInfo.push({
             text: item.OfficialRating,
-            cssClass: 'mediaInfoOfficialRating'
+            cssClass: 'mediaInfoText mediaInfoOfficialRating'
         });
     }
 

src/components/mediainfo/mediainfo.scss

@@ -46,8 +46,6 @@
     align-items: center;
     justify-content: center;
     vertical-align: middle;
-    padding-top: 0;
-    padding-bottom: 0;
 }
 
 .starIcon {
@@ -94,15 +92,3 @@
 .closedCaptionMediaInfoText {
     font-weight: bold;
 }
-
-.mediaInfoOfficialRating {
-    border: 0.09em solid currentColor;
-    padding: 0 0.6em;
-    height: 1.3em;
-    line-height: 1.8em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.1em;
-    font-size: 96%;
-}

src/components/mediainfo/type.ts

@@ -4,7 +4,13 @@ export interface PrimaryInfoOpts {
     showEpisodeTitleInfo?: boolean;
     includeEpisodeTitleIndexNumber?: boolean;
     showOriginalAirDateInfo?: boolean;
+    showFolderRuntimeInfo?: boolean;
     showRuntimeInfo?: boolean;
+    showItemCountInfo?: boolean;
+    showSeriesTimerInfo?: boolean;
+    showStartDateInfo?: boolean;
     showProgramIndicatorInfo?: boolean;
     showOfficialRatingInfo?: boolean;
+    showVideo3DFormatInfo?: boolean;
+    showPhotoSizeInfo?: boolean;
 }

src/components/mediainfo/usePrimaryMediaInfo.tsx

@@ -6,42 +6,53 @@ import itemHelper from '../itemHelper';
 import { ItemKind } from 'types/base/models/item-kind';
 import { ItemMediaKind } from 'types/base/models/item-media-kind';
 import { ItemStatus } from 'types/base/models/item-status';
-import type { NullableNumber, NullableString } from 'types/base/common/shared/types';
+import type {
+    NullableNumber,
+    NullableString
+} from 'types/base/common/shared/types';
 import type { ItemDto } from 'types/base/models/item-dto';
 import type { MiscInfo } from 'types/mediaInfoItem';
 import { PrimaryInfoOpts } from './type';
 
 function shouldShowFolderRuntime(
+    showFolderRuntimeInfo: boolean,
     itemType: ItemKind,
     itemMediaType: ItemMediaKind
 ): boolean {
     return (
-        itemType === ItemKind.MusicAlbum
+        showFolderRuntimeInfo
-        || itemMediaType === ItemMediaKind.MusicArtist
+        && (itemType === ItemKind.MusicAlbum
-        || itemType === ItemKind.Playlist
+            || itemMediaType === ItemMediaKind.MusicArtist
-        || itemMediaType === ItemMediaKind.Playlist
+            || itemType === ItemKind.Playlist
-        || itemMediaType === ItemMediaKind.MusicGenre
+            || itemMediaType === ItemMediaKind.Playlist
+            || itemMediaType === ItemMediaKind.MusicGenre)
     );
 }
 
 function addTrackCountOrItemCount(
-    showFolderRuntime: boolean,
+    isFolderRuntimeEnabled: boolean,
+    showItemCountInfo: boolean,
     itemSongCount: NullableNumber,
     itemChildCount: NullableNumber,
     itemRunTimeTicks: NullableNumber,
     itemType: ItemKind,
     addMiscInfo: (val: MiscInfo) => void
 ): void {
-    if (showFolderRuntime) {
+    if (isFolderRuntimeEnabled) {
-        const count = itemSongCount ?? itemChildCount;
+        const count = itemSongCount || itemChildCount;
         if (count) {
             addMiscInfo({ text: globalize.translate('TrackCount', count) });
         }
 
         if (itemRunTimeTicks) {
-            addMiscInfo({ text: datetime.getDisplayDuration(itemRunTimeTicks) });
+            addMiscInfo({
+                text: datetime.getDisplayDuration(itemRunTimeTicks)
+            });
         }
-    } else if (itemType === ItemKind.PhotoAlbum || itemType === ItemKind.BoxSet) {
+    } else if (
+        showItemCountInfo
+        && (itemType === ItemKind.PhotoAlbum || itemType === ItemKind.BoxSet)
+    ) {
         const count = itemChildCount;
         if (count) {
             addMiscInfo({ text: globalize.translate('ItemCount', count) });
@@ -50,16 +61,17 @@ function addTrackCountOrItemCount(
 }
 
 function addOriginalAirDateInfo(
+    showOriginalAirDateInfo: boolean,
     itemType: ItemKind,
     itemMediaType: ItemMediaKind,
-    showOriginalAirDateInfo: boolean,
     itemPremiereDate: NullableString,
     addMiscInfo: (val: MiscInfo) => void
 ): void {
     if (
-        itemPremiereDate
+        showOriginalAirDateInfo
-        && (itemType === ItemKind.Episode || itemMediaType === ItemMediaKind.Photo)
+        && (itemType === ItemKind.Episode
-        && showOriginalAirDateInfo
+            || itemMediaType === ItemMediaKind.Photo)
+        && itemPremiereDate
     ) {
         try {
             //don't modify date to locale if episode. Only Dates (not times) are stored, or editable in the edit metadata dialog
@@ -75,6 +87,7 @@ function addOriginalAirDateInfo(
 }
 
 function addSeriesTimerInfo(
+    showSeriesTimerInfo: boolean,
     itemType: ItemKind,
     itemRecordAnyTime: boolean | undefined,
     itemStartDate: NullableString,
@@ -82,7 +95,7 @@ function addSeriesTimerInfo(
     itemChannelName: NullableString,
     addMiscInfo: (val: MiscInfo) => void
 ): void {
-    if (itemType === ItemKind.SeriesTimer) {
+    if (showSeriesTimerInfo && itemType === ItemKind.SeriesTimer) {
         if (itemRecordAnyTime) {
             addMiscInfo({ text: globalize.translate('Anytime') });
         } else {
@@ -93,7 +106,7 @@ function addSeriesTimerInfo(
             addMiscInfo({ text: globalize.translate('AllChannels') });
         } else {
             addMiscInfo({
-                text: itemChannelName ?? globalize.translate('OneChannel')
+                text: itemChannelName || globalize.translate('OneChannel')
             });
         }
     }
@@ -141,12 +154,12 @@ function addProgramIndicatorInfo(
 }
 
 function addProgramIndicators(
-    item: ItemDto,
     showYearInfo: boolean,
     showEpisodeTitleInfo: boolean,
     showOriginalAirDateInfo: boolean,
     showProgramIndicatorInfo: boolean,
     includeEpisodeTitleIndexNumber: boolean,
+    item: ItemDto,
     addMiscInfo: (val: MiscInfo) => void
 ): void {
     if (item.Type === ItemKind.Program || item.Type === ItemKind.Timer) {
@@ -155,33 +168,30 @@ function addProgramIndicators(
             program = item.ProgramInfo;
         }
 
-        if (showProgramIndicatorInfo !== false) {
+        if (showProgramIndicatorInfo) {
             addProgramIndicatorInfo(program, addMiscInfo);
         }
 
         addProgramTextInfo(
-            program,
             showEpisodeTitleInfo,
             includeEpisodeTitleIndexNumber,
             showOriginalAirDateInfo,
             showYearInfo,
+            program,
             addMiscInfo
         );
     }
 }
 
 function addProgramTextInfo(
-    program: ItemDto,
     showEpisodeTitleInfo: boolean,
     includeEpisodeTitleIndexNumber: boolean,
     showOriginalAirDateInfo: boolean,
     showYearInfo: boolean,
+    program: ItemDto,
     addMiscInfo: (val: MiscInfo) => void
 ): void {
-    if (
+    if (showEpisodeTitleInfo && (program.IsSeries || program.EpisodeTitle)) {
-        (program?.IsSeries || program?.EpisodeTitle)
-        && showEpisodeTitleInfo !== false
-    ) {
         const text = itemHelper.getDisplayName(program, {
             includeIndexNumber: includeEpisodeTitleIndexNumber
         });
@@ -190,12 +200,11 @@ function addProgramTextInfo(
             addMiscInfo({ text: text });
         }
     } else if (
-        program?.ProductionYear
+        ((showOriginalAirDateInfo && program.IsMovie) || showYearInfo)
-        && ((program?.IsMovie && showOriginalAirDateInfo !== false)
+        && program.ProductionYear
-            || showYearInfo !== false)
     ) {
         addMiscInfo({ text: program.ProductionYear });
-    } else if (program?.PremiereDate && showOriginalAirDateInfo !== false) {
+    } else if (showOriginalAirDateInfo && program.PremiereDate) {
         try {
             const date = datetime.parseISO8601Date(program.PremiereDate);
             const text = globalize.translate(
@@ -210,12 +219,14 @@ function addProgramTextInfo(
 }
 
 function addStartDateInfo(
+    showStartDateInfo: boolean,
     itemStartDate: NullableString,
     itemType: ItemKind,
     addMiscInfo: (val: MiscInfo) => void
 ): void {
     if (
-        itemStartDate
+        showStartDateInfo
+        && itemStartDate
         && itemType !== ItemKind.Program
         && itemType !== ItemKind.SeriesTimer
         && itemType !== ItemKind.Timer
@@ -234,14 +245,14 @@ function addStartDateInfo(
 }
 
 function addSeriesProductionYearInfo(
+    showYearInfo: boolean,
     itemProductionYear: NullableNumber,
     itemType: ItemKind,
-    showYearInfo: boolean,
     itemStatus: ItemStatus,
     itemEndDate: NullableString,
     addMiscInfo: (val: MiscInfo) => void
 ): void {
-    if (itemProductionYear && showYearInfo && itemType === ItemKind.Series) {
+    if (showYearInfo && itemProductionYear && itemType === ItemKind.Series) {
         if (itemStatus === ItemStatus.Continuing) {
             addMiscInfo({
                 text: globalize.translate(
@@ -252,7 +263,11 @@ function addSeriesProductionYearInfo(
                 )
             });
         } else {
-            addproductionYearWithEndDate(itemProductionYear, itemEndDate, addMiscInfo);
+            addproductionYearWithEndDate(
+                itemProductionYear,
+                itemEndDate,
+                addMiscInfo
+            );
         }
     }
 }
@@ -317,47 +332,52 @@ function addYearInfo(
 }
 
 function addVideo3DFormat(
+    showVideo3DFormatInfo: boolean,
     itemVideo3DFormat: NullableString,
     addMiscInfo: (val: MiscInfo) => void
 ): void {
-    if (itemVideo3DFormat) {
+    if (showVideo3DFormatInfo && itemVideo3DFormat) {
         addMiscInfo({ text: '3D' });
     }
 }
 
 function addRunTimeInfo(
+    isFolderRuntimeEnabled: boolean,
+    showRuntimeInfo: boolean,
     itemRunTimeTicks: NullableNumber,
     itemType: ItemKind,
-    showFolderRuntime: boolean,
-    showRuntimeInfo: boolean,
     addMiscInfo: (val: MiscInfo) => void
 ): void {
     if (
-        itemRunTimeTicks
+        !isFolderRuntimeEnabled
+        && showRuntimeInfo
+        && itemRunTimeTicks
         && itemType !== ItemKind.Series
         && itemType !== ItemKind.Program
         && itemType !== ItemKind.Timer
         && itemType !== ItemKind.Book
-        && !showFolderRuntime
-        && showRuntimeInfo
     ) {
         if (itemType === ItemKind.Audio) {
-            addMiscInfo({ text: datetime.getDisplayRunningTime(itemRunTimeTicks) });
+            addMiscInfo({
+                text: datetime.getDisplayRunningTime(itemRunTimeTicks)
+            });
         } else {
-            addMiscInfo({ text: datetime.getDisplayDuration(itemRunTimeTicks) });
+            addMiscInfo({
+                text: datetime.getDisplayDuration(itemRunTimeTicks)
+            });
         }
     }
 }
 
 function addOfficialRatingInfo(
+    showOfficialRatingInfo: boolean,
     itemOfficialRating: NullableString,
     itemType: ItemKind,
-    showOfficialRatingInfo: boolean,
     addMiscInfo: (val: MiscInfo) => void
 ): void {
     if (
-        itemOfficialRating
+        showOfficialRatingInfo
-        && showOfficialRatingInfo
+        && itemOfficialRating
         && itemType !== ItemKind.Season
         && itemType !== ItemKind.Episode
     ) {
@@ -369,14 +389,14 @@ function addOfficialRatingInfo(
 }
 
 function addAudioContainer(
-    itemContainer: NullableString,
     showAudioContainerInfo: boolean,
+    itemContainer: NullableString,
     itemType: ItemKind,
     addMiscInfo: (val: MiscInfo) => void
 ): void {
     if (
-        itemContainer
+        showAudioContainerInfo
-        && showAudioContainerInfo
+        && itemContainer
         && itemType === ItemKind.Audio
     ) {
         addMiscInfo({ text: itemContainer });
@@ -384,12 +404,18 @@ function addAudioContainer(
 }
 
 function addPhotoSize(
+    showPhotoSizeInfo: boolean,
     itemMediaType: ItemMediaKind,
     itemWidth: NullableNumber,
     itemHeight: NullableNumber,
     addMiscInfo: (val: MiscInfo) => void
 ): void {
-    if (itemMediaType === ItemMediaKind.Photo && itemWidth && itemHeight) {
+    if (
+        showPhotoSizeInfo
+        && itemMediaType === ItemMediaKind.Photo
+        && itemWidth
+        && itemHeight
+    ) {
         const size = `${itemWidth}x${itemHeight}`;
 
         addMiscInfo({ text: size });
@@ -406,10 +432,16 @@ function usePrimaryMediaInfo({
     showAudioContainerInfo = false,
     showEpisodeTitleInfo = false,
     showOriginalAirDateInfo = false,
+    showFolderRuntimeInfo = false,
     showRuntimeInfo = false,
+    showItemCountInfo = false,
+    showSeriesTimerInfo = false,
+    showStartDateInfo = false,
     showProgramIndicatorInfo = false,
     includeEpisodeTitleIndexNumber = false,
-    showOfficialRatingInfo = false
+    showOfficialRatingInfo = false,
+    showVideo3DFormatInfo = false,
+    showPhotoSizeInfo = false
 }: UsePrimaryMediaInfoProps) {
     const {
         EndDate,
@@ -440,10 +472,15 @@ function usePrimaryMediaInfo({
         }
     };
 
-    const showFolderRuntime = shouldShowFolderRuntime(Type, MediaType);
+    const isFolderRuntimeEnabled = shouldShowFolderRuntime(
+        showFolderRuntimeInfo,
+        Type,
+        MediaType
+    );
 
     addTrackCountOrItemCount(
-        showFolderRuntime,
+        isFolderRuntimeEnabled,
+        showItemCountInfo,
         SongCount,
         ChildCount,
         RunTimeTicks,
@@ -452,14 +489,15 @@ function usePrimaryMediaInfo({
     );
 
     addOriginalAirDateInfo(
+        showOriginalAirDateInfo,
         Type,
         MediaType,
-        showOriginalAirDateInfo,
         PremiereDate,
         addMiscInfo
     );
 
     addSeriesTimerInfo(
+        showSeriesTimerInfo,
         Type,
         RecordAnyTime,
         StartDate,
@@ -468,24 +506,24 @@ function usePrimaryMediaInfo({
         addMiscInfo
     );
 
-    addStartDateInfo(StartDate, Type, addMiscInfo);
+    addStartDateInfo(showStartDateInfo, StartDate, Type, addMiscInfo);
 
     addSeriesProductionYearInfo(
+        showYearInfo,
         ProductionYear,
         Type,
-        showYearInfo,
         Status,
         EndDate,
         addMiscInfo
     );
 
     addProgramIndicators(
-        item,
         showProgramIndicatorInfo,
         showEpisodeTitleInfo,
         includeEpisodeTitleIndexNumber,
         showOriginalAirDateInfo,
         showYearInfo,
+        item,
         addMiscInfo
     );
 
@@ -499,25 +537,25 @@ function usePrimaryMediaInfo({
     );
 
     addRunTimeInfo(
+        isFolderRuntimeEnabled,
+        showRuntimeInfo,
         RunTimeTicks,
         Type,
-        showFolderRuntime,
-        showRuntimeInfo,
         addMiscInfo
     );
 
     addOfficialRatingInfo(
+        showOfficialRatingInfo,
         OfficialRating,
         Type,
-        showOfficialRatingInfo,
         addMiscInfo
     );
 
-    addVideo3DFormat(Video3DFormat, addMiscInfo);
+    addVideo3DFormat(showVideo3DFormatInfo, Video3DFormat, addMiscInfo);
 
-    addPhotoSize(MediaType, Width, Height, addMiscInfo);
+    addPhotoSize(showPhotoSizeInfo, MediaType, Width, Height, addMiscInfo);
 
-    addAudioContainer(Container, showAudioContainerInfo, Type, addMiscInfo);
+    addAudioContainer(showAudioContainerInfo, Container, Type, addMiscInfo);
 
     return miscInfo;
 }