Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 07:25:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use general media display component

Browse Source 
Instead of a different one for each media type
This commit is contained in:
Aj - Thomas
2022-05-09 22:03:09 +02:00
parent a2a3155081
commit cb3abbc1c7
1 changed files with 48 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
components/modules/calendar/MediaDisplay.tsx
View File

@@ -2,22 +2,20 @@ import { Stack, Image, Group, Title, Badge, Text, ActionIcon, Anchor } from '@ma
import { Link } from 'tabler-icons-react';
export interface IMedia {
id: string;
overview: string;
imdbId: any;
title: string;
description: string;
poster: string;
type: string;
genres: string[];
seasonNumber?: number;
episodeNumber?: number;
}
export function RadarrMediaDisplay(props: any) {
const { media }: { media: any } = props;
// Find a poster CoverType
const poster = media.images.find((image: any) => image.coverType === 'poster');
// Return a movie poster containting the title and the description
function MediaDisplay(props: { media: IMedia }) {
const { media }: { media: IMedia } = props;
return (
<Group noWrap align="self-start">
<Image fit="cover" src={poster.url} alt={media.title} width={300} height={400} />
<Group noWrap align="self-start" mr={15}>
<Image fit="cover" src={media.poster} alt={media.title} width={300} height={400} />
<Stack
justify="space-between"
sx={(theme) => ({
@@ -33,7 +31,17 @@ export function RadarrMediaDisplay(props: any) {
</ActionIcon>
</Anchor>
</Group>
<Text>{media.overview}</Text>
{media.episodeNumber && media.seasonNumber && (
<Text
style={{
textAlign: 'center',
color: '#a0aec0',
}}
>
Season {media.seasonNumber} episode {media.episodeNumber}
</Text>
)}
<Text align="justify">{media.overview}</Text>
</Group>
{/*Add the genres at the bottom of the poster*/}
<Group>
@@ -46,46 +54,40 @@ export function RadarrMediaDisplay(props: any) {
);
}
export function RadarrMediaDisplay(props: any) {
const { media }: { media: any } = props;
// Find a poster CoverType
const poster = media.images.find((image: any) => image.coverType === 'poster');
// Return a movie poster containting the title and the description
return (
<MediaDisplay
media={{
imdbId: media.imdbId,
title: media.title,
overview: media.overview,
poster: poster.url,
genres: media.genres,
}}
/>
);
}
export function SonarrMediaDisplay(props: any) {
const { media }: { media: any } = props;
// Find a poster CoverType
const poster = media.series.images.find((image: any) => image.coverType === 'poster');
// Return a movie poster containting the title and the description
return (
<Group noWrap align="self-start">
<Image src={poster.url} fit="cover" width={300} height={400} alt={media.series.title} />
<Stack
justify="space-between"
sx={(theme) => ({
height: 400,
})}
>
<Group direction="column">
<Group>
<Title order={3}>{media.series.title}</Title>
<Anchor href={`https://www.imdb.com/title/${media.series.imdbId}`} target="_blank">
<ActionIcon>
<Link />
</ActionIcon>
</Anchor>
</Group>
<Text
style={{
textAlign: 'center',
color: '#a0aec0',
}}
>
Season {media.seasonNumber} episode {media.episodeNumber}
</Text>
<Text>{media.series.overview}</Text>
</Group>
{/*Add the genres at the bottom of the poster*/}
<Group>
{media.series.genres.map((genre: string, i: number) => (
<Badge key={i}>{genre}</Badge>
))}
</Group>
</Stack>
</Group>
<MediaDisplay
media={{
imdbId: media.series.imdbId,
title: media.series.title,
overview: media.series.overview,
poster: poster.url,
genres: media.series.genres,
seasonNumber: media.seasonNumber,
episodeNumber: media.episodeNumber,
}}
/>
);
}