feat: add option to cache images locally (seerr-team#1213)

Author: sct

next.config.js

@@ -2,6 +2,9 @@ module.exports = {
   env: {
     commitTag: process.env.COMMIT_TAG || 'local',
   },
+  images: {
+    domains: ['image.tmdb.org'],
+  },
   webpack(config) {
     config.module.rules.push({
       test: /\.svg$/,

server/interfaces/api/settingsInterfaces.ts

@@ -28,6 +28,7 @@ export interface PublicSettingsResponse {
   region: string;
   originalLanguage: string;
   partialRequestsEnabled: boolean;
+  cacheImages: boolean;
 }
 
 export interface CacheItem {

server/lib/settings.ts

@@ -66,6 +66,7 @@ export interface MainSettings {
   applicationTitle: string;
   applicationUrl: string;
   csrfProtection: boolean;
+  cacheImages: boolean;
   defaultPermissions: number;
   hideAvailable: boolean;
   localLogin: boolean;
@@ -88,6 +89,7 @@ interface FullPublicSettings extends PublicSettings {
   region: string;
   originalLanguage: string;
   partialRequestsEnabled: boolean;
+  cacheImages: boolean;
 }
 
 export interface NotificationAgentConfig {
@@ -195,6 +197,7 @@ class Settings {
         applicationTitle: 'Overseerr',
         applicationUrl: '',
         csrfProtection: false,
+        cacheImages: false,
         defaultPermissions: Permission.REQUEST,
         hideAvailable: false,
         localLogin: true,
@@ -349,6 +352,7 @@ class Settings {
       region: this.data.main.region,
       originalLanguage: this.data.main.originalLanguage,
       partialRequestsEnabled: this.data.main.partialRequestsEnabled,
+      cacheImages: this.data.main.cacheImages,
     };
   }
 

src/components/CollectionDetails/index.tsx

@@ -21,6 +21,7 @@ import { useUser, Permission } from '../../hooks/useUser';
 import useSettings from '../../hooks/useSettings';
 import Link from 'next/link';
 import { uniq } from 'lodash';
+import CachedImage from '../Common/CachedImage';
 
 const messages = defineMessages({
   overviewunavailable: 'Overview unavailable.',
@@ -203,9 +204,26 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
       className="media-page"
       style={{
         height: 493,
-        backgroundImage: `linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath})`,
       }}
     >
+      {data.backdropPath && (
+        <div className="media-page-bg-image">
+          <CachedImage
+            alt=""
+            src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
+            layout="fill"
+            objectFit="cover"
+            priority
+          />
+          <div
+            className="absolute inset-0"
+            style={{
+              backgroundImage:
+                'linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%)',
+            }}
+          />
+        </div>
+      )}
       <PageTitle title={data.name} />
       <Transition
         enter="opacity-0 transition duration-300"
@@ -268,11 +286,20 @@ const CollectionDetails: React.FC<CollectionDetailsProps> = ({
         </Modal>
       </Transition>
       <div className="media-header">
-        <img
-          src={`//image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`}
-          alt=""
-          className="media-poster"
-        />
+        <div className="media-poster">
+          <CachedImage
+            src={
+              data.posterPath
+                ? `https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.posterPath}`
+                : '/images/overseerr_poster_not_found.png'
+            }
+            alt=""
+            layout="responsive"
+            width={600}
+            height={900}
+            priority
+          />
+        </div>
         <div className="media-title">
           <div className="media-status">
             <StatusBadge

src/components/Common/CachedImage/index.tsx

@@ -0,0 +1,18 @@
+import Image, { ImageProps } from 'next/image';
+import React from 'react';
+import useSettings from '../../../hooks/useSettings';
+
+/**
+ * The CachedImage component should be used wherever
+ * we want to offer the option to locally cache images.
+ *
+ * It uses the `next/image` Image component but overrides
+ * the `unoptimized` prop based on the application setting `cacheImages`.
+ **/
+const CachedImage: React.FC<ImageProps> = (props) => {
+  const { currentSettings } = useSettings();
+
+  return <Image unoptimized={!currentSettings.cacheImages} {...props} />;
+};
+
+export default CachedImage;

src/components/Common/ImageFader/index.tsx

@@ -4,13 +4,13 @@ import React, {
   HTMLAttributes,
   ForwardRefRenderFunction,
 } from 'react';
-import Image from 'next/image';
+import CachedImage from '../CachedImage';
 
 interface ImageFaderProps extends HTMLAttributes<HTMLDivElement> {
   backgroundImages: string[];
   rotationSpeed?: number;
   isDarker?: boolean;
-  useImage?: boolean;
+  forceOptimize?: boolean;
 }
 
 const DEFAULT_ROTATION_SPEED = 6000;
@@ -20,7 +20,7 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
     backgroundImages,
     rotationSpeed = DEFAULT_ROTATION_SPEED,
     isDarker,
-    useImage,
+    forceOptimize,
     ...props
   },
   ref
@@ -46,6 +46,14 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
       'linear-gradient(180deg, rgba(17, 24, 39, 0.47) 0%, rgba(17, 24, 39, 1) 100%)';
   }
 
+  let overrides = {};
+
+  if (forceOptimize) {
+    overrides = {
+      unoptimized: false,
+    };
+  }
+
   return (
     <div ref={ref}>
       {backgroundImages.map((imageUrl, i) => (
@@ -54,29 +62,20 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
           className={`absolute inset-0 bg-cover bg-center transition-opacity duration-300 ease-in ${
             i === activeIndex ? 'opacity-100' : 'opacity-0'
           }`}
-          style={{
-            backgroundImage: !useImage
-              ? `${gradient}, url(${imageUrl})`
-              : undefined,
-          }}
           {...props}
         >
-          {useImage && (
-            <>
-              <Image
-                className="absolute inset-0 w-full h-full"
-                alt=""
-                src={imageUrl}
-                layout="fill"
-                objectFit="cover"
-                quality={100}
-              />
-              <div
-                className="absolute inset-0"
-                style={{ backgroundImage: gradient }}
-              />
-            </>
-          )}
+          <CachedImage
+            className="absolute inset-0 w-full h-full"
+            alt=""
+            src={imageUrl}
+            layout="fill"
+            objectFit="cover"
+            {...overrides}
+          />
+          <div
+            className="absolute inset-0"
+            style={{ backgroundImage: gradient }}
+          />
         </div>
       ))}
     </div>

src/components/Discover/MovieGenreList/index.tsx

@@ -40,7 +40,7 @@ const MovieGenreList: React.FC = () => {
           <li key={`genre-${genre.id}-${index}`}>
             <GenreCard
               name={genre.name}
-              image={`https://www.themoviedb.org/t/p/w1280_filter(duotone,${
+              image={`https://image.tmdb.org/t/p/w1280_filter(duotone,${
                 genreColorMap[genre.id] ?? genreColorMap[0]
               })${genre.backdrops[4]}`}
               url={`/discover/movies/genre/${genre.id}`}

src/components/Discover/MovieGenreSlider/index.tsx

@@ -54,7 +54,7 @@ const MovieGenreSlider: React.FC = () => {
           <GenreCard
             key={`genre-${genre.id}-${index}`}
             name={genre.name}
-            image={`https://www.themoviedb.org/t/p/w1280_filter(duotone,${
+            image={`https://image.tmdb.org/t/p/w1280_filter(duotone,${
               genreColorMap[genre.id] ?? genreColorMap[0]
             })${genre.backdrops[4]}`}
             url={`/discover/movies/genre/${genre.id}`}

src/components/Discover/TvGenreList/index.tsx

@@ -40,7 +40,7 @@ const TvGenreList: React.FC = () => {
           <li key={`genre-${genre.id}-${index}`}>
             <GenreCard
               name={genre.name}
-              image={`https://www.themoviedb.org/t/p/w1280_filter(duotone,${
+              image={`https://image.tmdb.org/t/p/w1280_filter(duotone,${
                 genreColorMap[genre.id] ?? genreColorMap[0]
               })${genre.backdrops[4]}`}
               url={`/discover/tv/genre/${genre.id}`}

src/components/Discover/TvGenreSlider/index.tsx

@@ -54,7 +54,7 @@ const TvGenreSlider: React.FC = () => {
           <GenreCard
             key={`genre-tv-${genre.id}-${index}`}
             name={genre.name}
-            image={`https://www.themoviedb.org/t/p/w1280_filter(duotone,${
+            image={`https://image.tmdb.org/t/p/w1280_filter(duotone,${
               genreColorMap[genre.id] ?? genreColorMap[0]
             })${genre.backdrops[4]}`}
             url={`/discover/tv/genre/${genre.id}`}