Skip to content

Commit eccf31b

Browse files
Alirahmon777Alirahmon777
committed
finished-trailer
1 parent dd58298 commit eccf31b

26 files changed

+591
-121
lines changed

‎package-lock.json

+12
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"prop-types": "^15.8.1",
1515
"react": "^18.2.0",
1616
"react-dom": "^18.2.0",
17+
"react-paginate": "^8.1.5",
1718
"react-router-dom": "^6.10.0",
1819
"swiper": "^9.2.0"
1920
},

‎src/App.jsx

+11-21
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,4 @@
1-
import {
2-
Navigate,
3-
Route,
4-
RouterProvider,
5-
createBrowserRouter,
6-
createRoutesFromElements,
7-
} from "react-router-dom";
1+
import { Navigate, Route, Routes } from "react-router-dom";
82
import {
93
Films,
104
Home,
@@ -13,20 +7,25 @@ import {
137
Cartoon,
148
Series,
159
SingleFilm,
10+
SingleSeries,
1611
Trailer,
1712
} from "./pages";
1813
import SignUp from "./api/SignUp";
1914
import Layout from "./Layout/Layout";
15+
import { useContext } from "react";
16+
import { AuthContext } from "./context/AuthContext";
2017

21-
const router = createBrowserRouter(
22-
createRoutesFromElements(
23-
<>
24-
{localStorage.getItem("token") ? (
18+
function App() {
19+
const { isLogin } = useContext(AuthContext);
20+
return (
21+
<Routes>
22+
{isLogin ? (
2523
<>
2624
<Route path="/" element={<Navigate to={"/home"} replace />} />
2725
<Route path="/" element={<Layout />}>
2826
<Route path="home" element={<Home />} />
2927
<Route path="series" element={<Series />} />
28+
<Route path="series/:id" element={<SingleSeries />} />
3029
<Route path="films" element={<Films />} />
3130
<Route path="films-cartoons/:id" element={<SingleFilm />} />
3231
<Route path="films-cartoons/:id/trailer" element={<Trailer />} />
@@ -38,19 +37,10 @@ const router = createBrowserRouter(
3837
) : (
3938
<>
4039
<Route path="*" element={<Navigate to={"/signup"} replace />} />
41-
4240
<Route path="/signup" element={<SignUp />} />
4341
</>
4442
)}
45-
</>
46-
)
47-
);
48-
49-
function App() {
50-
return (
51-
<>
52-
<RouterProvider router={router} />
53-
</>
43+
</Routes>
5444
);
5545
}
5646

‎src/Layout/Layout.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const Layout = ({ redirectPath = "/signup" }) => {
99
return (
1010
<>
1111
<Header />
12-
<main className="bg-[#141414]">
12+
<main className="bg-[#141414] pb-10">
1313
<Outlet />
1414
</main>
1515
<Footer />

‎src/api/SignUp.jsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import { enqueueSnackbar } from "notistack";
88
const SignUp = () => {
99
const navigate = useNavigate();
1010

11-
const { email, setEmail, password, setPassword } = useContext(AuthContext);
11+
const { email, setEmail, password, setPassword, setIsLogin } =
12+
useContext(AuthContext);
1213

1314
const handleSubmit = (e) => {
1415
e.preventDefault();
@@ -22,7 +23,9 @@ const SignUp = () => {
2223
variant: "success",
2324
});
2425
localStorage.setItem("token", response.data.token);
25-
window.location.replace("/");
26+
27+
setIsLogin(true);
28+
navigate("/");
2629
return response.data;
2730
})
2831
.catch((error) => {

‎src/assets/svg/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,11 @@ import play from "./Play.svg";
1414
import detail from "./Detail.svg";
1515
import playWhite from "./play-white.svg";
1616
import star from "./star.svg";
17+
import world from "./world.svg";
1718

1819
export {
1920
play,
21+
world,
2022
star,
2123
playWhite,
2224
detail,

‎src/assets/svg/world.svg

+26
Loading

‎src/components/Hero.jsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useContext } from "react";
22
import { detail, play } from "../assets/svg";
33
import { Swiper, SwiperSlide } from "swiper/react";
4-
import { A11y, Autoplay, EffectFade } from "swiper";
4+
import { Autoplay, EffectFade } from "swiper";
55
import { PopularContext } from "../context/popularContext";
66
import { Link } from "react-router-dom";
77

@@ -10,7 +10,7 @@ const Hero = () => {
1010

1111
return (
1212
<Swiper
13-
modules={[A11y, Autoplay, EffectFade]}
13+
modules={[Autoplay, EffectFade]}
1414
spaceBetween={50}
1515
slidesPerView={1}
1616
speed={1000}
@@ -26,16 +26,16 @@ const Hero = () => {
2626
) => (
2727
<SwiperSlide key={i}>
2828
<section
29-
className="w-full h-full bg-cover"
29+
className="w-full h-[1000px] bg-cover"
3030
style={{
3131
backgroundImage: `url(https://image.tmdb.org/t/p/original${backdrop_path})`,
3232
}}
3333
>
3434
<div className="w-full h-full bg-[rgba(0,0,0,0.4)] pb-5 shadow-inner">
3535
<div className="container">
36-
<div className="text-white flex flex-col gap-[15px] w-[636px] pt-[200px]">
36+
<div className="text-white flex flex-col gap-[15px] w-[636px] pt-[180px]">
3737
<div>
38-
<h1 className="text-[85px] font-['Bold'] inline relative">
38+
<h1 className="text-[85px] font-['Bold'] leading-[70px] inline relative">
3939
{original_title}
4040
</h1>
4141
</div>

‎src/components/swiper/SwiperCartoon.jsx

+12-10
Original file line numberDiff line numberDiff line change
@@ -20,16 +20,18 @@ const SwiperCartoon = () => {
2020
{cartoon.map(({ original_title, title, poster_path, id }, i) => {
2121
return (
2222
<SwiperSlide key={i}>
23-
<Link to={`/films-cartoons/${id}`}>
24-
<img
25-
className="rounded-lg transition-all hover:opacity-30"
26-
src={`https://image.tmdb.org/t/p/original${poster_path}`}
27-
alt={original_title}
28-
/>
29-
<p className="z-10 text-3xl absolute w-full transition-all bottom-0 films-text opacity-0 pointer-events-none text-center">
30-
{title}
31-
</p>
32-
</Link>
23+
<div className="relative transition-all films-post cursor-pointer rounded-lg overflow-hidden">
24+
<Link to={`/films-cartoons/${id}`}>
25+
<img
26+
className="rounded-lg transition-all hover:opacity-30"
27+
src={`https://image.tmdb.org/t/p/original${poster_path}`}
28+
alt={original_title}
29+
/>
30+
<p className="z-10 text-3xl absolute w-full transition-all bottom-0 films-text opacity-0 pointer-events-none text-center">
31+
{title}
32+
</p>
33+
</Link>
34+
</div>
3335
</SwiperSlide>
3436
);
3537
})}

‎src/components/swiper/SwiperPopular.jsx

+20-18
Original file line numberDiff line numberDiff line change
@@ -24,24 +24,26 @@ const SwiperPopular = () => {
2424
navigation
2525
loop
2626
>
27-
{popular.map(({ original_title, title, poster_path, id }, i) => {
28-
return (
29-
<SwiperSlide key={i}>
30-
<div className="relative transition-all films-post cursor-pointer rounded-lg overflow-hidden">
31-
<Link to={`/films-cartoons/${id}`}>
32-
<img
33-
className="rounded-lg transition-all hover:opacity-30"
34-
src={`https://image.tmdb.org/t/p/original${poster_path}`}
35-
alt={original_title}
36-
/>
37-
<p className="z-10 text-3xl absolute w-full transition-all bottom-0 films-text opacity-0 pointer-events-none text-center">
38-
{title}
39-
</p>
40-
</Link>
41-
</div>
42-
</SwiperSlide>
43-
);
44-
})}
27+
{popular?.results?.map(
28+
({ original_title, title, poster_path, id }, i) => {
29+
return (
30+
<SwiperSlide key={i}>
31+
<div className="relative transition-all films-post cursor-pointer rounded-lg overflow-hidden">
32+
<Link to={`/films-cartoons/${id}`}>
33+
<img
34+
className="rounded-lg transition-all hover:opacity-30"
35+
src={`https://image.tmdb.org/t/p/original${poster_path}`}
36+
alt={original_title}
37+
/>
38+
<p className="z-10 text-3xl absolute w-full transition-all bottom-0 films-text opacity-0 pointer-events-none text-center">
39+
{title}
40+
</p>
41+
</Link>
42+
</div>
43+
</SwiperSlide>
44+
);
45+
}
46+
)}
4547
</Swiper>
4648
);
4749
};

‎src/components/ui/Header.jsx

+20-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from "react";
1+
import React, { useEffect, useState } from "react";
22
import {
33
DownArrow,
44
GiftBox,
@@ -13,13 +13,30 @@ import { ProfileImg } from "../../assets/img";
1313
const Header = () => {
1414
const [search, setSearch] = useState("");
1515
const [isSearch, setIsSearch] = useState(false);
16+
const [offset, setOffset] = useState(null);
17+
18+
useEffect(() => {
19+
window.addEventListener("scroll", () => {
20+
if (window.scrollY > 0) {
21+
setOffset(true);
22+
} else {
23+
setOffset(false);
24+
}
25+
});
26+
}, []);
1627

1728
const searchHandler = () => {
1829
setIsSearch(!isSearch);
1930
};
2031

2132
return (
22-
<header className="py-[26px] bg-[#141414]">
33+
<header
34+
className={
35+
offset
36+
? "py-[26px] sticky z-50 top-0 transition-all backdrop-blur-2xl"
37+
: `py-[26px] bg-[#141414] transition-all`
38+
}
39+
>
2340
<div className="container">
2441
<nav className="flex items-center justify-between">
2542
<div className="flex items-center gap-[50px]">
@@ -46,7 +63,7 @@ const Header = () => {
4663
}
4764
to={"/series"}
4865
>
49-
Series
66+
Series & TV shows
5067
</NavLink>
5168
</li>
5269
<li>

‎src/context/AuthContext.jsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,18 @@ export const AuthContext = createContext();
55
const AuthContextProvider = ({ children }) => {
66
const [email, setEmail] = useState("");
77
const [password, setPassword] = useState("");
8-
8+
const [isLogin, setIsLogin] = useState(
9+
localStorage.getItem("token") ? true : false
10+
);
911
return (
1012
<AuthContext.Provider
1113
value={{
1214
email,
1315
setEmail,
1416
password,
1517
setPassword,
18+
isLogin,
19+
setIsLogin,
1620
}}
1721
>
1822
{children}

‎src/context/SeriesContext.jsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { createContext, useEffect, useState } from "react";
2+
import { API_KEY, api } from "../utils/api";
3+
4+
export const SeriesContext = createContext();
5+
6+
const SeriesContextProvider = ({ children }) => {
7+
const [series, setSeries] = useState([]);
8+
useEffect(() => {
9+
api()
10+
.get(`discover/tv?api_key=${API_KEY}`)
11+
.then(({ data }) => setSeries(data));
12+
}, []);
13+
14+
return (
15+
<SeriesContext.Provider
16+
value={{
17+
series,
18+
setSeries,
19+
}}
20+
>
21+
{children}
22+
</SeriesContext.Provider>
23+
);
24+
};
25+
26+
export default SeriesContextProvider;

‎src/context/index.js

+9-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1+
import SeriesContextProvider from "./SeriesContext";
2+
import AuthContextProvider from "./AuthContext";
13
import CartoonContextProvider from "./cartoonContext";
24
import PopularContextProvider from "./popularContext";
35
import RecomContextProvider from "./recomContext";
4-
5-
export { PopularContextProvider, RecomContextProvider, CartoonContextProvider };
6+
export {
7+
PopularContextProvider,
8+
AuthContextProvider,
9+
RecomContextProvider,
10+
CartoonContextProvider,
11+
SeriesContextProvider,
12+
};

0 commit comments

Comments
 (0)