Feat: Description

Backend API/main.py

@@ -132,7 +132,7 @@ def get_playlist(nombre: str) -> Response:
 
 
 @app.post("/playlists/")
-def post_playlist(nombre: str, foto: str, nombres_canciones: list) -> Response:
+def post_playlist(nombre: str, foto: str,description: str,nombres_canciones: list,) -> Response:
     """ Registra la playlist con los parámetros "nombre" y "artista"
 
     Parameters
@@ -151,7 +151,7 @@ def post_playlist(nombre: str, foto: str, nombres_canciones: list) -> Response:
         Bad Request 400: Parámetros introducidos no són válidos o vacíos
     """
 
-    result = playlist_service.create_playlist(nombre, foto, nombres_canciones)
+    result = playlist_service.create_playlist(nombre, foto,description, nombres_canciones)
     return Response(None, 201)
 
 

Backend API/model/DTO/PlaylistDTO.py

@@ -8,6 +8,7 @@ class PlaylistDTO:
 
     name: str
     photo: str
+    description: str
     song_names: list
 
     def add_songs(self,song_names: str) -> None:

Backend API/services/dto_service.py

@@ -64,4 +64,4 @@ def get_playlist(name: str) -> PlaylistDTO:
         raise HTTPException(
             status_code=404, detail="La playlist con ese nombre no existe")
 
-    return PlaylistDTO(name=playlist_data["name"], photo=playlist_data["photo"], song_names=playlist_data["song_names"])
+    return PlaylistDTO(name=playlist_data["name"], photo=playlist_data["photo"], song_names=playlist_data["song_names"],description=playlist_data["description"])

Backend API/services/playlist_service.py

@@ -47,14 +47,15 @@ def get_playlist(name: str) -> Playlist:
     return playlist
 
 
-def create_playlist(name: str, photo: str, song_names: list) -> None:
+def create_playlist(name: str, photo: str,description: str, song_names: list ) -> None:
     """ Create a playlist with name, url of thumbnail and list of song names
 
     Parameters
     ----------
         name (str): Playlists's name
         photo (str): Url of playlist thumbnail
         song_names (list<str>): List of song names of the playlist
+        description (str): Playlists's description
 
     Raises
     -------
@@ -74,19 +75,20 @@ def create_playlist(name: str, photo: str, song_names: list) -> None:
         raise HTTPException(status_code=400, detail="La playlist ya existe")
 
     result = playlistCollection.insert_one(
-        {'name': name, 'photo': photo if 'http' in photo else '', 'song_names': song_names})
+        {'name': name, 'photo': photo if 'http' in photo else '', 'description': description,'song_names': song_names})
 
     return True if result.acknowledged else False
 
 
-def update_playlist(name: str, photo: str, song_names: list) -> None:
+def update_playlist(name: str, photo: str, song_names: list, description: str) -> None:
     """ Updates a playlist with name, url of thumbnail and list of song names [ duplicates wont be added ]
 
     Parameters
     ----------
         name (str): Playlists's name
         photo (str): Url of playlist thumbnail
         song_names (list<str>): List of song names of the playlist
+        description (str): Playlists's description
 
     Raises
     -------

Electron/src/componentes/Playlist/Playlist.tsx

@@ -23,8 +23,10 @@ export default function Playlist(props: PropsPlaylist) {
 
   const [thumbnail, setThumbnail] = useState<string>('');
   const [numberSongs, setNumberSongs] = useState<number>(0);
+  const [description, setDescription] = useState<string>('');
   const [songs, setSongs] = useState<PropsSongs[]>();
 
+
   let getTotalDurationPlaylist = () => {
     let totalDuration = 0;
 
@@ -40,6 +42,7 @@ export default function Playlist(props: PropsPlaylist) {
     fetch(encodeURI(Global.backendBaseUrl + 'playlists/dto/' + playlistName))
       .then((res) => res.json())
       .then(async (res) => {
+        setDescription(res['description'])
         setThumbnail(res['photo'] === '' ? defaultThumbnailPlaylist : res['photo']);
         if (res['song_names']) {
           setNumberSongs(res['song_names'].length);
@@ -110,6 +113,9 @@ export default function Playlist(props: PropsPlaylist) {
     fac.destroy();
   }, [thumbnail]);
 
+
+  /*  */
+
   return (
     <div
       className={`d-flex container-fluid flex-column ${styles.wrapperPlaylist}`}
@@ -128,6 +134,7 @@ export default function Playlist(props: PropsPlaylist) {
           >
             <p>Álbum</p>
             <h1>{playlistName}</h1>
+            <p className={`${styles.descriptionText}`}>{description}</p>
             <div className={`d-flex flex-row`}>
 
               <p>{numberSongs} canciones</p>
@@ -139,10 +146,25 @@ export default function Playlist(props: PropsPlaylist) {
         </div>
 
         <div className={` ${styles.nonBlurred} ${styles.subhHeaderPlaylist}`}>
+          <button className={`${styles.hoverablePlayButton}`}>
+            <i className="fa-solid fa-circle-play" style={{ color: 'var(--primary-green)',fontSize:'3rem' }}></i>
+          </button>
+          <button className={`${styles.hoverablePlayButton}`}>
+            <i className="fa-solid fa-circle-pause" style={{ color: 'var(--primary-green)',fontSize:'3rem' }}></i>
+          </button>
+          <button className={`${styles.hoverableItemubheader}`}>
+            <i className="fa-regular fa-heart" style={{ color: 'var(--secondary-white)',fontSize:'1.75rem' }}></i>
+          </button>
           <button>
+            <i className="fa-solid fa-heart" style={{ color: 'var(--primary-green)',fontSize:'1.75rem' }}></i>
+          </button>
+          <button className={`${styles.hoverableItemubheader}`}>
+            <i className="fa-regular fa-circle-down" style={{ color: 'var(--secondary-white)',fontSize:'1.75rem' }}></i>
+          </button>
+          <button className={`${styles.hoverableItemubheader}`}>
             <i
               className="fa-solid fa-ellipsis"
-              style={{ color: '#ffffff' }}
+              style={{ color: 'var(--secondary-white)' }}
             ></i>
           </button>
         </div>

Electron/src/componentes/Playlist/playlist.module.css

@@ -107,9 +107,12 @@
  */
 }
 
+.descriptionText{
+  font-size: 0.785rem;
+  color: var( --secondary-white);
+}
 .headerText div p {
   /* Number of songs <p> */
-
   font-size: 0.85rem;
 }
 
@@ -119,17 +122,15 @@
   padding: 2.5%;
   background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
   background: linear-gradient(rgba(0, 0, 0, .5), transparent 0 100%);
+  display: flex;
+  align-content: center;
 }
 
-.subhHeaderPlaylist button {
+.subhHeaderPlaylist button{
 
   border: none;
   background-color: transparent;
-}
-
-.subhHeaderPlaylist button:hover i {
-
-  color: var(--primary-white)
+  margin-right: 2%;
 }
 
 .subhHeaderPlaylist button i {
@@ -138,6 +139,19 @@
   color: var(--secondary-white);
 }
 
+.subhHeaderPlaylist .hoverableItemubheader:hover > i{
+
+  color: var(--pure-white) !important;
+}
+
+.subhHeaderPlaylist .hoverablePlayButton:hover > i{
+
+  transform: scale(1.02);
+
+}
+
+
+
 
 
 /** SONG TABLE */