franpcode/spooky-spotify-showcase
1
0
Fork 0
mirror of https://github.com/FranP-code/spooky-spotify-showcase.git synced 2025-10-13 00:02:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Changed album styles

Browse Source
This commit is contained in:
Francisco Pessano
2024-10-17 22:29:42 -03:00
parent 789f9b0c94
commit bedd1419d5
2 changed files with 87 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/_components/album-image.tsx
View File

@@ -80,7 +80,7 @@ export function AlbumImage({
return (
<Tilt tiltMaxAngleX={10} tiltMaxAngleY={10} transitionSpeed={200}>
<img
className="h-36 w-36 cursor-pointer rounded"
className="h-36 w-36 cursor-pointer rounded-xl"
style={{
display: showSpookyImage ? "none" : "block",
}}

144
src/app/_components/album-showcase.tsx
View File

@@ -135,65 +135,93 @@ export default function AlbumShowcase({
>
<div
onClick={() => setShowSpookyImage(!showSpookyImage)}
className="*:drag-none cursor-pointer *:select-none"
className="cursor-pointer *:select-none *:drag-none"
>
<Swiper>
<SwiperSlide
className={`shadow-lg ${!showSpookyImage ? "swiper-no-swiping" : ""}`}
>
<AlbumImage
entry={entry}
showSpookyImage={showSpookyImage}
imageSource={imageSource}
spookyImageSource={spookyImageSource}
album={album}
generateSpookyImageData={generateSpookyImage.data as string}
lastSpookyImageLoaded={lastSpookyImageLoaded}
place={firstPlace}
loadGeneratedImage={
!!(
spookyImageSource &&
(generateSpookyImage.data
? lastSpookyImageLoaded >= firstPlace ||
lastSpookyImageLoaded + 1 === firstPlace
: true)
)
}
onQueue={lastSpookyImageLoaded < firstPlace - 1}
saveImage={saveImage}
setLastSpookyImageLoaded={setLastSpookyImageLoaded}
error={firstImageError}
/>
</SwiperSlide>
<SwiperSlide
className={`shadow-lg ${!showSpookyImage ? "swiper-no-swiping" : ""}`}
>
<AlbumImage
number={2}
entry={secondEntry}
showSpookyImage={showSpookyImage}
imageSource={imageSource}
spookyImageSource={secondSpookyImageSource}
album={album}
generateSpookyImageData={generateSecondSpookyImage.data as string}
lastSpookyImageLoaded={lastSpookyImageLoaded}
place={secondPlace}
loadGeneratedImage={
!!(
secondSpookyImageSource &&
(generateSecondSpookyImage.data
? lastSpookyImageLoaded >= secondPlace ||
lastSpookyImageLoaded + 1 === secondPlace
: true)
)
}
onQueue={lastSpookyImageLoaded < secondPlace - 1}
saveImage={saveSecondImage}
setLastSpookyImageLoaded={setLastSpookyImageLoaded}
error={secondImageError}
/>
</SwiperSlide>
</Swiper>
{showSpookyImage ? (
<Swiper>
<SwiperSlide
className={`shadow-lg ${!showSpookyImage ? "swiper-no-swiping" : ""}`}
>
<AlbumImage
entry={entry}
showSpookyImage={showSpookyImage}
imageSource={imageSource}
spookyImageSource={spookyImageSource}
album={album}
generateSpookyImageData={generateSpookyImage.data as string}
lastSpookyImageLoaded={lastSpookyImageLoaded}
place={firstPlace}
loadGeneratedImage={
!!(
spookyImageSource &&
(generateSpookyImage.data
? lastSpookyImageLoaded >= firstPlace ||
lastSpookyImageLoaded + 1 === firstPlace
: true)
)
}
onQueue={lastSpookyImageLoaded < firstPlace - 1}
saveImage={saveImage}
setLastSpookyImageLoaded={setLastSpookyImageLoaded}
error={firstImageError}
/>
</SwiperSlide>
<SwiperSlide
className={`shadow-lg ${!showSpookyImage ? "swiper-no-swiping" : ""}`}
>
<AlbumImage
number={2}
entry={secondEntry}
showSpookyImage={showSpookyImage}
imageSource={imageSource}
spookyImageSource={secondSpookyImageSource}
album={album}
generateSpookyImageData={
generateSecondSpookyImage.data as string
}
lastSpookyImageLoaded={lastSpookyImageLoaded}
place={secondPlace}
loadGeneratedImage={
!!(
secondSpookyImageSource &&
(generateSecondSpookyImage.data
? lastSpookyImageLoaded >= secondPlace ||
lastSpookyImageLoaded + 1 === secondPlace
: true)
)
}
onQueue={lastSpookyImageLoaded < secondPlace - 1}
saveImage={saveSecondImage}
setLastSpookyImageLoaded={setLastSpookyImageLoaded}
error={secondImageError}
/>
</SwiperSlide>
</Swiper>
) : (
<AlbumImage
entry={entry}
showSpookyImage={showSpookyImage}
imageSource={imageSource}
spookyImageSource={spookyImageSource}
album={album}
generateSpookyImageData={generateSpookyImage.data as string}
lastSpookyImageLoaded={lastSpookyImageLoaded}
place={firstPlace}
loadGeneratedImage={
!!(
spookyImageSource &&
(generateSpookyImage.data
? lastSpookyImageLoaded >= firstPlace ||
lastSpookyImageLoaded + 1 === firstPlace
: true)
)
}
onQueue={lastSpookyImageLoaded < firstPlace - 1}
saveImage={saveImage}
setLastSpookyImageLoaded={setLastSpookyImageLoaded}
error={firstImageError}
/>
)}
</div>
<section className="flex h-36 flex-grow flex-col">
<h4 className="mb-2 text-lg font-semibold leading-none">