fix: added a refresh interval if download status is in progress (#3275)

* fix: added a refresh interval if download status is in progress * refactor: switched to a function instead of useEffect * feat: added editable download sync schedule
2025-09-27 20:42:03 +02:00 · 2023-02-15 10:16:13 -05:00
parent dd1378cef5
commit 1e2c6f46ab
9 changed files with 125 additions and 30 deletions
--- a/src/components/CollectionDetails/index.tsx
+++ b/src/components/CollectionDetails/index.tsx
@@ -10,6 +10,7 @@ import useSettings from '@app/hooks/useSettings';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
+import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
 import { ArrowDownTrayIcon } from '@heroicons/react/24/outline';
 import { MediaStatus } from '@server/constants/media';
 import type { Collection } from '@server/models/Collection';
@@ -39,20 +40,8 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
  const [requestModal, setRequestModal] = useState(false);
  const [is4k, setIs4k] = useState(false);

-  const {
-    data,
-    error,
-    mutate: revalidate,
-  } = useSWR<Collection>(`/api/v1/collection/${router.query.collectionId}`, {
-    fallbackData: collection,
-    revalidateOnMount: true,
-  });
-
-  const { data: genres } =
-    useSWR<{ id: number; name: string }[]>(`/api/v1/genres/movie`);
-
-  const [downloadStatus, downloadStatus4k] = useMemo(() => {
-    return [
+  const returnCollectionDownloadItems = (data: Collection | undefined) => {
+    const [downloadStatus, downloadStatus4k] = [
      data?.parts.flatMap((item) =>
        item.mediaInfo?.downloadStatus ? item.mediaInfo?.downloadStatus : []
      ),
@@ -60,7 +49,30 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
        item.mediaInfo?.downloadStatus4k ? item.mediaInfo?.downloadStatus4k : []
      ),
    ];
-  }, [data?.parts]);
+
+    return { downloadStatus, downloadStatus4k };
+  };
+
+  const {
+    data,
+    error,
+    mutate: revalidate,
+  } = useSWR<Collection>(`/api/v1/collection/${router.query.collectionId}`, {
+    fallbackData: collection,
+    revalidateOnMount: true,
+    refreshInterval: refreshIntervalHelper(
+      returnCollectionDownloadItems(collection),
+      15000
+    ),
+  });
+
+  const { data: genres } =
+    useSWR<{ id: number; name: string }[]>(`/api/v1/genres/movie`);
+
+  const [downloadStatus, downloadStatus4k] = useMemo(() => {
+    const downloadItems = returnCollectionDownloadItems(data);
+    return [downloadItems.downloadStatus, downloadItems.downloadStatus4k];
+  }, [data]);

  const [titles, titles4k] = useMemo(() => {
    return [
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -26,6 +26,7 @@ import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import { sortCrewPriority } from '@app/utils/creditHelpers';
+import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
 import {
  ArrowRightCircleIcon,
  CloudIcon,
@@ -110,6 +111,13 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
    mutate: revalidate,
  } = useSWR<MovieDetailsType>(`/api/v1/movie/${router.query.movieId}`, {
    fallbackData: movie,
+    refreshInterval: refreshIntervalHelper(
+      {
+        downloadStatus: movie?.mediaInfo?.downloadStatus,
+        downloadStatus4k: movie?.mediaInfo?.downloadStatus4k,
+      },
+      15000
+    ),
  });

  const { data: ratingData } = useSWR<RTRating>(
--- a/src/components/RequestCard/index.tsx
+++ b/src/components/RequestCard/index.tsx
@@ -7,6 +7,7 @@ import StatusBadge from '@app/components/StatusBadge';
 import useDeepLinks from '@app/hooks/useDeepLinks';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
+import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
 import { withProperties } from '@app/utils/typeHelpers';
 import {
  ArrowPathIcon,
@@ -220,6 +221,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
    request.type === 'movie'
      ? `/api/v1/movie/${request.media.tmdbId}`
      : `/api/v1/tv/${request.media.tmdbId}`;
+
  const { data: title, error } = useSWR<MovieDetails | TvDetails>(
    inView ? `${url}` : null
  );
@@ -229,6 +231,13 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
    mutate: revalidate,
  } = useSWR<MediaRequest>(`/api/v1/request/${request.id}`, {
    fallbackData: request,
+    refreshInterval: refreshIntervalHelper(
+      {
+        downloadStatus: request.media.downloadStatus,
+        downloadStatus4k: request.media.downloadStatus4k,
+      },
+      15000
+    ),
  });

  const { plexUrl, plexUrl4k } = useDeepLinks({
--- a/src/components/RequestList/RequestItem/index.tsx
+++ b/src/components/RequestList/RequestItem/index.tsx
@@ -7,6 +7,7 @@ import StatusBadge from '@app/components/StatusBadge';
 import useDeepLinks from '@app/hooks/useDeepLinks';
 import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
+import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
 import {
  ArrowPathIcon,
  CheckIcon,
@@ -293,6 +294,13 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
    `/api/v1/request/${request.id}`,
    {
      fallbackData: request,
+      refreshInterval: refreshIntervalHelper(
+        {
+          downloadStatus: request.media.downloadStatus,
+          downloadStatus4k: request.media.downloadStatus4k,
+        },
+        15000
+      ),
    }
  );

--- a/src/components/Settings/SettingsJobsCache/index.tsx
+++ b/src/components/Settings/SettingsJobsCache/index.tsx
@@ -67,6 +67,8 @@ const messages: { [messageName: string]: MessageDescriptor } = defineMessages({
    'Every {jobScheduleHours, plural, one {hour} other {{jobScheduleHours} hours}}',
  editJobScheduleSelectorMinutes:
    'Every {jobScheduleMinutes, plural, one {minute} other {{jobScheduleMinutes} minutes}}',
+  editJobScheduleSelectorSeconds:
+    'Every {jobScheduleSeconds, plural, one {second} other {{jobScheduleSeconds} seconds}}',
  imagecache: 'Image Cache',
  imagecacheDescription:
    'When enabled in settings, Overseerr will proxy and cache images from pre-configured external sources. Cached images are saved into your config folder. You can find the files in <code>{appDataPath}/cache/images</code>.',
@@ -78,7 +80,7 @@ interface Job {
  id: JobId;
  name: string;
  type: 'process' | 'command';
-  interval: 'short' | 'long' | 'fixed';
+  interval: 'seconds' | 'minutes' | 'hours' | 'fixed';
  cronSchedule: string;
  nextExecutionTime: string;
  running: boolean;
@@ -89,10 +91,11 @@ type JobModalState = {
  job?: Job;
  scheduleHours: number;
  scheduleMinutes: number;
+  scheduleSeconds: number;
 };

 type JobModalAction =
-  | { type: 'set'; hours?: number; minutes?: number }
+  | { type: 'set'; hours?: number; minutes?: number; seconds?: number }
  | {
      type: 'close';
    }
@@ -115,6 +118,7 @@ const jobModalReducer = (
        job: action.job,
        scheduleHours: 1,
        scheduleMinutes: 5,
+        scheduleSeconds: 30,
      };

    case 'set':
@@ -122,6 +126,7 @@ const jobModalReducer = (
        ...state,
        scheduleHours: action.hours ?? state.scheduleHours,
        scheduleMinutes: action.minutes ?? state.scheduleMinutes,
+        scheduleSeconds: action.seconds ?? state.scheduleSeconds,
      };
  }
 };
@@ -149,6 +154,7 @@ const SettingsJobs = () => {
    isOpen: false,
    scheduleHours: 1,
    scheduleMinutes: 5,
+    scheduleSeconds: 30,
  });
  const [isSaving, setIsSaving] = useState(false);

@@ -200,9 +206,11 @@ const SettingsJobs = () => {
    const jobScheduleCron = ['0', '0', '*', '*', '*', '*'];

    try {
-      if (jobModalState.job?.interval === 'short') {
+      if (jobModalState.job?.interval === 'seconds') {
+        jobScheduleCron.splice(0, 2, `*/${jobModalState.scheduleSeconds}`, '*');
+      } else if (jobModalState.job?.interval === 'minutes') {
        jobScheduleCron[1] = `*/${jobModalState.scheduleMinutes}`;
-      } else if (jobModalState.job?.interval === 'long') {
+      } else if (jobModalState.job?.interval === 'hours') {
        jobScheduleCron[2] = `*/${jobModalState.scheduleHours}`;
      } else {
        // jobs with interval: fixed should not be editable
@@ -286,7 +294,30 @@ const SettingsJobs = () => {
                  {intl.formatMessage(messages.editJobSchedulePrompt)}
                </label>
                <div className="form-input-area">
-                  {jobModalState.job?.interval === 'short' ? (
+                  {jobModalState.job?.interval === 'seconds' ? (
+                    <select
+                      name="jobScheduleSeconds"
+                      className="inline"
+                      value={jobModalState.scheduleSeconds}
+                      onChange={(e) =>
+                        dispatch({
+                          type: 'set',
+                          seconds: Number(e.target.value),
+                        })
+                      }
+                    >
+                      {[30, 45, 60].map((v) => (
+                        <option value={v} key={`jobScheduleSeconds-${v}`}>
+                          {intl.formatMessage(
+                            messages.editJobScheduleSelectorSeconds,
+                            {
+                              jobScheduleSeconds: v,
+                            }
+                          )}
+                        </option>
+                      ))}
+                    </select>
+                  ) : jobModalState.job?.interval === 'minutes' ? (
                    <select
                      name="jobScheduleMinutes"
                      className="inline"
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -30,6 +30,7 @@ import { Permission, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import { sortCrewPriority } from '@app/utils/creditHelpers';
+import { refreshIntervalHelper } from '@app/utils/refreshIntervalHelper';
 import { Disclosure, Transition } from '@headlessui/react';
 import {
  ArrowRightCircleIcon,
@@ -109,6 +110,13 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
    mutate: revalidate,
  } = useSWR<TvDetailsType>(`/api/v1/tv/${router.query.tvId}`, {
    fallbackData: tv,
+    refreshInterval: refreshIntervalHelper(
+      {
+        downloadStatus: tv?.mediaInfo?.downloadStatus,
+        downloadStatus4k: tv?.mediaInfo?.downloadStatus4k,
+      },
+      15000
+    ),
  });

  const { data: ratingData } = useSWR<RTRating>(