Search: UI search page, handle search results with keyword

src/App.tsx

@@ -11,9 +11,10 @@ import VideoDetails from "./pages/Detail/VideoDetails";
 import useStore from "./zustand/menu";
 import ArtistDetails from "./pages/Detail/ArtistDetails";
 import Error from "./components/Error";
-import Search from "./pages/Search";
+import Search from "./pages/Search/Search";
 import Topics from "./pages/ListenToday/Topics";
 import TopicDetails from "./pages/Detail/TopicDetails";
+import Results from "./pages/Search/Results";
 
 function App() {
   const { player, close } = useStore();
@@ -42,6 +43,7 @@ function App() {
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/search" element={<Search />} />
+        <Route path="/results" element={<Results />} />
         <Route path="/PLAYLIST/:key" element={<PlaylistsDetails />} />
         <Route path="/VIDEO/:key" element={<VideoDetails />} />
         <Route path="/TOPIC/:key" element={<TopicDetails />} />
@@ -59,7 +61,7 @@ function App() {
           right: isPC ? "0px" : player ? "0" : "-100%",
           transition: "all linear 0.3s",
         }}
-        className={`scroll-none overflow-y-scroll md:w-[300px] w-full max-w-full border-l border-r [rgba(28,30,32,0.05)] px-4 h-screen pt-6 fixed top-0 bottom-0 z-[9999] bg-white`}
+        className={`scroll-none overflow-y-scroll md:w-[300px] w-full max-w-full border-l border-r [rgba(28,30,32,0.05)] px-4 h-screen pt-4 fixed top-0 bottom-0 z-[9999] bg-white`}
       >
         <Player />
       </div>

src/apis/artist.ts

@@ -9,3 +9,8 @@ export const getArtistDetails = async (key: string) => {
 
   return data.data;
 };
+
+export const getTrendingArtists = async () => {
+  const data = await client.get("/trendingArtists");
+  return data.data;
+};

src/apis/client.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
 
 export default axios.create({
-  baseURL: "https://proxy-nct.vercel.app",
+  baseURL: "http://localhost:3001",
 });

src/apis/search.ts

@@ -0,0 +1,16 @@
+import client from "./client";
+
+export const getTopKeyword = async () => {
+  const res = await client.get("top-keyword");
+  return res.data;
+};
+
+export const searchKeyword = async (keyword: string) => {
+  const res = await client.get("search", {
+    params: {
+      keyword,
+    },
+  });
+
+  return res.data;
+};

src/components/Error.tsx

@@ -1,23 +1,26 @@
 import { Link } from "react-router-dom";
+import MainLayout from "../layout/MainLayout";
 import { img404 } from "../utils/contants";
 
 const Error = () => {
   return (
-    <div className="h-screen flex items-center justify-center">
-      <div>
+    <MainLayout>
+      <div className="flex items-center justify-center">
         <div>
-          <img src={img404} alt="not-found" />
-        </div>
-        <div className="w-full flex justify-center">
-          <Link
-            className="bg-gray-400 px-4 py-2 text-white rounded-md font-semibold block"
-            to="/"
-          >
-            Trở lại trang chủ
-          </Link>
+          <div>
+            <img src={img404} alt="not-found" />
+          </div>
+          <div className="w-full flex justify-center">
+            <Link
+              className="bg-gray-400 px-4 py-2 text-white rounded-md font-semibold block"
+              to="/"
+            >
+              Trở lại trang chủ
+            </Link>
+          </div>
         </div>
       </div>
-    </div>
+    </MainLayout>
   );
 };
 

src/components/Player/PlayerThumnail.tsx

@@ -26,19 +26,19 @@ const PlayerThumnail: FC<PlayerThumnailProps> = ({
 }) => {
   return (
     <div
-      className={`bg-[rgba(28,30,32,0.02)] rounded-md mb-10 relative ${
+      className={`bg-[rgba(28,30,32,0.02)] rounded-md mb-5 relative ${
         showListSong && "h-full"
       }`}
     >
-      <div className="w-full flex justify-center pt-5 py-2 md:hidden">
+      <div className="w-full flex justify-center p-4 md:hidden">
         <GrClose onClick={() => setPlayer()} className="w-5 h-5" />
       </div>
       {showListSong ? (
         <ListSong setCurrentIndex={setCurrentIndexMemo} songIds={songMemo} />
       ) : (
         <div>
-          <div className="p-4">
-            <div className="w-full aspect-auto">
+          <div className="pr-4 pl-4 pb-4">
+            <div className="w-full aspect-[1/1]">
               <LazyLoadImage
                 className="rounded-md border"
                 src={thumbnail || imgNotFound}

src/components/Player/index.tsx

@@ -15,7 +15,6 @@ import { getSong } from "../../apis/song";
 import Controler from "./Controler";
 import PlayReview from "../Song/PlayReview";
 import { toast } from "react-hot-toast";
-import Loading from "../Loading";
 
 const Player = () => {
   const { songIds, currentIndex, setCurrentIndex } = useContext(PlayerContext);
@@ -76,14 +75,21 @@ const Player = () => {
     audioRef.current.play();
   }, [songIds, data, songKey]);
 
-  // useEffect(() => {
-  //   if (data?.song?.streamUrls?.length === 0) {
-  //     toast.error("Không tìm thấy bài hát!");
-  //     if (currentIndex <= songIds.length - 1) {
-  //       handleNextSong();
-  //     }
-  //   }
-  // }, [data?.song?.streamUrls]);
+  useEffect(() => {
+    if (data?.song?.streamUrls?.length === 0) {
+      toast.error("Không tìm thấy bài hát!");
+      if (currentIndex === songIds.length) {
+        return;
+      }
+
+      return handleNextSong();
+    }
+  }, [data?.song?.streamUrls]);
+
+  useEffect(() => {
+    audioRef?.current?.pause();
+    setCurrentTime(0);
+  }, [currentIndex]);
 
   useEffect(() => {
     if (!audioRef.current) return;
@@ -161,7 +167,7 @@ const Player = () => {
     () =>
       setCurrentIndex((prev: number) => {
         if (prev >= songIds.length - 1) {
-          return 0;
+          return prev;
         }
 
         return prev + 1;
@@ -173,7 +179,7 @@ const Player = () => {
     () =>
       setCurrentIndex((prev: number) => {
         if (prev <= 0) {
-          return songIds.length - 1;
+          return prev;
         }
 
         return prev - 1;
@@ -201,22 +207,16 @@ const Player = () => {
         setShowConTrolVolume(false);
       }}
     >
-      {!data ? (
-        <Loading />
-      ) : (
-        <PlayerThumnail
-          thumbnail={data?.song?.thumbnail}
-          title={data?.song?.title}
-          artists={data?.song?.artists
-            ?.map((item: any) => item.name)
-            .join(", ")}
-          setCurrentIndexMemo={setCurrentIndexMemo}
-          setPlayer={setPlayerMemo}
-          showListSong={showListSong}
-          songMemo={songMemo}
-          key={"player"}
-        />
-      )}
+      <PlayerThumnail
+        thumbnail={data?.song?.thumbnail}
+        title={data?.song?.title}
+        artists={data?.song?.artists?.map((item: any) => item.name).join(", ")}
+        setCurrentIndexMemo={setCurrentIndexMemo}
+        setPlayer={setPlayerMemo}
+        showListSong={showListSong}
+        songMemo={songMemo}
+        key={"player"}
+      />
 
       <Controler
         audioRef={audioRef}

src/components/Search/TrendingItem.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from "react";
+import { Link } from "react-router-dom";
+
+interface TrendingItemProps {
+  position: string;
+  name: string;
+}
+
+const TrendingItem: FC<TrendingItemProps> = ({ position, name }) => {
+  return (
+    <Link
+      to={`/results?q=${name}`}
+      className="bg-gray-200 py-1 px-2 flex items-center rounded-sm cursor-pointer"
+    >
+      <span className="text-blue-500 font-semibold">#{position}</span>
+
+      <p className="text-gray-400 text-sm font-normal ml-1">{name}</p>
+    </Link>
+  );
+};
+
+export default TrendingItem;

src/components/Skeleton/ListSongSkeleton.tsx

@@ -3,7 +3,7 @@ import SongItemSkeleton from "./SongItemSkeleton";
 
 const ListSongSkeleton = () => {
   return (
-    <>
+    <div className="my-5">
       <div>
         <h1 className="w-[200px] h-6 mt-4 skeleton"></h1>
       </div>
@@ -20,7 +20,7 @@ const ListSongSkeleton = () => {
         <SongItemSkeleton />
         <SongItemSkeleton />
       </div>
-    </>
+    </div>
   );
 };
 

src/components/Skeleton/ResultsSkeleton.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import ListSongSkeleton from "./ListSongSkeleton";
+import SliderSkeleton from "./SliderSkeleton";
+
+const ResultsSkeleton = () => {
+  return (
+    <div>
+      <h1 className="mb-5 font-semibold text-2xl h-8 skeleton"></h1>
+
+      <ListSongSkeleton />
+      <SliderSkeleton />
+      <SliderSkeleton />
+    </div>
+  );
+};
+
+export default ResultsSkeleton;

src/components/Skeleton/SearchSkeleton.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+const SearchSkeleton = () => {
+  return (
+    <>
+      <div className="mt-5">
+        <h1 className="mb-5 font-semibold text-xl skeleton h-6"></h1>
+        <div className="flex items-center flex-wrap gap-2">
+          <div className="w-[100px] py-4 skeleton"></div>
+          <div className="w-[100px] py-4 skeleton"></div>
+          <div className="w-[100px] py-4 skeleton"></div>
+          <div className="w-[100px] py-4 skeleton"></div>
+          <div className="w-[100px] py-4 skeleton"></div>
+          <div className="w-[100px] py-4 skeleton"></div>
+          <div className="w-[100px] py-4 skeleton"></div>
+          <div className="w-[100px] py-4 skeleton"></div>
+        </div>
+      </div>
+
+      <div className="mt-5">
+        <h1 className="mb-5 font-semibold text-xl skeleton h-6"></h1>
+        <div className="flex items-center flex-wrap gap-2">
+          <div className="w-[100px] py-4 skeleton"></div>
+          <div className="w-[100px] py-4 skeleton"></div>
+          <div className="w-[100px] py-4 skeleton"></div>
+          <div className="w-[100px] py-4 skeleton"></div>
+          <div className="w-[100px] py-4 skeleton"></div>
+          <div className="w-[100px] py-4 skeleton"></div>
+          <div className="w-[100px] py-4 skeleton"></div>
+          <div className="w-[100px] py-4 skeleton"></div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SearchSkeleton;

src/components/Skeleton/SliderSkeleton.tsx

@@ -3,7 +3,7 @@ import GridLayout from "../../layout/GridLayout";
 
 const SliderSkeleton = () => {
   return (
-    <>
+    <div className="my-5">
       <div>
         <h1 className="mb-5 skeleton h-6 w-[150px]"></h1>
       </div>
@@ -13,7 +13,7 @@ const SliderSkeleton = () => {
         <div className="skeleton aspect-[1/1] rounded-md"></div>
         <div className="skeleton aspect-[1/1] rounded-md"></div>
       </GridLayout>
-    </>
+    </div>
   );
 };
 

src/pages/Detail/ArtistDetails.tsx

@@ -61,14 +61,14 @@ const ArtistDetails = () => {
 
           {data?.playlist?.playlist && (
             <div>
-              <h1 className="mb-5 font-semibold text-xl">Playlist</h1>
+              <h1 className="my-5 font-semibold text-xl">Playlist</h1>
               <Slider banners={data?.playlist?.playlist} />
             </div>
           )}
 
           {data?.video?.video && (
             <div>
-              <h1 className="mb-5 font-semibold text-xl">Video</h1>
+              <h1 className="my-5 font-semibold text-xl">Video</h1>
               <Slider radio="16/9" banners={data?.video?.video} />
             </div>
           )}

src/pages/Detail/VideoDetails.tsx

@@ -48,7 +48,7 @@ const VideoDetails = () => {
           <p className="mt-5 flex items-center">
             {data?.video?.artists?.map((item: any) => (
               <Link
-                to={item.artistId ? `/ARTIST/${item.artistId}` : "#"}
+                to={item.shortLink ? `/ARTIST/${item.shortLink}` : "#"}
                 key={item.artistId}
               >
                 <div className="rounded-full w-10 h-10 overflow-hidden border">