From aabc2fa63b70079a62cb6ffb47c1542e6c73286d Mon Sep 17 00:00:00 2001 From: real-zephex Date: Fri, 15 Mar 2024 21:23:45 +0530 Subject: features: added anime and pretty much completed it. only search functionality is left to add --- src/app/anime/page.js | 13 +++----- src/app/globals.css | 1 + src/app/header/header.js | 2 +- src/app/info/[id]/page.js | 45 +++++++++++++++++++++++++++ src/app/info/buttons.js | 13 ++++++++ src/app/info/info.css | 67 +++++++++++++++++++++++++++++++++++++++++ src/app/info/page.js | 0 src/app/recent/page.js | 40 ++++++++++++++++++++++++ src/app/recent/recent.css | 67 +++++++++++++++++++++++++++++++++++++++++ src/app/top-airing/page.js | 40 ++++++++++++++++++++++++ src/app/top-airing/trending.css | 0 src/app/video/[animeId]/page.js | 50 ++++++++++++++++++++++++++++++ src/app/video/video.css | 23 ++++++++++++++ 13 files changed, 351 insertions(+), 10 deletions(-) create mode 100644 src/app/info/[id]/page.js create mode 100644 src/app/info/buttons.js create mode 100644 src/app/info/info.css create mode 100644 src/app/info/page.js create mode 100644 src/app/recent/page.js create mode 100644 src/app/recent/recent.css create mode 100644 src/app/top-airing/page.js create mode 100644 src/app/top-airing/trending.css create mode 100644 src/app/video/[animeId]/page.js create mode 100644 src/app/video/video.css (limited to 'src') diff --git a/src/app/anime/page.js b/src/app/anime/page.js index df6b647..964bba5 100644 --- a/src/app/anime/page.js +++ b/src/app/anime/page.js @@ -1,17 +1,12 @@ import './anime.css' -import Image from 'next/image' +import Trending from '../top-airing/page' +import Releases from '../recent/page' export default async function Anime() { return (
-
- - -
+ +
) } \ No newline at end of file diff --git a/src/app/globals.css b/src/app/globals.css index e327d9a..42eb9ad 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,4 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Kanit:wght@400;700&family=Quicksand:wght@400;500;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans&display=swap'); :root { diff --git a/src/app/header/header.js b/src/app/header/header.js index b1ae7bd..03d1328 100644 --- a/src/app/header/header.js +++ b/src/app/header/header.js @@ -5,7 +5,7 @@ export default function Header() {
-

Dramalama

+

Dramalama

diff --git a/src/app/info/[id]/page.js b/src/app/info/[id]/page.js new file mode 100644 index 0000000..43b11ac --- /dev/null +++ b/src/app/info/[id]/page.js @@ -0,0 +1,45 @@ +import "../info.css" +import Image from "next/image"; +import CreateButton from "../buttons"; + +export default async function AnimeInfo({params}) { + let animeID = params.id; + + const info = await getAnimeInfo(animeID); + + return ( +
+
+ {info && ( +
+
+

{info.title}

+ Drama +
+

+ {info.description} +

+
+ )} + +
+ {info && info.episodes.map((item, index) => ( + + ))} +
+ +
+
+ ) +} + +async function getAnimeInfo(anime_id) { + const res = await fetch("https://anime-sensei-api.vercel.app/anime/gogoanime/info/" + anime_id); + const data = res.json(); + return data; +} \ No newline at end of file diff --git a/src/app/info/buttons.js b/src/app/info/buttons.js new file mode 100644 index 0000000..8f041a8 --- /dev/null +++ b/src/app/info/buttons.js @@ -0,0 +1,13 @@ +"use client" + +import Link from "next/link"; +export default function CreateButton({ a }) { + + return ( + + + + ); +} \ No newline at end of file diff --git a/src/app/info/info.css b/src/app/info/info.css new file mode 100644 index 0000000..6d6b9b2 --- /dev/null +++ b/src/app/info/info.css @@ -0,0 +1,67 @@ +.dramaInfoContainer { + display: flex; + flex-direction: column; +} + +.dramaInfo { + display: flex; + flex-direction: column; + width: 95%; + margin: 0px auto; +} + +.titleContainer { + display: flex; + justify-content: space-between; + align-items: center; +} + +.titleContainer p { + color: var(--neon-green ); + width: 60%; + font-family: "Kanit"; + font-size: 24px; +} + +.titleContainer img { + border-radius: 10px; +} + +.dramaDescription { + color: #ffffff81; + font-family: "Lato"; + font-size: 16px; + max-height: 120px; + margin: 20px auto; + text-align: center; + overflow-y: auto; +} + +.buttonContainer { + margin: 5px auto; + text-align: center; + max-height: 200px; + overflow-y: auto; +} + +.dramaButton { + padding: 8px; + font-family: "Atkinson Hyperlegible"; + font-size: 18px; + margin: 5px; + width: 50px; + border-radius: 5px; + border: none; + background-color: var(--light-green); + cursor: pointer; +} + +.dramaButton:hover { + background-color: var(--soft-purple); +} + +@media (prefers-color-scheme: light) { + .dramaDescription { + color: black; + } +} \ No newline at end of file diff --git a/src/app/info/page.js b/src/app/info/page.js new file mode 100644 index 0000000..e69de29 diff --git a/src/app/recent/page.js b/src/app/recent/page.js new file mode 100644 index 0000000..f879e58 --- /dev/null +++ b/src/app/recent/page.js @@ -0,0 +1,40 @@ +import "./recent.css"; +import Image from "next/image"; +import Link from "next/link"; + +export default async function Releases() { + + const data = await test(); + + return ( +
+

+ Recent Releases +

+ +
+ {data && data.results.map((item, index) => ( + +
+ Drama +

+ {item.title} +

+
+ + ))} +
+
+ )} + +async function test() { + const res = await fetch("https://dramalama-api.vercel.app/anime/gogoanime/recent-episodes"); + const data = res.json(); + return data; +} \ No newline at end of file diff --git a/src/app/recent/recent.css b/src/app/recent/recent.css new file mode 100644 index 0000000..3fc5e26 --- /dev/null +++ b/src/app/recent/recent.css @@ -0,0 +1,67 @@ + +.trendingContainer { + display: flex; + flex-direction: column; +} + +.trendingText { + color: white; + font-family: "Open Sans"; + font-size: 30px; + margin: 10px; + /* margin-bottom: 10px; */ +} + +.trending { + width: 98%; + display: flex; + flex-direction: row; + overflow-x: auto; + margin: 0px auto; +} + +/* Customize scrollbar here */ +.trending::-webkit-scrollbar { + height: 5px; +} + +.trendingEntries { + margin: 10px 10px 5px 5px; + text-align: center; + cursor: pointer; + transition: transform 0.2s ease; + +} +.trendingEntries:hover { + transform: scale(1.03); +} + +.trendingEntries img { + border-radius: 10px; + width: 160px; + height: 220px; +} + +.trendingEntries p { + color: white; + max-height: 60px; + max-width: 150px; + overflow-y: auto; + font-family: "Lato"; + margin: 10px auto; + font-size: 18px; +} + +.trendingEntries p::-webkit-scrollbar{ + width: 5px; +} + +@media (prefers-color-scheme: light) { + .trendingText { + color: black; + } + + .trendingEntries p { + color: black; + } +} \ No newline at end of file diff --git a/src/app/top-airing/page.js b/src/app/top-airing/page.js new file mode 100644 index 0000000..4b660fc --- /dev/null +++ b/src/app/top-airing/page.js @@ -0,0 +1,40 @@ +import "./trending.css"; +import Image from "next/image"; +import Link from "next/link"; + +export default async function Trending() { + + const data = await test(); + + return ( +
+

+ Trending +

+ +
+ {data && data.results.map((item, index) => ( + +
+ Drama +

+ {item.title} +

+
+ + ))} +
+
+ )} + +async function test() { + const res = await fetch("https://dramalama-api.vercel.app/anime/gogoanime/top-airing"); + const data = res.json(); + return data; +} \ No newline at end of file diff --git a/src/app/top-airing/trending.css b/src/app/top-airing/trending.css new file mode 100644 index 0000000..e69de29 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 ( +
+ {loading && ( +

Loading...

+ )} + {videoLink && ( +
+

{epi[0]} - {epi[1]}

+ +
+ )} +
+ ); +} 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 -- cgit v1.2.3