Resume
/
movie-explorer
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

stop posters from sliding on load
Gitea/movie-explorer/pipeline/head There was a failure building this commit Details

This commit is contained in:
andrzej 2024-10-07 18:12:51 +02:00
parent 4684cac15a
commit 02884fef4d
1 changed files with 2 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/objects/movie-wall.tsx
View File

@ -48,7 +48,7 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300" const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300"
posters.push( posters.push(
<Poster className={"w-16 sm:w-28 xl:w-36 aspect-poster rounded-xl border-2 overflow-hidden relative flex item-center justify-center " + borderColor} isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i} <Poster className={"w-16 sm:w-28 xl:w-36 aspect-poster rounded-xl border-2 overflow-hidden relative " + borderColor} isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i}
listSimilar={tmdb.getSimilar} listSimilar={tmdb.getSimilar}
config={config} config={config}
setMovies={setMovies} setMovies={setMovies}
@ -89,7 +89,7 @@ function Poster({ className, movie, config, listSimilar, setMovies, setChosenMov
} }
{hasError ?? <div className="m-auto text-center">⚠️</div>} {hasError ?? <div className="m-auto text-center">⚠️</div>}
<img <img
className="animate-blur object-cover w-full" className="animate-blur object-cover w-full aspect-poster"
src={tmdb.makeImgUrl(movie.poster_path ?? "")} src={tmdb.makeImgUrl(movie.poster_path ?? "")}
onLoad={() => setIsLoading(false)} onLoad={() => setIsLoading(false)}
onError={() => setHasError(true)} onError={() => setHasError(true)}