diff --git a/src/components/listview/List/ListContent.tsx b/src/components/listview/List/ListContent.tsx index 4e257c5003..0b9bc03d01 100644 --- a/src/components/listview/List/ListContent.tsx +++ b/src/components/listview/List/ListContent.tsx @@ -78,12 +78,13 @@ const ListContent: FC = ({ {listOptions.showMediaInfo !== false && enableSideMediaInfo && ( )} diff --git a/src/components/listview/List/ListItemBody.tsx b/src/components/listview/List/ListItemBody.tsx index 93e90a5e32..90e9cb502e 100644 --- a/src/components/listview/List/ListItemBody.tsx +++ b/src/components/listview/List/ListItemBody.tsx @@ -61,6 +61,7 @@ const ListItemBody: FC = ({ {listOptions.showMediaInfo !== false && !enableSideMediaInfo && ( = ({ className }) => { const cssClass = classNames( 'mediaInfoItem', - 'mediaInfoText', 'closedCaptionMediaInfoText', className ); return ( - + ); }; diff --git a/src/components/mediainfo/EndsAt.tsx b/src/components/mediainfo/EndsAt.tsx index fa26d0801f..2f2f9f48a3 100644 --- a/src/components/mediainfo/EndsAt.tsx +++ b/src/components/mediainfo/EndsAt.tsx @@ -12,7 +12,6 @@ interface EndsAtProps { const EndsAt: FC = ({ runTimeTicks, className }) => { const cssClass = classNames( 'mediaInfoItem', - 'mediaInfoText', 'endsAt', className ); diff --git a/src/components/mediainfo/MediaInfoItem.tsx b/src/components/mediainfo/MediaInfoItem.tsx index d38635ac2d..8eeb7307ca 100644 --- a/src/components/mediainfo/MediaInfoItem.tsx +++ b/src/components/mediainfo/MediaInfoItem.tsx @@ -12,7 +12,6 @@ interface MediaInfoItemProps { const MediaInfoItem: FC = ({ className, miscInfo }) => { const cssClass = classNames( 'mediaInfoItem', - 'mediaInfoText', className, miscInfo?.cssClass ); diff --git a/src/components/mediainfo/PrimaryMediaInfo.tsx b/src/components/mediainfo/PrimaryMediaInfo.tsx index 5f8aca0941..2237198b0e 100644 --- a/src/components/mediainfo/PrimaryMediaInfo.tsx +++ b/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 = ({ 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 = ({ showAudioContainerInfo, showEpisodeTitleInfo, showOriginalAirDateInfo, + showFolderRuntimeInfo, showRuntimeInfo, + showItemCountInfo, + showSeriesTimerInfo, + showStartDateInfo, showProgramIndicatorInfo, includeEpisodeTitleIndexNumber, - showOfficialRatingInfo + showOfficialRatingInfo, + showVideo3DFormatInfo, + showPhotoSizeInfo }); const { StartDate, @@ -64,8 +78,8 @@ const PrimaryMediaInfo: FC = ({ const cssClass = classNames(className); - const renderMediaInfo = (info: MiscInfo | undefined, index: number) => ( - + const renderMediaInfo = (info: MiscInfo, index: number) => ( + ); return ( @@ -73,19 +87,29 @@ const PrimaryMediaInfo: FC = ({ {miscInfo.map((info, index) => renderMediaInfo(info, index))} {showStarRatingInfo && CommunityRating && ( - + )} - {showCaptionIndicatorInfo && HasSubtitles && } + {showCaptionIndicatorInfo && HasSubtitles && ( + + )} {showCriticRatingInfo && CriticRating && ( - + )} {showEndsAtInfo && MediaType === ItemMediaKind.Video && RunTimeTicks - && !StartDate && } + && !StartDate && ( + + )} {getMissingIndicator?.()} diff --git a/src/components/mediainfo/StarIcons.tsx b/src/components/mediainfo/StarIcons.tsx index 0d38453d7e..ca2a1859d4 100644 --- a/src/components/mediainfo/StarIcons.tsx +++ b/src/components/mediainfo/StarIcons.tsx @@ -13,16 +13,18 @@ const StarIcons: FC = ({ className, communityRating }) => { const theme = useTheme(); const cssClass = classNames( 'mediaInfoItem', - 'mediaInfoText', 'starRatingContainer', className ); return ( - + {communityRating.toFixed(1)} ); diff --git a/src/components/mediainfo/mediainfo.js b/src/components/mediainfo/mediainfo.js index 2fdc5d09bf..4ce337f586 100644 --- a/src/components/mediainfo/mediainfo.js +++ b/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' }); } diff --git a/src/components/mediainfo/mediainfo.scss b/src/components/mediainfo/mediainfo.scss index cb623b685d..668d1f4ed1 100644 --- a/src/components/mediainfo/mediainfo.scss +++ b/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%; -} diff --git a/src/components/mediainfo/type.ts b/src/components/mediainfo/type.ts index 4bb8aee9f8..0e20bf1394 100644 --- a/src/components/mediainfo/type.ts +++ b/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; } diff --git a/src/components/mediainfo/usePrimaryMediaInfo.tsx b/src/components/mediainfo/usePrimaryMediaInfo.tsx index 327fbc4412..49452ec6a9 100644 --- a/src/components/mediainfo/usePrimaryMediaInfo.tsx +++ b/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 - || itemMediaType === ItemMediaKind.MusicArtist - || itemType === ItemKind.Playlist - || itemMediaType === ItemMediaKind.Playlist - || itemMediaType === ItemMediaKind.MusicGenre + showFolderRuntimeInfo + && (itemType === ItemKind.MusicAlbum + || itemMediaType === ItemMediaKind.MusicArtist + || itemType === ItemKind.Playlist + || 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) { - const count = itemSongCount ?? itemChildCount; + if (isFolderRuntimeEnabled) { + 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 - && (itemType === ItemKind.Episode || itemMediaType === ItemMediaKind.Photo) - && showOriginalAirDateInfo + showOriginalAirDateInfo + && (itemType === ItemKind.Episode + || 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 ( - (program?.IsSeries || program?.EpisodeTitle) - && showEpisodeTitleInfo !== false - ) { + if (showEpisodeTitleInfo && (program.IsSeries || program.EpisodeTitle)) { const text = itemHelper.getDisplayName(program, { includeIndexNumber: includeEpisodeTitleIndexNumber }); @@ -190,12 +200,11 @@ function addProgramTextInfo( addMiscInfo({ text: text }); } } else if ( - program?.ProductionYear - && ((program?.IsMovie && showOriginalAirDateInfo !== false) - || showYearInfo !== false) + ((showOriginalAirDateInfo && program.IsMovie) || showYearInfo) + && program.ProductionYear ) { 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; }