![\"All](\"https://img.shields.io/badge/all_contributors-<%=){kind=icon}
-orange.svg\"/>-orange.svg\"/>",
diff --git a/.github/holopin.yml b/.github/holopin.yml
new file mode 100644
index 0000000000..ee4edc81b3
--- /dev/null
+++ b/.github/holopin.yml
@@ -0,0 +1,5 @@
+organization: overseerr
+defaultSticker: clcyagj1j329008l468ya8pu2
+stickers:
+ - id: clcyagj1j329008l468ya8pu2
+ alias: overseerr-contributor
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
new file mode 100644
index 0000000000..10926bbd92
--- /dev/null
+++ b/.github/workflows/codeql.yml
@@ -0,0 +1,41 @@
+name: 'CodeQL'
+
+on:
+ push:
+ branches: ['develop']
+ pull_request:
+ branches: ['develop']
+ schedule:
+ - cron: '50 7 * * 5'
+
+jobs:
+ analyze:
+ name: Analyze
+ runs-on: ubuntu-latest
+ permissions:
+ actions: read
+ contents: read
+ security-events: write
+
+ strategy:
+ fail-fast: false
+ matrix:
+ language: [javascript]
+
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v3
+
+ - name: Initialize CodeQL
+ uses: github/codeql-action/init@v2
+ with:
+ languages: ${{ matrix.language }}
+ queries: +security-and-quality
+
+ - name: Autobuild
+ uses: github/codeql-action/autobuild@v2
+
+ - name: Perform CodeQL Analysis
+ uses: github/codeql-action/analyze@v2
+ with:
+ category: '/language:${{ matrix.language }}'
diff --git a/README.md b/README.md
index d81193a2a7..ae82f5489a 100644
--- a/README.md
+++ b/README.md
@@ -9,10 +9,9 @@
-
-
+
@@ -76,110 +75,112 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
(
ref?: React.Ref (
break;
case 'ghost':
buttonStyle.push(
- 'text-white bg-transaprent border-gray-600 hover:border-gray-200 focus:border-gray-100 active:border-gray-100'
+ 'text-white bg-transparent border-gray-600 hover:border-gray-200 focus:border-gray-100 active:border-gray-100'
);
break;
default:
diff --git a/src/components/Common/ButtonWithDropdown/index.tsx b/src/components/Common/ButtonWithDropdown/index.tsx
index be6815b940..b5bc0cb649 100644
--- a/src/components/Common/ButtonWithDropdown/index.tsx
+++ b/src/components/Common/ButtonWithDropdown/index.tsx
@@ -1,7 +1,7 @@
import useClickOutside from '@app/hooks/useClickOutside';
import { withProperties } from '@app/utils/typeHelpers';
import { Transition } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/solid';
+import { ChevronDownIcon } from '@heroicons/react/24/solid';
import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'react';
import { Fragment, useRef, useState } from 'react';
diff --git a/src/components/Common/ConfirmButton/index.tsx b/src/components/Common/ConfirmButton/index.tsx
index 1f5756cb99..4234da68a6 100644
--- a/src/components/Common/ConfirmButton/index.tsx
+++ b/src/components/Common/ConfirmButton/index.tsx
@@ -1,6 +1,6 @@
import Button from '@app/components/Common/Button';
import useClickOutside from '@app/hooks/useClickOutside';
-import { useRef, useState } from 'react';
+import { forwardRef, useRef, useState } from 'react';
interface ConfirmButtonProps {
onClick: () => void;
@@ -9,50 +9,51 @@ interface ConfirmButtonProps {
children: React.ReactNode;
}
-const ConfirmButton = ({
- onClick,
- children,
- confirmText,
- className,
-}: ConfirmButtonProps) => {
- const ref = useRef(null);
- useClickOutside(ref, () => setIsClicked(false));
- const [isClicked, setIsClicked] = useState(false);
- return (
-
+ );
+ }
+);
+
+ConfirmButton.displayName = 'ConfirmButton';
export default ConfirmButton;
diff --git a/src/components/Common/MultiRangeSlider/index.tsx b/src/components/Common/MultiRangeSlider/index.tsx
new file mode 100644
index 0000000000..c3da2b5778
--- /dev/null
+++ b/src/components/Common/MultiRangeSlider/index.tsx
@@ -0,0 +1,113 @@
+import Tooltip from '@app/components/Common/Tooltip';
+import useDebouncedState from '@app/hooks/useDebouncedState';
+import { useEffect, useRef } from 'react';
+
+type MultiRangeSliderProps = {
+ min: number;
+ max: number;
+ defaultMinValue?: number;
+ defaultMaxValue?: number;
+ subText?: string;
+ onUpdateMin: (min: number) => void;
+ onUpdateMax: (max: number) => void;
+};
+
+const MultiRangeSlider = ({
+ min,
+ max,
+ defaultMinValue,
+ defaultMaxValue,
+ subText,
+ onUpdateMin,
+ onUpdateMax,
+}: MultiRangeSliderProps) => {
+ const touched = useRef(false);
+ const [valueMin, finalValueMin, setValueMin] = useDebouncedState(
+ defaultMinValue ?? min
+ );
+ const [valueMax, finalValueMax, setValueMax] = useDebouncedState(
+ defaultMaxValue ?? max
+ );
+
+ const minThumb = ((valueMin - min) / (max - min)) * 100;
+ const maxThumb = ((valueMax - min) / (max - min)) * 100;
+
+ useEffect(() => {
+ if (touched.current) {
+ onUpdateMin(finalValueMin);
+ }
+ }, [finalValueMin, onUpdateMin]);
+
+ useEffect(() => {
+ if (touched.current) {
+ onUpdateMax(finalValueMax);
+ }
+ }, [finalValueMax, onUpdateMax]);
+
+ useEffect(() => {
+ touched.current = false;
+ setValueMax(defaultMaxValue ?? max);
+ setValueMin(defaultMinValue ?? min);
+ }, [defaultMinValue, defaultMaxValue, setValueMax, setValueMin, min, max]);
+
+ return (
+
+
+ );
+};
+
+export default MultiRangeSlider;
diff --git a/src/components/Common/SensitiveInput/index.tsx b/src/components/Common/SensitiveInput/index.tsx
index 6652f5519e..ae11b9517f 100644
--- a/src/components/Common/SensitiveInput/index.tsx
+++ b/src/components/Common/SensitiveInput/index.tsx
@@ -1,4 +1,4 @@
-import { EyeIcon, EyeOffIcon } from '@heroicons/react/solid';
+import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/solid';
import { Field } from 'formik';
import { useState } from 'react';
@@ -43,7 +43,7 @@ const SensitiveInput = ({ as = 'input', ...props }: SensitiveInputProps) => {
type="button"
className="input-action"
>
- {isHidden ?
+ {subText}
+
+ )}
+ e.stopPropagation()}
>
-
diff --git a/src/components/Common/StatusBadgeMini/index.tsx b/src/components/Common/StatusBadgeMini/index.tsx
index 0653c7d804..a7e24a3780 100644
--- a/src/components/Common/StatusBadgeMini/index.tsx
+++ b/src/components/Common/StatusBadgeMini/index.tsx
@@ -1,41 +1,67 @@
-import {
- BellIcon,
- CheckIcon,
- ClockIcon,
- MinusSmIcon,
-} from '@heroicons/react/solid';
+import Spinner from '@app/assets/spinner.svg';
+import { CheckCircleIcon } from '@heroicons/react/20/solid';
+import { BellIcon, ClockIcon, MinusSmallIcon } from '@heroicons/react/24/solid';
import { MediaStatus } from '@server/constants/media';
interface StatusBadgeMiniProps {
status: MediaStatus;
is4k?: boolean;
+ inProgress?: boolean;
+ // Should the badge shrink on mobile to a smaller size? (TitleCard)
+ shrink?: boolean;
}
-const StatusBadgeMini = ({ status, is4k = false }: StatusBadgeMiniProps) => {
- const badgeStyle = ['w-5 rounded-full p-0.5 text-white ring-1'];
+const StatusBadgeMini = ({
+ status,
+ is4k = false,
+ inProgress = false,
+ shrink = false,
+}: StatusBadgeMiniProps) => {
+ const badgeStyle = [
+ `rounded-full bg-opacity-80 shadow-md ${
+ shrink ? 'w-4 sm:w-5 border p-0' : 'w-5 ring-1 p-0.5'
+ }`,
+ ];
+
let indicatorIcon: React.ReactNode;
switch (status) {
case MediaStatus.PROCESSING:
- badgeStyle.push('bg-indigo-500 ring-indigo-400');
+ badgeStyle.push(
+ 'bg-indigo-500 border-indigo-400 ring-indigo-400 text-indigo-100'
+ );
indicatorIcon =
+
)}
-
@@ -95,8 +95,10 @@ const SlideOver = ({
@@ -83,7 +83,7 @@ const SlideOver = ({
className="text-gray-200 transition duration-150 ease-in-out hover:text-white"
onClick={() => onClose()}
>
-
- {children}
+
+
+ {children}
+
+
@@ -43,7 +43,7 @@ const MovieGenreSlider = () => {
image={`https://image.tmdb.org/t/p/w1280_filter(duotone,${
genreColorMap[genre.id] ?? genreColorMap[0]
})${genre.backdrops[4]}`}
- url={`/discover/movies/genre/${genre.id}`}
+ url={`/discover/movies?genre=${genre.id}`}
/>
))}
placeholder={
diff --git a/src/components/Common/Tag/index.tsx b/src/components/Common/Tag/index.tsx
new file mode 100644
index 0000000000..dcb426d40f
--- /dev/null
+++ b/src/components/Common/Tag/index.tsx
@@ -0,0 +1,24 @@
+import { TagIcon } from '@heroicons/react/24/outline';
+import React from 'react';
+
+type TagProps = {
+ children: React.ReactNode;
+ iconSvg?: JSX.Element;
+};
+
+const Tag = ({ children, iconSvg }: TagProps) => {
+ return (
+ {indicatorIcon}
{is4k && 4K}
+ {iconSvg ? (
+ React.cloneElement(iconSvg, {
+ className: 'mr-1 h-4 w-4',
+ })
+ ) : (
+
+ );
+};
+
+export default Tag;
diff --git a/src/components/Common/Tooltip/index.tsx b/src/components/Common/Tooltip/index.tsx
index 82bc7a7a9d..e8574699ef 100644
--- a/src/components/Common/Tooltip/index.tsx
+++ b/src/components/Common/Tooltip/index.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import ReactDOM from 'react-dom';
import type { Config } from 'react-popper-tooltip';
import { usePopperTooltip } from 'react-popper-tooltip';
@@ -6,9 +7,15 @@ type TooltipProps = {
content: React.ReactNode;
children: React.ReactElement;
tooltipConfig?: Partial
- {content}
-
- )}
+ {visible &&
+ content &&
+ ReactDOM.createPortal(
+
+ {content}
+ ,
+ document.body
+ )}
);
};
diff --git a/src/components/CompanyTag/index.tsx b/src/components/CompanyTag/index.tsx
new file mode 100644
index 0000000000..7c49b8ccac
--- /dev/null
+++ b/src/components/CompanyTag/index.tsx
@@ -0,0 +1,28 @@
+import Spinner from '@app/assets/spinner.svg';
+import Tag from '@app/components/Common/Tag';
+import { BuildingOffice2Icon } from '@heroicons/react/24/outline';
+import type { ProductionCompany, TvNetwork } from '@server/models/common';
+import useSWR from 'swr';
+
+type CompanyTagProps = {
+ type: 'studio' | 'network';
+ companyId: number;
+};
+
+const CompanyTag = ({ companyId, type }: CompanyTagProps) => {
+ const { data, error } = useSWR
+
+
+
+
+
+
+
+
+
+
+ {hoverPosition === Position.Above && (
+
+ )}
+ {hoverPosition === Position.Below && (
+
+ )}
+
+ );
+};
+
+export default DiscoverSliderEdit;
diff --git a/src/components/Discover/DiscoverTv/index.tsx b/src/components/Discover/DiscoverTv/index.tsx
new file mode 100644
index 0000000000..bd3a170150
--- /dev/null
+++ b/src/components/Discover/DiscoverTv/index.tsx
@@ -0,0 +1,145 @@
+import Button from '@app/components/Common/Button';
+import Header from '@app/components/Common/Header';
+import ListView from '@app/components/Common/ListView';
+import PageTitle from '@app/components/Common/PageTitle';
+import type { FilterOptions } from '@app/components/Discover/constants';
+import {
+ countActiveFilters,
+ prepareFilterValues,
+} from '@app/components/Discover/constants';
+import FilterSlideover from '@app/components/Discover/FilterSlideover';
+import useDiscover from '@app/hooks/useDiscover';
+import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
+import Error from '@app/pages/_error';
+import { BarsArrowDownIcon, FunnelIcon } from '@heroicons/react/24/solid';
+import type { SortOptions as TMDBSortOptions } from '@server/api/themoviedb';
+import type { TvResult } from '@server/models/Search';
+import { useRouter } from 'next/router';
+import { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+const messages = defineMessages({
+ discovertv: 'Series',
+ activefilters:
+ '{count, plural, one {# Active Filter} other {# Active Filters}}',
+ sortPopularityAsc: 'Popularity Ascending',
+ sortPopularityDesc: 'Popularity Descending',
+ sortFirstAirDateAsc: 'First Air Date Ascending',
+ sortFirstAirDateDesc: 'First Air Date Descending',
+ sortTmdbRatingAsc: 'TMDB Rating Ascending',
+ sortTmdbRatingDesc: 'TMDB Rating Descending',
+ sortTitleAsc: 'Title (A-Z) Ascending',
+ sortTitleDesc: 'Title (Z-A) Descending',
+});
+
+const SortOptions: Record
+
+ {isEditing ? (
+
+
+ {getSliderTitle(slider)}
+
+ {(slider.type === DiscoverSliderType.TMDB_MOVIE_KEYWORD ||
+ slider.type === DiscoverSliderType.TMDB_TV_KEYWORD) && (
+
+
+ {slider.data?.split(',').map((keywordId) => (
+
+ )}
+ {(slider.type === DiscoverSliderType.TMDB_NETWORK ||
+ slider.type === DiscoverSliderType.TMDB_STUDIO) && (
+
+ {!slider.isBuiltIn && (
+ <>
+ {!isEditing ? (
+
+ ) : (
+
+ )}
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
+ {children}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {type === 'movie' && (
+ <>
+
+ {intl.formatMessage(messages.studio)}
+
+
+ {intl.formatMessage(
+ type === 'movie' ? messages.releaseDate : messages.firstAirDate
+ )}
+
+
+
+
+
+ {intl.formatMessage(messages.from)}
+
+
+ {intl.formatMessage(messages.to)}
+
+
+
+ {intl.formatMessage(messages.tmdbuserscore)}
+
+
+
+
+ {intl.formatMessage(messages.streamingservices)}
+
+
+
+
+
+
+
+ {intl.formatMessage(messages.recentlyAdded)}
+
+
