fix: use new SettingsBadge component

overseerr-api.yml

@@ -121,6 +121,9 @@ components:
         hideAvailable:
           type: boolean
           example: false
+        hideRequested:
+          type: boolean
+          example: false
         partialRequestsEnabled:
           type: boolean
           example: false

server/interfaces/api/settingsInterfaces.ts

@@ -25,6 +25,7 @@ export interface PublicSettingsResponse {
   applicationTitle: string;
   applicationUrl: string;
   hideAvailable: boolean;
+  hideRequested: boolean;
   localLogin: boolean;
   movie4kEnabled: boolean;
   series4kEnabled: boolean;

server/lib/settings.ts

@@ -94,6 +94,7 @@ export interface MainSettings {
     tv: Quota;
   };
   hideAvailable: boolean;
+  hideRequested: boolean;
   localLogin: boolean;
   newPlexLogin: boolean;
   region: string;
@@ -111,6 +112,7 @@ interface FullPublicSettings extends PublicSettings {
   applicationTitle: string;
   applicationUrl: string;
   hideAvailable: boolean;
+  hideRequested: boolean;
   localLogin: boolean;
   movie4kEnabled: boolean;
   series4kEnabled: boolean;
@@ -287,6 +289,7 @@ class Settings {
           tv: {},
         },
         hideAvailable: false,
+        hideRequested: false,
         localLogin: true,
         newPlexLogin: true,
         region: '',
@@ -479,6 +482,7 @@ class Settings {
       applicationTitle: this.data.main.applicationTitle,
       applicationUrl: this.data.main.applicationUrl,
       hideAvailable: this.data.main.hideAvailable,
+      hideRequested: this.data.main.hideRequested,
       localLogin: this.data.main.localLogin,
       movie4kEnabled: this.data.radarr.some(
         (radarr) => radarr.is4k && radarr.isDefault

src/components/MediaSlider/index.tsx

@@ -55,12 +55,18 @@ const MediaSlider = ({
     [] as (MovieResult | TvResult | PersonResult)[]
   );
 
-  if (settings.currentSettings.hideAvailable) {
+  if (
+    settings.currentSettings.hideAvailable ||
+    settings.currentSettings.hideRequested
+  ) {
     titles = titles.filter(
       (i) =>
-        (i.mediaType === 'movie' || i.mediaType === 'tv') &&
+        i.mediaType === 'person' ||
-        i.mediaInfo?.status !== MediaStatus.AVAILABLE &&
+        (i.mediaInfo?.status !== MediaStatus.AVAILABLE &&
-        i.mediaInfo?.status !== MediaStatus.PARTIALLY_AVAILABLE
+          i.mediaInfo?.status !== MediaStatus.PARTIALLY_AVAILABLE &&
+          (!settings.currentSettings.hideRequested ||
+            (i.mediaInfo?.status !== MediaStatus.PENDING &&
+              i.mediaInfo?.status !== MediaStatus.PROCESSING)))
     );
   }
 

src/components/Search/index.tsx

@@ -33,7 +33,7 @@ const Search = () => {
     {
       query: router.query.query,
     },
-    { hideAvailable: false }
+    { hideAvailableOrRequested: true }
   );
 
   if (error) {

src/components/Settings/SettingsMain.tsx

@@ -40,6 +40,7 @@ const messages = defineMessages({
   toastSettingsSuccess: 'Settings saved successfully!',
   toastSettingsFailure: 'Something went wrong while saving settings.',
   hideAvailable: 'Hide Available Media',
+  hideRequested: 'Hide Requested Media',
   csrfProtection: 'Enable CSRF Protection',
   csrfProtectionTip: 'Set external API access to read-only (requires HTTPS)',
   csrfProtectionHoverTip:
@@ -128,6 +129,7 @@ const SettingsMain = () => {
             applicationUrl: data?.applicationUrl,
             csrfProtection: data?.csrfProtection,
             hideAvailable: data?.hideAvailable,
+            hideRequested: data?.hideRequested,
             locale: data?.locale ?? 'en',
             region: data?.region,
             originalLanguage: data?.originalLanguage,
@@ -144,6 +146,7 @@ const SettingsMain = () => {
                 applicationUrl: values.applicationUrl,
                 csrfProtection: values.csrfProtection,
                 hideAvailable: values.hideAvailable,
+                hideRequested: values.hideRequested,
                 locale: values.locale,
                 region: values.region,
                 originalLanguage: values.originalLanguage,
@@ -398,12 +401,33 @@ const SettingsMain = () => {
                       type="checkbox"
                       id="hideAvailable"
                       name="hideAvailable"
+                      checked={values.hideAvailable || values.hideRequested}
+                      disabled={values.hideRequested}
+                      className={values.hideRequested ? 'opacity-50' : ''}
                       onChange={() => {
                         setFieldValue('hideAvailable', !values.hideAvailable);
                       }}
                     />
                   </div>
                 </div>
+                <div className="form-row">
+                  <label htmlFor="hideRequested" className="checkbox-label">
+                    <span className="mr-2">
+                      {intl.formatMessage(messages.hideRequested)}
+                    </span>
+                    <SettingsBadge badgeType="experimental" />
+                  </label>
+                  <div className="form-input">
+                    <Field
+                      type="checkbox"
+                      id="hideRequested"
+                      name="hideRequested"
+                      onChange={() => {
+                        setFieldValue('hideRequested', !values.hideRequested);
+                      }}
+                    />
+                  </div>
+                </div>
                 <div className="form-row">
                   <label
                     htmlFor="partialRequestsEnabled"

src/context/SettingsContext.tsx

@@ -12,6 +12,7 @@ const defaultSettings = {
   applicationTitle: 'Overseerr',
   applicationUrl: '',
   hideAvailable: false,
+  hideRequested: false,
   localLogin: true,
   movie4kEnabled: false,
   series4kEnabled: false,

src/hooks/useDiscover.ts

@@ -30,7 +30,7 @@ interface DiscoverResult<T, S> {
 const useDiscover = <T extends BaseMedia, S = Record<string, never>>(
   endpoint: string,
   options?: Record<string, unknown>,
-  { hideAvailable = true } = {}
+  { hideAvailableOrRequested = true } = {}
 ): DiscoverResult<T, S> => {
   const settings = useSettings();
   const { data, error, size, setSize, isValidating } = useSWRInfinite<
@@ -71,12 +71,19 @@ const useDiscover = <T extends BaseMedia, S = Record<string, never>>(
 
   let titles = (data ?? []).reduce((a, v) => [...a, ...v.results], [] as T[]);
 
-  if (settings.currentSettings.hideAvailable && hideAvailable) {
+  if (
+    hideAvailableOrRequested &&
+    (settings.currentSettings.hideAvailable ||
+      settings.currentSettings.hideRequested)
+  ) {
     titles = titles.filter(
       (i) =>
-        (i.mediaType === 'movie' || i.mediaType === 'tv') &&
+        i.mediaType === 'person' ||
-        i.mediaInfo?.status !== MediaStatus.AVAILABLE &&
+        (i.mediaInfo?.status !== MediaStatus.AVAILABLE &&
-        i.mediaInfo?.status !== MediaStatus.PARTIALLY_AVAILABLE
+          i.mediaInfo?.status !== MediaStatus.PARTIALLY_AVAILABLE &&
+          (!settings.currentSettings.hideRequested ||
+            (i.mediaInfo?.status !== MediaStatus.PENDING &&
+              i.mediaInfo?.status !== MediaStatus.PROCESSING)))
     );
   }
 

src/i18n/locale/en.json

@@ -773,6 +773,7 @@
   "components.Settings.generalsettings": "General Settings",
   "components.Settings.generalsettingsDescription": "Configure global and default settings for Overseerr.",
   "components.Settings.hideAvailable": "Hide Available Media",
+  "components.Settings.hideRequested": "Hide Requested Media",
   "components.Settings.hostname": "Hostname or IP Address",
   "components.Settings.is4k": "4K",
   "components.Settings.librariesRemaining": "Libraries Remaining: {count}",

src/pages/_app.tsx

@@ -170,6 +170,7 @@ CoreApp.getInitialProps = async (initialProps) => {
     applicationTitle: '',
     applicationUrl: '',
     hideAvailable: false,
+    hideRequested: false,
     movie4kEnabled: false,
     series4kEnabled: false,
     localLogin: true,