feat(ui): add media type badge to poster view

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 (
+    <Label
+      className={className}
+      kind={getKindForMediaType(mediaType)}
+      size={sizes.SMALL}
+    >
+      {getLabelForMediaType(mediaType)}
+    </Label>
+  );
+}
+
+export default MediaTypeBadge;

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) {
         </div>
       ) : null}
 
+      {mediaType && mediaType !== 'movie' ? (
+        <div className={styles.title}>
+          <MediaTypeBadge mediaType={mediaType} />
+        </div>
+      ) : null}
+
       {showMonitored ? (
         <div className={styles.title}>
           {monitored ? translate('Monitored') : translate('Unmonitored')}

frontend/src/Movie/Movie.ts

@@ -4,6 +4,8 @@ import { MovieFile } from 'MovieFile/MovieFile';
 
 export type MovieMonitor = 'movieOnly' | 'movieAndCollection' | 'none';
 
+export type MediaType = 'movie' | 'book' | 'audiobook';
+
 export type MovieStatus =
   | 'tba'
   | 'announced'
@@ -58,6 +60,7 @@ export interface MovieAddOptions {
 interface Movie extends ModelBase {
   tmdbId: number;
   imdbId?: string;
+  mediaType?: MediaType;
   sortTitle: string;
   overview: string;
   youTubeTrailerId?: string;

src/NzbDrone.Core/Localization/Core/en.json

@@ -97,6 +97,7 @@
   "AptUpdater": "Use apt to install the update",
   "AudioInfo": "Audio Info",
   "AudioLanguages": "Audio Languages",
+  "Audiobook": "Audiobook",
   "AuthBasic": "Basic (Browser Popup)",
   "AuthForm": "Forms (Login Page)",
   "Authentication": "Authentication",
@@ -163,6 +164,7 @@
   "BlocklistReleases": "Blocklist Releases",
   "Blocklisted": "Blocklisted",
   "BlocklistedAt": "Blocklisted at {date}",
+  "Book": "Book",
   "Branch": "Branch",
   "BranchUpdate": "Branch to use to update {appName}",
   "BranchUpdateMechanism": "Branch used by external update mechanism",