From 794cb6236fa256f8074c56f372eba05526e7c066 Mon Sep 17 00:00:00 2001 From: real-zephex Date: Tue, 2 Apr 2024 22:41:19 +0530 Subject: UI Upgrades for anime section. --- src/app/anime/[id]/[...animeId]/page.jsx | 81 +++++++++++++++ src/app/anime/[id]/[...animeId]/video.module.css | 75 ++++++++++++++ src/app/anime/[id]/[animeId]/page.jsx | 56 ----------- src/app/anime/[id]/[animeId]/video.css | 24 ----- src/app/anime/[id]/info.css | 123 ----------------------- src/app/anime/[id]/info.module.css | 119 ++++++++++++++++++++++ src/app/anime/[id]/loading.jsx | 4 +- src/app/anime/[id]/page.jsx | 48 +++++---- src/app/anime/recent/page.jsx | 4 +- src/app/anime/recent/recent.module.css | 9 +- src/app/anime/top-airing/page.jsx | 4 +- src/app/anime/top-airing/trending.module.css | 9 +- src/app/components/footer/page.jsx | 4 +- src/app/manga/[title]/[id]/[read]/download.jsx | 6 +- src/app/manga/[title]/[id]/info.module.css | 9 +- src/app/manga/[title]/[id]/page.jsx | 1 - 16 files changed, 335 insertions(+), 241 deletions(-) create mode 100644 src/app/anime/[id]/[...animeId]/page.jsx create mode 100644 src/app/anime/[id]/[...animeId]/video.module.css delete mode 100644 src/app/anime/[id]/[animeId]/page.jsx delete mode 100644 src/app/anime/[id]/[animeId]/video.css delete mode 100644 src/app/anime/[id]/info.css create mode 100644 src/app/anime/[id]/info.module.css (limited to 'src') 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 ( +
+
+

+ {last_two} - {remainingWords} +

+
+ + + + +
+ {animedata && + animedata.episodes.map((item, index) => ( + //

Hello World

+ + + + ))} +
+
+
+
+ ); +} + +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 ( -
-
-

- {last_two} - {remainingWords} -

- - - - -
-
- ); -} - -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.css deleted file mode 100644 index fc41e88..0000000 --- a/src/app/anime/[id]/info.css +++ /dev/null @@ -1,123 +0,0 @@ -.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: "Quicksand"; - font-weight: 900; - font-size: 24px; -} - -.titleContainer img { - border-radius: 10px; -} - -.animeDescription { - color: #ffffff81; - font-family: "Atkinson Hyperlegible"; - 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; -} - -.buttonContainer button:focus { - opacity: 0.7; - transition: transform 0.2s linear; - background-color: var(--pastel-red); - transform: scale(0.9); -} - -.buttonContainer::-webkit-scrollbar { - width: 5px; -} - -.buttonContainer::-webkit-scrollbar-thumb { - background-color: var(--soft-purple); - border-radius: 5px; -} - -.dramaButton { - padding: 8px; - font-family: "Quicksand"; - font-size: 16px; - margin: 5px; - width: 130px; - border-radius: 5px; - border: none; - background-color: #f8f6e3dc; - cursor: pointer; -} - -.dramaButton:hover { - background-color: #97E7E1; -} - -.infoPageContainer { - display: flex; - height: 100dvh; - justify-content: center; - align-items: center; -} - -.infoPageContainer p { - color: white; -} - -.animeDetails { - text-align: center; - color: white; - font-family: "Quicksand"; -} - -.genreEntries { - margin: 3px; - padding: 4px; - border-radius: 5px; - color: var(--neon-green); - background-color: #303030; - cursor: pointer; -} - -.animeType span { - color: var(--light-green); -} - -.animeRelease span { - color: var(--soft-purple) -} - -@media screen and (max-width: 768px) { - .dramaButton { - font-size: 14px; - width: 100px; - } - - .animeDetails { - font-size: 14px; - } -} \ No newline at end of file diff --git a/src/app/anime/[id]/info.module.css b/src/app/anime/[id]/info.module.css new file mode 100644 index 0000000..aa1e044 --- /dev/null +++ b/src/app/anime/[id]/info.module.css @@ -0,0 +1,119 @@ +.dramaInfoContainer { + display: flex; + flex-direction: column; +} + +.dramaInfo { + display: flex; + flex-direction: column; + width: 98%; + margin: 0px auto; +} + +.titleContainer { + display: flex; + justify-content: space-between; + align-items: center; +} + +.titleContainer p { + color: var(--neon-green); + width: 60%; + font-family: "Quicksand"; + font-weight: 1000; + font-size: 28px; +} + +.titleContainer img { + width: auto; + height: auto; + border-radius: 10px; +} + +.animeDescription h2 { + color: #ffffff81; + margin: 20px 0px -10px 0px; +} + +.animeDescription p { + font-family: "Atkinson Hyperlegible"; + color: rgba(255, 255, 255, 0.637); +} + +.buttonContainer { + margin: 0px; + height: 200px; + overflow-y: auto; + border-radius: 10px; +} + +.buttonHeader { + margin: 0px 10px 10px 0px; + color: #ffffff81 +} + +.buttonContainer button:focus { + opacity: 0.7; + transition: transform 0.2s linear; + background-color: var(--pastel-red); + transform: scale(0.9); +} + +.buttonContainer::-webkit-scrollbar-thumb { + background-color: var(--soft-purple); + border-radius: 5px; +} + +.dramaButton { + padding: 10px; + font-family: "Quicksand"; + font-size: 14px; + margin: 5px; + width: 55px; + border-radius: 5px; + text-align: center; + border: none; + outline: none; + color: white; + background-color: #3d3d3d; + transition: background-color 0.2s linear; + cursor: pointer; +} + +.dramaButton:hover { + background-color: #1f1f1f; + transition: background-color 0.2s linear +} + +.infoPageContainer p { + color: white; +} + +.animeDetails { + color: white; +} + +.genreEntries { + margin: 3px; + padding: 4px; + border-radius: 5px; + color: var(--neon-green); + background-color: #303030; + cursor: pointer; + font-family: "Atkinson Hyperlegible"; +} + +.animeType span { + color: var(--light-green); +} + +.animeRelease span { + color: var(--soft-purple) +} + +@media screen and (max-width: 768px) { + + .animeDetails { + font-size: 14px; + } +} \ No newline at end of file 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 (
-

- Please wait while we load all the data for you. -

+

Hold tight...Arriving!!

); } 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 ( -
-
+
+
{info && (
-
+

{info.title}

Drama
-

{info.description}

+
+

Description

+

{info.description}

+
)} -
- Genres: - {info.genres && +
+ Genres: + {info && + info.genres && info.genres.map((item, index) => ( - + {item} ))} -

- Type: {info.type} +

+ Type: {info && info.type}

-

+

Release year:{" "} - {info.releaseDate}, {info.status} + {info && info.releaseDate}, {info && info.status}

-
+

Episodes:

+
{info && + info.episodes && info.episodes.map((item, index) => ( - - @@ -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() { Drama 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() { Drama 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() { - Render + Netlify
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 (
- - +
); } 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 }) {