Update all explore #27

frontend/src/app/(page)/explore/components/SongItem.tsx

@@ -3,12 +3,18 @@ import Image from "next/image";
 import { Heart } from "lucide-react";
 
 interface SongItemProps {
+  id: string;
   title: string;
+  title_short: string;
+  duration: string;
+  preview: string;
+  md5_image: string;
   artist: string;
   genre: string;
-  duration: string;
+
   isSelected: boolean;
   isFavorite: boolean;
+
   onFavoriteToggle: () => void;
   onPlay: () => void;
 }

frontend/src/app/(page)/explore/components/SongList.tsx

@@ -1,10 +1,10 @@
-// SongList.tsx
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import SongItem from "./SongItem";
 import Player from "@/components/ui/Player";
 import { useFilterSongs } from "@/hooks/useFilterSongs";
 import { mockSongs } from "@/data/mockSongs";
 import { Song } from "@/types/ui/Song";
+import { formatDuration } from "@/app/utils/formatDuration";
 
 interface SongListProps {
   searchTerm?: string;
@@ -18,42 +18,89 @@ export default function SongList({
   const [selectedSong, setSelectedSong] = useState<Song | null>(null);
   const [isPlaying, setIsPlaying] = useState(false);
   const [songs, setSongs] = useState<Song[]>(mockSongs);
-
   const filteredSongs = useFilterSongs(songs, searchTerm, selectedGenre);
 
-  const handlePlay = (song: Song) => {
-    setSelectedSong(song);
-    setIsPlaying(true);
-  };
+  const handlePlay = useCallback(
+    (song: Song) => {
+      if (selectedSong?.id === song.id) {
+        setIsPlaying(!isPlaying);
+      } else {
+        setSelectedSong(song);
+        setIsPlaying(true);
+      }
+    },
+    [selectedSong, isPlaying]
+  );
+
+  const handlePlayPause = useCallback(() => {
+    setIsPlaying(!isPlaying);
+  }, [isPlaying]);
+
+  const handleNext = useCallback(() => {
+    if (!selectedSong) return;
+    const currentIndex = filteredSongs.findIndex(
+      (song) => song.id === selectedSong.id
+    );
+    if (currentIndex < filteredSongs.length - 1) {
+      setSelectedSong(filteredSongs[currentIndex + 1]);
+      setIsPlaying(true);
+    }
+  }, [selectedSong, filteredSongs]);
+
+  const handlePrevious = useCallback(() => {
+    if (!selectedSong) return;
+    const currentIndex = filteredSongs.findIndex(
+      (song) => song.id === selectedSong.id
+    );
+    if (currentIndex > 0) {
+      setSelectedSong(filteredSongs[currentIndex - 1]);
+      setIsPlaying(true);
+    }
+  }, [selectedSong, filteredSongs]);
 
-  const toggleFavorite = (songId: string) => {
+  const toggleFavorite = useCallback((songId: string) => {
     setSongs((prevSongs) =>
       prevSongs.map((song) =>
         song.id === songId ? { ...song, isFavorite: !song.isFavorite } : song
       )
     );
-  };
+  }, []);
 
   return (
     <div className="w-full">
-      {filteredSongs.map((song) => (
-        <SongItem
-          key={song.id}
-          title={song.title}
-          artist={song.artist}
-          genre={song.genre}
-          duration={song.duration}
-          isFavorite={song.isFavorite}
-          isSelected={selectedSong?.id === song.id}
-          onPlay={() => handlePlay(song)}
-          onFavoriteToggle={() => toggleFavorite(song.id)}
-        />
-      ))}
+      <div className="mb-24">
+        {filteredSongs.map((song) => (
+          <SongItem
+            key={song.id}
+            id={song.id}
+            title={song.title}
+            title_short={song.title_short}
+            genre={song.genre}
+            duration={formatDuration(song.duration)}
+            md5_image={song.md5_image}
+            preview={song.preview}
+            artist={song.artist.name}
+            isFavorite={song.isFavorite}
+            isSelected={selectedSong?.id === song.id}
+            onPlay={() => handlePlay(song)}
+            onFavoriteToggle={() => toggleFavorite(song.id)}
+          />
+        ))}
+      </div>
       {selectedSong && (
         <Player
-          currentSong={selectedSong}
+          currentSong={{
+            ...selectedSong,
+            artist: selectedSong.artist.name, // Asegúrate de usar el nombre
+          }}
+          isFavorite={selectedSong.isFavorite}
           isPlaying={isPlaying}
-          onPlayPause={() => setIsPlaying(!isPlaying)}
+          onPlayPause={handlePlayPause}
+          onNext={handleNext}
+          onPrevious={handlePrevious}
+          onFavoriteToggle={() =>
+            selectedSong && toggleFavorite(selectedSong.id)
+          }
         />
       )}
     </div>

frontend/src/app/utils/formatDuration.ts

@@ -0,0 +1,6 @@
+export function formatDuration(durationInSeconds: string): string {
+    const totalSeconds = parseInt(durationInSeconds, 10);
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = totalSeconds % 60;
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+}

frontend/src/components/ui/GenroButtons.tsx

@@ -7,7 +7,7 @@ interface GenreButtonsProps {
 
 const genres = [
   "Todos",
-  "Electronica",
+  "Electrónica",
   "Pop",
   "Rock",
   "Rap",