Feat: updated:

README.md

@@ -13,6 +13,7 @@ Developed a web app for movies and TV shows using React JS and Material UI. The
 - Material UI and Icons
 - Axios
 - React Router DOM
+- React-alice-carousel
 
 
 ### 🌐 Deployed Status

package.json

@@ -12,6 +12,7 @@
  "@testing-library/user-event": "^13.5.0",
  "axios": "^1.3.2",
  "react": "^18.2.0",
+ "react-alice-carousel": "^2.7.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.8.1",
  "react-scripts": "5.0.1",

src/App.css

@@ -27,7 +27,6 @@
 
 @media (max-width: 1000px) {
  .pageTitle {
- padding-top: 10px;
  font-size: 4vw;
  }
 }

src/Hooks/useGenre.js

@@ -0,0 +1,9 @@
+
+const useGenre = (selectedGenres) => {
+ if(selectedGenres.length < 1) return ''
+
+ const GenreIds = selectedGenres.map((g) => g.id)
+ return GenreIds.reduce((acc, curr) => acc + ',' + curr)
+}
+
+export default useGenre

src/components/ContentModal/ContentModal.css

@@ -0,0 +1,91 @@
+
+.ContentModal__landscape {
+ object-fit: contain;
+ border-radius: 10px;
+ }
+
+.ContentModal__portrait {
+ object-fit: contain;
+ display: none;
+ border-radius: 10px;
+}
+
+.tagline {
+ padding-bottom: 10px;
+ align-self: center;
+ }
+
+
+ .ContentModal {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ height: 100%;
+ width: 100%;
+ overflow-y: scroll;
+ scrollbar-width: none;
+ }
+
+ .ContentModal::-webkit-scrollbar {
+ display: none;
+ }
+
+ .ContentModal__about {
+ padding: 10px;
+ width: 95%;
+ height: 90%;
+ display: flex;
+ flex-direction: column;
+ font-family: "Roboto", sans-serif;
+ justify-content: space-evenly;
+ font-weight: 300;
+ }
+
+ .ContentModal__title {
+ height: 12%;
+ font-size: 5vw;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .ContentModal__description {
+ display: flex;
+ height: 40%;
+ overflow-y: scroll;
+ padding: 15px;
+ border-radius: 8px;
+ scrollbar-width: thin; /* Firefox */
+ box-shadow: inset 0 0 2px #000000;
+ text-align: justify;
+ }
+
+ .ContentModal__description::-webkit-scrollbar {
+ display: none;
+ }
+
+ @media (min-width: 835px) {
+ .ContentModal__landscape {
+ display: none;
+ }
+ .ContentModal__portrait {
+ display: flex;
+ width: 38%;
+ }
+ .ContentModal {
+ flex-direction: row;
+ justify-content: space-around;
+ padding: 10px 0;
+ }
+ .ContentModal__about {
+ width: 58%;
+ padding: 0;
+ height: 100%;
+ }
+ .ContentModal__title {
+ font-size: 3.5vw;
+ }
+ .ContentModal__description {
+ font-size: 22px;
+ }
+ }

src/components/ContentModal/ContentModal.js

@@ -0,0 +1,144 @@
+import * as React from "react";
+import Backdrop from "@mui/material/Backdrop";
+import Box from "@mui/material/Box";
+import Modal from "@mui/material/Modal";
+import Fade from "@mui/material/Fade";
+import Button from "@mui/material/Button";
+import { useState } from "react";
+import axios from "axios";
+import { useEffect } from "react";
+import {
+ img_500,
+ unavailable,
+ unavailableLandscape,
+} from "../../config/Config";
+import YouTubeIcon from "@mui/icons-material/YouTube";
+import './ContentModal.css'
+
+const style = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ transform: "translate(-50%, -50%)",
+ width: "80%",
+ bgcolor: "background.paper",
+ border: "2px solid #000",
+ boxShadow: 24,
+ p: 4,
+};
+
+export default function ContentModal({ children, media_type, id }) {
+ const [open, setOpen] = useState(false);
+ const [content, setContent] = useState();
+ const [video, setVideo] = useState();
+ const handleOpen = () => setOpen(true);
+ const handleClose = () => setOpen(false);
+
+ const fetchData = async () => {
+ const { data } = await axios.get(
+ `https://api.themoviedb.org/3/${media_type}/${id}?api_key=${process.env.REACT_APP_API_KEY}&language=en-US`
+ );
+
+ setContent(data);
+ // console.log(data);
+ };
+
+ const fetchVideo = async () => {
+ const { data } = await axios.get(
+ `https://api.themoviedb.org/3/${media_type}/${id}/videos?api_key=${process.env.REACT_APP_API_KEY}&language=en-US`
+ );
+
+ setVideo(data.results[0]?.key);
+ };
+
+ useEffect(() => {
+ fetchData();
+ fetchVideo();
+ // eslint-disable-next-line
+ }, []);
+
+ return (
+ <>
+ <div
+ className="media"
+ style={{ cursor: "pointer" }}
+ color="inherit"
+ onClick={handleOpen}
+ >
+ {children}
+ </div>
+ <Modal
+ aria-labelledby="transition-modal-title"
+ aria-describedby="transition-modal-description"
+ open={open}
+ onClose={handleClose}
+ closeAfterTransition
+ slots={Backdrop}
+ slotProps={{
+ timeout: 500,
+ }}
+ >
+ <Fade in={open}>
+ <Box sx={style}>
+ {content && (
+ <div>
+ <div className="ContentModal">
+ <img
+ src={
+ content.poster_path
+ ? `${img_500}/${content.poster_path}`
+ : unavailable
+ }
+ alt={content.name || content.title}
+ className="ContentModal__portrait"
+ />
+ <img
+ src={
+ content.backdrop_path
+ ? `${img_500}/${content.backdrop_path}`
+ : unavailableLandscape
+ }
+ alt={content.name || content.title}
+ className="ContentModal__landscape"
+ />
+ <div className="ContentModal__about">
+ <span className="ContentModal__title">
+ {content.name || content.title} (
+ {(
+ content.first_air_date ||
+ content.release_date ||
+ "-----"
+ ).substring(0, 4)}
+ )
+ </span>
+ {content.tagline && (
+ <i className="tagline">{content.tagline}</i>
+ )}
+
+ <span className="ContentModal__description">
+ {content.overview}
+ </span>
+
+ <div>
+ {/* <Carousel id={id} media_type={media_type} /> */}
+ </div>
+
+ <Button
+ variant="contained"
+ startIcon={<YouTubeIcon />}
+ color="secondary"
+ target="__blank"
+ href={`https://www.youtube.com/watch?v=${video}`}
+ >
+ Watch the Trailer
+ </Button>
+ </div>
+ </div>
+ </div>
+ )}
+ </Box>
+ </Fade>
+ </Modal>
+ </>
+ );
+}

src/components/Genres.js

@@ -34,9 +34,9 @@ const Genres = ({
  useEffect(() => {
  fetchGenres();
 
- //  return () => {
- //  setGenres({}); // unmounting
- //  };
+  // return () => {
+  // setGenres({}); // unmounting
+  // };
  // eslint-disable-next-line
  }, []);
 

src/components/SingleContent/SingleContent.js

@@ -1,16 +1,18 @@
 import { Badge } from "@mui/material";
 import { img_300, unavailable } from "../../config/Config";
+import ContentModal from "../ContentModal/ContentModal";
 import "./SingleContent.css";
 
 const SingleContent = ({
+ id,
  poster,
  title,
  date,
  media_type,
  vote_average,
 }) => {
  return (
- <div className="media">
+ <ContentModal media_type={media_type} id={id}>
  <Badge
  badgeContent={vote_average.toFixed(1)}
  color={vote_average > 6 ? "primary" : "secondary"}
@@ -25,7 +27,7 @@ const SingleContent = ({
  {media_type === "tv" ? "TV Series" : "Movies"}
  <span className="subTitile">{date}</span>
  </span>
- </div>
+ </ContentModal>
  );
 };
 

src/index.css

@@ -1,4 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Anton&family=Crimson+Text:wght@400;700&display=swap');
+@import "react-alice-carousel/lib/alice-carousel.css";
+
 body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',