/* eslint-disable jsx-a11y/mouse-events-have-key-events */ /* eslint-disable react/jsx-key */ /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ import React, { Component } from 'react'; import axios from 'axios'; import { API_ENDPOINTS } from '../../utils'; import 'react-multi-carousel/lib/styles.css'; import { Image } from 'semantic-ui-react'; import { NetworkIcon } from '../../utils/icons'; import CarouselSkeletonLoader from '../Loader/CarouselSkeletonLoader'; import Style from './TrendingCarousel.styles'; import MovieSidebar from '../movieSidebar/MovieSidebar'; const responsive = { superLargeDesktop: { // the naming can be any, depends on you. breakpoint: { max: 4000, min: 3000 }, items: 5, }, desktop: { breakpoint: { max: 3000, min: 1024 }, items: 4, }, tablet: { breakpoint: { max: 1024, min: 464 }, items: 3, }, mobile: { breakpoint: { max: 464, min: 0 }, items: 2, }, }; class TrendingCarousel extends Component { constructor(props) { super(props); this.state = { trending_api: API_ENDPOINTS.ocena, trending: [], error: false, currentmovie: { name: '' }, isLoading: true, showMovieSidebar: false, }; } componentDidMount() { const options = { method: 'post', url: `${this.state.trending_api}/download/highest/`, data: { filter_by: 'weeks', filter_num: 4, top: 10, }, }; axios(options) .then((res) => { this.setState({ trending: res.data, isLoading: false, }); console.log(res.data); }) .catch((err) => { if (err) { this.setState({ error: true, isLoading: false, }); } }); } addDownload = (trendingMovie) => { axios .post(this.state.trending_api + '/download/', { ip_address: this.props.ip_address, referral_id: trendingMovie.referral_id, }) .then(() => { console.log(`added ${trendingMovie.name} to downloads on ocena`); }); }; openModal = (id) => { this.setState({ showMovieSidebar: { [id]: !this.state.showMovieSidebar, }, }); if (this.state.showMovieSidebar[id] === false || this.state.showMovieSidebar[id] === undefined) { this.setState({ showMovieSidebar: { [id]: true, }, }); } }; render() { return ( <div className="mleft"> <h2 className="gophie-page-title mtop">Trending Movies</h2> <Style.TrendingMainCarousel responsive={responsive} deviceType={this.props.deviceType} keyBoardControl={true} infinite={true} ssr={true} autoPlay={this.props.deviceType !== 'mobile' ? true : false} transitionDuration={800} containerClass="carousel-container" > {this.state.trending.map((trendingMovie) => { if (trendingMovie.name.endsWith('Tags')) { trendingMovie.name = trendingMovie.name.substr(0, trendingMovie.name.length - 4); } return ( <div key={trendingMovie.referral_id} className="trending-carousal-image__container"> <p className="movie-size" style={{transform: 'translate(0px)'}}>{trendingMovie.size}</p> <Image className="img-fluid trending-carousal-image" onKeyDown={() => { this.openModal(trendingMovie.referral_id); }} onClick={() => { this.openModal(trendingMovie.referral_id); }} alt={trendingMovie.name} onError={(e) => ( // eslint-disable-next-line (e.target.onerror = null), (e.target.src = 'https://raw.githubusercontent.com/Go-phie/gophie-web/master/public/no-pic.png') )} src={ trendingMovie.cover_photo_link ? trendingMovie.cover_photo_link : 'https://raw.githubusercontent.com/Go-phie/gophie-web/master/public/no-pic.png' } /> <div className="carousal-image-detail"> <p>{trendingMovie.name}</p> </div> {this.state.showMovieSidebar[trendingMovie.referral_id] ? ( <MovieSidebar toggle={() => this.openModal(trendingMovie.referral_id)} movie={trendingMovie} shareMovie={this.props.shareMovie} /> ) : null} </div> ); })} </Style.TrendingMainCarousel> {!this.state.isLoading ? null : ( <Style.TrendingLoaderContainer className="w-100 d-flex"> <CarouselSkeletonLoader /> <CarouselSkeletonLoader /> <CarouselSkeletonLoader /> <CarouselSkeletonLoader /> </Style.TrendingLoaderContainer> )} {!this.state.error ? null : ( <div className="error"> <p className="error-text"> <NetworkIcon /> <p>Try Again</p> </p> </div> )} </div> ); } } export default TrendingCarousel;