fix(watchlist): discover local watchlist item display and profile loc…

…al watchlist slider visibility

Previously when you expand the `Your Watchlist` slider from the discover page to see all your
watchlist items, you only see the first 20 items. This commit fixes that so you can see all your
local watchlist items when you expand that slider. In addition, this commit also fixes the visiblity
of profile watchlist slider for local watchlists

server/routes/discover.ts

@@ -848,7 +848,7 @@ discoverRoutes.get<Record<string, unknown>, WatchlistResponse>(
       if (total) {
         return res.json({
           page: page,
-          totalPages: total / itemsPerPage,
+          totalPages: Math.ceil(total / itemsPerPage),
           totalResults: total,
           results: result,
         });
@@ -865,7 +865,6 @@ discoverRoutes.get<Record<string, unknown>, WatchlistResponse>(
     }
 
     const plexTV = new PlexTvAPI(activeUser.plexToken);
-
     const watchlist = await plexTV.getWatchlist({ offset });
 
     return res.json({

server/routes/user/index.ts

@@ -717,29 +717,31 @@ router.get<{ id: string }, WatchlistResponse>(
 
     const user = await getRepository(User).findOneOrFail({
       where: { id: Number(req.params.id) },
-      select: { id: true, plexToken: true },
+      select: ['id', 'plexToken'],
     });
 
-    if (!user?.plexToken) {
-      if (user) {
-        const [result, total] = await getRepository(Watchlist).findAndCount({
-          where: { requestedBy: { id: user?.id } },
-          relations: { requestedBy: true },
-          // loadRelationIds: true,
-          take: itemsPerPage,
-          skip: offset,
+    if (user) {
+      const [result, total] = await getRepository(Watchlist).findAndCount({
+        where: { requestedBy: { id: user?.id } },
+        relations: {
+          /*requestedBy: true,media:true*/
+        },
+        // loadRelationIds: true,
+        take: itemsPerPage,
+        skip: offset,
+      });
+      if (total) {
+        return res.json({
+          page: page,
+          totalPages: Math.ceil(total / itemsPerPage),
+          totalResults: total,
+          results: result,
         });
-        if (total) {
-          return res.json({
-            page: page,
-            totalPages: total / itemsPerPage,
-            totalResults: total,
-            results: result,
-          });
-        }
       }
+    }
 
-      // We will just return an empty array if the user has no Plex token
+    // We will just return an empty array if the user has no Plex token
+    if (!user.plexToken) {
       return res.json({
         page: 1,
         totalPages: 1,

src/components/Discover/DiscoverWatchlist/index.tsx

@@ -69,7 +69,7 @@ const DiscoverWatchlist = () => {
         </Header>
       </div>
       <ListView
-        plexItems={titles}
+        plexItems={titles.filter((title) => title != null)}
         isEmpty={isEmpty}
         isLoading={
           isLoadingInitialData || (isLoadingMore && (titles?.length ?? 0) > 0)

src/components/UserProfile/index.tsx

@@ -34,6 +34,7 @@ const messages = defineMessages({
   seriesrequest: 'Series Requests',
   recentlywatched: 'Recently Watched',
   plexwatchlist: 'Plex Watchlist',
+  localWatchlist: "{username}'s Watchlist",
   emptywatchlist:
     'Media added to your <PlexWatchlistSupportLink>Plex Watchlist</PlexWatchlistSupportLink> will appear here.',
 });
@@ -78,17 +79,17 @@ const UserProfile = () => {
         ? `/api/v1/user/${user.id}/watch_data`
         : null
     );
+
   const { data: watchlistItems, error: watchlistError } =
     useSWR<WatchlistResponse>(
-      user?.userType === UserType.PLEX &&
-        (user.id === currentUser?.id ||
-          currentHasPermission(
-            [Permission.MANAGE_REQUESTS, Permission.WATCHLIST_VIEW],
-            {
-              type: 'or',
-            }
-          ))
-        ? `/api/v1/user/${user.id}/watchlist`
+      user?.id === currentUser?.id ||
+        currentHasPermission(
+          [Permission.MANAGE_REQUESTS, Permission.WATCHLIST_VIEW],
+          {
+            type: 'or',
+          }
+        )
+        ? `/api/v1/user/${user?.id}/watchlist`
         : null,
       {
         revalidateOnMount: true,
@@ -117,6 +118,13 @@ const UserProfile = () => {
     return <Error statusCode={404} />;
   }
 
+  const watchlistSliderTitle = intl.formatMessage(
+    user.userType === UserType.PLEX
+      ? messages.plexwatchlist
+      : messages.localWatchlist,
+    { username: user.displayName }
+  );
+
   return (
     <>
       <PageTitle title={user.displayName} />
@@ -309,12 +317,11 @@ const UserProfile = () => {
             />
           </>
         )}
-      {user.userType === UserType.PLEX &&
-        (user.id === currentUser?.id ||
-          currentHasPermission(
-            [Permission.MANAGE_REQUESTS, Permission.WATCHLIST_VIEW],
-            { type: 'or' }
-          )) &&
+      {(user.id === currentUser?.id ||
+        currentHasPermission(
+          [Permission.MANAGE_REQUESTS, Permission.WATCHLIST_VIEW],
+          { type: 'or' }
+        )) &&
         (!watchlistItems ||
           !!watchlistItems.results.length ||
           (user.id === currentUser?.id &&
@@ -327,11 +334,11 @@ const UserProfile = () => {
                 href={
                   user.id === currentUser?.id
                     ? '/profile/watchlist'
-                    : `/users/${user?.id}/watchlist`
+                    : `/users/${user.id}/watchlist`
                 }
               >
                 <a className="slider-title">
-                  <span>{intl.formatMessage(messages.plexwatchlist)}</span>
+                  <span>{watchlistSliderTitle}</span>
                   <ArrowRightCircleIcon />
                 </a>
               </Link>