Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

updated recently played tile ui #445

Merged
merged 8 commits into from
Jul 6, 2024
Merged

updated recently played tile ui #445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3ddc59b
updated recently played tile ui
rohit-yadavv Jun 28, 2024
b2ba669
updated tile
rohit-yadavv Jun 30, 2024
1c91af7
fixxed size of tile
rohit-yadavv Jun 30, 2024
7942157
added more tiles
rohit-yadavv Jul 1, 2024
5997cfa
Merge branch 'master' of https://github.com/Satyam1923/Spring-Music-P…
rohit-yadavv Jul 2, 2024
2e40f71
Merge branch 'master' of https://github.com/Satyam1923/Spring-Music-P…
rohit-yadavv Jul 3, 2024
aa470e3
updated ui of tile and get recent played songs from firebase
rohit-yadavv Jul 3, 2024
d7af045
sync and fix onclick functionality
rohit-yadavv Jul 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/src/components/Auth/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ const dispatch=useDispatch()
<p className='text-sm text-gray-200 text-center'>- Or continue with -</p>
<div className="flex items-center justify-center ">
<button className="flex items-center bg-[#0f0f11] border border-gray-300 rounded-lg shadow-md px-6 py-2 text-sm font-medium text-gray-800 hover:bg-black " onClick={goggleLogin}>
<svg className="h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="-0.5 0 48 48" version="1.1"> <title>Google-color</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="Color-" transform="translate(-401.000000, -860.000000)"> <g id="Google" transform="translate(401.000000, 860.000000)"> <path d="M9.82727273,24 C9.82727273,22.4757333 10.0804318,21.0144 10.5322727,19.6437333 L2.62345455,13.6042667 C1.08206818,16.7338667 0.213636364,20.2602667 0.213636364,24 C0.213636364,27.7365333 1.081,31.2608 2.62025,34.3882667 L10.5247955,28.3370667 C10.0772273,26.9728 9.82727273,25.5168 9.82727273,24" id="Fill-1" fill="#FBBC05"> </path> <path d="M23.7136364,10.1333333 C27.025,10.1333333 30.0159091,11.3066667 32.3659091,13.2266667 L39.2022727,6.4 C35.0363636,2.77333333 29.6954545,0.533333333 23.7136364,0.533333333 C14.4268636,0.533333333 6.44540909,5.84426667 2.62345455,13.6042667 L10.5322727,19.6437333 C12.3545909,14.112 17.5491591,10.1333333 23.7136364,10.1333333" id="Fill-2" fill="#EB4335"> </path> <path d="M23.7136364,37.8666667 C17.5491591,37.8666667 12.3545909,33.888 10.5322727,28.3562667 L2.62345455,34.3946667 C6.44540909,42.1557333 14.4268636,47.4666667 23.7136364,47.4666667 C29.4455,47.4666667 34.9177955,45.4314667 39.0249545,41.6181333 L31.5177727,35.8144 C29.3995682,37.1488 26.7323182,37.8666667 23.7136364,37.8666667" id="Fill-3" fill="#34A853"> </path> <path d="M46.1454545,24 C46.1454545,22.6133333 45.9318182,21.12 45.6113636,19.7333333 L23.7136364,19.7333333 L23.7136364,28.8 L36.3181818,28.8 C35.6879545,31.8912 33.9724545,34.2677333 31.5177727,35.8144 L39.0249545,41.6181333 C43.3393409,37.6138667 46.1454545,31.6490667 46.1454545,24" id="Fill-4" fill="#4285F4"> </path> </g> </g> </g> </svg>
<svg className="h-6 w-6 mr-2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="-0.5 0 48 48" version="1.1"> <title>Google-color</title> <desc>Created with Sketch.</desc> <defs> </defs> <g id="Icons" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd"> <g id="Color-" transform="translate(-401.000000, -860.000000)"> <g id="Google" transform="translate(401.000000, 860.000000)"> <path d="M9.82727273,24 C9.82727273,22.4757333 10.0804318,21.0144 10.5322727,19.6437333 L2.62345455,13.6042667 C1.08206818,16.7338667 0.213636364,20.2602667 0.213636364,24 C0.213636364,27.7365333 1.081,31.2608 2.62025,34.3882667 L10.5247955,28.3370667 C10.0772273,26.9728 9.82727273,25.5168 9.82727273,24" id="Fill-1" fill="#FBBC05"> </path> <path d="M23.7136364,10.1333333 C27.025,10.1333333 30.0159091,11.3066667 32.3659091,13.2266667 L39.2022727,6.4 C35.0363636,2.77333333 29.6954545,0.533333333 23.7136364,0.533333333 C14.4268636,0.533333333 6.44540909,5.84426667 2.62345455,13.6042667 L10.5322727,19.6437333 C12.3545909,14.112 17.5491591,10.1333333 23.7136364,10.1333333" id="Fill-2" fill="#EB4335"> </path> <path d="M23.7136364,37.8666667 C17.5491591,37.8666667 12.3545909,33.888 10.5322727,28.3562667 L2.62345455,34.3946667 C6.44540909,42.1557333 14.4268636,47.4666667 23.7136364,47.4666667 C29.4455,47.4666667 34.9177955,45.4314667 39.0249545,41.6181333 L31.5177727,35.8144 C29.3995682,37.1488 26.7323182,37.8666667 23.7136364,37.8666667" id="Fill-3" fill="#34A853"> </path> <path d="M46.1454545,24 C46.1454545,22.6133333 45.9318182,21.12 45.6113636,19.7333333 L23.7136364,19.7333333 L23.7136364,28.8 L36.3181818,28.8 C35.6879545,31.8912 33.9724545,34.2677333 31.5177727,35.8144 L39.0249545,41.6181333 C43.3393409,37.6138667 46.1454545,31.6490667 46.1454545,24" id="Fill-4" fill="#4285F4"> </path> </g> </g> </g> </svg>
<span>Sign in with Google</span>
</button>
</div>
Expand Down
155 changes: 89 additions & 66 deletions frontend/src/components/Home/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,67 @@ import MusicPlayer from "../MusicPlayer";
import UserIconSection from "../UserIconSection";
import Footer from "../Footer";
import { fetchTopSongs, fetchSonsgByName, secIntoMinSec } from "../../Utils";
import { Link } from "react-router-dom";
import { db } from "../Auth/firebase";
import { doc, getDoc } from "firebase/firestore";

function Main() {
const [currentArtist, setCurrentArtist] = useState(null);
const [currentSong, setCurrentSong] = useState([]);
const [recentlyPlayedSongs, setRecentlyPlayedSongs] = useState([]);

useEffect(() => {
const fetchRecentlyPlayedSongs = async () => {
try {
let userData = localStorage.getItem("user");
const user = JSON.parse(userData);

if (user) {
const userDocRef = doc(db, "Users", user.uid);
const userDocSnapshot = await getDoc(userDocRef);

if (userDocSnapshot.exists()) {
const userData = userDocSnapshot.data();
const songIds = userData.songIds || [];

const songsPromises = songIds.map(async (songId) => {
const songRef = doc(db, "songs", songId);
const songDocSnapshot = await getDoc(songRef);

if (songDocSnapshot.exists()) {
return songDocSnapshot.data();
} else {
console.log(`Song with ID ${songId} not found`);
return null;
}
});

const songs = await Promise.all(songsPromises);
console.log("Recently played songs:", songs);
setRecentlyPlayedSongs(songs.filter((song) => song !== null));
} else {
console.log("User document does not exist");
}
} else {
console.log("User details not available");
}
} catch (error) {
console.error("Error fetching recently played songs:", error);
}
};

fetchRecentlyPlayedSongs();
}, []);

return (
<div className="flex flex-col h-full gap-4 w-full">
{/* Top user section */}
<UserIconSection />
{/* Middle */}
<div className="w-full mb-6 h-[25%]">
<RecentlyPlayed />
<RecentlyPlayed
setCurrentSong={setCurrentSong}
recentlyPlayedSongs={recentlyPlayedSongs}
/>
</div>

{/* Bottom */}
Expand Down Expand Up @@ -46,76 +95,50 @@ function Main() {
);
}

function RecentlyPlayedElement({ name, image }) {
function RecentlyPlayed({ setCurrentSong, recentlyPlayedSongs }) {
return (
<div className="flex gap-4 flex-1 items-center justify-start bg-[#18181D] rounded-md min-w-[150px] max-h-[70px] hover:cursor-pointer">
<img
src={image}
className="max-h-full aspect-square rounded-md object-fill "
/>
<h1 className="text-white font-medium">{name}</h1>
<div className="w-full h-full rounded-lg flex flex-col gap-2">
<h1 className="text-2xl w-[40%] font-medium text-left ml-1 text-white p-1">
Recently Played
</h1>
<div className="flex flex-col gap-2 p-1 h-[80%] justify-between">
{recentlyPlayedSongs.length > 0 ? (
<div className="flex gap-4 flex-wrap">
{recentlyPlayedSongs.map((song, index) => (
<RecentlyPlayedElement
song={song}
key={index}
name={song.name}
image={song.img}
setCurrentSong={setCurrentSong}
singer={song.artist}
/>
))}
</div>
) : (
<p className="text-white">No songs played recently.</p>
)}
</div>
</div>
);
}

function RecentlyPlayed() {
function RecentlyPlayedElement({ setCurrentSong, song, name, image, singer }) {
console.log(song);
console.log(setCurrentSong);
return (
<div className=" w-full h-full rounded-lg flex flex-col gap-2">
<h1 className="text-2xl w-[40%] font-medium text-left ml-1 text-white p-1">
Recently Played
</h1>
<div className="flex flex-col gap-2 p-1 h-[80%] justify-between">
<div className="flex justify-between gap-4 flex-wrap">
<RecentlyPlayedElement
name="Deja Vu"
image={
"https://i.scdn.co/image/ab67616d00001e02a91c10fe9472d9bd89802e5a"
}
/>
<RecentlyPlayedElement
name="Deja Vu"
image={
"https://images.unsplash.com/photo-1523169054-66018b90af5e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
}
/>
<RecentlyPlayedElement
name="Deja Vu"
image={
"https://i.scdn.co/image/ab67616d0000b273ba5db46f4b838ef6027e6f96"
}
/>
<RecentlyPlayedElement
name="Deja Vu"
image={
"https://images.unsplash.com/photo-1523169054-66018b90af5e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
}
/>
</div>
<div className="flex justify-between gap-4 flex-wrap">
<RecentlyPlayedElement
name="Deja Vu"
image={
"https://images.unsplash.com/photo-1523169054-66018b90af5e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
}
/>
<RecentlyPlayedElement
name="Deja Vu"
image={
"https://i.scdn.co/image/ab67616d0000b2736ca5c90113b30c3c43ffb8f4"
}
/>
<RecentlyPlayedElement
name="Deja Vu"
image={
"https://images.unsplash.com/photo-1523169054-66018b90af5e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
}
/>
<RecentlyPlayedElement
name="Deja Vu"
image={
"https://images.unsplash.com/photo-1523169054-66018b90af5e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
}
/>
<div className="bg-[#18181D] p-4 rounded-[20px]">
<div className="flex items-center gap-5 flex-wrap ">
<img
onClick={() => setCurrentSong(song)}
src={image}
alt="LogoMusicImage"
className="w-20 h-20 object-cover rounded-[10px] cursor-pointer"
/>

<div>
<h1>{name}</h1>
<p className="opacity-65">{singer}</p>
</div>
</div>
</div>
Expand Down
Loading