refactor: update Next.js images

fallenbagel · Jun 15, 2024 · 63d8f55 · 63d8f55
1 parent 9ab5fa5
commit 63d8f55
Show file tree

Hide file tree

Showing 20 changed files with 3,614 additions and 3,696 deletions.
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "express-openapi-validator": "4.13.8",
     "express-rate-limit": "6.7.0",
     "express-session": "1.17.3",
-    "formik": "2.2.9",
+    "formik": "^2.4.6",
     "gravatar-url": "3.1.0",
     "intl": "1.2.5",
     "lodash": "4.17.21",
@@ -77,7 +77,7 @@
     "react-aria": "3.23.0",
     "react-dom": "^18.3.1",
     "react-intersection-observer": "9.4.3",
-    "react-intl": "6.2.10",
+    "react-intl": "^6.6.8",
     "react-markdown": "8.0.5",
     "react-popper-tooltip": "4.4.2",
     "react-select": "5.7.0",
@@ -170,8 +170,6 @@
   },
   "resolutions": {
     "sqlite3/node-gyp": "8.4.1",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
     "@types/express-session": "1.17.6"
   },
   "config": {

diff --git a/server/index.ts b/server/index.ts
@@ -146,7 +146,7 @@ app
       try {
         const descriptor = Object.getOwnPropertyDescriptor(req, 'ip');
         if (descriptor?.writable === true) {
-          req.ip = getClientIp(req) ?? '';
+          (req as any).ip = getClientIp(req) ?? '';
         }
       } catch (e) {
         logger.error('Failed to attach the ip to the request', {

diff --git a/src/components/CollectionDetails/index.tsx b/src/components/CollectionDetails/index.tsx
@@ -194,8 +194,8 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
           <CachedImage
             alt=""
             src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
-            layout="fill"
-            objectFit="cover"
+            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            fill
             priority
           />
           <div
@@ -228,7 +228,8 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => {
                 : '/images/overseerr_poster_not_found.png'
             }
             alt=""
-            layout="responsive"
+            sizes="100vw"
+            style={{ width: '100%', height: 'auto' }}
             width={600}
             height={900}
             priority

diff --git a/src/components/Common/CachedImage/index.tsx b/src/components/Common/CachedImage/index.tsx
@@ -1,6 +1,6 @@
 import useSettings from '@app/hooks/useSettings';
-import type { ImageLoader, ImageProps } from 'next/legacy/image';
-import Image from 'next/legacy/image';
+import type { ImageLoader, ImageProps } from 'next/image';
+import Image from 'next/image';
 
 const imageLoader: ImageLoader = ({ src }) => src;
 

diff --git a/src/components/Common/ImageFader/index.tsx b/src/components/Common/ImageFader/index.tsx
@@ -64,8 +64,8 @@ const ImageFader: ForwardRefRenderFunction<HTMLDivElement, ImageFaderProps> = (
             className="absolute inset-0 h-full w-full"
             alt=""
             src={imageUrl}
-            layout="fill"
-            objectFit="cover"
+            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            fill
             {...overrides}
           />
           <div

diff --git a/src/components/Common/Modal/index.tsx b/src/components/Common/Modal/index.tsx
@@ -125,8 +125,8 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
               <CachedImage
                 alt=""
                 src={backdrop}
-                layout="fill"
-                objectFit="cover"
+                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                fill
                 priority
               />
               <div

diff --git a/src/components/CompanyCard/index.tsx b/src/components/CompanyCard/index.tsx
@@ -36,8 +36,8 @@ const CompanyCard = ({ image, url, name }: CompanyCardProps) => {
           src={image}
           alt={name}
           className="relative z-40 h-full w-full"
-          layout="fill"
-          objectFit="contain"
+          style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+          fill
         />
       </div>
       <div

diff --git a/src/components/GenreCard/index.tsx b/src/components/GenreCard/index.tsx
@@ -35,7 +35,12 @@ const GenreCard = ({ image, url, name, canExpand = false }: GenreCardProps) => {
       role="link"
       tabIndex={0}
     >
-      <CachedImage src={image} alt="" layout="fill" objectFit="cover" />
+      <CachedImage
+        src={image}
+        alt=""
+        style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+        fill
+      />
       <div
         className={`absolute inset-0 z-10 h-full w-full bg-gray-800 transition duration-300 ${
           isHovered ? 'bg-opacity-10' : 'bg-opacity-30'

diff --git a/src/components/IssueDetails/index.tsx b/src/components/IssueDetails/index.tsx
@@ -210,8 +210,8 @@ const IssueDetails = () => {
           <CachedImage
             alt=""
             src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
-            layout="fill"
-            objectFit="cover"
+            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            fill
             priority
           />
           <div
@@ -232,7 +232,8 @@ const IssueDetails = () => {
                 : '/images/overseerr_poster_not_found.png'
             }
             alt=""
-            layout="responsive"
+            sizes="100vw"
+            style={{ width: '100%', height: 'auto' }}
             width={600}
             height={900}
             priority

diff --git a/src/components/IssueList/IssueItem/index.tsx b/src/components/IssueList/IssueItem/index.tsx
@@ -113,8 +113,8 @@ const IssueItem = ({ issue }: IssueItemProps) => {
           <CachedImage
             src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
             alt=""
-            layout="fill"
-            objectFit="cover"
+            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            fill
           />
           <div
             className="absolute inset-0"
@@ -142,10 +142,10 @@ const IssueItem = ({ issue }: IssueItemProps) => {
                   : '/images/overseerr_poster_not_found.png'
               }
               alt=""
-              layout="responsive"
+              sizes="100vw"
+              style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
               width={600}
               height={900}
-              objectFit="cover"
             />
           </Link>
           <div className="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">

diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx
@@ -298,8 +298,8 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
           <CachedImage
             alt=""
             src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
-            layout="fill"
-            objectFit="cover"
+            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            fill
             priority
           />
           <div
@@ -340,7 +340,8 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                 : '/images/overseerr_poster_not_found.png'
             }
             alt=""
-            layout="responsive"
+            sizes="100vw"
+            style={{ width: '100%', height: 'auto' }}
             width={600}
             height={900}
             priority
@@ -527,8 +528,11 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
                     <CachedImage
                       src={`https://image.tmdb.org/t/p/w1440_and_h320_multi_faces/${data.collection.backdropPath}`}
                       alt=""
-                      layout="fill"
-                      objectFit="cover"
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                      }}
                     />
                     <div
                       className="absolute inset-0"

diff --git a/src/components/PersonCard/index.tsx b/src/components/PersonCard/index.tsx
@@ -53,8 +53,11 @@ const PersonCard = ({
                   <CachedImage
                     src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${profilePath}`}
                     alt=""
-                    layout="fill"
-                    objectFit="cover"
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      objectFit: 'cover',
+                    }}
                   />
                 </div>
               ) : (

diff --git a/src/components/PersonDetails/index.tsx b/src/components/PersonDetails/index.tsx
@@ -228,8 +228,8 @@ const PersonDetails = () => {
             <CachedImage
               src={`https://image.tmdb.org/t/p/w600_and_h900_bestv2${data.profilePath}`}
               alt=""
-              layout="fill"
-              objectFit="cover"
+              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+              fill
             />
           </div>
         )}

diff --git a/src/components/RequestCard/index.tsx b/src/components/RequestCard/index.tsx
@@ -325,8 +325,8 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
             <CachedImage
               alt=""
               src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
-              layout="fill"
-              objectFit="cover"
+              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+              fill
             />
             <div
               className="absolute inset-0"
@@ -582,7 +582,8 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
                 : '/images/overseerr_poster_not_found.png'
             }
             alt=""
-            layout="responsive"
+            sizes="100vw"
+            style={{ width: '100%', height: 'auto' }}
             width={600}
             height={900}
           />

diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx
@@ -383,8 +383,8 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
             <CachedImage
               src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath}`}
               alt=""
-              layout="fill"
-              objectFit="cover"
+              style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+              fill
             />
             <div
               className="absolute inset-0"
@@ -412,10 +412,10 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
                     : '/images/overseerr_poster_not_found.png'
                 }
                 alt=""
-                layout="responsive"
+                sizes="100vw"
+                style={{ width: '100%', height: 'auto', objectFit: 'cover' }}
                 width={600}
                 height={900}
-                objectFit="cover"
               />
             </Link>
             <div className="flex flex-col justify-center overflow-hidden pl-2 xl:pl-4">

diff --git a/src/components/RequestModal/CollectionRequestModal.tsx b/src/components/RequestModal/CollectionRequestModal.tsx
@@ -402,10 +402,14 @@ const CollectionRequestModal = ({
                                   : '/images/overseerr_poster_not_found.png'
                               }
                               alt=""
-                              layout="responsive"
+                              sizes="100vw"
+                              style={{
+                                width: '100%',
+                                height: 'auto',
+                                objectFit: 'cover',
+                              }}
                               width={600}
                               height={900}
-                              objectFit="cover"
                             />
                           </div>
                           <div className="flex flex-col justify-center pl-2">

diff --git a/src/components/Selector/index.tsx b/src/components/Selector/index.tsx
@@ -376,9 +376,11 @@ export const WatchProviderSelector = ({
                     <CachedImage
                       src={`https://image.tmdb.org/t/p/original${provider.logoPath}`}
                       alt=""
-                      layout="responsive"
-                      width="100%"
-                      height="100%"
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'contain',
+                      }}
                       className="rounded-lg"
                     />
                     {isActive && (
@@ -418,9 +420,11 @@ export const WatchProviderSelector = ({
                       <CachedImage
                         src={`https://image.tmdb.org/t/p/original${provider.logoPath}`}
                         alt=""
-                        layout="responsive"
-                        width="100%"
-                        height="100%"
+                        style={{
+                          width: '100%',
+                          height: '100%',
+                          objectFit: 'cover',
+                        }}
                         className="rounded-lg"
                       />
                       {isActive && (

diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
@@ -221,8 +221,8 @@ const TitleCard = ({
                 ? `https://image.tmdb.org/t/p/w300_and_h450_face${image}`
                 : `/images/overseerr_poster_not_found_logo_top.png`
             }
-            layout="fill"
-            objectFit="cover"
+            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            fill
           />
           <div className="absolute left-0 right-0 flex items-center justify-between p-2">
             <div

diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
@@ -313,8 +313,8 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
           <CachedImage
             alt=""
             src={`https://image.tmdb.org/t/p/w1920_and_h800_multi_faces/${data.backdropPath}`}
-            layout="fill"
-            objectFit="cover"
+            style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+            fill
             priority
           />
           <div
@@ -365,7 +365,8 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                 : '/images/overseerr_poster_not_found.png'
             }
             alt=""
-            layout="responsive"
+            sizes="100vw"
+            style={{ width: '100%', height: 'auto' }}
             width={600}
             height={900}
             priority