Merge pull request #58 from santimb96/feature/new-card-design

close button added to media player
santimb96 · May 27, 2022 · 299b0a3 · 299b0a3 · vercel · May 27, 2022
2 parents 1908894 + df6581d
commit 299b0a3
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git 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
@@ -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
@@ -353,6 +353,7 @@ const PublicWrapper = () => {
           goToPrevious={goToPrevious}
           isFavourite={favouriteList?.find(fav => fav?.songId === selectedSong?._id)}
           onClickFavourite={onClickFavourite}
+          setSelectedSong={setSelectedSong}
         />
       ) : (
         <Footer />