2 |
3 | 
4 |
8 | 9 |
10 | 11 | 12 |
13 |
14 |
15 | 
16 |
17 |
18 | 
19 |
20 |
21 |
22 |
23 |
24 | ## Images
25 |
4 | Munchyroll
5 | 6 | An ad-free anime streaming web app aimed at minimality and responsive design. 7 |8 | 9 |
10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
26 | 
27 | 
28 |
31 |
56 |
57 | ## Features
58 | - **No Ads** - No ads, no popups, no redirects, no bullshit
59 | - **PWA Support** - Munchyroll has PWA (Progressive Web App) support, which means that you can add it to your home screren as an app
60 | - **Time Responsive Background** - The background color changes based on what your local time is. It starts off at a rich yellow in the morning, blue in the afternoon, to a faded red in the evening, and space black in the night
61 | - **Mobile Responsiveness** - The website will scale down to look good on mobile just as it does on desktop
62 |
63 | ## Bug Reports
64 | If you encounter any strange bugs on the website, please let me know by going to [issues](https://github.com/Jeydin21/Munchyroll/issues/) and create a bug report
65 |
66 | ## Local Development
67 | > [!CAUTION]
68 | > If you want to self host this app, please note that it's only allowed for personal use
69 | > **Commercial use is not recommended**
70 |
71 | #### 1. Environment Variable file setup
72 | 1. Copy all the contents of `.env.example` into a new file called `.env`
73 |
74 |
75 | #### 2. Backend Repository (Consumet API)
76 | > [!TIP]
77 | > If you already have a backend URL from somewhere, you can skip this step and go to step 3
78 |
79 | 1. Clone the backend repository and install the dependencies:
80 | ```bash
81 | $ git clone https://github.com/consumet/api.consumet.org.git
82 | $ cd api.consumet.org
83 | $ npm install # Or yarn install
84 | ```
85 |
86 | 2. Start the backend server
87 | ```bash
88 | $ npm start
89 | ```
90 |
91 | 3. Put your backend URL into the `NEXT_PUBLIC_CONSUMET_URL` variable in the `.env` file
92 |
93 | #### 3. Frontend Repository (Munchyroll)
94 | 1. Clone this repository and install the dependencies:
95 | ```bash
96 | $ git clone https://github.com/Jeydin21/Munchyroll.git
97 | $ cd Munchyroll
98 | $ npm install # Or yarn install
99 | ```
100 |
101 | 2. Start the development server
102 | ```bash
103 | $ npm run dev
104 | ```
105 | 4. Open the project in your browser:
106 | ```
107 | http://localhost:3000
108 | ```
109 |
110 | #### Extra Steps (OPTIONAL)
111 | - If you want, you can host a CORS proxy. The recommended CORS proxy for this project is this one: [Rob--W/cors-anywhere](https://github.com/Rob--W/cors-anywhere). You can host this on vercel and save the link into the `NEXT_PUBLIC_CORS_REQUEST_LINK` variable in the `.env` file
112 | - You can turn on your own website tracking with Google Analytics, go to https://analytics.google.com/ and follow their setup instructions. Save the Tracking ID into the `NEXT_PUBLIC_GA_TRACKING_ID` variable in the `.env` file
113 | - You can turn on your own website tracking with Umami, go to https://umami.is/ and follow their setup instructions. Save the Website ID into the `NEXT_PUBLIC_UMAMI_WEBSITE_ID` variable in the `.env` file
114 | - You can turn on live customer communication with Tawk.to, go to https://tawk.to and follow their setup instructions. Save the Property ID and Widget ID into the `NEXT_PUBLIC_TAWKTO_PROPERTY_ID` and `NEXT_PUBLIC_TAWKTO_WIDGET_ID` variables, respectively
115 |
116 | ## Credits
117 | - [Consumet API](https://github.com/consumet/api.consumet.org) for all anime details and sources
118 | - [Anilist](https://anilist.co/) was used to provide extensive episode details and statistics
119 |
120 | ## License
121 | This project is licensed under the GNU General Public License v3.0 - see the [License](https://github.com/Jeydin21/Munchyroll/blob/master/LICENSE) file for more details
122 |
123 | ## Contact
124 | Thanks for checking my project out
125 |
126 | If you have any questions or feedback, go to my [website](https://j21.dev/) and pick your preferred method of contact. You can also join the community Discord server I made down below:
127 |
128 | [](https://discord.gg/JQsvHC4JUH)
129 |
--------------------------------------------------------------------------------
/components/GoogleAnalytics.jsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from "next/router";
2 | import Script from "next/script";
3 | import { useEffect } from "react";
4 |
5 | // @ts-ignore
6 | const addPageView = (url) => {
7 | if (!process.env.NEXT_PUBLIC_GA_TRACKING_ID) return;
8 | // @ts-ignore
9 | window.gtag("config", GA_TRACKING_ID, {
10 | page_path: url,
11 | });
12 | };
13 |
14 | const GoogleAnalytics = () => {
15 | if (!process.env.NEXT_PUBLIC_GA_TRACKING_ID) return;
16 | const router = useRouter();
17 |
18 | useEffect(() => {
19 | // @ts-ignore
20 | const handleRouteChange = (url) => {
21 | addPageView(url);
22 | };
23 | router.events.on("routeChangeComplete", handleRouteChange);
24 | return () => {
25 | router.events.off("routeChangeComplete", handleRouteChange);
26 | };
27 | }, [router.events]);
28 | return (
29 | <>
30 |
34 |
48 |
49 | );
50 | };
51 |
52 | export default GoogleAnalytics;
--------------------------------------------------------------------------------
/components/LandingPage.jsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | function LandingPage() {
4 | return (
5 | More Screenshots
32 | 33 |
34 |
35 | 
37 |
38 | 
40 |
41 | 
43 |
44 | 
46 |
47 | 
49 |
50 | 
52 |
53 |
54 |
55 | Anime Home Page (Dark Mode)
36 |
37 |
38 | Anime Info Page (Dark Mode)
39 |
40 |
41 | Anime Watch Page (Dark Mode)
42 |
43 |
44 | Manga Home Page (Light Mode)
45 |
46 |
47 | Manga Info Page (Light Mode)
48 |
49 |
50 | Manga Read Page (Light Mode)
51 |
52 |
53 |
8 |
60 | );
61 | }
62 |
63 | export default LandingPage;
--------------------------------------------------------------------------------
/components/anime/AnimeCard.jsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { FaCalendar, FaBook, FaStar, FaPlay } from 'react-icons/fa';
3 | import { LazyLoadImage } from 'react-lazy-load-image-component';
4 | import 'react-lazy-load-image-component/src/effects/blur.css';
5 | import Status from "../ui/Status";
6 |
7 | function AnimeCard({ data }) {
8 | const type = {
9 | TV: "TV",
10 | MOVIE: "Movie",
11 | OVA: "OVA",
12 | ONA: "ONA",
13 | SPECIAL: "Special",
14 | }
15 |
16 | return (
17 | <>
18 |
19 |
9 |
56 |
57 |
58 |
59 |
10 |
15 | Munchyroll
11 |
12 | Munchyroll is an entertainment platform for people looking to
watch millions of movies, series, and animes for free.
13 |
16 |
55 |
17 |
54 |
18 |
53 |
19 |
20 |
52 |
21 |
26 |
27 |
28 | 22 | Anime → 23 |
24 |Explore new anime series!
25 |
29 |
34 |
35 | {/*
36 | 30 | Manga → 31 |
32 |Read the latest chapters!
33 |
37 |
42 |
43 |
44 | 38 | Movies → 39 |
40 |In development...
41 |
45 |
50 | */}
51 | 46 | Shows → 47 |
48 |In development...
49 |
20 |
74 |
75 |
76 | );
77 | }
78 |
79 | export default AnimeCard;
--------------------------------------------------------------------------------
/components/anime/AnimeCarousel.jsx:
--------------------------------------------------------------------------------
1 | import { Carousel } from 'react-responsive-carousel';
2 | import "react-responsive-carousel/lib/styles/carousel.min.css";
3 | import { FaPlay, FaBook, FaStar, FaClock } from 'react-icons/fa';
4 | import Link from "next/link";
5 | import { sanitize } from "isomorphic-dompurify";
6 |
7 | function AnimeCarousel({ data }) {
8 | return (
9 |
21 |
35 |
36 |
22 |
34 |
23 |
30 |
31 |
33 |
37 |
73 |
38 |
43 | {/* 40 | {data.title.english || data.title.romaji} 41 |
42 |Episode {data.episodeNumber}
*/} 44 |
45 |
72 |
46 | {data.releaseDate && (
47 |
55 | {data.totalEpisodes && data.totalEpisodes != 1 && (
56 |
48 |
49 |
57 |
58 |
65 |
66 |
10 |
19 | {data
20 | .filter(anime => anime.cover !== anime.image)
21 | .slice(0, 15)
22 | .map((anime, index) => (
23 |
46 |
47 | );
48 | }
49 |
50 | export default AnimeCarousel;
--------------------------------------------------------------------------------
/components/anime/AnimeList.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | import Trending from "../../components/anime/layout/Trending";
4 | import Popular from "../../components/anime/layout/Popular";
5 | import Top from "../../components/anime/layout/Top";
6 | import New from "../../components/anime/layout/New";
7 |
8 | function AnimeList() {
9 | const [display, setDisplay] = useState('New');
10 |
11 | return (
12 | <>
13 |
24 | 
29 |
30 |
44 | ))}
45 | {anime.title.english || anime.title.romaji}
31 |
32 |
40 |
41 |
42 |
43 |
33 |
38 |
39 | {anime.type}
34 | {anime.totalEpisodes !== 1 &&14 |
15 |
30 |
16 |
19 |
22 |
25 |
28 |
29 | 31 | {display === 'New' &&
36 |
37 |
38 | 39 | ) 40 | } 41 | 42 | export default AnimeList; -------------------------------------------------------------------------------- /components/anime/info/AnimeDetails.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import TextButton from "../../buttons/TextButton"; 3 | import GenreButton from "../../buttons/GenreButton"; 4 | import EpisodesList from "../../anime/player/EpisodesList"; 5 | 6 | function AnimeDetails({ animeData, episodeData, episodePage = false }) { 7 | const [isReadMore, setIsReadMore] = useState(false); 8 | const { 9 | description, 10 | title, 11 | image, 12 | genres, 13 | status, 14 | releaseDate, 15 | totalEpisodes, 16 | season, 17 | rating, 18 | id 19 | } = animeData; 20 | return ( 21 | <> 22 |
23 |
61 |
62 | );
63 | }
64 |
65 | export default AnimeDetails;
--------------------------------------------------------------------------------
/components/anime/info/Recommendations.jsx:
--------------------------------------------------------------------------------
1 | import AnimeCard from '../AnimeCard'
2 |
3 | function Recommendations({ animeData }) {
4 | return (
5 | <>
6 |
24 | 
25 |
57 |
26 |
56 | {title.english || title.romaji}
27 | 31 | setIsReadMore(!isReadMore)} 33 | className="hover:underline dark:text-blue-300 text-blue-500 cursor-pointer" 34 | > 35 | {!isReadMore ? "Read More" : "Read Less"} 36 | 37 | 38 |
39 |
41 | Information
40 |
42 |
47 |
48 |
50 | Genres
49 |
51 | {genres?.map((genre, i) => (
52 |
55 |
58 |
60 | Recommendations
7 |
8 | {animeData && animeData.slice(0, 8).map((anime) => (
9 |
12 |
13 | )
14 | }
15 |
16 | export default Recommendations;
--------------------------------------------------------------------------------
/components/anime/layout/New.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { getAnimeNew } from "../../../src/handlers/anime";
3 | import AnimeCard from "../../anime/AnimeCard";
4 |
5 | const New = () => {
6 | const [newAnimeData, setNewAnimeData] = useState(null);
7 |
8 | useEffect(() => {
9 | const fetchNewAnimeData = async () => {
10 | const data = await getAnimeNew(24);
11 | setNewAnimeData(data);
12 | };
13 |
14 | fetchNewAnimeData();
15 | }, []);
16 |
17 | return (
18 | <>
19 | {newAnimeData && (
20 | <>
21 | New Anime
22 |
23 | {newAnimeData.results.map((anime) => (
24 |
27 |
28 | )}
29 |
30 | );
31 | };
32 |
33 | export default New;
--------------------------------------------------------------------------------
/components/anime/layout/Popular.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { getAnimePopular } from "../../../src/handlers/anime";
3 | import AnimeCard from "../../anime/AnimeCard";
4 |
5 | const Popular = () => {
6 | const [popularAnimeData, setPopularAnimeData] = useState(null);
7 |
8 | useEffect(() => {
9 | const fetchPopularAnimeData = async () => {
10 | const data = await getAnimePopular(24);
11 | setPopularAnimeData(data);
12 | };
13 |
14 | fetchPopularAnimeData();
15 | }, []);
16 |
17 | return (
18 | <>
19 | {popularAnimeData && (
20 | <>
21 | Popular Anime
22 |
23 | {popularAnimeData.results.map((anime) => (
24 |
27 |
28 | )}
29 |
30 | );
31 | };
32 |
33 | export default Popular;
--------------------------------------------------------------------------------
/components/anime/layout/Top.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { getTopAnime } from "../../../src/handlers/anime";
3 | import AnimeCard from "../../anime/AnimeCard";
4 |
5 | const Top = () => {
6 | const [topAnimeData, setTopAnimeData] = useState(null);
7 |
8 | useEffect(() => {
9 | const fetchTopAnimeData = async () => {
10 | const data = await getTopAnime(24);
11 | setTopAnimeData(data);
12 | };
13 |
14 | fetchTopAnimeData();
15 | }, []);
16 |
17 | return (
18 | <>
19 | {topAnimeData && (
20 | <>
21 | Top Anime
22 |
23 | {topAnimeData.results.map((anime) => (
24 |
27 |
28 | )}
29 |
30 | );
31 | };
32 |
33 | export default Top;
--------------------------------------------------------------------------------
/components/anime/layout/Trending.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { getAnimeTrending } from "../../../src/handlers/anime";
3 | import AnimeCard from "../../anime/AnimeCard";
4 |
5 | const Trending = () => {
6 | const [trendingAnimeData, setTrendingAnimeData] = useState(null);
7 |
8 | useEffect(() => {
9 | const fetchTrendingAnimeData = async () => {
10 | const data = await getAnimeTrending(24);
11 | setTrendingAnimeData(data);
12 | };
13 |
14 | fetchTrendingAnimeData();
15 | }, []);
16 |
17 | return (
18 | <>
19 | {trendingAnimeData && (
20 | <>
21 | Trending Anime
22 |
23 | {trendingAnimeData.results.map((anime) => (
24 |
27 |
28 | )}
29 |
30 | );
31 | };
32 |
33 | export default Trending;
--------------------------------------------------------------------------------
/components/anime/player/EpisodesList.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import Link from 'next/link';
3 | import { FaTableList, FaTableCells } from "react-icons/fa6";
4 | import TextButton from "../../buttons/TextButton";
5 | import { useCookies } from 'react-cookie';
6 |
7 | function EpisodesList({ episodeData, episodeName, id, isDubbed = false, episodePage }) {
8 | const [searchTerm, setSearchTerm] = useState('');
9 | const [cookies, setCookie] = useCookies(['listMode']);
10 |
11 | const [isList, setIsList] = useState(cookies.listMode || false);
12 |
13 | const toggleMode = () => {
14 | setIsList(prev => !prev);
15 | };
16 |
17 | useEffect(() => {
18 | // Store isList as a string since cookies are stored as strings
19 | setCookie('listMode', isList, { sameSite: 'lax' });
20 | }, [isList]);
21 |
22 | const filteredEpisodes = episodeData?.filter(episode =>
23 | episode.number.toString().includes(searchTerm) || episode.title.toLowerCase().includes(searchTerm.toLowerCase())
24 | );
25 |
26 | return (
27 |
28 |
77 | );
78 | }
79 |
80 | export default EpisodesList;
--------------------------------------------------------------------------------
/components/anime/player/VideoPlayer.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { getAnimeEpisodeLinks } from "../../../src/handlers/anime";
3 | import '@vidstack/react/player/styles/default/theme.css';
4 | import '@vidstack/react/player/styles/default/layouts/video.css';
5 | import { MediaPlayer, MediaProvider, Poster, Track } from '@vidstack/react';
6 | import { defaultLayoutIcons, DefaultVideoLayout, DefaultAudioLayout } from '@vidstack/react/player/layouts/default';
7 | import { set } from "nprogress";
8 |
9 | const corsLink = process.env.NEXT_PUBLIC_CORS_REQUEST_LINK
10 |
11 | const VideoPlayer = ({ episodeTitle, episodeName, episodeNumber }) => {
12 | const [episodeDataLink, setEpisodeDataLink] = useState(null);
13 | const [episodeSubtitleLink, setEpisodeSubtitleLink] = useState(null);
14 | const [vttContent, setVttContent] = useState(null);
15 | const [isZoro, setIsZoro] = useState(true);
16 |
17 | const formatTime = (seconds) => {
18 | const hours = Math.floor(seconds / 3600);
19 | const minutes = Math.floor((seconds % 3600) / 60);
20 | const secs = seconds % 60;
21 | return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(
22 | 2,
23 | "0"
24 | )}:${String(secs).padStart(2, "0")}.000`;
25 | };
26 |
27 | const generateVTT = (intros, outros) => {
28 | let vtt = "WEBVTT\n\n";
29 |
30 | intros.forEach((intro, key) => {
31 | vtt += `${formatTime(intro.start)} --> ${formatTime(intro.end)}\n`;
32 | vtt += `Intro\n\n`;
33 | });
34 |
35 | outros.forEach((outro, key) => {
36 | vtt += `${formatTime(outro.start)} --> ${formatTime(outro.end)}\n`;
37 | vtt += `Outro\n\n`;
38 | });
39 |
40 | return vtt;
41 | };
42 |
43 | useEffect(() => {
44 | const fetchEpisodeDataAndSubtitles = async () => {
45 | try {
46 | let episodeData;
47 | if (episodeName.includes("$")) {
48 | episodeData = await getAnimeEpisodeLinks(episodeName);
49 | setIsZoro(true);
50 | if (episodeData.intro && episodeData.outro) {
51 | const intros = [episodeData.intro]
52 | const outros = [episodeData.outro]
53 | setVttContent(generateVTT(intros, outros));
54 | }
55 | } else {
56 | episodeData = await getAnimeEpisodeLinks(episodeName, "gogoanime");
57 | setIsZoro(false);
58 | }
59 | if (episodeData) {
60 | if (episodeData.sources && episodeData.sources.length > 0) {
61 | let defaultSource;
62 | if (isZoro) {
63 | defaultSource = episodeData.sources[0];
64 | } else {
65 | defaultSource = episodeData.sources.find(source => source.quality === "default");
66 | }
67 | setEpisodeDataLink(corsLink ? `${corsLink}/${defaultSource.url}` : defaultSource.url);
68 | } else {
69 | console.error("Episode data is missing or the expected structure is not met.");
70 | setEpisodeDataLink(null);
71 | }
72 |
73 | if (episodeData.subtitles && episodeData.subtitles.length > 0) {
74 | const englishSubtitle = episodeData.subtitles
75 | if (englishSubtitle) {
76 | setEpisodeSubtitleLink(englishSubtitle);
77 | } else {
78 | console.error("English subtitles are missing.");
79 | setEpisodeSubtitleLink(null);
80 | }
81 | } else {
82 | console.error("Episode subtitles are missing or the expected structure is not met.");
83 | setEpisodeSubtitleLink(null);
84 | }
85 | } else {
86 | console.error("Failed to fetch episode data or subtitles.");
87 | setEpisodeDataLink(null);
88 | setEpisodeSubtitleLink(null);
89 | }
90 | } catch (error) {
91 | console.error("Failed to fetch episode data or subtitles:", error);
92 | setEpisodeDataLink(null);
93 | setEpisodeSubtitleLink(null);
94 | }
95 | };
96 |
97 | fetchEpisodeDataAndSubtitles();
98 | }, [episodeName]);
99 |
100 | // Conditional rendering or providing a default src
101 | if (!episodeDataLink) {
102 | return
29 | setSearchTerm(e.target.value)}
35 | />
36 |
39 |
40 |
41 | {isList ? (
42 |
76 |
43 | {filteredEpisodes.map((episode, i) => (
44 |
50 | 
51 |
58 | ) : (
59 |
52 | {`Episode ${episode.number}`}
53 | {episode.title && {episode.title}}
54 |
55 |
56 | ))}
57 |
60 | {filteredEpisodes
61 | ?.slice(0)
62 | .map((episode, i) => {
63 | return (
64 |
74 | )}
75 | Loading...
; // Tailwind CSS for centering
103 | }
104 |
105 | let episodeThing = "";
106 |
107 | if (episodeTitle) {
108 | episodeThing = `Episode ${episodeNumber}: ${episodeTitle}`;
109 | } else {
110 | episodeThing = `Episode ${episodeNumber}`;
111 | }
112 |
113 | return (
114 |
4 |
6 | );
7 | };
8 |
9 | export default GenreButton;
--------------------------------------------------------------------------------
/components/buttons/PrimaryButton.jsx:
--------------------------------------------------------------------------------
1 | function PrimaryButton({ children, sub, icon, onClick, link, isLandingPage }) {
2 | if (link) {
3 | return (
4 |
23 | )
24 | } else {
25 | return (
26 |
43 | );
44 | }
45 | }
46 |
47 | export default PrimaryButton;
--------------------------------------------------------------------------------
/components/buttons/TextButton.jsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | function TextButton({ text, link, isCurrent, onClick, title }) {
4 | if (link) {
5 | return (
6 |
7 | {text}
5 |
8 |
10 |
11 | );
12 | }
13 |
14 | return (
15 | {text}
9 |
16 |
18 | );
19 | };
20 |
21 | export default TextButton;
--------------------------------------------------------------------------------
/components/manga/MangaCard.jsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import { FaBook, FaStar, FaPlay } from 'react-icons/fa';
3 | import { LazyLoadImage } from 'react-lazy-load-image-component';
4 | import 'react-lazy-load-image-component/src/effects/blur.css';
5 | import Status from "../ui/Status";
6 |
7 | function MangaCard({ data }) {
8 | const type = {
9 | MANGA: "Manga",
10 | ONE_SHOT: "One Shot",
11 | NOVEL: "Novel",
12 | DOUJIN: "Doujin",
13 | MANHWA: "Manhwa",
14 | }
15 |
16 | return (
17 | <>
18 |
19 | {text}
17 |
20 |
63 |
64 |
65 | );
66 | }
67 |
68 | export default MangaCard;
69 |
--------------------------------------------------------------------------------
/components/manga/MangaCarousel.jsx:
--------------------------------------------------------------------------------
1 | import { Carousel } from 'react-responsive-carousel';
2 | import "react-responsive-carousel/lib/styles/carousel.min.css";
3 | import { FaPlay, FaBook, FaStar } from 'react-icons/fa';
4 | import Link from "next/link";
5 | import { sanitize } from "isomorphic-dompurify";
6 |
7 | function MangaCarousel({ data }) {
8 | const type = {
9 | MANGA: "Manga",
10 | ONE_SHOT: "One Shot",
11 | NOVEL: "Novel",
12 | DOUJIN: "Doujin",
13 | MANHWA: "Manhwa",
14 | }
15 |
16 | return (
17 |
21 |
35 |
36 |
22 |
34 |
23 |
30 |
31 |
33 |
37 |
62 |
38 |
43 |
44 | {/* 40 | {data.title.english || data.title.romaji} 41 |
42 |Episode {data.episodeNumber}
*/} 45 |
46 |
61 |
47 |
60 |
48 |
53 |
54 |
18 |
27 | {data
28 | .filter(manga => manga.cover && manga.image && manga.cover !== manga.image)
29 | .slice(0, 15)
30 | .map((manga, index) => (
31 |
62 |
63 | );
64 | }
65 |
66 | export default MangaCarousel;
--------------------------------------------------------------------------------
/components/manga/MangaList.jsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | import Trending from "../../components/manga/layout/Trending";
4 | import Popular from "../../components/manga/layout/Popular";
5 | import Top from "../../components/manga/layout/Top";
6 | import New from "../../components/manga/layout/New";
7 |
8 | function MangaList() {
9 | const [display, setDisplay] = useState('New');
10 |
11 | return (
12 | <>
13 |
32 | 
37 |
38 |
60 | ))}
61 | {manga.title.english || manga.title.romaji}
39 |
40 |
56 |
57 |
58 |
59 |
41 |
54 |
55 |
42 |
43 |
48 |
49 |
14 |
15 |
30 |
16 |
19 |
22 |
25 |
28 |
29 | 31 | {display === 'New' &&
36 |
37 |
38 | 39 | ) 40 | } 41 | 42 | export default MangaList; -------------------------------------------------------------------------------- /components/manga/info/MangaDetails.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import TextButton from "../../buttons/TextButton"; 3 | import GenreButton from "../../buttons/GenreButton"; 4 | 5 | function MangaDetails({ mangaData }) { 6 | const [isReadMore, setIsReadMore] = useState(false); 7 | const { 8 | description, 9 | title, 10 | image, 11 | genres, 12 | status, 13 | releaseDate, 14 | type, 15 | rating 16 | } = mangaData; 17 | 18 | const types = { 19 | MANGA: "Manga", 20 | ONE_SHOT: "One Shot", 21 | NOVEL: "Novel", 22 | DOUJIN: "Doujin", 23 | MANHWA: "Manhwa", 24 | } 25 | 26 | return ( 27 | <> 28 |
29 |
80 |
81 | );
82 | }
83 |
84 | export default MangaDetails;
--------------------------------------------------------------------------------
/components/manga/info/Recommendations.jsx:
--------------------------------------------------------------------------------
1 | import MangaCard from '../MangaCard'
2 |
3 | function Recommendations({ mangaData }) {
4 | return (
5 | <>
6 |
30 |
31 |
63 |
64 |
32 |
62 | {title.english || title.romaji}
33 | 37 | setIsReadMore(!isReadMore)} 39 | className="hover:underline dark:text-blue-300 text-blue-500 cursor-pointer" 40 | > 41 | {!isReadMore ? "Read More" : "Read Less"} 42 | 43 | 44 |
45 |
47 | Information
46 |
48 |
53 |
54 |
56 | Genres
55 |
57 | {genres?.map((genre, i) => (
58 |
61 |
65 |
79 | Chapters
66 |
67 | {mangaData.chapters
68 | ?.filter(chapter => chapter.pages && chapter.pages > 0) // Filter out chapters with 0 pages
69 | .map((chapter, i) => (
70 |
78 | Recommendations
7 |
8 | {mangaData && mangaData.slice(0, 8).map((manga) => (
9 |
12 |
13 | )
14 | }
15 |
16 | export default Recommendations;
--------------------------------------------------------------------------------
/components/manga/layout/New.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { getMangaNew } from "../../../src/handlers/manga";
3 | import MangaCard from "../../manga/MangaCard";
4 |
5 | const New = () => {
6 | const [newMangaData, setNewMangaData] = useState(null);
7 |
8 | useEffect(() => {
9 | const fetchNewMangaData = async () => {
10 | const data = await getMangaNew(24);
11 | setNewMangaData(data);
12 | };
13 |
14 | fetchNewMangaData();
15 | }, []);
16 |
17 | return (
18 | <>
19 | {newMangaData && (
20 | <>
21 | Releasing Manga
22 |
23 | {newMangaData.results.map((manga) => (
24 |
27 |
28 | )}
29 |
30 | );
31 | };
32 |
33 | export default New;
--------------------------------------------------------------------------------
/components/manga/layout/Popular.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { getMangaPopular } from "../../../src/handlers/manga";
3 | import MangaCard from "../../manga/MangaCard";
4 |
5 | const Popular = () => {
6 | const [popularMangaData, setPopularMangaData] = useState(null);
7 |
8 | useEffect(() => {
9 | const fetchPopularMangaData = async () => {
10 | const data = await getMangaPopular(24);
11 | setPopularMangaData(data);
12 | }
13 |
14 | fetchPopularMangaData();
15 | }, []);
16 |
17 | return (
18 | <>
19 | {popularMangaData && (
20 | <>
21 | Popular Manga
22 |
23 | {popularMangaData.results.map((manga) => (
24 |
27 |
28 | )}
29 |
30 | );
31 | };
32 |
33 | export default Popular;
--------------------------------------------------------------------------------
/components/manga/layout/Top.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { getMangaTop } from "../../../src/handlers/manga";
3 | import MangaCard from "../../manga/MangaCard";
4 |
5 | const Top = () => {
6 | const [topMangaData, setTopMangaData] = useState(null);
7 |
8 | useEffect(() => {
9 | const fetchTopMangaData = async () => {
10 | const data = await getMangaTop(24);
11 | setTopMangaData(data);
12 | }
13 |
14 | fetchTopMangaData();
15 | }, []);
16 |
17 | return (
18 | <>
19 | {topMangaData && (
20 | <>
21 | Top Manga
22 |
23 | {topMangaData.results.map((manga) => (
24 |
27 |
28 | )}
29 |
30 | );
31 | };
32 |
33 | export default Top;
--------------------------------------------------------------------------------
/components/manga/layout/Trending.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import { getMangaTrending } from "../../../src/handlers/manga";
3 | import MangaCard from "../../manga/MangaCard";
4 |
5 | const Trending = () => {
6 | const [trendingMangaData, setTrendingMangaData] = useState(null);
7 |
8 | useEffect(() => {
9 | const fetchTrendingMangaData = async () => {
10 | const data = await getMangaTrending(24);
11 | setTrendingMangaData(data);
12 | }
13 |
14 | fetchTrendingMangaData();
15 | }, []);
16 |
17 | return (
18 | <>
19 | {trendingMangaData && (
20 | <>
21 | Trending Manga
22 |
23 | {trendingMangaData.results.map((manga) => (
24 |
27 |
28 | )}
29 |
30 | );
31 | };
32 |
33 | export default Trending;
--------------------------------------------------------------------------------
/components/manga/reader/MangaReader.jsx:
--------------------------------------------------------------------------------
1 | import Image from "next/image";
2 |
3 | function MangaReader({ pages }) {
4 | const corsLink = process.env.NEXT_PUBLIC_CORS_REQUEST_LINK;
5 |
6 | return (
7 |
8 | {pages &&
9 | pages.map((item, index) => (
10 |
25 | );
26 | }
27 |
28 | export default MangaReader;
--------------------------------------------------------------------------------
/components/ui/Footer.jsx:
--------------------------------------------------------------------------------
1 | import Logo from "../ui/Logo";
2 | import Link from "next/link";
3 | import { FaGithub, FaDiscord, FaTwitter } from 'react-icons/fa';
4 |
5 | function Footer() {
6 | return (
7 | <>
8 |
24 |
42 |
43 | );
44 | }
45 |
46 | export default Footer;
--------------------------------------------------------------------------------
/components/ui/Header.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, useRef } from "react";
2 | import { FaSun, FaMoon, FaBook } from "react-icons/fa";
3 | import { LuJapaneseYen, LuClapperboard } from "react-icons/lu";
4 | import { PiTelevision } from "react-icons/pi";
5 | import { VscChromeClose } from "react-icons/vsc";
6 | import { CgSearch } from "react-icons/cg";
7 | import Logo from "../ui/Logo";
8 | import SearchInput from "../ui/SearchInput";
9 | import Link from "next/link";
10 |
11 | function Header({ theme, toggleTheme, bg = false, manga, type }) {
12 | const [isMenuOpen, setIsMenuOpen] = useState(false);
13 | const [isScrolled, setIsScrolled] = useState(false);
14 | const searchInputRef = useRef(null);
15 |
16 | useEffect(() => {
17 | const handleScroll = () => {
18 | const isScrolled = window.scrollY > 0;
19 | setIsScrolled(isScrolled);
20 | };
21 |
22 | document.addEventListener('scroll', handleScroll);
23 | return () => {
24 | document.removeEventListener('scroll', handleScroll);
25 | };
26 | }, []);
27 |
28 | const handleSearchIconClick = () => {
29 | setIsMenuOpen(true); // Open the search menu
30 | setTimeout(() => {
31 | // Ensure the menu is open before focusing
32 | searchInputRef.current.focusInput();
33 | }, 0);
34 | };
35 |
36 | return (
37 | <>
38 |
11 |
23 | ))}
24 |
41 |
78 |
79 |
42 |
66 |
44 |
45 |
49 |
50 |
51 |
55 |
56 | {/*
60 | */}
64 |
65 |
67 |
77 |
68 |
71 |
72 |
73 |
74 |
76 | setIsMenuOpen(false)}
81 | className={`transition-all fixed ${isMenuOpen ? "z-30 top-0 left-0 right-0 bottom-0 bg-black bg-opacity-80" : ""} w-screen h-screen`}
82 | />
83 |
84 |
7 |
15 | );
16 | }
17 |
18 | export default NotFound;
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import "../styles/globals.css";
2 | import "../styles/nprogress.css";
3 | import { QueryClient, QueryClientProvider } from "react-query";
4 | import React from "react";
5 | import ReactGA from "react-ga";
6 | import { events } from "next/router";
7 | import nprogress from "nprogress";
8 | import GoogleAnalytics from "../components/GoogleAnalytics";
9 |
10 | if (process.env.NEXT_PUBLIC_GA_TRACKING_ID) {
11 | ReactGA.initialize(process.env.NEXT_PUBLIC_GA_TRACKING_ID);
12 | }
13 |
14 | events.on("routeChangeStart", nprogress.start);
15 | events.on("routeChangeError", nprogress.done);
16 | events.on("routeChangeComplete", nprogress.done);
17 |
18 | function MyApp({ Component, pageProps }) {
19 | const queryClient = new QueryClient();
20 |
21 | return (
22 | <>
23 |
24 | {process.env.NEXT_PUBLIC_GA_TACKING_ID && (
25 |
29 |
30 | );
31 | }
32 |
33 | export default MyApp;
34 |
--------------------------------------------------------------------------------
/pages/anime/index.js:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import Head from "next/head";
3 | import ReactGA from "react-ga";
4 |
5 | import MainLayout from "../../components/ui/MainLayout";
6 | import AnimeCarousel from "../../components/anime/AnimeCarousel";
7 | import AnimeList from "../../components/anime/AnimeList";
8 | import { getAnimeTrending } from "../../src/handlers/anime";
9 |
10 | export async function getServerSideProps() {
11 | const trendingData = await getAnimeTrending(20);
12 |
13 | return {
14 | props: {
15 | trendingData,
16 | },
17 | };
18 | }
19 |
20 | const Home = ({ trendingData }) => {
21 |
22 | useEffect(() => {
23 | if (process.env.NEXT_PUBLIC_GA_TRACKING_ID) {
24 | ReactGA.pageview(window.location.pathname + window.location.search);
25 | }
26 | }, []);
27 |
28 | return (
29 | <>
30 |
31 | Home - Munchyroll
32 |
36 |
37 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
54 |
55 | );
56 | };
57 |
58 | export default Home;
--------------------------------------------------------------------------------
/pages/anime/info/[animeId].js:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 | import React from "react";
3 | import AnimeDetails from "../../../components/anime/info/AnimeDetails";
4 | import MainLayout from "../../../components/ui/MainLayout";
5 | import Recommendations from "../../../components/anime/info/Recommendations";
6 | import { getAnimeDetails, getAnimeEpisodeData } from "../../../src/handlers/anime";
7 |
8 | export const getServerSideProps = async (context) => {
9 | const { animeId } = context.query;
10 |
11 | const animeData = await getAnimeDetails(animeId);
12 | const episodeData = await getAnimeEpisodeData(animeId);
13 |
14 | return {
15 | props: {
16 | animeData,
17 | episodeData
18 | },
19 | };
20 | };
21 |
22 | function AnimeDetailsPage({ animeData, episodeData }) {
23 | return (
24 | <>
25 |
26 | {(animeData?.title.english || animeData?.title.romaji) + " - Munchyroll "}
27 |
28 |
29 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 | {animeData?.image == animeData?.cover ? (
43 | <>
44 |
45 | {animeData &&
49 |
50 | ) : (
51 |
52 | {animeData &&
56 | )}
57 |
58 | );
59 | }
60 |
61 | export default AnimeDetailsPage;
62 |
--------------------------------------------------------------------------------
/pages/anime/search/[searchId].jsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from "next/router";
2 | import React from "react";
3 | import Head from "next/head";
4 | import MainLayout from "../../../components/ui/MainLayout";
5 | import AnimeCard from "../../../components/anime/AnimeCard";
6 | import { getAnimeSearch } from '../../../src/handlers/anime';
7 |
8 | export const getServerSideProps = async (context) => {
9 | const { searchId } = context.query;
10 |
11 | const animeSearchData = await getAnimeSearch(searchId, 24);
12 |
13 | return {
14 | props: {
15 | animeSearchData,
16 | },
17 | };
18 | };
19 |
20 | function SearchPage({ animeSearchData }) {
21 | const router = useRouter();
22 | const { searchId } = router.query;
23 |
24 | return (
25 | <>
26 |
27 | {"Anime Search Results For: " + searchId + " - Munchyroll"}
28 |
32 |
36 |
40 |
41 | {/* Maybe change this to scan image and return main color */}
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | {animeSearchData && (
51 | <>
52 |
60 |
71 |
72 | );
73 | }
74 |
75 | export default SearchPage;
76 |
--------------------------------------------------------------------------------
/pages/anime/watch/[episodeId]/[episodeNum].js:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import dynamic from 'next/dynamic';
3 | import Head from "next/head";
4 | import { useRouter } from 'next/router';
5 | import MainLayout from "../../../../components/ui/MainLayout";
6 | import Link from "next/link";
7 | import { getAnimeDetails, getAnimeEpisodeData, getAnimeEpisodeLinks, getExternalLink } from "../../../../src/handlers/anime";
8 | import AnimeDetails from "../../../../components/anime/info/AnimeDetails";
9 | import EpisodesList from "../../../../components/anime/player/EpisodesList";
10 | import PrimaryButton from "../../../../components/buttons/PrimaryButton";
11 | import { HiOutlineDownload } from "react-icons/hi";
12 |
13 | const VideoPlayer = dynamic(() => import('./../../../../components/anime/player/VideoPlayer'), { ssr: false, loading: () => loading... ;
58 | // }
59 |
60 | // const { episode, isLoading, isError, error } = useQuery("details", () =>
61 | // getStreamLink(episodeId)
62 | // );
63 |
64 | // const handleVLCPlayer = () => {
65 | // window.open(
66 | // `intent:${episode?.sources[0].file}#Intent;scheme=vlc;package=org.videolan.vlc;end`,
67 | // "_blank",
68 | // );
69 | // };
70 | // const handleMxPlayer = () => {
71 | // //
72 | // window.open(
73 | // `intent:${episode?.sources[0].file}#Intent;scheme=mxplayer;package=com.mxtech.videoplayer.ad;end`,
74 | // "_blank",
75 | // );
76 | // };
77 |
78 | return (
79 | <>
80 |
81 | {"Watch " + (anime?.title.english || anime?.title.romaji) + " Episode " + episodeNumber + " - Munchyroll "}
82 |
83 |
84 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 | Home - Munchyroll
32 |
36 |
37 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
54 |
55 | );
56 | };
57 |
58 | export default Home;
--------------------------------------------------------------------------------
/pages/manga/info/[mangaId].jsx:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 | import React from "react";
3 | import MangaDetails from "../../../components/manga/info/MangaDetails";
4 | import MainLayout from "../../../components/ui/MainLayout";
5 | import Recommendations from "../../../components/manga/info/Recommendations";
6 | import { getMangaDetails } from "../../../src/handlers/manga";
7 |
8 | export const getServerSideProps = async (context) => {
9 | const { mangaId } = context.query;
10 |
11 | const mangaData = await getMangaDetails(mangaId);
12 |
13 | const title = mangaData?.title?.english || mangaData?.title?.romaji;
14 | if (!title) {
15 | return {
16 | notFound: true,
17 | };
18 | }
19 |
20 | return {
21 | props: {
22 | mangaData,
23 | },
24 | };
25 | };
26 |
27 | function MangaDetailsPage({ mangaData }) {
28 | const title = mangaData?.title?.english || mangaData?.title?.romaji;
29 |
30 | return (
31 | <>
32 |
33 | {title + " - Munchyroll"}
34 |
35 |
36 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | {mangaData &&
55 |
56 | );
57 | }
58 |
59 | export default MangaDetailsPage;
60 |
--------------------------------------------------------------------------------
/pages/manga/read/[mangaId]/[chapterId]/[chapterNum].jsx:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 | import MainLayout from "../../../../../components/ui/MainLayout";
3 | import MangaReader from "../../../../../components/manga/reader/MangaReader";
4 | import Link from "next/link";
5 | import { getMangaDetails, getMangaPages } from "../../../../../src/handlers/manga";
6 |
7 | export const getServerSideProps = async (context) => {
8 | const { mangaId, chapterId, chapterNum } = await context.query;
9 |
10 | const manga = await getMangaDetails(mangaId);
11 |
12 | const chapter = await getMangaPages(chapterId);
13 |
14 | const chapterNumber = parseInt(chapterNum);
15 |
16 | return {
17 | props: {
18 | chapter,
19 | manga,
20 | chapterNumber,
21 | chapterId
22 | },
23 | };
24 | };
25 |
26 | function ReadingPage({ manga, chapter, chapterNumber, chapterId }) {
27 | const currentChapterIndex = manga.chapters.findIndex(chapter => chapter.id === chapterId);
28 | const prevChapterId = currentChapterIndex > 0 ? manga.chapters[currentChapterIndex - 1].id : null;
29 | const nextChapterId = currentChapterIndex < manga.chapters.length - 1 ? manga.chapters[currentChapterIndex + 1].id : null;
30 |
31 |
32 | return (
33 | <>
34 |
35 | {"Read " + (manga?.title.english || manga?.title.romaji) + " Chapter " + chapterNumber + " - Munchyroll "}
36 |
37 |
38 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | {"Manga Search Results For: " + searchId + " - Munchyroll"}
28 |
32 |
36 |
40 |
41 | {/* Maybe change this to scan image and return main color */}
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 | {mangaSearchData && (
51 | <>
52 |
60 |
70 |
71 | );
72 | }
73 |
74 | export default SearchPage;
75 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
--------------------------------------------------------------------------------
/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/android-chrome-192x192.png
--------------------------------------------------------------------------------
/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/android-chrome-512x512.png
--------------------------------------------------------------------------------
/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/apple-touch-icon.png
--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/favicon-16x16.png
--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/favicon-32x32.png
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/favicon.ico
--------------------------------------------------------------------------------
/public/icon-128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/icon-128x128.png
--------------------------------------------------------------------------------
/public/icon-144x144.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/icon-144x144.png
--------------------------------------------------------------------------------
/public/icon-152x152.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/icon-152x152.png
--------------------------------------------------------------------------------
/public/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/icon-192x192.png
--------------------------------------------------------------------------------
/public/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/icon-512x512.png
--------------------------------------------------------------------------------
/public/icon-72x72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/icon-72x72.png
--------------------------------------------------------------------------------
/public/icon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/icon-96x96.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Munchyroll",
3 | "short_name": "Munchyroll",
4 | "description": "An ad-free anime streaming website aimed at minimalism and responsive design. Share this with friends!",
5 | "start_url": "/",
6 | "display": "standalone",
7 | "background_color": "#121212",
8 | "icons": [
9 | {
10 | "src": "icon-72x72.png",
11 | "sizes": "72x72",
12 | "type": "image/png",
13 | "purpose": "maskable any"
14 | },
15 | {
16 | "src": "icon-96x96.png",
17 | "sizes": "96x96",
18 | "type": "image/png",
19 | "purpose": "maskable any"
20 | },
21 | {
22 | "src": "icon-128x128.png",
23 | "sizes": "128x128",
24 | "type": "image/png",
25 | "purpose": "maskable any"
26 | },
27 | {
28 | "src": "icon-144x144.png",
29 | "sizes": "144x144",
30 | "type": "image/png",
31 | "purpose": "maskable any"
32 | },
33 | {
34 | "src": "icon-152x152.png",
35 | "sizes": "152x152",
36 | "type": "image/png",
37 | "purpose": "maskable any"
38 | },
39 | {
40 | "src": "icon-192x192.png",
41 | "sizes": "192x192",
42 | "type": "image/png",
43 | "purpose": "maskable any"
44 | },
45 | {
46 | "src": "icon-512x512.png",
47 | "sizes": "512x512",
48 | "type": "image/png",
49 | "purpose": "maskable any"
50 | },
51 | {
52 | "src": "android-chrome-192x192.png",
53 | "sizes": "192x192",
54 | "type": "image/png",
55 | "purpose": "maskable any"
56 | },
57 | {
58 | "src": "android-chrome-512x512.png",
59 | "sizes": "512x512",
60 | "type": "image/png",
61 | "purpose": "maskable any"
62 | }
63 | ],
64 | "theme_color": "#121212",
65 | "dir": "ltr",
66 | "lang": "en",
67 | "orientation": "any",
68 | "categories": [
69 | "entertainment",
70 | "music",
71 | "social",
72 | "sports"
73 | ]
74 | }
--------------------------------------------------------------------------------
/public/nilou.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/nilou.png
--------------------------------------------------------------------------------
/public/screenshots/animeHomeDark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/screenshots/animeHomeDark.png
--------------------------------------------------------------------------------
/public/screenshots/animeInfoDark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/screenshots/animeInfoDark.png
--------------------------------------------------------------------------------
/public/screenshots/animeWatchDark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/screenshots/animeWatchDark.png
--------------------------------------------------------------------------------
/public/screenshots/homeDark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/screenshots/homeDark.png
--------------------------------------------------------------------------------
/public/screenshots/homeLight.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/screenshots/homeLight.png
--------------------------------------------------------------------------------
/public/screenshots/mangaHomeLight.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/screenshots/mangaHomeLight.png
--------------------------------------------------------------------------------
/public/screenshots/mangaInfoLight.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/screenshots/mangaInfoLight.png
--------------------------------------------------------------------------------
/public/screenshots/mangaReadLight.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Jeydin21/Munchyroll/6b9f27a74089aae054063bfb85878df78abbc233/public/screenshots/mangaReadLight.png
--------------------------------------------------------------------------------
/src/handlers/anime.js:
--------------------------------------------------------------------------------
1 | const corsLink = process.env.NEXT_PUBLIC_CORS_REQUEST_LINK;
2 | const apiLink = process.env.NEXT_PUBLIC_CONSUMET_API;
3 |
4 | export const getAnimeDetails = async (id, provider = "zoro") => {
5 | const data = await fetch(apiLink + `/meta/anilist/data/${id}?provider=${provider}`)
6 | return await data.json();
7 | };
8 |
9 | export const getAnimeEpisodeData = async (id, provider = "zoro") => {
10 | const data = await fetch(apiLink + `/meta/anilist/episodes/${id}?provider=${provider}`)
11 | const episodeData = await data.json();
12 | if (Object.keys(episodeData).length === 0) {
13 | const data = await fetch(apiLink + `/meta/anilist/episodes/${id}`)
14 | return await data.json();
15 | }
16 | return episodeData;
17 | }
18 |
19 | export const getAnimeEpisodeLinks = async (animeId, provider = "zoro") => {
20 | const data = await fetch(apiLink + `/meta/anilist/watch/${animeId}?provider=${provider}`)
21 | return await data.json();
22 | }
23 |
24 | export const getAnimeSearch = async (query, count) => {
25 | const data = await fetch(apiLink + `/meta/anilist/${query}?page=1&perPage=${count}`)
26 | return await data.json();
27 | }
28 |
29 | export const getTopAnime = async (count) => {
30 | const data = await fetch(apiLink + `/meta/anilist/advanced-search?sort=["SCORE_DESC"]&perPage=${count}`)
31 | const episodeData = await data.json();
32 | return episodeData;
33 | }
34 | export const getAnimeTrending = async (count) => {
35 | const data = await fetch(apiLink + `/meta/anilist/trending?page=1&perPage=${count}`)
36 | return await data.json();
37 | }
38 |
39 | export const getAnimePopular = async (count) => {
40 | const data = await fetch(apiLink + `/meta/anilist/advanced-search?sort=["POPULARITY_DESC"]&perPage=${count}`)
41 | return await data.json();
42 | }
43 |
44 | export const getAnimeNew = async (count) => {
45 | const data = await fetch(apiLink + `/meta/anilist/advanced-search?type=ANIME&sort=["POPULARITY_DESC"]&status=RELEASING&perPage=${count}`)
46 | return await data.json();
47 | }
48 |
49 | export const getAnimeGenre = async (genre, count) => {
50 | const data = await fetch(apiLink + `/meta/anilist/advanced-search?sort=["TRENDING_DESC"]&genres=["${genre}"]&page=1&perPage=${count}`)
51 | return await data.json();
52 | }
53 |
54 | export const getUpcomingAnime = async (count) => {
55 | const data = await fetch(apiLink + `/meta/anilist/advanced-search?sort=["POPULARITY_DESC"]&status=NOT_YET_RELEASED&page=1&perPage=${count}`)
56 | return await data.json();
57 | }
58 |
59 | export const getExternalLink = async (episodeId) => {
60 | const data = await fetch(apiLink + `/anime/gogoanime/watch/${episodeId}?server=gogocdn`)
61 | return await data.json();
62 | }
--------------------------------------------------------------------------------
/src/handlers/manga.js:
--------------------------------------------------------------------------------
1 | const corsLink = process.env.NEXT_PUBLIC_CORS_REQUEST_LINK;
2 | const apiLink = process.env.NEXT_PUBLIC_CONSUMET_API;
3 |
4 | export const getMangaDetails = async (id) => {
5 | const data = await fetch(apiLink + `/meta/anilist-manga/info/${id}?provider=mangadex`)
6 | return await data.json();
7 | };
8 |
9 | export const getMangaPages = async (chapterId) => {
10 | const data = await fetch(apiLink + `/meta/anilist-manga/read?chapterId=${chapterId}&provider=mangadex`)
11 | return await data.json();
12 | }
13 |
14 | export const getMangaSearch = async (query, count) => {
15 | const data = await fetch(apiLink + `/meta/anilist-manga/${query}?page=1&perPage=${count}`)
16 | return await data.json();
17 | }
18 |
19 | export const getMangaNew = async (count) => {
20 | const data = await fetch(apiLink + `/meta/anilist/advanced-search?type=MANGA&sort=["POPULARITY_DESC"]&status=RELEASING&perPage=${count}`)
21 | return await data.json();
22 | }
23 |
24 | export const getMangaTrending = async (count) => {
25 | const data = await fetch(apiLink + `/meta/anilist/advanced-search?type=MANGA&sort=["TRENDING_DESC"]&perPage=${count}`)
26 | return await data.json();
27 | }
28 |
29 | export const getMangaPopular = async (count) => {
30 | const data = await fetch(apiLink + `/meta/anilist/advanced-search?type=MANGA&sort=["POPULARITY_DESC"]&perPage=${count}`)
31 | return await data.json();
32 | }
33 |
34 | export const getMangaTop = async (count) => {
35 | const data = await fetch(apiLink + `/meta/anilist/advanced-search?type=MANGA&sort=["SCORE_DESC"]&perPage=${count}`)
36 | return await data.json();
37 | }
--------------------------------------------------------------------------------
/styles/Home.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | padding: 0 2rem;
3 | }
4 |
5 | .main {
6 | min-height: 100vh;
7 | padding: 4rem 0;
8 | flex: 1;
9 | display: flex;
10 | flex-direction: column;
11 | justify-content: center;
12 | align-items: center;
13 | }
14 |
15 | .footer {
16 | display: flex;
17 | flex: 1;
18 | padding: 2rem 0;
19 | border-top: 1px solid #eaeaea;
20 | justify-content: center;
21 | align-items: center;
22 | }
23 |
24 | .footer a {
25 | display: flex;
26 | justify-content: center;
27 | align-items: center;
28 | flex-grow: 1;
29 | }
30 |
31 | .title a {
32 | color: #0070f3;
33 | text-decoration: none;
34 | }
35 |
36 | .title a:hover,
37 | .title a:focus,
38 | .title a:active {
39 | text-decoration: underline;
40 | }
41 |
42 | .title {
43 | margin: 0;
44 | line-height: 1.15;
45 | font-size: 4rem;
46 | }
47 |
48 | .title,
49 | .description {
50 | text-align: center;
51 | }
52 |
53 | .description {
54 | margin: 4rem 0;
55 | line-height: 1.5;
56 | font-size: 1.5rem;
57 | }
58 |
59 | .code {
60 | background: #fafafa;
61 | border-radius: 5px;
62 | padding: 0.75rem;
63 | font-size: 1.1rem;
64 | font-family:
65 | Menlo,
66 | Monaco,
67 | Lucida Console,
68 | Liberation Mono,
69 | DejaVu Sans Mono,
70 | Bitstream Vera Sans Mono,
71 | Courier New,
72 | monospace;
73 | }
74 |
75 | .grid {
76 | display: flex;
77 | align-items: center;
78 | justify-content: center;
79 | flex-wrap: wrap;
80 | max-width: 800px;
81 | }
82 |
83 | .card {
84 | margin: 1rem;
85 | padding: 1.5rem;
86 | text-align: left;
87 | color: inherit;
88 | text-decoration: none;
89 | border: 1px solid #eaeaea;
90 | border-radius: 10px;
91 | transition:
92 | color 0.15s ease,
93 | border-color 0.15s ease;
94 | max-width: 300px;
95 | }
96 |
97 | .card:hover,
98 | .card:focus,
99 | .card:active {
100 | color: #0070f3;
101 | border-color: #0070f3;
102 | }
103 |
104 | .card h2 {
105 | margin: 0 0 1rem 0;
106 | font-size: 1.5rem;
107 | }
108 |
109 | .card p {
110 | margin: 0;
111 | font-size: 1.25rem;
112 | line-height: 1.5;
113 | }
114 |
115 | .logo {
116 | height: 1em;
117 | margin-left: 0.5rem;
118 | }
119 |
120 | @media (max-width: 600px) {
121 | .grid {
122 | width: 100%;
123 | flex-direction: column;
124 | }
125 | }
126 |
127 | @media (prefers-color-scheme: dark) {
128 | .card,
129 | .footer {
130 | border-color: #222;
131 | }
132 | .code {
133 | background: #111;
134 | }
135 | .logo img {
136 | filter: invert(1);
137 | }
138 | }
139 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
2 | @tailwind base;
3 | @tailwind components;
4 | @tailwind utilities;
5 |
6 | * {
7 | font-family: "Manrope", sans-serif;
8 | }
9 |
10 | :root {
11 | /* create a primary */
12 | --primary: #0f0e0e;
13 | --secondary: #ffffff;
14 | --secondary-light: #d9d9d9 color-scheme: dark;
15 | }
16 |
17 | @layer utilities {
18 | .scrollbar-hidden-background {
19 | scrollbar-width: thin;
20 | /* For Firefox */
21 | scrollbar-color: #F2F2F2 transparent;
22 | /* For Firefox */
23 | }
24 |
25 | .scrollbar-hidden-background::-webkit-scrollbar {
26 | width: 4px;
27 | /* For Chrome, Safari, and other Webkit browsers */
28 | }
29 |
30 | .scrollbar-hidden-background::-webkit-scrollbar-track {
31 | background: transparent;
32 | /* For Chrome, Safari, and other Webkit browsers */
33 | }
34 |
35 | .scrollbar-hidden-background::-webkit-scrollbar-thumb {
36 | background-color: #F2F2F2;
37 | /* For Chrome, Safari, and other Webkit browsers */
38 | border-radius: 2px;
39 | /* For Chrome, Safari, and other Webkit browsers */
40 | border: 2px solid transparent;
41 | /* For Chrome, Safari, and other Webkit browsers */
42 | background-clip: content-box;
43 | /* For Chrome, Safari, and other Webkit browsers */
44 | }
45 | }
46 |
47 | html {
48 | scroll-behavior: smooth;
49 | }
50 |
51 | body::-webkit-scrollbar {
52 | width: 0.4em;
53 | font-family: "Poppins";
54 | }
55 |
56 | body::-webkit-scrollbar-track {
57 | background: transparent;
58 | }
59 |
60 | body::-webkit-scrollbar-thumb {
61 | background-color: #F2F2F2;
62 | /* For Chrome, Safari, and other Webkit browsers */
63 | border-radius: 2px;
64 | /* For Chrome, Safari, and other Webkit browsers */
65 | border: 2px solid transparent;
66 | /* For Chrome, Safari, and other Webkit browsers */
67 | background-clip: content-box;
68 | /* For Chrome, Safari, and other Webkit browsers */
69 | }
70 |
71 | body {
72 | background-color: var(--primary);
73 | color: var(--secondary);
74 | }
75 |
76 | p {
77 | color: var(--secondary);
78 | }
79 |
80 | .privacy-screen {
81 | position: fixed;
82 | top: 0;
83 | left: 0;
84 | right: 0;
85 | bottom: 0;
86 | background-color: black;
87 | z-index: 2;
88 | }
89 |
90 | @media only screen and (max-width: 600px) {
91 | .alignfull {
92 | margin-left: calc(50% - 50vw);
93 | margin-right: calc(50% - 50vw);
94 | max-width: 1000%;
95 | width: auto;
96 | }
97 | }
98 |
99 | .custom-shape-divider-bottom-1682184498 {
100 | position: absolute;
101 | bottom: 0;
102 | left: 0;
103 | width: 100%;
104 | overflow: hidden;
105 | line-height: 0;
106 | transform: rotate(180deg);
107 | }
108 |
109 | .custom-shape-divider-bottom-1682184498 svg {
110 | position: relative;
111 | display: block;
112 | width: calc(100% + 1.3px);
113 | height: 265px;
114 | }
115 |
116 | .custom-shape-divider-bottom-1682184498 .shape-fill {
117 | fill: #e9e0c9;
118 | }
--------------------------------------------------------------------------------
/styles/nprogress.css:
--------------------------------------------------------------------------------
1 | /* Make clicks pass-through */
2 | #nprogress {
3 | pointer-events: none;
4 | }
5 |
6 | #nprogress .bar {
7 | background: #F2F2F2;
8 |
9 | position: fixed;
10 | z-index: 1031;
11 | top: 0;
12 | left: 0;
13 |
14 | width: 100%;
15 | height: 3px;
16 | animation: gradient 2s infinite;
17 | animation-fill-mode: forwards;
18 | animation-timing-function: linear;
19 | }
20 |
21 | @keyframes gradient {
22 | 0% {
23 | background-position: 0 0;
24 | }
25 |
26 | 100% {
27 | background-position: -200% 0;
28 | }
29 | }
30 |
31 | /* Fancy blur effect */
32 | #nprogress .peg {
33 | display: block;
34 | position: absolute;
35 | right: 0px;
36 | width: 100px;
37 | height: 100%;
38 | box-shadow:
39 | 0 0 10px #dfdfdf,
40 | 0 0 5px #888888;
41 | opacity: 1;
42 |
43 | -webkit-transform: rotate(3deg) translate(0px, -4px);
44 | -ms-transform: rotate(3deg) translate(0px, -4px);
45 | transform: rotate(3deg) translate(0px, -4px);
46 | }
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | const plugin = require("tailwindcss/plugin");
3 |
4 | module.exports = {
5 | darkMode: 'selector',
6 | content: [
7 | "./pages/**/*.{js,ts,jsx,tsx}",
8 | "./components/**/*.{js,ts,jsx,tsx}",
9 | ],
10 | theme: {
11 | extend: {
12 | colors: {
13 | primary: {
14 | DEFAULT: "#222222",
15 | light: "#5F5E5E",
16 | hover: "#4b4b4b",
17 | },
18 | secondary: {
19 | DEFAULT: "#F2F2F2",
20 | light: "#D1D1D1",
21 | hover:"#c1c1c1"
22 | },
23 | accent: {
24 | DEFAULT: "#FBBF24",
25 | light: "#FDE68A",
26 | },
27 | },
28 | keyframes: {
29 | fadeIn: {
30 | '0%': { opacity: '0' },
31 | '100%': { opacity: '1' },
32 | },
33 | },
34 | animation: {
35 | fadeIn: 'fadeIn .3s ease-in-out',
36 | },
37 | },
38 | },
39 | plugins: [
40 | plugin(function ({ addBase, theme }) {
41 | addBase({
42 | h1: { fontSize: theme("fontSize.3xl") }, // 24px
43 | h2: { fontSize: theme("fontSize.2xl") }, // 20px
44 | h3: { fontSize: theme("fontSize.xl") }, // 18px
45 | // h4, h5, h6, p - 16px;
46 | });
47 | }),
48 | ],
49 | };
50 |
--------------------------------------------------------------------------------
setIsMenuOpen(false)}
86 | className={`transition-all pt-2 p-5 z-30 fixed ${isMenuOpen ? "top-0 left-0 right-0 bottom-0" : "-top-full"} w-screen flex items-center justify-center transform transition-transform ${isMenuOpen ? "scale-100" : "scale-0"}`}
87 | >
88 |
92 |
93 | );
94 | }
95 |
96 | export default Header;
--------------------------------------------------------------------------------
/components/ui/Logo.jsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 |
3 | function Logo({ hover = true }) {
4 | return (
5 |
6 | e.stopPropagation()}>
89 |
91 | Munchyroll
7 |
8 | );
9 | }
10 |
11 | export default Logo;
--------------------------------------------------------------------------------
/components/ui/MainLayout.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import Head from "next/head";
3 | import Footer from "./Footer";
4 | import Header from "./Header";
5 | import { useCookies } from 'react-cookie';
6 |
7 | function MainLayout({ children, useHead = true, banner, search = true, landing = false, type, manga = false }) {
8 | // const [hour, setHour] = useState();
9 |
10 | // useEffect(() => {
11 | // const time = new Date();
12 | // setHour(time.getHours());
13 | // });
14 |
15 | // var backgroundClass;
16 |
17 | // // Define the time ranges for day and night
18 | // const dawn = "06"; // 6 AM
19 | // const noon = "12"; // 12 PM
20 | // const dusk = "16"; // 4 PM
21 | // const night = "20"; // 8 PM
22 |
23 | // if (hour >= dawn && hour < noon) {
24 | // backgroundClass = "from-[#CF9E57] to-[#19547B]";
25 | // } else if (hour >= noon && hour < dusk) {
26 | // backgroundClass = "from-[#507b98] to-[#003973]";
27 | // } else if (hour >= dusk && hour < night) {
28 | // backgroundClass = "from-[#7b3737] to-[#2C3E50]";
29 | // } else {
30 | // backgroundClass = "from-[#141E30] to-[#243B55]";
31 | // }
32 | const [cookies, setCookie] = useCookies(['theme']);
33 | const [theme, setTheme] = useState(cookies.theme || 'dark');
34 |
35 | useEffect(() => {
36 | setCookie('theme', theme, { sameSite: 'lax' });
37 | }, [theme]);
38 |
39 | const toggleTheme = () => {
40 | setTheme(prevTheme => prevTheme === 'dark' ? 'light' : 'dark');
41 | };
42 |
43 | return (
44 |
45 | {useHead && (
46 |
47 | Munchyroll
48 |
49 |
53 |
54 |
55 |
59 |
63 |
64 |
65 |
69 |
73 |
74 |
75 | )}
76 |
77 |
91 | );
92 | }
93 |
94 | export default MainLayout;
--------------------------------------------------------------------------------
/components/ui/SearchInput.jsx:
--------------------------------------------------------------------------------
1 | import { useState, useRef, useImperativeHandle, forwardRef } from "react";
2 | import { useRouter } from "next/router";
3 | import { CgSearch } from "react-icons/cg";
4 |
5 | // Wrap the component with forwardRef to use ref from parent
6 | const SearchInput = forwardRef(({ type }, ref) => {
7 | const [search, setSearch] = useState("");
8 | const router = useRouter();
9 | const inputRef = useRef(null);
10 |
11 | useImperativeHandle(ref, () => ({
12 | focusInput: () => {
13 | inputRef.current.focus();
14 | },
15 | }));
16 |
17 | const handleSubmit = (e) => {
18 | e.preventDefault();
19 | if (!search) return;
20 | router.push(`/${type}/search/${search}`);
21 | };
22 |
23 | return (
24 |
80 | 
81 |
82 |
83 | )}
84 |
85 |
89 |
90 |
86 | {children}
87 |
88 |
25 |
40 | );
41 | });
42 |
43 | export default SearchInput;
--------------------------------------------------------------------------------
/components/ui/Status.jsx:
--------------------------------------------------------------------------------
1 | function Status({ status }) {
2 | const statusList = {
3 | "Completed": "bg-emerald-500",
4 | "Ongoing": "bg-yellow-500",
5 | "Not yet aired": "bg-red-500",
6 | "Cancelled": "bg-gray-500",
7 | "Hiatus": "bg-blue-500",
8 | "Unknown": "bg-gray-500",
9 | }
10 |
11 | return (
12 | Looking for something?
26 | 39 |
13 |
16 |
17 |
18 | )
19 |
20 | }
21 |
22 | export default Status;
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | reactStrictMode: true,
4 | };
5 |
6 | module.exports = nextConfig;
7 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "munchyroll",
3 | "version": "2.0.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@tawk.to/tawk-messenger-react": "^2.0.2",
13 | "@videojs/http-streaming": "^3.10.0",
14 | "@vidstack/react": "^1.11.29",
15 | "eslint": "8.57.0",
16 | "eslint-config-next": "^14.1.4",
17 | "hls.js": "^1.5.13",
18 | "isomorphic-dompurify": "^2.11.0",
19 | "next": "^14.1.4",
20 | "npm": "^10.5.0",
21 | "nprogress": "^0.2.0",
22 | "react": "18.2.0",
23 | "react-cookie": "^7.1.4",
24 | "react-dom": "18.2.0",
25 | "react-ga": "^3.3.1",
26 | "react-icons": "^4.12.0",
27 | "react-lazy-load-image-component": "^1.6.0",
28 | "react-query": "^3.39.3",
29 | "react-responsive-carousel": "^3.2.23",
30 | "videojs-hotkeys": "^0.2.28"
31 | },
32 | "devDependencies": {
33 | "autoprefixer": "^10.4.19",
34 | "postcss": "^8.4.38",
35 | "tailwindcss": "^3.4.1"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/pages/404.js:
--------------------------------------------------------------------------------
1 | import MainLayout from '../components/ui/MainLayout';
2 | import TextButton from '../components/buttons/TextButton';
3 |
4 | function NotFound() {
5 | return (
6 |
8 |
14 | 404
9 |Page Not Found
10 |
11 |
13 |
50 |
53 |
53 |
59 | Search Results > {searchId}
54 | 55 | {animeSearchData.results.length === 0 && ( 56 |No Results Found
57 | )}
58 | 60 |
61 | {animeSearchData &&
62 | animeSearchData.results
63 | // .filter((anime) => !anime.animeTitle.toLowerCase().includes("dub"))
64 | .map((anime) => (
65 |
68 |
69 | )}
70 | Loading...
});
14 |
15 | export const getServerSideProps = async (context) => {
16 | const { episodeId, episodeNum, dub = false } = await context.query;
17 |
18 | const anime = await getAnimeDetails(episodeId);
19 |
20 | const episode = await getAnimeEpisodeData(episodeId);
21 |
22 | const episodeNumber = parseInt(episodeNum);
23 |
24 | return {
25 | props: {
26 | episode,
27 | anime,
28 | episodeNumber,
29 | dub
30 | },
31 | };
32 | };
33 |
34 | function StreamingPage({ episode, anime, episodeNumber, dub }) {
35 | const router = useRouter();
36 |
37 | // const [isDubbed, setIsDubbed] = useState(dub);
38 | // const [dubbedEpisodeDataLink, setDubbedEpisodeDataLink] = useState(null);
39 | const [downloadLink, setDownloadLink] = useState(null);
40 |
41 | const firstEpisodeNumber = episode[0].number;
42 | const episodeIndex = firstEpisodeNumber === 0 ? episodeNumber : episodeNumber - 1;
43 |
44 | const episodeName = episode[episodeIndex].id;
45 | const episodeTitle = episode[episodeIndex].title;
46 |
47 | useEffect(() => {
48 | const fetchDownloadLink = async () => {
49 | const episodeData = await getExternalLink(episodeName);
50 | setDownloadLink(episodeData.download);
51 | };
52 |
53 | fetchDownloadLink();
54 | }, [episode, episodeNumber]);
55 |
56 | // if (!episodeId) {
57 | // return
98 |
99 |
162 |
163 |
164 | );
165 | }
166 |
167 | export default StreamingPage;
168 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import Head from "next/head";
2 | import Script from 'next/script'
3 | import { useEffect } from "react";
4 | import LandingPage from "../components/LandingPage";
5 | import TawkMessengerReact from "@tawk.to/tawk-messenger-react";
6 | import ReactGA from "react-ga";
7 | import MainLayout from "../components/ui/MainLayout";
8 |
9 | export default function Home() {
10 | useEffect(() => {
11 | if (process.env.NEXT_PUBLIC_GA_TRACKING_ID) {
12 | ReactGA.pageview(window.location.pathname + window.location.search);
13 | }
14 | });
15 | return (
16 | <>
17 |
100 |
127 |
101 | {/* {isDubbed ? (
102 |
125 |
109 | 1) ? "" : "invisible"}`} href={`/anime/watch/${anime.id}/${episodeNumber - 1}`}>
110 |
111 |
112 |
113 |
114 |
115 |
*/}
116 |
117 |
123 |
118 | {anime?.title.english || anime?.title.romaji}
119 |
122 | {episodeTitle ? (`Episode ${episodeNumber}: ${episodeTitle}`) : (`Episode ${episodeNumber}`)}
120 | 121 |
128 | {/* {isDubbed ? (
129 |
161 |
18 | Munchyroll
25 |
26 |
30 |
31 |
32 |
36 |
40 |
41 |
42 |
43 |
47 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | {process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
59 |
60 | )}
61 |
62 |
63 |
65 |
66 |
67 | );
68 | }
69 |
--------------------------------------------------------------------------------
/pages/manga/index.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from "react";
2 | import Head from "next/head";
3 | import ReactGA from "react-ga";
4 |
5 | import MainLayout from "../../components/ui/MainLayout";
6 | import MangaCarousel from "../../components/manga/MangaCarousel";
7 | import MangaList from "../../components/manga/MangaList";
8 | import { getMangaTrending } from "../../src/handlers/manga";
9 |
10 | export async function getServerSideProps() {
11 | const trendingData = await getMangaTrending(20);
12 |
13 | return {
14 | props: {
15 | trendingData,
16 | },
17 | };
18 | }
19 |
20 | const Home = ({ trendingData }) => {
21 |
22 | useEffect(() => {
23 | if (process.env.NEXT_PUBLIC_GA_TRACKING_ID) {
24 | ReactGA.pageview(window.location.pathname + window.location.search);
25 | }
26 | }, []);
27 |
28 | return (
29 | <>
30 |
31 |
19 | {process.env.NEXT_PUBLIC_TAWKTO_PROPERTY_ID && process.env.NEXT_PUBLIC_TAWKTO_WIDGET_ID && (
20 |
23 |
24 |
50 |
53 |
52 |
53 |
75 |
76 |
77 | );
78 | }
79 |
80 | export default ReadingPage;
81 |
--------------------------------------------------------------------------------
/pages/manga/search/[searchId].jsx:
--------------------------------------------------------------------------------
1 | import { useRouter } from "next/router";
2 | import React from "react";
3 | import Head from "next/head";
4 | import MainLayout from "../../../components/ui/MainLayout";
5 | import MangaCard from "../../../components/manga/MangaCard";
6 | import { getMangaSearch } from '../../../src/handlers/manga';
7 |
8 | export const getServerSideProps = async (context) => {
9 | const { searchId } = context.query;
10 |
11 | const mangaSearchData = await getMangaSearch(searchId, 24);
12 |
13 | return {
14 | props: {
15 | mangaSearchData,
16 | },
17 | };
18 | };
19 |
20 | function SearchPage({ mangaSearchData }) {
21 | const router = useRouter();
22 | const { searchId } = router.query;
23 |
24 | return (
25 | <>
26 |
27 |
54 |
59 | {chapter && (
60 |
55 | {manga?.title.english || manga?.title.romaji}
56 |
58 | {"Chapter " + chapterNumber}
57 |
61 |
73 | )}
74 |
62 |
72 |
64 | 1) ? "" : "invisible"}`} href={`/manga/read/${manga.id}/${prevChapterId}/${chapterNumber - 1}`}>
65 |
66 |
67 |
68 |
69 |
70 |
71 |
53 |
59 | Search Results > {searchId}
54 | 55 | {mangaSearchData.results.length === 0 && ( 56 |No Results Found
57 | )}
58 | 60 |
61 | {mangaSearchData &&
62 | mangaSearchData.results
63 | .map((manga) => (
64 |
67 |
68 | )}
69 |