Página explorar

[Jhonatanjacome07]

Documentación de componentes de la página Explore

Commit: Add Explore page bfe7fbb

[Jhonatanjacome07]

Descripción general del componente

Componente Player

Reproductor de música con posición fija en la parte inferior de la pantalla. Características:

• Muestra información de la canción actual (título, artista)
• Controles de reproducción/pausa con botones adicionales de control
• Barra de progreso con visualización del tiempo
• Botón para marcar canciones como favoritas
• Diseño adaptable que ajusta su posición cuando el pie de página es visible
• Visualización de portada del álbum

[Jhonatanjacome07]

Descripción general de componentes SongItem, SongList

Componente SongItem

Elemento individual de la lista de canciones que muestra:

• Miniatura/portada del álbum
• Botón para marcar como favorito
• Título de la canción
• Clasificación por género
• Visualización de duración
• Estados interactivos al pasar el mouse y selección
• Funcionalidad de reproducción al hacer clic

Componente SongList

Componente contenedor que gestiona la colección de canciones:

• Renderiza la lista filtrada de componentes SongItem
• Maneja la selección y reproducción de canciones
• Gestiona el estado de favoritos de las canciones
• Se integra con el componente Player para la canción seleccionada
• Implementa lógica de búsqueda y filtrado por género

Notas técnicas importantes:

• Los componentes utilizan el hook personalizado useFilterSongs para manejar la lógica de filtrado
• Implementación de memorización con useMemo para optimizar el rendimiento del filtrado
• Sistema de tipos TypeScript para el manejo seguro de datos de canciones
• "Aun esta en prueba" Manejo de eventos con propagación controlada para evitar conflictos entre favoritos y reproducción

[Jhonatanjacome07]

Descripción general de los componentes GenreButtons, SearchBar

Componente GenreButtons

Componente de navegación para filtrado por géneros musicales:

• Muestra categorías predefinidas de géneros
• Retroalimentación visual del género seleccionado
• Diseño adaptable de botones
• Estado de selección conmutable
• Diseño optimizado para dispositivos móviles

Componente SearchBar

Componente de búsqueda que incluye:

• Funcionalidad de búsqueda en tiempo real
• Integración de icono de búsqueda
• Campo de entrada estilizado con estados de foco
• Actualizaciones de búsqueda optimizadas
• Diseño responsive

[Jhonatanjacome07]

commit Refactored SongItem layout for responsive design ID del Commit: 5929e9a

Se actualizó el componente SongItem para mejorar el diseño y hacerlo más responsivo.
El nuevo diseño reemplaza la estructura de flexbox fija por una disposición en cuadrícula, mejora el espaciado y ajusta la visibilidad del texto en pantallas más pequeñas. Estos cambios tienen como objetivo proporcionar una mejor experiencia de usuario en diferentes dispositivos.

[Jhonatanjacome07]

Actualización de componentes

Commit: Update all explore #27 ID del Commit: d0adcb5

• Se actualizó el archivo Song.ts para que reciba datos similares a los de la API.
• Los datos hardcodeados se han actualizado de acuerdo con la estructura y formato de Song.ts, alineando los valores con la estructura de datos que se espera recibir de la API.
• Se actualizó el componente SongItem para que maneje los datos de las canciones de manera más eficiente, permitiendo una visualización más flexible y sencilla dentro del componente SongList.
• Se agregó una nueva carpeta utils para contener la función formatDuration, la cual formatea la duración de las canciones de segundos a mm:ss de manera más legible.
• Se actualizó el componente Player para utilizar la función formatDuration y mostrar correctamente el tiempo en la barra de progreso del reproductor.

[Jhonatanjacome07]

Intercalar datos de la API y Data mockSongs, implementar filtrado por género y mejorar manejo de imágenes en componente Player

Commit: Intercalate API and mock data, implement genre filtering, and improve image handling in Player component #27 ID del Commit: 112c460

Tareas realizadas

Conectar a la API utilizando fetch

Descripción:
Se conectó a la API de canciones utilizando fetch para obtener los datos de manera asíncrona. Esto permitió listar y buscar canciones desde la API de forma eficiente.

Integrar datos de canciones desde la API y datos mock

Descripción:
Se integraron los datos de canciones obtenidos desde la API con los datos mockSongs. Se implementó una mezcla intercalada que limita la lista a un máximo de 15 canciones, manteniendo la relevancia de los resultados.

Corregir el filtro de canciones por género y término de búsqueda

Descripción:
Se corrigió el filtro de canciones para que funcione de manera consistente al seleccionar un género o buscar por título o artista. Esto garantiza que la lista de canciones sea precisa según los criterios del usuario.

[Jhonatanjacome07]

Mejora de la Lista de Canciones, Búsqueda y Filtrado por Género

Commit: Fix buttons for genre filtering, update song search (#27) ID del Commit: 8edc67b

Descripción:

Se han implementado las siguientes características y correcciones para mejorar la funcionalidad de la lista de canciones, la búsqueda y el filtrado por género:

Integración de la Lista de Canciones con la API

• Se creó una función de obtención (fetchSongsList) para recuperar la lista de canciones desde el endpoint de la API
• Las canciones se muestran dinámicamente en el componente SongList, incluyendo detalles como título, artista, duración.

Corrección en los Botones de Filtrado por Género

• Se corrigió un problema con los botones de filtrado por género para garantizar que las canciones se filtren correctamente según el género seleccionado.

Funcionalidad de Búsqueda en SongList

• Se corrigió la funcionalidad para buscar canciones dentro de la API.
• El campo de búsqueda filtra dinámicamente la lista de canciones en función del término de búsqueda.

[Jhonatanjacome07]

Actualizar el filtrado por género y agregar botón de cerrar en el reproductor

Commit: Update buttons genre and add X in player ID del Commit: 804c2ec

Descripción:
Corrección de filtrado por géneros:

• Se corrigió el problema al filtrar las canciones por los géneros K-Pop y Pop.

Nuevas características:

• Se añadieron nuevos botones para más géneros musicales.
• Se agregó un botón para cerrar el reproductor de música.