features: added anime and pretty much completed it. only search functionality is left to add

2 files changed, 73 insertions, 0 deletions

diff --git a/src/app/video/[animeId]/page.js b/src/app/video/[animeId]/page.js
new file mode 100644
index 0000000..b013269
--- /dev/null
+++ b/src/app/video/[animeId]/page.js
@@ -0,0 +1,50 @@
+"use client"
+
+import '../video.css'
+import React, { useState, useEffect } from 'react';
+import ReactPlayer from 'react-player';
+
+export default 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]);
+
+    return (
+        <div>
+            {loading && (
+                <p style={{color: "white", fontFamily: "Lato", fontSize: "20px", textAlign: "center"}}>Loading...</p>
+            )}
+			{videoLink && (
+				<div className='video2'>
+					<p>{epi[0]} - {epi[1]}</p>
+					<ReactPlayer 
+						url={videoLink}
+						controls
+						autoplay
+						width={400}
+						height={"auto"}
+					/>
+				</div>
+			)}
+        </div>
+    );
+}
diff --git a/src/app/video/video.css b/src/app/video/video.css
new file mode 100644
index 0000000..7cd537d
--- /dev/null
+++ b/src/app/video/video.css
@@ -0,0 +1,23 @@
+.video2 {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin: 0px auto;
+}
+
+.video2 video {
+	border-radius: 10px;
+}
+
+.video2 p {
+	color: white;
+	font-family: "Lato";
+	font-size: 20px;
+	text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+	.video2 p {
+		color: black;
+	}
+}
\ No newline at end of file