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

fix: add proper size to next/image components

Browse Source
This commit is contained in:
Gauthier
2024-06-16 00:20:01 +02:00
parent 5d6e7f09a2
commit 48d178c1e9
26 changed files with 53 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
next.config.js
View File

@@ -10,7 +10,10 @@ module.exports = {
JELLYFIN_TYPE: process.env.JELLYFIN_TYPE,
},
images: {
domains: ['image.tmdb.org'],
remotePatterns: [
{ hostname: 'gravatar.com' },
{ hostname: 'image.tmdb.org' },
],
},
webpack(config) {
config.module.rules.push({

1
src/components/Discover/DiscoverNetwork/index.tsx
View File

@@ -52,6 +52,7 @@ const DiscoverTvNetwork = () => {
src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.network.logoPath}`}
alt={firstResultData.network.name}
className="max-h-24 sm:max-h-32"
fill
/>
</div>
) : (

1
src/components/Discover/DiscoverStudio/index.tsx
View File

@@ -52,6 +52,7 @@ const DiscoverMovieStudio = () => {
src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.studio.logoPath}`}
alt={firstResultData.studio.name}
className="max-h-24 sm:max-h-32"
fill
/>
</div>
) : (

2
src/components/IssueDetails/IssueComment/index.tsx
View File

@@ -89,6 +89,8 @@ const IssueComment = ({
src={comment.user.avatar}
alt=""
className="h-10 w-10 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
width={40}
height={40}
/>
</Link>
<div className="relative flex-1">

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

@@ -282,6 +282,8 @@ const IssueDetails = () => {
className="mr-0.5 h-5 w-5 scale-100 transform-gpu rounded-full object-cover transition duration-300 group-hover:scale-105 xl:mr-1 xl:h-6 xl:w-6"
src={issueData.createdBy.avatar}
alt=""
width={20}
height={20}
/>
<span className="font-semibold text-gray-100 transition duration-300 group-hover:text-white group-hover:underline">
{issueData.createdBy.displayName}

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

@@ -229,6 +229,7 @@ const IssueItem = ({ issue }: IssueItemProps) => {
src={issue.createdBy.avatar}
alt=""
className="avatar-sm ml-1.5 object-cover"
fill
/>
<span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
{issue.createdBy.displayName}

4
src/components/Layout/Sidebar/index.tsx
View File

@@ -152,7 +152,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
<div className="flex flex-shrink-0 items-center px-2">
<span className="px-4 text-xl text-gray-50">
<Link href="/">
<Image src="/logo_full.svg" alt="Logo" />
<Image src="/logo_full.svg" alt="Logo" fill />
</Link>
</span>
</div>
@@ -221,7 +221,7 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
<div className="flex flex-shrink-0 items-center">
<span className="px-4 text-2xl text-gray-50">
<Link href="/">
<Image src="/logo_full.svg" alt="Logo" />
<Image src="/logo_full.svg" alt="Logo" fill />
</Link>
</span>
</div>

4
src/components/Layout/UserDropdown/index.tsx
View File

@@ -56,6 +56,8 @@ const UserDropdown = () => {
className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
src={user?.avatar || ''}
alt=""
width={40}
height={40}
/>
</Menu.Button>
</div>
@@ -77,6 +79,8 @@ const UserDropdown = () => {
className="h-8 w-8 rounded-full object-cover sm:h-10 sm:w-10"
src={user?.avatar || ''}
alt=""
width={40}
height={40}
/>
<div className="flex min-w-0 flex-col">
<span className="truncate text-xl font-semibold text-gray-200">

1
src/components/Login/index.tsx
View File

@@ -91,6 +91,7 @@ const Login = () => {
src="/logo_stacked.svg"
className="mb-10 max-w-full"
alt="Logo"
fill
/>
<h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
{intl.formatMessage(messages.signinheader)}

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

@@ -339,6 +339,8 @@ const ManageSlideOver = ({
src={user.avatar}
alt={user.displayName}
className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
width={32}
height={32}
/>
</Tooltip>
</Link>
@@ -498,6 +500,8 @@ const ManageSlideOver = ({
src={user.avatar}
alt={user.displayName}
className="h-8 w-8 scale-100 transform-gpu rounded-full object-cover ring-1 ring-gray-500 transition duration-300 hover:scale-105"
width={32}
height={32}
/>
</Tooltip>
</Link>

4
src/components/MediaSlider/ShowMoreCard/index.tsx
View File

@@ -63,6 +63,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[0]}`}
alt=""
className="w-full rounded-md"
fill
/>
</div>
)}
@@ -72,6 +73,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[1]}`}
alt=""
className="w-full rounded-md"
fill
/>
</div>
)}
@@ -81,6 +83,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[2]}`}
alt=""
className="w-full rounded-md"
fill
/>
</div>
)}
@@ -90,6 +93,7 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => {
src={`//image.tmdb.org/t/p/w300_and_h450_face${posters[3]}`}
alt=""
className="w-full rounded-md"
fill
/>
</div>
)}

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

@@ -533,6 +533,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
height: '100%',
objectFit: 'cover',
}}
fill
/>
<div
className="absolute inset-0"

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

@@ -58,6 +58,7 @@ const PersonCard = ({
height: '100%',
objectFit: 'cover',
}}
fill
/>
</div>
) : (

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

@@ -115,6 +115,7 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => {
src={requestData.requestedBy.avatar}
alt=""
className="avatar-sm"
fill
/>
<span className="truncate group-hover:underline">
{requestData.requestedBy.displayName}
@@ -371,6 +372,7 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => {
src={requestData.requestedBy.avatar}
alt=""
className="avatar-sm object-cover"
fill
/>
<span className="truncate font-semibold group-hover:text-white group-hover:underline">
{requestData.requestedBy.displayName}

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

@@ -188,6 +188,7 @@ const RequestItemError = ({
src={requestData.requestedBy.avatar}
alt=""
className="avatar-sm ml-1.5"
fill
/>
<span className="truncate text-sm group-hover:underline">
{requestData.requestedBy.displayName}
@@ -243,6 +244,7 @@ const RequestItemError = ({
src={requestData.modifiedBy.avatar}
alt=""
className="avatar-sm ml-1.5"
fill
/>
<span className="truncate text-sm group-hover:underline">
{requestData.modifiedBy.displayName}
@@ -536,6 +538,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
src={requestData.requestedBy.avatar}
alt=""
className="avatar-sm ml-1.5 object-cover"
fill
/>
<span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
{requestData.requestedBy.displayName}
@@ -591,6 +594,7 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => {
src={requestData.modifiedBy.avatar}
alt=""
className="avatar-sm ml-1.5 object-cover"
fill
/>
<span className="truncate text-sm font-semibold group-hover:text-white group-hover:underline">
{requestData.modifiedBy.displayName}

4
src/components/RequestModal/AdvancedRequester/index.tsx
View File

@@ -564,6 +564,8 @@ const AdvancedRequester = ({
src={selectedUser.avatar}
alt=""
className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
width={24}
height={24}
/>
<span className="ml-3 block">
{selectedUser.displayName}
@@ -614,6 +616,8 @@ const AdvancedRequester = ({
src={user.avatar}
alt=""
className="h-6 w-6 flex-shrink-0 rounded-full object-cover"
width={24}
height={24}
/>
<span className="ml-3 block flex-shrink-0">
{user.displayName}

1
src/components/RequestModal/SearchByNameModal/index.tsx
View File

@@ -95,6 +95,7 @@ const SearchByNameModal = ({
}
alt={item.title}
className="h-100 w-auto rounded-md"
fill
/>
</div>
<div className="flex-grow self-start p-3 text-left">

1
src/components/ResetPassword/RequestResetLink.tsx
View File

@@ -54,6 +54,7 @@ const ResetPassword = () => {
src="/logo_stacked.svg"
className="mb-10 max-w-full"
alt="Logo"
fill
/>
<h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
{intl.formatMessage(messages.resetpassword)}

1
src/components/ResetPassword/index.tsx
View File

@@ -69,6 +69,7 @@ const ResetPassword = () => {
src="/logo_stacked.svg"
className="mb-10 max-w-full"
alt="Logo"
fill
/>
<h2 className="mt-2 text-center text-3xl font-extrabold leading-9 text-gray-100">
{intl.formatMessage(messages.resetpassword)}

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

@@ -381,6 +381,7 @@ export const WatchProviderSelector = ({
height: '100%',
objectFit: 'contain',
}}
fill
className="rounded-lg"
/>
{isActive && (
@@ -425,6 +426,7 @@ export const WatchProviderSelector = ({
height: '100%',
objectFit: 'cover',
}}
fill
className="rounded-lg"
/>
{isActive && (

1
src/components/Setup/index.tsx
View File

@@ -82,6 +82,7 @@ const Setup = () => {
src="/logo_stacked.svg"
className="mb-10 max-w-full sm:mx-auto sm:max-w-md"
alt="Logo"
fill
/>
<AppDataWarning />
<nav className="relative z-50">

1
src/components/TvDetails/Season/index.tsx
View File

@@ -59,6 +59,7 @@ const Season = ({ seasonNumber, tvId }: SeasonProps) => {
className="h-auto w-full rounded-lg xl:h-32 xl:w-auto"
src={`https://image.tmdb.org/t/p/original/${episode.stillPath}`}
alt=""
fill
/>
)}
</div>

2
src/components/UserList/JellyfinImportModal.tsx
View File

@@ -241,6 +241,8 @@ const JellyfinImportModal: React.FC<JellyfinImportProps> = ({
className="h-10 w-10 flex-shrink-0 rounded-full"
src={user.thumb}
alt=""
width={40}
height={40}
/>
<div className="ml-4">
<div className="text-base font-bold leading-5">

2
src/components/UserList/PlexImportModal.tsx
View File

@@ -205,6 +205,8 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
className="h-10 w-10 flex-shrink-0 rounded-full"
src={user.thumb}
alt=""
width={40}
height={40}
/>
<div className="ml-4">
<div className="text-base font-bold leading-5">

2
src/components/UserList/index.tsx
View File

@@ -618,6 +618,8 @@ const UserList = () => {
className="h-10 w-10 rounded-full object-cover"
src={user.avatar}
alt=""
width={40}
height={40}
/>
</Link>
<div className="ml-4">

2
src/components/UserProfile/ProfileHeader/index.tsx
View File

@@ -45,6 +45,8 @@ const ProfileHeader = ({ user, isSettingsPage }: ProfileHeaderProps) => {
className="h-24 w-24 rounded-full bg-gray-600 object-cover ring-1 ring-gray-700"
src={user.avatar}
alt=""
width={96}
height={96}
/>
<span
className="absolute inset-0 rounded-full shadow-inner"