feat: job to cleanup stale images and cache data on settings page

server/interfaces/api/settingsInterfaces.ts

@@ -51,6 +51,11 @@ export interface CacheItem {
   };
 }
 
+export interface CacheResponse {
+  apiCaches: CacheItem[];
+  imageCache: Record<'tmdb', { size: number; imageCount: number }>;
+}
+
 export interface StatusResponse {
   version: string;
   commitTag: string;

server/job/schedule.ts

@@ -1,4 +1,5 @@
 import downloadTracker from '@server/lib/downloadtracker';
+import ImageProxy from '@server/lib/imageproxy';
 import { plexFullScanner, plexRecentScanner } from '@server/lib/scanners/plex';
 import { radarrScanner } from '@server/lib/scanners/radarr';
 import { sonarrScanner } from '@server/lib/scanners/sonarr';
@@ -133,5 +134,21 @@ export const startJobs = (): void => {
     }),
   });
 
+  // Run watchlist sync every 5 minutes
+  scheduledJobs.push({
+    id: 'image-cache-cleanup',
+    name: 'Image Cache Cleanup',
+    type: 'process',
+    interval: 'long',
+    cronSchedule: jobs['image-cache-cleanup'].schedule,
+    job: schedule.scheduleJob(jobs['image-cache-cleanup'].schedule, () => {
+      logger.info('Starting scheduled job: Image Cache Cleanup', {
+        label: 'Jobs',
+      });
+      // Clean TMDB image cache
+      ImageProxy.clearCache('tmdb');
+    }),
+  });
+
   logger.info('Scheduled jobs loaded', { label: 'Jobs' });
 };

server/lib/imageproxy.ts

@@ -19,6 +19,89 @@ type ImageResponse = {
 };
 
 class ImageProxy {
+  public static async clearCache(key: string) {
+    let deletedImages = 0;
+    const cacheDirectory = path.join(
+      __dirname,
+      '../../config/cache/images/',
+      key
+    );
+
+    const files = await promises.readdir(cacheDirectory);
+
+    for (const file of files) {
+      const filePath = path.join(cacheDirectory, file);
+      const stat = await promises.lstat(filePath);
+
+      if (stat.isDirectory()) {
+        const imageFiles = await promises.readdir(filePath);
+
+        for (const imageFile of imageFiles) {
+          const [, expireAtSt] = imageFile.split('.');
+          const expireAt = Number(expireAtSt);
+          const now = Date.now();
+
+          if (now > expireAt) {
+            await promises.rm(path.join(filePath, imageFile));
+            deletedImages += 1;
+          }
+        }
+      }
+    }
+
+    logger.info(`Cleared ${deletedImages} stale image(s) from cache`, {
+      label: 'Image Cache',
+    });
+  }
+
+  public static async getImageStats(
+    key: string
+  ): Promise<{ size: number; imageCount: number }> {
+    const cacheDirectory = path.join(
+      __dirname,
+      '../../config/cache/images/',
+      key
+    );
+
+    const imageTotalSize = await ImageProxy.getDirectorySize(cacheDirectory);
+    const imageCount = await ImageProxy.getImageCount(cacheDirectory);
+
+    return {
+      size: imageTotalSize,
+      imageCount,
+    };
+  }
+
+  private static async getDirectorySize(dir: string): Promise<number> {
+    const files = await promises.readdir(dir, {
+      withFileTypes: true,
+    });
+
+    const paths = files.map(async (file) => {
+      const path = join(dir, file.name);
+
+      if (file.isDirectory()) return await ImageProxy.getDirectorySize(path);
+
+      if (file.isFile()) {
+        const { size } = await promises.stat(path);
+
+        return size;
+      }
+
+      return 0;
+    });
+
+    return (await Promise.all(paths))
+      .flat(Infinity)
+      .reduce((i, size) => i + size, 0);
+  }
+
+  private static async getImageCount(dir: string) {
+    const files = await promises.readdir(dir);
+
+    return files.length;
+  }
+
   private axios;
   private cacheVersion;
   private key;

server/lib/settings.ts

@@ -247,7 +247,8 @@ export type JobId =
   | 'radarr-scan'
   | 'sonarr-scan'
   | 'download-sync'
-  | 'download-sync-reset';
+  | 'download-sync-reset'
+  | 'image-cache-cleanup';
 
 interface AllSettings {
   clientId: string;
@@ -414,6 +415,9 @@ class Settings {
         'download-sync-reset': {
           schedule: '0 0 1 * * *',
         },
+        'image-cache-cleanup': {
+          schedule: '0 0 5 * * *',
+        },
       },
     };
     if (initialSettings) {

server/routes/settings/index.ts

@@ -14,9 +14,10 @@ import type {
 import { scheduledJobs } from '@server/job/schedule';
 import type { AvailableCacheIds } from '@server/lib/cache';
 import cacheManager from '@server/lib/cache';
+import ImageProxy from '@server/lib/imageproxy';
 import { Permission } from '@server/lib/permissions';
 import { plexFullScanner } from '@server/lib/scanners/plex';
-import type { MainSettings } from '@server/lib/settings';
+import type { JobId, MainSettings } from '@server/lib/settings';
 import { getSettings } from '@server/lib/settings';
 import logger from '@server/logger';
 import { isAuthenticated } from '@server/middleware/auth';
@@ -491,7 +492,7 @@ settingsRoutes.post<{ jobId: string }>('/jobs/:jobId/run', (req, res, next) => {
   });
 });
 
-settingsRoutes.post<{ jobId: string }>(
+settingsRoutes.post<{ jobId: JobId }>(
   '/jobs/:jobId/cancel',
   (req, res, next) => {
     const scheduledJob = scheduledJobs.find(
@@ -518,7 +519,7 @@ settingsRoutes.post<{ jobId: string }>(
   }
 );
 
-settingsRoutes.post<{ jobId: string }>(
+settingsRoutes.post<{ jobId: JobId }>(
   '/jobs/:jobId/schedule',
   (req, res, next) => {
     const scheduledJob = scheduledJobs.find(
@@ -553,16 +554,23 @@ settingsRoutes.post<{ jobId: string }>(
   }
 );
 
-settingsRoutes.get('/cache', (req, res) => {
-  const caches = cacheManager.getAllCaches();
+settingsRoutes.get('/cache', async (_req, res) => {
+  const cacheManagerCaches = cacheManager.getAllCaches();
 
-  return res.status(200).json(
-    Object.values(caches).map((cache) => ({
-      id: cache.id,
-      name: cache.name,
-      stats: cache.getStats(),
-    }))
-  );
+  const apiCaches = Object.values(cacheManagerCaches).map((cache) => ({
+    id: cache.id,
+    name: cache.name,
+    stats: cache.getStats(),
+  }));
+
+  const tmdbImageCache = await ImageProxy.getImageStats('tmdb');
+
+  return res.status(200).json({
+    apiCaches,
+    imageCache: {
+      tmdb: tmdbImageCache,
+    },
+  });
 });
 
 settingsRoutes.post<{ cacheId: AvailableCacheIds }>(

src/components/Settings/SettingsJobsCache/index.tsx

@@ -11,7 +11,10 @@ import { formatBytes } from '@app/utils/numberHelpers';
 import { Transition } from '@headlessui/react';
 import { PlayIcon, StopIcon, TrashIcon } from '@heroicons/react/outline';
 import { PencilIcon } from '@heroicons/react/solid';
-import type { CacheItem } from '@server/interfaces/api/settingsInterfaces';
+import type {
+  CacheItem,
+  CacheResponse,
+} from '@server/interfaces/api/settingsInterfaces';
 import type { JobId } from '@server/lib/settings';
 import axios from 'axios';
 import cronstrue from 'cronstrue/i18n';
@@ -54,6 +57,7 @@ const messages: { [messageName: string]: MessageDescriptor } = defineMessages({
   'sonarr-scan': 'Sonarr Scan',
   'download-sync': 'Download Sync',
   'download-sync-reset': 'Download Sync Reset',
+  'image-cache-cleanup': 'Image Cache Cleanup',
   editJobSchedule: 'Modify Job',
   jobScheduleEditSaved: 'Job edited successfully!',
   jobScheduleEditFailed: 'Something went wrong while saving the job.',
@@ -63,6 +67,11 @@ const messages: { [messageName: string]: MessageDescriptor } = defineMessages({
     'Every {jobScheduleHours, plural, one {hour} other {{jobScheduleHours} hours}}',
   editJobScheduleSelectorMinutes:
     'Every {jobScheduleMinutes, plural, one {minute} other {{jobScheduleMinutes} minutes}}',
+  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>.',
+  imagecachecount: 'Images Cached',
+  imagecachesize: 'Total Cache Size',
 });
 
 interface Job {
@@ -128,7 +137,8 @@ const SettingsJobs = () => {
   } = useSWR<Job[]>('/api/v1/settings/jobs', {
     refreshInterval: 5000,
   });
-  const { data: cacheData, mutate: cacheRevalidate } = useSWR<CacheItem[]>(
+  const { data: appData } = useSWR('/api/v1/status/appdata');
+  const { data: cacheData, mutate: cacheRevalidate } = useSWR<CacheResponse>(
     '/api/v1/settings/cache',
     {
       refreshInterval: 10000,
@@ -430,7 +440,7 @@ const SettingsJobs = () => {
             </tr>
           </thead>
           <Table.TBody>
-            {cacheData?.map((cache) => (
+            {cacheData?.apiCaches.map((cache) => (
               <tr key={`cache-list-${cache.id}`}>
                 <Table.TD>{cache.name}</Table.TD>
                 <Table.TD>{intl.formatNumber(cache.stats.hits)}</Table.TD>
@@ -449,6 +459,41 @@ const SettingsJobs = () => {
           </Table.TBody>
         </Table>
       </div>
+      <div>
+        <h3 className="heading">{intl.formatMessage(messages.imagecache)}</h3>
+        <p className="description">
+          {intl.formatMessage(messages.imagecacheDescription, {
+            code: (msg: React.ReactNode) => (
+              <code className="bg-opacity-50">{msg}</code>
+            ),
+            appDataPath: appData ? appData.appDataPath : '/app/config',
+          })}
+        </p>
+      </div>
+      <div className="section">
+        <Table>
+          <thead>
+            <tr>
+              <Table.TH>{intl.formatMessage(messages.cachename)}</Table.TH>
+              <Table.TH>
+                {intl.formatMessage(messages.imagecachecount)}
+              </Table.TH>
+              <Table.TH>{intl.formatMessage(messages.imagecachesize)}</Table.TH>
+            </tr>
+          </thead>
+          <Table.TBody>
+            <tr>
+              <Table.TD>The Movie Database (tmdb)</Table.TD>
+              <Table.TD>
+                {intl.formatNumber(cacheData?.imageCache.tmdb.imageCount ?? 0)}
+              </Table.TD>
+              <Table.TD>
+                {formatBytes(cacheData?.imageCache.tmdb.size ?? 0)}
+              </Table.TD>
+            </tr>
+          </Table.TBody>
+        </Table>
+      </div>
     </>
   );
 };