Skip to content

Commit

Permalink
Redesigning the Player UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nupoor10
Nupoor10 committed Dec 18, 2023
1 parent ed8f385 commit 600b2e6
Show file tree
Hide file tree
Showing 11 changed files with 199 additions and 168 deletions.
225 changes: 57 additions & 168 deletions src/Components/Player.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,14 @@ import "../App.css";
import Background from "/Background.png";
import Navbar from "./Navbar";
import Footer from "./Footer";
import Search from '../assets/search.svg';
import HeartFill from '../assets/heart-fill.svg';
import Pause from '../assets/pause.svg';
import Repeat from '../assets/repeat.svg';
import Shuffle from '../assets/shuffle.svg';
import Previous from '../assets/previous.svg';
import Next from '../assets/next.svg';
import FullScreen from '../assets/full-screen.svg'

export default function Player({ accessToken }) {
const [searchInput, setSearchInput] = useState("");
Expand Down Expand Up @@ -69,184 +77,65 @@ export default function Player({ accessToken }) {
style={{ backgroundImage: `url(${Background})` }}
>
<Navbar />
<div className="absolute inset-0 mt-32">
<div className="mx-auto w-[50rem] shadow-lg">
<div className="flex items-center w-full h-12 rounded-lg focus-within:shadow-lg">
<div className="grid place-items-center h-full w-12 text-gray-300 bg-white ">
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg>
</div>

<input
className="peer h-full w-full outline-none text-sm text-gray-700 pr-2 rounded-lg"
type="text"
id="search"
placeholder="Search your favourite music..."
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
/>
<button
className="mx-4 bg-white rounded-lg py-2 px-6"
onClick={search}
>
Search
</button>
</div>
<div className="flex flex-col items-center justify-center min-h-screen bg-red-lightest w-full">
<div className="flex mt-16 justify-between bg-white rounded-full w-10/12 lg:w-2/3">
<input
className="ml-3 rounded-full px-1 py-3"
type="text"
id="search"
placeholder="Search..."
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
/>
<img onClick={search} src={Search} className="w-12 h-12" />
</div>
</div>

<div className="flex items-center justify-center h-screen bg-red-lightest">
<div
className={`fullscreen-div relative mt-24${isFullScreen
? "fullscreen-styles"
: " bg-white shadow-lg rounded-lg w-[50rem]"
}`}
>
<div className={`${isFullScreen ? "clock" : "no-clock"}`}>
<div className="time">
{clock.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
hour12: true,
})}
</div>
<div className="flex flex-col md:flex-row items-center w-10/12 lg:w-2/3 lg:h-96 p-8 my-8 bg-slate-300 bg-blur relative bg-opacity-40 shadow-lg rounded-2xl">
<div className={`w-64 md:w-1/3 h-64 md:h-full bg-white mx-2 my-6 md:my-0 rounded-xl ${isFullScreen ? "fullscreen-styles" : ""}`}>
<img className="w-full h-full rounded-xl" src="https://i.ibb.co/jWnV2tR/music-player.jpg" alt="music-player" />
</div>
<div className={`${isFullScreen ? "flex-style" : "flex"}`}>
<div className={`${isFullScreen ? "image" : ""}`}>
<img
className="w-full rounded hidden md:block m-2"
src="https://tailwindcss.com/img/card-top.jpg"
alt="Album Pic"
/>
</div>
<div className={`w-full ${isFullScreen ? "music" : " p-8 pb-0"}`}>
<div
className={`${isFullScreen ? "title" : "flex justify-between"
}`}
>
<div>
<h3 className="text-2xl text-grey-darkest font-medium">
A Sky Full of Stars
</h3>
<p className="text-sm text-grey mt-1">Ghost Stories</p>
</div>
<div className="text-red-lighter">
<svg
className="w-6 h-6"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z" />
</svg>
</div>
<div className="text-red-lighter">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z"
/>
</svg>
</div>
<div className="text-red-lighter" onClick={toggleFullScreen}>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
/>
</svg>
</div>
<div className="w-full md:w-2/3 h-full bg-white mx-2 rounded-xl p-2 sm:p-4">
<div className="h-28">
<div className="w-full flex items-center justify-between">
<p className="font-bold text-2xl md:text-3xl">Shape of You</p>
<span className="flex items-center">
<img src={HeartFill} className="w-10 h-10 mx-3 cursor-pointer" />
<div className="text-red-lighter" onClick={toggleFullScreen}>
<img src={FullScreen} className="w-10 h-10 mx-3 cursor-pointer"/>
</div>
</span>
</div>

<div className="flex justify-between items-center mt-8">
<div className="text-grey-darker">
<svg
className="w-8 h-8"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M6.59 12.83L4.4 15c-.58.58-1.59 1-2.4 1H0v-2h2c.29 0 .8-.2 1-.41l2.17-2.18 1.42 1.42zM16 4V1l4 4-4 4V6h-2c-.29 0-.8.2-1 .41l-2.17 2.18L9.4 7.17 11.6 5c.58-.58 1.59-1 2.41-1h2zm0 10v-3l4 4-4 4v-3h-2c-.82 0-1.83-.42-2.41-1l-8.6-8.59C2.8 6.21 2.3 6 2 6H0V4h2c.82 0 1.83.42 2.41 1l8.6 8.59c.2.2.7.41.99.41h2z" />
</svg>
</div>
<div className="text-grey-darker">
<svg
className="w-8 h-8"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M4 5h3v10H4V5zm12 0v10l-9-5 9-5z" />
</svg>
</div>
<div className="text-grey-darker p-8 rounded-full bg-red-light shadow-lg">
<svg
className="w-8 h-8"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M5 4h3v12H5V4zm7 0h3v12h-3V4z" />
</svg>
</div>
<div className="text-grey-darker">
<svg
className="w-8 h-8"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M13 5h3v10h-3V5zM4 5l9 5-9 5V5z" />
</svg>
</div>
<div className="text-grey-darker">
<svg
className="w-8 h-8"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M5 4a2 2 0 0 0-2 2v6H0l4 4 4-4H5V6h7l2-2H5zm10 4h-3l4-4 4 4h-3v6a2 2 0 0 1-2 2H6l2-2h7V8z" />
</svg>
<div className="w-full flex items-center justify-between">
<p className="my-3 text-lg md:text-xl">Ed Sheeran</p>
<div className="time">
{clock.toLocaleTimeString([], {
hour: "2-digit",
minute: "2-digit",
hour12: true,
})}
</div>
</div>
<div className="flex justify-between text-sm text-grey-darker">
<p>0:40</p>
<p>4:20</p>
</div>
<div className="h-16 my-5">
<div className="mx-3 bg-slate-200 h-3 rounded-full">
<div className="bg-rose-300 h-3 rounded-full" style={{width: '50%'}}></div>
</div>
<div className="w-full flex justify-between items-center">
<p>02:00</p>
<p>04:00</p>
</div>
</div>
<div className="flex justify-around items-center">
<img src={Shuffle} className="w-6 md:w-10 md:h-10 cursor-pointer" />
<img src={Previous} className="w-6 md:w-10 md:h-10 cursor-pointer" />
<div className="w-12 h-12 md:w-16 md:h-16 bg-stone-100 border-4 border-rose-400 rounded-full flex items-center justify-center">
<img src={Pause} className="w-6 md:w-10 md:h-10 cursor-pointer" />
</div>
<img src={Next} className="w-6 md:w-10 md:h-10 cursor-pointer" />
<img src={Repeat} className="w-6 md:w-10 md:h-10 cursor-pointer" />
</div>
</div>
</div>
</div>

<Footer />
</div>
</>
Expand Down
4 changes: 4 additions & 0 deletions src/assets/full-screen.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
29 changes: 29 additions & 0 deletions src/assets/heart-fill.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions src/assets/heart.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions src/assets/next.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions src/assets/pause.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions src/assets/play.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 600b2e6

Please sign in to comment.