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>

85
src/app/_components/artist-showcase.tsx
View File

@@ -14,11 +14,17 @@ export default function ArtistShowcase({
images,
name,
id,
place,
lastSpookyImageLoaded,
setLastSpookyImageLoaded,
}: {
spookify: boolean;
images: { url: string }[];
name: string;
id: string;
place: number;
lastSpookyImageLoaded: number;
setLastSpookyImageLoaded: any;
}) {
const [showSpookyImage, setShowSpookyImage] = useState(spookify);
const [spookyImageLoaded, setSpookyImageLoaded] = useState(false);
@@ -79,6 +85,15 @@ export default function ArtistShowcase({
)?.match(/https:\/\/res.cloudinary.com\/[^"]+/);
const spookyImageSource = spookyImageMatch ? spookyImageMatch[0] : null;
const onImageLoad = () => {
if (!spookyImageLoaded) {
setSpookyImageLoaded(true);
setLastSpookyImageLoaded((state: number) =>
state > place ? state : place,
);
}
};
return (
<Tilt tiltMaxAngleX={10} tiltMaxAngleY={10} transitionSpeed={200}>
<div
@@ -93,25 +108,29 @@ export default function ArtistShowcase({
src={imageSource}
alt={name}
/>
{!!spookyImageSource && (
<img
style={{
display: showSpookyImage && spookyImageLoaded ? "block" : "none",
}}
className="h-56 w-56 object-fill"
onLoad={() => {
if (!spookyImageLoaded) {
setSpookyImageLoaded(true);
}
}}
src={spookyImageSource}
alt={name}
/>
)}
{spookyImageSource &&
(generateSpookyImage.data
? lastSpookyImageLoaded >= place ||
lastSpookyImageLoaded + 1 === place
: true) && (
<img
style={{
display:
showSpookyImage && spookyImageLoaded ? "block" : "none",
}}
className="h-56 w-56 object-fill"
onLoad={onImageLoad}
onError={() => {
onImageLoad();
}}
src={spookyImageSource}
alt={name}
/>
)}
{showSpookyImage && !spookyImageLoaded && (
<div className="flex h-56 w-56 items-center justify-center">
<div>
{generateSpookyImage.data ? (
{/* {generateSpookyImage.data ? (
<>
<l-quantum size="165" speed="1.75" color="white"></l-quantum>
<p className="text-center">Generating...</p>
@@ -128,7 +147,39 @@ export default function ArtistShowcase({
></l-ring-2>
<p className="text-center">Getting image...</p>
</>
)}
)} */}
{(() => {
if (generateSpookyImage.data) {
if (lastSpookyImageLoaded < place - 1) {
return (
<>
<l-pulsar
size="165"
speed="1.75"
color="white"
></l-pulsar>
<p className="text-center">On queue...</p>
</>
);
}
return (
<>
<l-quantum
size="165"
speed="1.75"
color="white"
></l-quantum>
<p className="text-center">Generating...</p>
</>
);
}
return (
<>
<l-ring-2 size="165" speed="1.75" color="white"></l-ring-2>
<p className="text-center">Getting image...</p>
</>
);
})()}
</div>
</div>
)}

30
src/app/_components/showcase.tsx
View File

@@ -12,7 +12,10 @@ export function Showcase({
tracksByAlbum: Record<string, any>;
artists: any[];
}) {
const [spookify, setSpookify] = useState(false);
const [spookify, setSpookify] = useState(true);
const [lastSpookyImageLoaded, setLastSpookyImageLoaded] = useState(0);
const albumsQuantity = Object.values(tracksByAlbum).length;
return (
<>
<div className="flex gap-2 self-start">
@@ -24,10 +27,16 @@ export function Showcase({
<h3>Tracks by album</h3>
{Object.values(tracksByAlbum)
.sort((a, b) => b.position - a.position)
.map(
(album, index) =>
!index && <AlbumShowcase spookify={spookify} {...album} />,
)}
.map((album, index) => (
<AlbumShowcase
key={album.id}
place={index}
lastSpookyImageLoaded={lastSpookyImageLoaded}
setLastSpookyImageLoaded={setLastSpookyImageLoaded}
spookify={spookify}
{...album}
/>
))}
<h3>Artists images</h3>
<div
style={{
@@ -36,9 +45,16 @@ export function Showcase({
justifyContent: "space-evenly",
}}
>
{[artists[0]].map((artist) => {
{artists.map((artist, index) => {
return (
<ArtistShowcase spookify={spookify} key={artist.id} {...artist} />
<ArtistShowcase
place={index + albumsQuantity}
lastSpookyImageLoaded={lastSpookyImageLoaded}
setLastSpookyImageLoaded={setLastSpookyImageLoaded}
spookify={spookify}
key={artist.id}
{...artist}
/>
);
})}
</div>

10
src/app/_components/spotify-data.tsx
View File

@@ -1,8 +1,6 @@
import SpotifyWebApi from "spotify-web-api-node";
import Showcase from "./showcase";
const TRACKS_LIMIT = 20;
const ARTISTS_LIMIT = 21;
import { FETCH_ARTISTS_LIMIT, FETCH_TRACKS_LIMIT } from "../utils/contants";
export type TrackByAlbum = {
album: {
@@ -35,13 +33,13 @@ export default async function SpotifyData({
const albums = albumsData.body.items;
const artistsData = await spotifyApi.getMyTopArtists({
limit: ARTISTS_LIMIT,
limit: FETCH_ARTISTS_LIMIT,
time_range: "short_term",
});
const artists = artistsData.body.items;
const tracksData = await spotifyApi.getMyTopTracks({
limit: TRACKS_LIMIT,
limit: FETCH_TRACKS_LIMIT,
time_range: "short_term",
});
const tracks = tracksData.body.items.map((track, i) => ({
@@ -59,7 +57,7 @@ export default async function SpotifyData({
album: track.album,
position:
tracksWithAlbum.reduce(
(acc, _track) => TRACKS_LIMIT / _track.position + acc,
(acc, _track) => FETCH_TRACKS_LIMIT / _track.position + acc,
0,
) / tracksWithAlbum.length,
tracks: [],

2
src/app/utils/contants.ts Normal file
View File

@@ -0,0 +1,2 @@
export const FETCH_TRACKS_LIMIT = 20;
export const FETCH_ARTISTS_LIMIT = 21;

5
src/server/utils/index.ts
View File

@@ -25,7 +25,10 @@ export const uploadImage = async (
};
export const makeImageSpooky = (publicId: string) => {
const options = { effect: "gen_background_replace" };
const options = {
effect:
"gen_background_replace:prompt_a bizarre and super creepy background acording with main object theme-max creativity",
};
try {
const result = cloudinary.v2.image(publicId, { ...options });