Merge pull request #25 from ajnart/dev

Merge dev into master
ajnart · May 9, 2022 · 8f71c89 · 8f71c89 · vercel · May 9, 2022
2 parents 6dc114a + 7be2283
commit 8f71c89
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 56 deletions.
diff --git a/components/ColorSchemeToggle/ColorSchemeSwitch.tsx b/components/ColorSchemeToggle/ColorSchemeSwitch.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { createStyles, Switch, Group, useMantineColorScheme } from '@mantine/core';
+import { Sun, MoonStars } from 'tabler-icons-react';
+
+const useStyles = createStyles((theme) => ({
+  root: {
+    position: 'relative',
+    '& *': {
+      cursor: 'pointer',
+    },
+  },
+
+  icon: {
+    pointerEvents: 'none',
+    position: 'absolute',
+    zIndex: 1,
+    top: 3,
+  },
+
+  iconLight: {
+    left: 4,
+    color: theme.white,
+  },
+
+  iconDark: {
+    right: 4,
+    color: theme.colors.gray[6],
+  },
+}));
+
+export function ColorSchemeSwitch() {
+  const { colorScheme, toggleColorScheme } = useMantineColorScheme();
+  const { classes, cx } = useStyles();
+
+  return (
+    <Group>
+      <div className={classes.root}>
+        <Sun className={cx(classes.icon, classes.iconLight)} size={18} />
+        <MoonStars className={cx(classes.icon, classes.iconDark)} size={18} />
+        <Switch checked={colorScheme === 'dark'} onChange={() => toggleColorScheme()} size="md" />
+      </div>
+      Switch to {colorScheme === 'dark' ? 'light' : 'dark'} mode
+    </Group>
+  );
+}
diff --git a/components/Settings/SettingsMenu.tsx b/components/Settings/SettingsMenu.tsx
@@ -8,13 +8,16 @@ import {
   Tooltip,
   SegmentedControl,
 } from '@mantine/core';
+import { useColorScheme } from '@mantine/hooks';
 import { useState } from 'react';
 import { Settings as SettingsIcon } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
+import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import SaveConfigComponent from '../Config/SaveConfig';
 
 function SettingsMenu(props: any) {
   const { config, setConfig } = useConfig();
+  const colorScheme = useColorScheme();
   const matches = [
     { label: 'Google', value: 'https://google.com/search?q=' },
     { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' },
@@ -46,6 +49,7 @@ function SettingsMenu(props: any) {
       </Group>
       <Group direction="column">
         <Switch
+          size="md"
           onChange={(e) =>
             setConfig({
               ...config,
@@ -59,6 +63,7 @@ function SettingsMenu(props: any) {
           label="Enable search bar"
         />
       </Group>
+      <ColorSchemeSwitch />
       <SaveConfigComponent />
       <Text
         style={{

diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
@@ -11,7 +11,6 @@ import {
 import { useBooleanToggle } from '@mantine/hooks';
 import { NextLink } from '@mantine/next';
 import { Logo } from './Logo';
-import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
 import CalendarComponent from '../modules/calendar/CalendarModule';
 
@@ -119,7 +118,6 @@ export function Header({ links }: HeaderResponsiveProps) {
     <Head height={HEADER_HEIGHT} mb={10} className={classes.root}>
       <Container className={classes.header}>
         <Group>
-          <ColorSchemeToggle />
           <NextLink style={{ textDecoration: 'none' }} href="/">
             <Logo style={{ fontSize: 22 }} />
           </NextLink>

diff --git a/components/modules/calendar/CalendarModule.tsx b/components/modules/calendar/CalendarModule.tsx
@@ -6,6 +6,7 @@ import { CalendarIcon } from '@modulz/radix-icons';
 import { RadarrMediaDisplay, SonarrMediaDisplay } from './MediaDisplay';
 import { useConfig } from '../../../tools/state';
 import { MHPModule } from '../modules';
+import React from 'react';
 
 export const CalendarModule: MHPModule = {
   title: 'Calendar',
@@ -93,8 +94,12 @@ function DayComponent(props: any) {
         setOpened(true);
       }}
     >
-      {radarrFiltered.length > 0 && <Indicator size={7} color="yellow" children={null} />}
-      {sonarrFiltered.length > 0 && <Indicator size={7} offset={8} color="blue" children={null} />}
+      {radarrFiltered.length > 0 && (
+        <Indicator size={7} color="yellow" children={null} />
+      )}
+      {sonarrFiltered.length > 0 && (
+        <Indicator size={7} offset={8} color="blue" children={null} />
+      )}
       <Popover
         position="left"
         width={700}
@@ -104,11 +109,25 @@ function DayComponent(props: any) {
         target={`‏ ${day}`}
       >
         <ScrollArea style={{ height: 400 }}>
-          {sonarrFiltered.length > 0 && <SonarrMediaDisplay media={sonarrFiltered[0]} />}
+          {sonarrFiltered.map((media: any, index: number) => {
+            return (
+              <React.Fragment key={index}>
+                <SonarrMediaDisplay media={media} />
+                {index < sonarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            );
+          })}
           {radarrFiltered.length > 0 && sonarrFiltered.length > 0 && (
             <Divider variant="dashed" my="xl" />
           )}
-          {radarrFiltered.length > 0 && <RadarrMediaDisplay media={radarrFiltered[0]} />}
+          {radarrFiltered.map((media: any, index: number) => {
+            return (
+              <React.Fragment key={index}>
+                <RadarrMediaDisplay media={media} />
+                {index < radarrFiltered.length - 1 && <Divider variant="dashed" my="xl" />}
+              </React.Fragment>
+            );
+          })}
         </ScrollArea>
       </Popover>
     </Box>

diff --git a/components/modules/calendar/MediaDisplay.tsx b/components/modules/calendar/MediaDisplay.tsx
@@ -2,22 +2,20 @@ import { Stack, Image, Group, Title, Badge, Text, ActionIcon, Anchor } from '@ma
 import { Link } from 'tabler-icons-react';
 
 export interface IMedia {
-  id: string;
+  overview: string;
+  imdbId: any;
   title: string;
-  description: string;
   poster: string;
-  type: string;
   genres: string[];
+  seasonNumber?: number;
+  episodeNumber?: number;
 }
 
-export function RadarrMediaDisplay(props: any) {
-  const { media }: { media: any } = props;
-  // Find a poster CoverType
-  const poster = media.images.find((image: any) => image.coverType === 'poster');
-  // Return a movie poster containting the title and the description
+function MediaDisplay(props: { media: IMedia }) {
+  const { media }: { media: IMedia } = props;
   return (
-    <Group noWrap align="self-start">
-      <Image fit="cover" src={poster.url} alt={media.title} width={300} height={400} />
+    <Group noWrap align="self-start" mr={15}>
+      <Image fit="cover" src={media.poster} alt={media.title} width={300} height={400} />
       <Stack
         justify="space-between"
         sx={(theme) => ({
@@ -33,7 +31,17 @@ export function RadarrMediaDisplay(props: any) {
               </ActionIcon>
             </Anchor>
           </Group>
-          <Text>{media.overview}</Text>
+          {media.episodeNumber && media.seasonNumber && (
+            <Text
+              style={{
+                textAlign: 'center',
+                color: '#a0aec0',
+              }}
+            >
+              Season {media.seasonNumber} episode {media.episodeNumber}
+            </Text>
+          )}
+          <Text align="justify">{media.overview}</Text>
         </Group>
         {/*Add the genres at the bottom of the poster*/}
         <Group>
@@ -46,46 +54,40 @@ export function RadarrMediaDisplay(props: any) {
   );
 }
 
+export function RadarrMediaDisplay(props: any) {
+  const { media }: { media: any } = props;
+  // Find a poster CoverType
+  const poster = media.images.find((image: any) => image.coverType === 'poster');
+  // Return a movie poster containting the title and the description
+  return (
+    <MediaDisplay
+      media={{
+        imdbId: media.imdbId,
+        title: media.title,
+        overview: media.overview,
+        poster: poster.url,
+        genres: media.genres,
+      }}
+    />
+  );
+}
+
 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 src={poster.url} fit="cover" width={300} height={400} alt={media.series.title} />
-      <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>
-          {media.series.genres.map((genre: string, i: number) => (
-            <Badge key={i}>{genre}</Badge>
-          ))}
-        </Group>
-      </Stack>
-    </Group>
+    <MediaDisplay
+      media={{
+        imdbId: media.series.imdbId,
+        title: media.series.title,
+        overview: media.series.overview,
+        poster: poster.url,
+        genres: media.series.genres,
+        seasonNumber: media.seasonNumber,
+        episodeNumber: media.episodeNumber,
+      }}
+    />
   );
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,12 @@
 {
-  "name": "mantine-next-template",
-  "version": "1.0.0",
-  "private": true,
+  "name": "homarr",
+  "version": "0.0.1",
+  "private": "false",
+  "description": "Customizable browser's home page to interact with your homeserver's Docker containers (i.e. Sonarr/Radarr)",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ajnart/myhomepage"
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -76,4 +81,4 @@
     "ts-jest": "^27.1.4",
     "typescript": "4.6.3"
   }
-}
+}