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

Hugely improve Media display by splitting it into 2 different modules

Browse Source
This commit is contained in:
Aj - Thomas
2022-05-05 09:22:44 +02:00
parent b58f15aeec
commit 2149e2e10a
3 changed files with 130 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
components/calendar/MediaDisplay.tsx
View File

@@ -1,4 +1,5 @@
import { Stack, Image, Group, Title, Badge, Text } from '@mantine/core';
import { Stack, Image, Group, Title, Badge, Text, ActionIcon, Anchor } from '@mantine/core';
import { Link } from 'tabler-icons-react';
export interface IMedia {
id: string;
@@ -9,13 +10,16 @@ export interface IMedia {
genres: string[];
}
export default function MediaDisplay(props: any) {
export function RadarrMediaDisplay(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={media.series.images[0].url}
fit="cover"
src={poster.url}
alt={media.series.title}
style={{
maxWidth: 300,
@@ -28,8 +32,74 @@ export default function MediaDisplay(props: any) {
})}
>
<Group direction="column">
<Title order={3}>{media.series.title}</Title>
<Text>{media.overview}</Text>
<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>
);
}
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
fit="cover"
src={poster.url}
alt={media.series.title}
style={{
maxWidth: 300,
}}
/>
<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>