fix(requests): handle when tvdbid is null (#657)

Co-authored-by: sct <sctsnipe@gmail.com>
2025-10-02 08:35:39 +02:00 · 2021-01-22 02:49:17 +01:00
parent a3fe4e6321
commit 2da0da826a
14 changed files with 508 additions and 94 deletions
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -165,7 +165,11 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
      <div className="flex flex-col items-center pt-4 lg:flex-row lg:items-end">
        <div className="lg:mr-4">
          <img
-            src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`}
+            src={
+              data.posterPath
+                ? `//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`
+                : '/images/overseerr_poster_not_found.png'
+            }
            alt=""
            className="w-32 rounded shadow md:rounded-lg md:shadow-2xl md:w-44 lg:w-52"
          />
--- a/src/components/RequestModal/MovieRequestModal.tsx
+++ b/src/components/RequestModal/MovieRequestModal.tsx
@@ -39,6 +39,7 @@ const messages = defineMessages({
  errorediting: 'Something went wrong editing the request.',
  requestedited: 'Request edited.',
  autoapproval: 'Auto Approval',
+  requesterror: 'Something went wrong when trying to request media.',
 });

 interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -78,41 +79,50 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({

  const sendRequest = useCallback(async () => {
    setIsUpdating(true);
-    let overrideParams = {};
-    if (requestOverrides) {
-      overrideParams = {
-        serverId: requestOverrides.server,
-        profileId: requestOverrides.profile,
-        rootFolder: requestOverrides.folder,
-      };
-    }
-    const response = await axios.post<MediaRequest>('/api/v1/request', {
-      mediaId: data?.id,
-      mediaType: 'movie',
-      is4k,
-      ...overrideParams,
-    });

-    if (response.data) {
-      if (onComplete) {
-        onComplete(
-          hasPermission(Permission.AUTO_APPROVE) ||
-            hasPermission(Permission.AUTO_APPROVE_MOVIE)
-            ? MediaStatus.PROCESSING
-            : MediaStatus.PENDING
+    try {
+      let overrideParams = {};
+      if (requestOverrides) {
+        overrideParams = {
+          serverId: requestOverrides.server,
+          profileId: requestOverrides.profile,
+          rootFolder: requestOverrides.folder,
+        };
+      }
+      const response = await axios.post<MediaRequest>('/api/v1/request', {
+        mediaId: data?.id,
+        mediaType: 'movie',
+        is4k,
+        ...overrideParams,
+      });
+
+      if (response.data) {
+        if (onComplete) {
+          onComplete(
+            hasPermission(Permission.AUTO_APPROVE) ||
+              hasPermission(Permission.AUTO_APPROVE_MOVIE)
+              ? MediaStatus.PROCESSING
+              : MediaStatus.PENDING
+          );
+        }
+        addToast(
+          <span>
+            {intl.formatMessage(messages.requestSuccess, {
+              title: data?.title,
+              strong: function strong(msg) {
+                return <strong>{msg}</strong>;
+              },
+            })}
+          </span>,
+          { appearance: 'success', autoDismiss: true }
        );
      }
-      addToast(
-        <span>
-          {intl.formatMessage(messages.requestSuccess, {
-            title: data?.title,
-            strong: function strong(msg) {
-              return <strong>{msg}</strong>;
-            },
-          })}
-        </span>,
-        { appearance: 'success', autoDismiss: true }
-      );
+    } catch (e) {
+      addToast(intl.formatMessage(messages.requesterror), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    } finally {
      setIsUpdating(false);
    }
  }, [data, onComplete, addToast, requestOverrides]);
@@ -123,25 +133,29 @@ const MovieRequestModal: React.FC<RequestModalProps> = ({

  const cancelRequest = async () => {
    setIsUpdating(true);
-    const response = await axios.delete<MediaRequest>(
-      `/api/v1/request/${activeRequest?.id}`
-    );

-    if (response.status === 204) {
-      if (onComplete) {
-        onComplete(MediaStatus.UNKNOWN);
-      }
-      addToast(
-        <span>
-          {intl.formatMessage(messages.requestCancel, {
-            title: data?.title,
-            strong: function strong(msg) {
-              return <strong>{msg}</strong>;
-            },
-          })}
-        </span>,
-        { appearance: 'success', autoDismiss: true }
+    try {
+      const response = await axios.delete<MediaRequest>(
+        `/api/v1/request/${activeRequest?.id}`
      );
+
+      if (response.status === 204) {
+        if (onComplete) {
+          onComplete(MediaStatus.UNKNOWN);
+        }
+        addToast(
+          <span>
+            {intl.formatMessage(messages.requestCancel, {
+              title: data?.title,
+              strong: function strong(msg) {
+                return <strong>{msg}</strong>;
+              },
+            })}
+          </span>,
+          { appearance: 'success', autoDismiss: true }
+        );
+      }
+    } catch (e) {
      setIsUpdating(false);
    }
  };
--- a/src/components/RequestModal/SearchByNameModal/index.tsx
+++ b/src/components/RequestModal/SearchByNameModal/index.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import Alert from '../../Common/Alert';
+import Modal from '../../Common/Modal';
+import { SmallLoadingSpinner } from '../../Common/LoadingSpinner';
+import useSWR from 'swr';
+import { defineMessages, useIntl } from 'react-intl';
+import { SonarrSeries } from '../../../../server/api/sonarr';
+
+const messages = defineMessages({
+  next: 'Next',
+  notvdbid: 'Manual match required',
+  notvdbiddescription:
+    "We couldn't automatically match your request. Please select the correct match from the list below.",
+  nosummary: 'No summary for this title was found.',
+});
+
+interface SearchByNameModalProps {
+  setTvdbId: (id: number) => void;
+  tvdbId: number | undefined;
+  loading: boolean;
+  onCancel?: () => void;
+  closeModal: () => void;
+  modalTitle: string;
+  tmdbId: number;
+}
+
+const SearchByNameModal: React.FC<SearchByNameModalProps> = ({
+  setTvdbId,
+  tvdbId,
+  loading,
+  onCancel,
+  closeModal,
+  modalTitle,
+  tmdbId,
+}) => {
+  const intl = useIntl();
+  const { data, error } = useSWR<SonarrSeries[]>(
+    `/api/v1/service/sonarr/lookup/${tmdbId}`
+  );
+
+  const handleClick = (tvdbId: number) => {
+    setTvdbId(tvdbId);
+  };
+
+  return (
+    <Modal
+      loading={loading && !error}
+      backgroundClickable
+      onCancel={onCancel}
+      onOk={closeModal}
+      title={modalTitle}
+      okText={intl.formatMessage(messages.next)}
+      okDisabled={!tvdbId}
+      okButtonType="primary"
+      iconSvg={
+        <svg
+          className="w-6 h-6"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
+          />
+        </svg>
+      }
+    >
+      <Alert title={intl.formatMessage(messages.notvdbid)} type="info">
+        {intl.formatMessage(messages.notvdbiddescription)}
+      </Alert>
+      {!data && !error && <SmallLoadingSpinner />}
+      <div className="grid grid-cols-1 gap-4 pb-2 md:grid-cols-2">
+        {data?.slice(0, 6).map((item) => (
+          <button
+            key={item.tvdbId}
+            className="container flex flex-col items-center justify-center h-40 mx-auto space-y-4 transition scale-100 outline-none cursor-pointer focus:ring focus:ring-indigo-500 focus:ring-opacity-70 focus:outline-none rounded-xl transform-gpu hover:scale-105"
+            onClick={() => handleClick(item.tvdbId)}
+          >
+            <div
+              className={`bg-gray-600 h-40 overflow-hidden w-full flex items-center p-2 rounded-xl shadow transition ${
+                tvdbId === item.tvdbId ? 'ring ring-indigo-500' : ''
+              } `}
+            >
+              <div className="flex items-center flex-none w-24 space-x-4">
+                <img
+                  src={
+                    item.remotePoster ??
+                    '/images/overseerr_poster_not_found.png'
+                  }
+                  alt={item.title}
+                  className="w-auto rounded-md h-100"
+                />
+              </div>
+              <div className="self-start flex-grow p-3 text-left">
+                <div className="text-sm font-medium text-grey-200">
+                  {item.title}
+                </div>
+                <div className="h-24 overflow-hidden text-sm text-gray-400">
+                  {item.overview ?? intl.formatMessage(messages.nosummary)}
+                </div>
+              </div>
+            </div>
+          </button>
+        ))}
+      </div>
+    </Modal>
+  );
+};
+
+export default SearchByNameModal;
--- a/src/components/RequestModal/TvRequestModal.tsx
+++ b/src/components/RequestModal/TvRequestModal.tsx
@@ -18,6 +18,7 @@ import globalMessages from '../../i18n/globalMessages';
 import SeasonRequest from '../../../server/entity/SeasonRequest';
 import Alert from '../Common/Alert';
 import AdvancedRequester, { RequestOverrides } from './AdvancedRequester';
+import SearchByNameModal from './SearchByNameModal';

 const messages = defineMessages({
  requestadmin: 'Your request will be immediately approved.',
@@ -40,6 +41,12 @@ const messages = defineMessages({
  requestedited: 'Request edited.',
  requestcancelled: 'Request cancelled.',
  autoapproval: 'Auto Approval',
+  requesterror: 'Something went wrong when trying to request media.',
+  next: 'Next',
+  notvdbid: 'No TVDB id was found connected on TMDB',
+  notvdbiddescription:
+    'Either add the TVDB id to TMDB and come back later, or select the correct match below.',
+  backbutton: 'Back',
 });

 interface RequestModalProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -73,6 +80,12 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
  );
  const intl = useIntl();
  const { hasPermission } = useUser();
+  const [searchModal, setSearchModal] = useState<{
+    show: boolean;
+  }>({
+    show: true,
+  });
+  const [tvdbId, setTvdbId] = useState<number | undefined>(undefined);

  const updateRequest = async () => {
    if (!editRequest) {
@@ -129,38 +142,47 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
    if (onUpdating) {
      onUpdating(true);
    }
-    let overrideParams = {};
-    if (requestOverrides) {
-      overrideParams = {
-        serverId: requestOverrides.server,
-        profileId: requestOverrides.profile,
-        rootFolder: requestOverrides.folder,
-      };
-    }
-    const response = await axios.post<MediaRequest>('/api/v1/request', {
-      mediaId: data?.id,
-      tvdbId: data?.externalIds.tvdbId,
-      mediaType: 'tv',
-      is4k,
-      seasons: selectedSeasons,
-      ...overrideParams,
-    });

-    if (response.data) {
-      if (onComplete) {
-        onComplete(response.data.media.status);
+    try {
+      let overrideParams = {};
+      if (requestOverrides) {
+        overrideParams = {
+          serverId: requestOverrides.server,
+          profileId: requestOverrides.profile,
+          rootFolder: requestOverrides.folder,
+        };
      }
-      addToast(
-        <span>
-          {intl.formatMessage(messages.requestSuccess, {
-            title: data?.name,
-            strong: function strong(msg) {
-              return <strong>{msg}</strong>;
-            },
-          })}
-        </span>,
-        { appearance: 'success', autoDismiss: true }
-      );
+      const response = await axios.post<MediaRequest>('/api/v1/request', {
+        mediaId: data?.id,
+        tvdbId: tvdbId ?? data?.externalIds.tvdbId,
+        mediaType: 'tv',
+        is4k,
+        seasons: selectedSeasons,
+        ...overrideParams,
+      });
+
+      if (response.data) {
+        if (onComplete) {
+          onComplete(response.data.media.status);
+        }
+        addToast(
+          <span>
+            {intl.formatMessage(messages.requestSuccess, {
+              title: data?.name,
+              strong: function strong(msg) {
+                return <strong>{msg}</strong>;
+              },
+            })}
+          </span>,
+          { appearance: 'success', autoDismiss: true }
+        );
+      }
+    } catch (e) {
+      addToast(intl.formatMessage(messages.requesterror), {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+    } finally {
      if (onUpdating) {
        onUpdating(false);
      }
@@ -279,11 +301,24 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
    return seasonRequest;
  };

-  return (
+  return !data?.externalIds.tvdbId && searchModal.show ? (
+    <SearchByNameModal
+      tvdbId={tvdbId}
+      setTvdbId={setTvdbId}
+      closeModal={() => setSearchModal({ show: false })}
+      loading={!data && !error}
+      onCancel={onCancel}
+      modalTitle={intl.formatMessage(
+        is4k ? messages.request4ktitle : messages.requesttitle,
+        { title: data?.name }
+      )}
+      tmdbId={tmdbId}
+    />
+  ) : (
    <Modal
      loading={!data && !error}
      backgroundClickable
-      onCancel={onCancel}
+      onCancel={tvdbId ? () => setSearchModal({ show: true }) : onCancel}
      onOk={() => (editRequest ? updateRequest() : sendRequest())}
      title={intl.formatMessage(
        is4k ? messages.request4ktitle : messages.requesttitle,
@@ -302,6 +337,11 @@ const TvRequestModal: React.FC<RequestModalProps> = ({
      okButtonType={
        editRequest && selectedSeasons.length === 0 ? 'danger' : `primary`
      }
+      cancelText={
+        tvdbId
+          ? intl.formatMessage(messages.backbutton)
+          : intl.formatMessage(globalMessages.cancel)
+      }
      iconSvg={
        <svg
          className="w-6 h-6"
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -80,7 +80,9 @@ const TitleCard: React.FC<TitleCardProps> = ({
          showDetail ? 'scale-105' : ''
        }`}
        style={{
-          backgroundImage: `url(//image.tmdb.org/t/p/w300_and_h450_face${image})`,
+          backgroundImage: image
+            ? `url(//image.tmdb.org/t/p/w300_and_h450_face${image})`
+            : `url('/images/overseerr_poster_not_found_logo_top.png')`,
        }}
        onMouseEnter={() => {
          if (!isTouch) {
--- a/src/i18n/locale/en.json
+++ b/src/i18n/locale/en.json
@@ -134,14 +134,22 @@
  "components.RequestModal.AdvancedRequester.loadingprofiles": "Loading profiles…",
  "components.RequestModal.AdvancedRequester.qualityprofile": "Quality Profile",
  "components.RequestModal.AdvancedRequester.rootfolder": "Root Folder",
+  "components.RequestModal.SearchByNameModal.next": "Next",
+  "components.RequestModal.SearchByNameModal.nosummary": "No summary for this title was found.",
+  "components.RequestModal.SearchByNameModal.notvdbid": "Manual match required",
+  "components.RequestModal.SearchByNameModal.notvdbiddescription": "We couldn't automatically match your request. Please select the correct match from the list below.",
  "components.RequestModal.autoapproval": "Auto Approval",
+  "components.RequestModal.backbutton": "Back",
  "components.RequestModal.cancel": "Cancel Request",
  "components.RequestModal.cancelling": "Cancelling…",
  "components.RequestModal.cancelrequest": "This will remove your request. Are you sure you want to continue?",
  "components.RequestModal.close": "Close",
  "components.RequestModal.errorediting": "Something went wrong editing the request.",
  "components.RequestModal.extras": "Extras",
+  "components.RequestModal.next": "Next",
  "components.RequestModal.notrequested": "Not Requested",
+  "components.RequestModal.notvdbid": "No TVDB id was found connected on TMDB",
+  "components.RequestModal.notvdbiddescription": "Either add the TVDB id to TMDB and come back later, or select the correct match below.",
  "components.RequestModal.numberofepisodes": "# of Episodes",
  "components.RequestModal.pending4krequest": "Pending request for {title} in 4K",
  "components.RequestModal.pendingrequest": "Pending request for {title}",
@@ -154,6 +162,7 @@
  "components.RequestModal.requestadmin": "Your request will be immediately approved.",
  "components.RequestModal.requestcancelled": "Request cancelled.",
  "components.RequestModal.requestedited": "Request edited.",
+  "components.RequestModal.requesterror": "Something went wrong when trying to request media.",
  "components.RequestModal.requestfrom": "There is currently a pending request from {username}",
  "components.RequestModal.requesting": "Requesting…",
  "components.RequestModal.requestseasons": "Request {seasonCount} {seasonCount, plural, one {Season} other {Seasons}}",