Merge pull request #25 from ajnart/dev

Merge dev into master
2025-11-15 09:46:19 +01:00 · 2022-05-09 22:08:16 +02:00
parent 6dc114a42b 7be22833b0
commit 8f71c898a2
6 changed files with 130 additions and 56 deletions
--- 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>
+  );
+}
--- 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={{
--- 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>
--- 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>
--- 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,
+      }}
+    />
  );
 }
--- 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",