mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Add more options for PrimaryMediaInfo

Browse source
This commit is contained in:
grafixeyehero 2024-08-22 00:50:43 +03:00
parent a3eff3c0ae
commit fabfb9b173
12 changed files with 150 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/listview/List/ListContent.tsx
View file

@ -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}
/>
)}

1
src/components/listview/List/ListItemBody.tsx
View file

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

1
src/components/listview/listview.scss
View file

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

3
src/components/mediainfo/CaptionMediaInfo.tsx
View file

@ -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>
);
};

1
src/components/mediainfo/EndsAt.tsx
View file

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

1
src/components/mediainfo/MediaInfoItem.tsx
View file

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

40
src/components/mediainfo/PrimaryMediaInfo.tsx
View file

@ -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) => (
<MediaInfoItem key={index} miscInfo={info} />
const renderMediaInfo = (info: MiscInfo, index: number) => (
<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>

10
src/components/mediainfo/StarIcons.tsx
View file

@ -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>
);

2
src/components/mediainfo/mediainfo.js
View file

@ -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'
});
}

14
src/components/mediainfo/mediainfo.scss
View file

@ -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%;
}

6
src/components/mediainfo/type.ts
View file

@ -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;
}

160
src/components/mediainfo/usePrimaryMediaInfo.tsx
View file

@ -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;
}