✨ 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,39 +17,34 @@ export interface IMedia {
 function MediaDisplay(props: { media: IMedia }) {
   const { media }: { media: IMedia } = props;
   return (
-    <Group noWrap align="self-start" mr={15}>
-      {media.poster && (
-        <Image
-          radius="md"
-          fit="cover"
-          src={media.poster}
-          alt={media.title}
-          width={300}
-          height={400}
-        />
-      )}
-
-      <Stack
-        justify="space-between"
-        sx={(theme) => ({
-          height: 400,
-        })}
-      >
-        <Group direction="column">
-          <Group noWrap>
-            <Title order={3}>{media.title}</Title>
-            {media.imdbId && (
-              <Anchor
-                href={`https://www.imdb.com/title/${media.imdbId}`}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <ActionIcon>
-                  <Link />
-                </ActionIcon>
-              </Anchor>
-            )}
-          </Group>
+    <Group position="apart">
+      <Text>
+        {media.poster && (
+          <Image
+            style={{
+              float: 'right',
+            }}
+            radius="md"
+            fit="cover"
+            src={media.poster}
+            alt={media.title}
+            width={250}
+            height={400}
+          />
+        )}
+        <Group direction="row">
+          <Title order={3}>{media.title}</Title>
+          {media.imdbId && (
+            <Anchor
+              href={`https://www.imdb.com/title/${media.imdbId}`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <ActionIcon>
+                <Link />
+              </ActionIcon>
+            </Anchor>
+          )}
           {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>
-          {media.genres.map((genre: string, i: number) => (
-            <Badge key={i}>{genre}</Badge>
-          ))}
+        <Group direction="column" position="apart">
+          <ScrollArea style={{ height: 250 }}>{media.overview}</ScrollArea>
+          <Group align="center" position="center" spacing="xs">
+            {media.genres.map((genre: string, i: number) => (
+              <Badge size="sm" key={i}>
+                {genre}
+              </Badge>
+            ))}
+          </Group>
         </Group>
-      </Stack>
+      </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,