+
+ {newPlaylist && (
+
+
+
+
+ + Add Song +
+
+
+
+
+ + Add Playlist +
+
+
+
+
+
+
+ {newPlaylist?.title || 'New Playlist'}
+{newPlaylist?.songs?.length}
+
+ {children}
+
+ );
+}
+
+export default Box;
\ No newline at end of file
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..dfa921d
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,47 @@
+import { forwardRef } from "react";
+import { twMerge } from "tailwind-merge";
+
+export interface ButtonProps
+ extends React.ButtonHTMLAttributes
+
+ );
+}
+
+export default Header;
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 0000000..3cb7520
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,48 @@
+import { forwardRef } from "react";
+import { twMerge } from "tailwind-merge"
+
+export interface InputProps
+ extends React.InputHTMLAttributes
+
+ {children}
+
+ {/*
+ */}
+
+
+
+
+
+
+ {!username && (
+ <>
+
+
+
+
+
+
+ )}
+
+ No songs found.
+
+ )
+ }
+ console.log('liked content')
+
+ return (
+
+ {songs.map((song: Song) => (
+
+ );
+}
+
diff --git a/src/components/ListItem.tsx b/src/components/ListItem.tsx
new file mode 100644
index 0000000..e78a62a
--- /dev/null
+++ b/src/components/ListItem.tsx
@@ -0,0 +1,77 @@
+
+import { FaPlay } from "react-icons/fa";
+import { useNavigate } from "react-router-dom";
+
+
+
+interface ListItemProps {
+ image: string;
+ name: string;
+ href: string;
+}
+
+const ListItem: React.FC
+
+ ))}
+
+ onPlay(id)}
+ data={song}
+ />
+
+
+
+ );
+}
+
+export default MediaItem;
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 0000000..274e375
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,104 @@
+import * as Dialog from '@radix-ui/react-dialog';
+import { IoMdClose } from 'react-icons/io';
+
+interface ModalProps {
+ isOpen: boolean;
+ onChange: (open: boolean) => void;
+ title: string;
+ description: string;
+ children: React.ReactNode;
+}
+
+const Modal: React.FC
+ 
+
+
+
+ {data?.title}
++ By {data?.author} +
+
+ {children}
+
+
+
+ )
+
+ if (songs.length === 0) {
+ return (
+
+
+
+ No songs available.
+
+ )
+ }
+
+ return (
+ <>
+
+ {songListRecent.map((item) => {
+ return (
+ onPlay(id)}
+ key={item.id}
+ data={item}
+ />
+ )
+ })}
+
+
+
+
+ }
+
+ return (
+
+
+ );
+}
+
+export default Player;
diff --git a/src/components/PlayerContent.tsx b/src/components/PlayerContent.tsx
new file mode 100644
index 0000000..eb6a817
--- /dev/null
+++ b/src/components/PlayerContent.tsx
@@ -0,0 +1,469 @@
+import useSound from "use-sound";
+import { useContext, useEffect, useMemo, useState } from "react";
+import { BsPauseFill, BsPlayFill } from "react-icons/bs";
+import { HiSpeakerWave, HiSpeakerXMark } from "react-icons/hi2";
+import { AiFillStepBackward, AiFillStepForward } from "react-icons/ai";
+import CircularProgress from '@mui/material/CircularProgress'
+import * as RadixSlider from '@radix-ui/react-slider';
+
+
+
+// import LikeButton from "./LikeButton";
+import MediaItem from "./MediaItem";
+import Slider from "./Slider";
+import { Song } from "../types";
+import usePlayer from "../hooks/usePlayer";
+import LikeButton from "./LikeButton";
+import { useDispatch, useSelector } from "react-redux";
+import { setAddToDownloads, setCurrentSong, setVolumePlayer, upsertNowPlayingPlaylist } from "../state/features/globalSlice";
+import { RootState } from "../state/store";
+import { AddToPlaylistButton } from "./AddToPlayistButton";
+import { MyContext } from "../wrappers/DownloadWrapper";
+
+
+interface PlayerContentProps {
+ song: Song;
+ songUrl: string;
+}
+
+const PlayerContent: React.FC
+
+ );
+}
+
+export default PlayerContent;
\ No newline at end of file
diff --git a/src/components/PlayerContentShow.tsx b/src/components/PlayerContentShow.tsx
new file mode 100644
index 0000000..5ef62ce
--- /dev/null
+++ b/src/components/PlayerContentShow.tsx
@@ -0,0 +1,178 @@
+import { useContext, useEffect, useState } from "react";
+import { BsPauseFill, BsPlayFill } from "react-icons/bs";
+import { HiSpeakerWave, HiSpeakerXMark } from "react-icons/hi2";
+import { AiFillStepBackward, AiFillStepForward } from "react-icons/ai";
+import CircularProgress from '@mui/material/CircularProgress'
+
+
+
+// import LikeButton from "./LikeButton";
+import MediaItem from "./MediaItem";
+import Slider from "./Slider";
+import { Song } from "../types";
+import usePlayer from "../hooks/usePlayer";
+import LikeButton from "./LikeButton";
+import { setVolumePlayer } from "../state/features/globalSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../state/store";
+import { AddToPlaylistButton } from "./AddToPlayistButton";
+import { FaUndoAlt } from "react-icons/fa";
+import { MyContext } from "../wrappers/DownloadWrapper";
+
+
+interface PlayerContentProps {
+ song: Song;
+ songUrl: string;
+ percentLoaded: string
+}
+
+export const PlayerContentShow: React.FC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ handleProgressChange(value)}
+ styles={{
+ width: '250px',
+ height: 'auto',
+ padding: '10px 0px 5px 0px',
+ cursor: 'pointer'
+ }}
+ />
+
+ )}
+
+
+
+
+
+
+
+ setVolume(value)}
+ />
+
+
+
+ );
+}
+
diff --git a/src/components/PlaylistItem.tsx b/src/components/PlaylistItem.tsx
new file mode 100644
index 0000000..a08f887
--- /dev/null
+++ b/src/components/PlaylistItem.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { useDispatch, useSelector } from "react-redux";
+import useLoadImage from "../hooks/useLoadImage";
+import usePlayer from "../hooks/usePlayer";
+import { Song } from "../types";
+import { RootState } from "../state/store";
+import radioImg from '../assets/img/radio-cassette.webp'
+import { useContext } from "react";
+import { MyContext } from "../wrappers/DownloadWrapper";
+import { PlayList, setAddToDownloads, setCurrentSong } from "../state/features/globalSlice";
+
+
+
+interface MediaItemProps {
+ data: PlayList;
+ onClick?: () => void;
+}
+
+export const PlaylistItem: React.FC
+
+
+
+ {
+ refresh()
+ }} />
+
+
+
+
+ {}}
+ className="
+ h-10
+ w-10
+ flex
+ items-center
+ justify-center
+ rounded-full
+ bg-white
+ p-1
+ cursor-pointer
+ "
+ >
+
+
+
+ {/*
+
+
+
+
+
+ {}}
+ className="cursor-pointer"
+ size={34}
+ />
+ setVolume(value)}
+ />
+
+
+
+ );
+}
+
diff --git a/src/components/PlaylistsContent.tsx b/src/components/PlaylistsContent.tsx
new file mode 100644
index 0000000..685fe5b
--- /dev/null
+++ b/src/components/PlaylistsContent.tsx
@@ -0,0 +1,76 @@
+import { useSelector } from "react-redux";
+import useOnPlay from "../hooks/useOnPlay";
+import { PlayList } from "../state/features/globalSlice";
+import { Song } from "../types";
+import LikeButton from "./LikeButton";
+import MediaItem from "./MediaItem";
+import { RootState } from "../state/store";
+import { PlaylistItem } from "./PlaylistItem";
+import { useNavigate } from "react-router-dom";
+import { Skeleton } from "@mui/material";
+
+
+
+interface SearchContentProps {
+ playlists: PlayList[];
+}
+
+export const PlayListsContent: React.FC
+ 
+
+
+
+ {data?.title}
++ {data?.description} +
+
+ // No songs found.
+ //
+ // )
+ // }
+
+ return (
+
+ {playlists.map((playlist: PlayList) => {
+ const existingPlaylist = playlistHash[playlist.id]
+ let playlistObj = playlist
+ if (existingPlaylist) {
+ playlistObj = existingPlaylist
+ } else return
+ );
+}
+
diff --git a/src/components/SearchContent.tsx b/src/components/SearchContent.tsx
new file mode 100644
index 0000000..07f31b3
--- /dev/null
+++ b/src/components/SearchContent.tsx
@@ -0,0 +1,56 @@
+import useOnPlay from "../hooks/useOnPlay";
+import { Song } from "../types";
+import { AddToPlaylistButton } from "./AddToPlayistButton";
+import LikeButton from "./LikeButton";
+import MediaItem from "./MediaItem";
+
+
+
+interface SearchContentProps {
+ songs: Song[];
+}
+
+const SearchContent: React.FC
+
+ )
+ })}
+
+ {
+ navigate(`/playlists/${playlistObj.user}/${playlistObj.id}`)
+ }}
+ data={playlistObj}
+ />
+
+ {/*
+ No songs found.
+
+ )
+ }
+
+ return (
+
+ {songs.map((song: Song) => (
+
+ );
+}
+
+export default SearchContent;
\ No newline at end of file
diff --git a/src/components/SearchInput.tsx b/src/components/SearchInput.tsx
new file mode 100644
index 0000000..329e2fc
--- /dev/null
+++ b/src/components/SearchInput.tsx
@@ -0,0 +1,30 @@
+
+import { useEffect, useState } from "react";
+
+
+import Input from "./Input";
+import { resetQueriedList, setQueriedValue } from "../state/features/globalSlice";
+import { useDispatch } from "react-redux";
+import { useFetchSongs } from "../hooks/fetchSongs";
+
+const SearchInput = () => {
+ const dispatch = useDispatch()
+ const {getQueriedSongs} = useFetchSongs()
+
+
+ const handleInputKeyDown = (event: any) => {
+ if (event.key === 'Enter') {
+ dispatch(resetQueriedList())
+ getQueriedSongs()
+ }
+ }
+ return (
+ dispatch(setQueriedValue(e.target.value))}
+ onKeyDown={handleInputKeyDown}
+ />
+ );
+}
+
+export default SearchInput;
\ No newline at end of file
diff --git a/src/components/SearchInputPlaylist.tsx b/src/components/SearchInputPlaylist.tsx
new file mode 100644
index 0000000..029e579
--- /dev/null
+++ b/src/components/SearchInputPlaylist.tsx
@@ -0,0 +1,51 @@
+
+import { useEffect, useState } from "react";
+
+
+import Input from "./Input";
+import { resetQueriedList, resetQueriedListPlaylist, setIsQueryingPlaylist, setQueriedValue, setQueriedValuePlaylist } from "../state/features/globalSlice";
+import { useDispatch, useSelector } from "react-redux";
+import { useFetchSongs } from "../hooks/fetchSongs";
+import { RootState } from "../state/store";
+import { FaUndoAlt } from "react-icons/fa";
+
+export const SearchInputPlaylist = () => {
+ const dispatch = useDispatch()
+ const {getPlaylistsQueried} = useFetchSongs()
+ const queriedValuePlaylist = useSelector((state: RootState) => state.global.queriedValuePlaylist);
+ const isQueryingPlaylist = useSelector((state: RootState) => state.global.isQueryingPlaylist);
+
+ const handleInputKeyDown = (event: any) => {
+ if (event.key === 'Enter') {
+ dispatch(resetQueriedListPlaylist())
+ if(!queriedValuePlaylist){
+ dispatch(setIsQueryingPlaylist(false))
+ } else {
+ dispatch(setIsQueryingPlaylist(true))
+ getPlaylistsQueried()
+ }
+
+ }
+ }
+ return (
+
+
+ ))}
+
+ onPlay(id)}
+ data={song}
+ />
+
+
+ {
+ dispatch(setQueriedValuePlaylist(e.target.value))
+ }}
+ value={queriedValuePlaylist}
+ onKeyDown={handleInputKeyDown}
+ />
+ {isQueryingPlaylist && (
+ {
+ dispatch(resetQueriedListPlaylist())
+ dispatch(setIsQueryingPlaylist(false))
+ dispatch(setQueriedValuePlaylist(''))
+ }} />
+ )}
+
+
+
+ );
+}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 0000000..7fe85f7
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,108 @@
+
+import { HiHome } from "react-icons/hi";
+import { BiSearch } from "react-icons/bi";
+import { twMerge } from "tailwind-merge";
+import { useLocation } from 'react-router-dom';
+import { TbPlaylist } from "react-icons/tb";
+import {IoMdCloudUpload} from "react-icons/io"
+import {AiFillHeart} from "react-icons/ai"
+import SidebarItem from "./SidebarItem";
+import Box from "./Box";
+import {AddLibrary} from "./AddLibrary";
+import { useMemo } from "react";
+import { Song } from "../types";
+import usePlayer from "../hooks/usePlayer";
+import {AiOutlineFieldTime} from "react-icons/ai"
+
+interface SidebarProps {
+ children: React.ReactNode;
+ songs: Song[];
+}
+
+const Sidebar = ({ children, songs }: SidebarProps) => {
+ const location = useLocation();
+ const pathname = useMemo(()=> {
+
+ return location.pathname
+ }, [location])
+ const player = usePlayer();
+
+ const routes = useMemo(() => [
+ {
+ icon: HiHome,
+ label: 'Home',
+ active: pathname === '/',
+ href: '/'
+ },
+ {
+ icon: AiOutlineFieldTime,
+ label: 'Newest songs',
+ active: pathname === '/newest',
+ href: '/newest'
+ },
+ {
+ icon: AiFillHeart,
+ label: 'Liked',
+ active: pathname === '/liked',
+ href: '/liked'
+ },
+ {
+ icon: BiSearch,
+ label: 'Search',
+ href: '/search',
+ active: pathname === '/search'
+ },
+ {
+ icon: TbPlaylist,
+ label: 'Playlists',
+ href: '/playlists',
+ active: pathname === '/playlists'
+ },
+ {
+ icon: IoMdCloudUpload,
+ label: 'Your Library',
+ href: '/library',
+ active: pathname === '/library'
+ },
+ ], [pathname]);
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+export default Sidebar;
\ No newline at end of file
diff --git a/src/components/SidebarItem.tsx b/src/components/SidebarItem.tsx
new file mode 100644
index 0000000..0d3bea7
--- /dev/null
+++ b/src/components/SidebarItem.tsx
@@ -0,0 +1,46 @@
+import { NavLink } from "react-router-dom";
+
+import { IconType } from 'react-icons';
+import { twMerge } from 'tailwind-merge';
+
+interface SidebarItemProps {
+ icon: IconType;
+ label: string;
+ active?: boolean;
+ href: string;
+}
+
+const SidebarItem: React.FC
+
+
+
+
+
+
+ {routes.map((item) => (
+
+ {label}
+ {
+ if(data?.status?.status === 'READY' || downloads[data.id]?.status?.status === 'READY'){
+ dispatch(setAddToDownloads({
+ name: data.name,
+ service: 'AUDIO',
+ id: data.id,
+ identifier: data.id,
+ url:`/arbitrary/AUDIO/${data.name}/${data.id}`,
+ status: data?.status,
+ title: data?.title || "",
+ author: data?.author || "",
+ }))
+ }else {
+ downloadVideo({
+ name: data.name,
+ service: 'AUDIO',
+ identifier: data.id,
+ title: data?.title || "",
+ author: data?.author || "",
+ id: data.id
+ })
+ }
+
+ dispatch(setCurrentSong(data.id))
+ }}
+ className="
+ relative
+ group
+ flex
+ flex-col
+ items-center
+ justify-center
+ rounded-md
+ overflow-hidden
+ gap-x-4
+ bg-neutral-400/5
+ hover:bg-neutral-400/10
+ transition
+ p-3
+ "
+ >
+
+
+ );
+}
+
+export default SongItem;
diff --git a/src/components/TextArea.tsx b/src/components/TextArea.tsx
new file mode 100644
index 0000000..d98855d
--- /dev/null
+++ b/src/components/TextArea.tsx
@@ -0,0 +1,46 @@
+import { forwardRef } from "react";
+import { twMerge } from "tailwind-merge"
+
+export interface TextareaProps
+ extends React.TextareaHTMLAttributes
+ 
+ {newPlaylist && (
+
+ )}
+
+
+
+
+
+ + {data?.title} +
++ By {data?.author} +
+
+
+ -
+ {blockedNames.map((name, index) => (
+
+
+ )
+}
+
+export default LazyLoad
diff --git a/src/components/common/Notification/Notification.tsx b/src/components/common/Notification/Notification.tsx
new file mode 100644
index 0000000..501f081
--- /dev/null
+++ b/src/components/common/Notification/Notification.tsx
@@ -0,0 +1,86 @@
+import { useDispatch, useSelector } from 'react-redux'
+import { toast, ToastContainer, Zoom, Slide } from 'react-toastify'
+import { removeNotification } from '../../../state/features/notificationsSlice'
+import 'react-toastify/dist/ReactToastify.css'
+import { RootState } from '../../../state/store'
+
+const Notification = () => {
+ const dispatch = useDispatch()
+
+ const { alertTypes } = useSelector((state: RootState) => state.notifications)
+
+ if (alertTypes.alertError) {
+ toast.error(`❌ ${alertTypes?.alertError}`, {
+ position: 'bottom-right',
+ autoClose: 4000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ icon: false
+ })
+ dispatch(removeNotification())
+ }
+ if (alertTypes.alertSuccess) {
+ toast.success(`✔️ ${alertTypes?.alertSuccess}`, {
+ position: 'bottom-right',
+ autoClose: 4000,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ icon: false
+ })
+ dispatch(removeNotification())
+ }
+ if (alertTypes.alertInfo) {
+ toast.info(`${alertTypes?.alertInfo}`, {
+ position: 'top-right',
+ autoClose: 1300,
+ hideProgressBar: false,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ progress: undefined,
+ theme: 'light'
+ })
+ dispatch(removeNotification())
+ }
+
+ if (alertTypes.alertInfo) {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/Library/Library.tsx b/src/pages/Library/Library.tsx
new file mode 100644
index 0000000..52209c7
--- /dev/null
+++ b/src/pages/Library/Library.tsx
@@ -0,0 +1,127 @@
+import React, { useMemo, useState , useRef, useEffect, useCallback} from 'react'
+import Header from '../../components/Header'
+import ListItem from '../../components/ListItem'
+import likeImg from '../../assets/img/liked.png'
+import PageContent from '../../components/PageContent'
+import SearchInput from '../../components/SearchInput'
+import { toast } from "react-hot-toast";
+import {IoMdCloudUpload} from "react-icons/io"
+
+import SearchContent from '../../components/SearchContent'
+import LazyLoad from '../../components/common/LazyLoad'
+import { useFetchSongs } from '../../hooks/fetchSongs'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import useUploadModal from '../../hooks/useUploadModal'
+import useOnPlay from '../../hooks/useOnPlay'
+import { MyPlaylists } from '../Playlists/MyPlaylists'
+export const Library = () => {
+ const initialFetch = useRef(false)
+ const username = useSelector((state: RootState) => state?.auth?.user?.name);
+ const songListLibrary = useSelector((state: RootState) => state?.global.songListLibrary);
+ const [mode, setMode] = useState
+
+
+
+
+ + Welcome back +
+
+
+
+
+
+
+ {randomPlaylist && (
+ + Discover a Playlist (Shuffle) +
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/Liked/Liked.tsx b/src/pages/Liked/Liked.tsx
new file mode 100644
index 0000000..99347a0
--- /dev/null
+++ b/src/pages/Liked/Liked.tsx
@@ -0,0 +1,171 @@
+import React, { useContext, useMemo, useState } from 'react'
+import Header from '../../components/Header'
+import ListItem from '../../components/ListItem'
+import likeImg from '../../assets/img/liked.png'
+import PageContent from '../../components/PageContent'
+import SearchInput from '../../components/SearchInput'
+import SearchContent from '../../components/SearchContent'
+import LazyLoad from '../../components/common/LazyLoad'
+import { useFetchSongs } from '../../hooks/fetchSongs'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import { FaPlay } from 'react-icons/fa'
+import { setAddToDownloads, setCurrentPlaylist, setCurrentSong } from '../../state/features/globalSlice'
+import { MyContext } from '../../wrappers/DownloadWrapper'
+import { FavPlaylists } from '../Playlists/FavPlaylists'
+export const Liked = () => {
+ const favoriteList = useSelector((state: RootState) => state.global.favoriteList);
+ const favorites = useSelector((state: RootState) => state.global.favorites);
+ const { downloadVideo } = useContext(MyContext)
+ const [mode, setMode] = useState
+
+
+
+ {mode === 'playlists' && (
+
+
+
+
+
+
+
+
+
+
+ + Your library +
+
+
+
+
+
+
+ )
+}
diff --git a/src/pages/Newest/Newest.tsx b/src/pages/Newest/Newest.tsx
new file mode 100644
index 0000000..a369283
--- /dev/null
+++ b/src/pages/Newest/Newest.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import Header from '../../components/Header'
+import ListItem from '../../components/ListItem'
+import likeImg from '../../assets/img/liked.png'
+import PageContent from '../../components/PageContent'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import { AddPlayList } from '../../components/AddPlaylist'
+export const Newest = () => {
+ const songListRecent = useSelector((state: RootState) => state.global.songListRecent);
+ return (
+
+
+
+
+ {mode === 'songs' && (
+ <>
+
+
+
+
+
+
+ {favoriteList && favoriteList?.length > 0 && (
+
+
+
+
+ )}
+
+
+ 
+
+
+
+ + Playlist +
++ Liked Songs +
+
+
+
+
+ )
+}
diff --git a/src/pages/Playlist/Playlist.tsx b/src/pages/Playlist/Playlist.tsx
new file mode 100644
index 0000000..59e5a6f
--- /dev/null
+++ b/src/pages/Playlist/Playlist.tsx
@@ -0,0 +1,380 @@
+import React, { useContext, useMemo, useRef, useState } from 'react'
+import Header from '../../components/Header'
+import ListItem from '../../components/ListItem'
+import likeImg from '../../assets/img/liked.png'
+import PageContent from '../../components/PageContent'
+import SearchInput from '../../components/SearchInput'
+import SearchContent from '../../components/SearchContent'
+import LazyLoad from '../../components/common/LazyLoad'
+import { useFetchSongs } from '../../hooks/fetchSongs'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import { PlayListsContent } from '../../components/PlaylistsContent'
+import { useParams } from 'react-router-dom'
+import { PlayList, addToPlaylistHashMap, removeFavPlaylist, setAddToDownloads, setCurrentPlaylist, setCurrentSong, setFavPlaylist, setImageCoverHash, setIsLoadingGlobal, setNewPlayList } from '../../state/features/globalSlice'
+import { AiFillEdit, AiFillHeart, AiOutlineHeart } from "react-icons/ai";
+import { FaPlay } from 'react-icons/fa'
+import { MyContext } from '../../wrappers/DownloadWrapper'
+import { queueFetchAvatars } from '../../wrappers/GlobalWrapper'
+import localforage from 'localforage'
+
+const favoritesStorage = localforage.createInstance({
+ name: 'ear-bump-favorites'
+})
+
+export const Playlist = () => {
+ const username = useSelector((state: RootState) => state.auth?.user?.name);
+
+ const { playlistId, name } = useParams()
+ const isfavoriting = useRef(false)
+ const { getPlaylists
+ } = useFetchSongs()
+ const songListQueried = useSelector((state: RootState) => state.global.songListQueried);
+ const playlists = useSelector((state: RootState) => state.global.playlists);
+ const favoritesPlaylist= useSelector((state: RootState) => state.global.favoritesPlaylist);
+ const dispatch = useDispatch()
+ const playlistHash = useSelector((state: RootState) => state.global.playlistHash);
+ const { downloadVideo } = useContext(MyContext)
+ const imageCoverHash = useSelector((state: RootState) => state.global.imageCoverHash);
+
+ const downloads = useSelector(
+ (state: RootState) => state.global.downloads
+ )
+ const [playListData, setPlaylistData] = useState
+
+
+
+ + Newest songs +
+
+
+
+ {playListData && (
+
+
+ )
+}
diff --git a/src/pages/Playlist/PlaylistStandalone.tsx b/src/pages/Playlist/PlaylistStandalone.tsx
new file mode 100644
index 0000000..cdc5178
--- /dev/null
+++ b/src/pages/Playlist/PlaylistStandalone.tsx
@@ -0,0 +1,385 @@
+import React, { useContext, useMemo, useRef, useState } from 'react'
+import Header from '../../components/Header'
+import ListItem from '../../components/ListItem'
+import likeImg from '../../assets/img/liked.png'
+import PageContent from '../../components/PageContent'
+import SearchInput from '../../components/SearchInput'
+import SearchContent from '../../components/SearchContent'
+import LazyLoad from '../../components/common/LazyLoad'
+import { useFetchSongs } from '../../hooks/fetchSongs'
+import { useDispatch, useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import { PlayListsContent } from '../../components/PlaylistsContent'
+import { useParams } from 'react-router-dom'
+import { PlayList, addToPlaylistHashMap, removeFavPlaylist, setAddToDownloads, setCurrentPlaylist, setCurrentSong, setFavPlaylist, setImageCoverHash, setIsLoadingGlobal, setNewPlayList } from '../../state/features/globalSlice'
+import { AiFillEdit, AiFillHeart, AiOutlineHeart } from "react-icons/ai";
+import { FaPlay } from 'react-icons/fa'
+import { MyContext } from '../../wrappers/DownloadWrapper'
+import { queueFetchAvatars } from '../../wrappers/GlobalWrapper'
+import localforage from 'localforage'
+
+const favoritesStorage = localforage.createInstance({
+ name: 'ear-bump-favorites'
+})
+
+export const PlaylistStandalone = ({
+ playlistId,
+ name
+}: any) => {
+ const username = useSelector((state: RootState) => state.auth?.user?.name);
+
+ const isfavoriting = useRef(false)
+ const { getPlaylists
+ } = useFetchSongs()
+ const songListQueried = useSelector((state: RootState) => state.global.songListQueried);
+ const playlists = useSelector((state: RootState) => state.global.playlists);
+ const favoritesPlaylist= useSelector((state: RootState) => state.global.favoritesPlaylist);
+ const dispatch = useDispatch()
+ const playlistHash = useSelector((state: RootState) => state.global.playlistHash);
+ const { downloadVideo } = useContext(MyContext)
+ const imageCoverHash = useSelector((state: RootState) => state.global.imageCoverHash);
+
+ const downloads = useSelector(
+ (state: RootState) => state.global.downloads
+ )
+ const [playListData, setPlaylistData] = useState
+
+
+
+
+ {playListData?.songs && playListData?.songs?.length > 0 && (
+
+ {username === playListData?.user && (
+
+
+ )}
+
+
+
+
+
+
+ )}
+
+ 
+
+
+
+ + Playlist +
++ {playListData?.title} +
++ {playListData?.description} +
+
+
+
+ {playListData && (
+
+
+ )
+}
diff --git a/src/pages/Playlists/FavPlaylists.tsx b/src/pages/Playlists/FavPlaylists.tsx
new file mode 100644
index 0000000..caf0989
--- /dev/null
+++ b/src/pages/Playlists/FavPlaylists.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import Header from '../../components/Header'
+import ListItem from '../../components/ListItem'
+import likeImg from '../../assets/img/liked.png'
+import PageContent from '../../components/PageContent'
+import SearchInput from '../../components/SearchInput'
+import SearchContent from '../../components/SearchContent'
+import LazyLoad from '../../components/common/LazyLoad'
+import { useFetchSongs } from '../../hooks/fetchSongs'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import { PlayListsContent } from '../../components/PlaylistsContent'
+import { SearchInputPlaylist } from '../../components/SearchInputPlaylist'
+export const FavPlaylists = () => {
+ const { getMyPlaylists
+ } = useFetchSongs()
+ const favoritesPlaylist = useSelector((state: RootState) => state.global.favoritesPlaylist);
+
+
+
+ let playlistsToRender = favoritesPlaylist || []
+
+
+ return (
+
+
+
+
+
+ {playListData?.songs && playListData?.songs?.length > 0 && (
+
+ {username === playListData?.user && (
+
+
+ )}
+
+
+
+
+
+
+ )}
+
+
+
+
+
+ + Playlist +
++ {playListData?.title} +
++ {playListData?.description} +
+
+
+
+ )
+}
diff --git a/src/pages/Playlists/MyPlaylists.tsx b/src/pages/Playlists/MyPlaylists.tsx
new file mode 100644
index 0000000..2a02390
--- /dev/null
+++ b/src/pages/Playlists/MyPlaylists.tsx
@@ -0,0 +1,39 @@
+import React from 'react'
+import Header from '../../components/Header'
+import ListItem from '../../components/ListItem'
+import likeImg from '../../assets/img/liked.png'
+import PageContent from '../../components/PageContent'
+import SearchInput from '../../components/SearchInput'
+import SearchContent from '../../components/SearchContent'
+import LazyLoad from '../../components/common/LazyLoad'
+import { useFetchSongs } from '../../hooks/fetchSongs'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import { PlayListsContent } from '../../components/PlaylistsContent'
+import { SearchInputPlaylist } from '../../components/SearchInputPlaylist'
+export const MyPlaylists = () => {
+ const { getMyPlaylists
+ } = useFetchSongs()
+ const myPlaylists = useSelector((state: RootState) => state.global.myPlaylists);
+
+
+ console.log({myPlaylists})
+
+ let playlistsToRender = myPlaylists
+
+
+ return (
+
+
+ + Playlists +
+
+
+
+ )
+}
diff --git a/src/pages/Playlists/Playlists.tsx b/src/pages/Playlists/Playlists.tsx
new file mode 100644
index 0000000..7eac841
--- /dev/null
+++ b/src/pages/Playlists/Playlists.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import Header from '../../components/Header'
+import ListItem from '../../components/ListItem'
+import likeImg from '../../assets/img/liked.png'
+import PageContent from '../../components/PageContent'
+import SearchInput from '../../components/SearchInput'
+import SearchContent from '../../components/SearchContent'
+import LazyLoad from '../../components/common/LazyLoad'
+import { useFetchSongs } from '../../hooks/fetchSongs'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+import { PlayListsContent } from '../../components/PlaylistsContent'
+import { SearchInputPlaylist } from '../../components/SearchInputPlaylist'
+export const Playlists = () => {
+ const { getPlaylists
+ } = useFetchSongs()
+ const songListQueried = useSelector((state: RootState) => state.global.songListQueried);
+ const playlists = useSelector((state: RootState) => state.global.playlists);
+ const playlistQueried = useSelector((state: RootState) => state.global.playlistQueried);
+ const isQueryingPlaylist = useSelector((state: RootState) => state.global.isQueryingPlaylist);
+
+ console.log({playlists})
+
+ let playlistsToRender = playlists
+
+ if(isQueryingPlaylist){
+ playlistsToRender = playlistQueried
+ }
+ return (
+
+
+ + Playlists +
+
+
+
+
+
+ )
+}
diff --git a/src/pages/Search/Search.tsx b/src/pages/Search/Search.tsx
new file mode 100644
index 0000000..7dd9572
--- /dev/null
+++ b/src/pages/Search/Search.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import Header from '../../components/Header'
+import ListItem from '../../components/ListItem'
+import likeImg from '../../assets/img/liked.png'
+import PageContent from '../../components/PageContent'
+import SearchInput from '../../components/SearchInput'
+import SearchContent from '../../components/SearchContent'
+import LazyLoad from '../../components/common/LazyLoad'
+import { useFetchSongs } from '../../hooks/fetchSongs'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../state/store'
+export const Search = () => {
+ const {getQueriedSongs} = useFetchSongs()
+ const songListQueried = useSelector((state: RootState) => state.global.songListQueried);
+
+ return (
+
+
+ + Playlists +
+
+
+
+
+
+ )
+}
diff --git a/src/state/features/authSlice.ts b/src/state/features/authSlice.ts
new file mode 100644
index 0000000..8f5ee20
--- /dev/null
+++ b/src/state/features/authSlice.ts
@@ -0,0 +1,27 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+
+interface AuthState {
+ user: {
+ address: string;
+ publicKey: string;
+ name?: string;
+ } | null;
+}
+const initialState: AuthState = {
+ user: null
+};
+
+export const authSlice = createSlice({
+ name: 'auth',
+ initialState,
+ reducers: {
+ addUser: (state, action) => {
+ state.user = action.payload;
+ },
+ },
+});
+
+export const { addUser } = authSlice.actions;
+
+export default authSlice.reducer;
\ No newline at end of file
diff --git a/src/state/features/globalSlice.ts b/src/state/features/globalSlice.ts
new file mode 100644
index 0000000..5f70eba
--- /dev/null
+++ b/src/state/features/globalSlice.ts
@@ -0,0 +1,348 @@
+import { createSlice } from '@reduxjs/toolkit'
+import { Song } from '../../types'
+
+
+interface ResourceBase {
+ name?: string;
+ id: string;
+ category?: string;
+ categoryName?: string;
+ tags?: string[];
+ created: number;
+ updated: number;
+ user?: string;
+}
+
+interface GlobalState {
+ isLoadingGlobal: boolean
+ downloads: any
+ userAvatarHash: Record
+
+