2018-11-23 07:04:42 +00:00
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import React from 'react';
|
|
|
|
import Icon from 'Components/Icon';
|
2022-12-30 03:08:14 +00:00
|
|
|
import Popover from 'Components/Tooltip/Popover';
|
|
|
|
import { icons, tooltipPositions } from 'Helpers/Props';
|
2020-08-29 03:56:13 +00:00
|
|
|
import translate from 'Utilities/String/translate';
|
2022-12-30 03:08:14 +00:00
|
|
|
import QueueStatus from './QueueStatus';
|
|
|
|
import styles from './QueueDetails.css';
|
2018-11-23 07:04:42 +00:00
|
|
|
|
|
|
|
function QueueDetails(props) {
|
|
|
|
const {
|
|
|
|
title,
|
|
|
|
size,
|
|
|
|
sizeleft,
|
2020-10-01 01:43:52 +00:00
|
|
|
status,
|
|
|
|
trackedDownloadState,
|
|
|
|
trackedDownloadStatus,
|
2022-12-30 03:08:14 +00:00
|
|
|
statusMessages,
|
2018-11-23 07:04:42 +00:00
|
|
|
errorMessage,
|
|
|
|
progressBar
|
|
|
|
} = props;
|
|
|
|
|
2020-10-01 01:43:52 +00:00
|
|
|
const progress = size ? (100 - sizeleft / size * 100) : 0;
|
2022-12-30 03:08:14 +00:00
|
|
|
const isDownloading = status === 'downloading';
|
|
|
|
const isPaused = status === 'paused';
|
|
|
|
const hasWarning = trackedDownloadStatus === 'warning';
|
|
|
|
const hasError = trackedDownloadStatus === 'error';
|
2018-11-23 07:04:42 +00:00
|
|
|
|
2022-12-30 03:08:14 +00:00
|
|
|
if (
|
|
|
|
(isDownloading || isPaused) &&
|
|
|
|
!hasWarning &&
|
|
|
|
!hasError
|
|
|
|
) {
|
|
|
|
const state = isPaused ? translate('Paused') : translate('Downloading');
|
2020-10-01 01:43:52 +00:00
|
|
|
|
2022-12-30 03:08:14 +00:00
|
|
|
if (progress < 5) {
|
2020-10-01 01:43:52 +00:00
|
|
|
return (
|
|
|
|
<Icon
|
2022-12-30 03:08:14 +00:00
|
|
|
name={icons.DOWNLOADING}
|
|
|
|
title={`${state} - ${progress.toFixed(1)}% ${title}`}
|
2020-10-01 01:43:52 +00:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
2018-11-23 07:04:42 +00:00
|
|
|
|
|
|
|
return (
|
2022-12-30 03:08:14 +00:00
|
|
|
<Popover
|
|
|
|
className={styles.progressBarContainer}
|
|
|
|
anchor={progressBar}
|
|
|
|
title={`${state} - ${progress.toFixed(1)}%`}
|
|
|
|
body={
|
|
|
|
<div>{title}</div>
|
|
|
|
}
|
|
|
|
position={tooltipPositions.LEFT}
|
2018-11-23 07:04:42 +00:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-12-30 03:08:14 +00:00
|
|
|
return (
|
|
|
|
<QueueStatus
|
|
|
|
sourceTitle={title}
|
|
|
|
status={status}
|
|
|
|
trackedDownloadStatus={trackedDownloadStatus}
|
|
|
|
trackedDownloadState={trackedDownloadState}
|
|
|
|
statusMessages={statusMessages}
|
|
|
|
errorMessage={errorMessage}
|
|
|
|
position={tooltipPositions.LEFT}
|
|
|
|
/>
|
|
|
|
);
|
2018-11-23 07:04:42 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
QueueDetails.propTypes = {
|
|
|
|
title: PropTypes.string.isRequired,
|
|
|
|
size: PropTypes.number.isRequired,
|
|
|
|
sizeleft: PropTypes.number.isRequired,
|
|
|
|
estimatedCompletionTime: PropTypes.string,
|
|
|
|
status: PropTypes.string.isRequired,
|
2020-10-01 01:43:52 +00:00
|
|
|
trackedDownloadState: PropTypes.string.isRequired,
|
|
|
|
trackedDownloadStatus: PropTypes.string.isRequired,
|
2022-12-30 03:08:14 +00:00
|
|
|
statusMessages: PropTypes.arrayOf(PropTypes.object),
|
2018-11-23 07:04:42 +00:00
|
|
|
errorMessage: PropTypes.string,
|
|
|
|
progressBar: PropTypes.node.isRequired
|
|
|
|
};
|
|
|
|
|
2023-10-19 11:39:23 +00:00
|
|
|
QueueDetails.defaultProps = {
|
|
|
|
trackedDownloadStatus: 'ok',
|
|
|
|
trackedDownloadState: 'downloading'
|
|
|
|
};
|
|
|
|
|
2018-11-23 07:04:42 +00:00
|
|
|
export default QueueDetails;
|