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 From 381a1cb5c14270d9bdc8cd56f17c75d79df231de Mon Sep 17 00:00:00 2001 From: real-zephex Date: Fri, 5 Apr 2024 09:57:47 +0530 Subject: added caching and video player --- src/app/anime/[id]/[...animeId]/page.jsx | 3 +- src/app/kdrama/[id]/buttons.jsx | 59 ++++++++++++++++++++++++++++++++ src/app/kdrama/[id]/page.jsx | 12 ++++++- src/app/kdrama/components/cacher.js | 8 +++++ src/app/kdrama/components/videoLink.js | 11 ++++++ src/app/kdrama/styles/info.module.css | 57 ++++++++++++++++++++++++++++++ src/app/kdrama/styles/popular.module.css | 2 +- 7 files changed, 148 insertions(+), 4 deletions(-) create mode 100644 src/app/kdrama/[id]/buttons.jsx create mode 100644 src/app/kdrama/components/cacher.js create mode 100644 src/app/kdrama/components/videoLink.js (limited to 'src') diff --git a/src/app/anime/[id]/[...animeId]/page.jsx b/src/app/anime/[id]/[...animeId]/page.jsx index 60c05ee..950f618 100644 --- a/src/app/anime/[id]/[...animeId]/page.jsx +++ b/src/app/anime/[id]/[...animeId]/page.jsx @@ -32,8 +32,8 @@ export default async function Video({ params }) { try { link = data.sources[3].url; } catch (error) { - redirect("/404"); console.log("Episode not found."); + redirect("/404"); } } @@ -47,7 +47,6 @@ export default async function Video({ params }) { +
+

Episodes

+
+ {episodeData && + episodeData.map((item, index) => ( + + ))} +
+
+ {videoLink && ( +
+ + + + +

{episode.toUpperCase()}

+
+ )} + + ); +} diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx index cd3af74..c891a0b 100644 --- a/src/app/kdrama/[id]/page.jsx +++ b/src/app/kdrama/[id]/page.jsx @@ -1,9 +1,14 @@ import styles from "../styles/info.module.css"; import Image from "next/image"; +import EpisodesButtons from "./buttons"; +import VideoLinkCacher from "../components/cacher"; + export default async function DramaInfo({ params }) { const id = decodeURIComponent(params.id); const info = await getDramaInfo(id); + await VideoLinkCacher(info.episodes, id); + return (
{info && ( @@ -19,6 +24,7 @@ export default async function DramaInfo({ params }) { />
+ {/* Drama description */}

Description

{info.description}

@@ -45,6 +51,9 @@ export default async function DramaInfo({ params }) { ))}
+ + {/* Episodes Buttons */} + )} @@ -53,7 +62,8 @@ export default async function DramaInfo({ params }) { async function getDramaInfo(id) { const res = await fetch( - `https://consumet-api-di2e.onrender.com/movies/dramacool/info?id=${id}` + `https://consumet-api-di2e.onrender.com/movies/dramacool/info?id=${id}`, + { next: { revalidate: 86400 } } ); const data = await res.json(); return data; diff --git a/src/app/kdrama/components/cacher.js b/src/app/kdrama/components/cacher.js new file mode 100644 index 0000000..3ef05be --- /dev/null +++ b/src/app/kdrama/components/cacher.js @@ -0,0 +1,8 @@ +// This file pre fetches all the videolinks and next js automatically caches them! + +export default async function VideoLinkCacher(data, dramaId) { + data.forEach(async (element) => { + const link = `https://consumet-api-di2e.onrender.com/movies/dramacool/watch?episodeId=${element.id}&mediaId=${dramaId}`; + await fetch(link, { cache: "force-cache" }); + }); +} diff --git a/src/app/kdrama/components/videoLink.js b/src/app/kdrama/components/videoLink.js new file mode 100644 index 0000000..fec016d --- /dev/null +++ b/src/app/kdrama/components/videoLink.js @@ -0,0 +1,11 @@ +"use server"; +export default async function getVideoLink(epiId, mediaId) { + let videoLink; + const res = await fetch( + `https://consumet-api-di2e.onrender.com/movies/dramacool/watch?episodeId=${epiId}&mediaId=${mediaId}`, + { cache: "force-cache" } + ); + const data = await res.json(); + videoLink = data.sources[0].url; + return videoLink; +} diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css index 5597cd2..cc4ebe8 100644 --- a/src/app/kdrama/styles/info.module.css +++ b/src/app/kdrama/styles/info.module.css @@ -52,4 +52,61 @@ border-radius: 5px; font-family: "Atkinson Hyperlegible"; cursor: crosshair; +} + +.EpisodesContainer { + margin-top: -10px; +} + +.EpisodesContainer h2 { + color: gray; + font-family: "Poppins"; +} + +.EpisodeButtons { + margin: -10px 5px; +} + +.EpisodeButtons button { + margin: 3px; + padding: 5px; + border: none; + outline: none; + font-family: "Atkinson Hyperlegible"; + font-size: 16px; + border-radius: 5px; + background-color: #3d3d3d; + transition: background-color 0.2s linear; + color: white; + cursor: pointer; +} + +.EpisodeButtons button:hover { + background-color: #1f1f1f; + transition: background-color 0.2s linear +} + +.VideoContainer { + margin-top: 20px; + display: flex; + align-items: center; + flex-direction: column; +} + +.VideoContainer p { + color: white; + font-family: "Atkinson Hyperlegible"; + color: var(--neon-green); +} + +.VideoPlayer { + width: 70%; + height: auto; + margin: 0px auto; +} + +@media screen and (max-width: 768px) { + .VideoPlayer { + width: 100%; + } } \ No newline at end of file diff --git a/src/app/kdrama/styles/popular.module.css b/src/app/kdrama/styles/popular.module.css index cdda029..eafe792 100644 --- a/src/app/kdrama/styles/popular.module.css +++ b/src/app/kdrama/styles/popular.module.css @@ -32,12 +32,12 @@ align-items: center; margin: 7px; transition: transform 0.2s linear; + cursor: grab; } .AnimeEntry:hover { transition: transform 0.2s linear; transform: scale(0.97); - cursor: pointer; } .AnimeEntry img { -- cgit v1.2.3 From 0c7581bb601b748bdb54ba9496b32a34f30c1abe Mon Sep 17 00:00:00 2001 From: real-zephex Date: Sat, 6 Apr 2024 15:31:11 +0530 Subject: added search functionality --- src/app/kdrama/[id]/page.jsx | 4 +- src/app/kdrama/components/cacher.js | 19 +++++--- src/app/kdrama/components/search.jsx | 56 +++++++++++++++++++++++ src/app/kdrama/components/searchQuery.js | 8 ++++ src/app/kdrama/page.jsx | 2 + src/app/kdrama/styles/info.module.css | 1 + src/app/kdrama/styles/search.module.css | 77 ++++++++++++++++++++++++++++++++ 7 files changed, 159 insertions(+), 8 deletions(-) create mode 100644 src/app/kdrama/components/search.jsx create mode 100644 src/app/kdrama/components/searchQuery.js create mode 100644 src/app/kdrama/styles/search.module.css (limited to 'src') diff --git a/src/app/kdrama/[id]/page.jsx b/src/app/kdrama/[id]/page.jsx index c891a0b..baaf24e 100644 --- a/src/app/kdrama/[id]/page.jsx +++ b/src/app/kdrama/[id]/page.jsx @@ -1,13 +1,13 @@ import styles from "../styles/info.module.css"; import Image from "next/image"; import EpisodesButtons from "./buttons"; -import VideoLinkCacher from "../components/cacher"; +import PreFetchVideoLinks from "../components/cacher"; export default async function DramaInfo({ params }) { const id = decodeURIComponent(params.id); const info = await getDramaInfo(id); - await VideoLinkCacher(info.episodes, id); + PreFetchVideoLinks(info.episodes, id); return (
diff --git a/src/app/kdrama/components/cacher.js b/src/app/kdrama/components/cacher.js index 3ef05be..b04c932 100644 --- a/src/app/kdrama/components/cacher.js +++ b/src/app/kdrama/components/cacher.js @@ -1,8 +1,15 @@ -// This file pre fetches all the videolinks and next js automatically caches them! +// This function pre-fetches all the video links for a drama in the background -export default async function VideoLinkCacher(data, dramaId) { - data.forEach(async (element) => { - const link = `https://consumet-api-di2e.onrender.com/movies/dramacool/watch?episodeId=${element.id}&mediaId=${dramaId}`; - await fetch(link, { cache: "force-cache" }); - }); +export default async function PreFetchVideoLinks(data, dramaId) { + try { + const fetchPromises = data.map(async (element) => { + const link = `https://consumet-api-di2e.onrender.com/movies/dramacool/watch?episodeId=${element.id}&mediaId=${dramaId}`; + await fetch(link, { cache: "force-cache" }); + }); + + await Promise.all(fetchPromises); + console.log("Video links pre-fetched successfully!"); + } catch (error) { + console.error("Error occurred while pre-fetching video links:", error); + } } diff --git a/src/app/kdrama/components/search.jsx b/src/app/kdrama/components/search.jsx new file mode 100644 index 0000000..4c9d00c --- /dev/null +++ b/src/app/kdrama/components/search.jsx @@ -0,0 +1,56 @@ +"use client"; + +import styles from "../styles/search.module.css"; +import { useState } from "react"; +import { FaSearch } from "react-icons/fa"; +import FetchSearchTitle from "./searchQuery"; +import Image from "next/image"; +import Link from "next/link"; + +export default function DramaSearch() { + const [title, setTitle] = useState(""); + const [infoTitle, setInfoTitle] = useState(null); + + async function getSearchResults(title) { + const data = await FetchSearchTitle(title); + setInfoTitle(data); + } + + return ( +
+
+ + setTitle(event.target.value)} + onKeyDown={async (e) => { + if ((e.key === "Enter" || e.code === 13) && title) { + await getSearchResults(e.target.value); + } + }} + > +
+ +
+ {infoTitle && + infoTitle.results.map((item, index) => ( + +
+

{item.title}

+ Drama Poster +
+ + ))} +
+
+ ); +} diff --git a/src/app/kdrama/components/searchQuery.js b/src/app/kdrama/components/searchQuery.js new file mode 100644 index 0000000..64e428b --- /dev/null +++ b/src/app/kdrama/components/searchQuery.js @@ -0,0 +1,8 @@ +export default async function FetchSearchTitle(title) { + const res = await fetch( + `https://consumet-api-di2e.onrender.com/movies/dramacool/${title}`, + { cache: "force-cache" } + ); + const data = await res.json(); + return data; +} diff --git a/src/app/kdrama/page.jsx b/src/app/kdrama/page.jsx index 34b1766..44f8eb9 100644 --- a/src/app/kdrama/page.jsx +++ b/src/app/kdrama/page.jsx @@ -1,10 +1,12 @@ import styles from "./styles/kdrama.module.css"; import PopularDramas from "./components/popular"; import RecentDramas from "./components/recent"; +import DramaSearch from "./components/search"; export default async function Kdrama() { return (
+
diff --git a/src/app/kdrama/styles/info.module.css b/src/app/kdrama/styles/info.module.css index cc4ebe8..90a33b5 100644 --- a/src/app/kdrama/styles/info.module.css +++ b/src/app/kdrama/styles/info.module.css @@ -79,6 +79,7 @@ transition: background-color 0.2s linear; color: white; cursor: pointer; + width: 100px; } .EpisodeButtons button:hover { diff --git a/src/app/kdrama/styles/search.module.css b/src/app/kdrama/styles/search.module.css new file mode 100644 index 0000000..5f61c23 --- /dev/null +++ b/src/app/kdrama/styles/search.module.css @@ -0,0 +1,77 @@ +.SearchContainer { + margin: 20px 0px -20px 0px; +} + +.Search { + padding: 5px; + background-color: #121212; + display: flex; + align-items: center; + max-width: 30%; + border-radius: 10px; +} + +.SearchContainer input { + margin-left: 5px; + padding: 5px; + border: none; + outline: none; + background-color: #121212; + font-size: 16px; + font-family: "Atkinson Hyperlegible"; + color: white; + width: 100%; +} + +.SearchResults { + display: flex; + margin-top: 10px; + overflow-x: auto; +} + +.SearchResults::-webkit-scrollbar { + height: 5px; +} + +.SearchResults::-webkit-scrollbar-track { + background-color: #3333339d; + border-radius: 5px; +} + +.SearchResults::-webkit-scrollbar-thumb { + background-color: rgb(68, 68, 68); + border-radius: 5px; +} + +.SearchEntry { + display: flex; + align-items: center; + justify-content: space-between; + margin: 5px; + padding: 6px; + background-color: #2e2e2eab; + border-radius: 10px; + cursor: pointer; + transition: transform 0.2s linear; +} + +.SearchEntry:hover { + transition: transform 0.2s linear; + transform: scale(1.01); +} + +.SearchEntry p { + color: white; + font-family: "Atkinson Hyperlegible"; + width: 40vh; +} + +.SearchEntry img { + border-radius: 10px; +} + +@media screen and (max-width: 768px) { + .Search { + max-width: 100%; + } +} \ No newline at end of file -- cgit v1.2.3