feat(downloads): add media quality and queue reordering

This commit is contained in:
NimBold
2026-07-23 02:55:33 +03:30
parent f4e5e211cc
commit ceab8a5fdf
22 changed files with 869 additions and 16 deletions
+2
View File
@@ -121,6 +121,8 @@ pub struct DownloadItem {
#[ts(optional)]
pub media_format_selector: Option<String>,
#[ts(optional)]
pub media_quality: Option<String>,
#[ts(optional)]
pub queue_id: Option<String>,
#[ts(optional)]
pub queue_position: Option<i32>,
+11 -4
View File
@@ -5650,11 +5650,18 @@ async fn move_many_in_queue(
ids: Vec<String>,
queue_id: String,
direction: crate::ipc::QueueDirection,
target_index: Option<usize>,
) -> Result<Vec<String>, AppError> {
Ok(state
.queue_manager
.move_many_in_queue(&ids, &queue_id, direction)
.await)
Ok(match target_index {
Some(target_index) => state
.queue_manager
.move_many_in_queue_to(&ids, &queue_id, target_index)
.await,
None => state
.queue_manager
.move_many_in_queue(&ids, &queue_id, direction)
.await,
})
}
#[tauri::command]
+64 -4
View File
@@ -22,6 +22,34 @@ pub fn clamp_download_connections(connections: i32) -> i32 {
connections.clamp(DOWNLOAD_CONNECTIONS_MIN, DOWNLOAD_CONNECTIONS_MAX)
}
fn reorder_selected_queue_tasks(
queue_tasks: &[QueuedTask],
ids: &[String],
target_index: usize,
) -> Option<Vec<QueuedTask>> {
let selected_ids = ids.iter().collect::<HashSet<_>>();
let selected_tasks = queue_tasks
.iter()
.filter(|task| selected_ids.contains(&task.id))
.cloned()
.collect::<Vec<_>>();
if selected_tasks.is_empty() {
return None;
}
let unselected_tasks = queue_tasks
.iter()
.filter(|task| !selected_ids.contains(&task.id))
.cloned()
.collect::<Vec<_>>();
let insert_index = target_index.min(unselected_tasks.len());
let mut reordered = Vec::with_capacity(queue_tasks.len());
reordered.extend_from_slice(&unselected_tasks[..insert_index]);
reordered.extend(selected_tasks);
reordered.extend_from_slice(&unselected_tasks[insert_index..]);
Some(reordered)
}
type Aria2ControlLocks = Arc<StdMutex<HashMap<String, Arc<Mutex<()>>>>>;
#[derive(Debug, Clone, PartialEq, Eq)]
@@ -1591,10 +1619,8 @@ impl<R: tauri::Runtime> QueueManager<R> {
.saturating_add(1)
.min(unselected_tasks.len()),
};
let mut reordered = Vec::with_capacity(queue_tasks.len());
reordered.extend_from_slice(&unselected_tasks[..insert_index]);
reordered.extend(selected_tasks);
reordered.extend_from_slice(&unselected_tasks[insert_index..]);
let reordered = reorder_selected_queue_tasks(&queue_tasks, ids, insert_index)
.expect("selected queue tasks were present");
for (queue_index, pending_index) in queue_positions.iter().enumerate() {
pending[*pending_index] = reordered[queue_index].clone();
@@ -1607,6 +1633,40 @@ impl<R: tauri::Runtime> QueueManager<R> {
.collect()
}
/// Atomically place a selected block at an insertion index among the
/// unselected tasks in one queue. This is the drag/drop counterpart to
/// move_many_in_queue; the index is clamped at the backend boundary so a
/// stale pointer position cannot create an invalid queue state.
pub async fn move_many_in_queue_to(
&self,
ids: &[String],
queue_id: &str,
target_index: usize,
) -> Vec<String> {
let mut pending = self.pending.lock().await;
let queue_positions = pending
.iter()
.enumerate()
.filter_map(|(index, task)| (task.queue_id == queue_id).then_some(index))
.collect::<Vec<_>>();
let queue_tasks = queue_positions
.iter()
.map(|index| pending[*index].clone())
.collect::<Vec<_>>();
if let Some(reordered) = reorder_selected_queue_tasks(&queue_tasks, ids, target_index) {
for (queue_index, pending_index) in queue_positions.iter().enumerate() {
pending[*pending_index] = reordered[queue_index].clone();
}
}
pending
.iter()
.filter(|task| task.queue_id == queue_id)
.map(|task| task.id.clone())
.collect()
}
/// Remove a task from pending if present (used by remove_download).
/// Does NOT release a permit (the caller handles active permits via
/// release_permit if the task was already dispatched).
+27
View File
@@ -1247,6 +1247,33 @@ async fn multi_move_reorders_selected_items_as_one_atomic_block() {
);
}
#[tokio::test]
async fn target_move_reorders_a_selected_block_and_clamps_the_target() {
use firelink_lib::ipc::QueueDirection;
let (mgr, _spawner) = make_manager(3);
for id in ["a", "b", "c", "d", "e"] {
mgr.push(sample_task(id)).await.unwrap();
}
let selected = vec!["b".to_string(), "d".to_string()];
assert_eq!(
mgr.move_many_in_queue_to(&selected, "main", 1).await,
vec!["a", "b", "d", "c", "e"]
);
assert_eq!(
mgr.move_many_in_queue_to(&selected, "main", usize::MAX).await,
vec!["a", "c", "e", "b", "d"]
);
// The original direction API remains unchanged for keyboard/button moves.
assert_eq!(
mgr.move_many_in_queue(&selected, "main", QueueDirection::Up)
.await,
vec!["a", "c", "b", "d", "e"]
);
}
#[tokio::test]
async fn moving_one_queue_does_not_reorder_another_queue() {
use firelink_lib::ipc::QueueDirection;
+1 -1
View File
@@ -2,4 +2,4 @@
import type { DownloadCategory } from "./DownloadCategory";
import type { DownloadStatus } from "./DownloadStatus";
export type DownloadItem = { id: string, url: string, fileName: string, status: DownloadStatus, fraction?: number, speed?: string, eta?: string, size?: string, downloadedBytes?: number, totalBytes?: number, totalIsEstimate?: boolean, category: DownloadCategory, dateAdded: string, resumable?: boolean, connections?: number, speedLimit?: string, username?: string, password?: string, headers?: string, checksum?: string, cookies?: string, mirrors?: string, destination?: string, isMedia?: boolean, mediaFormatSelector?: string, queueId?: string, queuePosition?: number, hasBeenDispatched?: boolean, lastError?: string, lastTry?: string, };
export type DownloadItem = { id: string, url: string, fileName: string, status: DownloadStatus, fraction?: number, speed?: string, eta?: string, size?: string, downloadedBytes?: number, totalBytes?: number, totalIsEstimate?: boolean, category: DownloadCategory, dateAdded: string, resumable?: boolean, connections?: number, speedLimit?: string, username?: string, password?: string, headers?: string, checksum?: string, cookies?: string, mirrors?: string, destination?: string, isMedia?: boolean, mediaFormatSelector?: string, mediaQuality?: string, queueId?: string, queuePosition?: number, hasBeenDispatched?: boolean, lastError?: string, lastTry?: string, };
+49 -1
View File
@@ -33,12 +33,15 @@ import { localeDirection, localePluralVariant, resolveAppLocale } from '../i18n/
import {
canSubmitMetadataRows,
appendRequestUrlsAfterVersion,
commonMediaQualitiesForRows,
mediaFileNameForSelectedFormat,
mediaQualityForRow,
mediaFormatSelectorForRow,
metadataSummaryState,
playlistFilePrefix,
reconcileDownloadRows,
refreshFailedMetadataRows,
selectExactMediaQuality,
updateRowIfCurrent,
type AddDownloadDraftRow
} from '../utils/addDownloadMetadata';
@@ -519,6 +522,7 @@ export const AddDownloadsModal = () => {
const isApproximate = !exactBytes && approxBytes > 0;
return {
name: `${quality} ${container}`,
quality,
ext: f.ext,
bytes,
isApproximate,
@@ -1187,6 +1191,7 @@ export const AddDownloadsModal = () => {
isMedia: item.isMedia,
resumable: item.resumable,
mediaFormatSelector: formatSelector,
mediaQuality: mediaQualityForRow(item),
size: item.size || (item.sizeBytes ? formatBytes(item.sizeBytes) : undefined),
sizeBytes: item.sizeBytes
}, action);
@@ -1285,6 +1290,14 @@ export const AddDownloadsModal = () => {
};
const selectedItems = parsedItems.filter(item => item.selected !== false);
const selectedReadyMediaItems = selectedItems.filter(item =>
item.isMedia && item.status === 'ready' && Boolean(item.formats?.length)
);
const bulkQualityOptions = commonMediaQualitiesForRows(selectedReadyMediaItems);
const applyBulkMediaQuality = (quality: string) => {
const selectedIds = selectedReadyMediaItems.map(item => item.id);
setParsedItems(items => selectExactMediaQuality(items, selectedIds, quality));
};
const allRowsSelected = parsedItems.length > 0 && selectedItems.length === parsedItems.length;
const requiredBytes = selectedItems.reduce((acc, item) => acc + (item.sizeBytes || 0), 0);
const hasApproximateSize = selectedItems.some(item =>
@@ -1524,7 +1537,14 @@ export const AddDownloadsModal = () => {
aria-label={t($ => $.addDownloads.selectItem, { file: item.file })}
className="me-2 shrink-0 accent-purple-500"
/>
<div className="flex-[2] text-text-primary font-medium truncate pe-2" title={item.file}>{item.file}</div>
<div className="flex-[2] min-w-0 flex items-center gap-2 text-text-primary font-medium truncate pe-2" title={item.file}>
<span className="truncate">{item.file}</span>
{item.isMedia && item.status === 'ready' && mediaQualityForRow(item) ? (
<span className="add-download-quality-chip shrink-0" title={t($ => $.addDownloads.quality)}>
{mediaQualityForRow(item)}
</span>
) : null}
</div>
<div className={`flex-1 font-mono ${item.status === 'loading' ? 'text-text-muted/50' : 'text-text-muted'}`}>{item.size || t($ => $.addDownloads.unknown)}</div>
<div className={`flex-[1.5] font-medium ${item.status === 'metadata-error' || item.status === 'invalid' ? 'text-red-500' : item.status === 'loading' ? 'text-orange-400' : 'text-blue-500'}`}>
{item.status === 'loading' ? (
@@ -1554,6 +1574,34 @@ export const AddDownloadsModal = () => {
<div className="add-download-settings w-[45%] flex flex-col overflow-y-auto">
<div className="p-6 space-y-5">
{selectedReadyMediaItems.length > 1 ? (
<section className="add-download-section add-download-media-section relative overflow-hidden p-4">
<div className="flex flex-col gap-1.5 relative z-10">
<label className="text-[10px] uppercase font-bold tracking-wider text-text-muted">
{t($ => $.addDownloads.applyQualityToSelected)}
</label>
{bulkQualityOptions.length > 0 ? (
<div className="flex flex-wrap gap-1.5" role="group" aria-label={t($ => $.addDownloads.applyQualityToSelected)}>
{bulkQualityOptions.map(quality => (
<button
key={quality}
type="button"
onClick={() => applyBulkMediaQuality(quality)}
className="add-download-quality-chip add-download-quality-chip-button"
>
{quality}
</button>
))}
</div>
) : (
<span className="text-[10px] text-text-muted">
{t($ => $.addDownloads.noCommonQuality)}
</span>
)}
</div>
</section>
) : null}
{/* Media Format (Dynamic) */}
{selectedItemIndex !== null && parsedItems[selectedItemIndex]?.isMedia && (
<section className="add-download-section add-download-media-section relative overflow-hidden p-4">
+49 -3
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { useDownloadProgressStore } from '../store/downloadProgressStore';
import { Play, Pause, MoreVertical, Clock, ArrowUp, ArrowDown } from 'lucide-react';
import { Play, Pause, MoreVertical, Clock, ArrowUp, ArrowDown, GripVertical } from 'lucide-react';
import type { DownloadItem as DownloadItemType } from '../bindings/DownloadItem';
import { canPauseDownload, canStartDownload } from '../utils/downloadActions';
import { useTranslation } from 'react-i18next';
@@ -32,7 +32,10 @@ interface DownloadItemProps {
handleResume: (item: DownloadItemType) => void;
getCategoryIcon: (category: string) => React.ReactNode;
isSelected: boolean;
isQueueReorderable: boolean;
isQueueDragSource: boolean;
onMoveInQueue: (id: string, direction: 'up' | 'down') => void;
onQueueDragStart: (id: string, event: React.PointerEvent<HTMLButtonElement>) => void;
onClick: (e: React.MouseEvent, item: DownloadItemType) => void;
}
@@ -50,7 +53,10 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
handleResume,
getCategoryIcon,
isSelected,
isQueueReorderable,
isQueueDragSource,
onMoveInQueue,
onQueueDragStart,
onClick,
}) => {
const { t } = useTranslation();
@@ -60,6 +66,11 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
const [isRowFocused, setIsRowFocused] = React.useState(false);
const [actionPosition, setActionPosition] = React.useState<React.CSSProperties | undefined>();
const isActionVisible = isRowHovered || isRowFocused;
const mediaQualityLabel = (() => {
if (!download.isMedia || typeof download.mediaQuality !== 'string') return undefined;
const normalized = download.mediaQuality.replace(/[\u0000-\u001f\u007f]+/g, ' ').replace(/\s+/g, ' ').trim();
return normalized.length > 0 && normalized.length <= 48 ? normalized : undefined;
})();
const updateActionPosition = React.useCallback(() => {
const row = rowRef.current;
@@ -182,12 +193,32 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
style={columnStyle('File Name')}
>
<div className="download-cell-content">
{isQueueReorderable ? (
<button
type="button"
className="download-queue-drag-handle app-icon-button"
aria-label={t($ => $.downloadTable.queueDragHandle, { fileName: download.fileName })}
title={t($ => $.downloadTable.queueDragHandle, { fileName: download.fileName })}
onPointerDown={event => {
event.stopPropagation();
onQueueDragStart(download.id, event);
}}
onClick={event => event.stopPropagation()}
>
<GripVertical size={13} aria-hidden="true" />
</button>
) : null}
<span className="shrink-0 text-text-muted">
{getCategoryIcon(download.category)}
</span>
<span className="download-file-name" title={download.fileName}>
{download.fileName}
</span>
{mediaQualityLabel ? (
<span className="download-quality-chip shrink-0" title={t($ => $.addDownloads.quality)}>
{mediaQualityLabel}
</span>
) : null}
</div>
</div>
),
@@ -314,7 +345,7 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
onClick={(e) => e.stopPropagation()}
onDoubleClick={(e) => e.stopPropagation()}
>
{(download.status === 'queued' || download.status === 'staged') && queueIndex !== -1 && (
{isQueueReorderable && queueIndex !== -1 && (
<>
<button
onClick={() => onMoveInQueue(download.id, 'up')}
@@ -360,7 +391,8 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
return (
<div
ref={rowRef}
className={`download-row group cursor-default relative ${isActionVisible ? 'has-visible-actions' : ''} ${index % 2 !== 0 ? 'striped' : ''} ${isSelected ? 'is-selected' : ''}`}
data-download-id={download.id}
className={`download-row group cursor-default relative ${isActionVisible ? 'has-visible-actions' : ''} ${index % 2 !== 0 ? 'striped' : ''} ${isSelected ? 'is-selected' : ''} ${isQueueDragSource ? 'is-queue-drag-source' : ''}`}
style={{ gridTemplateColumns: tableGridTemplate, minWidth: tableMinWidth }}
tabIndex={0}
onMouseEnter={() => {
@@ -384,6 +416,20 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
}
}}
onClick={(e) => onClick(e, download)}
onKeyDown={event => {
if (
isQueueReorderable &&
event.altKey &&
!event.metaKey &&
!event.ctrlKey &&
!event.shiftKey &&
(event.key === 'ArrowUp' || event.key === 'ArrowDown')
) {
event.preventDefault();
event.stopPropagation();
onMoveInQueue(download.id, event.key === 'ArrowUp' ? 'up' : 'down');
}
}}
onContextMenu={(e) => {
e.preventDefault();
setContextMenu({ x: e.clientX, y: e.clientY, id: download.id });
+217 -2
View File
@@ -49,6 +49,9 @@ import {
type DownloadColumnAlignment,
type DownloadTableColumnKey
} from '../utils/downloadTableColumns';
import {
targetIndexForBoundary
} from '../utils/queueOrdering';
interface DownloadTableProps {
filter: SidebarFilter;
@@ -100,9 +103,28 @@ interface ColumnLayoutBounds {
right: number;
}
interface QueueDragState {
pointerId: number;
sourceId: string;
queueId: string;
ids: string[];
startY: number;
active: boolean;
targetIndex: number;
markerTop: number;
}
export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
const { t } = useTranslation();
const { downloads, queues, assignToQueue, openDeleteModal, redownload, moveInQueue } = useDownloadStore();
const {
downloads,
queues,
assignToQueue,
openDeleteModal,
redownload,
moveInQueue,
moveManyInQueueToPosition
} = useDownloadStore();
const progressMap = useDownloadProgressStore(state => state.progressMap);
const { addToast } = useToast();
const isMac = navigator.userAgent.includes('Mac');
@@ -153,6 +175,11 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
const selectedIdsRef = useRef(selectedIds);
const lastSelectedIdRef = useRef(lastSelectedId);
const sortedDownloadsRef = useRef<DownloadItem[]>([]);
const queueListElementRef = useRef<HTMLDivElement | null>(null);
const queueReorderableDownloadsRef = useRef<DownloadItem[]>([]);
const queueDragStateRef = useRef<QueueDragState | null>(null);
const queueDragCleanupRef = useRef<(() => void) | null>(null);
const [queueDragState, setQueueDragState] = useState<QueueDragState | null>(null);
selectedIdsRef.current = selectedIds;
lastSelectedIdRef.current = lastSelectedId;
const [columnWidths, setColumnWidths] = useState(() => {
@@ -195,6 +222,10 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
);
const tableMinWidthWithPadding = 'calc(' + tableMinWidth + 'px + var(--download-row-padding-x) + var(--download-row-padding-x))';
const downloadsViewRef = useRef<HTMLDivElement>(null);
const queueListRef = useCallback((element: HTMLDivElement | null) => {
queueListElementRef.current = element;
animationParent(element);
}, [animationParent]);
const updateColumnDragState = (next: ColumnDragState | null) => {
columnDragStateRef.current = next;
@@ -545,7 +576,10 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
useEffect(() => () => {
resizeCleanupRef.current?.();
columnDragCleanupRef.current?.();
queueDragCleanupRef.current?.();
columnDragCleanupRef.current = null;
queueDragCleanupRef.current = null;
queueDragStateRef.current = null;
const captureTarget = columnDragCaptureTargetRef.current;
const capturePointerId = columnDragCapturePointerIdRef.current;
columnDragTargetRef.current = null;
@@ -632,6 +666,140 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
addToast({ message: `${message}: ${detail}`, variant: 'error', isActionable: true });
}, [addToast]);
const queueRowForId = (id: string): HTMLElement | null => {
const list = queueListElementRef.current;
if (!list) return null;
return Array.from(list.children).find(element =>
element instanceof HTMLElement && element.dataset.downloadId === id
) as HTMLElement | undefined || null;
};
const queueDropPosition = (
clientY: number,
items: DownloadItem[],
selectedIds: ReadonlySet<string>
): { targetIndex: number; markerTop: number } => {
const list = queueListElementRef.current;
if (!list || items.length === 0) return { targetIndex: 0, markerTop: 0 };
const listRect = list.getBoundingClientRect();
let boundaryIndex = items.length;
let markerTop = 0;
for (let index = 0; index < items.length; index += 1) {
const row = queueRowForId(items[index].id);
if (!row) continue;
const rect = row.getBoundingClientRect();
if (clientY < rect.top + rect.height / 2) {
boundaryIndex = index;
markerTop = rect.top - listRect.top + list.scrollTop;
break;
}
markerTop = rect.bottom - listRect.top + list.scrollTop;
}
return {
targetIndex: targetIndexForBoundary(items, selectedIds, boundaryIndex),
markerTop: Math.max(0, markerTop)
};
};
const finishQueueDrag = (cancelled = false) => {
const current = queueDragStateRef.current;
if (!current) return;
queueDragCleanupRef.current?.();
queueDragCleanupRef.current = null;
queueDragStateRef.current = null;
setQueueDragState(null);
if (!cancelled && current.active) {
void moveManyInQueueToPosition(current.ids, current.queueId, current.targetIndex)
.catch(error => showInteractionError(t($ => $.downloadTable.queueReorderFailed), error));
}
window.requestAnimationFrame(() => {
queueRowForId(current.sourceId)?.focus({ preventScroll: true });
});
};
const handleQueueDragStart = (
id: string,
event: React.PointerEvent<HTMLButtonElement>
) => {
if (!queueReorderingEnabled || event.button !== 0) return;
const currentDownloads = useDownloadStore.getState().downloads;
const source = currentDownloads.find(download => download.id === id);
if (!source) return;
const reorderableById = new Map(
queueReorderableDownloadsRef.current.map(download => [download.id, download])
);
if (!reorderableById.has(id)) return;
const currentSelectedIds = selectedIdsRef.current;
const ids = (currentSelectedIds.has(id) ? Array.from(currentSelectedIds) : [id])
.filter(selectedId => {
const selected = reorderableById.get(selectedId);
return selected && (selected.queueId || MAIN_QUEUE_ID) === (source.queueId || MAIN_QUEUE_ID);
});
if (!ids.includes(id)) return;
if (!currentSelectedIds.has(id)) {
setSelectedIds(new Set([id]));
setLastSelectedId(id);
}
queueDragCleanupRef.current?.();
const queueId = source.queueId || MAIN_QUEUE_ID;
const selectedIdSet = new Set(ids);
const initialItems = queueReorderableDownloadsRef.current
.filter(download => (download.queueId || MAIN_QUEUE_ID) === queueId);
const initialPosition = queueDropPosition(event.clientY, initialItems, selectedIdSet);
const initialState: QueueDragState = {
pointerId: event.pointerId,
sourceId: id,
queueId,
ids,
startY: event.clientY,
active: false,
...initialPosition
};
queueDragStateRef.current = initialState;
setQueueDragState(initialState);
const pointerMove = (pointerEvent: PointerEvent) => {
if (pointerEvent.pointerId !== event.pointerId) return;
const drag = queueDragStateRef.current;
if (!drag) return;
const distance = Math.abs(pointerEvent.clientY - drag.startY);
if (!drag.active && distance < 5) return;
const items = queueReorderableDownloadsRef.current
.filter(download => (download.queueId || MAIN_QUEUE_ID) === drag.queueId);
const nextPosition = queueDropPosition(pointerEvent.clientY, items, new Set(drag.ids));
const nextState = { ...drag, ...nextPosition, active: true };
queueDragStateRef.current = nextState;
setQueueDragState(nextState);
pointerEvent.preventDefault();
};
const pointerUp = (pointerEvent: PointerEvent) => {
if (pointerEvent.pointerId === event.pointerId) finishQueueDrag();
};
const pointerCancel = (pointerEvent: PointerEvent) => {
if (pointerEvent.pointerId === event.pointerId) finishQueueDrag(true);
};
const cancel = () => finishQueueDrag(true);
window.addEventListener('pointermove', pointerMove);
window.addEventListener('pointerup', pointerUp);
window.addEventListener('pointercancel', pointerCancel);
window.addEventListener('blur', cancel);
document.addEventListener('visibilitychange', cancel);
queueDragCleanupRef.current = () => {
window.removeEventListener('pointermove', pointerMove);
window.removeEventListener('pointerup', pointerUp);
window.removeEventListener('pointercancel', pointerCancel);
window.removeEventListener('blur', cancel);
document.removeEventListener('visibilitychange', cancel);
};
};
const getDownloadPath = useCallback(async (item: DownloadItem) => {
const fileName = item.fileName?.trim();
if (!fileName) return null;
@@ -722,6 +890,38 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
: sortDownloads(filteredDownloads, isQueueFilter ? queueSortConfig! : sortConfig),
[filteredDownloads, isQueueFilter, queueSortConfig, sortConfig]);
const queueReorderingEnabled = isQueueFilter && !queueSortConfig;
const queueReorderableDownloads = useMemo(
() => queueReorderingEnabled
? sortedDownloads.filter(download =>
download.status !== 'completed' &&
!(isActiveDownloadStatus(download.status) && download.status !== 'queued')
)
: [],
[queueReorderingEnabled, sortedDownloads]
);
const queueReorderableIds = useMemo(
() => new Set(queueReorderableDownloads.map(download => download.id)),
[queueReorderableDownloads]
);
queueReorderableDownloadsRef.current = queueReorderableDownloads;
useEffect(() => {
const current = queueDragStateRef.current;
if (!current) return;
const currentQueueIds = new Set(
queueReorderableDownloads
.filter(download => (download.queueId || MAIN_QUEUE_ID) === current.queueId)
.map(download => download.id)
);
if (
!queueReorderingEnabled ||
current.ids.some(id => !currentQueueIds.has(id))
) {
finishQueueDrag(true);
}
}, [queueReorderableDownloads, queueReorderingEnabled]);
const selectedDownloads = useMemo(
() => filteredDownloads.filter(download => selectedIds.has(download.id)),
[filteredDownloads, selectedIds]
@@ -1063,6 +1263,11 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
<div className="downloads-title">
{getFilterTitle()}
<span className="downloads-count">{sortedDownloads.length}</span>
{queueReorderingEnabled && queueReorderableDownloads.length > 0 ? (
<span className="downloads-queue-reorder-hint">
{t($ => $.downloadTable.queueReorderHint)}
</span>
) : null}
</div>
<div className="downloads-summary">
<span className="downloads-summary-scope">{summaryScopeLabel}</span>
@@ -1188,7 +1393,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
)}
<div className="download-table-body" style={{ minWidth: tableMinWidthWithPadding }}>
<div className="download-table-list" ref={animationParent}>
<div className="download-table-list" ref={queueListRef}>
{sortedDownloads.length === 0 ? (
<div className="downloads-empty-state">
<ArrowDownCircle aria-hidden="true" />
@@ -1235,10 +1440,20 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
handleResume={handleResume}
getCategoryIcon={getCategoryIcon}
isSelected={selectedIds.has(d.id)}
isQueueReorderable={queueReorderableIds.has(d.id)}
isQueueDragSource={Boolean(queueDragState?.active && queueDragState.ids.includes(d.id))}
onMoveInQueue={handleMoveInQueue}
onQueueDragStart={handleQueueDragStart}
onClick={handleItemClick}
/>
))}
{queueDragState?.active ? (
<div
className="download-queue-drop-marker"
style={{ top: `${queueDragState.markerTop}px` }}
aria-hidden="true"
/>
) : null}
<div className="flex-1 min-h-0 bg-transparent pointer-events-none" />
</>
)}
+6
View File
@@ -370,6 +370,9 @@ const common = {
clickToAdd: 'Click',
addButtonOr: 'button or',
toAddDownloads: 'to add downloads',
queueReorderHint: 'Drag the handle to reorder. Alt+Arrow Up/Down also moves the focused row.',
queueDragHandle: 'Drag {{fileName}} to reorder',
queueReorderFailed: 'Could not reorder downloads',
nonResumableOne: '1 download does not support resuming. If you pause it, you will have to start over again later. Are you sure you want to pause?',
nonResumableMany: '{{count}} downloads do not support resuming. If you pause them, you will have to start over again later. Are you sure you want to pause?',
interactionError: '{{message}}: {{detail}}',
@@ -456,6 +459,9 @@ const common = {
fetchingMediaStreams: 'Fetching media streams...',
availableStreams: 'Available Streams',
availableMediaStreams: 'Available media streams',
quality: 'Quality',
applyQualityToSelected: 'Apply exact quality to selected media',
noCommonQuality: 'No exact quality is available for every selected media item.',
metadataUnavailable: 'Metadata unavailable. Refresh metadata before adding this media.',
saveLocation: 'Save Location',
browse: 'Browse',
+6
View File
@@ -370,6 +370,9 @@ const fa = {
clickToAdd: 'برای افزودن دانلودها، روی',
addButtonOr: 'یا',
toAddDownloads: 'کلیک کنید',
queueReorderHint: 'دسته را بکشید تا جابه‌جا شود. با Alt+فلش بالا/پایین نیز ردیف انتخاب‌شده جابه‌جا می‌شود.',
queueDragHandle: 'کشیدن {{fileName}} برای جابه‌جایی',
queueReorderFailed: 'جابه‌جایی دانلودها ناموفق بود',
nonResumableOne: '۱ دانلود از ادامه‌دادن پشتیبانی نمی‌کند. اگر آن را متوقف کنید، بعداً باید از ابتدا شروع کنید. آیا از توقف آن مطمئن هستید؟',
nonResumableMany: '{{count}} دانلود از ادامه‌دادن پشتیبانی نمی‌کنند. اگر آن‌ها را متوقف کنید، بعداً باید از ابتدا شروع کنید. آیا از توقف آن‌ها مطمئن هستید؟',
interactionError: '{{message}}: {{detail}}',
@@ -456,6 +459,9 @@ const fa = {
fetchingMediaStreams: 'در حال دریافت جریان‌های رسانه…',
availableStreams: 'جریان‌های موجود',
availableMediaStreams: 'جریان‌های رسانه موجود',
quality: 'کیفیت',
applyQualityToSelected: 'اعمال کیفیت دقیق برای رسانه‌های انتخاب‌شده',
noCommonQuality: 'کیفیت دقیقی برای همه رسانه‌های انتخاب‌شده وجود ندارد.',
metadataUnavailable: 'متادیتا در دسترس نیست. پیش از افزودن این رسانه، متادیتا را تازه‌سازی کنید.',
saveLocation: 'محل ذخیره',
browse: 'انتخاب…',
+6
View File
@@ -370,6 +370,9 @@ const he = {
clickToAdd: 'לחץ על לחצן',
addButtonOr: 'או',
toAddDownloads: 'כדי להוסיף הורדות',
queueReorderHint: 'גררו את הידית כדי לשנות את הסדר. Alt+חץ למעלה/למטה מזיז גם את השורה הממוקדת.',
queueDragHandle: 'גררו את {{fileName}} כדי לשנות את הסדר',
queueReorderFailed: 'לא ניתן לשנות את סדר ההורדות',
nonResumableOne: 'הורדה אחת אינה תומכת בחידוש. אם תשהה אותה, תצטרך להתחיל מהתחלה מאוחר יותר. האם ברצונך להשהות?',
nonResumableMany: '{{count}} הורדות אינן תומכות בחידוש. אם תשהה אותן, תצטרך להתחיל מהתחלה מאוחר יותר. האם ברצונך להשהות?',
interactionError: '{{message}}: {{detail}}',
@@ -456,6 +459,9 @@ const he = {
fetchingMediaStreams: 'טוען זרמי מדיה…',
availableStreams: 'זרמים זמינים',
availableMediaStreams: 'זרמי מדיה זמינים',
quality: 'איכות',
applyQualityToSelected: 'החלת איכות מדויקת על המדיה שנבחרה',
noCommonQuality: 'אין איכות מדויקת הזמינה לכל פריטי המדיה שנבחרו.',
metadataUnavailable: 'מטא נתונים אינם זמינים. רענן מטא נתונים לפני הוספת מדיה זו.',
saveLocation: 'מיקום שמירה',
browse: 'עיון…',
+6
View File
@@ -370,6 +370,9 @@ const ru = {
clickToAdd: 'Нажмите кнопку',
addButtonOr: 'или',
toAddDownloads: 'чтобы добавить загрузки',
queueReorderHint: 'Перетащите маркер для изменения порядка. Alt+стрелка вверх/вниз перемещает выбранную строку.',
queueDragHandle: 'Перетащите {{fileName}} для изменения порядка',
queueReorderFailed: 'Не удалось изменить порядок загрузок',
nonResumableOne: '1 загрузка не поддерживает возобновление. Если вы приостановите её, позже придётся начинать скачивание заново. Вы действительно хотите приостановить?',
nonResumableMany: '{{count}} загрузок не поддерживают возобновление. Если вы приостановите их, позже придётся начинать скачивание заново. Вы действительно хотите приостановить?',
interactionError: '{{message}}: {{detail}}',
@@ -456,6 +459,9 @@ const ru = {
fetchingMediaStreams: 'Получение медиапотоков…',
availableStreams: 'Доступные потоки',
availableMediaStreams: 'Доступные медиапотоки',
quality: 'Качество',
applyQualityToSelected: 'Применить точное качество к выбранным медиа',
noCommonQuality: 'Для всех выбранных медиа нет одинакового качества.',
metadataUnavailable: 'Метаданные недоступны. Обновите метаданные перед добавлением этого медиа.',
saveLocation: 'Папка сохранения',
browse: 'Обзор…',
+6
View File
@@ -370,6 +370,9 @@ const uk = {
clickToAdd: 'Натисніть',
addButtonOr: 'або',
toAddDownloads: 'щоб додати завантаження',
queueReorderHint: 'Перетягніть маркер, щоб змінити порядок. Alt+стрілка вгору/вниз переміщує сфокусований рядок.',
queueDragHandle: 'Перетягніть {{fileName}}, щоб змінити порядок',
queueReorderFailed: 'Не вдалося змінити порядок завантажень',
nonResumableOne: '1 завантаження не підтримує відновлення. Якщо ви призупините його, вам доведеться почати спочатку пізніше. Ви впевнені, що хочете призупинити?',
nonResumableMany: '{{count}} завантажень не підтримують відновлення. Якщо ви призупините їх, вам доведеться почати спочатку пізніше. Ви впевнені, що хочете призупинити?',
interactionError: '{{message}}: {{detail}}',
@@ -456,6 +459,9 @@ const uk = {
fetchingMediaStreams: 'Отримання медіапотоків…',
availableStreams: 'Доступні потоки',
availableMediaStreams: 'Доступні медіапотоки',
quality: 'Якість',
applyQualityToSelected: 'Застосувати точну якість до вибраних медіа',
noCommonQuality: 'Для всіх вибраних медіа немає однакової якості.',
metadataUnavailable: 'Метадані недоступні. Оновіть метадані перед додаванням цього медіа.',
saveLocation: 'Місце збереження',
browse: 'Огляд…',
+6
View File
@@ -370,6 +370,9 @@ const zhCN = {
clickToAdd: '点击',
addButtonOr: '按钮或',
toAddDownloads: '来添加下载',
queueReorderHint: '拖动手柄调整顺序。Alt+上/下箭头也可移动当前行。',
queueDragHandle: '拖动 {{fileName}} 调整顺序',
queueReorderFailed: '无法调整下载顺序',
nonResumableOne: '1 个下载不支持断点续传。如果您暂停它,稍后您将不得不重新开始。确定要暂停吗?',
nonResumableMany: '{{count}} 个下载不支持断点续传。如果您暂停它们,稍后您将不得不重新开始。确定要暂停吗?',
interactionError: '{{message}}{{detail}}',
@@ -456,6 +459,9 @@ const zhCN = {
fetchingMediaStreams: '正在获取媒体流…',
availableStreams: '可用流',
availableMediaStreams: '可用的媒体流',
quality: '画质',
applyQualityToSelected: '将精确画质应用到选中的媒体',
noCommonQuality: '所选媒体没有共同的精确画质。',
metadataUnavailable: '元数据不可用。在添加此媒体之前,请刷新元数据。',
saveLocation: '保存位置',
browse: '浏览',
+73
View File
@@ -726,6 +726,33 @@ html[data-list-density="relaxed"] {
box-shadow: inset 3px 0 0 hsl(272 74% 62% / 0.9);
}
.add-download-quality-chip,
.download-quality-chip {
display: inline-flex;
align-items: center;
min-height: 18px;
padding: 1px 6px;
border: 1px solid hsl(272 74% 62% / 0.32);
border-radius: 999px;
background: hsl(272 74% 58% / 0.12);
color: hsl(272 74% 62%);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.01em;
}
.add-download-quality-chip-button {
cursor: pointer;
transition: background-color 100ms ease, border-color 100ms ease;
}
.add-download-quality-chip-button:hover,
.add-download-quality-chip-button:focus-visible {
border-color: hsl(272 74% 62% / 0.72);
background: hsl(272 74% 58% / 0.24);
}
.add-download-select {
appearance: auto;
cursor: default;
@@ -1933,6 +1960,15 @@ html[data-list-density="relaxed"] {
font-weight: 600;
}
.downloads-queue-reorder-hint {
max-width: 340px;
color: hsl(var(--text-muted));
font-size: 10px;
font-weight: 500;
line-height: 1.25;
letter-spacing: 0;
}
.download-table-scroll {
flex: 1;
display: flex;
@@ -2103,6 +2139,7 @@ body.is-column-resizing .column-resize-handle:hover::after {
}
.download-table-list {
position: relative;
height: 100%;
min-height: 0;
overflow-x: hidden;
@@ -2111,6 +2148,18 @@ body.is-column-resizing .column-resize-handle:hover::after {
flex-direction: column;
}
.download-queue-drop-marker {
position: absolute;
inset-inline: 0;
z-index: 8;
height: 2px;
pointer-events: none;
border-radius: 999px;
background: hsl(var(--accent-color));
box-shadow: 0 0 0 1px hsl(var(--accent-color) / 0.18), 0 0 8px hsl(var(--accent-color) / 0.55);
transform: translateY(-1px);
}
.download-row {
flex: 0 0 var(--download-row-height);
height: var(--download-row-height);
@@ -2162,6 +2211,30 @@ html[data-list-density="relaxed"] .download-ghost-row {
background: hsl(var(--accent-color) / 0.32) !important;
}
.download-row.is-queue-drag-source {
opacity: 0.48;
}
.download-queue-drag-handle {
flex: 0 0 auto;
width: 20px;
height: 22px;
margin-inline-start: -4px;
color: hsl(var(--text-muted));
cursor: grab;
touch-action: none;
}
.download-queue-drag-handle:hover,
.download-queue-drag-handle:focus-visible {
color: hsl(var(--text-primary));
background: hsl(var(--item-hover));
}
.download-queue-drag-handle:active {
cursor: grabbing;
}
.download-row:focus-visible {
outline: 2px solid hsl(var(--accent-color) / 0.7);
outline-offset: -1px;
+1 -1
View File
@@ -98,7 +98,7 @@ type CommandMap = {
cancel_enqueue_generation: { args: { id: string; generation: string }; result: void };
enqueue_many: { args: { items: EnqueueItem[] }; result: import('./bindings/EnqueueResult').EnqueueResult[] };
move_in_queue: { args: { id: string; queueId: string; direction: 'up' | 'down' }; result: string[] };
move_many_in_queue: { args: { ids: string[]; queueId: string; direction: 'up' | 'down' }; result: string[] };
move_many_in_queue: { args: { ids: string[]; queueId: string; direction: 'up' | 'down'; targetIndex?: number }; result: string[] };
remove_from_queue: { args: { id: string }; result: boolean };
};
+46
View File
@@ -1575,6 +1575,52 @@ describe('useDownloadStore', () => {
expect(new Set(positions).size).toBe(4);
});
it('translates a drag target around staged rows before the atomic backend move', async () => {
useDownloadStore.setState({
downloads: [
{ id: 'a', status: 'queued', queueId: 'drag-queue', queuePosition: 0 },
{ id: 'staged', status: 'staged', queueId: 'drag-queue', queuePosition: 1 },
{ id: 'b', status: 'queued', queueId: 'drag-queue', queuePosition: 2 },
{ id: 'c', status: 'queued', queueId: 'drag-queue', queuePosition: 3 }
] as any[],
backendRegisteredIds: new Set(['a', 'b', 'c']),
pendingOrder: ['a', 'b', 'c']
});
vi.mocked(ipc.invokeCommand).mockImplementation(async (command: string) => {
if (command === 'move_many_in_queue') return ['c', 'a', 'b'];
if (command === 'get_pending_order') return ['c', 'a', 'b'];
return undefined;
});
await useDownloadStore.getState().moveManyInQueueToPosition('c', 'drag-queue', 0);
expect(vi.mocked(ipc.invokeCommand)).toHaveBeenCalledWith('move_many_in_queue', {
ids: ['c'],
queueId: 'drag-queue',
direction: 'up',
targetIndex: 0
});
expect(useDownloadStore.getState().downloads.map(item => item.id).sort()).toEqual(['a', 'b', 'c', 'staged']);
expect(useDownloadStore.getState().downloads.find(item => item.id === 'c')?.queuePosition).toBe(0);
expect(useDownloadStore.getState().downloads.find(item => item.id === 'staged')?.queuePosition).toBe(2);
});
it('rolls back a failed drag move and rejects so the UI can report the failure', async () => {
useDownloadStore.setState({
downloads: [
{ id: 'first', status: 'queued', queueId: 'rollback-queue', queuePosition: 0 },
{ id: 'second', status: 'queued', queueId: 'rollback-queue', queuePosition: 1 }
] as any[],
backendRegisteredIds: new Set(['first', 'second'])
});
vi.mocked(ipc.invokeCommand).mockRejectedValue(new Error('backend unavailable'));
await expect(
useDownloadStore.getState().moveManyInQueueToPosition('second', 'rollback-queue', 0)
).rejects.toThrow('backend unavailable');
expect(useDownloadStore.getState().downloads.map(item => item.queuePosition)).toEqual([0, 1]);
});
it('detaches a registered queued item through the backend before reassigning it', async () => {
useDownloadStore.setState({
downloads: [{
+83
View File
@@ -15,6 +15,10 @@ import {
} from '../utils/downloadLocations';
import { canPauseDownload, canStartDownload } from '../utils/downloadActions';
import { updateDockBadge } from '../utils/dockBadge';
import {
moveSelectedBlockToIndex,
targetIndexForDesiredOrder
} from '../utils/queueOrdering';
import i18n from '../i18n';
export type { DownloadCategory } from '../utils/downloads';
@@ -659,6 +663,7 @@ interface DownloadState {
unregisterBackendIds: (ids: string[]) => void;
applyProperties: (id: string, updates: Partial<DownloadItem>) => Promise<void>;
moveInQueue: (ids: string | string[], direction: 'up' | 'down') => Promise<void>;
moveManyInQueueToPosition: (ids: string | string[], queueId: string, targetIndex: number) => Promise<void>;
removeFromQueue: (id: string) => Promise<void>;
isAddModalOpen: boolean;
pendingAddUrls: string;
@@ -904,6 +909,84 @@ export const useDownloadStore = create<DownloadState>((set, get) => {
queueReorderPromises.set(queueId, trackedOperation);
return trackedOperation;
},
moveManyInQueueToPosition: (idOrIds, queueId, targetIndex) => {
const ids = Array.isArray(idOrIds) ? idOrIds : [idOrIds];
if (ids.length === 0) return Promise.resolve();
// Dragging must be one serialized, atomic queue operation. This prevents
// a second drag or a keyboard move from calculating against stale order
// while the backend is still applying the first drop.
const previousOperation = queueReorderPromises.get(queueId) ?? Promise.resolve();
const operation = previousOperation.catch(() => undefined).then(async () => {
const allDownloads = get().downloads;
const queueItems = queueItemsForReordering(allDownloads, queueId);
const selectedItems = queueItems.filter(item => ids.includes(item.id));
if (selectedItems.length === 0) return;
const selectedIds = new Set(selectedItems.map(item => item.id));
const previousPositions = new Map([
...activeQueueItems(allDownloads, queueId),
...queueItems
].map(item => [item.id, item.queuePosition]));
const reordered = moveSelectedBlockToIndex(queueItems, selectedIds, targetIndex);
set(state => ({ downloads: applyQueueOrder(state.downloads, queueId, reordered) }));
const registeredIdsToMove = selectedItems
.filter(item => get().backendRegisteredIds.has(item.id))
.map(item => item.id);
if (registeredIdsToMove.length === 0) return;
// Staged rows are deliberately not registered with the backend. Convert
// the desired local order to a registered-only target before IPC so a
// staged row never shifts the backend insertion index.
const registeredItems = queueItems.filter(item => get().backendRegisteredIds.has(item.id));
const registeredSelectedIds = new Set(registeredIdsToMove);
const registeredDesiredOrder = reordered.filter(item => get().backendRegisteredIds.has(item.id));
const backendTargetIndex = targetIndexForDesiredOrder(
registeredItems,
registeredSelectedIds,
registeredDesiredOrder
);
try {
const order = await invoke('move_many_in_queue', {
ids: registeredIdsToMove,
queueId,
direction: 'up',
targetIndex: backendTargetIndex
}) as string[];
if (Array.isArray(order)) {
const globalOrder = await invoke('get_pending_order', { queueId: null })
.catch(() => null) as string[] | null;
set(state => ({
pendingOrder: Array.isArray(globalOrder)
? globalOrder
: [
...state.pendingOrder.filter(id => !order.includes(id)),
...order
]
}));
}
} catch (error) {
console.error("Failed to move queue block to position:", error);
// The backend operation is atomic. Restore only queue positions so a
// progress/state event received while the RPC was in flight survives.
set(state => ({
downloads: state.downloads.map(download => previousPositions.has(download.id)
? { ...download, queuePosition: previousPositions.get(download.id) }
: download)
}));
throw error;
}
});
const trackedOperation = operation.finally(() => {
if (queueReorderPromises.get(queueId) === trackedOperation) {
queueReorderPromises.delete(queueId);
}
});
queueReorderPromises.set(queueId, trackedOperation);
return trackedOperation;
},
removeFromQueue: async (id) => {
try {
await invoke('remove_from_queue', { id });
+49
View File
@@ -2,13 +2,16 @@ import { describe, expect, it } from 'vitest';
import {
appendRequestUrlsAfterVersion,
canSubmitMetadataRows,
commonMediaQualitiesForRows,
mediaFormatSelectorForRow,
mediaFileNameForSelectedFormat,
mediaQualityForRow,
metadataSummaryMessage,
isYouTubePlaylistUrl,
playlistFilePrefix,
reconcileDownloadRows,
refreshFailedMetadataRows,
selectExactMediaQuality,
updateRowIfCurrent,
type AddDownloadDraftRow
} from './addDownloadMetadata';
@@ -539,6 +542,52 @@ describe('add download metadata workflow', () => {
])).toContain('Correct or remove 1 invalid URL');
});
it('offers only qualities shared by every selected ready media row', () => {
const formats = (qualities: string[]) => qualities.map((quality, index) => ({
name: `${quality} MP4`,
quality,
selector: `${quality}-${index}`,
ext: 'mp4',
formatLabel: quality,
detail: '10 MB',
type: 'Video',
bytes: 10
}));
const rows = [
row({ id: 'one', isMedia: true, formats: formats(['1080p', '720p']), selectedFormat: 0 }),
row({ id: 'two', isMedia: true, formats: formats(['720p', '480p']), selectedFormat: 0 })
];
expect(commonMediaQualitiesForRows(rows)).toEqual(['720p']);
expect(mediaQualityForRow(rows[0])).toBe('1080p');
});
it('applies an exact bulk quality without falling back to a higher or lower stream', () => {
const mediaRow = row({
id: 'media',
file: 'clip.mp4',
isMedia: true,
formats: [{
name: '1080p MP4',
quality: '1080p',
selector: '1080',
ext: 'mp4',
formatLabel: '1080p',
detail: '10 MB',
type: 'Video',
bytes: 10
}],
selectedFormat: 0
});
const unchanged = selectExactMediaQuality([mediaRow], ['media'], '720p');
expect(unchanged[0]).toBe(mediaRow);
expect(selectExactMediaQuality([mediaRow], ['media'], '1080p')[0]).toMatchObject({
selectedFormat: 0,
file: 'clip.mp4'
});
});
it('uses few forms for Russian and Ukrainian metadata summaries', async () => {
const originalLanguage = i18n.language;
const twoReadyRows = [row(), row({ id: 'row-2' })];
+68
View File
@@ -11,6 +11,7 @@ export type MetadataStatus = 'loading' | 'ready' | 'metadata-error' | 'invalid';
export interface AddMediaFormat {
name: string;
quality?: string;
selector: string;
ext: string;
formatLabel: string;
@@ -331,6 +332,73 @@ export const mediaFormatSelectorForRow = (
return row.formats?.[row.selectedFormat]?.selector;
};
const normalizeMediaQualityLabel = (value: string | undefined): string => {
const normalized = value
?.replace(/[\u0000-\u001f\u007f]+/g, ' ')
.replace(/\s+/g, ' ')
.trim();
return normalized && normalized.length <= 48 ? normalized : '';
};
export const mediaQualityForFormat = (
format: Pick<AddMediaFormat, 'quality' | 'name' | 'type' | 'formatLabel' | 'ext'>
): string => {
const explicitQuality = normalizeMediaQualityLabel(format.quality);
if (explicitQuality) return explicitQuality;
const nameQuality = normalizeMediaQualityLabel(format.name.trim().split(/\s+/)[0]);
if (nameQuality) return nameQuality;
const label = normalizeMediaQualityLabel(format.formatLabel);
return label || normalizeMediaQualityLabel(format.type) || normalizeMediaQualityLabel(format.ext.toUpperCase()) || 'Media';
};
export const mediaQualityForRow = (
row: Pick<AddDownloadDraftRow, 'isMedia' | 'status' | 'formats' | 'selectedFormat'>
): string | undefined => {
if (!row.isMedia || row.status !== 'ready' || row.selectedFormat === undefined) return undefined;
const format = row.formats?.[row.selectedFormat];
return format ? mediaQualityForFormat(format) : undefined;
};
export const commonMediaQualitiesForRows = (
rows: ReadonlyArray<Pick<AddDownloadDraftRow, 'isMedia' | 'status' | 'formats'>>
): string[] => {
const readyMediaRows = rows.filter(row => row.isMedia && row.status === 'ready' && row.formats?.length);
if (readyMediaRows.length < 2) return [];
const firstQualities = Array.from(new Set(
readyMediaRows[0].formats!.map(mediaQualityForFormat)
));
return firstQualities.filter(quality => readyMediaRows.every(row =>
row.formats!.some(format => mediaQualityForFormat(format) === quality)
));
};
export const selectExactMediaQuality = (
rows: AddDownloadDraftRow[],
selectedIds: ReadonlySet<string> | readonly string[],
quality: string
): AddDownloadDraftRow[] => {
const selected = selectedIds instanceof Set ? selectedIds : new Set(selectedIds);
return rows.map(row => {
if (!selected.has(row.id) || !row.isMedia || row.status !== 'ready' || !row.formats) return row;
const selectedFormat = row.formats.findIndex(format => mediaQualityForFormat(format) === quality);
if (selectedFormat === -1) return row;
const format = row.formats[selectedFormat];
return {
...row,
selectedFormat,
size: format.bytes ? format.detail : undefined,
sizeBytes: format.bytes || undefined,
file: mediaFileNameForSelectedFormat(row.file, {
formats: row.formats,
selectedFormat
})
};
});
};
export const mediaFileNameForSelectedFormat = (
fileName: string,
row: Pick<AddDownloadDraftRow, 'formats' | 'selectedFormat'>
+32
View File
@@ -0,0 +1,32 @@
import { describe, expect, it } from 'vitest';
import {
moveSelectedBlockToIndex,
targetIndexForBoundary,
targetIndexForDesiredOrder
} from './queueOrdering';
const items = ['a', 'b', 'c', 'd'].map(id => ({ id }));
describe('queue ordering', () => {
it('moves discontiguous selection as one block', () => {
expect(moveSelectedBlockToIndex(items, ['b', 'd'], 1).map(item => item.id))
.toEqual(['a', 'b', 'd', 'c']);
});
it('translates pointer boundaries after selected rows are removed', () => {
expect(targetIndexForBoundary(items, ['b', 'd'], 2)).toBe(1);
expect(targetIndexForBoundary(items, ['b', 'd'], 3)).toBe(2);
});
it('computes a registered-only backend target from the desired local order', () => {
const current = [{ id: 'a' }, { id: 'staged' }, { id: 'b' }, { id: 'c' }];
const desired = [{ id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'staged' }];
expect(targetIndexForDesiredOrder(current, ['c'], desired)).toBe(2);
expect(targetIndexForDesiredOrder(
[{ id: 'a' }, { id: 'c' }],
['c'],
[{ id: 'a' }, { id: 'staged' }, { id: 'c' }]
)).toBe(1);
});
});
+61
View File
@@ -0,0 +1,61 @@
export interface QueueOrderItem {
id: string;
}
/**
* Move the selected rows as one block into an insertion position among the
* unselected rows. The position is intentionally defined after selection is
* removed so callers can use the same semantics for UI and backend queues.
*/
export const moveSelectedBlockToIndex = <T extends QueueOrderItem>(
items: T[],
selectedIds: ReadonlySet<string> | readonly string[],
targetIndex: number
): T[] => {
const selected = selectedIds instanceof Set ? selectedIds : new Set(selectedIds);
const selectedItems = items.filter(item => selected.has(item.id));
const unselectedItems = items.filter(item => !selected.has(item.id));
const insertionIndex = Math.max(0, Math.min(targetIndex, unselectedItems.length));
return [
...unselectedItems.slice(0, insertionIndex),
...selectedItems,
...unselectedItems.slice(insertionIndex)
];
};
/**
* Convert a pointer boundary in the original list to the insertion index
* used by moveSelectedBlockToIndex. A boundary is between rows and ranges
* from 0 (before the first row) through items.length (after the last row).
*/
export const targetIndexForBoundary = <T extends QueueOrderItem>(
items: T[],
selectedIds: ReadonlySet<string> | readonly string[],
boundaryIndex: number
): number => {
const selected = selectedIds instanceof Set ? selectedIds : new Set(selectedIds);
const boundary = Math.max(0, Math.min(boundaryIndex, items.length));
return items
.slice(0, boundary)
.reduce((count, item) => count + (selected.has(item.id) ? 0 : 1), 0);
};
/**
* Translate a desired local order to the backend's registered-only queue.
* Staged rows are not registered with the backend, so they must not affect
* the target index sent over IPC.
*/
export const targetIndexForDesiredOrder = <T extends QueueOrderItem>(
currentItems: T[],
selectedIds: ReadonlySet<string> | readonly string[],
desiredItems: T[]
): number => {
const selected = selectedIds instanceof Set ? selectedIds : new Set(selectedIds);
const currentIds = new Set(currentItems.map(item => item.id));
const firstSelectedIndex = desiredItems.findIndex(item => selected.has(item.id));
if (firstSelectedIndex === -1) return currentItems.filter(item => !selected.has(item.id)).length;
return desiredItems
.slice(0, firstSelectedIndex)
.reduce((count, item) => count + (selected.has(item.id) || !currentIds.has(item.id) ? 0 : 1), 0);
};