Skip to content

Commit

Permalink
add search. style Song
Browse files Browse the repository at this point in the history
  • Loading branch information
RafaelCaso committed Sep 30, 2024
1 parent b7da602 commit a5a95d2
Show file tree
Hide file tree
Showing 9 changed files with 105 additions and 134 deletions.
6 changes: 3 additions & 3 deletions packages/hardhat/contracts/SoundChain.sol
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import "@openzeppelin/contracts/access/Ownable.sol";

contract SoundChain is ERC721, ERC721URIStorage, Ownable {

event SongUploaded(uint256 indexed songId, string artist);
event SongUploaded(uint256 indexed songId, string artist, string genre, string title);
event PatronizeMusician(address patron, address artist, uint256 value, uint256 indexed songId);

mapping(address => string) public artistNames;
Expand Down Expand Up @@ -51,14 +51,14 @@ contract SoundChain is ERC721, ERC721URIStorage, Ownable {
// return "ipfs://";
}

function mintItem(address to, string memory uri) public payable returns (uint256) {
function mintItem(address to, string memory uri, string memory genre, string memory title) public payable returns (uint256) {
nextTokenId += 1;
uint256 tokenId = nextTokenId;

_safeMint(to, tokenId);
_setTokenURI(tokenId, uri);
artistSongs[to].push(tokenId);
emit SongUploaded(tokenId, artistNames[to]);
emit SongUploaded(tokenId, artistNames[to], genre, title);
return tokenId;
}

Expand Down
4 changes: 3 additions & 1 deletion packages/nextjs/app/artist-portfolio/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ const Portfolio: NextPage = () => {
}
return (
<>
<ArtistPortfolio artistAddress={artistAddress} />
<div className="min-h-screen flex items-center justify-center bg-gray-900 text-white">
<ArtistPortfolio artistAddress={artistAddress} />
</div>
</>
);
};
Expand Down
117 changes: 0 additions & 117 deletions packages/nextjs/app/listen/_components/OldPageReference.tsx

This file was deleted.

4 changes: 2 additions & 2 deletions packages/nextjs/app/listen/_components/Song.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -133,11 +133,11 @@ const Song: React.FC<SongProps> = ({ songCID, metadataCID, songId, onPlay, songI
};

return (
<div className="flex items-center bg-gray-800 text-white p-4 rounded-lg shadow-lg my-4 w-2/3 mx-auto transition-transform duration-300 transform">
<div className="flex items-center bg-gray-800 text-white p-4 rounded-lg shadow-lg my-4 transition-transform duration-300 transform w-full sm:w-[400px] md:w-[1000px]">
{/* Play/Pause Button */}
<button
onClick={togglePlay}
className="w-10 h-10 bg-gray-600 rounded-full flex items-center justify-center focus:outline-none mr-4 hover:scale-125 hover:bg-gray-700"
className="w-12 h-12 bg-gray-600 rounded-full flex items-center justify-center focus:outline-none mr-4 hover:scale-125 hover:bg-gray-700"
>
{isPlaying ? <span className="material-icons">pause</span> : <span className="material-icons">play</span>}
</button>
Expand Down
74 changes: 68 additions & 6 deletions packages/nextjs/app/listen/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,20 @@ import { useEffect, useState } from "react";
import SongList from "../mymusic/_components/SongList";
import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";

interface Song {
songId: number;
artist: string;
title: string;
genre: string;
}

const Listen = () => {
const [songs, setSongs] = useState<number[]>([]);
const [songs, setSongs] = useState<Set<number>>(new Set()); // Keep songIdSet as a Set
const [songDetails, setSongDetails] = useState<Song[]>([]); // Store detailed song info
const [filteredSongs, setFilteredSongs] = useState<Song[]>([]);
const [searchQuery, setSearchQuery] = useState<string>(""); // Search input
const [currentPlayingId, setCurrentPlayingId] = useState<number | null>(null);

const { data: uploadedSongEvents, isLoading: uploadedSongsIsLoading } = useScaffoldEventHistory({
contractName: "SoundChain",
eventName: "SongUploaded",
Expand All @@ -17,15 +28,29 @@ const Listen = () => {
useEffect(() => {
if (uploadedSongEvents && !uploadedSongsIsLoading) {
const songIdSet = new Set<number>();
const songDetailsArray: Song[] = [];

uploadedSongEvents.forEach(e => {
if (e.args.songId) {
songIdSet.add(Number(e.args.songId));
const songId = Number(e.args.songId);
songIdSet.add(songId);

// Assuming e.args has artistName, songTitle, genre
if (e.args.artist && e.args.title && e.args.genre)
songDetailsArray.push({
songId,
artist: e.args.artist,
title: e.args.title,
genre: e.args.genre,
});
}
});

setSongs(Array.from(songIdSet));
setSongs(songIdSet);
setSongDetails(songDetailsArray);
setFilteredSongs(songDetailsArray); // Initially show all songs
}
}, [uploadedSongEvents]);
}, [uploadedSongEvents, uploadedSongsIsLoading]);

const handlePlay = (songId: number) => {
if (currentPlayingId !== null && currentPlayingId !== songId) {
Expand All @@ -34,9 +59,46 @@ const Listen = () => {
setCurrentPlayingId(songId); // Set the new song to play
};

const handleSearchClick = () => {
if (!searchQuery) {
setFilteredSongs(songDetails); // Show all songs if no search query
} else {
const lowercasedSearch = searchQuery.toLowerCase();
const filtered = songDetails.filter(
song =>
song.title.toLowerCase().includes(lowercasedSearch) ||
song.artist.toLowerCase().includes(lowercasedSearch) ||
song.genre.toLowerCase().includes(lowercasedSearch),
);
setFilteredSongs(filtered);
}
};

return (
<div className="p-4 bg-gray-900 min-h-screen">
<SongList songs={songs} onPlay={handlePlay} currentPlayingId={currentPlayingId} />
<div className="p-4 bg-gray-900 min-h-screen relative pl-24">
{/* Search widget in the top right corner */}
<div className="absolute top-4 right-4 flex items-center space-x-2">
<input
type="text"
value={searchQuery}
onChange={e => setSearchQuery(e.target.value)} // Only set the input value here
placeholder="Search..."
className="p-2 pl-4 w-64 text-black rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<button
onClick={handleSearchClick}
className="p-2 px-4 bg-blue-500 text-white rounded-full focus:outline-none hover:bg-blue-600 transition"
>
Search
</button>
</div>

{/* Song List */}
<SongList
songs={filteredSongs.map(song => song.songId)}
onPlay={handlePlay}
currentPlayingId={currentPlayingId}
/>
</div>
);
};
Expand Down
6 changes: 3 additions & 3 deletions packages/nextjs/app/mymusic/_components/SongList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ const SongList: React.FC<SongListProps> = ({ songs, onPlay, currentPlayingId })
}, [songs]);

return (
<div>
<div className="w-full flex flex-col items-start">
{songs.length > 0 ? (
songs.map(songId => {
const metadata = songMetadata[songId];
Expand All @@ -77,8 +77,8 @@ const SongList: React.FC<SongListProps> = ({ songs, onPlay, currentPlayingId })
<Song
songCID={metadata.fileUrl}
metadataCID={JSON.stringify(metadata)}
songId={songId} // Pass songId to Song component
onPlay={onPlay} // Pass onPlay function
songId={songId}
onPlay={onPlay}
songIsPlaying={currentPlayingId === songId} // Determine if the current song is playing
/>
) : (
Expand Down
4 changes: 3 additions & 1 deletion packages/nextjs/app/mymusic/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@ const MyMusic: NextPage = () => {
}
return (
<>
<ArtistPortfolio artistAddress={connectedAddress} />
<div className="min-h-screen flex items-center justify-center bg-gray-900 text-white">
<ArtistPortfolio artistAddress={connectedAddress} />
</div>
</>
);
};
Expand Down
2 changes: 1 addition & 1 deletion packages/nextjs/app/upload/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ const UploadMusic: React.FC = () => {

await writeSoundChainAsync({
functionName: "mintItem",
args: [connectedAddress, metadataUrl],
args: [connectedAddress, metadataUrl, metadata.genre, metadata.title],
});

notification.success("File uploaded!");
Expand Down
22 changes: 22 additions & 0 deletions packages/nextjs/contracts/deployedContracts.ts
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,18 @@ const deployedContracts = {
name: "artist",
type: "string",
},
{
indexed: false,
internalType: "string",
name: "genre",
type: "string",
},
{
indexed: false,
internalType: "string",
name: "title",
type: "string",
},
],
name: "SongUploaded",
type: "event",
Expand Down Expand Up @@ -400,6 +412,16 @@ const deployedContracts = {
name: "uri",
type: "string",
},
{
internalType: "string",
name: "genre",
type: "string",
},
{
internalType: "string",
name: "title",
type: "string",
},
],
name: "mintItem",
outputs: [
Expand Down

0 comments on commit a5a95d2

Please sign in to comment.