✨ Add new config format

2025-11-10 07:25:48 +01:00 · 2022-12-04 17:36:30 +01:00
parent b2f5149527
commit d5a3b3f3ba
76 changed files with 2461 additions and 1034 deletions
--- a/src/components/layout/Background.tsx
+++ b/src/components/layout/Background.tsx
@@ -1,15 +1,15 @@
 import { Global } from '@mantine/core';
-import { useConfig } from '../../tools/state';
+import { useConfigContext } from '../../config/provider';

 export function Background() {
-  const { config } = useConfig();
+  const { config } = useConfigContext();

  return (
    <Global
      styles={{
        body: {
          minHeight: '100vh',
-          backgroundImage: `url('${config.settings.background}')` || '',
+          backgroundImage: `url('${config?.settings.customization.backgroundImageUrl}')` || '',
          backgroundPosition: 'center center',
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat',
--- a/src/components/layout/Head/Head.tsx
+++ b/src/components/layout/Head/Head.tsx
@@ -0,0 +1,34 @@
+/* eslint-disable react/no-invalid-html-attribute */
+import React from 'react';
+import NextHead from 'next/head';
+import { SafariStatusBarStyle } from './SafariStatusBarStyle';
+import { useConfigContext } from '../../../config/provider';
+
+export function Head() {
+  const { config } = useConfigContext();
+
+  return (
+    <NextHead>
+      <title>{config?.settings.customization.metaTitle || 'Homarr 🦞'}</title>
+      <link
+        rel="shortcut icon"
+        href={config?.settings.customization.faviconUrl || '/imgs/favicon/favicon.svg'}
+      />
+
+      <link rel="manifest" href="/site.webmanifest" />
+
+      {/* configure apple splash screen & touch icon */}
+      <link
+        rel="apple-touch-icon"
+        href={config?.settings.customization.faviconUrl || '/imgs/favicon/favicon-squared.png'}
+      />
+      <meta
+        name="apple-mobile-web-app-title"
+        content={config?.settings.customization.metaTitle || 'Homarr'}
+      />
+
+      <SafariStatusBarStyle />
+      <meta name="apple-mobile-web-app-capable" content="yes" />
+    </NextHead>
+  );
+}
--- a/src/components/layout/Head/SafariStatusBarStyle.tsx
+++ b/src/components/layout/Head/SafariStatusBarStyle.tsx
@@ -0,0 +1,12 @@
+import { useMantineTheme } from '@mantine/core';
+
+export const SafariStatusBarStyle = () => {
+  const { colorScheme } = useMantineTheme();
+  const isDark = colorScheme === 'dark';
+  return (
+    <meta
+      name="apple-mobile-web-app-status-bar-style"
+      content={isDark ? 'white-translucent' : 'black-translucent'}
+    />
+  );
+};
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,48 +1,31 @@
 import { AppShell, createStyles } from '@mantine/core';
-import { Header } from './header/Header';
-import { Footer } from './Footer';
-import Aside from './Aside';
-import Navbar from './Navbar';
-import { HeaderConfig } from './header/HeaderConfig';
+import { useConfigContext } from '../../config/provider';
 import { Background } from './Background';
-import { useConfig } from '../../tools/state';
+import { Footer } from './Footer';
+import { Header } from './Header/Header';
+import { Head } from './Head/Head';

-const useStyles = createStyles((theme) => ({
-  main: {},
-  appShell: {
-    // eslint-disable-next-line no-useless-computed-key
-    ['@media screen and (display-mode: standalone)']: {
-      '&': {
-        paddingTop: '88px !important',
-      },
-    },
-  },
-}));
+const useStyles = createStyles(() => ({}));

-export default function Layout({ children, style }: any) {
-  const { classes, cx } = useStyles();
-  const { config } = useConfig();
-  const widgetPosition = config?.settings?.widgetPosition === 'left';
+export default function Layout({ children }: any) {
+  const { cx } = useStyles();
+  const { config } = useConfigContext();

  return (
    <AppShell
      fixed={false}
      header={<Header />}
-      navbar={widgetPosition ? <Navbar /> : undefined}
-      aside={widgetPosition ? undefined : <Aside />}
      footer={<Footer links={[]} />}
+      styles={{
+        main: {
+          minHeight: 'calc(100vh - var(--mantine-header-height))',
+        },
+      }}
    >
-      <HeaderConfig />
+      <Head />
      <Background />
-      <main
-        className={cx(classes.main)}
-        style={{
-          ...style,
-        }}
-      >
-        {children}
-      </main>
-      <style>{cx(config.settings.customCSS)}</style>
+      {children}
+      <style>{cx(config?.settings.customization.customCss)}</style>
    </AppShell>
  );
 }
--- a/src/components/layout/Logo.tsx
+++ b/src/components/layout/Logo.tsx
@@ -1,25 +1,28 @@
 import { Group, Image, Text } from '@mantine/core';
-import { NextLink } from '@mantine/next';
-import * as React from 'react';
+import { useConfigContext } from '../../config/provider';
 import { useColorTheme } from '../../tools/color';
-import { useConfig } from '../../tools/state';

-export function Logo({ style, withoutText }: any) {
-  const { config } = useConfig();
+interface LogoProps {
+  size?: 'md' | 'xs';
+  withoutText?: boolean;
+}
+
+export function Logo({ size = 'md', withoutText = false }: LogoProps) {
+  const { config } = useConfigContext();
  const { primaryColor, secondaryColor } = useColorTheme();

  return (
-    <Group spacing="xs" noWrap>
+    <Group spacing={size === 'md' ? 'xs' : 4} noWrap>
      <Image
-        width={50}
-        src={config.settings.logo || '/imgs/logo/logo.png'}
+        width={size === 'md' ? 50 : 20}
+        src={config?.settings.customization.logoImageUrl || '/imgs/logo/logo.png'}
        style={{
          position: 'relative',
        }}
      />
      {withoutText ? null : (
        <Text
-          sx={style}
+          size={size === 'md' ? 22 : 'xs'}
          weight="bold"
          variant="gradient"
          gradient={{
@@ -28,7 +31,7 @@ export function Logo({ style, withoutText }: any) {
            deg: 145,
          }}
        >
-          {config.settings.title || 'Homarr'}
+          {config?.settings.customization.pageTitle || 'Homarr'}
        </Text>
      )}
    </Group>
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@@ -1,38 +1,40 @@
-import { Group, Header as Head, useMantineColorScheme, useMantineTheme } from '@mantine/core';
+import { Box, createStyles, Group, Header as MantineHeader, useMantineTheme } from '@mantine/core';
 import { useViewportSize } from '@mantine/hooks';
 import { AddItemShelfButton } from '../../AppShelf/AddAppShelfItem';

 import DockerMenuButton from '../../../modules/docker/DockerModule';
+import { Search } from './Search';
 import { SettingsMenuButton } from '../../Settings/SettingsMenu';
 import { Logo } from '../Logo';
-import { useConfig } from '../../../tools/state';
-import { SearchModuleComponent } from '../../../modules/search/SearchModule';
+import { useCardStyles } from '../useCardStyles';
+
+export const HeaderHeight = 64;

 export function Header(props: any) {
-  const { width } = useViewportSize();
-  const MIN_WIDTH_MOBILE = useMantineTheme().breakpoints.xs;
-  const { config } = useConfig();
-  const { colorScheme } = useMantineColorScheme();
+  const { classes } = useStyles();
+  const { classes: cardClasses } = useCardStyles();

  return (
-    <Head
-      height="auto"
-      style={{
-        background: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '255, 255, 255,'} \
-      ${(config.settings.appOpacity || 100) / 100}`,
-        borderColor: `rgba(${colorScheme === 'dark' ? '37, 38, 43,' : '233, 236, 239,'} \
-      ${(config.settings.appOpacity || 100) / 100}`,
-      }}
-    >
+    <MantineHeader height={HeaderHeight} className={cardClasses.card}>
      <Group p="xs" noWrap grow>
-        {width > MIN_WIDTH_MOBILE && <Logo style={{ fontSize: 22 }} />}
+        <Box className={classes.hide}>
+          <Logo />
+        </Box>
        <Group position="right" noWrap>
-          <SearchModuleComponent />
+          <Search />
          <DockerMenuButton />
          <SettingsMenuButton />
          <AddItemShelfButton />
        </Group>
      </Group>
-    </Head>
+    </MantineHeader>
  );
 }
+
+const useStyles = createStyles((theme) => ({
+  hide: {
+    [theme.fn.smallerThan('xs')]: {
+      display: 'none',
+    },
+  },
+}));
--- a/src/components/layout/header/HeaderConfig.tsx
+++ b/src/components/layout/header/HeaderConfig.tsx
@@ -1,28 +0,0 @@
-/* eslint-disable react/no-invalid-html-attribute */
-import React from 'react';
-import Head from 'next/head';
-import { useConfig } from '../../../tools/state';
-import { SafariStatusBarStyle } from './safariStatusBarStyle';
-
-export function HeaderConfig(props: any) {
-  const { config } = useConfig();
-
-  return (
-    <Head>
-      <title>{config.settings.title || 'Homarr 🦞'}</title>
-      <link rel="shortcut icon" href={config.settings.favicon || '/imgs/favicon/favicon.svg'} />
-
-      <link rel="manifest" href="/site.webmanifest" />
-
-      {/* configure apple splash screen & touch icon */}
-      <link
-        rel="apple-touch-icon"
-        href={config.settings.favicon || '/imgs/favicon/favicon-squared.png'}
-      />
-      <meta name="apple-mobile-web-app-title" content={config.settings.title || 'Homarr'} />
-
-      <SafariStatusBarStyle />
-      <meta name="apple-mobile-web-app-capable" content="yes" />
-    </Head>
-  );
-}
--- a/src/components/layout/header/Search.tsx
+++ b/src/components/layout/header/Search.tsx
@@ -0,0 +1,284 @@
+import {
+  ActionIcon,
+  Autocomplete,
+  Box,
+  createStyles,
+  Divider,
+  Kbd,
+  Menu,
+  Popover,
+  ScrollArea,
+  Tooltip,
+} from '@mantine/core';
+import { useDebouncedValue, useHotkeys } from '@mantine/hooks';
+import { showNotification } from '@mantine/notifications';
+import { IconBrandYoutube, IconDownload, IconMovie, IconSearch } from '@tabler/icons';
+import axios from 'axios';
+import { useTranslation } from 'next-i18next';
+import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import SmallServiceItem from '../../AppShelf/SmallServiceItem';
+import Tip from '../Tip';
+import { searchUrls } from '../../Settings/Common/SearchEngineSelector';
+import { useConfigContext } from '../../../config/provider';
+import { OverseerrMediaDisplay } from '../../../modules/common';
+import { IModule } from '../../../modules/ModuleTypes';
+
+export const SearchModule: IModule = {
+  title: 'Search',
+  icon: IconSearch,
+  component: Search,
+  id: 'search',
+};
+
+interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
+  label: string;
+  disabled: boolean;
+  value: string;
+  description: string;
+  icon: React.ReactNode;
+  url: string;
+  shortcut: string;
+}
+
+const useStyles = createStyles((theme) => ({
+  item: {
+    '&[data-hovered]': {
+      backgroundColor: theme.colors[theme.primaryColor][theme.fn.primaryShade()],
+      color: theme.white,
+    },
+  },
+}));
+
+export function Search() {
+  const { t } = useTranslation('modules/search');
+  const { config } = useConfigContext();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [debounced, cancel] = useDebouncedValue(searchQuery, 250);
+
+  // TODO: ask manuel-rw about overseerr
+  const isOverseerrEnabled = false; //config?.settings.common.enabledModules.overseerr;
+  const overseerrService = config?.services.find(
+    (service) =>
+      service.integration?.type === 'overseerr' || service.integration?.type === 'jellyseerr'
+  );
+  const searchEngineSettings = config?.settings.common.searchEngine;
+  const searchEngineUrl = !searchEngineSettings
+    ? searchUrls.google
+    : searchEngineSettings.type === 'custom'
+    ? searchEngineSettings.properties.template
+    : searchUrls[searchEngineSettings.type];
+
+  const searchEnginesList: ItemProps[] = [
+    {
+      icon: <IconSearch />,
+      disabled: false,
+      label: t('searchEngines.search.name'),
+      value: 'search',
+      description: t('searchEngines.search.description'),
+      url: searchEngineUrl,
+      shortcut: 's',
+    },
+    {
+      icon: <IconDownload />,
+      disabled: false,
+      label: t('searchEngines.torrents.name'),
+      value: 'torrents',
+      description: t('searchEngines.torrents.description'),
+      url: 'https://www.torrentdownloads.me/search/?search=',
+      shortcut: 't',
+    },
+    {
+      icon: <IconBrandYoutube />,
+      disabled: false,
+      label: t('searchEngines.youtube.name'),
+      value: 'youtube',
+      description: t('searchEngines.youtube.description'),
+      url: 'https://www.youtube.com/results?search_query=',
+      shortcut: 'y',
+    },
+    {
+      icon: <IconMovie />,
+      disabled: !(isOverseerrEnabled === true && overseerrService !== undefined),
+      label: t('searchEngines.overseerr.name'),
+      value: 'overseerr',
+      description: t('searchEngines.overseerr.description'),
+      url: `${overseerrService?.url}search?query=`,
+      shortcut: 'm',
+    },
+  ];
+  const [selectedSearchEngine, setSearchEngine] = useState<ItemProps>(searchEnginesList[0]);
+  const matchingServices =
+    config?.services.filter((service) => {
+      if (searchQuery === '' || searchQuery === undefined) {
+        return false;
+      }
+      return service.name.toLowerCase().includes(searchQuery.toLowerCase());
+    }) ?? [];
+  const autocompleteData = matchingServices.map((service) => ({
+    label: service.name,
+    value: service.name,
+    icon: service.appearance.iconUrl,
+    url: service.behaviour.onClickUrl ?? service.url,
+  }));
+  const AutoCompleteItem = forwardRef<HTMLDivElement, any>(
+    ({ label, value, icon, url, ...others }: any, ref) => (
+      <div ref={ref} {...others}>
+        <SmallServiceItem service={{ label, value, icon, url }} />
+      </div>
+    )
+  );
+  useEffect(() => {
+    // Refresh the default search engine every time the config for it changes #521
+    setSearchEngine(searchEnginesList[0]);
+  }, [searchEngineUrl]);
+  const textInput = useRef<HTMLInputElement>(null);
+  useHotkeys([['mod+K', () => textInput.current?.focus()]]);
+  const { classes } = useStyles();
+  const openInNewTab = config?.settings.common.searchEngine.properties.openInNewTab
+    ? '_blank'
+    : '_self';
+  const [OverseerrResults, setOverseerrResults] = useState<any[]>([]);
+  const [opened, setOpened] = useState(false);
+
+  useEffect(() => {
+    if (debounced !== '' && selectedSearchEngine.value === 'overseerr' && searchQuery.length > 3) {
+      axios.get(`/api/modules/overseerr?query=${searchQuery}`).then((res) => {
+        setOverseerrResults(res.data.results ?? []);
+      });
+    }
+  }, [debounced]);
+
+  const isModuleEnabled = config?.settings.customization.layout.enabledSearchbar;
+  if (!isModuleEnabled) {
+    return null;
+  }
+  //TODO: Fix the bug where clicking anything inside the Modal to ask for a movie
+  // will close it (Because it closes the underlying Popover)
+  return (
+    <Box style={{ width: '100%', maxWidth: 400 }}>
+      <Popover
+        opened={OverseerrResults.length > 0 && opened && searchQuery.length > 3}
+        position="bottom"
+        withinPortal
+        shadow="md"
+        radius="md"
+        zIndex={100}
+        transition="pop-top-right"
+      >
+        <Popover.Target>
+          <Autocomplete
+            ref={textInput}
+            onFocusCapture={() => setOpened(true)}
+            autoFocus
+            rightSection={<SearchModuleMenu />}
+            placeholder={t(`searchEngines.${selectedSearchEngine.value}.description`)}
+            value={searchQuery}
+            onChange={(currentString) => tryMatchSearchEngine(currentString, setSearchQuery)}
+            itemComponent={AutoCompleteItem}
+            data={autocompleteData}
+            onItemSubmit={(item) => {
+              setOpened(false);
+              if (item.url) {
+                setSearchQuery('');
+                window.open(item.openedUrl ? item.openedUrl : item.url, openInNewTab);
+              }
+            }}
+            // Replace %s if it is in selectedSearchEngine.url with searchQuery, otherwise append searchQuery at the end of it
+            onKeyDown={(event) => {
+              if (
+                event.key === 'Enter' &&
+                searchQuery.length > 0 &&
+                autocompleteData.length === 0
+              ) {
+                if (selectedSearchEngine.url.includes('%s')) {
+                  window.open(selectedSearchEngine.url.replace('%s', searchQuery), openInNewTab);
+                } else {
+                  window.open(selectedSearchEngine.url + searchQuery, openInNewTab);
+                }
+              }
+            }}
+            radius="md"
+            size="md"
+          />
+        </Popover.Target>
+        <Popover.Dropdown>
+          <div>
+            <ScrollArea style={{ height: 400, width: 420 }} offsetScrollbars>
+              {OverseerrResults.slice(0, 5).map((result, index) => (
+                <React.Fragment key={index}>
+                  <OverseerrMediaDisplay key={result.id} media={result} />
+                  {index < OverseerrResults.length - 1 && <Divider variant="dashed" my="xl" />}
+                </React.Fragment>
+              ))}
+            </ScrollArea>
+          </div>
+        </Popover.Dropdown>
+      </Popover>
+    </Box>
+  );
+
+  function tryMatchSearchEngine(query: string, setSearchQuery: (value: string) => void) {
+    const foundSearchEngine = searchEnginesList.find(
+      (engine) => query.includes(`!${engine.shortcut}`) && !engine.disabled
+    );
+    if (foundSearchEngine) {
+      setSearchQuery(query.replace(`!${foundSearchEngine.shortcut}`, ''));
+      changeSearchEngine(foundSearchEngine);
+    } else {
+      setSearchQuery(query);
+    }
+  }
+
+  function SearchModuleMenu() {
+    return (
+      <Menu shadow="md" width={200} withinPortal classNames={classes}>
+        <Menu.Target>
+          <ActionIcon>{selectedSearchEngine.icon}</ActionIcon>
+        </Menu.Target>
+
+        <Menu.Dropdown>
+          {searchEnginesList.map((item) => (
+            <Tooltip
+              multiline
+              label={item.description}
+              withinPortal
+              width={200}
+              position="left"
+              key={item.value}
+            >
+              <Menu.Item
+                key={item.value}
+                icon={item.icon}
+                rightSection={<Kbd>!{item.shortcut}</Kbd>}
+                disabled={item.disabled}
+                onClick={() => {
+                  changeSearchEngine(item);
+                }}
+              >
+                {item.label}
+              </Menu.Item>
+            </Tooltip>
+          ))}
+          <Menu.Divider />
+          <Menu.Label>
+            <Tip>
+              {t('tip')} <Kbd>mod+k</Kbd>{' '}
+            </Tip>
+          </Menu.Label>
+        </Menu.Dropdown>
+      </Menu>
+    );
+  }
+
+  function changeSearchEngine(item: ItemProps) {
+    setSearchEngine(item);
+    showNotification({
+      radius: 'lg',
+      disallowClose: true,
+      id: 'spotlight',
+      autoClose: 1000,
+      icon: <ActionIcon size="sm">{item.icon}</ActionIcon>,
+      message: t('switchedSearchEngine', { searchEngine: t(`searchEngines.${item.value}.name`) }),
+    });
+  }
+}
--- a/src/components/layout/header/safariStatusBarStyle.tsx
+++ b/src/components/layout/header/safariStatusBarStyle.tsx
@@ -1,13 +0,0 @@
-import { useMantineTheme } from '@mantine/core';
-
-export const SafariStatusBarStyle = () => {
-  const colorScheme = useMantineTheme();
-
-  const isDark = colorScheme.colorScheme === 'dark';
-
-  if (isDark) {
-    return <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent" />;
-  }
-
-  return <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />;
-};
--- a/src/components/layout/useCardStyles.ts
+++ b/src/components/layout/useCardStyles.ts
@@ -0,0 +1,22 @@
+import { createStyles } from '@mantine/core';
+import { useConfigContext } from '../../config/provider';
+
+export const useCardStyles = () => {
+  const { config } = useConfigContext();
+  const appOpacity = config?.settings.customization.appOpacity;
+  return createStyles(({ colorScheme }, _params) => {
+    const opacity = (appOpacity || 100) / 100;
+    return {
+      card: {
+        backgroundColor:
+          colorScheme === 'dark'
+            ? `rgba(37, 38, 43, ${opacity}) !important`
+            : `rgba(255, 255, 255, ${opacity}) !important`,
+        borderColor:
+          colorScheme === 'dark'
+            ? `rgba(37, 38, 43, ${opacity})`
+            : `rgba(233, 236, 239, ${opacity})`,
+      },
+    };
+  })();
+};