From df6581db2c2f9f308a0a4f493fa75dc37b5d71b8 Mon Sep 17 00:00:00 2001
From: Santiago <Martínez Bota>
Date: Fri, 27 May 2022 10:51:14 +0200
Subject: [PATCH] close button added to media player

---
 .../components/MediaPlayer/MediaPlayer.jsx    |  4 +++
 .../src/components/MediaPlayer/index.scss     | 26 +++++++++++++++++++
 .../src/pages/PublicWrapper/PublicWrapper.jsx |  1 +
 3 files changed, 31 insertions(+)

diff --git a/spoticlone/src/components/MediaPlayer/MediaPlayer.jsx b/spoticlone/src/components/MediaPlayer/MediaPlayer.jsx
index fbcd070..01aaf48 100644
--- a/spoticlone/src/components/MediaPlayer/MediaPlayer.jsx
+++ b/spoticlone/src/components/MediaPlayer/MediaPlayer.jsx
@@ -10,6 +10,7 @@ const MediaPlayer = ({
   goToPrevious,
   isFavourite,
   onClickFavourite,
+  setSelectedSong
 }) => {
   const { user } = useContext(AuthContext);
   console.log(user);
@@ -214,6 +215,9 @@ const MediaPlayer = ({
               : "00:00"}
           </p>
         </div>
+        <div className="close-button-container">
+          <i onClick={() => setSelectedSong(null)} className="fa-solid fa-xmark"></i>
+        </div>
       </div>
     </div>
   );
diff --git a/spoticlone/src/components/MediaPlayer/index.scss b/spoticlone/src/components/MediaPlayer/index.scss
index 21c9681..86862e0 100644
--- a/spoticlone/src/components/MediaPlayer/index.scss
+++ b/spoticlone/src/components/MediaPlayer/index.scss
@@ -11,6 +11,22 @@
     //position: sticky;
     background-color: $mediaBack;
     border-radius: 15px;
+    .close-button-container{
+      position: absolute;
+      top:2%;
+      left: 90%;
+      width: 5%;
+      height: 30%;
+      background: transparent;
+      display: flex;
+      justify-content: end;
+      align-items: flex-start;
+      i{
+        font-size: 12px;
+        padding: 5px;
+        color: white;
+      }
+    }
   }
   .control-buttons {
     display: flex;
@@ -220,6 +236,16 @@
     .player-container {
       width: 100vw;
       border-radius: 0;
+      .close-button-container{
+        left: 81%;
+        i{
+          font-size: 14px;
+          transition: all 0.3s ease;
+          &:hover{
+            color: $tablePresentationColor;
+          }
+        }
+      }
     }
     .fav-icon-container{
       position: absolute;
diff --git a/spoticlone/src/pages/PublicWrapper/PublicWrapper.jsx b/spoticlone/src/pages/PublicWrapper/PublicWrapper.jsx
index 2b720bf..43d3a19 100644
--- a/spoticlone/src/pages/PublicWrapper/PublicWrapper.jsx
+++ b/spoticlone/src/pages/PublicWrapper/PublicWrapper.jsx
@@ -353,6 +353,7 @@ const PublicWrapper = () => {
           goToPrevious={goToPrevious}
           isFavourite={favouriteList?.find(fav => fav?.songId === selectedSong?._id)}
           onClickFavourite={onClickFavourite}
+          setSelectedSong={setSelectedSong}
         />
       ) : (
         <Footer />