├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── manifest.json └── index.html ├── src ├── assets │ ├── 1.jpg │ ├── 2.jpg │ ├── 3.jpg │ ├── 4.jpg │ ├── 5.jpg │ ├── 6.jpg │ ├── 7.jpg │ ├── avatar.png │ ├── logoImage.png │ ├── logoImageDark.png │ ├── luther-the-fallen-sun-2023-sm.webp │ ├── Screenshot_20230326_123527_com.huawei.himovie.overseas.jpg │ ├── Screenshot_20230326_123544_com.huawei.himovie.overseas.jpg │ ├── Screenshot_20230326_123551_com.huawei.himovie.overseas.jpg │ ├── Screenshot_20230326_123604_com.huawei.himovie.overseas.jpg │ ├── Screenshot_20230326_123610_com.huawei.himovie.overseas.jpg │ ├── Screenshot_20230326_123619_com.huawei.himovie.overseas.jpg │ └── Screenshot_20230326_123628_com.huawei.himovie.overseas.jpg ├── components │ ├── explore │ │ ├── TopAnime.jsx │ │ ├── ComingSoon.jsx │ │ ├── TrendMovies.jsx │ │ ├── ComingSoonItem.jsx │ │ ├── TopSeries.jsx │ │ ├── TopMovie.jsx │ │ ├── TrendMoviesItem.jsx │ │ ├── ItemCard.jsx │ │ └── ExploreItemCard.jsx │ ├── genre │ │ └── GenreCard.jsx │ ├── navbar │ │ ├── SearchItem.jsx │ │ ├── Search.jsx │ │ └── Navbar.jsx │ └── Sidebar │ │ ├── SideBarList.jsx │ │ └── SideBar.jsx ├── pages │ ├── moviePage │ │ ├── Details.jsx │ │ ├── Trailer.jsx │ │ ├── Comments.jsx │ │ ├── MoviePageDtailes.jsx │ │ ├── Download.jsx │ │ ├── MoviePage2.jsx │ │ └── MoviePage.jsx │ ├── genres │ │ ├── Genres.jsx │ │ └── MoviesByGenre.jsx │ ├── seriesPage │ │ └── SeriesPage.jsx │ ├── moviesPage │ │ └── MoviesPage.jsx │ └── Explore.jsx ├── redux │ ├── store.js │ └── services │ │ └── movieDatabase.js ├── common │ └── icons.js ├── styles │ ├── styles.js │ └── globalStyles.css ├── App.jsx └── constans │ └── index.js ├── tailwind.config.js ├── package.json └── README.md /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/assets/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/1.jpg -------------------------------------------------------------------------------- /src/assets/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/2.jpg -------------------------------------------------------------------------------- /src/assets/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/3.jpg -------------------------------------------------------------------------------- /src/assets/4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/4.jpg -------------------------------------------------------------------------------- /src/assets/5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/5.jpg -------------------------------------------------------------------------------- /src/assets/6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/6.jpg -------------------------------------------------------------------------------- /src/assets/7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/7.jpg -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/avatar.png -------------------------------------------------------------------------------- /src/assets/logoImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/logoImage.png -------------------------------------------------------------------------------- /src/assets/logoImageDark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/logoImageDark.png -------------------------------------------------------------------------------- /src/components/explore/TopAnime.jsx: -------------------------------------------------------------------------------- 1 | const TopAnime = () => { 2 | return ( ''); 3 | } 4 | 5 | export default TopAnime; -------------------------------------------------------------------------------- /src/assets/luther-the-fallen-sun-2023-sm.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/luther-the-fallen-sun-2023-sm.webp -------------------------------------------------------------------------------- /src/pages/moviePage/Details.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Details = () => { 4 | return ( 5 |
Detaidddls
6 | ) 7 | } 8 | 9 | export default Details -------------------------------------------------------------------------------- /src/pages/moviePage/Trailer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Trailer = () => { 4 | return ( 5 |
Trailer
6 | ) 7 | } 8 | 9 | export default Trailer -------------------------------------------------------------------------------- /src/pages/moviePage/Comments.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Comments = () => { 4 | return ( 5 |
Comments
6 | ) 7 | } 8 | 9 | export default Comments -------------------------------------------------------------------------------- /src/assets/Screenshot_20230326_123527_com.huawei.himovie.overseas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/Screenshot_20230326_123527_com.huawei.himovie.overseas.jpg -------------------------------------------------------------------------------- /src/assets/Screenshot_20230326_123544_com.huawei.himovie.overseas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/Screenshot_20230326_123544_com.huawei.himovie.overseas.jpg -------------------------------------------------------------------------------- /src/assets/Screenshot_20230326_123551_com.huawei.himovie.overseas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/Screenshot_20230326_123551_com.huawei.himovie.overseas.jpg -------------------------------------------------------------------------------- /src/assets/Screenshot_20230326_123604_com.huawei.himovie.overseas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/Screenshot_20230326_123604_com.huawei.himovie.overseas.jpg -------------------------------------------------------------------------------- /src/assets/Screenshot_20230326_123610_com.huawei.himovie.overseas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/Screenshot_20230326_123610_com.huawei.himovie.overseas.jpg -------------------------------------------------------------------------------- /src/assets/Screenshot_20230326_123619_com.huawei.himovie.overseas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/Screenshot_20230326_123619_com.huawei.himovie.overseas.jpg -------------------------------------------------------------------------------- /src/assets/Screenshot_20230326_123628_com.huawei.himovie.overseas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahdiasgary/React-Movie-App/HEAD/src/assets/Screenshot_20230326_123628_com.huawei.himovie.overseas.jpg -------------------------------------------------------------------------------- /src/pages/moviePage/MoviePageDtailes.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Link, Route, Switch } from 'react-router-dom' 3 | import Details from './Details' 4 | import MoviePage from './MoviePage' 5 | 6 | const MoviePageDtailes = () => { 7 | return ( 8 | 'd' 9 | ) 10 | } 11 | 12 | export default MoviePageDtailes -------------------------------------------------------------------------------- /src/pages/moviePage/Download.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Download = () => { 4 | return ( 5 |
6 |
7 | Search 8 | 9 | 10 | 11 |
12 | 13 |
14 | ) 15 | } 16 | 17 | export default Download -------------------------------------------------------------------------------- /src/redux/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit'; 2 | import { movieCoreApi } from './services/movieDatabase'; 3 | 4 | 5 | export const store = configureStore({ 6 | reducer: { 7 | [movieCoreApi.reducerPath]: movieCoreApi.reducer, 8 | }, 9 | middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(movieCoreApi.middleware), 10 | }); 11 | -------------------------------------------------------------------------------- /src/pages/genres/Genres.jsx: -------------------------------------------------------------------------------- 1 | import GenreCard from "../../components/genre/GenreCard"; 2 | import { genres } from "../../constans"; 3 | 4 | const Genres = () => { 5 | return ( 6 |
7 |
8 | {genres.map((genre, index) => ( 9 | 10 | ))} 11 |
12 |
13 | ); 14 | }; 15 | 16 | export default Genres; 17 | -------------------------------------------------------------------------------- /src/components/explore/ComingSoon.jsx: -------------------------------------------------------------------------------- 1 | import ComingSoonItem from "./ComingSoonItem"; 2 | const ComingSoon = () => { 3 | let data = [ 4 | ]; 5 | 6 | return ( 7 |
8 |
9 | {data?.slice(0, 5)?.map((item, index) => ( 10 | 11 | ))} 12 |
13 |
14 | ); 15 | }; 16 | 17 | export default ComingSoon; 18 | -------------------------------------------------------------------------------- /src/common/icons.js: -------------------------------------------------------------------------------- 1 | export { MdOutlineExplore } from "react-icons/md"; 2 | export { AiOutlineHeart } from "react-icons/ai"; 3 | export { AiFillHeart } from "react-icons/ai"; 4 | export { RiMovie2Fill } from "react-icons/ri"; 5 | export { GiCeremonialMask } from "react-icons/gi"; 6 | export { MdMonitor } from "react-icons/md"; 7 | export { BiCameraMovie } from "react-icons/bi"; 8 | export { BiGift } from "react-icons/bi"; 9 | export { IoNewspaperOutline } from "react-icons/io5"; 10 | export { AiOutlineSchedule } from "react-icons/ai"; 11 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | darkMode: "class", 4 | theme: { 5 | extend: { screens:{ 6 | "se":'375px', 7 | 'y7':"450", 8 | "y9":"540px" 9 | 10 | }, 11 | colors: { 12 | 13 | //MOVIE APP 14 | screenDark: "#0f0f0f", 15 | sideBarDark: "#161616", 16 | prameryColorDark: "#161616", 17 | secondColorDark: "#1d1d1d", 18 | btn: "#1e74f1", 19 | textDark: "#ffffff", 20 | textPDark: "#555561", 21 | screenLight: "#f9f9f9", 22 | sideBarLight: "#f1f1f5", 23 | prameryColorLight: "#ffffff", 24 | textLight: "#121212", 25 | textPlight: "#a7a7ad", 26 | border:"#2f2f3c", 27 | }, 28 | }, 29 | }, 30 | content: ["./src/**/*.{js,jsx,ts,tsx}"], 31 | 32 | plugins: [], 33 | }; 34 | -------------------------------------------------------------------------------- /src/components/genre/GenreCard.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | 3 | const GenreCard = ({ genre }) => { 4 | return ( 5 |
6 | 7 |
8 | 9 |
10 |

11 | {genre.name} 12 |

13 |
14 |
15 | 16 |
17 | ); 18 | }; 19 | 20 | export default GenreCard; 21 | -------------------------------------------------------------------------------- /src/pages/seriesPage/SeriesPage.jsx: -------------------------------------------------------------------------------- 1 | import { useGetTopSeriesQuery } from "../../redux/services/movieDatabase"; 2 | import ItemCard from "../../components/explore/ItemCard"; 3 | import { LoadingOutlined } from "@ant-design/icons"; 4 | const SeriesPage = () => { 5 | const { data, isFetching, error } = useGetTopSeriesQuery(); 6 | if (isFetching) { 7 | return ( 8 |
9 |
10 | 11 |
12 |

Loading . . .

13 |
14 | ); 15 | } 16 | return ( 17 |
18 | Popular Series 19 |
20 |
21 | {data?.slice(0, 8)?.map((movieId, index) => ( 22 | 23 | ))} 24 |
25 |
26 |
27 | ); 28 | }; 29 | 30 | export default SeriesPage; 31 | -------------------------------------------------------------------------------- /src/pages/moviesPage/MoviesPage.jsx: -------------------------------------------------------------------------------- 1 | import { LoadingOutlined } from "@ant-design/icons"; 2 | import { Link } from "react-router-dom"; 3 | import ItemCard from "../../components/explore/ItemCard"; 4 | import { useGetTopMoviesQuery } from "../../redux/services/movieDatabase"; 5 | 6 | const MoviesPage = () => { 7 | const { data, isFetching, error } = useGetTopMoviesQuery(); 8 | if (isFetching) { 9 | return ( 10 |
11 |
12 | 13 |
14 |

Loading . . .

15 |
16 | ); 17 | } 18 | return ( 19 |
20 | Popular Movies 21 |
22 |
23 | {data?.slice(0, 8)?.map((movieId, index) => ( 24 | 25 | ))} 26 |
27 |
28 |
29 | ); 30 | }; 31 | 32 | export default MoviesPage; 33 | -------------------------------------------------------------------------------- /src/pages/Explore.jsx: -------------------------------------------------------------------------------- 1 | import { Spin } from "antd"; 2 | import { GiPopcorn } from "react-icons/gi"; 3 | import ComingSoon from "../components/explore/ComingSoon"; 4 | import TopMovie from "../components/explore/TopMovie"; 5 | import TopSeries from "../components/explore/TopSeries"; 6 | import TrendMovies from "../components/explore/TrendMovies"; 7 | import { useRlt } from "../contextProvider/ContextProvider"; 8 | 9 | const Explore = () => { 10 | const rtl=useRlt() 11 | 12 | return ( 13 |
14 |
15 |
16 | 17 | 18 | 19 |
20 |
21 |
22 |

Upcoming Movies

23 | 24 | 25 | 26 |
27 | 28 |
29 |
30 |
31 | ); 32 | }; 33 | 34 | export default Explore; 35 | -------------------------------------------------------------------------------- /src/pages/genres/MoviesByGenre.jsx: -------------------------------------------------------------------------------- 1 | import { LoadingOutlined } from "@ant-design/icons"; 2 | import { withRouter } from "react-router-dom"; 3 | import ItemCard from "../../components/explore/ItemCard"; 4 | import { useGetTopMoviesByGenreQuery } from "../../redux/services/movieDatabase"; 5 | 6 | const MoviesByGenre = ({ history }) => { 7 | console.log(history.location.state); 8 | const { data, isFetching, error } = useGetTopMoviesByGenreQuery({ 9 | genre: history.location.state?.genre.toLowerCase(), 10 | }); 11 | if (isFetching) { 12 | return ( 13 |
14 |
15 | 16 |
17 |

Loading . . .

18 |
19 | ); 20 | } return ( 21 |
22 |

23 | {history.location.state?.genre} Movies 24 |

25 |
26 |
27 | {data?.slice(0, 8)?.map((movieId, index) => ( 28 | 29 | ))} 30 |
31 |
32 |
33 | ); 34 | }; 35 | 36 | export default withRouter(MoviesByGenre); 37 | -------------------------------------------------------------------------------- /src/styles/styles.js: -------------------------------------------------------------------------------- 1 | export const styles = { 2 | sideBarItem: 3 | "flex pl-7 text-[17px] md:text-[19px] py-4 dark:hover:bg-[#29263b] hover:bg-zinc-300 rounded-r-xl mr-1 cursor-pointer duration-75 hover:border-l-[3px] border-btn ", 4 | sideBar:"min-w-[290px] top-0 left-0 flex flex-col text-[17px] ", 5 | loginBtn:"px-9 text-textDark py-2 self-center btn rounded-xl hover:bg-[#ca2b20] hover:rounded-md duration-200 font-bold text-sm", 6 | loginBtn2:"px-12 self-start text-textDark py-2 btn rounded-xl hover:bg-[#ca2b20] hover:rounded-md duration-200 font-bold text-sm", 7 | searchIcn:"text-[24px] text-textPDark bg-white self-center border-opacity-70 bg-transparent border border-textPDark border-2 border-l-0 rounded-r-2xl h-[45px] md:h-[50px] w-[50px] p-3 ", 8 | searchInput:"w-[150px] sm:w-[185px] md:w-[200px] lg:w-[400px] h-[45px] md:h-[50px] bg-transparent border border-textPDark border-opacity-70 border-2 border-r-0 px-3 rounded-l-2xl placeholder:text-textPDark outline-none", 9 | navbarItem:'font-semibold px-2 mr-5 self-center cursor-pointer hover:text-btn duration-75', 10 | heartBtn:"flex justify-center w-[46px] h-[46px] border-2 dark:border-textDark self-center rounded-[50%] text-blue-600 text-[25px] hover:text-[27px] hover:text-blue-700 duration-200 ", 11 | listenBtn:"w-[131px] h-[56px] bg-blue-700 rounded-[30px] mx-3 font-bold hover:bg-blue-900 duration-200 text-textDark", 12 | 13 | }; 14 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 16 | 17 | 22 | 23 | 24 | 25 | Movie Man 26 | 27 | 28 |
29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /src/components/explore/TrendMovies.jsx: -------------------------------------------------------------------------------- 1 | import { trendingItem } from "../../constans"; 2 | import { ImFire } from "react-icons/im"; 3 | import { Swiper, SwiperSlide } from "swiper/react"; 4 | import "swiper/css"; 5 | import "swiper/css/pagination"; 6 | import "swiper/css/navigation"; 7 | import { Autoplay, Pagination, Navigation } from "swiper"; 8 | import TrendMoviesItem from "./TrendMoviesItem"; 9 | 10 | const TrendMovies = () => { 11 | return ( 12 |
13 |

14 | Trending Movie 15 | 16 | 17 | 18 |

19 | 20 | 38 | {trendingItem.map((item, index) => ( 39 | 40 | 41 | 42 | ))} 43 | 44 |
45 | ); 46 | }; 47 | 48 | export default TrendMovies; 49 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@anatoliygatt/dark-mode-toggle": "^1.0.1", 7 | "@ant-design/icons": "^5.0.1", 8 | "@emotion/react": "^11.10.6", 9 | "@emotion/styled": "^11.10.6", 10 | "@reduxjs/toolkit": "^1.9.3", 11 | "@testing-library/jest-dom": "^5.16.5", 12 | "@testing-library/react": "^13.4.0", 13 | "@testing-library/user-event": "^13.5.0", 14 | "antd": "^5.3.1", 15 | "axios": "^1.3.2", 16 | "dotenv": "^16.0.3", 17 | "firebase": "^9.17.2", 18 | "framer-motion": "^9.0.7", 19 | "i18next": "^22.4.10", 20 | "react": "^18.2.0", 21 | "react-dom": "^18.2.0", 22 | "react-i18next": "^12.1.5", 23 | "react-icons": "^4.7.1", 24 | "react-redux": "^8.0.5", 25 | "react-router-dom": "^5.3.4", 26 | "react-scripts": "5.0.1", 27 | "react-scroll-to-top": "^3.0.0", 28 | "react-slick": "^0.29.0", 29 | "react-toastify": "^9.1.1", 30 | "slick-carousel": "^1.8.1", 31 | "swiper": "^9.1.1", 32 | "web-vitals": "^2.1.4" 33 | }, 34 | "scripts": { 35 | "a": "react-scripts start", 36 | "build": "react-scripts build", 37 | "test": "react-scripts test", 38 | "eject": "react-scripts eject" 39 | }, 40 | "eslintConfig": { 41 | "extends": [ 42 | "react-app", 43 | "react-app/jest" 44 | ] 45 | }, 46 | "browserslist": { 47 | "production": [ 48 | ">0.2%", 49 | "not dead", 50 | "not op_mini all" 51 | ], 52 | "development": [ 53 | "last 1 chrome version", 54 | "last 1 firefox version", 55 | "last 1 safari version" 56 | ] 57 | }, 58 | "devDependencies": { 59 | "tailwindcss": "^3.2.4" 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/redux/services/movieDatabase.js: -------------------------------------------------------------------------------- 1 | import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; 2 | 3 | export const movieCoreApi = createApi({ 4 | reducerPath: "movieCoreApi", 5 | baseQuery: fetchBaseQuery({ 6 | baseUrl: "-----", 7 | prepareHeaders: (headers) => { 8 | headers.set( 9 | "X-RapidAPI-Key", 10 | "------" 11 | ); 12 | 13 | return headers; 14 | }, 15 | }), 16 | endpoints: (builder) => ({ 17 | getTopMovies: builder.query({ 18 | query: () => "get-most-popular-movies", 19 | }), 20 | getTopSeries: builder.query({ 21 | query: () => "get-top-rated-tv-shows", 22 | }), 23 | getTopMoviesByGenre: builder.query({ 24 | query: ({ genre }) => 25 | `get-popular-movies-by-genre?genre=${genre}&limit=10`, 26 | }), 27 | getMovieDetails: builder.query({ 28 | query: ({ movieId }) => 29 | `/get-overview-details?tconst=tt${movieId}`, 30 | }), 31 | getMovieImg: builder.query({ 32 | query: ({ movieId }) => 33 | `/get-images?tconst=tt${movieId}&limit=2`, 34 | }), 35 | getMovieCast: builder.query({ 36 | query: ({ movieId }) => 37 | `/get-full-credits?tconst=${movieId}`, 38 | }), 39 | 40 | getMovieLikeThis: builder.query({ 41 | query: ({ movieId }) => 42 | `get-more-like-this?tconst=${movieId}¤tCountry=US&purchaseCountry=US`, 43 | }), 44 | getMovieComingSoon: builder.query({ 45 | query: () => 46 | `get-coming-soon-movies?currentCountry=US&purchaseCountry=US&homeCountry=US`, 47 | }), 48 | getFindMovie: builder.query({ 49 | query: ({search}) => 50 | `find?q=${search}`, 51 | }), 52 | }), 53 | }); 54 | 55 | export const {useGetFindMovieQuery,useGetMovieCastQuery,useGetMovieComingSoonQuery,useGetMovieLikeThisQuery, useGetMovieImgQuery,useGetTopMoviesQuery, useGetMovieDetailsQuery,useGetTopMoviesByGenreQuery,useGetTopSeriesQuery } = movieCoreApi; 56 | -------------------------------------------------------------------------------- /src/components/navbar/SearchItem.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | import { HiOutlineStar } from "react-icons/hi2"; 3 | import { Link } from "react-router-dom"; 4 | import { useGetMovieDetailsQuery } from "../../redux/services/movieDatabase"; 5 | 6 | const SearchItem = ({result ,search , setSearch }) => { 7 | const itemId = result?.id?.match(/\d+/g)[0] 8 | const {data , fetching , error} = useGetMovieDetailsQuery({movieId:itemId}) 9 | console.log(data?.ratings.rating) 10 | useEffect(()=>{ 11 | 12 | if(data?.title.title) return setSearch(true) 13 | 14 | },[data]) 15 | return ( 16 | 17 |
18 |
19 |
20 | 25 |
26 |

27 | {result?.title} 28 |

29 |

{result?.titleType}

30 |

Year : {result?.year}

31 |
32 |
33 |
34 | 35 | 36 | 37 |

{data?.ratings?.rating}

38 |
39 |
40 |
41 | 42 | ); 43 | } 44 | 45 | export default SearchItem; -------------------------------------------------------------------------------- /src/components/explore/ComingSoonItem.jsx: -------------------------------------------------------------------------------- 1 | import { Spin } from "antd"; 2 | import { Link } from "react-router-dom"; 3 | import { useGetMovieDetailsQuery } from "../../redux/services/movieDatabase"; 4 | 5 | const ComingSoonItem = ({ movieId }) => { 6 | const { data, isFetching, error } = useGetMovieDetailsQuery({ 7 | movieId: movieId, 8 | }); 9 | if (isFetching) { 10 | return ( 11 |
12 |
13 | 14 |
15 |
16 | ); 17 | } 18 | return ( 19 |
20 | 25 |
26 |
27 |
28 |

{data?.title?.title}

29 |
30 | 31 |
32 |
33 | {data?.genres?.slice(0, 1).map((genre, index) => ( 34 | 41 |

42 | {genre} 43 |

44 | 45 | ))} 46 |
47 |
48 |
49 | 50 |
51 | Release Date :{" "} 52 | {data?.releaseDate}{" "} 53 |
54 |
55 |
56 | ); 57 | }; 58 | 59 | export default ComingSoonItem; 60 | -------------------------------------------------------------------------------- /src/components/navbar/Search.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { RiSearch2Line } from "react-icons/ri"; 3 | import { styles } from "../../styles/styles"; 4 | import { HiOutlineStar } from "react-icons/hi2"; 5 | import { useGetFindMovieQuery } from "../../redux/services/movieDatabase"; 6 | import SearchItem from "./SearchItem"; 7 | 8 | const Search = ({ isSearch, setIsSearch }) => { 9 | const [search, setSearch] = useState(""); 10 | 11 | const { data, fetching, error } = useGetFindMovieQuery({ search: search }); 12 | useEffect(() => { 13 | if (search === "") { 14 | return setIsSearch(false); 15 | } 16 | if (search !== "" || search !== " ") { 17 | return setIsSearch(true); 18 | } 19 | }, [search]); 20 | useEffect(() => { 21 | if (isSearch === false) return setSearch(""); 22 | }, [isSearch]); 23 | return ( 24 |
25 |
26 | setSearch(e.target.value)} 28 | className={`${styles.searchInput} `} 29 | type="text" 30 | placeholder="Type to search . . ." 31 | value={search} 32 | /> 33 | setIsSearch(!isSearch)} 35 | className={`${styles.searchIcn}`} 36 | /> 37 |
38 |
44 |
45 | {data?.results?.slice(0, 4).map((result, index) => ( 46 | 52 | ))} 53 |
54 |
55 | ); 56 | }; 57 | 58 | export default Search; 59 | -------------------------------------------------------------------------------- /src/components/explore/TopSeries.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import { trendingItem } from "../../constans"; 3 | import { ImFire } from "react-icons/im"; 4 | import { Swiper, SwiperSlide } from "swiper/react"; 5 | import "swiper/css"; 6 | import "swiper/css/pagination"; 7 | import "swiper/css/navigation"; 8 | import { Autoplay, Pagination, Navigation } from "swiper"; 9 | import ExploreItemCard from "./ExploreItemCard"; 10 | import { 11 | useGetTopSeriesQuery, 12 | } from "../../redux/services/movieDatabase"; 13 | import { LoadingOutlined } from "@ant-design/icons"; 14 | 15 | const TopSeries = () => { 16 | const { data, isFetching, error } = useGetTopSeriesQuery(); 17 | if (isFetching) { 18 | return (''); 19 | } 20 | return ( 21 |
22 |
23 |

Popular Series

24 | 25 |

26 | View All 27 |

28 | 29 |
30 | 50 | {data?.slice(0, 8)?.map((movieId, index) => ( 51 | 52 | 55 | 56 | ))} 57 | 58 |
59 | ); 60 | }; 61 | 62 | export default TopSeries; 63 | -------------------------------------------------------------------------------- /src/components/explore/TopMovie.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import { trendingItem } from "../../constans"; 3 | import { ImFire } from "react-icons/im"; 4 | import { Swiper, SwiperSlide } from "swiper/react"; 5 | import "swiper/css"; 6 | import "swiper/css/pagination"; 7 | import "swiper/css/navigation"; 8 | import { Autoplay, Pagination, Navigation, FreeMode } from "swiper"; 9 | import ExploreItemCard from "./ExploreItemCard"; 10 | import { useGetTopMoviesQuery } from "../../redux/services/movieDatabase"; 11 | import { LoadingOutlined } from "@ant-design/icons"; 12 | 13 | const TopMovie = () => { 14 | const { data, isFetching, error } = useGetTopMoviesQuery(); 15 | if (isFetching) { 16 | return ( 17 |
18 |
19 | 20 |
21 |

Loading . . .

22 |
23 | ); 24 | } 25 | return ( 26 |
27 |
28 |

Popular Movies

29 | 30 |

31 | View All 32 |

33 | 34 |
35 | 36 | 54 | {data?.slice(0, 8)?.map((movieId, index) => ( 55 | 56 | 57 | 58 | ))} 59 | 60 |
61 | ); 62 | }; 63 | 64 | export default TopMovie; 65 | -------------------------------------------------------------------------------- /src/components/Sidebar/SideBarList.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | import { useState } from "react"; 3 | import { Link, withRouter } from "react-router-dom"; 4 | import { styles } from "../../styles/styles"; 5 | 6 | const SideBarList = ({ subTitle, items, history, menu }) => { 7 | const [selected, setSelected] = useState("explore"); 8 | const [hovered, setHovered] = useState(); 9 | const pathname = history.location.pathname.split("/")[1]; 10 | useEffect(() => { 11 | if (pathname === "") return setSelected("explore"); 12 | setSelected(pathname); 13 | }, [pathname]); 14 | return ( 15 |
16 |
19 | 26 | 67 |
68 |
69 | ); 70 | }; 71 | 72 | export default withRouter(SideBarList); 73 | -------------------------------------------------------------------------------- /src/components/Sidebar/SideBar.jsx: -------------------------------------------------------------------------------- 1 | import { sidbarItem } from "../../constans"; 2 | import SideBarList from "./SideBarList"; 3 | import { styles } from "../../styles/styles"; 4 | import { MdMenu, MdMenuOpen } from "react-icons/md"; 5 | import { useEffect, useState } from "react"; 6 | import { DarkModeToggle } from "@anatoliygatt/dark-mode-toggle"; 7 | const SideBar = ({ openMenu, setOpenMenu,mode,setMode }) => { 8 | const [windowSize, setWindowSize] = useState(window.innerWidth); 9 | 10 | useEffect(() => { 11 | const handleWindowResize = () => { 12 | setWindowSize([window.innerWidth, window.innerHeight]); 13 | }; 14 | 15 | window.addEventListener("resize", handleWindowResize); 16 | 17 | return () => { 18 | window.removeEventListener("resize", handleWindowResize); 19 | }; 20 | }); 21 | useEffect(() => { 22 | if (windowSize[0] >= 1024) { 23 | return setOpenMenu(true); 24 | }else { 25 | return setOpenMenu(false); 26 | } 27 | }, [windowSize]); 28 | return ( 29 |
31 |
setOpenMenu(!openMenu)}> 32 | {openMenu && ( 33 | 34 | )} 35 |
36 |
37 | 38 |
39 | { 53 | setMode(mode); 54 | }} 55 | /> 56 |
57 |
58 |
59 | 60 |
61 |
62 | ); 63 | }; 64 | 65 | export default SideBar; 66 | -------------------------------------------------------------------------------- /src/components/navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import { DarkModeToggle } from "@anatoliygatt/dark-mode-toggle"; 2 | import { MdMenu, MdMenuOpen } from "react-icons/md"; 3 | import { styles } from "../../styles/styles"; 4 | import logoImage from "../../assets/logoImage.png"; 5 | import logoImageDark from "../../assets/logoImageDark.png"; 6 | import Search from "./Search"; 7 | const Navbar = ({ 8 | isSearch, 9 | setIsSearch, 10 | mode, 11 | setMode, 12 | openMenu, 13 | setOpenMenu, 14 | }) => { 15 | return ( 16 |
17 |
18 |
setOpenMenu(!openMenu)} 21 | > 22 | {openMenu ? ( 23 | 24 | ) : ( 25 | 26 | )} 27 |
28 |
29 | logoImage 34 |

35 | MOVIE MAN{" "} 36 |

37 |
38 |
39 | 40 |
41 |
42 | { 56 | setMode(mode); 57 | }} 58 | /> 59 |
60 | 61 |
62 |
63 | ); 64 | }; 65 | 66 | export default Navbar; 67 | -------------------------------------------------------------------------------- /src/components/explore/TrendMoviesItem.jsx: -------------------------------------------------------------------------------- 1 | import { Link } from "react-router-dom"; 2 | import { useGetMovieDetailsQuery } from "../../redux/services/movieDatabase"; 3 | 4 | const TrendMoviesItem = ({ item }) => { 5 | const { data, fetching, error } = useGetMovieDetailsQuery({ 6 | movieId: item.id, 7 | }); 8 | return ( 9 | 10 |
11 | 16 |
17 | 22 |
23 |
24 |

{item.title}

25 |
26 | {item.year} | {item.titleType} | {item.time} 27 |
28 |
29 | {item.genres.slice(0,4).map((genre, index) => ( 30 | 37 |

38 | {genre} 39 |

40 | 41 | ))} 42 |
43 |
44 |
45 |
46 | 49 | 52 |
53 |
54 |
55 |
56 |
57 | 58 | ); 59 | }; 60 | 61 | export default TrendMoviesItem; 62 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### Hi every one 2 | 3 | This page is a movie web application that displays all trending or high-rated movies and series in detail and has the ability to search for all movies. 4 | This page is fully responsive and has the ability to change the theme. 5 | React router dam bend is used. 6 | 7 | --- 8 | 9 | ### Languages and Tools: 10 |

11 | javascript 12 | react redux 13 | css3 14 | html5 tailwind 15 | photoshop git 16 | 17 | 18 |
19 |
20 | 21 | 22 | --- 23 | 24 | ### 📌Where to find me 25 | 26 |

27 | 28 | [![Linkedin](https://img.shields.io/badge/LinkedIn-0A66C2?logo=Linkedin&logoColor=white&style=for-the-badge)](https://www.linkedin.com/in/mahdi-asgary) 29 | [![GitHub](https://img.shields.io/badge/GitHub-181717?logo=GitHub&logoColor=white&style=for-the-badge)](https://github.com/mahdiasgary) 30 | [![Gmail](https://img.shields.io/badge/Gmail-EA4335?logo=Gmail&logoColor=white&style=for-the-badge)](mailto:mdi.asgary@gmail.com) 31 | [![Telegram](https://img.shields.io/badge/Telegram-229ED9?logo=Telegram&logoColor=white&style=for-the-badge)](https://t.me/mahdiasgary1) 32 | [![Instagram](https://img.shields.io/badge/Instagram-E4405F?logo=Instagram&logoColor=white&style=for-the-badge)](https://www.instagram.com/mahdi.asgary1) 33 | 34 |
35 | 36 | 37 | --- 38 | 39 | ![](src/assets/1.jpg) 40 | ![](src/assets/2.jpg) 41 | ![](src/assets/3.jpg) 42 | ![](src/assets/4.jpg) 43 | ![](src/assets/5.jpg) 44 | ![](src/assets/6.jpg) 45 | ![](src/assets/7.jpg) 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { BrowserRouter, Route, Switch } from "react-router-dom"; 3 | import ScrollToTop from "react-scroll-to-top"; 4 | import NavBar from "./components/navbar/Navbar"; 5 | import SideBar from "./components/Sidebar/SideBar"; 6 | import Explore from "./pages/Explore"; 7 | import Genres from "./pages/genres/Genres"; 8 | import MoviesByGenre from "./pages/genres/MoviesByGenre"; 9 | import MoviePage from "./pages/moviePage/MoviePage"; 10 | import MoviesPage from "./pages/moviesPage/MoviesPage"; 11 | import SeriesPage from "./pages/seriesPage/SeriesPage"; 12 | import "./styles/globalStyles.css"; 13 | 14 | const App = () => { 15 | const [isSearchItemsShow, setIsSearchItemsShow] = useState(false); 16 | const [mode, setMode] = useState("dark"); 17 | const [openMenu, setOpenMenu] = useState(false); 18 | 19 | useEffect(() => { 20 | if (mode === "light") { 21 | return document.documentElement.classList.remove("dark"); 22 | } else { 23 | document.documentElement.classList.add("dark"); 24 | } 25 | }, [mode]); 26 | return ( 27 | 28 | 29 |
setIsSearchItemsShow(false)} 31 | className={`${ 32 | !isSearchItemsShow && "hidden" 33 | } fixed z-40 w-full h-full bg-black backdrop-blur-sm dark:bg-opacity-60 bg-opacity-25 `} 34 | /> 35 |
setOpenMenu(false)} 37 | className={`${ 38 | !openMenu && "hidden" 39 | } fixed z-[51] w-full h-full bg-black lg:hidden backdrop-blur-sm dark:bg-opacity-70 bg-opacity-25 `} 40 | /> 41 |
45 | 53 |
54 | 60 |
61 | 62 | } /> 63 | } 67 | /> 68 | } 72 | /> 73 | } /> 74 | } /> 75 | } /> 76 | 77 |
78 |
79 |
80 | 81 | ); 82 | }; 83 | 84 | export default App; 85 | -------------------------------------------------------------------------------- /src/components/explore/ItemCard.jsx: -------------------------------------------------------------------------------- 1 | import { useGetMovieDetailsQuery } from "../../redux/services/movieDatabase"; 2 | import a from "../../assets/luther-the-fallen-sun-2023-sm.webp"; 3 | import { useState } from "react"; 4 | import { FaStar } from "react-icons/fa"; 5 | import { Link } from "react-router-dom"; 6 | import { Spin } from "antd"; 7 | const ItemCard = ({ movieId }) => { 8 | console.log(movieId); 9 | const { data, isFetching, error } = useGetMovieDetailsQuery({ 10 | movieId: movieId, 11 | }); 12 | if (isFetching) { 13 | return ( 14 |
15 |
16 | 17 |
18 |
19 | ); 20 | } 21 | return ( 22 | 23 |
24 |
25 | 30 |
31 |
32 |
33 |

34 | Year : {data?.title.year} 35 |

36 |

37 | {data?.title.runningTimeInMinutes || "--"} minutes 38 |

39 | 40 |
41 | {data?.genres.slice(0, 3).map((genre, index) => ( 42 | 49 |

50 | {genre} 51 |

52 | 53 | ))} 54 |
55 |
56 |
57 | 60 |
61 |
62 |
63 |
64 |
65 |

{data?.title.title}

66 |
67 |
68 | 69 |

{data?.ratings.rating}

70 |
71 |
72 | 73 | ); 74 | }; 75 | 76 | export default ItemCard; 77 | -------------------------------------------------------------------------------- /src/components/explore/ExploreItemCard.jsx: -------------------------------------------------------------------------------- 1 | import { Spin } from "antd"; 2 | import { Link } from "react-router-dom"; 3 | import a from "../../assets/8.gif"; 4 | import { useGetMovieDetailsQuery } from "../../redux/services/movieDatabase"; 5 | const ExploreItemCard = ({ movieId }) => { 6 | const { data, isFetching, error } = useGetMovieDetailsQuery({ 7 | movieId: movieId, 8 | }); 9 | if (isFetching) { 10 | return ( 11 |
12 |
13 | 14 |
15 |
16 | ); 17 | } 18 | if (error) { 19 | return ( 20 |
21 |
22 | 23 |
24 |
25 | ); 26 | } 27 | return ( 28 | 29 |
30 |
31 | 36 |
37 |
38 |
39 |

40 | {data?.title.title} 41 |

42 |
43 | 48 | 49 | {data?.ratings.rating}{" "} 50 | 51 |
52 | 53 |
54 | {data?.genres.slice(0, 2).map((genre, index) => ( 55 | 62 |

63 | {genre} 64 |

65 | 66 | ))} 67 |
68 |
69 |
70 | 73 |
74 |
75 |
76 |
77 |
78 | 79 | ); 80 | }; 81 | 82 | export default ExploreItemCard; 83 | -------------------------------------------------------------------------------- /src/pages/moviePage/MoviePage2.jsx: -------------------------------------------------------------------------------- 1 | import { Link, withRouter } from "react-router-dom"; 2 | import { BsPlay } from "react-icons/bs"; 3 | import { useGetMovieImgQuery } from "../../redux/services/movieDatabase"; 4 | import { Spin } from "antd"; 5 | const MoviePage = ({ history }) => { 6 | const movieData = history.location.state?.data; 7 | const { data, fetching, error } = useGetMovieImgQuery({ 8 | movieId: movieData?.id.match(/\d+/g)[0], 9 | }); 10 | return ( 11 |
12 | 13 |
14 |
15 | 20 |
21 |
22 |
23 |
24 | {movieData?.title.image.url} 29 |
30 | 33 |

View Trailar

34 |
35 |
36 |
37 |
38 | {movieData?.title.title} 39 |
40 |

41 | {movieData?.title.titleType} 42 |

43 |
44 | {movieData?.genres.slice(0, 5).map((genre, index) => ( 45 | 52 |

53 | {genre} 54 |

55 | 56 | ))} 57 |
58 |
59 | 64 | 65 | {movieData?.ratings.rating} 66 | 67 | ( {movieData?.ratings.ratingCount} votes ) 68 | 69 | 70 |
71 |
72 |

73 | Year : 74 | {movieData?.title.year} 75 |

76 |
77 | Time : 78 | {movieData?.title.runningTimeInMinutes || "--"} minutes 79 |
80 |
81 | 82 | 83 | Country : 84 | 85 | {movieData?.certificates.US[0].country} 86 |
87 |
88 | 89 | 90 | Author : 91 | 92 | {movieData?.plotSummary?.author} 93 |
94 |
95 | 96 | 97 | summery : 98 | 99 | {movieData?.plotOutline.text} 100 |
101 |
102 |
103 |
104 | {/*
cast
105 |
j
106 |
relate
*/} 107 |
108 |
109 | ); 110 | }; 111 | 112 | export default withRouter(MoviePage); 113 | -------------------------------------------------------------------------------- /src/constans/index.js: -------------------------------------------------------------------------------- 1 | import avatar from '../assets/avatar.png' 2 | 3 | import { 4 | AiOutlineHeart, 5 | MdOutlineExplore, 6 | BiGift, 7 | IoNewspaperOutline, 8 | GiCeremonialMask, 9 | MdMonitor, 10 | BiCameraMovie, 11 | AiOutlineSchedule, 12 | } from "../common/icons"; 13 | 14 | export const sidbarItem = [ 15 | { title: "Explore", icon: }, 16 | { title: "Movies", icon: }, 17 | { title: "Series", icon: }, 18 | { title: "Anime", icon: }, 19 | { title: "Genres", icon: }, 20 | { title: "Favourites", icon: }, 21 | // { title: "News", icon: }, 22 | // { title: "Coming Soon", icon: }, 23 | ]; 24 | 25 | export const genres = [ 26 | { name: "Action", imgUrl: "https://mobomoviez.fun/images/genres/action.jpg" }, 27 | { 28 | name: "Adventure", 29 | imgUrl: "https://mobomoviez.fun/images/genres/adventure.jpg", 30 | }, 31 | { 32 | name: "Animation", 33 | imgUrl: "https://mobomoviez.fun/images/genres/animation.jpg", 34 | }, 35 | { name: "Comedy", imgUrl: "https://mobomoviez.fun/images/genres/comedy.jpg" }, 36 | { 37 | name: "Mystery", 38 | imgUrl: "https://mobomoviez.fun/images/genre/mystery.jpg", 39 | }, 40 | { name: "Sport", imgUrl: "https://mobomoviez.fun/images/genres/sport.jpg" }, 41 | { name: "Horror", imgUrl: "https://mobomoviez.fun/images/genres/horror.jpg" }, 42 | { 43 | name: "Documentary", 44 | imgUrl: "https://mobomoviez.fun/images/genres/documentary.jpg", 45 | }, 46 | { name: "War", imgUrl: "https://mobomoviez.fun/images/genres/war.jpg" }, 47 | { name: "Drama", imgUrl: "https://mobomoviez.fun/images/genres/drama.jpg" }, 48 | { name: "Family", imgUrl: "https://mobomoviez.fun/images/genres/family.jpg" }, 49 | { 50 | name: "Fantasy", 51 | imgUrl: "https://mobomoviez.fun/images/genres/fantasy.jpg", 52 | }, 53 | { 54 | name: "History", 55 | imgUrl: "https://mobomoviez.fun/images/genres/history.jpg", 56 | }, 57 | { name: "Crime", imgUrl: "https://mobomoviez.fun/images/genres/crime.jpg" }, 58 | { name: "Music", imgUrl: "https://mobomoviez.fun/images/genres/music.jpg" }, 59 | { 60 | name: "Musical", 61 | imgUrl: "https://mobomoviez.fun/images/genres/musical.jpg", 62 | }, 63 | { 64 | name: "Biography", 65 | imgUrl: "https://mobomoviez.fun/images/genres/biography.jpg", 66 | }, 67 | { 68 | name: "Western", 69 | imgUrl: "https://mobomoviez.fun/images/genres/western.jpg", 70 | }, 71 | { name: "Sci-fi", imgUrl: "https://mobomoviez.fun/images/genres/sci-fi.jpg" }, 72 | ]; 73 | export const trendingItem = [ 74 | {id:1630029, 75 | title: "Avatar: The Way of Water", 76 | titleType: "movie", 77 | year: 2022, 78 | genres: ["Action","Adventure", "Fantasy", "Sci-Fi"], 79 | rating:7.8, 80 | time:'3h 12m', 81 | imgUrl:"https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSmGggtpJ4TX3aN3PUaVWUgNODHespRPvKYAyhGUAZSqSOmPiEm", 82 | imgBachGrand:avatar 83 | }, { 84 | id:13833688, 85 | title: "The Whale ", 86 | titleType: "movie", 87 | year: 2022, 88 | genres: ["Drama"], 89 | rating:8.0, 90 | time:'1h 57m', 91 | imgUrl:"https://filmkio.run/wp-content/uploads/2023/01/MV5BZDQ4Njg4YTctNGZkYi00NWU1LWI4OTYtNmNjOWMyMjI1NWYzXkEyXkFqcGdeQXVyMTA3MDk2NDg2._V1_SX500.jpg", 92 | imgBachGrand:'https://filmkio.run/wp-content/uploads/2023/02/the-whale-wallpaper.jpg' 93 | }, 94 | 95 | {id:9764362, 96 | title: "The Menu", 97 | titleType: "movie", 98 | year: 2022, 99 | genres: ["Comedy","Horror"], 100 | rating:7.2, 101 | time:'1h 47m', 102 | imgUrl:"https://filmkio.run/wp-content/uploads/2022/10/MV5BMzdjNjI5MmYtODhiNS00NTcyLWEzZmUtYzVmODM5YzExNDE3XkEyXkFqcGdeQXVyMTAyMjQ3NzQ1._V1_SX500.jpg", 103 | imgBachGrand:'https://filmkio.run/wp-content/uploads/2022/10/the-menu-poster.jpg' 104 | }, { 105 | id:10954600, 106 | title: "Ant-Man and the Wasp", 107 | titleType: "movie", 108 | year: 2023, 109 | genres: ["Action","Adventure", "Fantasy", "Sci-Fi"], 110 | rating:7.8, 111 | time:'2h 4m', 112 | imgUrl:"https://mobomoviez.fun/images/movie/2023/tt10954600/thumbnail/ant-man-and-the-wasp-quantumania-2023.jpg", 113 | imgBachGrand:'https://mobomoviez.fun/images/movie/2023/tt10954600/cover/ant-man-and-the-wasp-quantumania-2023-cover.jpg' 114 | }, { 115 | id:8111088, 116 | title: "The Mandalorian", 117 | titleType: "movie", 118 | year: 2019, 119 | genres: ["Action","Adventure", "Fantasy", "Sci-Fi"], 120 | rating:8.7, 121 | time:'2h 36m', 122 | imgUrl:"https://filmkio.run/wp-content/uploads/2022/01/the-mandalorian-poster-210x310.jpg", 123 | imgBachGrand:'https://filmkio.run/wp-content/uploads/2022/01/the-mandalorian-wallpaper.jpg' 124 | }, 125 | 126 | ]; 127 | -------------------------------------------------------------------------------- /src/styles/globalStyles.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face{ 3 | font-family:"helvetica"; 4 | src:url("https://candyfonts.com/wp-data/2018/10/26/11538/HELR45W.ttf") format("woff"), 5 | url("https://candyfonts.com/wp-data/2018/10/26/11538/HELR45W.ttf") format("opentype"), 6 | url("https://candyfonts.com/wp-data/2018/10/26/11538/HELR45W.ttf") format("truetype"); 7 | } 8 | 9 | * { 10 | margin: 0; 11 | padding: 0; 12 | box-sizing: border-box; 13 | scroll-behavior: smooth; 14 | font-family: "Eudoxus Sans"; 15 | } 16 | 17 | 18 | .IranNastaliq { 19 | font-family: 'IranNastaliq'; 20 | } 21 | 22 | .fa { 23 | font-family: 'Vazirmatn'; 24 | } 25 | 26 | .en { 27 | font-family: "Eudoxus Sans", sans-serif; 28 | 29 | } 30 | 31 | .gradient-02 { 32 | position: absolute; 33 | width: 200px; 34 | height: 438px; 35 | top: 0px; 36 | right: 0px; 37 | 38 | background: #7aebfb; 39 | filter: blur(190px); 40 | } 41 | 42 | .glassmorphism { 43 | background: rgba(255, 255, 255, 0.25); 44 | box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 45 | backdrop-filter: blur(4px); 46 | -webkit-backdrop-filter: blur(4px); 47 | border: 1px solid rgba(255, 255, 255, 0.18); 48 | } 49 | 50 | .gradient-03 { 51 | /* position: absolute; */ 52 | width: 404px; 53 | height: 800px; 54 | left: 20%; 55 | top: 5%; 56 | 57 | background: rgba(149, 66, 232, 0.35); 58 | filter: blur(175px); 59 | transform: rotate(-114.2deg); 60 | } 61 | 62 | .gradient-04 { 63 | position: absolute; 64 | width: 304px; 65 | height: 100vh; 66 | left: 30%; 67 | top: 10%; 68 | 69 | background: rgba(45, 72, 152, 0.75); 70 | filter: blur(200px); 71 | transform: rotate(-53.13deg); 72 | } 73 | 74 | .gradient-05 { 75 | background: linear-gradient(180deg, 76 | rgba(255, 255, 255, 0.04) 0%, 77 | rgba(255, 255, 255, 0) 100%); 78 | } 79 | .lightTheme{ 80 | background-color: #f9f9f9; 81 | } 82 | 83 | .gradient-06 84 | 85 | { 86 | 87 | /* ff 3.6+ */ 88 | background:-moz-linear-gradient(90deg, rgba(6, 6, 9, 1) 0%, rgba(30, 31, 45, 1) 71%, rgba(35, 28, 44, 1) 100%); 89 | 90 | /* safari 5.1+,chrome 10+ */ 91 | background:-webkit-linear-gradient(90deg, rgba(6, 6, 9, 1) 0%, rgba(30, 31, 45, 1) 71%, rgba(35, 28, 44, 1) 100%); 92 | 93 | /* opera 11.10+ */ 94 | background:-o-linear-gradient(90deg, rgba(6, 6, 9, 1) 0%, rgba(30, 31, 45, 1) 71%, rgba(35, 28, 44, 1) 100%); 95 | 96 | /* ie 6-9 */ 97 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#231C2C', endColorstr='#060609', GradientType=0 ); 98 | 99 | /* ie 10+ */ 100 | background:-ms-linear-gradient(90deg, rgba(6, 6, 9, 1) 0%, rgba(30, 31, 45, 1) 71%, rgba(35, 28, 44, 1) 100%); 101 | 102 | /* global 94%+ browsers support */ 103 | background:linear-gradient(90deg, rgba(6, 6, 9, 1) 0%, rgba(30, 31, 45, 1) 71%, rgba(35, 28, 44, 1) 100%); 104 | 105 | } 106 | 107 | .btn { 108 | 109 | /* ff 3.6+ */ 110 | background: -moz-linear-gradient(161deg, rgba(38, 147, 250, 1) 0%, rgba(24, 94, 235, 1) 100%); 111 | 112 | /* safari 5.1+,chrome 10+ */ 113 | background: -webkit-linear-gradient(161deg, rgba(38, 147, 250, 1) 0%, rgba(24, 94, 235, 1) 100%); 114 | 115 | /* opera 11.10+ */ 116 | background: -o-linear-gradient(161deg, rgba(38, 147, 250, 1) 0%, rgba(24, 94, 235, 1) 100%); 117 | 118 | /* ie 6-9 */ 119 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#185EEB', endColorstr='#2693FA', GradientType=1); 120 | 121 | /* ie 10+ */ 122 | background: -ms-linear-gradient(161deg, rgba(38, 147, 250, 1) 0%, rgba(24, 94, 235, 1) 100%); 123 | 124 | /* global 94%+ browsers support */ 125 | background: linear-gradient(161deg, rgba(38, 147, 250, 1) 0%, rgba(24, 94, 235, 1) 100%); 126 | 127 | } 128 | 129 | .gradient-07 { 130 | 131 | /* ff 3.6+ */ 132 | background: -moz-linear-gradient(90deg, rgba(43, 42, 62, 1) 0%, rgba(38, 36, 58, 1) 100%); 133 | 134 | /* safari 5.1+,chrome 10+ */ 135 | background: -webkit-linear-gradient(90deg, rgba(43, 42, 62, 1) 0%, rgba(38, 36, 58, 1) 100%); 136 | 137 | /* opera 11.10+ */ 138 | background: -o-linear-gradient(90deg, rgba(43, 42, 62, 1) 0%, rgba(38, 36, 58, 1) 100%); 139 | 140 | /* ie 6-9 */ 141 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#26243A', endColorstr='#2B2A3E', GradientType=0); 142 | 143 | /* ie 10+ */ 144 | background: -ms-linear-gradient(90deg, rgba(43, 42, 62, 1) 0%, rgba(38, 36, 58, 1) 100%); 145 | 146 | /* global 94%+ browsers support */ 147 | background: linear-gradient(90deg, rgba(43, 42, 62, 1) 0%, rgba(38, 36, 58, 1) 100%); 148 | 149 | } 150 | 151 | .gradient-08 { 152 | 153 | /* ff 3.6+ */ 154 | background: -moz-linear-gradient(0deg, rgba(32, 29, 43, 1) 5%, rgba(238, 130, 130, 0.01) 100%); 155 | 156 | /* safari 5.1+,chrome 10+ */ 157 | background: -webkit-linear-gradient(0deg, rgba(32, 29, 43, 1) 5%, rgba(238, 130, 130, 0.01) 100%); 158 | 159 | /* opera 11.10+ */ 160 | background: -o-linear-gradient(0deg, rgba(32, 29, 43, 1) 5%, rgba(238, 130, 130, 0.01) 100%); 161 | 162 | /* ie 6-9 */ 163 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#201D2B', endColorstr='#EE8282', GradientType=1); 164 | 165 | /* ie 10+ */ 166 | background: -ms-linear-gradient(0deg, rgba(32, 29, 43, 1) 5%, rgba(238, 130, 130, 0.01) 100%); 167 | 168 | /* global 94%+ browsers support */ 169 | background: linear-gradient(0deg, rgba(32, 29, 43, 1) 5%, rgba(238, 130, 130, 0.01) 100%); 170 | 171 | } -------------------------------------------------------------------------------- /src/pages/moviePage/MoviePage.jsx: -------------------------------------------------------------------------------- 1 | import { Link, withRouter } from "react-router-dom"; 2 | import { BsPlay } from "react-icons/bs"; 3 | import { useGetMovieImgQuery } from "../../redux/services/movieDatabase"; 4 | import { Spin } from "antd"; 5 | import { useState } from "react"; 6 | import { useEffect } from "react"; 7 | import { RxDotFilled } from "react-icons/rx"; 8 | import { BiLike, BiDislike } from "react-icons/bi"; 9 | import { 10 | AiFillHeart, 11 | AiOutlineHeart, 12 | AiFillLike, 13 | AiFillDislike, 14 | } from "react-icons/ai"; 15 | import MoviePageDtailes from "./MoviePageDtailes"; 16 | import Trailer from "./Trailer"; 17 | import Comments from "./Comments"; 18 | import Download from "./Download"; 19 | import Details from "./Details"; 20 | 21 | const poi = ['Details' , 'Downlaod' ,'Trailer', 'Comments' ] 22 | const MoviePage = ({ history }) => { 23 | const [query, setQuery] = useState('Details') 24 | const movieData = history.location.state?.data; 25 | const { data, fetching, error } = useGetMovieImgQuery({ 26 | movieId: movieData?.id.match(/\d+/g)[0], 27 | }); 28 | const [windowSize, setWindowSize] = useState(window.innerWidth - 290 + "px"); 29 | const [likedd, setlikedd] = useState(false); 30 | useEffect(() => { 31 | const handleWindowResize = () => { 32 | setWindowSize(window.innerWidth - 290 + "px"); 33 | console.log(windowSize); 34 | }; 35 | 36 | window.addEventListener("resize", handleWindowResize); 37 | 38 | return () => { 39 | window.removeEventListener("resize", handleWindowResize); 40 | }; 41 | }); 42 | useEffect(() => { 43 | const handleWindowResize = () => { 44 | setWindowSize(window.innerWidth - 290 + "px"); 45 | console.log(windowSize); 46 | }; 47 | 48 | window.addEventListener("resize", handleWindowResize); 49 | 50 | return () => { 51 | window.removeEventListener("resize", handleWindowResize); 52 | }; 53 | }, []); 54 | const genres = ["sfsfgg", "srs", "oduw", "wjnkkkkd"]; 55 | return ( 56 |
57 | {/*
*/} 58 |
59 |
60 |
61 |
62 |
63 |
64 | {movieData?.title.image.url} 71 |
72 | 75 |

View Trailar

76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |

84 | Last Of Us SRBtr 85 |

86 |
87 |

2023

88 | 89 |

movie

90 | 91 |

60 min

92 |
93 |
94 |
95 |
96 |

97 | 8.9 98 |

99 | /10 100 |
101 |

338k votes

102 |
103 |
104 | {likedd ? ( 105 | 106 | ) : ( 107 | 108 | )} 109 |
110 |
111 | {likedd ? ( 112 | 113 | ) : ( 114 | 115 | )} 116 |
117 |
setlikedd(!likedd)} 120 | > 121 | {likedd ? ( 122 | 123 | ) : ( 124 | 125 | )} 126 |
127 |
128 |
129 | {genres.slice(0, 5).map((genre, index) => ( 130 | 137 |

138 | {genre} 139 |

140 | 141 | ))} 142 |
143 |

144 | Cast : 145 |

146 | 147 | Bryan Cranston , Aaron Paul , Anna Gunn 148 |

149 |

150 |

151 | Country : 152 |

153 | 154 | U.S.A , France 155 |

156 |

157 |

158 | Language : 159 |

160 | English 161 |

162 |

163 |
164 |
165 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. 166 | Fuga, ab! A, ratione quia eaque blanditiis esse adipisci 167 | eveniet nisi ad facilis aut. Reprehenderit maiores 168 | dignissimos a nesciunt harum iste temporibus! 169 |
170 |
171 |
172 | 173 |
174 |
175 |
176 |
177 | {likedd ? ( 178 | 179 | ) : ( 180 | 181 | )} 182 |
183 |
184 | {likedd ? ( 185 | 186 | ) : ( 187 | 188 | )} 189 |
190 |
setlikedd(!likedd)} 194 | > 195 | {likedd ? ( 196 | 197 | ) : ( 198 | 199 | )} 200 |
201 |
202 |
203 |
204 |
205 |

206 | 8.9 207 |

208 | /10 209 |
210 |

211 | 212 | 338k votes 213 |

214 |
215 |
216 |
217 | 218 |
219 | 222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 |
    232 | {poi.map((item , index)=>( 233 | 234 |
  • setQuery(item)}>{item}
    • 237 | 238 | 239 | ))} 240 |
241 |
242 | {query==='Details' &&
} 243 | {query==='Download' && } 244 | {query==='Comments' && } 245 | {query==='Trailer' && } 246 | 247 |
248 | 249 | 250 |
251 |
252 | 253 |
254 |
255 |
256 |
257 | 264 |
265 |
266 |
267 |
268 | {/* */} 269 |
270 |
271 |
272 | ); 273 | }; 274 | 275 | export default withRouter(MoviePage); 276 | --------------------------------------------------------------------------------