mirror of
https://github.com/ajnart/homarr.git
synced 2025-11-12 08:25:47 +01:00
✨ add default overseer image display
This commit is contained in:
ajnart
@@ -11,13 +11,15 @@ export interface IMedia {
|
||||
poster?: string;
|
||||
genres: string[];
|
||||
seasonNumber?: number;
|
||||
plexUrl?: string;
|
||||
episodeNumber?: number;
|
||||
}
|
||||
|
||||
function MediaDisplay(props: { media: IMedia }) {
|
||||
export function MediaDisplay(
|
||||
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>
|
||||
|
||||
78
src/components/modules/overseerr/OverseerrMediaDisplay.tsx
Normal file
78
src/components/modules/overseerr/OverseerrMediaDisplay.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
72
src/components/modules/overseerr/example.json
Normal file
72
src/components/modules/overseerr/example.json
Normal file
@@ -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"
|
||||
}
|
||||
}
|
||||
13
src/pages/tryoverseerr.tsx
Normal file
13
src/pages/tryoverseerr.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user