";
3 | initial-value: 0deg;
4 | inherits: false;
5 | }
6 |
7 | .loading {
8 | background: #0f0f13;
9 | height: 400px;
10 | border-radius: 14px;
11 | position: relative;
12 | animation: loading 8s linear infinite;
13 | }
14 |
15 | .loading::after {
16 | content: "";
17 | top: 50%;
18 | left: 50%;
19 | width: 102%;
20 | z-index: -1;
21 | height: 101.5%;
22 | position: absolute;
23 | transform: translate(-50%, -50%);
24 | border-radius: 14px;
25 | animation: rotation 4s linear infinite;
26 | background: linear-gradient(var(--gradient-angle), #141416, #2a608a8c);
27 | }
28 |
29 | @keyframes rotation {
30 | 0% {
31 | --gradient-angle: 0deg;
32 | }
33 | 100% {
34 | --gradient-angle: 360deg;
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/app/(home)/download/[id]/page.js:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import Loading from '@/components/layout/loading/Loading';
3 | import { fetchData } from '@/lib/FetchData';
4 | import { useRouter } from 'next/navigation';
5 | import { useEffect } from 'react';
6 |
7 | const Download = ({ params }) => {
8 | const { push } = useRouter();
9 |
10 | useEffect(() => {
11 | const fetchVideos = async () => {
12 | try {
13 | const data = await fetchData(`/meta/anilist/watch/${params.id}`);
14 | if (data.ok) {
15 | // console.log(data.data.download);
16 | push(data.data.download);
17 | }
18 | } catch (error) {
19 | console.error("Error fetching Download url:", error);
20 | }
21 | };
22 |
23 | fetchVideos();
24 | }, []);
25 |
26 | return
6 |
7 |
8 |
10 |
11 |
15 |
16 |
17 |
18 |
8 |
9 |
10 | setCategory("Trending")}>Trending Series
11 | {genreList.map((genre) => (
12 | setCategory(genre)}>{genre}
13 | ))}
14 |
15 |
7 |
A-Z
8 |
9 |
Dive Deep! Explore Animes A to Z Alphabetically.
10 |
11 | Discover your next favorite Anime series, all organized alphabetically. Explore a vast collection of genres and discover hidden gems.
12 |
13 |
14 |
15 | {alphabets.map((letter, index) => (
16 |
17 | {letter}
18 |
19 | ))}
20 |
21 |
8 |
{name}
9 |
{description}
10 |
11 |
12 |
13 | Type:
15 |
16 | Genre:
17 | {genre.map((genre, index) =>
19 |
20 |
21 |
22 |
Watch Now
23 |
19 |
Season
20 |
21 | {seasons.map((season, index) => (
22 |
handleClick(season)}>{searchData.season === season ?
23 | ))}
24 |
25 |
18 |
Status
19 |
20 | {status.map((status, index) => (
21 |
handleClick(status)}>{searchData.status === status ?
22 | ))}
23 |
24 |
21 |
Type
22 |
23 | {types.map((type, index) => (
24 |
handleClick(type)}>{searchData.type === type ?
25 | ))}
26 |
27 |
9 |
10 |
Type
11 |
{type}
12 |
13 |
14 |
Studio
15 |
{studios[0]}
16 |
17 |
18 |
Published
19 |
{months[startDate?.month]} {startDate?.day}, {startDate?.year}
20 |
21 |
22 |
duration
23 |
{duration} min
24 |
25 |
26 |
Status
27 |
{status}
28 |
29 |
30 |
Season
31 |
{season}
32 |
33 |
9 |
10 |
11 |
12 |
13 |
15 |
16 |
17 |
18 |
20 |
21 |
22 |
Jujutsu Kaisen
23 |
Young Yuji unwittingly joins his school's Occult Club, discovers they're sorcerers, and becomes host to the demon Sukuna. Mastering his magic, he enrolls in Tokyo Metropolitan Magic Technical College to collect Sukuna's fingers for a full exorcism.
24 |
25 |
26 |
27 |
10 |
11 |
12 |
13 |
14 |
15 |
AnimeVerse
16 |
17 |
18 |
19 |
Enter The Anime Universe
20 |
Be Part Of The journey
21 |
22 |
23 |
Do you have a AnimeVerse account?
24 |
25 |
26 |
27 |
28 | This Site is Protected by reCAPTCHA and the Google
30 |
31 |
21 |
Welcome to Animeverse Search!
22 |
23 |
32 |
34 |
35 |
11 |
12 |
13 | Recommended Anime Series
14 |
15 |
16 |
17 | {data.map((items, index) => (
18 |
19 |
{index + 1}
20 |
21 |
23 |
24 |
25 |
{items.title?.english}
26 |
27 |
28 |
29 |
30 | ))}
31 |
32 |
33 |
23 | router.push("/info/" + id)}>View Details
26 | Next: Episode {VideoOptionToggler?.[2]?.number || VideoOptionToggler?.[1]?.number}
29 | )
30 | }
31 |
32 | export default VideoOption
--------------------------------------------------------------------------------
/components/layout/navbar/Items/Items.module.css:
--------------------------------------------------------------------------------
1 | .items {
2 | display: flex;
3 | align-items: center;
4 | gap: 2rem;
5 | list-style: none;
6 | margin-left: 40px;
7 | }
8 |
9 | .listitem a {
10 | all: unset;
11 | z-index: 2;
12 | position: relative;
13 | font-family: "poppins", sans-serif;
14 | font-size: 13px;
15 | }
16 |
17 | .listitem {
18 | position: relative;
19 | padding: 9px 15px;
20 | cursor: pointer;
21 | font-size: 16px;
22 | border-radius: 50px;
23 | transition: 0.5s;
24 | }
25 |
26 | .listitem:hover {
27 | background: #000000;
28 | }
29 | .listitem:hover::after {
30 | content: "";
31 | top: 50%;
32 | left: 50%;
33 | height: 110%;
34 | z-index: 1;
35 | width: 105%;
36 | background: linear-gradient(30deg, #ffffff29, #ffffff0a);
37 | position: absolute;
38 | border-radius: 50px;
39 | transform: translate(-50%, -50%);
40 | }
41 |
42 | .active {
43 | background: #000000;
44 | }
45 | .active::after {
46 | content: "";
47 | top: 50%;
48 | left: 50%;
49 | height: 110%;
50 | z-index: 1;
51 | width: 105%;
52 | background: linear-gradient(30deg, #ffffff29, #ffffff0a);
53 | position: absolute;
54 | border-radius: 50px;
55 | transform: translate(-50%, -50%);
56 | }
57 |
58 | .itemsTablet {
59 | margin-left: 0px;
60 | flex-direction: column;
61 | align-items: normal;
62 | text-align: center;
63 | gap: 6px;
64 | }
65 |
66 | @media screen and (max-width: 1080px) {
67 | .items {
68 | display: none;
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/components/ui/banner/Banner.jsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image"
2 | import styles from "./banner.module.css"
3 | import AnimeInfo from "./AnimeInfo/AnimeInfo"
4 | import { useState } from "react"
5 | import VideoPlay from "./videoPlay/VideoPlay"
6 |
7 | const Banner = ({ info }) => {
8 | const [isVideoPlaying, setIsVideoPlaying] = useState(false)
9 | const [isImageLoaded, setIsImageLoaded] = useState(false)
10 | const HoverTime = 1000
11 | let hoverTimer = null;
12 |
13 | const onMouseEnter = () => {
14 | if (!isVideoPlaying && window.innerWidth >= 890) {
15 | hoverTimer = setTimeout(() => {
16 | setIsVideoPlaying(true);
17 | }, HoverTime);
18 | }
19 | }
20 |
21 | const onMouseLeave = () => {
22 | clearTimeout(hoverTimer); // Cancel the timeout if mouse leaves before HoverTime
23 | setIsVideoPlaying(false);
24 | }
25 |
26 | return (
27 |
31 |
32 | {!isVideoPlaying || !info?.video || !isImageLoaded ? setIsImageLoaded(true)} /> : null}
33 | {info?.video && isVideoPlaying ?
35 |
36 |
37 |
16 |
17 |
18 | {/* for table to mobile phone viewport */}
19 |
setIsHamburgerToggled(prev => !prev)}>
20 |
22 |
23 | {isHamburgerToggled ?
: null}
24 |
25 |
26 |
27 |
AnimeVerse
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
40 | )
41 | }
42 |
43 | export default Navbar
--------------------------------------------------------------------------------
/content/HomePage/Watch/left/animeInfo/AnimeInfo.jsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image"
2 | import styles from "./animeInfo.module.css"
3 | import { FaHouse as HomeIcon } from "react-icons/fa6";
4 | import { FaAngleRight as RightArrow } from "react-icons/fa6";
5 | import Link from "next/link";
6 | import { useSearchParams } from "next/navigation";
7 |
8 | const AnimeInfo = ({ info, episode }) => {
9 | const episodeNo = useSearchParams().get('episode')
10 |
11 | if (!info) return null
12 | const { title, id } = info
13 | return (
14 |
15 |
16 |
22 |
23 |
24 |
25 |
29 |
30 |
31 | {title?.english}: Episode {episode}
32 |
33 |
34 |
Read This anime and mangas on MangaGrok . Don't forgot to explore our other manga series as well!
35 |
36 |
34 |
35 | Year
36 | {isYearOff ?
37 | setIsYearOff(false)}>{searchData.year}
38 | : null
39 | }
40 |
41 |
42 |
44 |
53 | {
54 | items.map((item, index) =>
55 |
59 | )
60 | }
61 |
62 | export default Items
63 |
--------------------------------------------------------------------------------
/components/layout/navbar/search/Search.jsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useState } from "react";
4 | import styles from "./search.module.css"
5 | import { IoSearch } from "react-icons/io5";
6 | import { useRouter } from "next/navigation";
7 |
8 | const Search = () => {
9 | const [isSearchToggled, setIsSearchToggled] = useState(false)
10 | const [searchText, setSearchText] = useState("")
11 | const router = useRouter()
12 |
13 | const onEnter = (e) => {
14 | if (e.key === "Enter") {
15 | if (searchText !== "") {
16 | router.push(`/search?q=${searchText}`)
17 | }
18 | }
19 | }
20 |
21 | return (
22 | <>
23 | {
24 | isSearchToggled ?
25 |
26 |
: null
28 | }
29 |
30 |
31 |
32 |
34 |
searchText !== "" ? router.push(`/search?q=${searchText}`) : setIsSearchToggled(prev => !prev)}>
35 |
searchText !== "" ? router.push(`/search?q=${searchText}`) : setIsSearchToggled(prev => !prev)}>
38 |
39 | )
40 | }
41 |
42 | export default Search
--------------------------------------------------------------------------------
/components/ui/recentReleaseCard/RecentReleasesCard.jsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image"
2 | import loadingStyles from "./loading.module.css"
3 | import styles from "./../card/card.module.css"
4 | import { FaBookmark } from "react-icons/fa6";
5 | import { BsStack } from "react-icons/bs";
6 | import { FaPlayCircle } from "react-icons/fa";
7 | import Link from "next/link";
8 | import { motion } from "framer-motion";
9 |
10 |
11 | const RecentReleasesCard = ({ isLoading = false, info, }) => {
12 | if (isLoading) {
13 | return
14 | }
15 |
16 | const { id, title, image, currentEpisode } = info
17 | return (
18 |
19 |
20 |
22 |
23 |
24 |
25 |
28 |
29 |
30 |
32 |
33 |
34 |
35 |
36 |
{title.english}
37 |
38 |
39 |
40 |
42 |
43 |
44 |
50 | )
51 | }
52 |
53 | export default RecentReleasesCard
--------------------------------------------------------------------------------
/content/HomePage/Search/userSelection/userSelection.module.css:
--------------------------------------------------------------------------------
1 | .searchInfo {
2 | position: absolute;
3 | top: 50%;
4 | left: 50%;
5 | transform: translate(-50%, -50%);
6 | z-index: 5;
7 | width: 100%;
8 | display: flex;
9 | flex-direction: column;
10 | align-items: center;
11 | }
12 |
13 | .searchInfo .title {
14 | text-align: center;
15 | font-family: "poppins", sans-serif;
16 | line-height: 33px;
17 | font-size: 3rem;
18 | font-weight: 600;
19 | background: -webkit-linear-gradient(#eee, #444);
20 | -webkit-background-clip: text;
21 | background-clip: text;
22 | -webkit-text-fill-color: transparent;
23 | width: 100%;
24 | line-height: 42px;
25 | }
26 |
27 | .searchInfo .search {
28 | background: #0f0f13;
29 | border-radius: 20px;
30 | padding: 10px 10px 9px 15px;
31 | border: 2px solid #1c1c1e;
32 | display: flex;
33 | margin-top: 1.9rem;
34 | width: -webkit-fill-available;
35 | width: -moz-fill-available;
36 | max-width: 72rem;
37 | height: 5rem;
38 | margin-inline: 20px;
39 | }
40 |
41 | .searchInfo .search .searchInput {
42 | background: transparent;
43 | width: 100%;
44 | color: white;
45 | font-family: "poppins", sans-serif;
46 | font-size: 15px;
47 | border: none;
48 | outline: none;
49 | height: 100%;
50 | }
51 |
52 | .searchInfo .search button {
53 | width: 62px;
54 | position: relative;
55 | padding: 11px;
56 | cursor: pointer;
57 | font-size: 20px;
58 | border-radius: 15px;
59 | display: flex;
60 | align-items: center;
61 | z-index: 2;
62 | justify-content: center;
63 | background: transparent;
64 | border: 2px solid #252527;
65 | color: white;
66 | }
67 |
68 | .selectionArea {
69 | display: flex;
70 | width: 100%;
71 | max-width: 86rem;
72 | justify-content: center;
73 | gap: 10px;
74 | margin-top: 20px;
75 | flex-wrap: wrap;
76 | }
77 |
--------------------------------------------------------------------------------
/components/ui/banner/videoPlay/VideoPlay.jsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { useEffect, useRef, useState } from "react";
4 | import styles from "./videoPlay.module.css";
5 |
6 | const VideoPlay = ({ url, display, play = false }) => {
7 | const [videoLoaded, setVideoLoaded] = useState(false);
8 | const vidRef = useRef(null);
9 |
10 | useEffect(() => {
11 | const video = vidRef.current;
12 |
13 | const handleCanPlay = () => {
14 | if (play && video) {
15 | video.play().catch(error => {
16 | console.error('Failed to start playback:', error);
17 | });
18 | }
19 | };
20 |
21 | const handleLoadedMetadata = () => {
22 | setVideoLoaded(true);
23 | };
24 |
25 | if (video) {
26 | video.addEventListener('canplay', handleCanPlay);
27 | video.addEventListener('loadedmetadata', handleLoadedMetadata);
28 |
29 | // Start loading the video when component mounts
30 | video.load();
31 |
32 | return () => {
33 | video.removeEventListener('canplay', handleCanPlay);
34 | video.removeEventListener('loadedmetadata', handleLoadedMetadata);
35 | };
36 | }
37 | }, [play]);
38 |
39 | const handleVideoClick = () => {
40 | const video = vidRef.current;
41 | if (video && !videoLoaded) {
42 | video.play().catch(error => {
43 | console.error('Failed to start playback:', error);
44 | });
45 | }
46 | };
47 |
48 | return (
49 |
50 |
51 |
53 |
54 | );
55 | };
56 |
57 | export default VideoPlay;
58 |
--------------------------------------------------------------------------------
/app/(home)/info/[id]/page.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-hooks/exhaustive-deps */
2 | "use client"
3 |
4 | import Image from "next/image"
5 | import styles from "./info.module.css"
6 | import AnimeInfo from "@/content/HomePage/Info/animeInfo/AnimeInfo"
7 | import Recommendation from "@/content/HomePage/Watch/right/recommendation/Recommendation"
8 | import MostPopular from "@/content/HomePage/Watch/right/mostPopular/MostPopular"
9 | import { useEffect, useState } from "react"
10 | import { fetchData } from "@/lib/FetchData"
11 | import Loading from "@/components/layout/loading/Loading"
12 | import AtoZalphabet from "@/components/ui/AtoZalphabet/AtoZalphabet"
13 |
14 | const Info = ({ params }) => {
15 | const { id } = params
16 | const [animeInfo, setAnimeInfo] = useState({})
17 | const [isLoaded, setIsLoaded] = useState(false)
18 |
19 | useEffect(() => {
20 | const fetchAnimeInfo = async () => {
21 | setIsLoaded(false)
22 | let data = await fetchData(`/meta/anilist/data/${id}`, 86400)
23 | setAnimeInfo(data.data)
24 | document.title = `Animeverse - ${data.data.title.english}`;
25 | if (data.ok) {
26 | setIsLoaded(true)
27 | }
28 | }
29 | fetchAnimeInfo()
30 | }, [])
31 |
32 | return !isLoaded ?
35 |
41 |
42 |
43 |
44 |
45 |
48 |
32 |
33 |
34 |
Recent Episode Releases
35 |
Explore And Find Best Anime!
36 |
37 |
38 |
39 |
40 | {!isLoaded ? Array.from({ length: 10 * page }).map((_, index) =>
42 | ))}
43 |
44 |
45 |
datas.hasNextPage && setPage(prev => prev + 1)}>Show More
46 |
49 | )
50 | }
51 |
52 | export default RecentRelease
--------------------------------------------------------------------------------
/content/HomePage/Watch/left/videoSelector/videoSelector.module.css:
--------------------------------------------------------------------------------
1 | .identifier {
2 | display: flex;
3 | padding: 1rem 20px;
4 | margin-top: 2rem;
5 | border-radius: 16px;
6 | border: 2px solid #353841;
7 | gap: 1rem;
8 | align-items: center;
9 | background: linear-gradient(90deg, #38393b, #07070900);
10 | position: relative;
11 | overflow: hidden;
12 | }
13 |
14 | .identifier::after {
15 | content: "";
16 | width: 3px;
17 | border-radius: 50px;
18 | height: 30px;
19 | left: 0px;
20 | top: 50%;
21 | transform: translateY(-50%);
22 | position: absolute;
23 | background: linear-gradient(180deg, #c7c8ca, #f6f6f68f);
24 | }
25 |
26 | .identifier svg {
27 | height: 18px;
28 | width: 18px;
29 | fill: #c9c9c9;
30 | }
31 |
32 | .selector {
33 | width: -webkit-fill-available;
34 | width: -moz-available;
35 | display: flex;
36 | gap: 2rem;
37 | margin-top: 1.4rem;
38 | }
39 |
40 | .selector button {
41 | background: #070709;
42 | border: 2px solid #373a43;
43 | border-radius: 20px;
44 | font-size: 15px;
45 | padding: 10px 20px;
46 | min-width: max-content;
47 | color: #8991a3;
48 | font-family: "poppins", sans-serif;
49 | font-weight: 500;
50 | cursor: pointer;
51 | transition: 0.5s;
52 | }
53 |
54 | .selector button:hover {
55 | color: #c99372;
56 | background: #131315;
57 | }
58 |
59 | .selector button:last-child {
60 | display: flex;
61 | align-items: center;
62 | gap: 4px;
63 | }
64 |
65 | @media screen and (max-width: 750px) {
66 | .selector {
67 | flex-wrap: wrap;
68 | justify-content: center;
69 | gap: 15px;
70 | }
71 | }
72 |
73 | @media screen and (max-width: 1850px) {
74 | .selector {
75 | flex-wrap: wrap;
76 | justify-content: center;
77 | gap: 15px;
78 | }
79 | }
80 |
81 | .active {
82 | background: linear-gradient(174deg, #d5a687, #e79a69) !important;
83 | border: 2px solid #efac87 !important;
84 | color: black !important;
85 | }
86 |
--------------------------------------------------------------------------------
/content/HomePage/Watch/right/mostPopular/MostPopular.jsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import Image from "next/image";
4 | import styles from "./mostPopular.module.css"
5 | import { IoMdPricetag as TagIcon } from "react-icons/io";
6 | import { BiSolidLike } from "react-icons/bi";
7 | import { BsStack } from "react-icons/bs";
8 | import Link from "next/link";
9 | import { useEffect, useState } from "react";
10 | import { fetchData } from "@/lib/FetchData";
11 |
12 | const MostPopular = () => {
13 | const [popularSeries, setPopularSeries] = useState([])
14 |
15 | useEffect(() => {
16 | const fetchPopularAnimes = async () => {
17 | const data = await fetchData(`/meta/anilist/trending?perPage=5`)
18 |
19 | if (data.ok) {
20 | setPopularSeries(data.data)
21 | }
22 | }
23 |
24 | fetchPopularAnimes()
25 | }, [])
26 |
27 |
28 | return (
29 |
30 |
31 |
32 | Top Airing Series
33 |
34 |
35 |
36 | {popularSeries.results?.map((data, index) => (
37 |
38 |
39 |
{index + 1}
40 |
41 |
43 |
44 |
45 |
{data?.title?.english}
46 |
47 |
48 |
49 |
50 | ))}
51 |
52 |
53 |
26 |
27 | Write a review
30 |
31 |
33 |
34 |
35 |
36 |
39 |
40 |
{title?.english}
41 |
42 |
43 |
44 |
45 |
46 | {genres?.map((genre) => (
47 |
50 |
51 |
52 |
53 |
55 |
56 |
57 |
58 |
32 |
setIsSelected(prev => !prev)}>
33 |
35 | {icon}
36 | {defaultOption}
37 |
38 |
{typeof selected === "string" ? selected.length > 8 ? `${selected.slice(0, 8)}...` : selected : selected.slice(0, 2).join(", ")}
39 |
40 |
41 | {isSelected &&
42 |
43 | {items.map((item, index) => (
44 |
onHandleSelect(item)}>
45 | {selected.includes(item) ?
48 | ))}
49 |
50 | }
51 |
52 |
;
14 | }
15 |
16 | const { id, title, image, rating, totalEpisodes, status } = data
17 | return (
18 |
19 |
20 |
22 |
23 |
24 |
25 |
26 |
{status}
27 | {/*
New
*/}
28 |
29 |
30 |
31 |
33 |
34 |
35 |
36 |
37 |
{title.english || title.romaji}
38 |
39 |
40 |
{rating} Rating
41 |
42 |
43 |
44 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | {hasborder ?
:
}
55 |
44 |
Catalog
45 |
46 | {/* year */}
47 |
48 | {/* season */}
49 |
50 |
51 |
52 |
53 |
54 |
Apply
55 |
56 |
29 |
30 |
31 |
Discover Best Anime
32 |
Explore Our Hottest Categories!
33 |
34 |
35 |
36 |
37 |
38 | datas.currentPage >= 1 ? setPage(prev => prev - 1) : null}>
39 | datas.hasNextPage ? setPage(prev => prev + 1) : null} className={styles.active}>
40 |
41 |
42 |
43 |
44 | {!isLoaded ? Array.from({ length: 8 }).map((_, index) =>
49 |
52 | )
53 | }
54 |
55 | export default Discover
--------------------------------------------------------------------------------
/content/HomePage/Watch/left/videoPlayer/VideoPlayer.jsx:
--------------------------------------------------------------------------------
1 | import '@vidstack/react/player/styles/default/theme.css';
2 | import '@vidstack/react/player/styles/default/layouts/video.css';
3 |
4 | import styles from "./videoPlayer.module.css"
5 |
6 | import { defaultLayoutIcons, DefaultVideoLayout } from '@vidstack/react/player/layouts/default';
7 | import { MediaPlayer, MediaProvider, Poster } from '@vidstack/react';
8 | import { useSearchParams } from 'next/navigation';
9 | import { useEffect, useState } from 'react';
10 | import { fetchData } from '@/lib/FetchData';
11 |
12 |
13 | const VideoPlayer = ({ data }) => {
14 | const { animeInfo, videoSelected } = data;
15 |
16 | const { cover, episodes } = animeInfo;
17 |
18 | const [watch, setWatch] = useState(videoSelected?.url)
19 | const [loading, setLoading] = useState(true);
20 |
21 | const searchParams = useSearchParams();
22 |
23 | useEffect(() => {
24 | const fetchVideos = async () => {
25 | setLoading(true);
26 | try {
27 | if (animeInfo !== null) {
28 | const data = await fetchData(`/meta/anilist/watch/${searchParams.get('episodeID') || episodes?.[0]?.id}`);
29 | if (data.ok) {
30 | setWatch(data.data);
31 | }
32 | }
33 | } catch (error) {
34 | console.error("Error fetching videos:", error);
35 | } finally {
36 | setLoading(false);
37 | }
38 | };
39 |
40 | fetchVideos();
41 | }, [searchParams, animeInfo, episodes]);
42 |
43 | return loading ?
44 |
45 | : videoSelected?.server === "default" ? (
46 | item.quality === "default")[0].url} className={styles.container} >
47 |
48 |
50 |
52 | ) : (
53 |
54 | )
55 | }
56 |
57 | export default VideoPlayer
--------------------------------------------------------------------------------
/content/HomePage/Watch/left/animeSeasons/AnimeSeasons.jsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import styles from "./animeSeasons.module.css";
4 | import { FaSwatchbook } from "react-icons/fa6";
5 | import SeasonSelectorCard from "./card/SeasonSelectorCard";
6 | import { useEffect, useState } from "react";
7 | import { IoIosArrowBack as LeftArrow, IoIosArrowForward as RightArrow } from "react-icons/io";
8 |
9 | const AnimeSeasons = ({ data }) => {
10 | const pageSize = 6; // Number of items per page
11 | const [dataPage, setDataPage] = useState(1);
12 | const [totalPages, setTotalPages] = useState(Math.ceil(data.length / pageSize));
13 | const [datas, setDatas] = useState([]);
14 |
15 | useEffect(() => {
16 | const updateDatas = () => {
17 | const start = (dataPage - 1) * pageSize;
18 | const end = start + pageSize;
19 | setDatas(datas.slice(start, end));
20 | setTotalPages(Math.ceil(datas.length / pageSize));
21 | };
22 | updateDatas();
23 | }, [dataPage, datas]);
24 |
25 | const goToPage = (pageNumber) => {
26 | if (pageNumber >= 1 && pageNumber <= totalPages) {
27 | setDataPage(pageNumber);
28 | }
29 | };
30 |
31 | return (
32 | <>
33 |
34 |
37 |
38 |
39 |
goToPage(dataPage - 1)} disabled={dataPage === 1}>
40 |
41 | {Array.from({ length: totalPages }, (_, index) => (
42 | goToPage(index + 1)} className={dataPage === index + 1 ? styles.active : ""}>
43 | {index + 1}
44 |
45 | ))}
46 |
47 |
goToPage(dataPage + 1)} disabled={dataPage === totalPages}>
48 |
51 | {data.map((items, index) => (
52 |
53 |
55 | ))}
56 |
43 |
46 |
47 |
48 | {servers.slice(0, 4)?.map((server, index) => (
49 | handleServerSelection(server.name, server.url)} className={videoSelected?.server === server.name ? styles.active : ""}>
50 | {server.name}
51 |
52 | ))}
53 | handleServerSelection("default", "")} className={videoSelected?.server === "default" ? styles.active : ""}>Default
54 | router.push(`/download/${episodeID}`)}>
55 |
56 |
57 | )
58 | }
59 |
60 | export default VideoSelector;
61 |
--------------------------------------------------------------------------------
/content/HomePage/Watch/left/animeInfo/animeInfo.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | position: relative;
3 | font-family: "poppins", sans-serif;
4 | }
5 |
6 | .backgroundImage {
7 | position: relative;
8 | width: 100%;
9 | height: 500px;
10 | object-fit: cover;
11 | border-radius: 20px;
12 | filter: brightness(50%);
13 | }
14 | .backgroundImage::after {
15 | content: "";
16 | position: absolute;
17 | bottom: 0;
18 | left: 0;
19 | width: 100%;
20 | height: 100%;
21 | background: linear-gradient(
22 | 360deg,
23 | #0c0d10,
24 | #0c0d10a1,
25 | #0c0d1000,
26 | transparent
27 | );
28 | }
29 |
30 | .backgroundImage img {
31 | object-fit: cover;
32 | filter: brightness(0.5);
33 | }
34 |
35 | .info {
36 | position: absolute;
37 | top: 50%;
38 | left: 50%;
39 | transform: translate(-50%, -50%);
40 | display: flex;
41 | flex-direction: column;
42 | align-items: center;
43 | width: 100%;
44 | text-align: center;
45 | }
46 |
47 | .pagination {
48 | display: flex;
49 | align-items: center;
50 | gap: 8px;
51 | color: #eeefef;
52 | font-size: 16px;
53 | font-weight: 500;
54 | }
55 |
56 | .pagination span {
57 | display: flex;
58 | align-items: center;
59 | gap: 2px;
60 | }
61 |
62 | .pagination svg {
63 | font-size: medium;
64 | }
65 |
66 | .pagination a svg {
67 | fill: #e49a70 !important;
68 | font-size: 20px;
69 | }
70 |
71 | .pagination a {
72 | text-decoration: none;
73 | color: inherit;
74 | display: flex;
75 | align-items: center;
76 | gap: 2px;
77 | }
78 |
79 | .pagination a:last-child {
80 | color: #7c8394;
81 | }
82 |
83 | .pagination a:last-child svg {
84 | fill: #7c8394 !important;
85 | font-size: medium;
86 | }
87 |
88 | .title {
89 | text-align: center;
90 | font-size: 34px;
91 | font-weight: 600;
92 | background: -webkit-linear-gradient(#dcdcde, #5a5a5a);
93 | background-clip: text;
94 | -webkit-text-fill-color: transparent;
95 | margin-top: 16px;
96 | display: -webkit-box;
97 | -webkit-line-clamp: 3;
98 | -webkit-box-orient: vertical;
99 | }
100 |
101 | .notification {
102 | color: #7f8798;
103 | font-size: 16px;
104 | font-weight: 500;
105 | margin-top: 10px;
106 | }
107 |
108 | .notification span {
109 | color: #e49b71;
110 | font-weight: 600;
111 | }
112 |
--------------------------------------------------------------------------------
/content/HomePage/Home/recentRelease/recentRelease.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | margin-top: 56px;
3 | display: flex;
4 | flex-direction: column;
5 | align-items: center;
6 | width: 100%;
7 | }
8 |
9 | .recentReleaseContainer {
10 | max-width: 90rem;
11 | width: 100%;
12 | display: flex;
13 | flex-direction: column;
14 | align-items: center;
15 | }
16 |
17 | .title {
18 | text-align: center;
19 | font-family: "poppins", sans-serif;
20 | line-height: 33px;
21 | font-size: 30px;
22 | font-weight: 600;
23 | background: -webkit-linear-gradient(#eee, #444);
24 | -webkit-background-clip: text;
25 | background-clip: text;
26 | -webkit-text-fill-color: transparent;
27 | }
28 |
29 | .cards {
30 | margin-top: 26px;
31 | display: grid;
32 | gap: 20px;
33 | grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
34 | width: 94%;
35 | }
36 |
37 | @media screen and (max-width: 1200px) {
38 | .cards {
39 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
40 | }
41 | }
42 |
43 | @media screen and (max-width: 840px) {
44 | .cards {
45 | grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
46 | }
47 | }
48 |
49 | @media screen and (max-width: 530px) {
50 | .cards {
51 | grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
52 | }
53 | }
54 |
55 | /* pagi */
56 |
57 | .pagitation {
58 | display: flex;
59 | width: 94%;
60 | justify-content: flex-end;
61 | gap: 0.5rem;
62 | }
63 |
64 | .pagitation button {
65 | display: flex;
66 | padding: 9px;
67 | font-size: 18px;
68 | border-radius: 50px;
69 | transition: 0.5s;
70 | background: #070709;
71 | border: 2px solid #9f9e9e85;
72 | color: #bbbbbb;
73 | cursor: pointer;
74 | }
75 | .pagitation button:hover,
76 | .pagitation button.active {
77 | border: 2px solid #daa28185;
78 | }
79 |
80 | .showMoreBtn {
81 | margin-top: 20px;
82 | width: 94%;
83 | max-width: 30rem;
84 | margin-inline: 30px;
85 | padding: 9px 15px;
86 | font-size: 16px;
87 | border-radius: 50px;
88 | transition: 0.5s;
89 | background: #0a0a0d;
90 | font-family: "poppins", sans-serif;
91 | border: 2px solid #2e3138;
92 | color: #bbbbbb;
93 | cursor: pointer;
94 | text-align: center;
95 | margin-bottom: 20px;
96 | }
97 |
98 | .showMoreBtn:hover,
99 | .showMoreBtn:focus {
100 | background: #252529;
101 | }
102 |
--------------------------------------------------------------------------------
/content/HomePage/Search/userSelection/catalog/genres/Genres.jsx:
--------------------------------------------------------------------------------
1 | "use client"
2 |
3 | import { useState } from "react";
4 | import styles from "./genres.module.css"
5 | import { FaRegSquare, FaSquareCheck } from "react-icons/fa6";
6 | import { IoIosArrowDown } from "react-icons/io";
7 | import { motion } from "framer-motion"
8 |
9 | const Genres = ({ callback }) => {
10 | const genres = ["Action", "Adventure", "Cars", "Comedy", "Drama", "Fantasy", "Horror", "Mahou Shoujo", "Mecha", "Music", "Mystery", "Psychological", "Romance", "Sci-Fi", "Slice of Life", "Sports", "Supernatural", "Thriller"]
11 | const [viewAll, setViewAll] = useState(false)
12 |
13 | const { searchData, setSearchData } = callback
14 |
15 | const onHandleSelect = (itemSelected) => {
16 | if (!searchData.genres.includes(itemSelected)) {
17 | setSearchData({ ...searchData, genres: [...searchData.genres, itemSelected] });
18 | } else {
19 | setSearchData({ ...searchData, genres: searchData.genres.filter(item => item !== itemSelected) });
20 | }
21 |
22 | };
23 |
24 | const containerVariants = {
25 | hidden: { opacity: 0 },
26 | show: {
27 | opacity: 1,
28 | transition: { staggerChildren: 0.1 }
29 | }
30 | };
31 |
32 | const listItemVariants = {
33 | hidden: { opacity: 0 },
34 | show: {
35 | opacity: 1,
36 | transition: { duration: 0.1 }
37 | }
38 | };
39 |
40 | const listItemTransition = {
41 | duration: 0.1,
42 | ease: "easeInOut"
43 | };
44 |
45 |
46 | return (
47 |
48 |
Genres
49 |
50 | {genres.slice(0, viewAll ? genres.length : 5).map((genre, index) => (
51 | onHandleSelect(genre)}
55 | variants={listItemVariants}
56 | transition={listItemTransition}
57 | >{searchData.genres.includes(genre) ?
58 | ))}
59 |
60 | setViewAll(prev => !prev)}>View All
61 |
62 |
40 |
45 | {items.map((item, index) =>
48 | //
49 | )
50 | }
51 |
52 | export default SlidingBanner
--------------------------------------------------------------------------------
/content/AuthPage/login/left/left.module.css:
--------------------------------------------------------------------------------
1 | .left {
2 | width: 50%;
3 | background: #070709;
4 | margin-left: 100px;
5 | margin-top: 20px;
6 | }
7 |
8 | .back {
9 | display: flex;
10 | align-items: center;
11 | color: white;
12 | width: max-content;
13 | padding: 10px 15px;
14 | border-radius: 30px;
15 | border: 2px solid #2d3138;
16 | border-width: 1px 1px 1px 3px;
17 | color: #8991a3;
18 | gap: 5px;
19 | cursor: pointer;
20 | }
21 |
22 | .center {
23 | margin-top: 12vh;
24 | }
25 |
26 | .logo {
27 | all: unset;
28 | display: flex;
29 | align-items: center;
30 | cursor: pointer;
31 | gap: 0.2rem;
32 | user-select: none;
33 | }
34 |
35 | .logo span {
36 | color: #f7f7f7;
37 | font-family: "Protest Revolution", sans-serif;
38 | font-size: 22px;
39 | }
40 |
41 | .heading {
42 | font-family: "poppins", sans-serif;
43 | margin-top: 2vh;
44 | line-height: 33px;
45 | font-size: 30px;
46 | font-weight: 600;
47 | background: -webkit-linear-gradient(#eee, #444);
48 | -webkit-background-clip: text;
49 | background-clip: text;
50 | -webkit-text-fill-color: transparent;
51 | }
52 |
53 | .highlight {
54 | color: #8991a3;
55 | /* font-weight: 500; */
56 | overflow: hidden;
57 | display: -webkit-box;
58 | -webkit-line-clamp: 9;
59 | -webkit-box-orient: vertical;
60 | line-height: 26px;
61 | font-size: 15px;
62 | margin-top: 1vh;
63 | margin-bottom: 1vh;
64 | max-width: 30rem;
65 | }
66 |
67 | .highlight a {
68 | color: #e9a070;
69 | text-decoration: none;
70 | font-weight: 500;
71 | }
72 |
73 | @media screen and (max-width: 1280px) {
74 | .left {
75 | margin-left: 2rem;
76 | }
77 | }
78 |
79 | @media screen and (max-width: 1080px) {
80 | .right {
81 | display: none;
82 | }
83 | .left {
84 | width: 100%;
85 | margin-right: 2rem;
86 | }
87 | }
88 |
89 | @media screen and (max-width: 990px) {
90 | .highlight {
91 | max-width: 100%;
92 | }
93 | .input,
94 | .left form input[type="submit"] {
95 | max-width: 100% !important;
96 | }
97 | .heading {
98 | display: flex;
99 | gap: 14px;
100 | }
101 | }
102 |
103 | @media screen and (max-width: 790px) {
104 | .heading {
105 | display: block;
106 | }
107 | .highlight {
108 | max-width: 100%;
109 | }
110 | }
111 |
112 | @media screen and (max-width: 470px) {
113 | .heading {
114 | font-size: x-large;
115 | }
116 | }
117 |
118 | @media screen and (max-width: 370px) {
119 | .heading {
120 | font-size: 20px;
121 | }
122 | }
123 |
--------------------------------------------------------------------------------
/components/ui/banner/AnimeInfo/AnimeInfo.module.css:
--------------------------------------------------------------------------------
1 | .info {
2 | display: flex;
3 | flex-direction: column;
4 | z-index: 5;
5 | position: absolute;
6 | top: 50%;
7 | transform: translateY(-50%);
8 | left: 60px;
9 | }
10 |
11 | .title {
12 | font-family: "poppins", sans-serif;
13 | font-weight: 600;
14 | }
15 |
16 | .description {
17 | font-family: "poppins", sans-serif;
18 | font-size: 15px;
19 | max-width: 36rem;
20 | color: #cbcbcb;
21 | overflow: hidden;
22 | display: -webkit-box;
23 | -webkit-line-clamp: 3;
24 | -webkit-box-orient: vertical;
25 | }
26 |
27 | .animedetail {
28 | display: flex;
29 | align-items: center;
30 | gap: 2rem;
31 | margin-top: 10px;
32 | }
33 |
34 | .type {
35 | display: flex;
36 | position: relative;
37 | padding: 9px 15px;
38 | font-size: 16px;
39 | border-radius: 50px;
40 | transition: 0.5s;
41 | background: #0e0e15;
42 | border: 2px solid #2e3138;
43 | font-family: "poppins", sans-serif;
44 | color: #7b8292;
45 | gap: 6px;
46 | font-weight: 500;
47 | align-items: center;
48 | }
49 |
50 | .type a {
51 | text-decoration: none;
52 | color: #d1d1d1;
53 | cursor: pointer;
54 | }
55 |
56 | .genre {
57 | display: flex;
58 | position: relative;
59 | padding: 9px 15px;
60 | font-size: 16px;
61 | border-radius: 50px;
62 | transition: 0.5s;
63 | background: #0e0e15;
64 | border: 2px solid #2e3138;
65 | font-family: "poppins", sans-serif;
66 | color: #7b8292;
67 | gap: 6px;
68 | align-items: center;
69 | }
70 |
71 | .genre span {
72 | display: flex;
73 | align-items: center;
74 | gap: 8px;
75 | text-decoration: none;
76 | color: #d1d1d1;
77 | cursor: pointer;
78 | }
79 |
80 | .watch {
81 | display: flex;
82 | background: linear-gradient(174deg, #d5a687, #e79a69);
83 | outline: none;
84 | border: 2px solid #efac87;
85 | padding: 10px 15px;
86 | color: black;
87 | gap: 5px;
88 | font-family: "poppins", sans-serif;
89 | align-items: center;
90 | border-radius: 35px;
91 | font-weight: 600;
92 | cursor: pointer;
93 | width: 100%;
94 | max-width: max-content;
95 | text-decoration: none;
96 | margin-top: 15px;
97 | }
98 |
99 | .watch:hover {
100 | background: linear-gradient(0deg, #d5a687, #e79a69);
101 | }
102 |
103 | @media screen and (max-width: 850px) {
104 | .animedetail {
105 | left: 20px;
106 | }
107 | }
108 |
109 | @media screen and (max-width: 640px) {
110 | .info {
111 | left: 20px;
112 | }
113 | .animedetail {
114 | flex-direction: column;
115 | align-items: start;
116 | gap: 8px;
117 | }
118 | }
119 |
--------------------------------------------------------------------------------
/app/(home)/search/search.module.css:
--------------------------------------------------------------------------------
1 | .backgroundImage {
2 | position: relative;
3 | width: 100%;
4 | height: 660px;
5 | object-fit: cover;
6 | border-radius: 20px;
7 | }
8 | .backgroundImage::after {
9 | content: "";
10 | position: absolute;
11 | bottom: 0;
12 | left: 0;
13 | width: 100%;
14 | height: 100%;
15 | background: linear-gradient(
16 | 360deg,
17 | #070709,
18 | #0c0d10a1,
19 | #0c0d1000,
20 | transparent
21 | );
22 | }
23 |
24 | .backgroundImage img {
25 | object-fit: cover;
26 | filter: brightness(50%);
27 | }
28 |
29 | .container {
30 | position: relative;
31 | top: -8rem;
32 | display: flex;
33 | justify-content: center;
34 | margin-left: 1rem;
35 | }
36 |
37 | .sectionContainer {
38 | max-width: 90rem;
39 | display: flex;
40 | width: 100%;
41 | }
42 |
43 | .right {
44 | gap: 1rem;
45 | width: 100%;
46 | display: grid;
47 | margin-left: 1rem;
48 | margin-right: 1rem;
49 | grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
50 | }
51 |
52 | .pagination {
53 | display: flex;
54 | justify-content: center;
55 | gap: 10px;
56 | font-family: "poppins", sans-serif;
57 | align-items: center;
58 | flex-wrap: wrap;
59 | margin-bottom: 3rem;
60 | }
61 | .pagination .PageLink {
62 | list-style: none;
63 | display: flex;
64 | align-items: center;
65 | }
66 | .pagination .break {
67 | list-style: none;
68 | display: flex;
69 | align-items: center;
70 | border: 2px solid #212328;
71 | border-radius: 21px;
72 | height: 48px;
73 | width: 60px;
74 | display: grid;
75 | place-content: center;
76 | font-size: 22px;
77 | }
78 | .pagination .aLink {
79 | cursor: pointer;
80 | width: 60px;
81 | border-radius: 21px;
82 | border: 2px solid #212328;
83 | color: white;
84 | height: 48px;
85 | display: grid;
86 | place-content: center;
87 | }
88 | .pagination .aLink {
89 | cursor: pointer;
90 | width: 60px;
91 | border-radius: 21px;
92 | border: 2px solid #212328;
93 | color: white;
94 | height: 48px;
95 | display: grid;
96 | place-content: center;
97 | }
98 | .pagination .activePage a {
99 | background: linear-gradient(174deg, #d5a687, #e79a69);
100 | outline: none;
101 | border: 2px solid #efac87;
102 | color: black;
103 | }
104 | .pagination li {
105 | list-style: none;
106 | }
107 |
108 | .pagination .pageChanger {
109 | display: none;
110 | }
111 |
112 | @media screen and (max-width: 1000px) {
113 | .sectionContainer {
114 | flex-direction: column;
115 | }
116 | .right {
117 | margin-right: 1rem;
118 | width: -webkit-fill-available !important;
119 | width: -moz-fill-available !important;
120 | }
121 | }
122 |
--------------------------------------------------------------------------------
/app/(auth)/login/login.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | width: 100%;
4 | }
5 |
6 | .right {
7 | width: 50%;
8 | height: 100vh;
9 | overflow: hidden;
10 | position: relative;
11 | }
12 |
13 | .right .background {
14 | width: 100%;
15 | height: 100vh;
16 | position: relative;
17 | }
18 |
19 | .right .background::after {
20 | content: "";
21 | position: absolute;
22 | bottom: 0;
23 | left: 0;
24 | width: 100%;
25 | height: 100%;
26 | background: linear-gradient(
27 | 360deg,
28 | #070709,
29 | #0c0d10a1,
30 | #0c0d1000,
31 | transparent
32 | );
33 | }
34 |
35 | .right .background img {
36 | object-fit: cover;
37 | object-position: 70%;
38 | filter: blur(10px);
39 | }
40 |
41 | .info {
42 | position: absolute;
43 | z-index: 7;
44 | top: 50%;
45 | left: 50%;
46 | transform: translate(-50%, -50%);
47 | display: flex;
48 | flex-direction: column;
49 | align-items: center;
50 | }
51 |
52 | .info .image img {
53 | background: #ffffff12;
54 | padding: 2px;
55 | border-radius: 20rem;
56 | object-fit: cover;
57 | }
58 |
59 | .info .image {
60 | position: relative;
61 | }
62 | .info .image::after {
63 | content: "";
64 | position: absolute;
65 | bottom: 0;
66 | left: 0;
67 | width: 100%;
68 | height: 100%;
69 | background: linear-gradient(0deg, #000000, #00000014, #0c0d1000);
70 | border-radius: 100rem;
71 | }
72 |
73 | .animeinfo {
74 | position: absolute;
75 | top: 75%;
76 | text-align: center;
77 | }
78 | .animeinfo .title {
79 | font-family: "poppins", sans-serif;
80 | font-size: 24px;
81 | font-weight: 600;
82 | }
83 | .animeinfo .description {
84 | font-family: "poppins", sans-serif;
85 | font-size: 15px;
86 | font-weight: 600;
87 | overflow: hidden;
88 | display: -webkit-box;
89 | -webkit-line-clamp: 4;
90 | -webkit-box-orient: vertical;
91 | text-align: center;
92 | background: -webkit-linear-gradient(#eee, #444);
93 | -webkit-background-clip: text;
94 | background-clip: text;
95 | -webkit-text-fill-color: #ffffff0f;
96 | }
97 |
98 | @media screen and (max-width: 1280px) {
99 | .left {
100 | margin-left: 2rem;
101 | }
102 | }
103 |
104 | @media screen and (max-width: 1080px) {
105 | .right {
106 | display: none;
107 | }
108 | .left {
109 | width: 100%;
110 | margin-right: 2rem;
111 | }
112 | }
113 |
114 | @media screen and (max-width: 990px) {
115 | .highlight {
116 | max-width: 100%;
117 | text-align: center;
118 | }
119 | .input,
120 | .left form input[type="submit"] {
121 | max-width: 100% !important;
122 | }
123 | .heading {
124 | display: flex;
125 | gap: 14px;
126 | }
127 | }
128 |
129 | @media screen and (max-width: 790px) {
130 | .heading {
131 | display: block;
132 | }
133 | .highlight {
134 | max-width: 100%;
135 | text-align: start;
136 | }
137 | }
138 |
139 | @media screen and (max-width: 470px) {
140 | .heading {
141 | font-size: x-large;
142 | }
143 | }
144 |
--------------------------------------------------------------------------------
/app/(home)/watch/[id]/page.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-hooks/exhaustive-deps */
2 | "use client";
3 |
4 | import { useEffect, useState } from "react";
5 | import { useSearchParams } from "next/navigation";
6 | import Loading from "@/components/layout/loading/Loading";
7 | import AnimeInfo from "@/content/HomePage/Watch/left/animeInfo/AnimeInfo";
8 | import VideoPlayer from "@/content/HomePage/Watch/left/videoPlayer/VideoPlayer";
9 | import VideoOption from "@/content/HomePage/Watch/left/videoOption/VideoOption";
10 | import VideoSelector from "@/content/HomePage/Watch/left/videoSelector/VideoSelector";
11 | import EpisodeSelector from "@/components/ui/episodeSelector/EpisodeSelector";
12 | import MostPopular from "@/content/HomePage/Watch/right/mostPopular/MostPopular";
13 | import AtoZalphabet from "@/components/ui/AtoZalphabet/AtoZalphabet";
14 | import { fetchData } from "@/lib/FetchData";
15 | import styles from "./watch.module.css";
16 | import Recommendation from "@/content/HomePage/Watch/right/recommendation/Recommendation";
17 | import AnimeSeasons from "@/content/HomePage/Watch/left/animeSeasons/AnimeSeasons";
18 |
19 | const Watch = ({ params }) => {
20 | const { id } = params;
21 | const searchParams = useSearchParams();
22 |
23 | const [animeInfo, setAnimeInfo] = useState(null);
24 | const [isLoaded, setIsLoaded] = useState(false);
25 | const [VideoOptionToggler, setVideoOptionToggler] = useState([]);
26 | const [videoSelected, setVideoSelected] = useState({ server: "default", url: null });
27 |
28 | const episode = searchParams.get('episode') || animeInfo?.episodes?.[0]?.number || 1;
29 |
30 |
31 |
32 |
33 | useEffect(() => {
34 | const fetchAnimeInfo = async () => {
35 | try {
36 | setIsLoaded(false);
37 | const data = await fetchData(`/meta/anilist/data/${id}`, 86400);
38 | setAnimeInfo(data.data);
39 | document.title = `Watch ${data.data.title.english} - Animeverse`;
40 | } catch (error) {
41 | console.error("Error fetching anime info:", error);
42 | }
43 | finally {
44 | setIsLoaded(true);
45 | }
46 | };
47 |
48 | fetchAnimeInfo();
49 | }, [id]);
50 |
51 |
52 | return !isLoaded ?
56 |
57 |
58 |
59 |
60 |
61 | {/*
*/}
62 |
63 |
64 |
67 |
59 |
62 |
63 |
64 |
65 |
68 |
69 |
70 | setLanguage("dub")} className={language === "dub" ? styles.active : ""}>Dub
71 | setLanguage("sub")} className={language !== "dub" ? styles.active : ""}>Sub
72 |
73 |
:
76 |
77 |
78 | {filteredEpisodes?.map((item, index) =>
79 |
router.push('/watch/' + episode + '?' + createQueryString('episodeID', item.id) + '&' + createQueryString('episode', item.number), { scroll: false })}
81 | className={`${styles.episode} ${activeEpisdoe === item.number.toString() && styles.watched}`}
82 | key={index}>
83 | Episode {item?.number}
84 | {item.airDate || "Unknown"}
85 |
)}
86 |
87 | {episodes?.length === 0 || episodes?.message !== undefined ?
88 |
89 |
90 | {episodes?.message ||
91 | `No ${language}bed episodes found`
92 | }
93 |
94 |
95 | : null}
96 |
";
3 | initial-value: 0deg;
4 | inherits: false;
5 | }
6 |
7 | .container {
8 | position: relative;
9 | cursor: pointer;
10 | }
11 |
12 | .backgroundImage {
13 | height: 100%;
14 | overflow: hidden;
15 | border-radius: 14px;
16 | }
17 |
18 | .backgroundImage::before {
19 | content: "";
20 | width: 100%;
21 | height: 50%;
22 | background: linear-gradient(
23 | 360deg,
24 | #0c0d10,
25 | #0c0d10a1,
26 | #0c0d1000,
27 | transparent
28 | );
29 | z-index: 1;
30 | bottom: 0;
31 | left: 0;
32 | position: absolute;
33 | border-radius: 14px;
34 | }
35 |
36 | .backgroundImage img {
37 | object-fit: cover;
38 | width: 100%;
39 | height: 100%;
40 | }
41 |
42 | .info {
43 | position: absolute;
44 | top: 0;
45 | left: 0;
46 | width: 100%;
47 | height: 100%;
48 | display: flex;
49 | flex-direction: column;
50 | justify-content: space-between;
51 | padding: 16px;
52 | }
53 |
54 | .top {
55 | display: flex;
56 | justify-content: space-between;
57 | position: relative;
58 | z-index: 2;
59 | }
60 |
61 | .left {
62 | display: flex;
63 | gap: 10px;
64 | z-index: 6;
65 | }
66 |
67 | .ranking {
68 | display: flex;
69 | background: linear-gradient(174deg, #d5a687, #e79a69);
70 | outline: none;
71 | border: 2px solid #efac87;
72 | padding: 5px 8px;
73 | color: black;
74 | gap: 5px;
75 | font-size: 14px;
76 | font-family: "poppins", sans-serif;
77 | align-items: center;
78 | border-radius: 35px;
79 | font-weight: 600;
80 | cursor: pointer;
81 | max-width: max-content;
82 | }
83 |
84 | .new {
85 | display: flex;
86 | background: #ffffff75;
87 | backdrop-filter: blur(8px);
88 | border: 2px solid #28282800;
89 | outline: none;
90 | padding: 5px 10px;
91 | color: black;
92 | gap: 5px;
93 | font-size: 14px;
94 | font-family: "poppins", sans-serif;
95 | align-items: center;
96 | border-radius: 35px;
97 | font-weight: 600;
98 | cursor: pointer;
99 | max-width: max-content;
100 | }
101 |
102 | .bookmark {
103 | display: flex;
104 | padding: 10px;
105 | font-size: 12px;
106 | border-radius: 50px;
107 | transition: 0.5s;
108 | background: #1b1b1c;
109 | border: 2px solid #2e3138;
110 | color: #ffffff;
111 | gap: 6px;
112 | font-weight: 500;
113 | cursor: pointer;
114 | }
115 |
116 | .animeDetail {
117 | display: flex;
118 | flex-direction: column;
119 | align-items: center;
120 | position: relative;
121 | z-index: 2;
122 | }
123 |
124 | .name {
125 | font-family: "poppins", sans-serif;
126 | font-size: 18px;
127 | cursor: pointer;
128 | text-overflow: ellipsis;
129 | white-space: nowrap;
130 | overflow: hidden;
131 | width: 100%;
132 | text-align: center;
133 | }
134 |
135 | .re {
136 | display: flex;
137 | gap: 14px;
138 | color: #929396;
139 | font-size: 14px;
140 | font-family: "poppins", sans-serif;
141 | }
142 |
143 | .rating,
144 | .episodes {
145 | display: flex;
146 | gap: 4px;
147 | align-items: center;
148 | font-size: 14px;
149 | }
150 |
151 | .container:hover .overlay svg {
152 | scale: 1;
153 | transition: 0.5s;
154 | }
155 | .container:hover .overlay {
156 | transition: 0.5s;
157 | opacity: 1;
158 | }
159 |
160 | .overlay {
161 | position: absolute;
162 | top: 0;
163 | opacity: 0;
164 | z-index: 1;
165 | bottom: 0;
166 | left: 0;
167 | right: 0;
168 | background: rgba(0, 0, 0, 0.261);
169 | display: grid;
170 | place-content: center;
171 | font-size: 50px;
172 | }
173 |
174 | .overlay svg {
175 | fill: #e29b72;
176 | scale: 0;
177 | }
178 |
179 | .border {
180 | position: absolute;
181 | top: 0;
182 | left: 0;
183 | background: linear-gradient(var(--gradient-angle), #d5a6874d, #e79a69);
184 | width: 101.5%;
185 | height: 101.5%;
186 | z-index: -1;
187 | transform: translate(-50%, -50%);
188 | top: 50%;
189 | left: 50%;
190 | border-radius: 16px;
191 | animation: rotation 10s linear infinite;
192 | }
193 |
194 | .normalborder {
195 | position: absolute;
196 | top: 0;
197 | left: 0;
198 | background: linear-gradient(322deg, #465c6d00, #2e3138);
199 | width: 101.5%;
200 | height: 101.5%;
201 | z-index: -1;
202 | transform: translate(-50%, -50%);
203 | top: 50%;
204 | left: 50%;
205 | border-radius: 16px;
206 | }
207 |
208 | @keyframes rotation {
209 | 0% {
210 | --gradient-angle: 0deg;
211 | }
212 | 100% {
213 | --gradient-angle: 360deg;
214 | }
215 | }
216 |
--------------------------------------------------------------------------------
/app/(home)/search/page.js:
--------------------------------------------------------------------------------
1 | "use client"
2 | import Image from 'next/image';
3 | import styles from './search.module.css';
4 | import UserSelection from '@/content/HomePage/Search/userSelection/UserSelection';
5 | import Catalog from '@/content/HomePage/Search/userSelection/catalog/Catalog';
6 | import Card from '@/components/ui/card/Card';
7 | import { useSearchParams } from 'next/navigation';
8 | import { useEffect, useState } from 'react';
9 | import { FaAngleLeft, FaAngleRight } from "react-icons/fa6";
10 | import ReactPaginate from 'react-paginate';
11 |
12 | const Search = () => {
13 | const [datas, setDatas] = useState([]);
14 | const [isLoaded, setIsLoaded] = useState(false);
15 | const [error, setError] = useState(null);
16 | const [pageCount, setPageCount] = useState(1);
17 |
18 | const param = useSearchParams();
19 | const [searchData, setSearchData] = useState({
20 | q: param.get("q") || "",
21 | genres: param.get("genres") || "",
22 | status: param.get("status") || "",
23 | season: param.get("season") || "",
24 | type: param.get("type") || "",
25 | year: param.get("year") || "",
26 | });
27 |
28 |
29 | useEffect(() => {
30 | setSearchData({
31 | q: param.get("q") || "",
32 | genres: param.get("genres") || "",
33 | status: param.get("status") || "",
34 | season: param.get("season") || "",
35 | type: param.get("type") || "",
36 | year: param.get("year") || "",
37 | });
38 | }, [param]);
39 |
40 | useEffect(() => {
41 | setSearchData(searchData);
42 |
43 | const fetchData = async () => {
44 | setIsLoaded(false);
45 | setError(null);
46 | try {
47 | const params = {
48 | "query": decodeURIComponent(searchData.q),
49 | "season": searchData.season,
50 | "format": searchData.type,
51 | "genres": searchData.genres,
52 | "status": searchData.status,
53 | "year": searchData.year
54 | };
55 |
56 | const searchDataString = Object.keys(params)
57 | .map(k => params[k] !== "" ? encodeURIComponent(k) + '=' + encodeURIComponent(params[k]) : null)
58 | .filter(Boolean) // Filter out null values
59 | .join('&');
60 |
61 | const response = await fetch(`${process.env.API_URL}/meta/anilist/advanced-search?${searchDataString}&page=${pageCount}`);
62 |
63 | if (!response.ok) {
64 | throw new Error('Failed to fetch data');
65 | }
66 | const data = await response.json();
67 | setDatas(data || []);
68 | setIsLoaded(true);
69 | } catch (error) {
70 | console.error('Error fetching data:', error);
71 | setError('Failed to fetch data. Please try again.');
72 | setIsLoaded(true);
73 | }
74 | };
75 |
76 | fetchData();
77 |
78 | }, [searchData, pageCount]);
79 |
80 | const handlePageChange = (selectedPage) => {
81 | setPageCount(selectedPage + 1);
82 | }
83 |
84 | return (
85 | <>
86 |
87 |
95 |
96 |
97 |
98 |
99 |
100 | {isLoaded ? (
101 | error ? (
102 |
{error}
103 | ) : (
104 | datas?.results?.map((data, index) => (
105 |
106 | ))
107 | )
108 | ) :
109 | Array.from({ length: 10 }).map((_, index) => (
110 |
111 | ))
112 | }
113 |
114 |
115 |