Skip to content
This repository was archived by the owner on Jan 14, 2025. It is now read-only.

updated lofi UI #63

Open
DeveshPatel-14 wants to merge 2 commits into
base: production
Choose a base branch
from
Open

updated lofi UI #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2a2e39
updated lofi UI
DeveshPatel-14 Oct 7, 2023
298a48d
updated ui components
DeveshPatel-14 Oct 9, 2023
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
26 changes: 26 additions & 0 deletions .env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
NEXT_PUBLIC_SANITY_DATASET=production
NEXT_PUBLIC_SANITY_PROJECT_ID=mlxdtup8
NEXT_PUBLIC_BASE_URL=http://localhost:3000/
SANITY_API_TOKEN=skT2G7wl4BFGvOLkELSIrcnFEBG3MyrXC71IJgv5iBOj5yxJx75MjgBzbbTvIwUtckXFIluhN2iEHiV37jNA0EcJmbTkMT1LJKwCNWH3ddJnof3mPQWDoVNggRM4ZCNgTDpbGqvjf4FE7xb5TkkTVUX5Rf1Fp4Z3IWZmlmwkSR2Fa8UdcikH
NEXTAUTH_SECRET=k3yf4g3h2u1t4sr5eh6s7i
NEXTAUTH_URL=http://localhost:3000/
GOOGLE_CLIENT_ID=618426972732-a7fqd0fdg2aoa8iagu0vb7f6m0sl2hhs.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=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
TRACING_ENABLED=false
NEXT_PUBLIC_SOCKET_URL="http://localhost:4000/"
NEXT_PUBLIC_SOCKETIO_URL_2=http://localhost:5000/
NEXT_PUBLIC_SHAZAM_CORE_RAPID_API_KEY='2d7b7a8dfcmsh5d7d9d777fe58aap127c50jsn3b17984aa2a3'
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_c2FjcmVkLWdhcmZpc2gtNy5jbGVyay5hY2NvdW50cy5kZXYk
CLERK_SECRET_KEY=sk_test_LPEsuGh4YWMmMpL3t18rOw08KDjht3lBIsCgRq0Hl6
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
NEXT_PUBLIC_RAPID_API_KEY=0e8903e27emsh2333e866a960be6p1d76cbjsn8250ba0b208d
NEXT_PUBLIC_TINY=limjfdlb66u3w96h1skw5m93kdvmf55zt4ohb3ol4jeb3q6m
NEXT_PUBLIC_CLIENT_SECRET=505a9fece5074f17b4b9a5edee644089
NEXT_PUBLIC_CLIENT_ID=db6947afde104dbc94f707562b9c20fc
JWT_SECRET=BQBjHQZbyyIZW-WjQ0TxejxcA9dO4v-CRE3zsHabyeowEWKGhepBwAbAPX1B1cnzZkV15J7KEZXA2pUfAmtc8Hms9TTXuAyQxsCB__qKtHDUteEoTsoipMzsiDXTi2kx9Vz0S1cInDyNsevceq29ivhfV-U3oFCWFtRyknTaEQsH1mCigpn-uXZ5AVD5gSqqPt3mK0Z2e5G40r0HpCJtCLgi1Ld2OufzmzagXiKcv9MY7unDjo5hjthV2UF9rmlAy0E6bUH3FcdtCoSsA7JFqAGZyg
NEXT_PUBLIC_CATTO_KEY=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
NEXT_PUBLIC_CHAT_KEY=8ef40a21-bcb4-47f3-928e-2b83389392b1
NEXT_PUBLIC_CHAT_KEY=pk-ihWDwESgKjNoJBbORkgfGDrBGEqnBSCIVwftLcSjoEgIYuFK
18 changes: 9 additions & 9 deletions components/Notes/LofiNotes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,9 +155,9 @@ const LofiNotes = ({ notes, user, setNotes }: any) => {
<div className="flex flex-col justify-center items-center gap-4">
<div className="flex justify-center gap-1 relative items-center">
<div className="flex items-center gap-2 col-span-2 justify-end">
<Draggable>
<div className="flex items-center justify-between gap-2 select-none">
<MenuIcon className="text-neutral-200/50 cursor-pointer" />
<Draggable cancel=".btn">
<div className="flex items-center justify-between gap-2 select-none btn">
<MenuIcon className="text-neutral-200/50 cursor-pointer btn" />
<CategoryDropdown
categories={categories}
handleCategoryChange={handleCategoryChange}
Expand Down Expand Up @@ -185,8 +185,8 @@ const LofiNotes = ({ notes, user, setNotes }: any) => {
{filteredNotes.map((note: any) => (
<>
<Dialog isOpen={showModal} onClose={setShowModal}>
<Draggable>
<div className="rounded-md scale-150 md:scale-100 bg-white bg-opacity-30 border border-white border-opacity-50 backdrop-blur-xl p-2 w-full h-full md:p-8">
<Draggable cancel=".btn">
<div className="btn rounded-md scale-150 md:scale-100 bg-white bg-opacity-30 border border-white border-opacity-50 backdrop-blur-xl p-2 w-full h-full md:p-8">
<XIcon
onClick={() => setShowModal(false)}
className="flex justify-end right-2 text-white/30 text-sm font-light cursor-pointer absolute top-2"
Expand Down Expand Up @@ -227,14 +227,14 @@ const LofiNotes = ({ notes, user, setNotes }: any) => {
</Draggable>
</Dialog>
{notesshow && (
<Draggable>
<Draggable cancel=".btn">
<div
onClick={() => {
setShowModal(true);
setSelectedNote(note.topic);
setSelectedNoteData(note.note);
}}
className=" bg-white bg-opacity-30 rounded-md border w-64 h-56 overflow-y-scroll border-white border-opacity-50 backdrop-blur-xl p-4 space-y-5 text-neutral-200"
className="btn bg-white bg-opacity-30 rounded-md border w-64 h-56 overflow-y-scroll border-white border-opacity-50 backdrop-blur-xl p-4 space-y-5 text-neutral-200"
>
<div>
<h1 className="border-b w-fit">{note.topic}</h1>
Expand All @@ -252,8 +252,8 @@ const LofiNotes = ({ notes, user, setNotes }: any) => {
{showTaskInput && (
<div>
{" "}
<Draggable>
<div className=" bg-white bg-opacity-30 z-50 border border-white border-opacity-50 backdrop-blur-xl space-y-5 overflow-y-scroll h-fit w-full px-2 rounded-xl py-2">
<Draggable cancel=".btn">
<div className="btn bg-white bg-opacity-30 z-50 border border-white border-opacity-50 backdrop-blur-xl space-y-5 overflow-y-scroll h-fit w-full px-2 rounded-xl py-2">
<div className="flex justify-center items-center">
<div className="flex flex-col gap-5">
<input
Expand Down
90 changes: 53 additions & 37 deletions components/lofi/MusicPlayer/Controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ import {
BsShuffle,
} from "react-icons/bs";

import "../../Clock/clock.css";

const Controls = ({
isPlaying,
repeat,
Expand All @@ -18,50 +20,64 @@ const Controls = ({
handlePrevSong,
handleNextSong,
}: any) => (
<div className="flex items-center justify-around md:w-36 lg:w-52 2xl:w-80">
<BsArrowRepeat
size={20}
color={repeat ? "red" : "white"}
onClick={() => setRepeat((prev: any) => !prev)}
className="hidden sm:block cursor-pointer"
/>
{currentSongs?.length && (
<MdSkipPrevious
size={30}
color="#FFF"
className="cursor-pointer"
onClick={handlePrevSong}


<div className="flex items-center justify-around md:w-36 lg:w-96 2xl:w-80 md:gap-4">
<div className="bg-white cursor-pointer hover:bg-opacity-20 transition-all duration-100 active:scale-105 bg-opacity-30 p-4 rounded backdrop-blur-lg opacity-100">
<BsArrowRepeat
size={20}
color={repeat ? "red" : "white"}
onClick={() => setRepeat((prev: any) => !prev)}
className="hidden sm:block cursor-pointer"
/>
</div>
{currentSongs?.length && (
<div className="bg-white cursor-pointer hover:bg-opacity-20 transition-all duration-100 active:scale-105 bg-opacity-30 p-4 rounded backdrop-blur-lg opacity-100">
<MdSkipPrevious
size={30}
color="#FFF"
className="cursor-pointer"
onClick={handlePrevSong}
/>
</div>
)}
{isPlaying ? (
<BsFillPauseFill
size={45}
color="#FFF"
onClick={handlePlayPause}
className="cursor-pointer"
/>
<div className="bg-white cursor-pointer hover:bg-opacity-20 transition-all duration-100 active:scale-105 bg-opacity-30 p-4 rounded backdrop-blur-lg opacity-100">
<BsFillPauseFill
size={45}
color="#FFF"
onClick={handlePlayPause}
className="cursor-pointer"
/>
</div>
) : (
<BsFillPlayFill
size={45}
color="#FFF"
onClick={handlePlayPause}
className="cursor-pointer"
/>
<div className="bg-white cursor-pointer hover:bg-opacity-20 transition-all duration-100 active:scale-105 bg-opacity-30 p-4 rounded backdrop-blur-lg opacity-100">
<BsFillPlayFill
size={45}
color="#FFF"
onClick={handlePlayPause}
className="cursor-pointer"
/>
</div>
)}
{currentSongs?.length && (
<MdSkipNext
size={30}
color="#FFF"
className="cursor-pointer"
onClick={handleNextSong}
/>
<div className="bg-white cursor-pointer hover:bg-opacity-20 transition-all duration-100 active:scale-105 bg-opacity-30 p-4 rounded backdrop-blur-lg opacity-100">
<MdSkipNext
size={30}
color="#FFF"
className="cursor-pointer"
onClick={handleNextSong}
/>
</div>
)}
<BsShuffle
size={20}
color={shuffle ? "red" : "white"}
onClick={() => setShuffle((prev: any) => !prev)}
className="hidden sm:block cursor-pointer"
/>
<div className="bg-white cursor-pointer hover:bg-opacity-20 transition-all duration-100 active:scale-105 bg-opacity-30 p-4 rounded backdrop-blur-lg opacity-100">
<BsShuffle
size={20}
color={shuffle ? "red" : "white"}
onClick={() => setShuffle((prev: any) => !prev)}
className="hidden sm:block cursor-pointer"
/>
</div>
</div>
);

Expand Down
110 changes: 77 additions & 33 deletions components/lofi/MusicPlayer/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,17 @@ import Seekbar from "./Seekbar";
import Track from "./Track";
import VolumeBar from "./VolumeBar";

const MusicPlayer = () => {
import {
BsArrowRepeat,
BsFillPauseFill,
BsFillPlayFill,
BsShuffle,
} from "react-icons/bs";

import "../../Clock/clock.css";

//@ts-ignore
const MusicPlayer = ({ sessionStarted }) => {
const { activeSong, currentSongs, currentIndex, isActive, isPlaying } =
useSelector((state: any) => state.player);
const [duration, setDuration] = useState(0);
Expand Down Expand Up @@ -58,52 +68,86 @@ const MusicPlayer = () => {
};

return (
<div className="relative z-50 sm:px-12 px-8 w-full flex items-center justify-between">
<Track
// flex-col items-center justify-center w-3/5 h-full ml-[4vw] md:justify-center md:space-y-32
<div className="absolute flex flex-col items-center w-3/5 h-full ml-[4vw] md:justify-center md:space-y-32">
{sessionStarted ? (
<div className="relative flex items-center justify-center -top-80 -z-40">
{isPlaying ? (
<div className="absolute z-10">
<BsFillPauseFill
size={65}
color="#FFF"
onClick={handlePlayPause}
className="cursor-pointer"
/>
</div>
) : (
<div className="absolute z-10">
<BsFillPlayFill
size={65}
color="#FFF"
onClick={handlePlayPause}
className="cursor-pointer"
/>
</div>
)}

<div
className={`w-[212px] h-[212px] absolute bg-white bg-opacity-30 backdrop-blur-3xl border-opacity-50 border-white border text-white rounded-full flex items-center justify-center`}
>
<div className="spinner"></div>
</div>
</div>
) : null}

<div className="absolute z-50 w-full sm:px-12 px-8 w-full flex flex-col items-center justify-between mr-0">
{/* <Track
isPlaying={isPlaying}
isActive={isActive}
activeSong={activeSong}
/>
<div className="flex-1 flex flex-col items-center justify-center">
<Controls
isPlaying={isPlaying}
isActive={isActive}
repeat={repeat}
setRepeat={setRepeat}
shuffle={shuffle}
setShuffle={setShuffle}
currentSongs={currentSongs}
handlePlayPause={handlePlayPause}
handlePrevSong={handlePrevSong}
handleNextSong={handleNextSong}
/>
<Seekbar
/> */}

<div className="flex-1 flex flex-col items-center justify-center">
<Controls
isPlaying={isPlaying}
isActive={isActive}
repeat={repeat}
setRepeat={setRepeat}
shuffle={shuffle}
setShuffle={setShuffle}
currentSongs={currentSongs}
handlePlayPause={handlePlayPause}
handlePrevSong={handlePrevSong}
handleNextSong={handleNextSong}
/>
{/* <Seekbar
value={appTime}
min="0"
max={duration}
onInput={(event: any) => setSeekTime(event.target.value)}
setSeekTime={setSeekTime}
appTime={appTime}
/>
<Player
activeSong={activeSong}
volume={volume}
isPlaying={isPlaying}
seekTime={seekTime}
repeat={repeat}
currentIndex={currentIndex}
onEnded={handleNextSong}
onTimeUpdate={(event: any) => setAppTime(event.target.currentTime)}
onLoadedData={(event: any) => setDuration(event.target.duration)}
/>
</div>
<VolumeBar
/> */}
<Player
activeSong={activeSong}
volume={volume}
isPlaying={isPlaying}
seekTime={seekTime}
repeat={repeat}
currentIndex={currentIndex}
onEnded={handleNextSong}
onTimeUpdate={(event: any) => setAppTime(event.target.currentTime)}
onLoadedData={(event: any) => setDuration(event.target.duration)}
/>
</div>
{/* <VolumeBar
value={volume}
min="0"
max="1"
onChange={(event: any) => setVolume(event.target.value)}
setVolume={setVolume}
/>
/> */}
</div>
</div>
);
};
Expand Down
4 changes: 2 additions & 2 deletions components/lofi/components/Discover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@ const Discover = () => {
</select>
</div>

<Draggable>
<Draggable cancel='.btn'>
<div className="flex flex-wrap sm:justify-start w-fit rounded-md overflow-x-hidden justify-center gap-8 bg-white bg-opacity-50 border-white border">
<div className="flex w-[300px] flex-col items-start overflow-x-hidden">
<div className="flex w-[300px] flex-col items-start overflow-x-hidden btn">
{filteredSongs?.map((song: any, i: any) => (
<div
className={play}
Expand Down
Loading