Use react-query for queue UI

New: Season packs and multi-episode releases will show as a single item in the queue Closes #6537
2026-04-24 22:36:19 -04:00 · 2025-05-21 17:14:50 -07:00
parent 642f4f97bc
commit ae201f5299
58 changed files with 1979 additions and 1911 deletions
@@ -0,0 +1,97 @@
+import React from 'react';
+import Icon from 'Components/Icon';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import Tooltip from 'Components/Tooltip/Tooltip';
+import { icons, kinds, tooltipPositions } from 'Helpers/Props';
+import formatTime from 'Utilities/Date/formatTime';
+import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+import getRelativeDate from 'Utilities/Date/getRelativeDate';
+import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
+import styles from './TimeLeftCell.css';
+
+interface TimeLeftCellProps {
+  estimatedCompletionTime?: string;
+  timeLeft?: string;
+  status: string;
+  size: number;
+  sizeLeft: number;
+  showRelativeDates: boolean;
+  shortDateFormat: string;
+  timeFormat: string;
+}
+
+function TimeLeftCell(props: TimeLeftCellProps) {
+  const {
+    estimatedCompletionTime,
+    timeLeft,
+    status,
+    size,
+    sizeLeft,
+    showRelativeDates,
+    shortDateFormat,
+    timeFormat,
+  } = props;
+
+  if (status === 'delay') {
+    const date = getRelativeDate({
+      date: estimatedCompletionTime,
+      shortDateFormat,
+      showRelativeDates,
+    });
+    const time = formatTime(estimatedCompletionTime, timeFormat, {
+      includeMinuteZero: true,
+    });
+
+    return (
+      <TableRowCell className={styles.timeLeft}>
+        <Tooltip
+          anchor={<Icon name={icons.INFO} />}
+          tooltip={translate('DelayingDownloadUntil', { date, time })}
+          kind={kinds.INVERSE}
+          position={tooltipPositions.TOP}
+        />
+      </TableRowCell>
+    );
+  }
+
+  if (status === 'downloadClientUnavailable') {
+    const date = getRelativeDate({
+      date: estimatedCompletionTime,
+      shortDateFormat,
+      showRelativeDates,
+    });
+    const time = formatTime(estimatedCompletionTime, timeFormat, {
+      includeMinuteZero: true,
+    });
+
+    return (
+      <TableRowCell className={styles.timeLeft}>
+        <Tooltip
+          anchor={<Icon name={icons.INFO} />}
+          tooltip={translate('RetryingDownloadOn', { date, time })}
+          kind={kinds.INVERSE}
+          position={tooltipPositions.TOP}
+        />
+      </TableRowCell>
+    );
+  }
+
+  if (!timeLeft || status === 'completed' || status === 'failed') {
+    return <TableRowCell className={styles.timeLeft}>-</TableRowCell>;
+  }
+
+  const totalSize = formatBytes(size);
+  const remainingSize = formatBytes(sizeLeft);
+
+  return (
+    <TableRowCell
+      className={styles.timeLeft}
+      title={`${remainingSize} / ${totalSize}`}
+    >
+      {formatTimeSpan(timeLeft)}
+    </TableRowCell>
+  );
+}
+
+export default TimeLeftCell;