The anime section is fully server rendered!

7 files changed, 60 insertions, 64 deletions

diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..dfcc0e9
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 4,
+  "useTabs": true
+}
diff --git a/package-lock.json b/package-lock.json
index 6d2071a..e638567 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@vidstack/react": "^1.10.9",
         "hls.js": "^1.5.7",
+        "media-icons": "^1.1.2",
         "next": "14.1.3",
         "react": "^18",
         "react-dom": "^18",
@@ -2786,6 +2787,14 @@
         "node": ">=16"
       }
     },
+    "node_modules/media-icons": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/media-icons/-/media-icons-1.1.2.tgz",
+      "integrity": "sha512-N5O3Q35YVu7u9/gWGDjV5YAdRmG35OZbibD/vTLXEmhMpsyIS0FiE2xRLPDCIedLBoozDhniEPSEfsVN13CcfQ==",
+      "engines": {
+        "node": ">=16"
+      }
+    },
     "node_modules/memoize-one": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
diff --git a/package.json b/package.json
index fa51c11..17d264e 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@vidstack/react": "^1.10.9",
     "hls.js": "^1.5.7",
+    "media-icons": "^1.1.2",
     "next": "14.1.3",
     "react": "^18",
     "react-dom": "^18",
diff --git a/src/app/info/[id]/page.js b/src/app/info/[id]/page.js
index e49443f..3d1f0f6 100644
--- a/src/app/info/[id]/page.js
+++ b/src/app/info/[id]/page.js
@@ -1,6 +1,6 @@
 import "../info.css";
 import Image from "next/image";
-import CreateButton from "../buttons";
+import Link from "next/link";
 
 export default async function AnimeInfo({ params }) {
 	let animeID = params.id;
@@ -28,7 +28,11 @@ export default async function AnimeInfo({ params }) {
 				<div className="buttonContainer">
 					{info &&
 						info.episodes.map((item, index) => (
-							<CreateButton key={index} a={item} />
+							<Link href={`/video/${item.id}`}>
+								<button className="dramaButton">
+									{item.number}
+								</button>
+							</Link>
 						))}
 				</div>
 			</div>
diff --git a/src/app/info/buttons.js b/src/app/info/buttons.js
deleted file mode 100644
index 6244a2e..0000000
--- a/src/app/info/buttons.js
+++ /dev/null
@@ -1,10 +0,0 @@
-"use client";
-
-import Link from "next/link";
-export default function CreateButton({ a }) {
-	return (
-		<Link href={`/video/${a.id}`}>
-			<button className="dramaButton">{a.number}</button>
-		</Link>
-	);
-}
diff --git a/src/app/video/[animeId]/page.js b/src/app/video/[animeId]/page.js
index 4cd74ce..e8ec670 100644
--- a/src/app/video/[animeId]/page.js
+++ b/src/app/video/[animeId]/page.js
@@ -1,61 +1,49 @@
-"use client";
-
+import { MediaPlayer, MediaProvider } from "@vidstack/react";
+import "@vidstack/react/player/styles/base.css";
+import "@vidstack/react/player/styles/plyr/theme.css";
+import {
+	PlyrLayout,
+	plyrLayoutIcons,
+} from "@vidstack/react/player/layouts/plyr";
 import "../video.css";
-import React, { useState, useEffect } from "react";
-import ReactPlayer from "react-player";
 
-export default function Video({ params }) {
+export default async function Video({ params }) {
 	const id = params.animeId;
-	const [videoLink, setVideoLink] = useState(null);
-	const [loading, setLoading] = useState(true);
-	const [epi, setEpi] = useState("");
-
-	useEffect(() => {
-		fetch("https://anime-sensei-api.vercel.app/anime/gogoanime/watch/" + id)
-			.then((res) => res.json())
-			.then((data) => {
-				const words = id.split("-");
-				const last_two = words.slice(-2).join(" ");
-				const remainingWords = words.slice(0, -2).join(" ");
-				setEpi([last_two, remainingWords]);
-				setVideoLink(data.sources[3].url);
-				setLoading(false);
-			})
-			.catch((error) => {
-				console.log("Some error occured", error);
-				setLoading(false);
-			});
-	}, [id]);
+	const words = id.split("-");
+	const last_two = words.slice(-2).join(" ");
+	const remainingWords = words.slice(0, -2).join(" ");
+	const data = await getVideoLink(id);
+	const link = data.sources[3].url;
 
 	return (
 		<div>
-			{loading && (
-				<p
-					style={{
-						color: "white",
-						fontFamily: "Lato",
-						fontSize: "20px",
-						textAlign: "center",
-					}}
-				>
-					Loading...
+			<div className="video2">
+				<p>
+					{last_two} - {remainingWords}
 				</p>
-			)}
-			{videoLink && (
-				<div className="video2">
-					<p>
-						{epi[0]} - {epi[1]}
-					</p>
-					<ReactPlayer
-						className="react-player"
-						url={videoLink}
-						controls
-						autoplay
-						width="95%"
-						height="95%"
+				<MediaPlayer
+					title="Test Player"
+					src={link}
+					className="testPlayer"
+					playsInline
+					aspectRatio="16/9"
+					load="eager"
+				>
+					<MediaProvider />
+					<PlyrLayout
+						thumbnails="https://image.mux.com/VZtzUzGRv02OhRnZCxcNg49OilvolTqdnFLEqBsTwaxU/storyboard.vtt"
+						icons={plyrLayoutIcons}
 					/>
-				</div>
-			)}
+				</MediaPlayer>
+			</div>
 		</div>
 	);
 }
+
+async function getVideoLink(id) {
+	const res = await fetch(
+		"https://anime-sensei-api.vercel.app/anime/gogoanime/watch/" + id
+	);
+	const data = res.json();
+	return data;
+}
diff --git a/src/app/video/video.css b/src/app/video/video.css
index c739968..aab1f54 100644
--- a/src/app/video/video.css
+++ b/src/app/video/video.css
@@ -6,8 +6,8 @@
 	width: 50%;
 }
 
-.video2 video {
-	border-radius: 5px;
+.testPlayer {
+	border-radius: 10px;
 }
 
 .video2 p {