Added second album image

2025-10-13 00:02:36 +00:00 · 2024-10-14 00:07:31 -03:00
parent 48030a035e
commit 19d8322dfc
7 changed files with 204 additions and 95 deletions
--- a/src/app/_components/album-image.tsx
+++ b/src/app/_components/album-image.tsx
@@ -1,7 +1,11 @@
-import React from "react";
+import { api } from "@/trpc/react";
+import React, { useEffect, useState } from "react";
 import Tilt from "react-parallax-tilt";
+import SadFaceIcon from "./sad-face-icon";

 interface AlbumImageProps {
+  number?: number;
+  entry: { data: any; isLoading: boolean };
  showSpookyImage: boolean;
  imageSource: string;
  spookyImageSource: string | null;
@@ -9,13 +13,27 @@ interface AlbumImageProps {
  generateSpookyImageData: string | null;
  lastSpookyImageLoaded: number;
  place: number;
-  spookyImageLoaded: boolean;
-  onImageLoad: () => void;
  loadGeneratedImage: boolean;
  onQueue: boolean;
+  saveImage: {
+    mutate: (arg0: {
+      entry: {
+        type: "album" | "artist";
+        image: string;
+        name: string;
+        number?: number;
+      };
+    }) => void;
+  };
+  setLastSpookyImageLoaded: (
+    arg0: number | ((state: number) => number),
+  ) => void;
+  error: boolean;
 }

 export function AlbumImage({
+  number,
+  entry,
  showSpookyImage,
  imageSource,
  spookyImageSource,
@@ -23,11 +41,42 @@ export function AlbumImage({
  generateSpookyImageData,
  lastSpookyImageLoaded,
  place,
-  spookyImageLoaded,
-  onImageLoad,
  loadGeneratedImage,
  onQueue,
+  saveImage,
+  setLastSpookyImageLoaded,
+  error,
 }: AlbumImageProps) {
+  const [spookyImageLoaded, setSpookyImageLoaded] = useState(false);
+
+  const handleSaveImage = async () => {
+    if (!entry.data && !entry.isLoading) {
+      saveImage.mutate({
+        entry: {
+          type: "album",
+          image: imageSource,
+          name: album.name,
+          number,
+        },
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (spookyImageLoaded) {
+      handleSaveImage();
+    }
+  }, [spookyImageLoaded]);
+
+  const onImageLoad = () => {
+    if (!spookyImageLoaded) {
+      setSpookyImageLoaded(true);
+      setLastSpookyImageLoaded((state: number) =>
+        state > place ? state : place,
+      );
+    }
+  };
+
  return (
    <Tilt tiltMaxAngleX={10} tiltMaxAngleY={10} transitionSpeed={200}>
      <img
@@ -38,7 +87,7 @@ export function AlbumImage({
        src={imageSource}
        alt={album.name}
      />
-      {loadGeneratedImage && spookyImageSource && (
+      {loadGeneratedImage && spookyImageSource && !error && (
        <img
          className="h-36 w-36 cursor-pointer rounded"
          style={{
@@ -52,7 +101,7 @@ export function AlbumImage({
          }}
        />
      )}
-      {showSpookyImage && !spookyImageLoaded && (
+      {showSpookyImage && !spookyImageLoaded && !error && (
        <div className="flex h-36 w-36 items-center justify-center rounded bg-slate-300 bg-opacity-10">
          <div>
            {(() => {
@@ -91,6 +140,14 @@ export function AlbumImage({
          </div>
        </div>
      )}
+      {error && (
+        <div className="flex h-36 w-36 items-center justify-center rounded bg-slate-300 bg-opacity-10">
+          <div>
+            <SadFaceIcon className="h-16 w-16" color="white" />
+            <p className="text-center">Error</p>
+          </div>
+        </div>
+      )}
    </Tilt>
  );
 }
--- a/src/app/_components/album-showcase.tsx
+++ b/src/app/_components/album-showcase.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { TrackByAlbum } from "./spotify-data";
 import { api } from "@/trpc/react";
 import { quantum } from "ldrs";
@@ -19,12 +19,12 @@ export default function AlbumShowcase({
  album,
  position,
  tracks,
-  place,
+  places,
  lastSpookyImageLoaded,
  setLastSpookyImageLoaded,
 }: TrackByAlbum & {
  spookify: boolean;
-  place: number;
+  places: number[];
  lastSpookyImageLoaded: number;
  setLastSpookyImageLoaded: any;
 }) {
@@ -33,26 +33,34 @@ export default function AlbumShowcase({
    : "https://via.placeholder.com/150";

  const [showSpookyImage, setShowSpookyImage] = useState(spookify);
-  const [spookyImageLoaded, setSpookyImageLoaded] = useState(false);

  useEffect(() => {
    setShowSpookyImage(spookify);
  }, [spookify]);

-  const entry = api.entry.get.useQuery({
-    type: "album",
-    name: album.name,
-    image: imageSource,
-  });
+  const entry = api.entry.get.useQuery(
+    {
+      type: "album",
+      name: album.name,
+      image: imageSource,
+    },
+    {
+      refetchInterval: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
+    },
+  );

  const generateSpookyImage = api.entry.generate.useMutation();
  const generateSecondSpookyImage = api.entry.generate.useMutation();

-  const spookyImageMatch = (
-    (entry.data?.value || generateSpookyImage.data) as null | string
-  )?.match(/https:\/\/res.cloudinary.com\/[^"]+/);
+  const spookyImageSource = useMemo(() => {
+    const spookyImageMatch = (
+      (entry.data?.value || generateSpookyImage.data) as null | string
+    )?.match(/<img\s+src='([^']+)'[^>]*>/);

-  const spookyImageSource = spookyImageMatch ? spookyImageMatch[0] : "";
+    return spookyImageMatch && spookyImageMatch[1] ? spookyImageMatch[1] : "";
+  }, [entry.data, generateSpookyImage.data]);

  const secondEntry = api.entry.get.useQuery(
    {
@@ -62,13 +70,12 @@ export default function AlbumShowcase({
      number: 2,
    },
    {
-      enabled: !!spookyImageSource,
+      refetchInterval: false,
+      refetchOnReconnect: false,
+      refetchOnWindowFocus: false,
    },
  );

-  const saveImage = api.entry.save.useMutation();
-  const saveSecondImage = api.entry.save.useMutation();
-
  const handleGenerateSpookyImage = async () => {
    if (!entry.data && !entry.isLoading) {
      generateSpookyImage.mutate({
@@ -82,61 +89,44 @@ export default function AlbumShowcase({
  };

  const handleSecondGenerateSpookyImage = async () => {
-    if (!secondEntry.data && !secondEntry.isLoading) {
+    if (!secondEntry.data && !secondEntry.isLoading && spookyImageSource) {
      generateSecondSpookyImage.mutate({
        entry: {
          type: "album",
          name: album.name,
-          image: spookyImageSource as string,
+          image: spookyImageSource,
+          number: 2,
        },
      });
    }
  };

-  const handleSaveImage = async () => {
-    if (!entry.data && !entry.isLoading) {
-      saveImage.mutate({
-        entry: {
-          type: "album",
-          image: imageSource,
-          name: album.name,
-        },
-      });
-    }
-  };
-
-  const handleSecondSaveImage = async () => {
-    if (!secondEntry.data && !secondEntry.isLoading) {
-      saveSecondImage.mutate({
-        entry: {
-          type: "album",
-          image: spookyImageSource as string,
-          name: album.name,
-        },
-      });
-    }
-  };
+  const saveImage = api.entry.save.useMutation();
+  const saveSecondImage = api.entry.save.useMutation();

  useEffect(() => {
    handleGenerateSpookyImage();
  }, [entry.data]);

  useEffect(() => {
-    if (spookyImageLoaded) {
-      handleSaveImage();
-    }
-  }, [spookyImageLoaded]);
+    handleSecondGenerateSpookyImage();
+  }, [secondEntry.data, entry.data]);

-  //TODO ERROR HANDLING
+  const secondSpookyImageMatch = (
+    (secondEntry.data?.value || generateSecondSpookyImage?.data || "") as string
+  ).match(/<img\s+src='([^']+)'[^>]*>/);
+  const secondSpookyImageSource =
+    secondSpookyImageMatch && secondSpookyImageMatch[1]
+      ? secondSpookyImageMatch[1]
+      : "";

-  const onImageLoad = () => {
-    if (!spookyImageLoaded) {
-      setSpookyImageLoaded(true);
-      setLastSpookyImageLoaded((state: number) =>
-        state > place ? state : place,
-      );
-    }
-  };
+  const firstPlace = places[0] || 0;
+  const secondPlace = places[1] || 0;
+
+  const firstImageError = !!(entry.error || generateSpookyImage.error);
+  const secondImageError = !!(
+    secondEntry.error || generateSecondSpookyImage.error
+  );

  return (
    <div
@@ -148,49 +138,64 @@ export default function AlbumShowcase({
        className="cursor-pointer *:select-none"
      >
        <Swiper>
-          <SwiperSlide>
+          <SwiperSlide className="shadow-lg">
            <AlbumImage
+              entry={entry}
              showSpookyImage={showSpookyImage}
              imageSource={imageSource}
              spookyImageSource={spookyImageSource}
              album={album}
              generateSpookyImageData={generateSpookyImage.data as string}
              lastSpookyImageLoaded={lastSpookyImageLoaded}
-              place={place}
-              spookyImageLoaded={spookyImageLoaded}
-              onImageLoad={onImageLoad}
+              place={firstPlace}
              loadGeneratedImage={
                !!(
                  spookyImageSource &&
                  (generateSpookyImage.data
-                    ? lastSpookyImageLoaded >= place ||
-                      lastSpookyImageLoaded + 1 === place
+                    ? lastSpookyImageLoaded >= firstPlace ||
+                      lastSpookyImageLoaded + 1 === firstPlace
                    : true)
                )
              }
-              onQueue={lastSpookyImageLoaded < place - 1}
+              onQueue={lastSpookyImageLoaded < firstPlace - 1}
+              saveImage={saveImage}
+              setLastSpookyImageLoaded={setLastSpookyImageLoaded}
+              error={firstImageError}
            />
          </SwiperSlide>
-          {/* <SwiperSlide>
+          <SwiperSlide>
            <AlbumImage
+              number={2}
+              entry={secondEntry}
              showSpookyImage={showSpookyImage}
              imageSource={imageSource}
-              spookyImageSource={spookyImageSource}
+              spookyImageSource={secondSpookyImageSource}
              album={album}
-              generateSpookyImageData={generateSpookyImage.data as string}
+              generateSpookyImageData={generateSecondSpookyImage.data as string}
              lastSpookyImageLoaded={lastSpookyImageLoaded}
-              place={place}
-              spookyImageLoaded={spookyImageLoaded}
-              onImageLoad={onImageLoad}
+              place={secondPlace}
+              loadGeneratedImage={
+                !!(
+                  secondSpookyImageSource &&
+                  (generateSecondSpookyImage.data
+                    ? lastSpookyImageLoaded >= secondPlace ||
+                      lastSpookyImageLoaded + 1 === secondPlace
+                    : true)
+                )
+              }
+              onQueue={lastSpookyImageLoaded < secondPlace - 1}
+              saveImage={saveSecondImage}
+              setLastSpookyImageLoaded={setLastSpookyImageLoaded}
+              error={secondImageError}
            />
-          </SwiperSlide> */}
+          </SwiperSlide>
        </Swiper>
      </div>
      <section className="flex h-36 flex-grow flex-col">
        <h4 className="mb-2 text-lg font-semibold leading-none">
          {album.name}
        </h4>
-        <ul className="overflow-scroll">
+        <ul className="max-h-[400px] overflow-auto overflow-y-auto [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 [&::-webkit-scrollbar]:w-2">
          {tracks.map((track) => (
            <li key={track.id}>{track.name}</li>
          ))}
--- a/src/app/_components/sad-face-icon.tsx
+++ b/src/app/_components/sad-face-icon.tsx
@@ -0,0 +1,38 @@
+interface SadFaceIconProps {
+  color: string;
+  className?: string;
+}
+
+export function SadFaceIcon({ color, className }: SadFaceIconProps) {
+  return (
+    <svg
+      className={className}
+      fill={color}
+      version="1.1"
+      id="Capa_1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      width="800px"
+      height="800px"
+      viewBox="0 0 106.059 106.059"
+      xmlSpace="preserve"
+    >
+      <g>
+        <path
+          d="M90.546,15.518C69.858-5.172,36.199-5.172,15.515,15.513C-5.173,36.198-5.171,69.858,15.517,90.547
+		c20.682,20.684,54.341,20.684,75.027-0.004C111.23,69.858,111.229,36.2,90.546,15.518z M84.757,84.758
+		c-17.494,17.494-45.96,17.496-63.455,0.002c-17.498-17.497-17.496-45.966,0-63.46C38.796,3.807,67.261,3.805,84.759,21.302
+		C102.253,38.796,102.251,67.265,84.757,84.758z M77.017,74.001c0.658,1.521-0.042,3.286-1.562,3.943
+		c-1.521,0.66-3.286-0.042-3.944-1.562c-2.893-6.689-9.73-11.012-17.421-11.012c-7.868,0-14.747,4.319-17.522,11.004
+		c-0.479,1.154-1.596,1.851-2.771,1.851c-0.384,0-0.773-0.074-1.15-0.23c-1.53-0.636-2.255-2.392-1.62-3.921
+		c3.71-8.932,12.764-14.703,23.063-14.703C64.174,59.371,73.174,65.113,77.017,74.001z M33.24,38.671
+		c0-3.424,2.777-6.201,6.201-6.201c3.423,0,6.2,2.776,6.2,6.201c0,3.426-2.777,6.202-6.2,6.202
+		C36.017,44.873,33.24,42.097,33.24,38.671z M61.357,38.671c0-3.424,2.779-6.201,6.203-6.201c3.423,0,6.2,2.776,6.2,6.201
+		c0,3.426-2.776,6.202-6.2,6.202S61.357,42.097,61.357,38.671z"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default SadFaceIcon;
--- a/src/app/_components/showcase.tsx
+++ b/src/app/_components/showcase.tsx
@@ -27,16 +27,18 @@ export function Showcase({
      <h3>Tracks by album</h3>
      {Object.values(tracksByAlbum)
        .sort((a, b) => b.position - a.position)
-        .map((album, index) => (
-          <AlbumShowcase
-            key={album.id}
-            place={index}
-            lastSpookyImageLoaded={lastSpookyImageLoaded}
-            setLastSpookyImageLoaded={setLastSpookyImageLoaded}
-            spookify={spookify}
-            {...album}
-          />
-        ))}
+        .map((album, index) => {
+          return (
+            <AlbumShowcase
+              key={album.id}
+              {...album}
+              places={[index, albumsQuantity + index]}
+              lastSpookyImageLoaded={lastSpookyImageLoaded}
+              setLastSpookyImageLoaded={setLastSpookyImageLoaded}
+              spookify={spookify}
+            />
+          );
+        })}
      <h3>Artists images</h3>
      <div
        style={{
--- a/src/app/utils/contants.ts
+++ b/src/app/utils/contants.ts
@@ -1,2 +1,2 @@
-export const FETCH_TRACKS_LIMIT = 20;
-export const FETCH_ARTISTS_LIMIT = 21;
+export const FETCH_TRACKS_LIMIT = 1;
+export const FETCH_ARTISTS_LIMIT = 1;
--- a/src/server/api/routers/entry.ts
+++ b/src/server/api/routers/entry.ts
@@ -41,6 +41,7 @@ export const entryRouter = createTRPCRouter({
          type: z.enum(["artist", "album"]),
          name: z.string().min(1),
          image: z.string().min(1),
+          number: z.number().optional(),
        }),
      }),
    )
@@ -51,7 +52,7 @@ export const entryRouter = createTRPCRouter({
        if (!uploadedImage || typeof uploadedImage !== "string") {
          throw new Error("Failed to upload image");
        }
-        const spookyImage = makeImageSpooky(uploadedImage);
+        const spookyImage = makeImageSpooky(uploadedImage, input.entry.number);
        if (!spookyImage || typeof spookyImage !== "string") {
          throw new Error("Failed to make image spooky");
        }
@@ -79,6 +80,7 @@ export const entryRouter = createTRPCRouter({
          type: z.enum(["artist", "album"]),
          name: z.string().min(1),
          image: z.string().min(1),
+          number: z.number().optional(),
        }),
      }),
    )
--- a/src/server/utils/index.ts
+++ b/src/server/utils/index.ts
@@ -24,11 +24,16 @@ export const uploadImage = async (
  }
 };

-export const makeImageSpooky = (publicId: string) => {
-  const options = {
-    effect:
-      "gen_background_replace:prompt_a bizarre and super creepy background acording with main object theme-max creativity",
-  };
+export const makeImageSpooky = (publicId: string, number?: number) => {
+  const options: Record<string, string> = {};
+
+  if (number === 2) {
+    options.effect =
+      "gen_recolor:prompt_main_object_or_motive_on_image;to-color_green";
+  } else {
+    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 });