import PropTypes from 'prop-types'; import React, { Component } from 'react'; import TextTruncate from 'react-text-truncate'; import { Navigation } from 'swiper'; import { Swiper, SwiperSlide } from 'swiper/react'; import EditCollectionModalConnector from 'Collection/Edit/EditCollectionModalConnector'; import CheckInput from 'Components/Form/CheckInput'; import Icon from 'Components/Icon'; import Label from 'Components/Label'; import IconButton from 'Components/Link/IconButton'; import MonitorToggleButton from 'Components/MonitorToggleButton'; import { icons, sizes } from 'Helpers/Props'; import QualityProfileNameConnector from 'Settings/Profiles/Quality/QualityProfileNameConnector'; import dimensions from 'Styles/Variables/dimensions'; import fonts from 'Styles/Variables/fonts'; import translate from 'Utilities/String/translate'; import CollectionMovieConnector from './CollectionMovieConnector'; import CollectionMovieLabelConnector from './CollectionMovieLabelConnector'; import styles from './CollectionOverview.css'; // Import Swiper styles import 'swiper/css'; import 'swiper/css/navigation'; const columnPadding = parseInt(dimensions.movieIndexColumnPadding); const columnPaddingSmallScreen = parseInt(dimensions.movieIndexColumnPaddingSmallScreen); const defaultFontSize = parseInt(fonts.defaultFontSize); const lineHeight = parseFloat(fonts.lineHeight); // Hardcoded height beased on line-height of 32 + bottom margin of 10. 19 + 5 for List Row // Less side-effecty than using react-measure. const titleRowHeight = 100; function getContentHeight(rowHeight, isSmallScreen) { const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding; return rowHeight - padding; } class CollectionOverview extends Component { // // Lifecycle constructor(props, context) { super(props, context); this.state = { isEditCollectionModalOpen: false, isNewAddMovieModalOpen: false }; } // // Control setSliderPrevRef = (ref) => { this._swiperPrevRef = ref; }; setSliderNextRef = (ref) => { this._swiperNextRef = ref; }; // // Listeners onPress = () => { this.setState({ isNewAddMovieModalOpen: true }); }; onEditCollectionPress = () => { this.setState({ isEditCollectionModalOpen: true }); }; onEditCollectionModalClose = () => { this.setState({ isEditCollectionModalOpen: false }); }; onAddMovieModalClose = () => { this.setState({ isNewAddMovieModalOpen: false }); }; onChange = ({ value, shiftKey }) => { const { id, onSelectedChange } = this.props; onSelectedChange({ id, value, shiftKey }); }; // // Render render() { const { monitored, qualityProfileId, rootFolderPath, genres, id, title, movies, overview, missingMovies, posterHeight, posterWidth, rowHeight, isSmallScreen, isSelected, onMonitorTogglePress } = this.props; const { showDetails, showOverview, showPosters, detailedProgressBar } = this.props.overviewOptions; const { isEditCollectionModalOpen } = this.state; const contentHeight = getContentHeight(rowHeight, isSmallScreen); const overviewHeight = contentHeight - titleRowHeight - posterHeight; return (