diff --git a/components/calendar/CalendarComponent.tsx b/components/calendar/CalendarComponent.tsx
index 13a1aba8a..e670628a4 100644
--- a/components/calendar/CalendarComponent.tsx
+++ b/components/calendar/CalendarComponent.tsx
@@ -1,72 +1,84 @@
-import { Indicator, Popover, Box, Center } from '@mantine/core';
+import { Indicator, Popover, Box, Center, ScrollArea, Divider } from '@mantine/core';
import { useEffect, useState } from 'react';
import { Calendar } from '@mantine/dates';
-import MediaDisplay from './MediaDisplay';
+import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
import { useConfig } from '../../tools/state';
-import { serviceItem } from '../../tools/types';
export default function CalendarComponent(props: any) {
const { config } = useConfig();
const [opened, setOpened] = useState(false);
- const [medias, setMedias] = useState([] as any);
- if (medias === undefined) {
- return ok
;
- }
+ const [sonarrMedias, setSonarrMedias] = useState([] as any);
+ const [radarrMedias, setRadarrMedias] = useState([] as any);
+
useEffect(() => {
// Filter only sonarr and radarr services
const filtered = config.services.filter(
(service) => service.type === 'Sonarr' || service.type === 'Radarr'
);
- // Get the url and API key for each service
- const serviceUrls = filtered.map((service: serviceItem) => ({
- url: service.url,
- apiKey: service.apiKey,
- }));
-
- // Get the medias from each service
- // With no cors
- // const promises = serviceUrls.map((service) =>
- // fetch('/api/getCalendar', {
- // method: 'POST',
- // body: JSON.stringify({
- // apiKey: service.apiKey,
- // remoteUrl: service.url,
- // }),
- // }).then((response) => console.log(response.json()))
- // );
- fetch('http://server:8989/api/calendar?apikey=ea736455118146fea297e6c7465205ce').then(
- (response) => {
- response.json().then((data) => setMedias(data));
- }
- );
+ // Get the url and apiKey for all Sonarr and Radarr services
+ const sonarrService = filtered.filter((service) => service.type === 'Sonarr').at(0);
+ const radarrService = filtered.filter((service) => service.type === 'Radarr').at(0);
+ const nextMonth = new Date(new Date().setMonth(new Date().getMonth() + 2)).toISOString();
+ if (sonarrService) {
+ fetch(
+ `${sonarrService?.url}api/calendar?apikey=${sonarrService?.apiKey}&end=${nextMonth}`
+ ).then((response) => {
+ response.json().then((data) => setSonarrMedias(data));
+ });
+ }
+ if (radarrService) {
+ fetch(
+ `${radarrService?.url}api/calendar?apikey=${radarrService?.apiKey}&end=${nextMonth}`
+ ).then((response) => {
+ response.json().then((data) => setRadarrMedias(data));
+ });
+ }
}, [config.services]);
- if (medias === undefined) {
- return ok
;
+ if (sonarrMedias === undefined && radarrMedias === undefined) {
+ return ;
}
return (
{}}
- renderDay={(renderdate) => }
+ renderDay={(renderdate) => (
+
+ )}
/>
);
}
function DayComponent(props: any) {
- const { renderdate, medias }: { renderdate: Date; medias: [] } = props;
+ const {
+ renderdate,
+ sonarrmedias,
+ radarrmedias,
+ }: { renderdate: Date; sonarrmedias: []; radarrmedias: [] } = props;
const [opened, setOpened] = useState(false);
const day = renderdate.getDate();
// Itterate over the medias and filter the ones that are on the same day
- const filtered = medias.filter((media: any) => {
+ const sonarrFiltered = sonarrmedias.filter((media: any) => {
const date = new Date(media.airDate);
- return date.getDate() === day;
+ // Return true if the date is renerdate without counting hours and minutes
+ return date.getDate() === day && date.getMonth() === renderdate.getMonth();
});
- if (filtered.length === 0) {
+ const radarrFiltered = radarrmedias.filter((media: any) => {
+ const date = new Date(media.airDate);
+ // Return true if the date is renerdate without counting hours and minutes
+ return date.getDate() === day && date.getMonth() === renderdate.getMonth();
+ });
+ if (sonarrFiltered.length === 0 && radarrFiltered.length === 0) {
return {day}
;
}
+ // TODO: #5 Add the ability to display multiple medias on the same day by looping over the filtered medias for each service type
+ // And adding a divider between the medias
return (
-
+
+ {sonarrFiltered.length > 0 && }
+
+ {radarrFiltered.length > 0 && }
+
diff --git a/components/calendar/MediaDisplay.story.tsx b/components/calendar/MediaDisplay.story.tsx
index 61380d550..91bd00652 100644
--- a/components/calendar/MediaDisplay.story.tsx
+++ b/components/calendar/MediaDisplay.story.tsx
@@ -1,4 +1,4 @@
-import MediaDisplay from './MediaDisplay';
+import { RadarrMediaDisplay } from './MediaDisplay';
export default {
title: 'Media display component',
@@ -64,4 +64,4 @@ export default {
},
};
-export const Default = (args: any) => ;
+export const Default = (args: any) => ;
diff --git a/components/calendar/MediaDisplay.tsx b/components/calendar/MediaDisplay.tsx
index ad91f94ee..849af0c21 100644
--- a/components/calendar/MediaDisplay.tsx
+++ b/components/calendar/MediaDisplay.tsx
@@ -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 (
- {media.series.title}
- {media.overview}
+
+ {media.series.title}
+
+
+
+
+
+
+
+ Season {media.seasonNumber} episode {media.episodeNumber}
+
+ {media.series.overview}
+
+ {/*Add the genres at the bottom of the poster*/}
+
+ {media.series.genres.map((genre: string, i: number) => (
+ {genre}
+ ))}
+
+
+
+ );
+}
+
+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 (
+
+
+ ({
+ height: 400,
+ })}
+ >
+
+
+ {media.series.title}
+
+
+
+
+
+
+
+ Season {media.seasonNumber} episode {media.episodeNumber}
+
+ {media.series.overview}
{/*Add the genres at the bottom of the poster*/}