import PropTypes from 'prop-types'; import React, { Component } from 'react'; import getRelativeDate from 'Utilities/Date/getRelativeDate'; import { icons } from 'Helpers/Props'; import IconButton from 'Components/Link/IconButton'; import SpinnerIconButton from 'Components/Link/SpinnerIconButton'; import Label from 'Components/Label'; import Link from 'Components/Link/Link'; import ArtistPoster from 'Artist/ArtistPoster'; import EditArtistModalConnector from 'Artist/Edit/EditArtistModalConnector'; import DeleteArtistModal from 'Artist/Delete/DeleteArtistModal'; import ArtistIndexProgressBar from 'Artist/Index/ProgressBar/ArtistIndexProgressBar'; import ArtistIndexPosterInfo from './ArtistIndexPosterInfo'; import styles from './ArtistIndexPoster.css'; class ArtistIndexPoster extends Component { // // Lifecycle constructor(props, context) { super(props, context); this.state = { hasPosterError: false, isEditArtistModalOpen: false, isDeleteArtistModalOpen: false }; } // // Listeners onEditArtistPress = () => { this.setState({ isEditArtistModalOpen: true }); } onEditArtistModalClose = () => { this.setState({ isEditArtistModalOpen: false }); } onDeleteArtistPress = () => { this.setState({ isEditArtistModalOpen: false, isDeleteArtistModalOpen: true }); } onDeleteArtistModalClose = () => { this.setState({ isDeleteArtistModalOpen: false }); } onPosterLoad = () => { if (this.state.hasPosterError) { this.setState({ hasPosterError: false }); } } onPosterLoadError = () => { if (!this.state.hasPosterError) { this.setState({ hasPosterError: true }); } } // // Render render() { const { id, artistName, monitored, titleSlug, status, nextAiring, statistics, images, posterWidth, posterHeight, detailedProgressBar, showTitle, showMonitored, showQualityProfile, qualityProfile, showSearchAction, showRelativeDates, shortDateFormat, timeFormat, isRefreshingArtist, isSearchingArtist, onRefreshArtistPress, onSearchPress, ...otherProps } = this.props; const { albumCount, sizeOnDisk, trackCount, trackFileCount, totalTrackCount } = statistics; const { hasPosterError, isEditArtistModalOpen, isDeleteArtistModalOpen } = this.state; const link = `/author/${titleSlug}`; const elementStyle = { width: `${posterWidth}px`, height: `${posterHeight}px` }; elementStyle['object-fit'] = 'contain'; return (