fix(ui): minor fixes (#3036)

* fix(ui): hide available media on person page

* fix(ui): set correct label for image cache settings

* fix(ui): disable status badge tooltip for collections

* fix(ui): replace empty space when no episodes in season

* fix: suggested changes

* fix(jobs): set watchlist sync to short interval

* chore: run i18n:extract

* fix: suggested changes

server/api/themoviedb/interfaces.ts

@@ -372,7 +372,8 @@ export interface TmdbPersonCombinedCredits {
   crew: TmdbPersonCreditCrew[];
 }
 
-export interface TmdbSeasonWithEpisodes extends TmdbTvSeasonResult {
+export interface TmdbSeasonWithEpisodes
+  extends Omit<TmdbTvSeasonResult, 'episode_count'> {
   episodes: TmdbTvEpisodeResult[];
   external_ids: TmdbExternalIds;
 }

server/job/schedule.ts

@@ -63,7 +63,7 @@ export const startJobs = (): void => {
     id: 'plex-watchlist-sync',
     name: 'Plex Watchlist Sync',
     type: 'process',
-    interval: 'long',
+    interval: 'short',
     cronSchedule: jobs['plex-watchlist-sync'].schedule,
     job: schedule.scheduleJob(jobs['plex-watchlist-sync'].schedule, () => {
       logger.info('Starting scheduled job: Plex Watchlist Sync', {

server/models/Tv.ts

@@ -50,7 +50,7 @@ interface Season {
   seasonNumber: number;
 }
 
-export interface SeasonWithEpisodes extends Season {
+export interface SeasonWithEpisodes extends Omit<Season, 'episodeCount'> {
   episodes: Episode[];
   externalIds: ExternalIds;
 }
@@ -141,7 +141,6 @@ export const mapSeasonWithEpisodes = (
   season: TmdbSeasonWithEpisodes
 ): SeasonWithEpisodes => ({
   airDate: season.air_date,
-  episodeCount: season.episode_count,
   episodes: season.episodes.map(mapEpisodeResult),
   externalIds: mapExternalIds(season.external_ids),
   id: season.id,

server/routes/person.ts

@@ -1,5 +1,7 @@
 import TheMovieDb from '@server/api/themoviedb';
+import { MediaStatus } from '@server/constants/media';
 import Media from '@server/entity/Media';
+import { getSettings } from '@server/lib/settings';
 import logger from '@server/logger';
 import {
   mapCastCredits,
@@ -34,6 +36,7 @@ personRoutes.get('/:id', async (req, res, next) => {
 
 personRoutes.get('/:id/combined_credits', async (req, res, next) => {
   const tmdb = new TheMovieDb();
+  const settings = getSettings();
 
   try {
     const combinedCredits = await tmdb.getPersonCombinedCredits({
@@ -41,14 +44,30 @@ personRoutes.get('/:id/combined_credits', async (req, res, next) => {
       language: req.locale ?? (req.query.language as string),
     });
 
-    const castMedia = await Media.getRelatedMedia(
+    let castMedia = await Media.getRelatedMedia(
       combinedCredits.cast.map((result) => result.id)
     );
 
-    const crewMedia = await Media.getRelatedMedia(
+    let crewMedia = await Media.getRelatedMedia(
       combinedCredits.crew.map((result) => result.id)
     );
 
+    if (settings.main.hideAvailable) {
+      castMedia = castMedia.filter(
+        (media) =>
+          (media.mediaType === 'movie' || media.mediaType === 'tv') &&
+          media.status !== MediaStatus.AVAILABLE &&
+          media.status !== MediaStatus.PARTIALLY_AVAILABLE
+      );
+
+      crewMedia = crewMedia.filter(
+        (media) =>
+          (media.mediaType === 'movie' || media.mediaType === 'tv') &&
+          media.status !== MediaStatus.AVAILABLE &&
+          media.status !== MediaStatus.PARTIALLY_AVAILABLE
+      );
+    }
+
     return res.status(200).json({
       cast: combinedCredits.cast
         .map((result) =>

src/components/Common/Tooltip/index.tsx

@@ -20,7 +20,7 @@ const Tooltip = ({ children, content, tooltipConfig }: TooltipProps) => {
   return (
     <>
       {React.cloneElement(children, { ref: setTriggerRef })}
-      {visible && (
+      {visible && content && (
         <div
           ref={setTooltipRef}
           {...getTooltipProps({

src/components/Settings/SettingsMain.tsx

@@ -309,7 +309,7 @@ const SettingsMain = () => {
                   </div>
                 </div>
                 <div className="form-row">
-                  <label htmlFor="csrfProtection" className="checkbox-label">
+                  <label htmlFor="cacheImages" className="checkbox-label">
                     <span className="mr-2">
                       {intl.formatMessage(messages.cacheImages)}
                     </span>

src/components/StatusBadge/index.tsx

@@ -77,7 +77,7 @@ const StatusBadge = ({
           mediaType === 'movie' ? globalMessages.movie : globalMessages.tvshow
         ),
       });
-    } else if (hasPermission(Permission.ADMIN)) {
+    } else if (hasPermission(Permission.ADMIN) && serviceUrl) {
       mediaLink = serviceUrl;
       mediaLinkDescription = intl.formatMessage(messages.openinarr, {
         arr: mediaType === 'movie' ? 'Radarr' : 'Sonarr',

src/components/TvDetails/Season/index.tsx

@@ -6,6 +6,7 @@ import useSWR from 'swr';
 
 const messages = defineMessages({
   somethingwentwrong: 'Something went wrong while retrieving season data.',
+  noepisodes: 'Episode list unavailable.',
 });
 
 type SeasonProps = {
@@ -29,34 +30,38 @@ const Season = ({ seasonNumber, tvId }: SeasonProps) => {
 
   return (
     <div className="flex flex-col justify-center divide-y divide-gray-700">
-      {data.episodes
-        .slice()
-        .reverse()
-        .map((episode) => {
-          return (
-            <div
-              className="flex flex-col space-y-4 py-4 xl:flex-row xl:space-y-4 xl:space-x-4"
-              key={`season-${seasonNumber}-episode-${episode.episodeNumber}`}
-            >
-              <div className="flex-1">
-                <div className="flex flex-col space-y-2 xl:flex-row xl:items-center xl:space-y-0 xl:space-x-2">
-                  <h3 className="text-lg">{episode.name}</h3>
-                  {episode.airDate && (
-                    <AirDateBadge airDate={episode.airDate} />
-                  )}
+      {data.episodes.length === 0 ? (
+        <p>{intl.formatMessage(messages.noepisodes)}</p>
+      ) : (
+        data.episodes
+          .slice()
+          .reverse()
+          .map((episode) => {
+            return (
+              <div
+                className="flex flex-col space-y-4 py-4 xl:flex-row xl:space-y-4 xl:space-x-4"
+                key={`season-${seasonNumber}-episode-${episode.episodeNumber}`}
+              >
+                <div className="flex-1">
+                  <div className="flex flex-col space-y-2 xl:flex-row xl:items-center xl:space-y-0 xl:space-x-2">
+                    <h3 className="text-lg">{episode.name}</h3>
+                    {episode.airDate && (
+                      <AirDateBadge airDate={episode.airDate} />
+                    )}
+                  </div>
+                  {episode.overview && <p>{episode.overview}</p>}
                 </div>
-                {episode.overview && <p>{episode.overview}</p>}
+                {episode.stillPath && (
+                  <img
+                    className="h-auto w-full rounded-lg xl:h-32 xl:w-auto"
+                    src={`https://image.tmdb.org/t/p/original/${episode.stillPath}`}
+                    alt=""
+                  />
+                )}
               </div>
-              {episode.stillPath && (
-                <img
-                  className="h-auto w-full rounded-lg xl:h-32 xl:w-auto"
-                  src={`https://image.tmdb.org/t/p/original/${episode.stillPath}`}
-                  alt=""
-                />
-              )}
-            </div>
-          );
-        })}
+            );
+          })
+      )}
     </div>
   );
 };

src/i18n/locale/en.json

@@ -881,6 +881,7 @@
   "components.TitleCard.mediaerror": "{mediaType} Not Found",
   "components.TitleCard.tmdbid": "TMDB ID",
   "components.TitleCard.tvdbid": "TheTVDB ID",
+  "components.TvDetails.Season.noepisodes": "Episode list unavailable.",
   "components.TvDetails.Season.somethingwentwrong": "Something went wrong while retrieving season data.",
   "components.TvDetails.TvCast.fullseriescast": "Full Series Cast",
   "components.TvDetails.TvCrew.fullseriescrew": "Full Series Crew",