✨ add default overseer image display

src/components/modules/calendar/MediaDisplay.tsx

@@ -11,13 +11,15 @@ export interface IMedia {
   poster?: string;
   genres: string[];
   seasonNumber?: number;
+  plexUrl?: string;
   episodeNumber?: number;
 }
-
+export function MediaDisplay(
-function MediaDisplay(props: { media: IMedia }) {
+  props: GroupProps & React.RefAttributes<HTMLDivElement> & { media: IMedia }
+) {
   const { media }: { media: IMedia } = props;
   return (
-    <Group position="apart">
+    <Group {...props} position="apart">
       <Text>
         {media.poster && (
           <Image
@@ -33,8 +35,17 @@ function MediaDisplay(props: { media: IMedia }) {
           />
         )}
         <Group direction="column">
-          <Group style={{ minWidth: 400 }}>
+          <Group style={{ minWidth: 400 }} align="end">
             <Title order={3}>{media.title}</Title>
+            {media.plexUrl && (
+              <Tooltip label="Open in Plex">
+                <Anchor href={media.plexUrl} target="_blank">
+                  <ActionIcon>
+                    <PlayerPlay />
+                  </ActionIcon>
+                </Anchor>
+              </Tooltip>
+            )}
             {media.imdbId && (
               <Anchor href={`https://www.imdb.com/title/${media.imdbId}`} target="_blank">
                 <ActionIcon>
@@ -53,14 +64,14 @@ function MediaDisplay(props: { media: IMedia }) {
               New release from {media.artist}
             </Text>
           )}
-          {media.episodeNumber && media.seasonNumber && (
+          {(media.episodeNumber || media.seasonNumber) && (
             <Text
               style={{
                 textAlign: 'center',
                 color: '#a0aec0',
               }}
             >
-              Season {media.seasonNumber} episode {media.episodeNumber}
+              Season {media.seasonNumber} {media.episodeNumber && `episode ${media.episodeNumber}`}
             </Text>
           )}
         </Group>

src/components/modules/overseerr/OverseerrMediaDisplay.tsx

@@ -0,0 +1,78 @@
+import { Card } from '@mantine/core';
+import { MediaDisplay } from '../calendar/MediaDisplay';
+
+export interface OverseerrMedia {
+  id: number;
+  firstAirDate: string;
+  genreIds: number[];
+  mediaType: string;
+  name: string;
+  originCountry: string[];
+  originalLanguage: string;
+  originalName: string;
+  overview: string;
+  popularity: number;
+  voteAverage: number;
+  voteCount: number;
+  backdropPath: string;
+  posterPath: string;
+  mediaInfo: MediaInfo;
+}
+
+export interface MediaInfo {
+  downloadStatus: any[];
+  downloadStatus4k: any[];
+  id: number;
+  mediaType: string;
+  tmdbId: number;
+  tvdbId: number;
+  imdbId: null;
+  status: number;
+  status4k: number;
+  createdAt: string;
+  updatedAt: string;
+  lastSeasonChange: string;
+  mediaAddedAt: string;
+  serviceId: number;
+  serviceId4k: null;
+  externalServiceId: number;
+  externalServiceId4k: null;
+  externalServiceSlug: string;
+  externalServiceSlug4k: null;
+  ratingKey: string;
+  ratingKey4k: null;
+  seasons: Season[];
+  plexUrl: string;
+  serviceUrl: string;
+}
+
+export interface Season {
+  id: number;
+  seasonNumber: number;
+  status: number;
+  status4k: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export default function OverseerrMediaDisplay(props: any) {
+  const { media }: { media: OverseerrMedia } = props;
+  return (
+    <Card shadow="xl" withBorder>
+      <MediaDisplay
+        style={{
+          width: 600,
+        }}
+        media={{
+          title: media.name,
+          seasonNumber: media.mediaInfo.seasons.length + 1,
+          overview: media.overview,
+          plexUrl: media.mediaInfo.plexUrl,
+          imdbId: media.mediaInfo.imdbId,
+          poster: `https://image.tmdb.org/t/p/w600_and_h900_bestv2/${media.posterPath}`,
+          genres: [`score: ${media.voteAverage}/10`],
+        }}
+      />
+    </Card>
+  );
+}

src/components/modules/overseerr/example.json

@@ -0,0 +1,72 @@
+{
+	"id": 86831,
+	"firstAirDate": "2019-03-15",
+	"genreIds": [
+		16,
+		10765
+	],
+	"mediaType": "tv",
+	"name": "Love, Death & Robots",
+	"originCountry": [
+		"US"
+	],
+	"originalLanguage": "en",
+	"originalName": "Love, Death & Robots",
+	"overview": "Terrifying creatures, wicked surprises and dark comedy converge in this NSFW anthology of animated stories presented by Tim Miller and David Fincher.",
+	"popularity": 623.833,
+	"voteAverage": 8.2,
+	"voteCount": 1720,
+	"backdropPath": "/78NtUwwo3lhH7QGh4vG3U1qK1mc.jpg",
+	"posterPath": "/cRiDlzzZC5lL7fvImuSjs04SUIJ.jpg",
+	"mediaInfo": {
+		"downloadStatus": [],
+		"downloadStatus4k": [],
+		"id": 79,
+		"mediaType": "tv",
+		"tmdbId": 86831,
+		"tvdbId": 357888,
+		"imdbId": null,
+		"status": 4,
+		"status4k": 1,
+		"createdAt": "2022-02-05T04:30:01.000Z",
+		"updatedAt": "2022-02-05T09:25:22.000Z",
+		"lastSeasonChange": "2022-02-05T04:30:01.000Z",
+		"mediaAddedAt": "2022-02-04T01:16:35.000Z",
+		"serviceId": 0,
+		"serviceId4k": null,
+		"externalServiceId": 7,
+		"externalServiceId4k": null,
+		"externalServiceSlug": "love-death-and-robots",
+		"externalServiceSlug4k": null,
+		"ratingKey": "182",
+		"ratingKey4k": null,
+		"seasons": [
+			{
+				"id": 11,
+				"seasonNumber": 1,
+				"status": 1,
+				"status4k": 1,
+				"createdAt": "2022-02-05T04:30:01.000Z",
+				"updatedAt": "2022-02-05T04:30:01.000Z"
+			},
+			{
+				"id": 24,
+				"seasonNumber": 2,
+				"status": 5,
+				"status4k": 1,
+				"createdAt": "2022-02-05T04:30:01.000Z",
+				"updatedAt": "2022-02-05T04:30:01.000Z"
+			},
+			{
+				"id": 85,
+				"seasonNumber": 3,
+				"status": 3,
+				"status4k": 1,
+				"createdAt": "2022-04-26T04:30:02.000Z",
+				"updatedAt": "2022-04-26T04:30:02.000Z"
+			}
+		],
+		"plexUrl": "https://app.plex.tv/desktop#!/server/5b88b3c20d2d092c0ee848f9044f3f3bee033d91/details?key=%2Flibrary%2Fmetadata%2F182",
+		"serviceUrl": "http://server:8989/series/love-death-and-robots"
+	}
+}

src/pages/tryoverseerr.tsx

@@ -0,0 +1,13 @@
+import { Group, Title } from '@mantine/core';
+import OverseerrMediaDisplay, {
+  OverseerrMedia,
+} from '../components/modules/overseerr/OverseerrMediaDisplay';
+import media from '../components/modules/overseerr/example.json';
+
+export default function TryOverseerr() {
+  return (
+    <Group direction="column">
+      <OverseerrMediaDisplay media={media} />
+    </Group>
+  );
+}