New release

components/BottomNavigation.tsx

@@ -0,0 +1,35 @@
+import {
+  MagnifyingGlassIcon,
+  MusicalNoteIcon,
+  RectangleStackIcon,
+} from "@heroicons/react/20/solid";
+import { useKaraokeState } from "../hooks/karaoke";
+
+export default function BottomNavigation() {
+  const { activeIndex, setActiveIndex } = useKaraokeState();
+  return (
+    <div className="btm-nav static flex-shrink-0">
+      <button
+        className={`text-primary ${activeIndex === 0 ? "active" : ""}`}
+        onClick={() => setActiveIndex(0)}
+      >
+        <MagnifyingGlassIcon className="w-6 h-6" />
+        <span className="btm-nav-label">Tìm kiếm</span>
+      </button>
+      <button
+        className={`text-primary ${activeIndex === 1 ? "active" : ""}`}
+        onClick={() => setActiveIndex(1)}
+      >
+        <MusicalNoteIcon className="w-6 h-6" />
+        <span className="btm-nav-label">Ca sĩ</span>
+      </button>
+      <button
+        className={`text-primary ${activeIndex === 2 ? "active" : ""}`}
+        onClick={() => setActiveIndex(2)}
+      >
+        <RectangleStackIcon className="w-6 h-6" />
+        <span className="btm-nav-label">Thể loại</span>
+      </button>
+    </div>
+  );
+}

components/ListSingerGrid.tsx

@@ -0,0 +1,84 @@
+import Image from "next/image";
+import { Fragment, useState } from "react";
+import { useQuery } from "react-query";
+import { getSkeletonItems, getArtists } from "../utils/api";
+import { useKaraokeState } from "../hooks/karaoke";
+
+export default function ListSingerGrid() {
+  const [gender, setGender] = useState(1);
+  const { data: topartists, isLoading } = useQuery(["getArtists", gender], () =>
+    getArtists(gender)
+  );
+  const { setSearchTerm } = useKaraokeState();
+  const { artist } = topartists || {};
+
+  return (
+    <>
+      <div className="tabs tabs-boxed col-span-full justify-center bg-transparent">
+        <div
+          className={`tab ${gender === 1 ? "tab-active" : ""}`}
+          onClick={() => setGender(1)}
+        >
+          Nam
+        </div>
+        <div
+          className={`tab ${gender === 2 ? "tab-active" : ""}`}
+          onClick={() => setGender(2)}
+        >
+          Nữ
+        </div>
+        <div
+          className={`tab ${gender === 3 ? "tab-active" : ""}`}
+          onClick={() => setGender(3)}
+        >
+          Nhóm nhạc
+        </div>
+      </div>
+      {isLoading && (
+        <>
+          <div className="absolute inset-0 bg-gradient-to-t from-base-300 z-50" />
+          {getSkeletonItems(16).map((s) => (
+            <div
+              key={s}
+              className="card bg-gray-300 animate-pulse w-full aspect-w-4 aspect-h-3"
+            />
+          ))}
+        </>
+      )}
+      {artist?.map((artist) => {
+        return (
+          <Fragment key={artist.name}>
+            <div
+              className="card overflow-hidden bg-white shadow hover:shadow-md cursor-pointer flex-auto"
+              onClick={() => {
+                setSearchTerm(artist.name);
+              }}
+            >
+              <figure className="relative w-full aspect-square">
+                <Image
+                  unoptimized
+                  src={artist.imageUrl}
+                  priority
+                  alt={artist.name}
+                  layout="fill"
+                  className="animate-pulse bg-gray-400"
+                  onLoad={(ev) =>
+                    ev.currentTarget.classList.remove("animate-pulse")
+                  }
+                  onErrorCapture={(ev) => {
+                    ev.currentTarget.src = "/assets/avatar.jpeg";
+                  }}
+                />
+              </figure>
+              <div className="card-body p-2">
+                <h2 className="font-semibold text-sm 2xl:text-2xl line-clamp-2 h-[2.7em]">
+                  {artist.name}
+                </h2>
+              </div>
+            </div>
+          </Fragment>
+        );
+      })}
+    </>
+  );
+}

components/ListTopicsGrid.tsx

@@ -0,0 +1,62 @@
+import Image from "next/image";
+import { Fragment } from "react";
+import { useQuery } from "react-query";
+import { getSkeletonItems, getTopics } from "../utils/api";
+import { useKaraokeState } from "../hooks/karaoke";
+
+export default function ListTopicsGrid() {
+  const { data, isLoading } = useQuery(["getTopics"], getTopics);
+  const { setActiveIndex, setSearchTerm } = useKaraokeState();
+  const { topic: topics } = data || {};
+
+  return (
+    <>
+      {isLoading && (
+        <>
+          <div className="absolute inset-0 bg-gradient-to-t from-base-300 z-50" />
+          {getSkeletonItems(16).map((s) => (
+            <div
+              key={s}
+              className="card bg-gray-300 animate-pulse w-full aspect-w-4 aspect-h-3"
+            />
+          ))}
+        </>
+      )}
+      {topics?.map((topic) => {
+        return (
+          <Fragment key={topic.key}>
+            <div
+              className="card overflow-hidden bg-white shadow hover:shadow-md cursor-pointer flex-auto"
+              onClick={() => {
+                setSearchTerm(topic.title);
+                setActiveIndex(0);
+              }}
+            >
+              <figure className="relative w-full aspect-w-16 aspect-h-5">
+                <Image
+                  unoptimized
+                  src={topic.coverImageURL}
+                  priority
+                  alt={topic.title}
+                  layout="fill"
+                  className="animate-pulse bg-gray-400"
+                  onLoad={(ev) =>
+                    ev.currentTarget.classList.remove("animate-pulse")
+                  }
+                  onErrorCapture={(ev) => {
+                    ev.currentTarget.src = "/assets/avatar.jpeg";
+                  }}
+                />
+              </figure>
+              <div className="card-body p-2">
+                <h2 className="font-semibold text-sm 2xl:text-2xl line-clamp-2 h-[2.7em]">
+                  {topic.title}
+                </h2>
+              </div>
+            </div>
+          </Fragment>
+        );
+      })}
+    </>
+  );
+}

components/SearchResultGrid.tsx

@@ -0,0 +1,97 @@
+import Image from "next/image";
+import { Fragment } from "react";
+import { useQuery } from "react-query";
+import { RecommendedVideo, SearchResult } from "../types/invidious";
+import { getSearchResult, getSkeletonItems, getVideoInfo } from "../utils/api";
+import { useKaraokeState } from "../hooks/karaoke";
+
+export default function SearchResultGrid({
+  onClick = () => {},
+}: {
+  onClick?: (video: SearchResult | RecommendedVideo) => void;
+}) {
+  const { searchTerm, curVideoId, isKaraoke } = useKaraokeState();
+  const prefix = isKaraoke ? '"karaoke" ' : "";
+
+  const titleIncludesKaraoke = ({ title }) => {
+    const lcTitle = title.toLowerCase();
+    return lcTitle.includes("karaoke") || lcTitle.includes("beat");
+  };
+
+  const { data: recommendedVideos, isLoading: infoLoading } = useQuery(
+    ["videoInfo", curVideoId],
+    () => getVideoInfo(curVideoId),
+    {
+      enabled: !!curVideoId,
+      select: ({ recommendedVideos }) => {
+        if (isKaraoke) {
+          return recommendedVideos.filter(titleIncludesKaraoke);
+        }
+
+        return recommendedVideos;
+      },
+    }
+  );
+
+  const { data: searchResults, isFetching: searchLoading } = useQuery(
+    ["searchResult", prefix + searchTerm],
+    () => getSearchResult({ q: prefix + searchTerm }),
+    {
+      select: (results) => {
+        if (isKaraoke) {
+          return results.filter(titleIncludesKaraoke);
+        }
+
+        return results;
+      },
+    }
+  );
+  const isLoading = searchLoading || infoLoading;
+  const renderList =
+    searchTerm || !recommendedVideos?.length
+      ? searchResults
+      : recommendedVideos;
+
+  return (
+    <>
+      {isLoading && (
+        <>
+          <div className="absolute inset-0 bg-gradient-to-t from-base-300 z-50" />
+          {getSkeletonItems(16).map((s) => (
+            <div
+              key={s}
+              className="card bg-gray-300 animate-pulse w-full aspect-w-4 aspect-h-3"
+            />
+          ))}
+        </>
+      )}
+      {renderList?.map((rcm) => {
+        return !rcm ? null : (
+          <Fragment key={rcm.videoId}>
+            {/* The button to open modal */}
+            <label htmlFor="modal-video" onClick={() => onClick(rcm)}>
+              <div className="card overflow-hidden bg-white shadow hover:shadow-md cursor-pointer flex-auto">
+                <figure className="relative w-full aspect-video">
+                  <Image
+                    unoptimized
+                    src={`https://yt.funami.tech/vi/${rcm.videoId}/mqdefault.jpg`}
+                    priority
+                    alt={rcm.title}
+                    layout="fill"
+                    className="bg-gray-400"
+                  />
+                </figure>
+                <div className="card-body p-2">
+                  <h2 className="font-semibold text-sm 2xl:text-2xl line-clamp-2 h-[2.7em]">
+                    {rcm.title}
+                  </h2>
+                  <p className="text-xs 2xl:text-xl truncate">{rcm.author}</p>
+                </div>
+              </div>
+            </label>
+          </Fragment>
+        );
+      })}
+    </>
+  );
+}

components/VideoHorizontalCard.tsx

@@ -6,7 +6,7 @@ interface VideoHorizontalCardProps {
   onSelect?: (video: PlaylistItem) => void;
   onDelete?: (video: PlaylistItem) => void;
 }
-export function VideoHorizontalCard({
+export default function VideoHorizontalCard({
   video,
   onSelect = () => {},
   onDelete = () => {},

components/YoutubePlayer.tsx

@@ -35,7 +35,7 @@ function YoutubePlayer({ videoId, nextSong, className = "", extra = null }) {
 
   useEffect(() => {
     const player = playerRef.current?.getInternalPlayer();
-    updatePlayerState(player);
+    if (player) updatePlayerState(player);
   }, [videoId]);
 
   const playPauseBtn = useMemo(
@@ -47,6 +47,7 @@ function YoutubePlayer({ videoId, nextSong, className = "", extra = null }) {
             onClick: async () => {
               try {
                 const player = playerRef.current?.getInternalPlayer();
+                if (!player) return;
                 setPlayerState(await player.getPlayerState());
                 await player.pauseVideo();
               } catch (error) {
@@ -60,8 +61,9 @@ function YoutubePlayer({ videoId, nextSong, className = "", extra = null }) {
             onClick: async () => {
               try {
                 const player = playerRef.current?.getInternalPlayer();
-                setPlayerState(await player.getPlayerState());
-                await player.playVideo();
+                if (!player) return;
+                setPlayerState(await player?.getPlayerState());
+                await player?.playVideo();
               } catch (error) {
                 console.log(error);
               }
@@ -79,6 +81,7 @@ function YoutubePlayer({ videoId, nextSong, className = "", extra = null }) {
             onClick: async () => {
               try {
                 const player = playerRef.current?.getInternalPlayer();
+                if (!player) return;
                 await player.mute();
                 setIsMuted(true);
               } catch (error) {
@@ -92,6 +95,7 @@ function YoutubePlayer({ videoId, nextSong, className = "", extra = null }) {
             onClick: async () => {
               try {
                 const player = playerRef.current?.getInternalPlayer();
+                if (!player) return;
                 await player.unMute();
                 setIsMuted(false);
               } catch (error) {
@@ -116,6 +120,7 @@ function YoutubePlayer({ videoId, nextSong, className = "", extra = null }) {
         onClick: async () => {
           try {
             const player = playerRef.current?.getInternalPlayer();
+            if (!player) return;
             await player.seekTo(0, true);
           } catch (error) {
             console.log(error);
@@ -138,7 +143,13 @@ function YoutubePlayer({ videoId, nextSong, className = "", extra = null }) {
       >
         {!videoId ? (
           <div className="h-full w-full flex items-center justify-center bg-black">
-            <Image src="/icon-192.png" width={48} height={48} className="" />
+            <Image
+              src="/icon-192.png"
+              width={48}
+              height={48}
+              className=""
+              alt="KaraTube's Logo"
+            />
           </div>
         ) : (
           <YouTube