aboutsummaryrefslogtreecommitdiff
path: root/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'src/app')
-rw-r--r--src/app/anime/page.js14
-rw-r--r--src/app/header/header.js17
-rw-r--r--src/app/info/[id]/page.js26
-rw-r--r--src/app/info/buttons.js9
-rw-r--r--src/app/info/page.js8
-rw-r--r--src/app/kdrama/api/fetchAnime.js18
-rw-r--r--src/app/kdrama/page.js29
-rw-r--r--src/app/layout.js6
-rw-r--r--src/app/page.js8
-rw-r--r--src/app/recent/page.js51
-rw-r--r--src/app/search/page.js99
-rw-r--r--src/app/top-airing/page.js51
-rw-r--r--src/app/video/[animeId]/page.js78
13 files changed, 216 insertions, 198 deletions
diff --git a/src/app/anime/page.js b/src/app/anime/page.js
index 06ea86f..759619d 100644
--- a/src/app/anime/page.js
+++ b/src/app/anime/page.js
@@ -1,14 +1,14 @@
-import './anime.css'
-import Trending from '../top-airing/page'
-import Releases from '../recent/page'
-import Input from '../search/page'
+import "./anime.css";
+import Trending from "../top-airing/page";
+import Releases from "../recent/page";
+import Input from "../search/page";
export default async function Anime() {
return (
<div>
<Input />
<Trending />
- <Releases />
+ <Releases />
</div>
- )
-} \ No newline at end of file
+ );
+}
diff --git a/src/app/header/header.js b/src/app/header/header.js
index 03d1328..bc4a019 100644
--- a/src/app/header/header.js
+++ b/src/app/header/header.js
@@ -1,11 +1,16 @@
-import Link from "next/link"
+import Link from "next/link";
export default function Header() {
return (
<div className="headMain">
<div className="headNav">
- <Link href="/" style={{color: "black", textDecoration: "none"}}>
- <p style={{fontSize: "30px", color: "var(--pastel-red)"}}>Dramalama</p>
+ <Link
+ href="/"
+ style={{ color: "black", textDecoration: "none" }}
+ >
+ <p style={{ fontSize: "30px", color: "var(--pastel-red)" }}>
+ Dramalama
+ </p>
</Link>
<div className="rightNav">
<Link href="/kdrama">
@@ -16,7 +21,7 @@ export default function Header() {
</Link>
</div>
</div>
- <hr style={{marginTop: "-3px"}} />
+ <hr style={{ marginTop: "-3px" }} />
</div>
- )
-} \ No newline at end of file
+ );
+}
diff --git a/src/app/info/[id]/page.js b/src/app/info/[id]/page.js
index 9d37819..e49443f 100644
--- a/src/app/info/[id]/page.js
+++ b/src/app/info/[id]/page.js
@@ -1,8 +1,8 @@
-import "../info.css"
+import "../info.css";
import Image from "next/image";
import CreateButton from "../buttons";
-export default async function AnimeInfo({params}) {
+export default async function AnimeInfo({ params }) {
let animeID = params.id;
const info = await getAnimeInfo(animeID);
@@ -14,32 +14,32 @@ export default async function AnimeInfo({params}) {
<div>
<div className="titleContainer">
<p>{info.title}</p>
- <Image
+ <Image
src={info.image}
width={140}
height={190}
alt="Drama"
/>
</div>
- <p className="dramaDescription">
- {info.description}
- </p>
+ <p className="dramaDescription">{info.description}</p>
</div>
)}
<div className="buttonContainer">
- {info && info.episodes.map((item, index) => (
- <CreateButton key={index} a={item} />
- ))}
+ {info &&
+ info.episodes.map((item, index) => (
+ <CreateButton key={index} a={item} />
+ ))}
</div>
-
</div>
</div>
- )
+ );
}
async function getAnimeInfo(anime_id) {
- const res = await fetch("https://anime-sensei-api.vercel.app/anime/gogoanime/info/" + 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
index 8f041a8..6244a2e 100644
--- a/src/app/info/buttons.js
+++ b/src/app/info/buttons.js
@@ -1,13 +1,10 @@
-"use client"
+"use client";
import Link from "next/link";
export default function CreateButton({ a }) {
-
return (
<Link href={`/video/${a.id}`}>
- <button className="dramaButton">
- {a.number}
- </button>
+ <button className="dramaButton">{a.number}</button>
</Link>
);
-} \ No newline at end of file
+}
diff --git a/src/app/info/page.js b/src/app/info/page.js
index 1468652..9004ade 100644
--- a/src/app/info/page.js
+++ b/src/app/info/page.js
@@ -1,11 +1,11 @@
-import './info.css'
+import "./info.css";
export default function Info() {
return (
- <div className='infoPageContainer'>
+ <div className="infoPageContainer">
<p>
This is the anime info page. This page will display information about the queried anime when anime id is passed along the url.
</p>
</div>
- )
-} \ No newline at end of file
+ );
+}
diff --git a/src/app/kdrama/api/fetchAnime.js b/src/app/kdrama/api/fetchAnime.js
index 903ca18..fcfc014 100644
--- a/src/app/kdrama/api/fetchAnime.js
+++ b/src/app/kdrama/api/fetchAnime.js
@@ -1,15 +1,25 @@
export async function fetchAnimeInfo(title) {
- const res = await fetch("https://dramalama-api.vercel.app/movies/dramacool/" + title)
+ const res = await fetch(
+ "https://dramalama-api.vercel.app/movies/dramacool/" + title
+ );
const data = await res.json();
return data;
}
export async function fetchDramaInfo(id) {
- const res = (await fetch(`https://dramalama-api.vercel.app/movies/dramacool/info?id=${id}`)).json()
+ const res = (
+ await fetch(
+ `https://dramalama-api.vercel.app/movies/dramacool/info?id=${id}`
+ )
+ ).json();
return res;
}
export async function fetchVideoLinks(drama_id, episode_id) {
- const res = (await (fetch(`https://dramalama-api.vercel.app/movies/dramacool/watch?episodeId=${episode_id}&mediaId=${drama_id}`))).json()
+ const res = (
+ await fetch(
+ `https://dramalama-api.vercel.app/movies/dramacool/watch?episodeId=${episode_id}&mediaId=${drama_id}`
+ )
+ ).json();
return res;
-} \ No newline at end of file
+}
diff --git a/src/app/kdrama/page.js b/src/app/kdrama/page.js
index 3877453..129c913 100644
--- a/src/app/kdrama/page.js
+++ b/src/app/kdrama/page.js
@@ -1,11 +1,11 @@
-"use client"
+"use client";
-import "./kdrama.css"
+import "./kdrama.css";
import { useState } from "react";
import ReactPlayer from "react-player";
-import Image from 'next/image';
-import { FaSearch } from 'react-icons/fa'; // Import the search icon from react-icons library
+import Image from "next/image";
+import { FaSearch } from "react-icons/fa"; // Import the search icon from react-icons library
import {
fetchAnimeInfo,
@@ -14,7 +14,6 @@ import {
} from "./api/fetchAnime.js";
export default function Kdrama() {
-
const [searchTitle, setSearchTitle] = useState("");
const [searchedDrama, setSearchedDrama] = useState(null);
async function handleKeyPresses(event) {
@@ -50,7 +49,7 @@ export default function Kdrama() {
return (
<main className="main">
<div className="sC">
- <FaSearch className='searchIcon' />
+ <FaSearch className="searchIcon" />
<input
placeholder="Enter drama title"
onChange={(event) => setSearchTitle(event.target.value)}
@@ -59,17 +58,12 @@ export default function Kdrama() {
</div>
<div className="intro" id="intro">
- <p className="introText">
- Start by searching for some dramas
- </p>
- <p className="introText2">
- Look for the search box above.
- </p>
+ <p className="introText">Start by searching for some dramas</p>
+ <p className="introText2">Look for the search box above.</p>
</div>
<div className="videoContainer" id="videoContainer">
<div className="dramaInfoContainer">
-
{videoLink && (
<div className="videoPlayer">
<ReactPlayer
@@ -98,9 +92,7 @@ export default function Kdrama() {
{details && (
<div className="dramaInfo">
<div className="titleContainer">
- <p className="dramaTitle">
- {details.title}
- </p>
+ <p className="dramaTitle">{details.title}</p>
<Image
className="dramaImage"
src={details.image}
@@ -165,6 +157,5 @@ export default function Kdrama() {
</div>
</div>
</main>
-
- )
-} \ No newline at end of file
+ );
+}
diff --git a/src/app/layout.js b/src/app/layout.js
index d6dd022..3c36ca3 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -5,14 +5,14 @@ import Header from "./header/header";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
- title: "Dramalama-Next",
+ title: "Dramalama V2.0",
description: "Rewrite of dramalama in next",
};
export default function RootLayout({ children }) {
- return (
+ return (
<html lang="en">
- <body className={inter.className}>
+ <body className={inter.className}>
<Header />
{children}
</body>
diff --git a/src/app/page.js b/src/app/page.js
index f8750b9..03a1035 100644
--- a/src/app/page.js
+++ b/src/app/page.js
@@ -10,11 +10,11 @@ export default function Home() {
width={300}
height={300}
alt="Logo"
- >
- </Image>
+ ></Image>
<p>
- Welcome to dramalama. An online service where you can watch kdramas and anime for free.
- </p>
+ Welcome to dramalama. An online service where you can watch
+ kdramas and anime for free.
+ </p>
</div>
</main>
);
diff --git a/src/app/recent/page.js b/src/app/recent/page.js
index 0cefca5..2962e0f 100644
--- a/src/app/recent/page.js
+++ b/src/app/recent/page.js
@@ -3,39 +3,42 @@ import Image from "next/image";
import Link from "next/link";
export default async function Releases() {
-
const data = await test();
return (
<div className="trendingContainer">
- <p className="trendingText">
- Recent Releases
- </p>
+ <p className="trendingText">Recent Releases</p>
<div className="trending">
- {data && data.results.map((item, index) => (
- <Link key={index} href={`/info/${item.id}`} style={{textDecoration: "none"}}>
- <div className="trendingEntries">
- <Image
- src={item.image}
- className="{trendingImage}"
- width={160}
- height={220}
- alt="Drama"
- priority
- />
- <p>
- {item.title}
- </p>
- </div>
- </Link>
- ))}
+ {data &&
+ data.results.map((item, index) => (
+ <Link
+ key={index}
+ href={`/info/${item.id}`}
+ style={{ textDecoration: "none" }}
+ >
+ <div className="trendingEntries">
+ <Image
+ src={item.image}
+ className="{trendingImage}"
+ width={160}
+ height={220}
+ alt="Drama"
+ priority
+ />
+ <p>{item.title}</p>
+ </div>
+ </Link>
+ ))}
</div>
</div>
- )}
+ );
+}
async function test() {
- const res = await fetch("https://dramalama-api.vercel.app/anime/gogoanime/recent-episodes");
+ 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/search/page.js b/src/app/search/page.js
index f384d85..e6d4f08 100644
--- a/src/app/search/page.js
+++ b/src/app/search/page.js
@@ -1,93 +1,92 @@
-"use client"
+"use client";
-import './search.css'
-import { FaSearch } from 'react-icons/fa'; // Import the search icon from react-icons library
-import { useState } from 'react';
-import Image from 'next/image';
-import Link from 'next/link';
+import "./search.css";
+import { FaSearch } from "react-icons/fa"; // Import the search icon from react-icons library
+import { useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
export default function Input() {
-
- const [searchedAnime, setSearchedAnime] = useState(null)
- const [loading, setLoading] = useState(null)
+ const [searchedAnime, setSearchedAnime] = useState(null);
+ const [loading, setLoading] = useState(null);
const handleKeyPress = (event) => {
if (
- (event.code === "Enter" ||
- event.key === "Enter" ||
- event.code === 13) &&
+ (event.code === "Enter" ||
+ event.key === "Enter" ||
+ event.code === 13) &&
searchedAnime != ""
) {
- fetch_animes(searchedAnime)
+ fetch_animes(searchedAnime);
} else if (
- (event.code === "Enter" ||
- event.key === "Enter" ||
- event.code === 13) &&
+ (event.code === "Enter" ||
+ event.key === "Enter" ||
+ event.code === 13) &&
searchedAnime === ""
- ) {
- alert("Input cannot be empty")
+ ) {
+ alert("Input cannot be empty");
}
- }
+ };
const [search1, setSearch] = useState(null);
const fetch_animes = (title) => {
fetch("https://dramalama-api.vercel.app/anime/gogoanime/" + title)
.then(setLoading(true))
- .then(res => res.json())
- .then(
- data => {
- setSearch(data)
- setLoading(false)
- }
- )
- }
+ .then((res) => res.json())
+ .then((data) => {
+ setSearch(data);
+ setLoading(false);
+ });
+ };
return (
<div>
- <div className='inputContainer'>
- <div className='searchContainer'>
- <FaSearch className='searchIcon' />
- <input
- onChange={(event) => setSearchedAnime(event.target.value)}
+ <div className="inputContainer">
+ <div className="searchContainer">
+ <FaSearch className="searchIcon" />
+ <input
+ onChange={(event) =>
+ setSearchedAnime(event.target.value)
+ }
onKeyDown={(event) => handleKeyPress(event)}
- placeholder='Enter anime title'>
-
- </input>
+ placeholder="Enter anime title"
+ ></input>
</div>
</div>
-
{loading && (
- <p style={{color: "white", textAlign: "center"}}>
- Please wait while we crunch all the data for you.
+ <p style={{ color: "white", textAlign: "center" }}>
+ Please wait while we crunch all the data for you.
</p>
)}
- <div className='animeEntry'>
+ <div className="animeEntry">
{search1 ? (
search1.results && search1.results.length > 0 ? (
search1.results.map((item, index) => (
- <Link key={index} href={`/info/${item.id}`} style={{textDecoration: "none"}}>
- <div className='anime'>
+ <Link
+ key={index}
+ href={`/info/${item.id}`}
+ style={{ textDecoration: "none" }}
+ >
+ <div className="anime">
<p>{item.title}</p>
- <Image
+ <Image
src={item.image}
- className='animeImage'
+ className="animeImage"
width={120}
height={160}
- alt='Drama Poster'
+ alt="Drama Poster"
/>
</div>
</Link>
))
) : (
- <div style={{margin: "0px auto"}}>
- <p style={{color: "white"}}>No results found</p>
+ <div style={{ margin: "0px auto" }}>
+ <p style={{ color: "white" }}>No results found</p>
</div>
)
) : null}
</div>
-
</div>
-
- )
-} \ No newline at end of file
+ );
+}
diff --git a/src/app/top-airing/page.js b/src/app/top-airing/page.js
index e564e16..b9d54cd 100644
--- a/src/app/top-airing/page.js
+++ b/src/app/top-airing/page.js
@@ -3,39 +3,42 @@ import Image from "next/image";
import Link from "next/link";
export default async function Trending() {
-
const data = await test();
return (
<div className="trendingContainer">
- <p className="trendingText">
- Trending
- </p>
+ <p className="trendingText">Trending</p>
<div className="trending">
- {data && data.results.map((item, index) => (
- <Link key={index} href={`/info/${item.id}`} style={{textDecoration: "none"}}>
- <div className="trendingEntries">
- <Image
- src={item.image}
- className="{trendingImage}"
- width={160}
- height={220}
- alt="Drama"
- priority
- />
- <p>
- {item.title}
- </p>
- </div>
- </Link>
- ))}
+ {data &&
+ data.results.map((item, index) => (
+ <Link
+ key={index}
+ href={`/info/${item.id}`}
+ style={{ textDecoration: "none" }}
+ >
+ <div className="trendingEntries">
+ <Image
+ src={item.image}
+ className="{trendingImage}"
+ width={160}
+ height={220}
+ alt="Drama"
+ priority
+ />
+ <p>{item.title}</p>
+ </div>
+ </Link>
+ ))}
</div>
</div>
- )}
+ );
+}
async function test() {
- const res = await fetch("https://dramalama-api.vercel.app/anime/gogoanime/top-airing");
+ 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/video/[animeId]/page.js b/src/app/video/[animeId]/page.js
index af7e690..4cd74ce 100644
--- a/src/app/video/[animeId]/page.js
+++ b/src/app/video/[animeId]/page.js
@@ -1,51 +1,61 @@
-"use client"
+"use client";
-import '../video.css'
-import React, { useState, useEffect } from 'react';
-import ReactPlayer from 'react-player';
+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 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("-")
+ 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]);
+ 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>
- )}
+ 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
- className='react-player'
+ <div className="video2">
+ <p>
+ {epi[0]} - {epi[1]}
+ </p>
+ <ReactPlayer
+ className="react-player"
url={videoLink}
controls
autoplay
width="95%"
- height="95%"
+ height="95%"
/>
</div>
)}
- </div>
- );
+ </div>
+ );
}
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-02 23:23:20 +0000