ByteSnap/channels-seerr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update Next.js images

Browse Source
This commit is contained in:
Gauthier
2024-06-15 13:45:42 +02:00
parent 9ab5fa5972
commit 63d8f550c4
20 changed files with 3438 additions and 3520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@@ -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": {

2
server/index.ts
View File

@@ -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', {

7
src/components/CollectionDetails/index.tsx
View File

@@ -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

4
src/components/Common/CachedImage/index.tsx
View File

@@ -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;

4
src/components/Common/ImageFader/index.tsx
View File

@@ -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

4
src/components/Common/Modal/index.tsx
View File

@@ -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

4
src/components/CompanyCard/index.tsx
View File

@@ -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

7
src/components/GenreCard/index.tsx
View File

@@ -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'

7
src/components/IssueDetails/index.tsx
View File

@@ -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

8
src/components/IssueList/IssueItem/index.tsx
View File

@@ -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">

14
src/components/MovieDetails/index.tsx
View File

@@ -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"

7
src/components/PersonCard/index.tsx
View File

@@ -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>
) : (

4
src/components/PersonDetails/index.tsx
View File

@@ -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>
)}

7
src/components/RequestCard/index.tsx
View File

@@ -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}
/>

8
src/components/RequestList/RequestItem/index.tsx
View File

@@ -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">

8
src/components/RequestModal/CollectionRequestModal.tsx
View File

@@ -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">

16
src/components/Selector/index.tsx
View File

@@ -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 && (

4
src/components/TitleCard/index.tsx
View File

@@ -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

7
src/components/TvDetails/index.tsx
View File

@@ -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

6830
yarn.lock
View File

File diff suppressed because it is too large Load Diff