import PropTypes from 'prop-types'; import React, { Component } from 'react'; import AlbumFormats from 'Album/AlbumFormats'; import TrackQuality from 'Album/TrackQuality'; import Icon from 'Components/Icon'; import LoadingIndicator from 'Components/Loading/LoadingIndicator'; import TableRowCell from 'Components/Table/Cells/TableRowCell'; import TableRowCellButton from 'Components/Table/Cells/TableRowCellButton'; import TableSelectCell from 'Components/Table/Cells/TableSelectCell'; import TableRow from 'Components/Table/TableRow'; import Popover from 'Components/Tooltip/Popover'; import Tooltip from 'Components/Tooltip/Tooltip'; import { icons, kinds, sortDirections, tooltipPositions } from 'Helpers/Props'; import SelectAlbumModal from 'InteractiveImport/Album/SelectAlbumModal'; import SelectArtistModal from 'InteractiveImport/Artist/SelectArtistModal'; import SelectQualityModal from 'InteractiveImport/Quality/SelectQualityModal'; import SelectReleaseGroupModal from 'InteractiveImport/ReleaseGroup/SelectReleaseGroupModal'; import SelectTrackModal from 'InteractiveImport/Track/SelectTrackModal'; import formatBytes from 'Utilities/Number/formatBytes'; import hasDifferentItems from 'Utilities/Object/hasDifferentItems'; import translate from 'Utilities/String/translate'; import InteractiveImportRowCellPlaceholder from './InteractiveImportRowCellPlaceholder'; import styles from './InteractiveImportRow.css'; class InteractiveImportRow extends Component { // // Lifecycle constructor(props, context) { super(props, context); this.state = { isSelectArtistModalOpen: false, isSelectAlbumModalOpen: false, isSelectTrackModalOpen: false, isSelectReleaseGroupModalOpen: false, isSelectQualityModalOpen: false }; } componentDidMount() { const { id, artist, album, tracks, quality } = this.props; if ( artist && album != null && tracks.length && quality ) { this.props.onSelectedChange({ id, value: true }); } } componentDidUpdate(prevProps) { const { id, artist, album, tracks, quality, isSelected, onValidRowChange } = this.props; if ( prevProps.artist === artist && prevProps.album === album && !hasDifferentItems(prevProps.tracks, tracks) && prevProps.quality === quality && prevProps.isSelected === isSelected ) { return; } const isValid = !!( artist && album && tracks.length && quality ); if (isSelected && !isValid) { onValidRowChange(id, false); } else { onValidRowChange(id, true); } } // // Control selectRowAfterChange = (value) => { const { id, isSelected } = this.props; if (!isSelected && value === true) { this.props.onSelectedChange({ id, value }); } }; // // Listeners onSelectArtistPress = () => { this.setState({ isSelectArtistModalOpen: true }); }; onSelectAlbumPress = () => { this.setState({ isSelectAlbumModalOpen: true }); }; onSelectTrackPress = () => { this.setState({ isSelectTrackModalOpen: true }); }; onSelectReleaseGroupPress = () => { this.setState({ isSelectReleaseGroupModalOpen: true }); }; onSelectQualityPress = () => { this.setState({ isSelectQualityModalOpen: true }); }; onSelectArtistModalClose = (changed) => { this.setState({ isSelectArtistModalOpen: false }); this.selectRowAfterChange(changed); }; onSelectAlbumModalClose = (changed) => { this.setState({ isSelectAlbumModalOpen: false }); this.selectRowAfterChange(changed); }; onSelectTrackModalClose = (changed) => { this.setState({ isSelectTrackModalOpen: false }); this.selectRowAfterChange(changed); }; onSelectReleaseGroupModalClose = (changed) => { this.setState({ isSelectReleaseGroupModalOpen: false }); this.selectRowAfterChange(changed); }; onSelectQualityModalClose = (changed) => { this.setState({ isSelectQualityModalOpen: false }); this.selectRowAfterChange(changed); }; // // Render render() { const { id, allowArtistChange, path, artist, album, albumReleaseId, tracks, cueSheetPath, quality, releaseGroup, size, customFormats, rejections, isReprocessing, audioTags, additionalFile, isSelected, onSelectedChange } = this.props; const { isSelectArtistModalOpen, isSelectAlbumModalOpen, isSelectTrackModalOpen, isSelectReleaseGroupModalOpen, isSelectQualityModalOpen } = this.state; const artistName = artist ? artist.artistName : ''; let albumTitle = ''; if (album) { albumTitle = album.disambiguation ? `${album.title} (${album.disambiguation})` : album.title; } const sortedTracks = tracks.sort((a, b) => parseInt(a.absoluteTrackNumber) - parseInt(b.absoluteTrackNumber)); const trackNumbers = sortedTracks.map((track) => `${track.mediumNumber}x${track.trackNumber}`) .join(', '); const showArtistPlaceholder = isSelected && !artist; const showAlbumNumberPlaceholder = isSelected && !!artist && !album; const showTrackNumbersPlaceholder = !isReprocessing && isSelected && !!album && !tracks.length; const showTrackNumbersLoading = isReprocessing && !tracks.length; const showReleaseGroupPlaceholder = isSelected && !releaseGroup; const showQualityPlaceholder = isSelected && !quality; const pathCellContents = (