✨ Totally rework how the media previews work!

src/components/modules/calendar/MediaDisplay.tsx

@@ -1,5 +1,7 @@
-import { Stack, Image, Group, Title, Badge, Text, ActionIcon, Anchor } from '@mantine/core';
+import { Image, Group, Title, Badge, Text, ActionIcon, Anchor, ScrollArea } from '@mantine/core';
 import { Link } from 'tabler-icons-react';
+import { useConfig } from '../../../tools/state';
+import { serviceItem } from '../../../tools/types';
 
 export interface IMedia {
   overview: string;
@@ -15,26 +17,22 @@ export interface IMedia {
 function MediaDisplay(props: { media: IMedia }) {
   const { media }: { media: IMedia } = props;
   return (
-    <Group noWrap align="self-start" mr={15}>
+    <Group position="apart">
+      <Text>
         {media.poster && (
           <Image
+            style={{
+              float: 'right',
+            }}
             radius="md"
             fit="cover"
             src={media.poster}
             alt={media.title}
-          width={300}
+            width={250}
             height={400}
           />
         )}
-
+        <Group direction="row">
-      <Stack
-        justify="space-between"
-        sx={(theme) => ({
-          height: 400,
-        })}
-      >
-        <Group direction="column">
-          <Group noWrap>
           <Title order={3}>{media.title}</Title>
           {media.imdbId && (
             <Anchor
@@ -47,7 +45,6 @@ function MediaDisplay(props: { media: IMedia }) {
               </ActionIcon>
             </Anchor>
           )}
-          </Group>
           {media.artist && (
             <Text
               style={{
@@ -55,7 +52,7 @@ function MediaDisplay(props: { media: IMedia }) {
                 color: '#a0aec0',
               }}
             >
-              New album from {media.artist}
+              New release from {media.artist}
             </Text>
           )}
           {media.episodeNumber && media.seasonNumber && (
@@ -68,31 +65,42 @@ function MediaDisplay(props: { media: IMedia }) {
               Season {media.seasonNumber} episode {media.episodeNumber}
             </Text>
           )}
-          <Text lineClamp={12} align="justify">
-            {media.overview}
-          </Text>
         </Group>
-        {/*Add the genres at the bottom of the poster*/}
+        <Group direction="column" position="apart">
-        <Group>
+          <ScrollArea style={{ height: 250 }}>{media.overview}</ScrollArea>
+          <Group align="center" position="center" spacing="xs">
             {media.genres.map((genre: string, i: number) => (
-            <Badge key={i}>{genre}</Badge>
+              <Badge size="sm" key={i}>
+                {genre}
+              </Badge>
             ))}
           </Group>
-      </Stack>
+        </Group>
+      </Text>
     </Group>
   );
 }
 
 export function ReadarrMediaDisplay(props: any) {
   const { media }: { media: any } = props;
+  const { config } = useConfig();
+  // Find lidarr in services
+  const readarr = config.services.find((service: serviceItem) => service.type === 'Readarr');
   // Find a poster CoverType
-  const poster = media.author.images.find((image: any) => image.coverType === 'poster');
+  const poster = media.images.find((image: any) => image.coverType === 'cover');
+  if (!readarr) {
+    return null;
+  }
+  const baseUrl = new URL(readarr.url).origin;
+  // Remove '/' from the end of the lidarr url
+  console.log(poster);
+  const fullLink = `${baseUrl}${poster.url}`;
   // Return a movie poster containting the title and the description
   return (
     <MediaDisplay
       media={{
         title: media.title,
-        poster: poster ? poster.url : undefined,
+        poster: fullLink,
         artist: media.author.authorName,
         overview: media.overview,
         genres: media.genres,
@@ -103,14 +111,23 @@ export function ReadarrMediaDisplay(props: any) {
 
 export function LidarrMediaDisplay(props: any) {
   const { media }: { media: any } = props;
+  const { config } = useConfig();
+  // Find lidarr in services
+  const lidarr = config.services.find((service: serviceItem) => service.type === 'Lidarr');
   // Find a poster CoverType
-  const poster = media.artist.images.find((image: any) => image.coverType === 'poster');
+  const poster = media.images.find((image: any) => image.coverType === 'cover');
+  if (!lidarr) {
+    return null;
+  }
+  const baseUrl = new URL(lidarr.url).origin;
+  // Remove '/' from the end of the lidarr url
+  const fullLink = `${baseUrl}${poster.url}`;
   // Return a movie poster containting the title and the description
   return (
     <MediaDisplay
       media={{
         title: media.title,
-        poster: poster ? poster.url : undefined,
+        poster: fullLink,
         artist: media.artist.artistName,
         overview: media.overview,
         genres: media.genres,