Rockbox open source high quality audio player as a Music Player Daemon
mpris
rockbox
mpd
libadwaita
audio
rust
zig
deno
Show album footer on cover hover
Replace the Hover button with a CoverWrapper and reveal the
AlbumFooterMenu via a .album-footer-menu hover rule. Add opacity
transition and pointer-events handling, and remove the unused Hover
styled component.
+41
-47
+30
-32
webui/rockbox/src/Components/Album/Album.tsx
+30
-32
webui/rockbox/src/Components/Album/Album.tsx
···
6
6
AlbumFooterMenu,
7
7
AlbumTitle,
8
8
Artist,
9
+
CoverWrapper,
9
10
FloatingButton,
10
-
Hover,
11
11
Link,
12
12
NoAlbumCover,
13
13
Year,
···
30
30
const theme = useTheme();
31
31
return (
32
32
<div style={{ width: "100%" }}>
33
-
<div style={{ position: "relative" }}>
34
-
<Hover>
35
-
<AlbumFooterMenu>
36
-
<div
37
-
style={{
38
-
backgroundColor: theme.colors.surface,
39
-
height: 40,
40
-
width: 40,
41
-
borderRadius: 20,
42
-
display: "flex",
43
-
justifyContent: "center",
44
-
alignItems: "center",
45
-
}}
46
-
onClick={() => props.onPlay(props.album)}
47
-
>
48
-
<Play small color={theme.colors.icon} />
49
-
</div>
50
-
<ContextMenu item={props.album} />
51
-
{!props.liked && (
52
-
<FloatingButton onClick={() => props.onLike(props.album)}>
53
-
<HeartOutline color="#fff" size={20} />
54
-
</FloatingButton>
55
-
)}
56
-
{props.liked && (
57
-
<FloatingButton onClick={() => props.onUnLike(props.album)}>
58
-
<Heart color="#6F00FF" size={20} />
59
-
</FloatingButton>
60
-
)}
61
-
</AlbumFooterMenu>
62
-
</Hover>
33
+
<CoverWrapper>
34
+
<AlbumFooterMenu className="album-footer-menu">
35
+
<div
36
+
style={{
37
+
backgroundColor: theme.colors.surface,
38
+
height: 40,
39
+
width: 40,
40
+
borderRadius: 20,
41
+
display: "flex",
42
+
justifyContent: "center",
43
+
alignItems: "center",
44
+
}}
45
+
onClick={() => props.onPlay(props.album)}
46
+
>
47
+
<Play small color={theme.colors.icon} />
48
+
</div>
49
+
<ContextMenu item={props.album} />
50
+
{!props.liked && (
51
+
<FloatingButton onClick={() => props.onLike(props.album)}>
52
+
<HeartOutline color="#fff" size={20} />
53
+
</FloatingButton>
54
+
)}
55
+
{props.liked && (
56
+
<FloatingButton onClick={() => props.onUnLike(props.album)}>
57
+
<Heart color="#6F00FF" size={20} />
58
+
</FloatingButton>
59
+
)}
60
+
</AlbumFooterMenu>
63
61
<Link to={`/albums/${props.album.id}`}>
64
62
{props.album.cover && (
65
63
<AlbumCover src={props.album.cover} effect="opacity" />
66
64
)}
67
65
{!props.album.cover && <NoAlbumCover src={AlbumArt} />}
68
66
</Link>
69
-
</div>
67
+
</CoverWrapper>
70
68
<Link to={`/albums/${props.album.id}`}>
71
69
<AlbumTitle>{props.album.title}</AlbumTitle>
72
70
</Link>
+11
-15
webui/rockbox/src/Components/Album/styles.tsx
+11
-15
webui/rockbox/src/Components/Album/styles.tsx
···
40
40
color: ${(props) => props.theme.colors.text};
41
41
`;
42
42
43
+
export const CoverWrapper = styled.div`
44
+
position: relative;
45
+
&:hover .album-footer-menu {
46
+
opacity: 1;
47
+
pointer-events: auto;
48
+
}
49
+
`;
50
+
43
51
export const AlbumFooterMenu = styled.div`
44
52
position: absolute;
45
53
bottom: 0;
···
50
58
align-items: center;
51
59
justify-content: space-between;
52
60
width: calc(100% - 20px);
53
-
`;
54
-
55
-
export const Hover = styled.button`
56
-
position: absolute;
57
-
inset: 0;
58
-
color: transparent;
59
-
background-color: transparent;
60
-
border: none;
61
-
opacity: 0 !important;
62
-
cursor: pointer;
61
+
opacity: 0;
62
+
pointer-events: none;
63
+
transition: opacity 0.15s;
63
64
z-index: 1;
64
-
&:hover,
65
-
&:focus {
66
-
color: ${(props) => props.theme.colors.text};
67
-
opacity: 1 !important;
68
-
}
69
65
`;
70
66
71
67
export const FloatingButton = styled.button`