fix bug

src/components/Player/Controler.tsx

@@ -82,6 +82,7 @@ const Controler: FC<ControlerProps> = ({
             className="volume-control absolute left-[-65px] top-[-75px] bg-gray-200 flex items-center justify-center p-2 rounded-md rotate-[-90deg]"
           >
             <input
+              id="slider"
               value={volume}
               onChange={(e) => handleVolumeChange(e)}
               type="range"

src/components/Player/PlayerThumnail.tsx

@@ -33,8 +33,13 @@ const PlayerThumnail: FC<PlayerThumnailProps> = ({
         showListSong && "h-full"
       }`}
     >
-      <div className="w-full flex justify-center p-4 md:hidden">
-        <GrClose onClick={() => setPlayer()} className="w-5 h-5" />
+      <div className="w-full flex justify-center md:hidden">
+        <div
+          onClick={() => setPlayer()}
+          className="w-5 h-5 rounded-full bg-red-500 flex items-center justify-center my-1"
+        >
+          <GrClose className="w-3 h-3 text-white" />
+        </div>
       </div>
       {showListSong ? (
         <ListSong setCurrentIndex={setCurrentIndexMemo} songIds={songMemo} />

src/components/Player/index.tsx

@@ -69,6 +69,16 @@ const Player = () => {
     const max = width + left;
     const min = left;
 
+    if (clientX >= max) {
+      audioRef.current.currentTime = audioRef.current.duration;
+      return setCurrentTime(audioRef.current.duration);
+    }
+
+    if (clientX <= min) {
+      audioRef.current.currentTime = 0;
+      return setCurrentTime(0);
+    }
+
     if (clientX <= max && clientX >= min) {
       const percent = (clientX - left) / width;
       audioRef.current.currentTime = audioRef.current.duration * percent;

src/components/Sidebar/Logo.tsx

@@ -1,4 +1,5 @@
 import { FC } from "react";
+import { Link } from "react-router-dom";
 
 interface LogoProps {
   width: string | number;
@@ -7,7 +8,7 @@ interface LogoProps {
 
 const Logo: FC<LogoProps> = ({ width, height }) => {
   return (
-    <div className="w-full px-4">
+    <Link to="/" className="w-full px-4 block">
       <div
         style={{
           width: width,
@@ -17,7 +18,7 @@ const Logo: FC<LogoProps> = ({ width, height }) => {
       >
         <h1 className="font-semibold text-white">NCA</h1>
       </div>
-    </div>
+    </Link>
   );
 };
 

src/components/Sidebar/SidebarItem.tsx

@@ -6,6 +6,7 @@ interface SidebarItemType {
   name: string;
   path: string | null;
   icon: Function;
+  background?: string;
   child?:
     | {
         name: string;
@@ -31,6 +32,8 @@ const SidebarItem: FC<SidebarItemProps> = ({ item }) => {
 
   const location = useLocation();
 
+  console.log(item.background);
+
   return (
     <li
       className={`py-2 pl-4 sidebar-parent ${
@@ -42,9 +45,12 @@ const SidebarItem: FC<SidebarItemProps> = ({ item }) => {
         to={item.path ? item.path : "#"}
         className="flex items-center justify-between"
       >
-        <div className="flex items-center">
-          <item.icon className={`w-5 h-5 mr-2 text-blue-500`} />
-          <span>{item.name}</span>
+        <div
+          className="flex items-center font-semibold"
+          style={{ color: item.background }}
+        >
+          <item.icon className={`w-5 h-5 mr-2`} />
+          <span className="text-black font-normal">{item.name}</span>
         </div>
         {item.child && (
           <span>

src/components/Sidebar/index.ts

@@ -9,13 +9,15 @@ export const sidebar = [
     name: "Tìm Kiếm",
     path: "/search",
     icon: RiSearchLine,
+    background: "#2ecc71",
     child: null,
   },
   {
     name: "Trang Chủ",
     path: "/",
     icon: AiOutlineHome,
     child: null,
+    background: "#3498db",
   },
   {
     name: "Khám Phá",
@@ -39,17 +41,20 @@ export const sidebar = [
         path: "/artist",
       },
     ],
+    background: "#f1c40f",
   },
   {
     name: "Chủ đề",
     path: "/topics",
     icon: ImHeadphones,
+    background: "#9b59b6",
   },
   {
     name: "BXH",
     path: "/bxh",
     icon: HiChartSquareBar,
     child: null,
+    background: "#e67e22",
   },
   {
     name: "Lịch sử",

src/components/Slider/Banner.tsx

@@ -24,7 +24,7 @@ const Banner: FC<BannerProps> = ({ banners }) => {
         <SwiperSlide key={item.key}>
           <div className="w-full aspect-auto rounded-md overflow-hidden">
             <LazyLoadImage
-              className="rounded-md border"
+              className="rounded-md"
               src={
                 item.coverImageURL ||
                 item.imageUrl ||

src/components/Slider/Item.tsx

@@ -40,7 +40,7 @@ const ItemCmp = ({ item, type, radio = "1/1" }: ItemType) => {
           effect="blur"
           width="100%"
           height="100%"
-          className="rounded-md border"
+          className="rounded-md"
         />
 
         <p className="line-clamp-1 font-semibold text-sm">{item?.title}</p>

src/components/Song/SongItem.tsx

@@ -15,13 +15,13 @@ const SongItem: FC<SongItemProps> = ({ item, onClick, index }) => {
       className="flex items-start p-2 rounded-md hover:bg-gray-200 transition-colors cursor-pointer"
       onClick={() => onClick(index)}
     >
-      <div className="w-[54px] h-[54px] shadow-md">
+      <div className="w-[54px] h-[54px]">
         <LazyLoadImage
           src={item.thumbnail || imgNotFound}
           alt={item.title}
           width="100%"
           height="100%"
-          className="rounded-md border"
+          className="rounded-md"
           effect="blur"
         />
       </div>

src/pages/Detail/ArtistDetails.tsx

@@ -7,6 +7,7 @@ import Slider from "../../components/Slider";
 import WrapSong from "../../components/Song/WrapSong";
 import MainLayout from "../../layout/MainLayout";
 import { ArtistDetails as ArtistDetailsType } from "../../model/artitst";
+import { imgNotFound } from "../../utils/contants";
 
 const ArtistDetails = () => {
   const { shortLink } = useParams();
@@ -37,7 +38,11 @@ const ArtistDetails = () => {
 
             <div className="absolute left-0 bottom-0 m-4 pr-4 rounded-full shadow-md flex items-center bg-black">
               <div className="w-12 h-12 rounded-full overflow-hidden">
-                <img className="rounded-full" src={data?.artist?.imageUrl} />
+                <img
+                  alt={data?.artist?.name}
+                  className="rounded-full"
+                  src={data?.artist?.imageUrl}
+                />
               </div>
               <p className="text-white ml-2 font-semibold">
                 {data?.artist?.name}

src/pages/Detail/SongDetails.tsx

@@ -1,19 +1,15 @@
 import dayjs from "dayjs";
-import { useContext } from "react";
 import { AiFillPlayCircle } from "react-icons/ai";
 import { Link, useParams } from "react-router-dom";
 import useSWR from "swr";
 import { getLyric, getSong } from "../../apis/song";
 import Error from "../../components/Shared/Error";
 import DetailSkeleton from "../../components/Skeleton/DetailSkeleton";
-import { PlayerContext } from "../../context/PlayerContext";
 import MainLayout from "../../layout/MainLayout";
 
 const SongDetails = () => {
   const { key } = useParams();
 
-  const { setSongId, setCurrentIndex, songIds } = useContext(PlayerContext);
-
   const { data, error } = useSWR(`song-${key}`, () => getSong(String(key)));
   const { data: lyric, error: errorLyric } = useSWR(`lyric-${key}`, () =>
     getLyric(String(key))
@@ -27,16 +23,6 @@ const SongDetails = () => {
     return <Error />;
   }
 
-  const handlePlaySong = () => {
-    const indexSong = songIds.findIndex((item) => item.key === data?.song?.key);
-    if (indexSong) {
-      setCurrentIndex(indexSong);
-    } else {
-      setSongId([data.song]);
-      setCurrentIndex(0);
-    }
-  };
-
   return (
     <MainLayout>
       {!data || !lyric ? (
@@ -47,12 +33,6 @@ const SongDetails = () => {
             <div className="flex items-center justify-center md:w-auto w-full">
               <div className="w-[238px] max-w-full aspect-[1/1] bg-gray-400 rounded-md relative">
                 <img className="rounded-md" src={data?.song?.thumbnail} />
-                <div className="absolute inset-0 rounded-md p-4">
-                  <AiFillPlayCircle
-                    onClick={handlePlaySong}
-                    className="text-white w-10 h-10 absolute bottom-[16px] right-[16px] cursor-pointer"
-                  />
-                </div>
               </div>
             </div>
 

src/utils/contants.ts

@@ -28,7 +28,7 @@ export const forceDownloadFile = (url: string) => {
 };
 
 export const imgNotFound =
-  "https://thumbs.dreamstime.com/b/no-image-available-icon-vector-illustration-flat-design-140476186.jpg";
+  "https://stc-id.nixcdn.com/v12/static/media/default_song_no_cover.a876da66.png";
 
 export const img404 =
   "https://raw.githubusercontent.com/an678-mhg/NextComics/main/public/not-found.png";