Rockbox open source high quality audio player as a Music Player Daemon
mpris rockbox mpd libadwaita audio rust zig deno
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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`