110 lines
3.0 KiB
JavaScript
110 lines
3.0 KiB
JavaScript
import React, { Component } from 'react';
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
// Import Swiper styles
|
|
import 'swiper/swiper.scss';
|
|
import 'swiper/components/navigation/navigation.scss';
|
|
import 'swiper/components/pagination/pagination.scss';
|
|
import 'swiper/components/scrollbar/scrollbar.scss';
|
|
import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from 'swiper';
|
|
|
|
import MovieGenre from '../components/MovieGenre';
|
|
|
|
// install Swiper components
|
|
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
|
|
|
|
export default class DisplayMovieRow extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
value: 0,
|
|
width: window.innerWidth
|
|
};
|
|
}
|
|
|
|
|
|
componentDidMount() {
|
|
window.addEventListener("resize", this.handleResize);
|
|
}
|
|
|
|
componentWillUnMount() {
|
|
window.addEventListener("resize", this.handleResize);
|
|
}
|
|
|
|
handleResize = (e) => {
|
|
this.setState({ width: window.innerWidth });
|
|
};
|
|
|
|
onSlideChange = (value) => {
|
|
this.setState({ value })
|
|
}
|
|
|
|
render() {
|
|
const { width } = this.state;
|
|
let netflixUrl = false;
|
|
if (
|
|
this.props.url ===
|
|
`/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
|
|
) {
|
|
netflixUrl = true;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<h1 className="movieShowcase__heading">{this.props.title}</h1>
|
|
<Swiper
|
|
className="movieShowcase__container"
|
|
navigation
|
|
grabCursor={false}
|
|
draggable={false}
|
|
loop={true}
|
|
loopAdditionalSlides={2}
|
|
breakpoints={{
|
|
1378: {
|
|
slidesPerView: 5,
|
|
slidesPerGroup: 5
|
|
},
|
|
998: {
|
|
slidesPerView: 4,
|
|
slidesPerGroup: 4
|
|
},
|
|
625: {
|
|
slidesPerView: 3,
|
|
slidesPerGroup: 3,
|
|
},
|
|
0: {
|
|
slidesPerView: 2,
|
|
slidesPerGroup: 2
|
|
},
|
|
}}
|
|
preventClicksPropagation={true}
|
|
preventClicks={true}
|
|
scrollbar={{ draggable: false, hide: true }}
|
|
slideToClickedSlide={false}
|
|
pagination={{ clickable: true }}
|
|
>
|
|
{
|
|
this.props.movies.map((movie, idx) => {
|
|
let movieImageUrl =
|
|
'https://image.tmdb.org/t/p/w500/' + movie.backdrop_path;
|
|
if (
|
|
this.props.url ===
|
|
`/discover/tv?api_key=${process.env.API_KEY}&with_networks=213`
|
|
) {
|
|
movieImageUrl =
|
|
'https://image.tmdb.org/t/p/original/' + movie.poster_path;
|
|
}
|
|
if (movie.poster_path && movie.backdrop_path !== null) {
|
|
return (
|
|
<SwiperSlide key={idx} className={"movieShowcase__container--movie" + (netflixUrl ? "__netflix" : "")}>
|
|
<img src={movieImageUrl} className="movieShowcase__container--movie-image" />
|
|
</SwiperSlide>
|
|
)
|
|
}
|
|
})
|
|
}
|
|
</Swiper>
|
|
</>
|
|
);
|
|
}
|
|
}
|