Sonarr/frontend/src/Activity/Queue/QueueDetails.tsx

import React from 'react';
import Icon from 'Components/Icon';
import Popover from 'Components/Tooltip/Popover';
import { icons, tooltipPositions } from 'Helpers/Props';
import {
  QueueTrackedDownloadState,
  QueueTrackedDownloadStatus,
  StatusMessage,
} from 'typings/Queue';
import translate from 'Utilities/String/translate';
import QueueStatus from './QueueStatus';
import styles from './QueueDetails.css';

interface QueueDetailsProps {
  title: string;
  size: number;
  sizeLeft: number;
  estimatedCompletionTime?: string;
  status: string;
  trackedDownloadState?: QueueTrackedDownloadState;
  trackedDownloadStatus?: QueueTrackedDownloadStatus;
  statusMessages?: StatusMessage[];
  errorMessage?: string;
  progressBar: React.ReactNode;
}

function QueueDetails(props: QueueDetailsProps) {
  const {
    title,
    size,
    sizeLeft,
    status,
    trackedDownloadState = 'downloading',
    trackedDownloadStatus = 'ok',
    statusMessages,
    errorMessage,
    progressBar,
  } = props;

  const progress = 100 - (sizeLeft / size) * 100;
  const isDownloading = status === 'downloading';
  const isPaused = status === 'paused';
  const hasWarning = trackedDownloadStatus === 'warning';
  const hasError = trackedDownloadStatus === 'error';

  if ((isDownloading || isPaused) && !hasWarning && !hasError) {
    const state = isPaused ? translate('Paused') : translate('Downloading');

    if (progress < 5) {
      return (
        <Icon
          name={icons.DOWNLOADING}
          title={`${state} - ${progress.toFixed(1)}% ${title}`}
        />
      );
    }

    return (
      <Popover
        className={styles.progressBarContainer}
        anchor={progressBar!}
        title={`${state} - ${progress.toFixed(1)}%`}
        body={<div>{title}</div>}
        position="bottom-start"
      />
    );
  }

  return (
    <QueueStatus
      sourceTitle={title}
      status={status}
      trackedDownloadStatus={trackedDownloadStatus}
      trackedDownloadState={trackedDownloadState}
      statusMessages={statusMessages}
      errorMessage={errorMessage}
      position={tooltipPositions.LEFT}
    />
  );
}

export default QueueDetails;