aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/app/anime/[id]/[...animeId]/page.jsx81
-rw-r--r--src/app/anime/[id]/[...animeId]/video.module.css75
-rw-r--r--src/app/anime/[id]/[animeId]/page.jsx56
-rw-r--r--src/app/anime/[id]/[animeId]/video.css24
-rw-r--r--src/app/anime/[id]/info.module.css (renamed from src/app/anime/[id]/info.css)64
-rw-r--r--src/app/anime/[id]/loading.jsx4
-rw-r--r--src/app/anime/[id]/page.jsx48
-rw-r--r--src/app/anime/recent/page.jsx4
-rw-r--r--src/app/anime/recent/recent.module.css9
-rw-r--r--src/app/anime/top-airing/page.jsx4
-rw-r--r--src/app/anime/top-airing/trending.module.css9
-rw-r--r--src/app/components/footer/page.jsx4
-rw-r--r--src/app/manga/[title]/[id]/[read]/download.jsx6
-rw-r--r--src/app/manga/[title]/[id]/info.module.css9
-rw-r--r--src/app/manga/[title]/[id]/page.jsx1
15 files changed, 246 insertions, 152 deletions
diff --git a/src/app/anime/[id]/[...animeId]/page.jsx b/src/app/anime/[id]/[...animeId]/page.jsx
new file mode 100644
index 0000000..966f212
--- /dev/null
+++ b/src/app/anime/[id]/[...animeId]/page.jsx
@@ -0,0 +1,81 @@
+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 styles from "./video.module.css";
+import { redirect } from "next/navigation";
+import Link from "next/link";
+
+export default async function Video({ params }) {
+ const id = params.animeId[0];
+ const series = params.animeId[1];
+
+ // Getting the episode number and the anime name. Kindly ignore!
+ const words = id.split("-");
+ const last_two = words.slice(-2).join(" ");
+ const remainingWords = words.slice(0, -2).join(" ");
+
+ const data = await getVideoLink(id);
+ const animedata = await getAnimeInfo(series);
+
+ if (data.message) {
+ redirect("/404");
+ }
+
+ const link = data.sources[4].url;
+
+ return (
+ <div className={styles.VideoMain}>
+ <div className={styles.VideoContainer}>
+ <p style={{ textAlign: "center", color: "white" }}>
+ {last_two} - {remainingWords}
+ </p>
+ <div className={styles.Video}>
+ <MediaPlayer
+ title={words}
+ src={link}
+ playsInline
+ aspectRatio="16/9"
+ load="eager"
+ className={styles.VideoPlayer}
+ >
+ <MediaProvider />
+ <PlyrLayout icons={plyrLayoutIcons} />
+ </MediaPlayer>
+ <div className={styles.EpisodesButtons}>
+ {animedata &&
+ animedata.episodes.map((item, index) => (
+ // <p key={index}>Hello World</p>
+ <Link
+ href={`/anime/watch/${item.id}/${series}`}
+ key={index}
+ >
+ <button>{item.number}</button>
+ </Link>
+ ))}
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+async function getVideoLink(id) {
+ const res = await fetch(
+ "https://consumet-api-di2e.onrender.com/anime/gogoanime/watch/" + id
+ );
+ const data = res.json();
+ return data;
+}
+
+async function getAnimeInfo(anime_id) {
+ const res = await fetch(
+ "https://anime-sensei-api.vercel.app/anime/gogoanime/info/" + anime_id,
+ { next: { revalidate: 7200 } }
+ );
+ const data = await res.json();
+ return data;
+}
diff --git a/src/app/anime/[id]/[...animeId]/video.module.css b/src/app/anime/[id]/[...animeId]/video.module.css
new file mode 100644
index 0000000..d947fc3
--- /dev/null
+++ b/src/app/anime/[id]/[...animeId]/video.module.css
@@ -0,0 +1,75 @@
+.VideoMain {
+ max-width: 98%;
+ margin: 0px auto;
+}
+
+.Video {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.VideoPlayer {
+ border-radius: 10px;
+ width: 75%;
+ height: auto;
+}
+
+.EpisodesButtons {
+ display: flex;
+ flex-direction: column;
+ margin-left: 10px;
+ height: 500px;
+ overflow-y: auto;
+ width: 100px;
+ scrollbar-width: thin;
+}
+
+.EpisodesButtons button {
+ width: 70px;
+ margin: 5px;
+ outline: none;
+ border: none;
+ padding: 5px;
+ font-family: "Quicksand";
+ font-size: 14px;
+ border-radius: 5px;
+ cursor: pointer;
+ color: white;
+ background-color: #3d3d3d;
+ transition: background-color 0.2s linear;
+}
+
+.EpisodesButtons button:hover {
+ background-color: #1f1f1f;
+ transition: background-color 0.2s linear
+}
+
+@media screen and (max-width: 768px) {
+
+ .VideoMain {
+ max-width: 99%;
+ }
+
+ .Video {
+ display: block;
+ }
+
+ .VideoPlayer {
+ width: 100%;
+ }
+
+ .EpisodesButtons {
+ display: flex;
+ flex-direction: row;
+ height: auto;
+ width: auto;
+ margin-top: 10px;
+ margin-left: 0px;
+ overflow-y: auto;
+ }
+
+ .EpisodesButtons button {
+ width: 50px;
+ }
+} \ No newline at end of file
diff --git a/src/app/anime/[id]/[animeId]/page.jsx b/src/app/anime/[id]/[animeId]/page.jsx
deleted file mode 100644
index 1614775..0000000
--- a/src/app/anime/[id]/[animeId]/page.jsx
+++ /dev/null
@@ -1,56 +0,0 @@
-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 { redirect } from "next/navigation";
-
-export default async function Video({ params }) {
- const id = params.animeId;
-
- // Getting the episode number and the anime name. Kindly ignore!
- const words = id.split("-");
- const last_two = words.slice(-2).join(" ");
- const remainingWords = words.slice(0, -2).join(" ");
-
- const data = await getVideoLink(id);
-
- if (data.message) {
- redirect("/404");
- }
-
- const link = data.sources[4].url;
-
- return (
- <div>
- <div className="video2">
- <p>
- {last_two} - {remainingWords}
- </p>
- <MediaPlayer
- title={words}
- src={link}
- className="testPlayer"
- playsInline
- aspectRatio="16/9"
- load="eager"
- >
- <MediaProvider />
- <PlyrLayout icons={plyrLayoutIcons} />
- </MediaPlayer>
- </div>
- </div>
- );
-}
-
-async function getVideoLink(id) {
- const res = await fetch(
- "https://consumet-api-di2e.onrender.com/anime/gogoanime/watch/" + id,
- { next: { revalidate: 7200 } } // Video links are revalidated after an hour
- );
- const data = res.json();
- return data;
-}
diff --git a/src/app/anime/[id]/[animeId]/video.css b/src/app/anime/[id]/[animeId]/video.css
deleted file mode 100644
index 40f6e8e..0000000
--- a/src/app/anime/[id]/[animeId]/video.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.video2 {
- display: flex;
- flex-direction: column;
- align-items: center;
- margin: 0px auto;
- width: 50%;
-}
-
-.testPlayer {
- border-radius: 10px;
-}
-
-.video2 p {
- color: white;
- font-family: "Lato";
- font-size: 20px;
- text-align: center;
-}
-
-@media screen and (max-width: 768px) {
- .video2 {
- width: 100%;
- }
-} \ No newline at end of file
diff --git a/src/app/anime/[id]/info.css b/src/app/anime/[id]/info.module.css
index fc41e88..aa1e044 100644
--- a/src/app/anime/[id]/info.css
+++ b/src/app/anime/[id]/info.module.css
@@ -6,7 +6,7 @@
.dramaInfo {
display: flex;
flex-direction: column;
- width: 95%;
+ width: 98%;
margin: 0px auto;
}
@@ -20,29 +20,36 @@
color: var(--neon-green);
width: 60%;
font-family: "Quicksand";
- font-weight: 900;
- font-size: 24px;
+ font-weight: 1000;
+ font-size: 28px;
}
.titleContainer img {
+ width: auto;
+ height: auto;
border-radius: 10px;
}
-.animeDescription {
+.animeDescription h2 {
color: #ffffff81;
+ margin: 20px 0px -10px 0px;
+}
+
+.animeDescription p {
font-family: "Atkinson Hyperlegible";
- font-size: 16px;
- max-height: 120px;
- margin: 20px auto;
- text-align: center;
- overflow-y: auto;
+ color: rgba(255, 255, 255, 0.637);
}
.buttonContainer {
- margin: 5px auto;
- text-align: center;
- max-height: 200px;
+ margin: 0px;
+ height: 200px;
overflow-y: auto;
+ border-radius: 10px;
+}
+
+.buttonHeader {
+ margin: 0px 10px 10px 0px;
+ color: #ffffff81
}
.buttonContainer button:focus {
@@ -52,36 +59,30 @@
transform: scale(0.9);
}
-.buttonContainer::-webkit-scrollbar {
- width: 5px;
-}
-
.buttonContainer::-webkit-scrollbar-thumb {
background-color: var(--soft-purple);
border-radius: 5px;
}
.dramaButton {
- padding: 8px;
+ padding: 10px;
font-family: "Quicksand";
- font-size: 16px;
+ font-size: 14px;
margin: 5px;
- width: 130px;
+ width: 55px;
border-radius: 5px;
+ text-align: center;
border: none;
- background-color: #f8f6e3dc;
+ outline: none;
+ color: white;
+ background-color: #3d3d3d;
+ transition: background-color 0.2s linear;
cursor: pointer;
}
.dramaButton:hover {
- background-color: #97E7E1;
-}
-
-.infoPageContainer {
- display: flex;
- height: 100dvh;
- justify-content: center;
- align-items: center;
+ background-color: #1f1f1f;
+ transition: background-color 0.2s linear
}
.infoPageContainer p {
@@ -89,9 +90,7 @@
}
.animeDetails {
- text-align: center;
color: white;
- font-family: "Quicksand";
}
.genreEntries {
@@ -101,6 +100,7 @@
color: var(--neon-green);
background-color: #303030;
cursor: pointer;
+ font-family: "Atkinson Hyperlegible";
}
.animeType span {
@@ -112,10 +112,6 @@
}
@media screen and (max-width: 768px) {
- .dramaButton {
- font-size: 14px;
- width: 100px;
- }
.animeDetails {
font-size: 14px;
diff --git a/src/app/anime/[id]/loading.jsx b/src/app/anime/[id]/loading.jsx
index b5670da..71ff978 100644
--- a/src/app/anime/[id]/loading.jsx
+++ b/src/app/anime/[id]/loading.jsx
@@ -3,9 +3,7 @@ import styles from "./loading.module.css";
export default function Loading() {
return (
<div className={styles.loadingContainer}>
- <p className={styles.loadingText}>
- Please wait while we load all the data for you.
- </p>
+ <p className={styles.loadingText}>Hold tight...Arriving!!</p>
</div>
);
}
diff --git a/src/app/anime/[id]/page.jsx b/src/app/anime/[id]/page.jsx
index 6c81ede..b99da42 100644
--- a/src/app/anime/[id]/page.jsx
+++ b/src/app/anime/[id]/page.jsx
@@ -1,4 +1,4 @@
-import "./info.css";
+import styles from "./info.module.css";
import Image from "next/image";
import Link from "next/link";
@@ -8,48 +8,56 @@ export default async function AnimeInfo({ params }) {
const info = await getAnimeInfo(animeID);
return (
- <div className="dramaInfoContainer">
- <div className="dramaInfo">
+ <div className={styles.dramaInfoContainer}>
+ <div className={styles.dramaInfo}>
{info && (
<div>
- <div className="titleContainer">
+ <div className={styles.titleContainer}>
<p>{info.title}</p>
<Image
src={info.image}
- width={150}
- height={200}
+ width={175}
+ height={256}
alt="Drama"
/>
</div>
- <p className="animeDescription">{info.description}</p>
+ <div className={styles.animeDescription}>
+ <h2>Description</h2>
+ <p>{info.description}</p>
+ </div>
</div>
)}
- <div className="animeDetails">
- <span className="genre">Genres: </span>
- {info.genres &&
+ <div className={styles.animeDetails}>
+ <span className={styles.genre}>Genres: </span>
+ {info &&
+ info.genres &&
info.genres.map((item, index) => (
- <span className="genreEntries" key={index}>
+ <span className={styles.genreEntries} key={index}>
{item}
</span>
))}
- <p className="animeType">
- Type: <span>{info.type}</span>
+ <p className={styles.animeType}>
+ Type: <span>{info && info.type}</span>
</p>
- <p className="animeRelease">
+ <p className={styles.animeRelease}>
Release year:{" "}
<span>
- {info.releaseDate}, {info.status}
+ {info && info.releaseDate}, {info && info.status}
</span>
</p>
</div>
- <div className="buttonContainer">
+ <h2 className={styles.buttonHeader}>Episodes: </h2>
+ <div className={styles.buttonContainer}>
{info &&
+ info.episodes &&
info.episodes.map((item, index) => (
- <Link href={`/anime/watch/${item.id}`} key={index}>
- <button className="dramaButton">
- <span>Episode </span>
+ <Link
+ href={`/anime/watch/${item.id}/${animeID}`}
+ key={index}
+ >
+ <button className={styles.dramaButton}>
{item.number}
</button>
</Link>
@@ -65,6 +73,6 @@ async function getAnimeInfo(anime_id) {
"https://anime-sensei-api.vercel.app/anime/gogoanime/info/" + anime_id,
{ next: { revalidate: 7200 } }
);
- const data = res.json();
+ const data = await res.json();
return data;
}
diff --git a/src/app/anime/recent/page.jsx b/src/app/anime/recent/page.jsx
index 9094ead..a5e3a05 100644
--- a/src/app/anime/recent/page.jsx
+++ b/src/app/anime/recent/page.jsx
@@ -27,8 +27,8 @@ export default async function Releases() {
<Image
src={item.image}
className={styles.RecentImage}
- width={180}
- height={260}
+ width={150}
+ height={230}
alt="Drama"
priority
/>
diff --git a/src/app/anime/recent/recent.module.css b/src/app/anime/recent/recent.module.css
index 7805d52..20c5e1b 100644
--- a/src/app/anime/recent/recent.module.css
+++ b/src/app/anime/recent/recent.module.css
@@ -30,13 +30,18 @@
.RecentEntries {
margin: 7px;
+ transition: transform 0.1s linear;
+}
+
+.RecentEntries:hover {
+ transition: transform 0.1s linear;
+ transform: scale(0.97);
}
.RecentEntries p {
text-align: center;
margin: 5px auto;
- max-height: 70px;
- overflow-y: auto;
+ width: 140px;
}
.RecentEntries p::-webkit-scrollbar {
diff --git a/src/app/anime/top-airing/page.jsx b/src/app/anime/top-airing/page.jsx
index 297fc45..a6e1efc 100644
--- a/src/app/anime/top-airing/page.jsx
+++ b/src/app/anime/top-airing/page.jsx
@@ -27,8 +27,8 @@ export default async function Trending() {
<Image
src={item.image}
className={styles.trendingImage}
- width={180}
- height={260}
+ width={150}
+ height={230}
alt="Drama"
priority
/>
diff --git a/src/app/anime/top-airing/trending.module.css b/src/app/anime/top-airing/trending.module.css
index bffd7ef..1dcfb9d 100644
--- a/src/app/anime/top-airing/trending.module.css
+++ b/src/app/anime/top-airing/trending.module.css
@@ -30,13 +30,18 @@
.trendingEntries {
margin: 7px;
+ transition: transform 0.2s linear;
+}
+
+.trendingEntries:hover {
+ transition: transform 0.2s linear;
+ transform: scale(0.97);
}
.trendingEntries p {
text-align: center;
margin: 5px auto;
- max-height: 70px;
- overflow-y: auto;
+ width: 140px;
}
.trendingEntries p::-webkit-scrollbar {
diff --git a/src/app/components/footer/page.jsx b/src/app/components/footer/page.jsx
index 1223f31..ea763a6 100644
--- a/src/app/components/footer/page.jsx
+++ b/src/app/components/footer/page.jsx
@@ -27,9 +27,9 @@ export default async function Footer() {
</a>
<a
style={{ color: " #A3BE8C" }}
- href="https://dramalama-1phg.onrender.com"
+ href="https://dramalama.netlify.app"
>
- Render
+ Netlify
</a>
</div>
</div>
diff --git a/src/app/manga/[title]/[id]/[read]/download.jsx b/src/app/manga/[title]/[id]/[read]/download.jsx
index e0badc9..5ad71a5 100644
--- a/src/app/manga/[title]/[id]/[read]/download.jsx
+++ b/src/app/manga/[title]/[id]/[read]/download.jsx
@@ -1,17 +1,17 @@
import styles from "./read.module.css";
-import Link from "next/link";
+// import Link from "next/link";
export default function DownloadManga({ chapterId: id }) {
return (
<div className={styles.DownloadMain}>
- <Link
+ <a
href={`https://manga-downloader-7nca.onrender.com/download?id=${id}`}
style={{ textDecoration: "none" }}
>
<button title="This functionality currently exhibits stability with lower-quality PDFs; however, users may encounter challenges when attempting to download higher-quality PDFs.">
Download - Beta
</button>
- </Link>
+ </a>
</div>
);
}
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index a36658a..96635e3 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -9,7 +9,8 @@
justify-content: space-between;
align-items: center;
padding: 5px;
- backdrop-filter: blur(5px);
+ background-color: #35353565;
+ backdrop-filter: blur(7px);
}
@@ -71,11 +72,17 @@
.CharacterEntry {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: auto;
margin: 5px;
}
.CharacterEntry p {
+ margin: 10px auto;
text-align: center;
+ width: 110px;
color: white;
}
diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx
index 15eb148..5b54e23 100644
--- a/src/app/manga/[title]/[id]/page.jsx
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -30,7 +30,6 @@ export default async function MangaInfo({ params }) {
<p
style={{
color: data.color,
- // backgroundColor: "#3a3a3ac2",
borderRadius: 10,
padding: 5,
}}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-21 01:47:34 +0000