From 4eddbaa71b7972b6db33976102501fb8b6333206 Mon Sep 17 00:00:00 2001
From: Gauthier <mail@gauthierth.fr>
Date: Wed, 26 Feb 2025 10:47:11 +0100
Subject: [PATCH] fix(watchlist): disable Jellyseerr's watchlist for Plex users
 (#1398)

This PR resolves a conflict between the Plex and Jellyseerr watchlists by deactivating the
Jellyseerr watchlist for Plex.

fix #1344
---
 server/routes/discover.ts             |  4 +-
 src/components/MovieDetails/index.tsx | 73 ++++++++++++++-------------
 src/components/TitleCard/index.tsx    | 62 ++++++++++++-----------
 src/components/TvDetails/index.tsx    | 73 ++++++++++++++-------------
 4 files changed, 111 insertions(+), 101 deletions(-)

diff --git a/server/routes/discover.ts b/server/routes/discover.ts
index 4bb12740d..79ae7f285 100644
--- a/server/routes/discover.ts
+++ b/server/routes/discover.ts
@@ -837,7 +837,8 @@ discoverRoutes.get<Record<string, unknown>, WatchlistResponse>(
       select: ['id', 'plexToken'],
     });
 
-    if (activeUser) {
+    if (activeUser && !activeUser?.plexToken) {
+      // Non-Plex users can only see their own watchlist
       const [result, total] = await getRepository(Watchlist).findAndCount({
         where: { requestedBy: { id: activeUser?.id } },
         relations: {
@@ -866,6 +867,7 @@ discoverRoutes.get<Record<string, unknown>, WatchlistResponse>(
       });
     }
 
+    // List watchlist from Plex
     const plexTV = new PlexTvAPI(activeUser.plexToken);
 
     const watchlist = await plexTV.getWatchlist({ offset });
diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
index 3fb88ab34..2340cb2e4 100644
--- a/src/components/MovieDetails/index.tsx
+++ b/src/components/MovieDetails/index.tsx
@@ -25,7 +25,7 @@ import StatusBadge from '@app/components/StatusBadge';
 import useDeepLinks from '@app/hooks/useDeepLinks';
 import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
-import { Permission, useUser } from '@app/hooks/useUser';
+import { Permission, UserType, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import ErrorPage from '@app/pages/_error';
 import { sortCrewPriority } from '@app/utils/creditHelpers';
@@ -594,42 +594,45 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                 </Button>
               </Tooltip>
             )}
-          {data?.mediaInfo?.status !== MediaStatus.BLACKLISTED && (
-            <>
-              {toggleWatchlist ? (
-                <Tooltip content={intl.formatMessage(messages.addtowatchlist)}>
-                  <Button
-                    buttonType={'ghost'}
-                    className="z-40 mr-2"
-                    buttonSize={'md'}
-                    onClick={onClickWatchlistBtn}
+          {data?.mediaInfo?.status !== MediaStatus.BLACKLISTED &&
+            user?.userType !== UserType.PLEX && (
+              <>
+                {toggleWatchlist ? (
+                  <Tooltip
+                    content={intl.formatMessage(messages.addtowatchlist)}
                   >
-                    {isUpdating ? (
-                      <Spinner className="h-3" />
-                    ) : (
-                      <StarIcon className={'h-3 text-amber-300'} />
-                    )}
-                  </Button>
-                </Tooltip>
-              ) : (
-                <Tooltip
-                  content={intl.formatMessage(messages.removefromwatchlist)}
-                >
-                  <Button
-                    className="z-40 mr-2"
-                    buttonSize={'md'}
-                    onClick={onClickDeleteWatchlistBtn}
+                    <Button
+                      buttonType={'ghost'}
+                      className="z-40 mr-2"
+                      buttonSize={'md'}
+                      onClick={onClickWatchlistBtn}
+                    >
+                      {isUpdating ? (
+                        <Spinner className="h-3" />
+                      ) : (
+                        <StarIcon className={'h-3 text-amber-300'} />
+                      )}
+                    </Button>
+                  </Tooltip>
+                ) : (
+                  <Tooltip
+                    content={intl.formatMessage(messages.removefromwatchlist)}
                   >
-                    {isUpdating ? (
-                      <Spinner className="h-3" />
-                    ) : (
-                      <MinusCircleIcon className={'h-3'} />
-                    )}
-                  </Button>
-                </Tooltip>
-              )}
-            </>
-          )}
+                    <Button
+                      className="z-40 mr-2"
+                      buttonSize={'md'}
+                      onClick={onClickDeleteWatchlistBtn}
+                    >
+                      {isUpdating ? (
+                        <Spinner className="h-3" />
+                      ) : (
+                        <MinusCircleIcon className={'h-3'} />
+                      )}
+                    </Button>
+                  </Tooltip>
+                )}
+              </>
+            )}
           <PlayButton links={mediaLinks} />
           <RequestButton
             mediaType="movie"
diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index 8b6d68745..5bfb90e9e 100644
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -8,7 +8,7 @@ import RequestModal from '@app/components/RequestModal';
 import ErrorCard from '@app/components/TitleCard/ErrorCard';
 import Placeholder from '@app/components/TitleCard/Placeholder';
 import { useIsTouch } from '@app/hooks/useIsTouch';
-import { Permission, useUser } from '@app/hooks/useUser';
+import { Permission, UserType, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import defineMessages from '@app/utils/defineMessages';
 import { withProperties } from '@app/utils/typeHelpers';
@@ -373,42 +373,44 @@ const TitleCard = ({
                   : intl.formatMessage(globalMessages.tvshow)}
               </div>
             </div>
-            {showDetail && currentStatus !== MediaStatus.BLACKLISTED && (
-              <div className="flex flex-col gap-1">
-                {toggleWatchlist ? (
-                  <Button
-                    buttonType={'ghost'}
-                    className="z-40"
-                    buttonSize={'sm'}
-                    onClick={onClickWatchlistBtn}
-                  >
-                    <StarIcon className={'h-3 text-amber-300'} />
-                  </Button>
-                ) : (
-                  <Button
-                    className="z-40"
-                    buttonSize={'sm'}
-                    onClick={onClickDeleteWatchlistBtn}
-                  >
-                    <MinusCircleIcon className={'h-3'} />
-                  </Button>
-                )}
-                {showHideButton &&
-                  currentStatus !== MediaStatus.PROCESSING &&
-                  currentStatus !== MediaStatus.AVAILABLE &&
-                  currentStatus !== MediaStatus.PARTIALLY_AVAILABLE &&
-                  currentStatus !== MediaStatus.PENDING && (
+            {showDetail &&
+              currentStatus !== MediaStatus.BLACKLISTED &&
+              user?.userType !== UserType.PLEX && (
+                <div className="flex flex-col gap-1">
+                  {toggleWatchlist ? (
                     <Button
                       buttonType={'ghost'}
                       className="z-40"
                       buttonSize={'sm'}
-                      onClick={() => setShowBlacklistModal(true)}
+                      onClick={onClickWatchlistBtn}
                     >
-                      <EyeSlashIcon className={'h-3'} />
+                      <StarIcon className={'h-3 text-amber-300'} />
+                    </Button>
+                  ) : (
+                    <Button
+                      className="z-40"
+                      buttonSize={'sm'}
+                      onClick={onClickDeleteWatchlistBtn}
+                    >
+                      <MinusCircleIcon className={'h-3'} />
                     </Button>
                   )}
-              </div>
-            )}
+                  {showHideButton &&
+                    currentStatus !== MediaStatus.PROCESSING &&
+                    currentStatus !== MediaStatus.AVAILABLE &&
+                    currentStatus !== MediaStatus.PARTIALLY_AVAILABLE &&
+                    currentStatus !== MediaStatus.PENDING && (
+                      <Button
+                        buttonType={'ghost'}
+                        className="z-40"
+                        buttonSize={'sm'}
+                        onClick={() => setShowBlacklistModal(true)}
+                      >
+                        <EyeSlashIcon className={'h-3'} />
+                      </Button>
+                    )}
+                </div>
+              )}
             {showDetail &&
               showHideButton &&
               currentStatus == MediaStatus.BLACKLISTED && (
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index b4f0389fb..ec27fba13 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -28,7 +28,7 @@ import Season from '@app/components/TvDetails/Season';
 import useDeepLinks from '@app/hooks/useDeepLinks';
 import useLocale from '@app/hooks/useLocale';
 import useSettings from '@app/hooks/useSettings';
-import { Permission, useUser } from '@app/hooks/useUser';
+import { Permission, UserType, useUser } from '@app/hooks/useUser';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
 import { sortCrewPriority } from '@app/utils/creditHelpers';
@@ -636,42 +636,45 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                 </Button>
               </Tooltip>
             )}
-          {data?.mediaInfo?.status !== MediaStatus.BLACKLISTED && (
-            <>
-              {toggleWatchlist ? (
-                <Tooltip content={intl.formatMessage(messages.addtowatchlist)}>
-                  <Button
-                    buttonType={'ghost'}
-                    className="z-40 mr-2"
-                    buttonSize={'md'}
-                    onClick={onClickWatchlistBtn}
+          {data?.mediaInfo?.status !== MediaStatus.BLACKLISTED &&
+            user?.userType !== UserType.PLEX && (
+              <>
+                {toggleWatchlist ? (
+                  <Tooltip
+                    content={intl.formatMessage(messages.addtowatchlist)}
                   >
-                    {isUpdating ? (
-                      <Spinner className="h-3" />
-                    ) : (
-                      <StarIcon className={'h-3 text-amber-300'} />
-                    )}
-                  </Button>
-                </Tooltip>
-              ) : (
-                <Tooltip
-                  content={intl.formatMessage(messages.removefromwatchlist)}
-                >
-                  <Button
-                    className="z-40 mr-2"
-                    buttonSize={'md'}
-                    onClick={onClickDeleteWatchlistBtn}
+                    <Button
+                      buttonType={'ghost'}
+                      className="z-40 mr-2"
+                      buttonSize={'md'}
+                      onClick={onClickWatchlistBtn}
+                    >
+                      {isUpdating ? (
+                        <Spinner className="h-3" />
+                      ) : (
+                        <StarIcon className={'h-3 text-amber-300'} />
+                      )}
+                    </Button>
+                  </Tooltip>
+                ) : (
+                  <Tooltip
+                    content={intl.formatMessage(messages.removefromwatchlist)}
                   >
-                    {isUpdating ? (
-                      <Spinner className="h-3" />
-                    ) : (
-                      <MinusCircleIcon className={'h-3'} />
-                    )}
-                  </Button>
-                </Tooltip>
-              )}
-            </>
-          )}
+                    <Button
+                      className="z-40 mr-2"
+                      buttonSize={'md'}
+                      onClick={onClickDeleteWatchlistBtn}
+                    >
+                      {isUpdating ? (
+                        <Spinner className="h-3" />
+                      ) : (
+                        <MinusCircleIcon className={'h-3'} />
+                      )}
+                    </Button>
+                  </Tooltip>
+                )}
+              </>
+            )}
           <PlayButton links={mediaLinks} />
           <RequestButton
             mediaType="tv"