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 ( return (
<Tilt tiltMaxAngleX={10} tiltMaxAngleY={10} transitionSpeed={200}> <Tilt tiltMaxAngleX={10} tiltMaxAngleY={10} transitionSpeed={200}>
<img <img
className="h-36 w-36 cursor-pointer rounded" className="h-36 w-36 cursor-pointer rounded-xl"
style={{ style={{
display: showSpookyImage ? "none" : "block", display: showSpookyImage ? "none" : "block",
}} }}

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

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