Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Amal/feat/movie page fixes #50

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Amal/feat/movie page fixes #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
60aa2c6
fixs movie page
amalshweiki Mar 27, 2024
9bf9e41
themes
amalshweiki Mar 27, 2024
e70cca4
Merge branch 'main' of https://github.com/obrm/makes-movie-app into a…
obrm Mar 27, 2024
2b65567
them2
amalshweiki Mar 27, 2024
e8b4e7d
Merge branch 'amal/feat/movie-page-fixes' of https://github.com/obrm/…
amalshweiki Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added frontend/public/images/noImage.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion .../src/features/movies/components/moviePage/DirectorAndWriters/DirectorAndWritersStyles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const DirectorWriters = styled.div`
padding: 2rem;
align-self: flex-end;
font-size: var(--paragraph);
color: #0c3675;
color:var(--secondary-color-light);
text-align: left;
margin-top: 1rem;
`;
Expand Down
22 changes: 16 additions & 6 deletions frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarousel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ import { Link } from 'react-router-dom';

import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import defaultAvatar from '../../../../../../public/images/noImage.png';
import {
CastCard,
CastName,
CastChar,
CastImg,
arrowStyles,
HorizontalLine,
} from './MovieCastCarouselStyles';

const MovieCastCarousel = ({ movie }) => {
Expand All @@ -20,48 +22,56 @@ const MovieCastCarousel = ({ movie }) => {
}
return (
<div>
<HorizontalLine/>
<Carousel
showArrows={true}
infiniteLoop={true}
showThumbs={false}
showStatus={false}
showIndicators={false}
renderArrowPrev={(onClickHandler, hasPrev, label) =>
hasPrev && (

<button
type="button"
onClick={onClickHandler}
title={label}
style={{ ...arrowStyles, left: 15 }}
style={{ ...arrowStyles, left: 50 }}
>
&lt;
</button>
)

}
renderArrowNext={(onClickHandler, hasNext, label) =>
hasNext && (

<button
type="button"
onClick={onClickHandler}
title={label}
style={{ ...arrowStyles, right: 15 }}
style={{ ...arrowStyles, right: 48 }}
>
&gt;
</button>
)

}
>

{chunks.map((chunk, index) => (

<div key={index}>
{chunk.map(element => (
<div
key={element.id}
style={{ display: 'inline-block', margin: '2px' }}
>
<Link to="">

<CastCard>
<CastImg
src={`${imageBaseURL}${element.image}`}
alt={element.name}
onError={e => {
e.target.src = defaultAvatar;
}}
/>
<CastName>{element.name}</CastName>

Expand Down
26 changes: 17 additions & 9 deletions ...nd/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarouselStyles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import styled from 'styled-components';

export const CastCard = styled.div`
margin-top: 3rem;
margin-top: 5rem;
width: 160px;
height: 330px;
background-color: #49bcec;
background-color:var(--secondary-color);

border-radius: 20px;
margin-left: 10px;
margin-left: 8px;
box-shadow: 0 8px 6px -6px grey;
margin-bottom: 60px;
`;
Expand All @@ -16,7 +16,7 @@ export const CastName = styled.h3`
justify-content: left;
font-size: 15px;
margin-left: 10px;
color: black;
color:var(--primary-color);
font-weight: bold;
font-weight: 400;
`;
Expand All @@ -25,7 +25,7 @@ export const CastChar = styled.p`
justify-content: left;
margin-left: 8px;

color: red;
color:var(--primary-color);
font-size: 15px;
`;
export const CastImg = styled.img`
Expand All @@ -38,15 +38,23 @@ export const CastImg = styled.img`
export const arrowStyles = {
position: 'absolute',
zIndex: 2,
top: 'calc(60% - 30px)',
top: 'calc(60% - 72px)',

width: 30,
height: 30,
cursor: 'pointer',
background: '#49BCEC',
border: 'none',
color: '#7AD3F3',
background: 'var(--secondary-color-light)',
border: 'none',
color: 'var(--secondary-color-lightest)',
borderRadius: '50%',
fontSize: '30px',
fontWeight: 'bold',
};
export const HorizontalLine = styled.hr`
border: 0;
height: 1px;
background:var(--secondary-color-light);
margin-top: 5rem;
margin-left:0.5rem;
margin-right:0.5rem;
`;
2 changes: 1 addition & 1 deletion frontend/src/features/movies/components/moviePage/Reviews/Reviews.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const Reviews = ({ movie }) => {
return (
<>

{reviews && ( <ReviewsCarousel reviews={reviews} />)};
{reviews && ( <ReviewsCarousel reviews={reviews} />)}
</>

);
Expand Down
27 changes: 14 additions & 13 deletions frontend/src/features/movies/components/moviePage/Reviews/ReviewsCarousel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { Carousel } from 'react-responsive-carousel';
import 'react-responsive-carousel/lib/styles/carousel.min.css';
import './reviews.css';
Expand All @@ -23,14 +23,14 @@ const ReviewsCarousel = ({ reviews }) => {
position: 'absolute',
zIndex: 2,

top: '50% ',
top: '45% ',

width: 30,
height: 30,
cursor: 'pointer',
background: '#49BCEC',
background: 'var(--secondary-color-light)',
border: 'none',
color: '#7AD3F3',
color: 'var(--secondary-color-lightest)',
borderRadius: '50%',
fontSize: '30px',
fontWeight: 'bold',
Expand All @@ -39,32 +39,33 @@ const ReviewsCarousel = ({ reviews }) => {
return (
<Carousel
showArrows={true}
infiniteLoop={true}
showThumbs={false}
showStatus={false}
showIndicators={false}
renderArrowPrev={(onClickHandler, hasPrev, label) =>
hasPrev && (
renderArrowPrev={(onClickHandler, label) =>

<button
type="button"
onClick={onClickHandler}
title={label}
style={{ ...arrowStyles, left: 18 }}
style={{ ...arrowStyles, left: 105}}
>
&lt;
</button>
)

}
renderArrowNext={(onClickHandler, hasNext, label) =>
hasNext && (
renderArrowNext={(onClickHandler, label) =>

<button
type="button"
onClick={onClickHandler}
title={label}
style={{ ...arrowStyles, right: 18 }}
style={{ ...arrowStyles, right: 100}}
>
&gt;
</button>
)

}
>
{reviews.map((review, index) => (
Expand All @@ -73,7 +74,7 @@ const ReviewsCarousel = ({ reviews }) => {
<p>
{renderReviewContent(review.content, index)}
{review.content.split(' ').length > 50 && (
<button onClick={() => toggleExpand(index)} className="show-more">
<button onClick={() => toggleExpand(index)} className="show-more" >
{expandedReviewIndex === index ? 'Show Less' : 'Show More'}
</button>
)}
Expand Down
11 changes: 6 additions & 5 deletions frontend/src/features/movies/components/moviePage/Reviews/reviews.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
.carousel-slide-2 {
margin-left: 2rem;
margin-left: 8rem;
margin-right: 2rem;
margin-top: 2rem;
padding-left: 2rem;
text-align: left;
position: relative;
min-height: 100px;
color: #2a6496;
color:var(--secondary-color-light);
font-size: 15px;
font-weight: 400;
width: 80%;
}
.carousel-slide-2 p {
margin-left: 50px;
border-left: 2px solid #49bcec;
border-right: 2px solid #49bcec;
border-left: 2px solid var(--secondary-color-light);
border-right: 2px solid var(--secondary-color-light);
padding-left: 20px;
padding-right: 20px;
@media screen and (max-width: 500px) {
Expand All @@ -23,8 +23,9 @@
}
}
.show-more {
cursor:pointer;
background: none;
border: none;
color: #195b97;
color:var(--primary-color);
font-weight: bold;
}
9 changes: 8 additions & 1 deletion frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidget.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,13 @@ const TrailerWidget = ({ movie }) => {
const openModal = () => setIsOpen(true);
const closeModal = () => setIsOpen(false);

const correctTrailerUrl = (url) => {
const urlParts = url.split('watch?v==');
if (urlParts.length === 2) {
return `https://www.youtube.com/embed/${urlParts[1]}`;
}
return url;
};
return (
<>
<WidgetContainer backgroundImage={movie.poster} onClick={openModal}>
Expand Down Expand Up @@ -97,7 +104,7 @@ const TrailerWidget = ({ movie }) => {
{movie.trailers.map((trailer, index) => (
<StyledCarouselDiv key={index}>
<StyledIframe
src={`https://www.youtube.com/embed/${trailer.key}`}
src={correctTrailerUrl(trailer)}
allowFullScreen
></StyledIframe>
</StyledCarouselDiv>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidgetStyles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ export const WidgetContainer = styled.div`
background-size: contain;
background-repeat: no-repeat;
width: 25rem;
height: 25rem;
height: 30rem;
top: 50%;
left: 83%;
left: 85%;

z-index: 1;
transition: transform 0.5s ease;
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/features/movies/components/moviePage/movieDetails/MovieDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,17 +48,17 @@ const MovieDetails = ({ movie }) => {

{movie.ratings && (
<RatingRow>
{movie.ratings.imdb && ( <RatingPair>
{movie.ratings.imdb && !isNaN(parseFloat(movie.ratings.imdb)) &&( <RatingPair>
<LogoImage src={imdbIcon} alt="IMDb" />
<RatingText>{movie.ratings.imdb}</RatingText>
</RatingPair>)}

{movie.ratings.tmdb && ( <RatingPair>
{movie.ratings.tmdb && !isNaN(parseFloat(movie.ratings.tmbd)) && ( <RatingPair>
<LogoImage src={redTomatoesIcon} alt="Rotten Tomatoes" />
<RatingText>{movie.ratings.tmdb}</RatingText>
</RatingPair>)}

{movie.ratings.metaCritic && ( <RatingPair>
{movie.ratings.metaCritic && !isNaN(parseFloat(movie.ratings.metaCritic)) &&( <RatingPair>
<LogoImage src={metaIcon} alt="Metacritic" />
<RatingText>{movie.ratings.metaCritic}</RatingText>
</RatingPair>)}
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/features/movies/components/moviePage/movieDetails/movieDetailsStyles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ export const DetailContainer = styled.div`
background: rgba(0, 0, 0, 0.5);
text-align: center;
height: fit-content;
margin-top: 1rem;
margin-top: 2.5em;
border-radius: 8px;
padding: 2rem 4rem;
color: #69bada;
color: var(--primary-color);
@media screen and (max-width: 500px) {
padding: 2rem 4rem;
width: 100vw;
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/features/movies/components/moviePage/tagLineAndPlot/TagLineAndPlotStyles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const TagPlotContainer = styled.div`
padding: 2rem;
align-self: flex-start;
font-size: var(--paragraph);
color: #0c3675;
color:var(--secondary-color-light);
text-align: left;

@media screen and (max-width: 500px) {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/pages/moviePage/MoviePage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ const MoviePage = () => {
<div>
{Movie && (
<PageContainer>
<TrailerWidget movie={Movie} />
<MovieContainer>
<TrailerWidget movie={Movie} />
<MovieContainer >
<OverlayContainer poster={Movie.backdrop}>
<MovieDetails movie={Movie} />
</OverlayContainer>
Expand Down
13 changes: 7 additions & 6 deletions frontend/src/pages/moviePage/MoviePageStyles.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import styled from 'styled-components';
export const PageContainer = styled.div`
padding: 0vw 10vw;
padding: 0vw 14vw;
overflow: hidden;
background: linear-gradient(to right, #141e30, #456181);
background-color:var(--secondary-color);
/* background: linear-gradient(to right, #141e30, #456181); */
@media screen and (max-width: 1200px) {
padding: 0 10vw;
}
Expand All @@ -12,8 +13,8 @@ export const PageContainer = styled.div`
`;

export const MovieContainer = styled.div`
position: relative;
background-color: #79d3f3;
padding-top:4vw;
background-color:var(--primary-color);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

@media only screen and (max-width: 500px) {
Expand Down Expand Up @@ -47,8 +48,8 @@ export const OverlayContainer = styled.div`
props.poster
? `url(https://image.tmdb.org/t/p/w1280/${props.poster})`
: null};
background-size: cover;
background-repeat: no-repeat;
background-size: 100% 100%;
background-repeat:cover;
background-position: center;
}
`;
Expand Down