A decentralized music tracking and discovery platform built on AT Protocol 🎵
listenbrainz spotify atproto lastfm musicbrainz scrobbling

feat: add InteractionBar component and integrate with SongCover for like functionality

Changed files
+27 -5
apps
web
src
components
SongCover
pages
home
feed
+13
apps/web/src/components/SongCover/InteractionBar/InteractionBar.tsx
··· 1 + import HeartOutline from "../../Icons/HeartOutline"; 2 + 3 + function InteractionBar() { 4 + return ( 5 + <div className="absolute bottom-[-1px] left-0 h-[100px] w-full bg-[linear-gradient(rgba(22,24,35,0)_2.92%,rgba(22,24,35,0.5)_98.99%)] flex justify-start items-end p-[10px] rounded-b-[8px]"> 6 + <div className="h-[40px] w-full flex items-center"> 7 + <HeartOutline color="#fff" /> 8 + </div> 9 + </div> 10 + ); 11 + } 12 + 13 + export default InteractionBar;
+3
apps/web/src/components/SongCover/InteractionBar/index.tsx
··· 1 + import InteractionBar from "./InteractionBar"; 2 + 3 + export default InteractionBar;
+9 -4
apps/web/src/components/SongCover/SongCover.tsx
··· 1 1 import { css } from "@emotion/react"; 2 2 import styled from "@emotion/styled"; 3 + import InteractionBar from "./InteractionBar"; 3 4 4 5 const Cover = styled.img<{ size?: number }>` 5 6 border-radius: 8px; 6 7 height: 240px; 7 8 width: 240px; 8 - margin-bottom: 10px; 9 + margin-bottom: -5px; 9 10 ${(props) => 10 11 props.size && 11 12 css` ··· 53 54 title?: string; 54 55 artist?: string; 55 56 size?: number; 57 + withLikeButton?: boolean; 56 58 }; 57 59 58 60 function SongCover(props: SongCoverProps) { 59 - const { title, artist, cover, size } = props; 61 + const { title, artist, cover, size, withLikeButton } = props; 60 62 return ( 61 63 <CoverWrapper> 62 - <Cover src={cover} size={size} /> 63 - <div className="mb-[13px]"> 64 + <div className={`relative h-[100%] w-[92%]`}> 65 + {withLikeButton && <InteractionBar />} 66 + <Cover src={cover} size={size} /> 67 + </div> 68 + <div className="mb-[13px] mt-[10px]"> 64 69 <SongTitle className="!text-[var(--color-text-primary)]"> 65 70 {title} 66 71 </SongTitle>
+2 -1
apps/web/src/pages/home/feed/Feed.tsx
··· 76 76 } 77 77 console.log(">> WebSocket connection closed"); 78 78 }; 79 - }, [queryClient]); 79 + }, [queryClient, feedUri]); 80 80 81 81 return ( 82 82 <Container> ··· 129 129 cover={song.cover} 130 130 artist={song.artist} 131 131 title={song.title} 132 + withLikeButton 132 133 /> 133 134 </Link> 134 135 <div className="flex">