setIsPlaying(false)}
11 | />
12 | );
13 | };
14 |
15 | export default TrailerPlayer;
16 |
--------------------------------------------------------------------------------
/client/src/components/Others/ClockLoader.jsx:
--------------------------------------------------------------------------------
1 | import Loader from "react-spinners/MoonLoader";
2 |
3 | const ClockLoader = ({ color, size }) => {
4 | return (
5 |
20 | );
21 | };
22 | export default ClockLoader;
23 |
--------------------------------------------------------------------------------
/client/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "Animebliss",
3 | "name": "Watch anime, no ads",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "favicon.ico",
12 | "type": "image/x-icon",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "favicon.ico",
17 | "type": "image/x-icon",
18 | "sizes": "192x192"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/client/src/components/Pages/Recent.jsx:
--------------------------------------------------------------------------------
1 | import InfiniteSection from "../Sections/InfiniteSection";
2 | import Navbar from "../Sections/Navbar";
3 | import React from "react";
4 | const RecentPage = () => {
5 | const baseURL = process.env.REACT_APP_CONSUMET_API_URL
6 |
7 | return (
8 | <>
9 |
10 |
17 |
18 | );
19 | };
20 | export default RecentPage;
21 |
--------------------------------------------------------------------------------
/client/src/components/Pages/Movies.jsx:
--------------------------------------------------------------------------------
1 | import InfiniteSection from "../Sections/InfiniteSection";
2 | import Navbar from "../Sections/Navbar";
3 | import React from "react";
4 | const MoviesPage = () => {
5 | const baseURL = process.env.REACT_APP_CONSUMET_API_URL
6 |
7 | return (
8 | <>
9 |
10 |
19 |
20 | );
21 | };
22 | export default MoviesPage;
23 |
--------------------------------------------------------------------------------
/client/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Animehub | Paradise of anime fans
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/client/src/App.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | box-sizing: border-box;
4 | scroll-margin-top: 20px;
5 | }
6 |
7 | html {
8 | scroll-behavior: smooth;
9 | }
10 |
11 | body {
12 | font-family: "Inter", sans-serif;
13 | background-color: #0f0617;
14 | margin: 0;
15 | max-height: 100vh;
16 | max-width: 100vw;
17 | overflow-x: hidden;
18 | }
19 |
20 | body::-webkit-scrollbar-track {
21 | -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
22 | box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
23 | background-color: transparent;
24 | }
25 | body::-webkit-scrollbar {
26 | width: 5px;
27 | background-color: transparent;
28 | }
29 | body::-webkit-scrollbar-thumb {
30 | background-color: grey;
31 | border-radius: 4px;
32 | }
33 |
--------------------------------------------------------------------------------
/client/src/components/Sections/AnimeSection.jsx:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | import { useEffect, useState } from "react";
3 | import CarouselRenderer from "../Layouts/CarouselRenderer";
4 |
5 | const AnimeSection = ({ sectiontitle, url, id }) => {
6 | const [fetchedData, setFetchedData] = useState([]);
7 | useEffect(() => {
8 | axios.get(url).then(({ data: { results } }) => {
9 | setFetchedData(results);
10 | });
11 | }, []);
12 | return (
13 |
14 | {fetchedData.length > 0 && (
15 |
21 | )}
22 |
23 | );
24 | };
25 | export default AnimeSection;
26 |
--------------------------------------------------------------------------------
/client/src/components/Sections/MoreSection.jsx:
--------------------------------------------------------------------------------
1 | import { useLocation } from "react-router-dom";
2 | import InfiniteSection from "./InfiniteSection";
3 | import Navbar from "./Navbar";
4 | const MoreSection = () => {
5 | const location = useLocation();
6 | return (
7 | <>
8 |
9 |
19 | {location.state.sectionTitle}
20 |
21 |
27 |
28 | );
29 | };
30 | export default MoreSection;
31 |
--------------------------------------------------------------------------------
/client/src/components/Pages/SearchResults.jsx:
--------------------------------------------------------------------------------
1 | import GridRenderer from "../Layouts/GridRenderer";
2 | import { setConfiguration } from "react-grid-system";
3 | import { useLocation } from "react-router-dom";
4 | import Navbar from "../Sections/Navbar";
5 | setConfiguration({ breakpoints: [580, 924, 1434, 1767, 2000, 2400] });
6 | const SearchResults = () => {
7 | const location = useLocation();
8 | return (
9 | <>
10 |
11 |
19 | Search Results for{" "}
20 | {location.state.input}
21 |
22 |
23 |
24 | );
25 | };
26 | export default SearchResults;
27 |
--------------------------------------------------------------------------------
/client/src/components/Layouts/VerticalCarousel.jsx:
--------------------------------------------------------------------------------
1 | import { v4 as uuidv4 } from "uuid";
2 | import AnimeCard from "../Cards/AnimeCard";
3 | const VerticalCarousel = ({ finalQuery, sectionTitle }) => {
4 | return (
5 |
6 |
7 | {sectionTitle}
8 |
9 |
10 | {finalQuery.map((query) => (
11 |
12 |
18 |
19 | {query.title.english ?? query.title.romaji}
20 |
21 |
22 | ))}
23 |
24 |
{
15 | fetchVideo(id);
16 | }}
17 | className="animecard-wrapper"
18 | >
19 |
25 | {rating && (
26 |
27 |
28 | {rating / 10}
29 |
30 | )}
31 |
32 |
33 | {title && (
34 |
35 |
39 |
40 | )}
41 | {year &&
{year}
}
42 |
10 |
11 | Hola,
12 |
13 | Welcome to
Animehub
14 |
15 |
16 |
17 |
Sign Up
18 |
Please fill in your details.
19 |
20 |
48 |
49 |
50 |
Already have a account?
51 |
Sign In
52 |
53 |
54 |
15 | {finalQuery.map((query, index) => (
16 |
25 |
39 |
50 |
51 |
52 | ))}
53 |
54 |
55 | );
56 | };
57 | export default GridRenderer;
58 |
--------------------------------------------------------------------------------
/client/src/components/Pages/Genres.css:
--------------------------------------------------------------------------------
1 | .genresdiv,
2 | .formatsdiv,
3 | .seasonsdiv,
4 | .statusesdiv {
5 | transition: all 300ms ease;
6 | width: 95%;
7 | margin: 0 auto;
8 | display: grid;
9 | align-items: center;
10 | gap: 30px;
11 | justify-items: center;
12 | grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
13 | column-gap: 10;
14 | }
15 | .genre:hover,
16 | .format:hover,
17 | .status:hover,
18 | .season:hover {
19 | transform: scale(1.05);
20 | transition: 300ms ease;
21 | }
22 | .genre,
23 | .format,
24 | .status,
25 | .season {
26 | cursor: pointer;
27 | background-color: rgb(0, 0, 0, 0.5);
28 | background-size: cover;
29 | background-position: center;
30 | text-align: center;
31 | display: flex;
32 | justify-content: center;
33 | color: white;
34 | align-items: center;
35 | height: 155px;
36 | width: 270px;
37 | border-radius: 5px;
38 | }
39 | .genres-title,
40 | .formats-title,
41 | .seasons-title,
42 | .statuses-title {
43 | color: white;
44 | margin-bottom: 10px;
45 | font-size: 2.5rem;
46 | margin-top: 40px;
47 | margin-left: 2.6%;
48 | }
49 | .genres-title {
50 | margin-top: 80px;
51 | }
52 | .statusesdiv {
53 | padding-bottom: 50px;
54 | }
55 | @media screen and (max-width: 560px) {
56 | .genres-title,
57 | .formats-title,
58 | .seasons-title,
59 | .statuses-title {
60 | margin-left: 4.2%;
61 | }
62 | .genresdiv,
63 | .formatsdiv,
64 | .statusesdiv,
65 | .seasonsdiv {
66 | width: 90%;
67 | grid-template-columns: repeat(auto-fill, minmax(41vw, 1fr));
68 | }
69 | .genresdiv div,
70 | .formatsdiv div,
71 | .statusesdiv div,
72 | .seasonsdiv div {
73 | gap: 10px;
74 | row-gap: 0px;
75 | column-gap: 0px;
76 | width: 46vw;
77 | height: 120px;
78 | }
79 | }
80 | @media screen and (max-width: 375px) {
81 | .genresdiv,
82 | .formatsdiv,
83 | .statusesdiv .seasonsdiv {
84 | width: 90%;
85 | grid-template-columns: repeat(auto-fill, minmax(40vw, 1fr));
86 | }
87 | .genresdiv div,
88 | .formatsdiv div,
89 | .statusesdiv div,
90 | .seasonsdiv div {
91 | width: 46vw;
92 | }
93 | }
94 | @media screen and (max-width: 300px) {
95 | .genresdiv div,
96 | .formatsdiv div,
97 | .statusesdiv div,
98 | .seasonsdiv div {
99 | width: 90vw;
100 | }
101 | }
102 |
--------------------------------------------------------------------------------
/client/src/components/Sections/Hero.jsx:
--------------------------------------------------------------------------------
1 | import axios from "axios";
2 | import { useEffect, useRef, useState } from "react";
3 | import Carousel from "react-elastic-carousel";
4 | import { v4 as uuidv4 } from "uuid";
5 | import HeroCard from "../Cards/HeroCard";
6 | import Navbar from "./Navbar";
7 | const Hero = ({ setHeroSectionLoaded }) => {
8 | const carouselRef = useRef(null);
9 | let resetTimeout;
10 | const [fetchedAnime, setFetchedAnime] = useState([]);
11 | const baseURL = process.env.REACT_APP_ANILIST_API_URL;
12 |
13 | useEffect(() => {
14 | axios.get(`${baseURL}/popular`).then(({ data: { results } }) => {
15 | setFetchedAnime(results);
16 | setHeroSectionLoaded(true);
17 | }, []);
18 | }, []);
19 |
20 | return (
21 | <>
22 | {fetchedAnime.length > 0 && (
23 |
24 |
25 |
26 | return (
27 | {
33 | clearTimeout(resetTimeout);
34 | resetTimeout = setTimeout(() => {
35 | carouselRef?.current?.goTo(0);
36 | }, 4000);
37 | }}
38 | pagination={true}
39 | >
40 | {fetchedAnime.map((item) =>
41 | item.totalEpisodes &&
42 | item.id &&
43 | item.releaseDate &&
44 | item.duration &&
45 | item.title &&
46 | item.description &&
47 | item.cover ? (
48 |
58 | ) : null
59 | )}
60 |
61 | );
62 |
63 |
64 | )}
65 |
66 | );
67 | };
68 | export default Hero;
69 |
--------------------------------------------------------------------------------
/client/src/components/Cards/HeroCard.jsx:
--------------------------------------------------------------------------------
1 | import {
2 | CalendarOutlined,
3 | ClockCircleOutlined,
4 | PlayCircleOutlined,
5 | } from "@ant-design/icons";
6 | import { faListOl } from "@fortawesome/free-solid-svg-icons";
7 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
8 | import { useNavigate } from "react-router-dom";
9 | import TextTruncate from "react-text-truncate";
10 | import "./HeroCard.css";
11 | const HeaderCarouselCard = ({
12 | duration,
13 | cover,
14 | title,
15 | id,
16 | year,
17 | description,
18 | epcount,
19 | }) => {
20 | const navigate = useNavigate();
21 | async function fetchVideo(id) {
22 | navigate("/watch/" + id);
23 | }
24 |
25 | return (
26 | <>
27 |
33 |
34 |
{title}
35 |
36 |
37 |
38 | {" "}
39 | TV
40 |
41 |
42 | {epcount} Episodes
43 |
44 |
45 | {duration} Minutes
46 |
47 |
48 | {year}
49 |
50 |
51 |
52 | {" "}
53 | |<.+[\W]>/g, "")}
62 | line={4}
63 | >
64 |
65 |
66 |
76 |
30 |
48 |
56 | {finalQuery.map((query, index) =>
57 | isAnimeCard ? (
58 |
67 | ) : (
68 |
80 | )
81 | )}
82 |
83 |
33 |
34 | Hola,
35 |
36 | Welcome to
Animehub
37 |
38 |
39 |
Sign in
40 |
41 | Please sign in to your account.
42 |
43 |
69 |
70 |
(
72 |
78 | )}
79 | clientId={clientId}
80 | onSuccess={onSuccess}
81 | onFailure={onFailure}
82 | redirectUri="https://animehub.vercel.app/"
83 | cookiePolicy={"single_host_origin"}
84 | />
85 |
88 |
89 |
Dont't have a account?
90 |
Sign Up
91 |
93 |
{sectiontitle}
75 |
79 |
80 |
81 |
95 |
96 | {pageNumbers.map((pageNumber) => (
97 |
110 | ))}
111 |
112 |
126 |
127 |
46 |
{
48 | if (savedTime) setTime(savedTime);
49 | }}
50 | currentTime={time}
51 | onVmCurrentTimeChange={(e) => {
52 | setTime(e.detail);
53 | localStorage.setItem(animeInfoUrl, e.detail);
54 | }}
55 | onVmError={() => {
56 | if (url === src[1]) {
57 | toast.error(
58 | "Sorry we could'nt play that :( Going back to home "
59 | );
60 | navigate("/");
61 | } else {
62 | setUrl(src[1]);
63 | }
64 | }}
65 | hlsConfig={hlsConfig}
66 | theme="dark"
67 | style={{
68 | "--vm-player-theme": "rgba(255, 255, 255, .3)",
69 | "--vm-slider-track-height": "5px",
70 | "--vm-slider-thumb-height": "5px",
71 | "--vm-slider-track-focused-height": "6px",
72 | "--vm-slider-value-color": "#582fcb",
73 | "--vm-loading-screen-dot-color": "#8230c6",
74 | }}
75 | autoplay={true}
76 | >
77 |
78 |
85 |
86 |
87 |
94 |
95 |
117 | - 10s
118 |
119 |
120 |
121 |
141 | + 10s
142 |
143 |
144 |
145 |
146 |
147 |
Genres
175 |
176 | {genresinfo.map((genreinfo) => {
177 | return (
178 |
{
181 | navigate(
182 | "/filtered/genre/" + e.target.innerText.toLowerCase(),
183 | {
184 | state: { type: "genre", value: e.target.innerText },
185 | }
186 | );
187 | }}
188 | className="genre"
189 | style={{
190 | backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ),url(${genreinfo.image})`,
191 | }}
192 | >
193 | {genreinfo.title}
194 |
195 | );
196 | })}
197 |
Formats
199 |
200 | {formatsInfo.map((formatInfo) => {
201 | return (
202 |
{
204 | navigate(
205 | "/filtered/format/" +
206 | e.target.innerText.replaceAll(" ", "_").toLowerCase(),
207 | {
208 | state: {
209 | type: "format",
210 | value: e.target.innerText.replaceAll(" ", "_"),
211 | },
212 | }
213 | );
214 | }}
215 | key={uuidv4()}
216 | className="format"
217 | style={{
218 | backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ),url(${formatInfo.image})`,
219 | }}
220 | >
221 | {formatInfo.title}
222 |
223 | );
224 | })}
225 |
Seasons
227 |
228 | {seasonsInfo.map((seasonInfo) => {
229 | return (
230 |
{
233 | navigate(
234 | "/filtered/season/" + e.target.innerText.toLowerCase(),
235 | {
236 | state: { type: "season", value: e.target.innerText },
237 | }
238 | );
239 | }}
240 | style={{
241 | backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ), url(${seasonInfo.image})`,
242 | }}
243 | className="season"
244 | >
245 | {seasonInfo.title}
246 |
247 | );
248 | })}
249 |
Status
251 |
252 | {statusesInfo.map((statusInfo) => {
253 | return (
254 |
{
257 | navigate(
258 | "/filtered/status/" +
259 | e.target.innerText.replaceAll(" ", "_").toLowerCase(),
260 | {
261 | state: {
262 | type: "status",
263 | value: e.target.innerText.replaceAll(" ", "_"),
264 | },
265 | }
266 | );
267 | }}
268 | style={{
269 | backgroundImage: `linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4) ), url(${statusInfo.image})`,
270 | }}
271 | className="status"
272 | >
273 | {statusInfo.title}
274 |
275 | );
276 | })}
277 |
102 |
109 |
110 |
{anime.title.english}
111 |
112 |
113 | {anime.genres.join(" • ")}
114 |
115 |
116 |
117 |
118 | TV Show
119 |
120 |
121 | Rating: {" "}
122 | {anime.rating / 10}
123 |
124 |
125 | Total Ep: {anime.episodes.length}
126 |
127 |
128 | {anime.releaseDate}
129 |
130 |
131 |
152 |
153 |
154 |
161 |
162 |
170 |
Share
171 |
173 |
174 |
175 |
180 | Watchlist
181 |
182 |
183 |
Synopsis
184 |
185 |
189 |
190 |
191 |
192 |
193 | Studios:
194 |
195 | {anime.studios.join(", ")}
196 |
197 |
198 | {adaptation && (
199 |
200 | Adapation:
201 | {adaptation}
202 |
203 | )}
204 |
205 | Status:
206 | {anime.status}
207 |
208 |
209 |
210 |
211 |
212 | {anime.recommendations.length > 0 && (
213 |
217 | )}
218 |
219 |