Enhancement: add links to sonarr and radarr calendar widget items (#5448)

docs/widgets/services/calendar.md

@@ -22,6 +22,7 @@ widget:
       service_group: Media # group name where widget exists
       service_name: Sonarr # service name for that widget
       color: teal # optional - defaults to pre-defined color for the service (teal for sonarr)
+      baseUrl: https://sonarr.domain.url # optional - adds links to sonarr/radarr pages
       params: # optional - additional params for the service
         unmonitored: true # optional - defaults to false, used with *arr stack
     - type: ical # Show calendar events from another service

src/widgets/calendar/event.jsx

@@ -8,13 +8,8 @@ export default function Event({ event, colorVariants, showDate = false, showTime
   const [hover, setHover] = useState(false);
   const { i18n } = useTranslation();
 
-  return (
-    <div
-      className="flex flex-row text-theme-700 dark:text-theme-200 items-center text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1"
-      onMouseEnter={() => setHover(!hover)}
-      onMouseLeave={() => setHover(!hover)}
-      key={`event-${event.title}-${event.date}-${event.additional}`}
-    >
+  const children = (
+    <>
       {showDateColumn && (
         <span className="ml-2 w-12">
           <span>
@@ -36,6 +31,26 @@ export default function Event({ event, colorVariants, showDate = false, showTime
           <IoMdCheckmarkCircleOutline />
         </span>
       )}
+    </>
+  );
+  const className =
+    "flex flex-row text-theme-700 dark:text-theme-200 items-center text-xs relative h-5 w-full rounded-md bg-theme-200/50 dark:bg-theme-900/20 mt-1";
+  const key = `event-${event.title}-${event.date}-${event.additional}`;
+  return event.url ? (
+    <a
+      className={classNames(className, "hover:bg-theme-300/50 dark:hover:bg-theme-800/20")}
+      onMouseEnter={() => setHover(!hover)}
+      onMouseLeave={() => setHover(!hover)}
+      key={key}
+      href={event.url}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {children}
+    </a>
+  ) : (
+    <div className={className} onMouseEnter={() => setHover(!hover)} onMouseLeave={() => setHover(!hover)} key={key}>
+      {children}
     </div>
   );
 }

src/widgets/calendar/integrations/ical.jsx

@@ -54,6 +54,7 @@ export default function Integration({ config, params, setEvents, hideErrors, tim
             ICAL.Time.now(), // handles events without a date
           location: event.getFirstPropertyValue("location"),
           status: event.getFirstPropertyValue("status"),
+          url: event.getFirstPropertyValue("url"),
         };
       };
 
@@ -133,6 +134,7 @@ export default function Integration({ config, params, setEvents, hideErrors, tim
           isCompleted: getIsCompleted(),
           additional: event.location,
           type: "ical",
+          url: event.url,
         };
       });
     });

src/widgets/calendar/integrations/radarr.jsx

@@ -22,6 +22,7 @@ export default function Integration({ config, params, setEvents, hideErrors = fa
       const cinemaTitle = `${event.title} - ${t("calendar.inCinemas")}`;
       const physicalTitle = `${event.title} - ${t("calendar.physicalRelease")}`;
       const digitalTitle = `${event.title} - ${t("calendar.digitalRelease")}`;
+      const url = config?.baseUrl && event.titleSlug && `${config.baseUrl}/movie/${event.titleSlug}`;
 
       if (event.inCinemas) {
         eventsToAdd[cinemaTitle] = {
@@ -30,6 +31,7 @@ export default function Integration({ config, params, setEvents, hideErrors = fa
           color: config?.color ?? "amber",
           isCompleted: event.hasFile,
           additional: "",
+          url,
         };
       }
 
@@ -40,6 +42,7 @@ export default function Integration({ config, params, setEvents, hideErrors = fa
           color: config?.color ?? "cyan",
           isCompleted: event.hasFile,
           additional: "",
+          url,
         };
       }
 
@@ -50,6 +53,7 @@ export default function Integration({ config, params, setEvents, hideErrors = fa
           color: config?.color ?? "emerald",
           isCompleted: event.hasFile,
           additional: "",
+          url,
         };
       }
     });

src/widgets/calendar/integrations/sonarr.jsx

@@ -29,6 +29,7 @@ export default function Integration({ config, params, setEvents, hideErrors = fa
         color: config?.color ?? "teal",
         isCompleted: event.hasFile,
         additional: `S${event.seasonNumber} E${event.episodeNumber}`,
+        url: config?.baseUrl && event.series.titleSlug && `${config.baseUrl}/series/${event.series.titleSlug}`,
       };
     });