Merge pull request #58 from adenlall/master

Add Progress Bar to the app
Dovakiin0 · Apr 12, 2024 · c93272b · c93272b
2 parents 77133a6 + de82174
commit c93272b
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 25 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "hls.js": "^1.4.12",
     "html-react-parser": "^3.0.16",
     "next": "13.4.1",
+    "nextjs-progressloader": "^1.2.0",
     "postcss": "8.4.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,8 @@ import { Metadata } from "next";
 import Script from "next/script";
 import Header from "@/partials/Header";
 import { Footer } from "@/partials/Footer";
+import { Suspense } from "react";
+import ProgressBar from "@/components/Progress";
 
 const APP_NAME = "Kitsune";
 const APP_DEFAULT_TITLE = "Kitsune | Anime Streaming";
@@ -57,6 +59,9 @@ export default function RootLayout({
   gtag('config', 'G-X9RZ58XPH1');`}
       </Script>
       <body>
+        <Suspense>
+          <ProgressBar/>
+        </Suspense>
         <Header />
         <div className="min-h-screen">{children}</div>
         <Footer />

diff --git a/src/components/AnimeCard.tsx b/src/components/AnimeCard.tsx
@@ -4,6 +4,7 @@ import { FaPlay } from "react-icons/fa";
 import { RxCross1 } from "react-icons/rx";
 import { motion } from "framer-motion";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 
 type AnimeProps = {
   id: string;
@@ -41,32 +42,28 @@ function AnimeCard({
         </div>
       )}
 
-      <motion.div
-        whileTap={{ scale: 0.9 }}
-        onClick={() =>
-          router.push(
-            `/anime/${encodeURIComponent(id)}/watch${episodeId ? "?ep=" + episodeId : ""
-            }`
-          )
-        }
-      >
-        <div className="flex flex-col space-y-2 justify-between bg-base-300 shadow-xl relative">
-          <img
-            src={src}
-            alt={title}
-            className="w-full h-[250px] lg:h-[300px] delay-50 object-cover rounded-lg"
-          />
-          <div className="absolute bottom-0 p-2 flex flex-col w-full bg-gradient-to-b from-transparent to-pink-900">
-            <p className="font-extrabold text-sm capitalize truncate">
-              {title}
-            </p>
-            <div className="flex item-center justify-between">
-              <p className="text-xs">{additional}</p>
-              <FaPlay />
+      <Link href={`/anime/${encodeURIComponent(id)}/watch${episodeId ? "?ep=" + episodeId : ""}`} >
+        <motion.div
+          whileTap={{ scale: 0.9 }}
+        >
+          <div className="flex flex-col space-y-2 justify-between bg-base-300 shadow-xl relative">
+            <img
+              src={src}
+              alt={title}
+              className="w-full h-[250px] lg:h-[300px] delay-50 object-cover rounded-lg"
+            />
+            <div className="absolute bottom-0 p-2 flex flex-col w-full bg-gradient-to-b from-transparent to-pink-900">
+              <p className="font-extrabold text-sm capitalize truncate">
+                {title}
+              </p>
+              <div className="flex item-center justify-between">
+                <p className="text-xs">{additional}</p>
+                <FaPlay />
+              </div>
             </div>
           </div>
-        </div>
-      </motion.div>
+        </motion.div>
+      </Link>
     </motion.div>
   );
 }

diff --git a/src/components/Progress.tsx b/src/components/Progress.tsx
@@ -0,0 +1,6 @@
+'use client';
+import { ProgressLoader } from 'nextjs-progressloader';
+
+export default function ProgressBar() {
+    return <ProgressLoader height={7}  color='#fff' />;
+}