Update buttons genre adn add X in player #27

No-Country-simulation · Dec 11, 2024 · 804c2ec · 804c2ec
1 parent 649629e
commit 804c2ec
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 48 deletions.
diff --git a/frontend/src/app/(page)/explore/components/SongList.tsx b/frontend/src/app/(page)/explore/components/SongList.tsx
@@ -23,7 +23,7 @@ export default function SongList({
     const loadSongs = async () => {
       try {
         const fetchedSongs = await fetchSongsList();
-        console.log("Fetched Songs:", fetchedSongs); // Debug log
+        //console.log("Fetched Songs:", fetchedSongs); // Debug log
         setAllSongs(fetchedSongs);
       } catch (error) {
         console.error("Error fetching songs:", error);
@@ -51,6 +51,9 @@ export default function SongList({
   const handlePlayPause = useCallback(() => {
     setIsPlaying(!isPlaying);
   }, [isPlaying]);
+  const handlePlayerClose = () => {
+    setSelectedSong(null);
+  };
 
   const handleNext = useCallback(() => {
     if (!selectedSong) return;
@@ -112,14 +115,14 @@ export default function SongList({
           }}
           genres={selectedSong.album.genres || ""}
           artistImage={selectedSong.artist.picture_medium}
-          isFavorite={selectedSong.isFavorite}
           isPlaying={isPlaying}
           onPlayPause={handlePlayPause}
           onNext={handleNext}
           onPrevious={handlePrevious}
           onFavoriteToggle={() =>
             selectedSong && toggleFavoriteHandler(selectedSong.id)
           }
+          onClose={handlePlayerClose}
         />
       )}
     </div>

diff --git a/frontend/src/components/ui/GenroButtons.tsx b/frontend/src/components/ui/GenroButtons.tsx
@@ -10,10 +10,12 @@ const genres = [
   "Electrónica",
   "Pop",
   "Rock",
-  "Rap",
+  "Rap/Hip Hop",
   "K-pop",
   "Clássica",
   "Dance",
+  "Alternativo",
+  "Electro",
 ];
 
 export default function GenreButtons({

diff --git a/frontend/src/components/ui/Player.tsx b/frontend/src/components/ui/Player.tsx
@@ -9,7 +9,7 @@ import {
   Square,
   FastForward,
   SkipForward,
-  Heart,
+  X,
 } from "lucide-react";
 
 interface PlayerProps {
@@ -28,7 +28,7 @@ interface PlayerProps {
   onNext?: () => void;
   onPrevious?: () => void;
   onFavoriteToggle: (songId: string) => void;
-  isFavorite: boolean;
+  onClose: () => void;
 }
 
 const Player: React.FC<PlayerProps> = ({
@@ -39,11 +39,13 @@ const Player: React.FC<PlayerProps> = ({
   onPlayPause,
   onNext,
   onPrevious,
-  onFavoriteToggle,
+
+  onClose,
 }) => {
   const [progress, setProgress] = useState(0);
   const [currentTime, setCurrentTime] = useState("00:00");
   const [error, setError] = useState<string | null>(null);
+  const [isPlayerVisible, setIsPlayerVisible] = useState(true);
   const playerRef = useRef<HTMLDivElement>(null);
   const audioRef = useRef<HTMLAudioElement | null>(null);
 
@@ -174,6 +176,11 @@ const Player: React.FC<PlayerProps> = ({
     }
   };
 
+  const handlePlayerClose = () => {
+    setIsPlayerVisible(false);
+    onClose();
+  };
+
   const formatTime = (time: number): string => {
     const minutes = Math.floor(time / 60);
     const seconds = Math.floor(time % 60);
@@ -182,7 +189,7 @@ const Player: React.FC<PlayerProps> = ({
       .padStart(2, "0")}`;
   };
 
-  if (!currentSong) return null;
+  if (!currentSong || !isPlayerVisible) return null;
 
   return (
     <div
@@ -206,16 +213,13 @@ const Player: React.FC<PlayerProps> = ({
             <p className="text-primary/60 text-sm">{currentSong.artist}</p>
             <p className="text-primary/60 text-sm">{genres}</p>
           </div>
-          <Heart
-            className={`w-6 h-6 cursor-pointer transition-colors
-              ${
-                currentSong.isFavorite
-                  ? "text-primary fill-primary"
-                  : "text-primary/60 hover:text-primary"
-              }
-            `}
-            onClick={() => onFavoriteToggle(currentSong.id)}
-          />
+          <div className="flex items-center space-x-2">
+            <X
+              className="text-primary/60 cursor-pointer hover:text-primary"
+              size={44}
+              onClick={handlePlayerClose}
+            />
+          </div>
         </div>
 
         <div className="flex items-center justify-center gap-4 mb-4">
@@ -252,7 +256,7 @@ const Player: React.FC<PlayerProps> = ({
             className="text-primary cursor-pointer"
             size={47}
             style={{ strokeWidth: 2, fill: "currentColor" }}
-            onClick={handleStop} // Cambia a handleStop
+            onClick={handleStop}
           />
           <FastForward
             className="text-primary cursor-pointer"

diff --git a/frontend/src/hooks/useFilterSongs.ts b/frontend/src/hooks/useFilterSongs.ts
@@ -1,5 +1,4 @@
 import { Song } from "@/types/ui/Song";
-
 export const useFilterSongs = (
     songs: Song[],
     searchTerm: string,
@@ -16,36 +15,16 @@ export const useFilterSongs = (
 
         const genres = Array.isArray(song.album.genres) ? song.album.genres : [song.album.genres];
         const matchesGenre =
-            selectedGenre === "Todos" || genres.some((genre) =>
-                genre.toLowerCase().includes(selectedGenre.toLowerCase())
-            );
-
-        return matchesSearch && matchesGenre;
-    });
-};
-
-
-/*import { Song } from "@/types/ui/Song";
-
-export const useFilterSongs = (
-    songs: Song[],
-    searchTerm: string,
-    selectedGenre: string
-): Song[] => {
-    if (!Array.isArray(songs)) {
-        return [];
-    }
-
-    return songs.filter((song) => {
-        const matchesSearch = [song.title, song.artist.name, song.album.genres]
-            .map((field) => (typeof field === "string" ? field : "").toLowerCase())
-            .some((value) => value.includes(searchTerm.toLowerCase()));
-
-        const genres = song.album.genres || "";
-        const matchesGenre =
-            selectedGenre === "Todos" || genres.toLowerCase().includes(selectedGenre.toLowerCase());
+            selectedGenre === "Todos" || genres.some((genre) => {
+                if (selectedGenre.toLowerCase().includes('/')) {
+                    // Use includes for compound genres
+                    return genre.toLowerCase().includes(selectedGenre.toLowerCase());
+                } else {
+                    // Use exact match for single-word genres
+                    return genre.toLowerCase() === selectedGenre.toLowerCase();
+                }
+            });
 
         return matchesSearch && matchesGenre;
     });
 };
-*/