🚧 WIP on Overseerr integration

2025-11-16 10:16:20 +01:00 · 2022-07-24 23:18:01 +02:00
parent 1f2d560893
commit a3f5b252b9
12 changed files with 182 additions and 119 deletions
--- a/src/modules/common/MediaDisplay.tsx
+++ b/src/modules/common/MediaDisplay.tsx
@@ -8,9 +8,10 @@ import {
  Anchor,
  ScrollArea,
  createStyles,
+  Tooltip,
 } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
-import { IconLink as Link } from '@tabler/icons';
+import { IconLink, IconPlayerPlay } from '@tabler/icons';
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';

--- a/src/modules/index.ts
+++ b/src/modules/index.ts
@@ -6,3 +6,4 @@ export * from './ping';
 export * from './search';
 export * from './weather';
 export * from './docker';
+export * from './overseerr';
--- a/src/modules/overseerr/OverseerrMediaDisplay.tsx
+++ b/src/modules/overseerr/OverseerrMediaDisplay.tsx
@@ -0,0 +1,18 @@
+import { MediaDisplay } from '../common';
+
+export default function OverseerrMediaDisplay(props: any) {
+  const { media }: { media: any } = props;
+  return (
+    <MediaDisplay
+      media={{
+        title: media.name ?? media.originalTitle,
+        overview: media.overview,
+        poster: `https://image.tmdb.org/t/p/w600_and_h900_bestv2/${media.posterPath}`,
+        genres: [`score: ${media.voteAverage}/10`],
+        seasonNumber: media.mediaInfo?.seasons.length,
+        plexUrl: media.mediaInfo?.plexUrl,
+        imdbId: media.mediaInfo?.imdbId,
+      }}
+    />
+  );
+}
--- a/src/modules/overseerr/OverseerrModule.tsx
+++ b/src/modules/overseerr/OverseerrModule.tsx
@@ -0,0 +1,14 @@
+import { IconEyeglass } from '@tabler/icons';
+import { IModule } from '../ModuleTypes';
+import OverseerrMediaDisplay from './OverseerrMediaDisplay';
+
+export const OverseerrModule: IModule = {
+  title: 'Overseerr',
+  description: 'Allows you to search and add media from Overseerr',
+  icon: IconEyeglass,
+  component: OverseerrMediaDisplay,
+};
+
+export interface OverseerSearchProps {
+  query: string;
+}
--- a/src/modules/overseerr/example.json
+++ b/src/modules/overseerr/example.json
@@ -0,0 +1,72 @@
+{
+	"id": 86831,
+	"firstAirDate": "2019-03-15",
+	"genreIds": [
+		16,
+		10765
+	],
+	"mediaType": "tv",
+	"name": "Love, Death & Robots",
+	"originCountry": [
+		"US"
+	],
+	"originalLanguage": "en",
+	"originalName": "Love, Death & Robots",
+	"overview": "Terrifying creatures, wicked surprises and dark comedy converge in this NSFW anthology of animated stories presented by Tim Miller and David Fincher.",
+	"popularity": 623.833,
+	"voteAverage": 8.2,
+	"voteCount": 1720,
+	"backdropPath": "/78NtUwwo3lhH7QGh4vG3U1qK1mc.jpg",
+	"posterPath": "/cRiDlzzZC5lL7fvImuSjs04SUIJ.jpg",
+	"mediaInfo": {
+		"downloadStatus": [],
+		"downloadStatus4k": [],
+		"id": 79,
+		"mediaType": "tv",
+		"tmdbId": 86831,
+		"tvdbId": 357888,
+		"imdbId": null,
+		"status": 4,
+		"status4k": 1,
+		"createdAt": "2022-02-05T04:30:01.000Z",
+		"updatedAt": "2022-02-05T09:25:22.000Z",
+		"lastSeasonChange": "2022-02-05T04:30:01.000Z",
+		"mediaAddedAt": "2022-02-04T01:16:35.000Z",
+		"serviceId": 0,
+		"serviceId4k": null,
+		"externalServiceId": 7,
+		"externalServiceId4k": null,
+		"externalServiceSlug": "love-death-and-robots",
+		"externalServiceSlug4k": null,
+		"ratingKey": "182",
+		"ratingKey4k": null,
+		"seasons": [
+			{
+				"id": 11,
+				"seasonNumber": 1,
+				"status": 1,
+				"status4k": 1,
+				"createdAt": "2022-02-05T04:30:01.000Z",
+				"updatedAt": "2022-02-05T04:30:01.000Z"
+			},
+			{
+				"id": 24,
+				"seasonNumber": 2,
+				"status": 5,
+				"status4k": 1,
+				"createdAt": "2022-02-05T04:30:01.000Z",
+				"updatedAt": "2022-02-05T04:30:01.000Z"
+			},
+			{
+				"id": 85,
+				"seasonNumber": 3,
+				"status": 3,
+				"status4k": 1,
+				"createdAt": "2022-04-26T04:30:02.000Z",
+				"updatedAt": "2022-04-26T04:30:02.000Z"
+			}
+		],
+		"plexUrl": "https://app.plex.tv/desktop#!/server/5b88b3c20d2d092c0ee848f9044f3f3bee033d91/details?key=%2Flibrary%2Fmetadata%2F182",
+		"serviceUrl": "http://server:8989/series/love-death-and-robots"
+	}
+}
--- a/src/modules/overseerr/index.ts
+++ b/src/modules/overseerr/index.ts
@@ -0,0 +1 @@
+export { OverseerrModule } from './OverseerrModule';
--- a/src/modules/search/SearchModule.tsx
+++ b/src/modules/search/SearchModule.tsx
@@ -1,14 +1,18 @@
-import { Kbd, createStyles, Autocomplete } from '@mantine/core';
+import { Kbd, createStyles, Autocomplete, ScrollArea, Popover, Divider } from '@mantine/core';
 import { useDebouncedValue, useForm, useHotkeys } from '@mantine/hooks';
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
  IconSearch as Search,
  IconBrandYoutube as BrandYoutube,
  IconDownload as Download,
+  IconMovie,
 } from '@tabler/icons';
 import axios from 'axios';
+import { showNotification } from '@mantine/notifications';
 import { useConfig } from '../../tools/state';
 import { IModule } from '../ModuleTypes';
+import { OverseerrModule } from '../overseerr';
+import OverseerrMediaDisplay from '../overseerr/OverseerrMediaDisplay';

 const useStyles = createStyles((theme) => ({
  hide: {
@@ -22,48 +26,72 @@ const useStyles = createStyles((theme) => ({

 export const SearchModule: IModule = {
  title: 'Search Bar',
-  description: 'Show the current time and date in a card',
+  description: 'Search bar to search the web, youtube, torrents or overseerr',
  icon: Search,
  component: SearchBar,
 };

 export default function SearchBar(props: any) {
-  const { config, setConfig } = useConfig();
-  const [opened, setOpened] = useState(false);
-  const [results, setOpenedResults] = useState(false);
-  const [icon, setIcon] = useState(<Search />);
+  const { classes, cx } = useStyles();
+  // Config
+  const { config } = useConfig();
+  const isModuleEnabled = config.modules?.[SearchModule.title]?.enabled ?? false;
+  const isOverseerrEnabled = config.modules?.[OverseerrModule.title]?.enabled ?? false;
+  const OverseerrService = config.services.find((service) => service.type === 'Overseerr');
  const queryUrl = config.settings.searchUrl ?? 'https://www.google.com/search?q=';
+
+  const [OverseerrResults, setOverseerrResults] = useState<any[]>([]);
+  const [icon, setIcon] = useState(<Search />);
+  const [results, setResults] = useState<any[]>([]);
+  const [opened, setOpened] = useState(false);
+
  const textInput = useRef<HTMLInputElement>();
-  // Find a service with the type of 'Overseerr'
+  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
+
  const form = useForm({
    initialValues: {
      query: '',
    },
  });
-
  const [debounced, cancel] = useDebouncedValue(form.values.query, 250);
-  const [results, setResults] = useState<any[]>([]);
+
  useEffect(() => {
-    if (form.values.query !== debounced || form.values.query === '') return;
-    axios
-      .get(`/api/modules/search?q=${form.values.query}`)
-      .then((res) => setResults(res.data ?? []));
+    if (OverseerrService === undefined && isOverseerrEnabled) {
+      showNotification({
+        title: 'Overseerr integration',
+        message: 'Module enabled but no service is configured with the type "Overseerr"',
+        color: 'red',
+      });
+    }
+  }, [OverseerrService, isOverseerrEnabled]);
+
+  useEffect(() => {
+    if (
+      form.values.query !== debounced ||
+      form.values.query === '' ||
+      (form.values.query.startsWith('!') && !form.values.query.startsWith('!os'))
+    ) {
+      return;
+    }
+    if (form.values.query.startsWith('!os')) {
+      axios
+        .get(
+          `/api/modules/overseerr?query=${form.values.query.replace('!os ', '')}&id=${
+            OverseerrService?.id
+          }`
+        )
+        .then((res) => {
+          setOverseerrResults(res.data.results ?? []);
+        });
+    } else {
+      setOverseerrResults([]);
+      axios
+        .get(`/api/modules/search?q=${form.values.query}`)
+        .then((res) => setResults(res.data ?? []));
+    }
  }, [debounced]);
-  useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
-  const { classes, cx } = useStyles();
-  const rightSection = (
-    <div className={classes.hide}>
-      <Kbd>Ctrl</Kbd>
-      <span style={{ margin: '0 5px' }}>+</span>
-      <Kbd>K</Kbd>
-    </div>
-  );

-  // If enabled modules doesn't contain the module, return null
-  // If module in enabled
-
-  const exists = config.modules?.[SearchModule.title]?.enabled ?? false;
-  if (!exists) {
+  if (!isModuleEnabled) {
    return null;
  }

@@ -76,53 +104,86 @@ export default function SearchBar(props: any) {
      onChange={() => {
        // If query contains !yt or !t add "Searching on YouTube" or "Searching torrent"
        const query = form.values.query.trim();
-        const isYoutube = query.startsWith('!yt');
-        const isTorrent = query.startsWith('!t');
-        if (isYoutube) {
-          setIcon(<BrandYoutube size={22} />);
-        } else if (isTorrent) {
-          setIcon(<Download size={22} />);
-        } else {
-          setIcon(<Search size={22} />);
+        switch (query.substring(0, 3)) {
+          case '!yt':
+            setIcon(<BrandYoutube />);
+            break;
+          case '!t ':
+            setIcon(<Download />);
+            break;
+          case '!os':
+            setIcon(<IconMovie />);
+            break;
+          default:
+            setIcon(<Search />);
+            break;
        }
      }}
      onSubmit={form.onSubmit((values) => {
        const query = values.query.trim();
-        const isYoutube = query.startsWith('!yt');
-        const isTorrent = query.startsWith('!t');
-        form.setValues({ query: '' });
        setTimeout(() => {
-          if (isYoutube) {
-            window.open(`https://www.youtube.com/results?search_query=${query.substring(4)}`);
-          } else if (isTorrent) {
-            window.open(`https://bitsearch.to/search?q=${query.substring(4)}`);
-          } else {
-            window.open(
-              `${
-                queryUrl.includes('%s')
-                  ? queryUrl.replace('%s', values.query)
-                  : queryUrl + values.query
-              }`
-            );
+          form.setValues({ query: '' });
+          switch (query.substring(0, 3)) {
+            case '!yt':
+              window.open(`https://www.youtube.com/results?search_query=${query.substring(3)}`);
+              break;
+            case '!t ':
+              window.open(`https://www.torrentdownloads.me/search/?search=${query.substring(3)}`);
+              break;
+            case '!os':
+              break;
+            default:
+              window.open(
+                `${queryUrl.includes('%s') ? queryUrl.replace('%s', query) : `${queryUrl}${query}`}`
+              );
+              break;
          }
-        }, 20);
+        }, 500);
      })}
    >
-      <Autocomplete
-        autoFocus
-        variant="filled"
-        data={autocompleteData}
-        icon={icon}
-        ref={textInput}
-        rightSectionWidth={90}
-        rightSection={rightSection}
+      <Popover
+        opened={opened}
+        position="bottom"
+        placement="start"
+        withArrow
        radius="md"
-        size="md"
-        styles={{ rightSection: { pointerEvents: 'none' } }}
-        placeholder="Search the web..."
-        {...props}
-        {...form.getInputProps('query')}
-      />
+        trapFocus={false}
+        transition="pop-bottom-right"
+        onFocusCapture={() => setOpened(true)}
+        onBlurCapture={() => setOpened(false)}
+        target={
+          <Autocomplete
+            autoFocus
+            variant="filled"
+            data={autocompleteData}
+            icon={icon}
+            ref={textInput}
+            rightSectionWidth={90}
+            rightSection={
+              <div className={classes.hide}>
+                <Kbd>Ctrl</Kbd>
+                <span style={{ margin: '0 5px' }}>+</span>
+                <Kbd>K</Kbd>
+              </div>
+            }
+            radius="md"
+            size="md"
+            styles={{ rightSection: { pointerEvents: 'none' } }}
+            placeholder="Search the web..."
+            {...props}
+            {...form.getInputProps('query')}
+          />
+        }
+      >
+        <ScrollArea style={{ height: 400 }} 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>
+      </Popover>
    </form>
  );
 }
				`@@ -0,0 +1 @@`
				`export { OverseerrModule } from './OverseerrModule';`