Skip to content

Commit 81b21a3

Browse files
piyush-eonpiyush-eon
committed
Modal Completed
1 parent 4e495b9 commit 81b21a3

File tree

11 files changed

+245
-16
lines changed

11 files changed

+245
-16
lines changed

‎.eslintcache

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
[{"E:\\Coding\\React\\movie-series-app\\src\\index.js":"1","E:\\Coding\\React\\movie-series-app\\src\\App.js":"2","E:\\Coding\\React\\movie-series-app\\src\\components\\MainNav.js":"3","E:\\Coding\\React\\movie-series-app\\src\\components\\Header\\Header.js":"4","E:\\Coding\\React\\movie-series-app\\src\\Pages\\Movies\\Movies.js":"5","E:\\Coding\\React\\movie-series-app\\src\\Pages\\Trending\\Trending.js":"6","E:\\Coding\\React\\movie-series-app\\src\\Pages\\Series\\Series.js":"7","E:\\Coding\\React\\movie-series-app\\src\\Pages\\Search\\Search.js":"8","E:\\Coding\\React\\movie-series-app\\src\\components\\SingleContent\\SingleContent.js":"9","E:\\Coding\\React\\movie-series-app\\src\\components\\Genres\\Genres.js":"10","E:\\Coding\\React\\movie-series-app\\src\\config\\config.js":"11","E:\\Coding\\React\\movie-series-app\\src\\hooks\\useGenre.js":"12","E:\\Coding\\React\\movie-series-app\\src\\components\\Pagination\\CustomPagination.js":"13","E:\\Coding\\React\\movie-series-app\\src\\components\\ContentModal\\ContentModal.js":"14"},{"size":219,"mtime":1611577989723,"results":"15","hashOfConfig":"16"},{"size":917,"mtime":1611472102675,"results":"17","hashOfConfig":"16"},{"size":1887,"mtime":1611476354015,"results":"18","hashOfConfig":"16"},{"size":255,"mtime":1611478038208,"results":"19","hashOfConfig":"16"},{"size":2024,"mtime":1611580349308,"results":"20","hashOfConfig":"16"},{"size":1332,"mtime":1611580338628,"results":"21","hashOfConfig":"16"},{"size":1991,"mtime":1611580352677,"results":"22","hashOfConfig":"16"},{"size":83,"mtime":1611146914723,"results":"23","hashOfConfig":"16"},{"size":805,"mtime":1611580379212,"results":"24","hashOfConfig":"16"},{"size":1617,"mtime":1611501751754,"results":"25","hashOfConfig":"16"},{"size":116,"mtime":1611468447160,"results":"26","hashOfConfig":"16"},{"size":232,"mtime":1611569176034,"results":"27","hashOfConfig":"16"},{"size":863,"mtime":1611510017516,"results":"28","hashOfConfig":"16"},{"size":2236,"mtime":1611581359034,"results":"29","hashOfConfig":"16"},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"43nqr1",{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"38","messages":"39","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"E:\\Coding\\React\\movie-series-app\\src\\index.js",[],"E:\\Coding\\React\\movie-series-app\\src\\App.js",[],"E:\\Coding\\React\\movie-series-app\\src\\components\\MainNav.js",[],"E:\\Coding\\React\\movie-series-app\\src\\components\\Header\\Header.js",["58"],"E:\\Coding\\React\\movie-series-app\\src\\Pages\\Movies\\Movies.js",[],"E:\\Coding\\React\\movie-series-app\\src\\Pages\\Trending\\Trending.js",[],"E:\\Coding\\React\\movie-series-app\\src\\Pages\\Series\\Series.js",[],"E:\\Coding\\React\\movie-series-app\\src\\Pages\\Search\\Search.js",[],"E:\\Coding\\React\\movie-series-app\\src\\components\\SingleContent\\SingleContent.js",[],"E:\\Coding\\React\\movie-series-app\\src\\components\\Genres\\Genres.js",[],"E:\\Coding\\React\\movie-series-app\\src\\config\\config.js",[],"E:\\Coding\\React\\movie-series-app\\src\\hooks\\useGenre.js",[],"E:\\Coding\\React\\movie-series-app\\src\\components\\Pagination\\CustomPagination.js",[],"E:\\Coding\\React\\movie-series-app\\src\\components\\ContentModal\\ContentModal.js",["59","60"],{"ruleId":"61","severity":1,"message":"62","line":1,"column":10,"nodeType":"63","messageId":"64","endLine":1,"endColumn":14},{"ruleId":"65","severity":1,"message":"66","line":52,"column":6,"nodeType":"67","endLine":52,"endColumn":8,"suggestions":"68"},{"ruleId":"69","severity":1,"message":"70","line":78,"column":13,"nodeType":"71","endLine":81,"endColumn":15},"no-unused-vars","'Link' is defined but never used.","Identifier","unusedVar","react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the dependency array.","ArrayExpression",["72"],"jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement",{"desc":"73","fix":"74"},"Update the dependencies array to be: [fetchData]",{"range":"75","text":"76"},[1333,1335],"[fetchData]"]
1+
[{"E:\\Coding\\React\\movie-series-app\\src\\index.js":"1","E:\\Coding\\React\\movie-series-app\\src\\App.js":"2","E:\\Coding\\React\\movie-series-app\\src\\components\\MainNav.js":"3","E:\\Coding\\React\\movie-series-app\\src\\components\\Header\\Header.js":"4","E:\\Coding\\React\\movie-series-app\\src\\Pages\\Movies\\Movies.js":"5","E:\\Coding\\React\\movie-series-app\\src\\Pages\\Trending\\Trending.js":"6","E:\\Coding\\React\\movie-series-app\\src\\Pages\\Series\\Series.js":"7","E:\\Coding\\React\\movie-series-app\\src\\Pages\\Search\\Search.js":"8","E:\\Coding\\React\\movie-series-app\\src\\components\\SingleContent\\SingleContent.js":"9","E:\\Coding\\React\\movie-series-app\\src\\components\\Genres\\Genres.js":"10","E:\\Coding\\React\\movie-series-app\\src\\config\\config.js":"11","E:\\Coding\\React\\movie-series-app\\src\\hooks\\useGenre.js":"12","E:\\Coding\\React\\movie-series-app\\src\\components\\Pagination\\CustomPagination.js":"13","E:\\Coding\\React\\movie-series-app\\src\\components\\ContentModal\\ContentModal.js":"14","E:\\Coding\\React\\movie-series-app\\src\\components\\Carousel\\Carousel.js":"15"},{"size":219,"mtime":1611577989723,"results":"16","hashOfConfig":"17"},{"size":917,"mtime":1611472102675,"results":"18","hashOfConfig":"17"},{"size":1887,"mtime":1611476354015,"results":"19","hashOfConfig":"17"},{"size":255,"mtime":1611478038208,"results":"20","hashOfConfig":"17"},{"size":2027,"mtime":1611588503145,"results":"21","hashOfConfig":"17"},{"size":1335,"mtime":1611588527515,"results":"22","hashOfConfig":"17"},{"size":1994,"mtime":1611588510894,"results":"23","hashOfConfig":"17"},{"size":83,"mtime":1611146914723,"results":"24","hashOfConfig":"17"},{"size":805,"mtime":1611580379212,"results":"25","hashOfConfig":"17"},{"size":1617,"mtime":1611501751754,"results":"26","hashOfConfig":"17"},{"size":116,"mtime":1611468447160,"results":"27","hashOfConfig":"17"},{"size":232,"mtime":1611569176034,"results":"28","hashOfConfig":"17"},{"size":863,"mtime":1611510017516,"results":"29","hashOfConfig":"17"},{"size":4191,"mtime":1611658848357,"results":"30","hashOfConfig":"17"},{"size":1584,"mtime":1611659425522,"results":"31","hashOfConfig":"17"},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"43nqr1",{"filePath":"34","messages":"35","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"36","messages":"37","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"38","messages":"39","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"40","messages":"41","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"42","messages":"43","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"44","messages":"45","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"46","messages":"47","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"48","messages":"49","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"50","messages":"51","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"52","messages":"53","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"54","messages":"55","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"58","messages":"59","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"60","messages":"61","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"E:\\Coding\\React\\movie-series-app\\src\\index.js",[],"E:\\Coding\\React\\movie-series-app\\src\\App.js",[],"E:\\Coding\\React\\movie-series-app\\src\\components\\MainNav.js",[],"E:\\Coding\\React\\movie-series-app\\src\\components\\Header\\Header.js",["62"],"E:\\Coding\\React\\movie-series-app\\src\\Pages\\Movies\\Movies.js",[],"E:\\Coding\\React\\movie-series-app\\src\\Pages\\Trending\\Trending.js",[],"E:\\Coding\\React\\movie-series-app\\src\\Pages\\Series\\Series.js",[],"E:\\Coding\\React\\movie-series-app\\src\\Pages\\Search\\Search.js",[],"E:\\Coding\\React\\movie-series-app\\src\\components\\SingleContent\\SingleContent.js",[],"E:\\Coding\\React\\movie-series-app\\src\\components\\Genres\\Genres.js",[],"E:\\Coding\\React\\movie-series-app\\src\\config\\config.js",[],"E:\\Coding\\React\\movie-series-app\\src\\hooks\\useGenre.js",[],"E:\\Coding\\React\\movie-series-app\\src\\components\\Pagination\\CustomPagination.js",[],"E:\\Coding\\React\\movie-series-app\\src\\components\\ContentModal\\ContentModal.js",[],"E:\\Coding\\React\\movie-series-app\\src\\components\\Carousel\\Carousel.js",[],{"ruleId":"63","severity":1,"message":"64","line":1,"column":10,"nodeType":"65","messageId":"66","endLine":1,"endColumn":14},"no-unused-vars","'Link' is defined but never used.","Identifier","unusedVar"]

‎package-lock.json

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"@testing-library/user-event": "^12.1.10",
1212
"axios": "^0.21.1",
1313
"react": "^17.0.1",
14+
"react-alice-carousel": "^2.2.2",
1415
"react-dom": "^17.0.1",
1516
"react-router-dom": "^5.2.0",
1617
"react-scripts": "4.0.1",

‎src/Pages/Movies/Movies.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const Movies = () => {
2020
);
2121
setContent(data.results);
2222
setNumOfPages(data.total_pages);
23-
console.log(data);
23+
// console.log(data);
2424
};
2525

2626
useEffect(() => {

‎src/Pages/Series/Series.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Series = () => {
1919
);
2020
setContent(data.results);
2121
setNumOfPages(data.total_pages);
22-
console.log(data);
22+
// console.log(data);
2323
};
2424

2525
useEffect(() => {

‎src/Pages/Trending/Trending.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const Trending = () => {
1414
);
1515

1616
setContent(data.results);
17-
console.log(data);
17+
// console.log(data);
1818
};
1919

2020
useEffect(() => {

‎src/components/Carousel/Carousel.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.carouselItem {
2+
display: flex;
3+
flex-direction: column;
4+
object-fit: contain;
5+
padding: 10px;
6+
}

‎src/components/Carousel/Carousel.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import axios from "axios";
2+
import React, { useEffect, useState } from "react";
3+
import AliceCarousel from "react-alice-carousel";
4+
import "react-alice-carousel/lib/alice-carousel.css";
5+
import { img_300 } from "../../config/config";
6+
import "./Carousel.css";
7+
8+
const handleDragStart = (e) => e.preventDefault();
9+
10+
const Gallery = ({ id, media_type }) => {
11+
const [credits, setCredits] = useState([]);
12+
13+
const items = credits.map((c) => (
14+
<div className="carouselItem">
15+
<img
16+
src={
17+
c.profile_path
18+
? `${img_300}/${c.profile_path}`
19+
: "https://upload.wikimedia.org/wikipedia/en/6/60/No_Picture.jpg"
20+
}
21+
alt={c?.name}
22+
onDragStart={handleDragStart}
23+
className="yours-custom-class"
24+
/>
25+
<b style={{ textAlign: "center" }}>{c?.name}</b>
26+
</div>
27+
));
28+
29+
const responsive = {
30+
0: {
31+
items: 3,
32+
},
33+
512: {
34+
items: 5,
35+
},
36+
1024: {
37+
items: 7,
38+
},
39+
};
40+
41+
const fetchCredits = async () => {
42+
const { data } = await axios.get(
43+
`https://api.themoviedb.org/3/${media_type}/${id}/credits?api_key=26ba5e77849587dbd7df199727859189&language=en-US`
44+
);
45+
setCredits(data.cast);
46+
};
47+
48+
console.log(credits);
49+
50+
useEffect(() => {
51+
fetchCredits();
52+
// eslint-disable-next-line
53+
}, []);
54+
55+
return (
56+
<AliceCarousel
57+
mouseTracking
58+
infinite
59+
disableDotsControls
60+
disableButtonsControls
61+
responsive={responsive}
62+
items={items}
63+
/>
64+
);
65+
};
66+
67+
export default Gallery;

‎src/components/ContentModal/ContentModal.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
2+
3+
.ContentModal__landscape {
4+
/* height: 40%; */
5+
object-fit: contain;
6+
border-radius: 10px;
7+
}
8+
9+
.ContentModal__portrait {
10+
display: none;
11+
object-fit: contain;
12+
border-radius: 10px;
13+
}
14+
15+
.tagline {
16+
padding-bottom: 10px;
17+
align-self: center;
18+
}
19+
20+
.ContentModal {
21+
display: flex;
22+
flex-direction: column;
23+
justify-content: space-between;
24+
height: 100%;
25+
width: 100%;
26+
overflow-y: scroll;
27+
scrollbar-width: none;
28+
}
29+
30+
.ContentModal::-webkit-scrollbar {
31+
display: none;
32+
}
33+
34+
.ContentModal__about {
35+
padding: 10px;
36+
width: 95%;
37+
height: 90%;
38+
display: flex;
39+
flex-direction: column;
40+
font-family: "Roboto", sans-serif;
41+
justify-content: space-evenly;
42+
font-weight: 300;
43+
}
44+
45+
.ContentModal__title {
46+
height: 12%;
47+
font-size: 5vw;
48+
display: flex;
49+
align-items: center;
50+
justify-content: center;
51+
}
52+
53+
.ContentModal__description {
54+
display: flex;
55+
height: 40%;
56+
overflow-y: scroll;
57+
padding: 5px;
58+
scrollbar-width: thin; /* Firefox */
59+
box-shadow: inset 0 0 5px #000000;
60+
text-align: justify;
61+
}
62+
63+
.ContentModal__description::-webkit-scrollbar {
64+
display: none;
65+
}
66+
67+
@media (min-width: 835px) {
68+
.ContentModal__landscape {
69+
display: none;
70+
}
71+
.ContentModal__portrait {
72+
display: flex;
73+
width: 38%;
74+
}
75+
.ContentModal {
76+
flex-direction: row;
77+
justify-content: space-around;
78+
padding: 10px 0;
79+
}
80+
.ContentModal__about {
81+
width: 58%;
82+
padding: 0;
83+
height: 100%;
84+
}
85+
.ContentModal__title {
86+
font-size: 3.5vw;
87+
}
88+
}

‎src/components/ContentModal/ContentModal.js

Lines changed: 65 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@ import Backdrop from "@material-ui/core/Backdrop";
55
import Fade from "@material-ui/core/Fade";
66
import axios from "axios";
77
import { img_500 } from "../../config/config";
8+
import "./ContentModal.css";
9+
import { Button } from "@material-ui/core";
10+
import YouTubeIcon from "@material-ui/icons/YouTube";
11+
import Carousel from "../Carousel/Carousel";
812

913
const useStyles = makeStyles((theme) => ({
1014
modal: {
@@ -13,21 +17,22 @@ const useStyles = makeStyles((theme) => ({
1317
justifyContent: "center",
1418
},
1519
paper: {
16-
width: "80%",
17-
height: "70%",
20+
width: "90%",
21+
height: "80%",
1822
backgroundColor: "#39445a",
1923
border: "1px solid #282c34",
20-
borderRadius: 5,
24+
borderRadius: 10,
2125
color: "white",
2226
boxShadow: theme.shadows[5],
23-
padding: theme.spacing(2, 4, 3),
27+
padding: theme.spacing(1, 1, 3),
2428
},
2529
}));
2630

2731
export default function TransitionsModal({ children, media_type, id }) {
2832
const classes = useStyles();
2933
const [open, setOpen] = useState(false);
3034
const [content, setContent] = useState();
35+
const [video, setVideo] = useState();
3136

3237
const handleOpen = () => {
3338
setOpen(true);
@@ -45,10 +50,18 @@ export default function TransitionsModal({ children, media_type, id }) {
4550
setContent(data);
4651
};
4752

48-
console.log(content);
53+
const fetchVideo = async () => {
54+
const { data } = await axios.get(
55+
`https://api.themoviedb.org/3/${media_type}/${id}/videos?api_key=26ba5e77849587dbd7df199727859189&language=en-US`
56+
);
57+
58+
setVideo(data.results[0]?.key);
59+
};
4960

5061
useEffect(() => {
5162
fetchData();
63+
fetchVideo();
64+
// eslint-disable-next-line
5265
}, []);
5366

5467
return (
@@ -74,13 +87,53 @@ export default function TransitionsModal({ children, media_type, id }) {
7487
}}
7588
>
7689
<Fade in={open}>
77-
<div className={classes.paper}>
78-
<img
79-
src={`${img_500}/${content?.backdrop_path}`}
80-
style={{ width: "100%", objectFit: "contain" }}
81-
/>
82-
<h1>{content?.name || content?.title}</h1>
83-
</div>
90+
{content && (
91+
<div className={classes.paper}>
92+
<div className="ContentModal">
93+
<img
94+
src={`${img_500}/${content.poster_path}`}
95+
alt={content.name || content.title}
96+
className="ContentModal__portrait"
97+
/>
98+
<img
99+
src={`${img_500}/${content.backdrop_path}`}
100+
alt={content.name || content.title}
101+
className="ContentModal__landscape"
102+
/>
103+
<div className="ContentModal__about">
104+
<span className="ContentModal__title">
105+
{content.name || content.title} (
106+
{(content.first_air_date || content.release_date).substring(
107+
0,
108+
4
109+
)}
110+
)
111+
</span>
112+
{content.tagline && (
113+
<i className="tagline">{content.tagline}</i>
114+
)}
115+
116+
<span className="ContentModal__description">
117+
{content.overview}
118+
</span>
119+
120+
<div>
121+
<Carousel id={id} media_type={media_type} />
122+
</div>
123+
124+
<Button
125+
variant="contained"
126+
startIcon={<YouTubeIcon />}
127+
color="secondary"
128+
target="__blank"
129+
href={`https://www.youtube.com/watch?v=${video}`}
130+
>
131+
Watch the Trailer
132+
</Button>
133+
</div>
134+
</div>
135+
</div>
136+
)}
84137
</Fade>
85138
</Modal>
86139
</>

‎src/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap");
2+
@import "react-alice-carousel/lib/alice-carousel.css";
23

34
a {
45
text-decoration: none;

0 commit comments

Comments
 (0)