diff --git a/frontend/src/Components/MediaTypeBadge.tsx b/frontend/src/Components/MediaTypeBadge.tsx new file mode 100644 index 0000000000..6b4f135fe5 --- /dev/null +++ b/frontend/src/Components/MediaTypeBadge.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import Label from 'Components/Label'; +import { kinds, sizes } from 'Helpers/Props'; +import { MediaType } from 'Movie/Movie'; +import translate from 'Utilities/String/translate'; + +interface MediaTypeBadgeProps { + mediaType?: MediaType; + className?: string; +} + +function getKindForMediaType(mediaType?: MediaType) { + switch (mediaType) { + case 'book': + return kinds.INFO; + case 'audiobook': + return kinds.SUCCESS; + case 'movie': + default: + return kinds.PRIMARY; + } +} + +function getLabelForMediaType(mediaType?: MediaType) { + switch (mediaType) { + case 'book': + return translate('Book'); + case 'audiobook': + return translate('Audiobook'); + case 'movie': + default: + return translate('Movie'); + } +} + +function MediaTypeBadge({ mediaType, className }: MediaTypeBadgeProps) { + return ( + + ); +} + +export default MediaTypeBadge; diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx index 9894478406..e6908d87b4 100644 --- a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx +++ b/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx @@ -7,6 +7,7 @@ import Label from 'Components/Label'; import IconButton from 'Components/Link/IconButton'; import Link from 'Components/Link/Link'; import SpinnerIconButton from 'Components/Link/SpinnerIconButton'; +import MediaTypeBadge from 'Components/MediaTypeBadge'; import MovieTagList from 'Components/MovieTagList'; import RottenTomatoRating from 'Components/RottenTomatoRating'; import TmdbRating from 'Components/TmdbRating'; @@ -90,6 +91,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) { originalTitle, originalLanguage, tags = [], + mediaType, } = movie; const { sizeOnDisk = 0 } = statistics; @@ -234,6 +236,12 @@ function MovieIndexPoster(props: MovieIndexPosterProps) { ) : null} + {mediaType && mediaType !== 'movie' ? ( +