🚸 Redisign playlistItem actions & hover effect

packages/app/src/pages/music/components/feed/index.jsx

@@ -1,5 +1,6 @@
 import React from "react"
 import * as antd from "antd"
+import classnames from "classnames"
 import { ImageViewer, UserPreview } from "components"
 import { Icons } from "components/Icons"
 import { Translation } from "react-i18next"
@@ -101,6 +102,7 @@ const PlaylistsList = (props) => {
 }
 
 const PlaylistItem = (props) => {
+    const [coverHover, setCoverHover] = React.useState(false)
     const { playlist } = props
 
     const onClick = () => {
@@ -114,34 +116,36 @@ const PlaylistItem = (props) => {
     const onClickPlay = (e) => {
         e.stopPropagation()
 
-        console.log(playlist.list)
-
         app.cores.player.startPlaylist(playlist.list)
     }
 
     return <div
         id={playlist._id}
         key={props.key}
-        className="playlistItem"
-        onClick={onClick}
+        className={classnames(
+            "playlistItem",
+            {
+                "cover-hovering": coverHover
+            }
+        )}
     >
-        <div className="playlistItem_cover">
-            <ImageViewer src={playlist.thumbnail ?? "/assets/no_song.png"} />
+        <div
+            className="playlistItem_cover"
+            onMouseEnter={() => setCoverHover(true)}
+            onMouseLeave={() => setCoverHover(false)}
+            onClick={onClickPlay}
+        >
+            <ImageViewer
+                src={playlist.thumbnail ?? "/assets/no_song.png"}
+            />
         </div>
+
         <div className="playlistItem_info">
-            <div className="playlistItem_info_title">
+            <div className="playlistItem_info_title" onClick={onClick}>
                 <h1>{playlist.title}</h1>
             </div>
             <UserPreview user={playlist.user} />
         </div>
-        <div className="playlistItem_actions">
-            <antd.Button
-                icon={<Icons.Play />}
-                type="primary"
-                shape="circle"
-                onClick={onClickPlay}
-            />
-        </div>
     </div>
 }
 

packages/app/src/pages/music/components/feed/index.less

@@ -77,6 +77,10 @@
     min-width: 400px;
     max-width: 800px;
 
+    //overflow: hidden;
+
+    box-sizing: border-box !important;
+
     border-radius: 12px;
 
     transition: all 0.2s ease-in-out;
@@ -84,7 +88,7 @@
     background-color: var(--background-color-accent);
     border-radius: 8px;
 
-    &:hover {
+    &.cover-hovering {
         .playlistItem_cover {
             transform: scale(1.1);
         }
@@ -129,15 +133,17 @@
         flex-direction: column;
 
         width: 100%;
-        max-width: 265px;
 
         padding: 10px;
 
+        max-width: calc(100% - 10vh);
+
         transition: all 0.2s ease-in-out;
 
         .playlistItem_info_title {
             font-size: 1rem;
             font-weight: 600;
+
             color: var(--background-color-contrast);
             font-family: "Space Grotesk", sans-serif;
 
@@ -148,8 +154,11 @@
                 overflow: hidden;
 
                 text-overflow: ellipsis;
-                white-space: nowrap;
+                //white-space: nowrap;
                 margin: 0;
+
+                //calculate the max height of the title using 10vh and 30px for the userPreview and padding
+                height: 5vh;
             }
         }