From b7e29a3d67e3e214ba1c958478092ee4075e8171 Mon Sep 17 00:00:00 2001 From: real-zephex Date: Thu, 4 Apr 2024 23:00:53 +0530 Subject: inmidst of rewriting the kdrama section. will complete it soon --- src/app/anime/[id]/[...animeId]/page.jsx | 12 +- src/app/anime/[id]/[...animeId]/video.module.css | 7 +- src/app/anime/recent/recent.module.css | 5 +- src/app/anime/top-airing/trending.module.css | 5 +- src/app/components/header/header.jsx | 10 +- src/app/components/header/header.module.css | 3 +- src/app/globals.css | 3 + src/app/globals.module.css | 2 - src/app/kdrama/[id]/page.jsx | 60 ++++++ src/app/kdrama/api/fetchAnime.js | 28 --- src/app/kdrama/components/popular.jsx | 42 ++++ src/app/kdrama/components/recent.jsx | 42 ++++ src/app/kdrama/kdrama.css | 232 ----------------------- src/app/kdrama/page.jsx | 167 +--------------- src/app/kdrama/styles/info.module.css | 55 ++++++ src/app/kdrama/styles/kdrama.module.css | 4 + src/app/kdrama/styles/popular.module.css | 52 +++++ src/app/manga/[title]/[id]/page.jsx | 3 +- src/app/manga/manga.module.css | 61 ++---- src/app/manga/page.jsx | 39 ++-- 20 files changed, 325 insertions(+), 507 deletions(-) create mode 100644 src/app/kdrama/[id]/page.jsx delete mode 100644 src/app/kdrama/api/fetchAnime.js create mode 100644 src/app/kdrama/components/popular.jsx create mode 100644 src/app/kdrama/components/recent.jsx delete mode 100644 src/app/kdrama/kdrama.css create mode 100644 src/app/kdrama/styles/info.module.css create mode 100644 src/app/kdrama/styles/kdrama.module.css create mode 100644 src/app/kdrama/styles/popular.module.css (limited to 'src') diff --git a/src/app/anime/[id]/[...animeId]/page.jsx b/src/app/anime/[id]/[...animeId]/page.jsx index 966f212..60c05ee 100644 --- a/src/app/anime/[id]/[...animeId]/page.jsx +++ b/src/app/anime/[id]/[...animeId]/page.jsx @@ -10,6 +10,7 @@ import { redirect } from "next/navigation"; import Link from "next/link"; export default async function Video({ params }) { + let link; const id = params.animeId[0]; const series = params.animeId[1]; @@ -25,7 +26,16 @@ export default async function Video({ params }) { redirect("/404"); } - const link = data.sources[4].url; + try { + link = data.sources[4].url; + } catch (error) { + try { + link = data.sources[3].url; + } catch (error) { + redirect("/404"); + console.log("Episode not found."); + } + } return (
diff --git a/src/app/anime/[id]/[...animeId]/video.module.css b/src/app/anime/[id]/[...animeId]/video.module.css index d947fc3..0214e60 100644 --- a/src/app/anime/[id]/[...animeId]/video.module.css +++ b/src/app/anime/[id]/[...animeId]/video.module.css @@ -1,8 +1,3 @@ -.VideoMain { - max-width: 98%; - margin: 0px auto; -} - .Video { display: flex; justify-content: center; @@ -11,7 +6,7 @@ .VideoPlayer { border-radius: 10px; - width: 75%; + width: 70%; height: auto; } diff --git a/src/app/anime/recent/recent.module.css b/src/app/anime/recent/recent.module.css index 20c5e1b..ab9d98d 100644 --- a/src/app/anime/recent/recent.module.css +++ b/src/app/anime/recent/recent.module.css @@ -1,5 +1,4 @@ .RecentText { - color: #FFB996; display: flex; align-items: center; } @@ -7,7 +6,8 @@ .RecentText p { font-size: 26px; margin: 5px; - font-family: "Quicksand"; + color: var(--soft-purple); + font-family: "Poppins"; } .RecentText span { @@ -42,6 +42,7 @@ text-align: center; margin: 5px auto; width: 140px; + font-family: "Atkinson Hyperlegible"; } .RecentEntries p::-webkit-scrollbar { diff --git a/src/app/anime/top-airing/trending.module.css b/src/app/anime/top-airing/trending.module.css index 1dcfb9d..3aa1ee7 100644 --- a/src/app/anime/top-airing/trending.module.css +++ b/src/app/anime/top-airing/trending.module.css @@ -1,5 +1,4 @@ .TrendingText { - color: #FFB996; display: flex; align-items: center; } @@ -7,7 +6,8 @@ .TrendingText p { font-size: 26px; margin: 5px; - font-family: "Quicksand"; + color: var(--soft-purple); + font-family: "Poppins"; } .TrendingText span { @@ -42,6 +42,7 @@ text-align: center; margin: 5px auto; width: 140px; + font-family: "Atkinson Hyperlegible"; } .trendingEntries p::-webkit-scrollbar { diff --git a/src/app/components/header/header.jsx b/src/app/components/header/header.jsx index 286aed6..b105bb6 100644 --- a/src/app/components/header/header.jsx +++ b/src/app/components/header/header.jsx @@ -16,14 +16,14 @@ export default function Header() {
-

Anime

+

anime

-

Manga

+

manga

+ + +

kdrama

- {/* -

Kdrama

- */}
diff --git a/src/app/components/header/header.module.css b/src/app/components/header/header.module.css index ce855ed..5ff32fd 100644 --- a/src/app/components/header/header.module.css +++ b/src/app/components/header/header.module.css @@ -5,7 +5,7 @@ align-items: center; max-width: 95%; margin: -10px auto; - font-family: "Quicksand"; + font-family: "Poppins"; } .rightNav { @@ -16,6 +16,7 @@ .rightNav a { text-decoration: underline; + font-family: "Atkinson Hyperlegible"; color: var(--light-green); font-size: 18px; } diff --git a/src/app/globals.css b/src/app/globals.css index 8690bc9..36616bb 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,3 +1,6 @@ +@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&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:ital@0;1&family=Quicksand&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); + :root { --neon-green: #45FFCA; --neon-yellow: #FEFFAC; diff --git a/src/app/globals.module.css b/src/app/globals.module.css index e57a44b..983f1dd 100644 --- a/src/app/globals.module.css +++ b/src/app/globals.module.css @@ -1,5 +1,3 @@ -@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&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:ital@0;1&family=Quicksand&display=swap'); - .ErrorContainer { display: flex; justify-content: center; diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx new file mode 100644 index 0000000..cd3af74 --- /dev/null +++ b/src/app/kdrama/[id]/page.jsx @@ -0,0 +1,60 @@ +import styles from "../styles/info.module.css"; +import Image from "next/image"; +export default async function DramaInfo({ params }) { + const id = decodeURIComponent(params.id); + const info = await getDramaInfo(id); + + return ( +
+ {info && ( +
+
+

{info.title}

+ Drama Poster +
+ +
+

Description

+

{info.description}

+
+ + {/* Genres */} +
+ Genres: + {info.genres && + info.genres.map((item, index) => ( + + {item} + + ))} +
+ + {/* Other names */} +
+ AKA: + {info.otherNames && + info.otherNames.map((item, index) => ( + + {item} + + ))} +
+
+ )} +
+ ); +} + +async function getDramaInfo(id) { + const res = await fetch( + `https://consumet-api-di2e.onrender.com/movies/dramacool/info?id=${id}` + ); + const data = await res.json(); + return data; +} diff --git a/src/app/kdrama/api/fetchAnime.js b/src/app/kdrama/api/fetchAnime.js deleted file mode 100644 index ae0c5a9..0000000 --- a/src/app/kdrama/api/fetchAnime.js +++ /dev/null @@ -1,28 +0,0 @@ -export async function fetchAnimeInfo(title) { - const res = await fetch( - "https://consumet-api-di2e.onrender.com/movies/dramacool/" + title, - { cache: "force-cache" } - ); - const data = await res.json(); - return data; -} - -export async function fetchDramaInfo(id) { - const res = ( - await fetch( - `https://consumet-api-di2e.onrender.com/movies/dramacool/info?id=${id}`, - { cache: "force-cache" } - ) - ).json(); - return res; -} - -export async function fetchVideoLinks(drama_id, episode_id) { - const res = ( - await fetch( - `https://consumet-api-di2e.onrender.com/movies/dramacool/watch?episodeId=${episode_id}&mediaId=${drama_id}`, - { cache: "force-cache" } - ) - ).json(); - return res; -} diff --git a/src/app/kdrama/components/popular.jsx b/src/app/kdrama/components/popular.jsx new file mode 100644 index 0000000..d9126ec --- /dev/null +++ b/src/app/kdrama/components/popular.jsx @@ -0,0 +1,42 @@ +import styles from "../styles/popular.module.css"; +import Image from "next/image"; +import Link from "next/link"; + +export default async function PopularDramas() { + const popular = await getPopular(); + + return ( +
+

Popular Dramas

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

{item.title}

+
+ + ))} +
+
+ ); +} + +async function getPopular() { + const res = await fetch("https://dramacool-scraper.vercel.app/popular", { + next: { revalidate: 86400 }, + }); + const data = await res.json(); + return data; +} diff --git a/src/app/kdrama/components/recent.jsx b/src/app/kdrama/components/recent.jsx new file mode 100644 index 0000000..759e179 --- /dev/null +++ b/src/app/kdrama/components/recent.jsx @@ -0,0 +1,42 @@ +import styles from "../styles/popular.module.css"; +import Image from "next/image"; +import Link from "next/link"; + +export default async function RecentDramas() { + const popular = await getPopular(); + + return ( +
+

Recently Released

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

{item.title}

+
+ + ))} +
+
+ ); +} + +async function getPopular() { + const res = await fetch("https://dramacool-scraper.vercel.app/recent", { + next: { revalidate: 86400 }, + }); + const data = await res.json(); + return data; +} diff --git a/src/app/kdrama/kdrama.css b/src/app/kdrama/kdrama.css deleted file mode 100644 index 0e96be7..0000000 --- a/src/app/kdrama/kdrama.css +++ /dev/null @@ -1,232 +0,0 @@ -.sC { - display: flex; - align-items: center; - margin: 30px auto; - background-color: #2c2c2c; - padding: 8px; - border-radius: 5px; - width: 20%; -} - -.sC input { - border: none; - border-radius: 5px; - color: white; - outline: none; - background: none; - width: 100%; - font-family: "Lato"; - font-size: 16px; -} - - -.searchIcon { - color: white; - margin-right: 5px; -} - - -.intro { - display: flex; - color: white; - justify-content: center; - align-items: center; - height: 60vh; - width: 100%; - margin: 0px auto; - flex-direction: column; -} - -.introText { - font-size: 22px; - font-family: "Quicksand"; - color: var(--softer-purple) -} - -.introText2 { - font-family: "Quicksand"; - color: white; -} - -.popup { - z-index: 1; - display: none; - position: fixed; - top: 0; - align-items: center; - height: 100%; - justify-content: center; - width: 100%; - background-color: #141414ad; -} - - -.popupEntries { - border-radius: 5px; - display: flex; - flex-direction: column; - height: 60%; - overflow-y: auto; -} - -.popupEntries::-webkit-scrollbar { - width: 5px; - height: 5px; -} - -.popupEntry { - background: #272727b4; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - border-radius: 10px; - width: 800px; - margin: 5px auto; - padding: 3px; - border-color: var(--soft-purple); - cursor: pointer; -} - - - -.popupEntry img { - width: auto; - height: auto; - padding: 5px; - border-radius: 10px; - -} - -.popupEntry p { - color: #8CABFF; - font-size: 20px; - margin-left: 10px; -} - -.closeButton { - position: absolute; - bottom: 0; - left: 0; - margin: 10px; -} - -.closeButton button { - padding: 12px; - background-color: var(--pastel-red); - font-family: "Quicksand"; - font-size: 18px; - border-radius: 5px; - border: none; - cursor: pointer; -} - -.videoContainer { - display: none; - max-width: 60%; - margin: 10px auto; - justify-content: center; - border-style: dotted; - border-color: rgba(97, 97, 97, 0.575); - border-radius: 20px; - border-width: 4px; - padding: 10px; -} - -.titleContainer2 { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - margin: 0px auto; - width: 100%; -} - -.dramaTitle { - color: var(--neon-green); - font-family: "Kanit"; - font-size: 30px; -} - -.dramaImage { - width: auto; - height: auto; - border-radius: 10px; -} - -.dramaDescription { - color: var(--softer-purple); - font-family: "Atkinson Hyperlegible"; - text-align: center; - max-width: 95%; -} - -.episodesButtonsContainer { - max-width: 80%; - margin: 0px auto; - max-height: 200px; - overflow-y: auto; - text-align: center; -} - -.episodeButton { - background-color: var(--light-green); - border: none; - border-radius: 5px; - padding: 8px; - margin: 5px; - width: 50px; - font-family: "Atkinson Hyperlegible"; - font-size: 16px; - cursor: pointer; -} - -.episodeButton:hover { - background-color: var(--soft-purple); -} - -.episodeButton:focus { - background-color: var(--pastel-red); - transition: padding 0.2s ease; - padding: 5px; -} - -.videoPlayer { - display: flex; - justify-content: center; -} - -.videoPlayer video { - border-radius: 10px; -} - -@media screen and (max-width: 1440px) { - .videoContainer { - max-width: 70%; - } - -} - -@media screen and (max-width: 1024px) { - .videoContainer { - max-width: 95%; - } -} - -@media screen and (max-width: 768px) { - .videoContainer { - max-width: 95%; - } - - .titleContainer { - width: 100%; - } - - .popupEntry { - width: 90%; - } - - .sC { - width: 70%; - } -} \ No newline at end of file diff --git a/src/app/kdrama/page.jsx b/src/app/kdrama/page.jsx index 4426a2b..34b1766 100644 --- a/src/app/kdrama/page.jsx +++ b/src/app/kdrama/page.jsx @@ -1,163 +1,12 @@ -"use client"; - -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 { - fetchAnimeInfo, - fetchDramaInfo, - fetchVideoLinks, -} from "./api/fetchAnime.js"; - -export default function Kdrama() { - const [searchTitle, setSearchTitle] = useState(""); - const [searchedDrama, setSearchedDrama] = useState(null); - async function handleKeyPresses(event) { - if ( - (event.code === "Enter" || - event.code === 13 || - event.key === "Enter") && - searchTitle != "" - ) { - const info = await fetchAnimeInfo(searchTitle); - setSearchedDrama(info); - document.getElementById("popup").style.display = "flex"; - } - } - - const [details, setDetails] = useState(null); - async function handleDramaSearch(input) { - setVideoLink(null); - setEpisodeNo(""); - const drama_info = await fetchDramaInfo(input); - setDetails(drama_info); - document.getElementById("intro").style.display = "none"; - document.getElementById("videoContainer").style.display = "flex"; - } - - const [videoLink, setVideoLink] = useState(null); - const [episodeNo, setEpisodeNo] = useState(""); - async function get_video_link(ep_id, drama_id, episode) { - const link = await fetchVideoLinks(drama_id, ep_id); - const video_link = link.sources[0].url; - setVideoLink(video_link); - setEpisodeNo(episode); - } +import styles from "./styles/kdrama.module.css"; +import PopularDramas from "./components/popular"; +import RecentDramas from "./components/recent"; +export default async function Kdrama() { return ( -
-
- - setSearchTitle(event.target.value)} - onKeyDown={(event) => handleKeyPresses(event)} - /> -
- -
-

Start by searching for some dramas

-

Look for the search box above.

-
- -
-
- {videoLink && ( -
- -
- )} - {episodeNo && ( -

- Episode {episodeNo} -

- )} - - {details && ( -
-
-

{details.title}

- Drama -
-
-

{details.description}

-
-
- {details.episodes.map((eps, index) => ( - - ))} -
-
- )} -
-
- - -
+
+ + +
); } diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css new file mode 100644 index 0000000..5597cd2 --- /dev/null +++ b/src/app/kdrama/styles/info.module.css @@ -0,0 +1,55 @@ +.Main { + max-width: 95%; + margin: 0px auto; +} + +.TitleContainer { + display: flex; + align-items: center; + justify-content: space-between; +} + +.TitleContainer p { + color: white; + font-family: "Poppins"; + font-size: 32px; +} + +.TitleContainer img { + height: auto; + width: auto; + border-radius: 10px; +} + +.DramaDescription h2 { + color: gray; + font-family: "Poppins"; +} + +.DramaDescription p { + font-family: "Atkinson Hyperlegible"; + color: white; + margin-top: -10px; +} + +.DramaGenre { + display: flex; + align-items: center; + overflow-x: auto; +} + +.genreMain { + font-family: "Poppins"; + color: var(--neon-green); + font-size: 18px; +} + +.genreEntry { + background-color: #31313141; + color: white; + padding: 5px; + margin: 3px; + border-radius: 5px; + font-family: "Atkinson Hyperlegible"; + cursor: crosshair; +} \ No newline at end of file diff --git a/src/app/kdrama/styles/kdrama.module.css b/src/app/kdrama/styles/kdrama.module.css new file mode 100644 index 0000000..3e84530 --- /dev/null +++ b/src/app/kdrama/styles/kdrama.module.css @@ -0,0 +1,4 @@ +.Main { + max-width: 95%; + margin: 0px auto; +} \ No newline at end of file diff --git a/src/app/kdrama/styles/popular.module.css b/src/app/kdrama/styles/popular.module.css new file mode 100644 index 0000000..cdda029 --- /dev/null +++ b/src/app/kdrama/styles/popular.module.css @@ -0,0 +1,52 @@ +.popDramasText { + color: var(--soft-purple); + font-family: "Poppins"; + font-size: 28px; + margin-bottom: 10px; +} + +.AnimeContainer { + display: flex; + overflow-x: auto; +} + +.AnimeContainer::-webkit-scrollbar { + height: 5px; +} + +.AnimeContainer::-webkit-scrollbar-track { + background-color: #3333339d; + border-radius: 5px; +} + +.AnimeContainer::-webkit-scrollbar-thumb { + background-color: rgb(68, 68, 68); + border-radius: 5px; +} + +/* Format the scrollbar later */ + +.AnimeEntry { + display: flex; + flex-direction: column; + align-items: center; + margin: 7px; + transition: transform 0.2s linear; +} + +.AnimeEntry:hover { + transition: transform 0.2s linear; + transform: scale(0.97); + cursor: pointer; +} + +.AnimeEntry img { + border-radius: 5px; +} + + +.AnimeEntry p { + text-align: center; + color: white; + font-family: "Atkinson Hyperlegible"; +} \ No newline at end of file diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx index 5b54e23..1e4a26f 100644 --- a/src/app/manga/[title]/[id]/page.jsx +++ b/src/app/manga/[title]/[id]/page.jsx @@ -119,7 +119,8 @@ export default async function MangaInfo({ params }) { async function getMangaInfo(id) { const res = await fetch( - `https://consumet-api-di2e.onrender.com/meta/anilist-manga/info/${id}?provider=mangadex` + `https://consumet-api-di2e.onrender.com/meta/anilist-manga/info/${id}?provider=mangadex`, + { next: { revalidate: 86400 } } ); const data = await res.json(); return data; diff --git a/src/app/manga/manga.module.css b/src/app/manga/manga.module.css index a1bf84f..6091f6d 100644 --- a/src/app/manga/manga.module.css +++ b/src/app/manga/manga.module.css @@ -1,7 +1,5 @@ -@import url('https://fonts.googleapis.com/css2?family=Glass+Antiqua&family=Inter&display=swap'); - .Main { - max-width: 90%; + max-width: 95%; margin: 10px auto; } @@ -14,18 +12,12 @@ .ImageContainer { display: flex; flex-direction: column; + max-width: auto; } .ImageContainer img { margin: 0px 4px 4px 4px; border-radius: 8px; - animation: zoomer 1s alternate-reverse infinite ease; -} - -@keyframes zoomer { - to { - transform: scale(1.01); - } } .WelcomeContainer button { @@ -41,42 +33,26 @@ } .WelcomeText { - font-family: "Kanit"; + font-family: "Poppins"; color: white; - font-size: 50px; - text-shadow: #FC0 2px 2px 50px; + font-size: 48px; + text-shadow: rgb(0, 183, 255) 2px 2px 50px; margin-right: 10px; } - .SelfPromoContainer { display: flex; - justify-content: space-around; - font-family: "Lato"; + justify-content: center; + flex-direction: column; color: white; - /* margin-top: 20px; */ } .SelfPromoContainer p { - font-family: "Quicksand"; + font-family: "Atkinson Hyperlegible"; color: white; text-align: center; } - -@media screen and (max-width: 1024px) { - - .HorizontalImageContainer img { - width: auto; - height: auto; - } - - .VerticalImageContainer img { - width: 265px; - } -} - - .SearchBar { display: flex; align-items: center; @@ -110,20 +86,6 @@ @media screen and (max-width: 768px) { - .HorizontalImageContainer img { - width: 95%; - height: auto; - } - - .VerticalImageContainer img { - width: 46.5%; - height: 300px; - } -} - - -@media screen and (max-width: 425px) { - .Hero { flex-direction: column; } @@ -132,17 +94,19 @@ display: flex; align-items: center; flex-direction: column; + justify-content: center; margin-bottom: 10px; } .WelcomeText { - font-size: 32px; + font-size: 30px; } .HorizontalImageContainer img { - margin-top: 20px; width: 100%; + border-radius: 5px; height: auto; + margin: 10px auto; } .VerticalImageContainer img { @@ -151,5 +115,6 @@ .SearchBar { width: 80%; + margin: 0px auto; } } \ No newline at end of file diff --git a/src/app/manga/page.jsx b/src/app/manga/page.jsx index 7f1f9cb..e6ad898 100644 --- a/src/app/manga/page.jsx +++ b/src/app/manga/page.jsx @@ -16,20 +16,20 @@ export default async function Manga() {
Haikyu
Haikyu Haikyu
-
-

- Welcome to Dramalama Manga -

-

- Dive into a world where action jumps off the page and - pictures paint a thousand words. Dramalama Manga is a - site that will immerse you in stunning illustrations and - compel you to lose yourself in thrilling narratives. -

-
+

+ Welcome to Dramalama Manga +

+

+ Dive into a world where action jumps off the page and + pictures paint a thousand words. Dramalama Manga is a site + that will immerse you in stunning illustrations and compel + you to lose yourself in thrilling narratives. +

); -- cgit v1.2.3