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

Updated prompt and added queue system

Browse Source
This commit is contained in:
Francisco Pessano
2024-10-12 01:02:23 -03:00
parent a11ed74017
commit 6fdb87c32a
6 changed files with 177 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,9 @@ import { TrackByAlbum } from "./spotify-data";
import { api } from "@/trpc/react";
import { quantum } from "ldrs";
import { ring2 } from "ldrs";
import { pulsar } from "ldrs";
pulsar.register();
ring2.register();
quantum.register();
@@ -15,7 +17,15 @@ export default function AlbumShowcase({
album,
position,
tracks,
}: TrackByAlbum & { spookify: boolean }) {
place,
lastSpookyImageLoaded,
setLastSpookyImageLoaded,
}: TrackByAlbum & {
spookify: boolean;
place: number;
lastSpookyImageLoaded: number;
setLastSpookyImageLoaded: any;
}) {
const imageSource = album.images[0]
? album.images[0].url
: "https://via.placeholder.com/150";
@@ -77,7 +87,15 @@ export default function AlbumShowcase({
)?.match(/https:\/\/res.cloudinary.com\/[^"]+/);
const spookyImageSource = spookyImageMatch ? spookyImageMatch[0] : null;
console.log(spookyImageSource);
const onImageLoad = () => {
if (!spookyImageLoaded) {
setSpookyImageLoaded(true);
setLastSpookyImageLoaded((state: number) =>
state > place ? state : place,
);
}
};
return (
<div
@@ -97,40 +115,65 @@ export default function AlbumShowcase({
src={imageSource}
alt={album.name}
/>
{!!spookyImageSource && (
<img
className="h-36 w-36 cursor-pointer rounded"
style={{
display:
showSpookyImage && spookyImageLoaded ? "block" : "none",
}}
src={spookyImageSource}
alt={album.name}
onLoad={() => {
if (!spookyImageLoaded) {
setSpookyImageLoaded(true);
}
}}
/>
)}
{spookyImageSource &&
(generateSpookyImage.data
? lastSpookyImageLoaded >= place ||
lastSpookyImageLoaded + 1 === place
: true) && (
<img
className="h-36 w-36 cursor-pointer rounded"
style={{
display:
showSpookyImage && spookyImageLoaded ? "block" : "none",
}}
src={spookyImageSource}
alt={album.name}
onLoad={onImageLoad}
onError={() => {
onImageLoad();
}}
/>
)}
{showSpookyImage && !spookyImageLoaded && (
<div className="flex h-36 w-36 items-center justify-center rounded bg-slate-300 bg-opacity-10">
<div>
{generateSpookyImage.data ? (
<>
<l-quantum
size="100"
speed="1.75"
color="white"
></l-quantum>
<p className="text-center">Generating...</p>
</>
) : (
<>
<l-ring-2 size="100" speed="1.75" color="white"></l-ring-2>
<p className="text-center">Getting image...</p>
</>
)}
{(() => {
if (generateSpookyImage.data) {
if (lastSpookyImageLoaded < place - 1) {
return (
<>
<l-pulsar
size="100"
speed="1.75"
color="white"
></l-pulsar>{" "}
<p className="text-center">On queue...</p>
</>
);
}
return (
<>
<l-quantum
size="100"
speed="1.75"
color="white"
></l-quantum>
<p className="text-center">Generating...</p>
</>
);
} else {
return (
<>
<l-ring-2
size="100"
speed="1.75"
color="white"
></l-ring-2>
<p className="text-center">Getting image...</p>
</>
);
}
})()}
</div>
</div>
)}
@@ -144,7 +187,6 @@ export default function AlbumShowcase({
{tracks.map((track) => (
<li key={track.id}>{track.name}</li>
))}
{JSON.stringify(generateSpookyImage.data)}
</ul>
</section>
</div>