feat: added support for full-playlist/selective-batch downloading #9

2026-02-04 16:32:22 +05:30 · 2026-01-15 15:22:43 +05:30
parent 2b7ab9def4
commit 1eb23eb035
18 changed files with 768 additions and 290 deletions
--- a/src/components/pages/library/completedDownloads.tsx
+++ b/src/components/pages/library/completedDownloads.tsx
@@ -9,6 +9,7 @@ import { formatBitrate, formatCodec, formatDurationString, formatFileSize, pagin
 import { ArrowUpRightIcon, AudioLines, CircleArrowDown, Clock, File, FileAudio2, FileQuestion, FileVideo2, FolderInput, ListVideo, Music, Play, Search, Trash2, Video } from "lucide-react";
 import { invoke } from "@tauri-apps/api/core";
 import * as fs from "@tauri-apps/plugin-fs";
+import { dirname } from "@tauri-apps/api/path";
 import { DownloadState } from "@/types/download";
 import { useQueryClient } from "@tanstack/react-query";
 import { useDeleteDownloadState } from "@/services/mutations";
@@ -60,14 +61,31 @@ export function CompletedDownload({ state }: CompletedDownloadProps) {

    const removeFromDownloads = async (downloadState: DownloadState, delete_file: boolean) => {
        if (delete_file && downloadState.filepath) {
-            try {
-                if (await fs.exists(downloadState.filepath)) {
-                    await fs.remove(downloadState.filepath);
-                } else {
-                    console.error(`File not found: "${downloadState.filepath}"`);
+            const isMutilplePlaylistItems = downloadState.playlist_id !== null &&
+                downloadState.playlist_indices !== null &&
+                downloadState.playlist_indices.includes(',');
+
+            if (isMutilplePlaylistItems) {
+                const dirPath = await dirname(downloadState.filepath);
+                try {
+                    if (await fs.exists(dirPath)) {
+                        await fs.remove(dirPath, { recursive: true });
+                    } else {
+                        console.error(`Directory not found: "${dirPath}"`);
+                    }
+                } catch (e) {
+                    console.error(e);
+                }
+            } else {
+                try {
+                    if (await fs.exists(downloadState.filepath)) {
+                        await fs.remove(downloadState.filepath);
+                    } else {
+                        console.error(`File not found: "${downloadState.filepath}"`);
+                    }
+                } catch (e) {
+                    console.error(e);
                }
-            } catch (e) {
-                console.error(e);
            }
        }

@@ -77,11 +95,11 @@ export function CompletedDownload({ state }: CompletedDownloadProps) {
                queryClient.invalidateQueries({ queryKey: ['download-states'] });
                if (delete_file  && downloadState.filepath) {
                    toast.success("Deleted from downloads", {
-                        description: `The download for "${downloadState.title}" has been deleted successfully.`,
+                        description: `The download for ${isMutilplePlaylistItems ? 'playlist ' : ''}"${isMutilplePlaylistItems ? downloadState.playlist_title : downloadState.title}" has been deleted successfully.`,
                    });
                } else {
                    toast.success("Removed from downloads", {
-                        description: `The download for "${downloadState.title}" has been removed successfully.`,
+                        description: `The download for ${isMutilplePlaylistItems ? 'playlist ' : ''}"${isMutilplePlaylistItems ? downloadState.playlist_title : downloadState.title}" has been removed successfully.`,
                    });
                }
            },
@@ -89,11 +107,11 @@ export function CompletedDownload({ state }: CompletedDownloadProps) {
                console.error("Failed to delete download state:", error);
                if (delete_file  && downloadState.filepath) {
                    toast.error("Failed to delete download", {
-                        description: `An error occurred while trying to delete the download for "${downloadState.title}".`,
+                        description: `An error occurred while trying to delete the download for ${isMutilplePlaylistItems ? 'playlist ' : ''}"${isMutilplePlaylistItems ? downloadState.playlist_title : downloadState.title}".`,
                    });
                } else {
                    toast.error("Failed to remove download", {
-                        description: `An error occurred while trying to remove the download for "${downloadState.title}".`,
+                        description: `An error occurred while trying to remove the download for ${isMutilplePlaylistItems ? 'playlist ' : ''}"${isMutilplePlaylistItems ? downloadState.playlist_title : downloadState.title}".`,
                    });
                }
            }
@@ -125,31 +143,60 @@ export function CompletedDownload({ state }: CompletedDownloadProps) {
        isDeleteFileChecked: false,
    };

+    const isPlaylist = state.playlist_id !== null && state.playlist_indices !== null;
+    const isMutilplePlaylistItems = isPlaylist && state.playlist_indices && state.playlist_indices.includes(',');
+
    return (
        <div className="p-4 border border-border rounded-lg flex gap-4" key={state.download_id}>
            <div className="w-[30%] flex flex-col justify-between gap-2">
-                <AspectRatio ratio={16 / 9} className="w-full rounded-lg overflow-hidden border border-border mb-2">
-                    <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="" />
-                </AspectRatio>
-                <span className="w-full flex items-center justify-center text-xs border border-border py-1 px-2 rounded">
-                    {state.filetype && (state.filetype === 'video' || state.filetype === 'video+audio') && (
-                        <Video className="w-4 h-4 mr-2 stroke-primary" />
-                    )}
-                    {state.filetype && state.filetype === 'audio' && (
-                        <Music className="w-4 h-4 mr-2 stroke-primary" />
-                    )}
-                    {(!state.filetype) || (state.filetype && state.filetype !== 'video' && state.filetype !== 'audio' && state.filetype !== 'video+audio') && (
-                        <File className="w-4 h-4 mr-2 stroke-primary" />
-                    )}
-                    {state.ext ? state.ext.toUpperCase() : 'Unknown'} {state.resolution ? `(${state.resolution})` : null}
-                </span>
+                {isMutilplePlaylistItems ? (
+                    <div className="w-full relative flex items-center justify-center mt-2">
+                        <AspectRatio ratio={16 / 9} className="w-full rounded-lg overflow-hidden border border-border mb-2 z-20">
+                            <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="" />
+                        </AspectRatio>
+                        <div className="w-[95%] aspect-video absolute -top-1 rounded-lg overflow-hidden border border-border mb-2 z-10">
+                            <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="blur-xs brightness-75" />
+                        </div>
+                        <div className="w-[87%] aspect-video absolute -top-2 rounded-lg overflow-hidden border border-border mb-2 z-0">
+                            <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="blur-sm brightness-50" />
+                        </div>
+                    </div>
+                ) : (
+                    <AspectRatio ratio={16 / 9} className="w-full rounded-lg overflow-hidden border border-border mb-2">
+                        <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="" />
+                    </AspectRatio>
+                )}
+                {isMutilplePlaylistItems ? (
+                    <span className="w-full flex items-center justify-center text-xs border border-border py-1 px-2 rounded">
+                        <ListVideo className="w-4 h-4 mr-2 stroke-primary" /> Playlist ({state.playlist_indices?.split(',').length})
+                    </span>
+                ) : (
+                    <span className="w-full flex items-center justify-center text-xs border border-border py-1 px-2 rounded">
+                        {state.filetype && (state.filetype === 'video' || state.filetype === 'video+audio') && (
+                            <Video className="w-4 h-4 mr-2 stroke-primary" />
+                        )}
+                        {state.filetype && state.filetype === 'audio' && (
+                            <Music className="w-4 h-4 mr-2 stroke-primary" />
+                        )}
+                        {(!state.filetype) || (state.filetype && state.filetype !== 'video' && state.filetype !== 'audio' && state.filetype !== 'video+audio') && (
+                            <File className="w-4 h-4 mr-2 stroke-primary" />
+                        )}
+                        {state.ext ? state.ext.toUpperCase() : 'Unknown'} {state.resolution ? `(${state.resolution})` : null}
+                    </span>
+                )}
            </div>
            <div className="w-full flex flex-col justify-between gap-2">
                <div className="flex flex-col gap-1">
-                    <h4 className="">{state.title}</h4>
-                    <p className="text-xs text-muted-foreground">{state.channel ? state.channel : 'unknown'} {state.host ? <><span className="text-primary">•</span> {state.host}</> : 'unknown'}</p>
+                    <h4 className="">{isMutilplePlaylistItems ? state.playlist_title : state.title}</h4>
+                    <p className="text-xs text-muted-foreground">{isMutilplePlaylistItems ? state.playlist_channel ?? 'unknown' : state.channel ?? 'unknown'} {state.host ? <><span className="text-primary">•</span> {state.host}</> : 'unknown'}</p>
                    <div className="flex items-center mt-1">
-                        <span className="text-xs text-muted-foreground flex items-center pr-3"><Clock className="w-4 h-4 mr-2"/> {state.duration_string ? formatDurationString(state.duration_string) : 'unknown'}</span>
+                        <span className="text-xs text-muted-foreground flex items-center pr-3">
+                            {isMutilplePlaylistItems ? (
+                                <><ListVideo className="w-4 h-4 mr-2"/> {state.playlist_n_entries ?? 'unknown'}</>
+                            ) : (
+                                <><Clock className="w-4 h-4 mr-2"/> {state.duration_string ? formatDurationString(state.duration_string) : 'unknown'}</>
+                            )}
+                        </span>
                        <Separator orientation="vertical" />
                        <span className="text-xs text-muted-foreground flex items-center px-3">
                        {state.filetype && (state.filetype === 'video' || state.filetype === 'video+audio') && (
@@ -177,21 +224,21 @@ export function CompletedDownload({ state }: CompletedDownloadProps) {
                        </span>
                    </div>
                    <div className="hidden xl:flex items-center mt-1 gap-2 flex-wrap text-xs">
-                        {state.playlist_id && state.playlist_index && (
+                        {state.playlist_id && state.playlist_indices && !isMutilplePlaylistItems && (
                            <span
                            className="border border-border py-1 px-2 rounded flex items-center cursor-pointer"
                            title={`${state.playlist_title ?? 'UNKNOWN PLAYLIST'}` + ' by ' + `${state.playlist_channel ?? 'UNKNOWN CHANNEL'}`}
                            >
-                                <ListVideo className="w-4 h-4 mr-2" /> Playlist ({state.playlist_index} of {state.playlist_n_entries})
+                                <ListVideo className="w-4 h-4 mr-2" /> Playlist ({state.playlist_indices} of {state.playlist_n_entries})
                            </span>
                        )}
-                        {state.vcodec && (
+                        {state.vcodec && !isMutilplePlaylistItems && (
                            <span className="border border-border py-1 px-2 rounded">{formatCodec(state.vcodec)}</span>
                        )}
-                        {state.acodec && (
+                        {state.acodec && !isMutilplePlaylistItems && (
                            <span className="border border-border py-1 px-2 rounded">{formatCodec(state.acodec)}</span>
                        )}
-                        {state.dynamic_range && state.dynamic_range !== 'SDR' && (
+                        {state.dynamic_range && state.dynamic_range !== 'SDR' && !isMutilplePlaylistItems && (
                            <span className="border border-border py-1 px-2 rounded">{state.dynamic_range}</span>
                        )}
                        {state.subtitle_id && (
@@ -202,6 +249,22 @@ export function CompletedDownload({ state }: CompletedDownloadProps) {
                                ESUB
                            </span>
                        )}
+                        {state.sponsorblock_mark && (
+                            <span
+                            className="border border-border py-1 px-2 rounded cursor-pointer"
+                            title={`SPONSORBLOCK MARKED (${state.sponsorblock_mark})`}
+                            >
+                                SPBLOCK(M)
+                            </span>
+                        )}
+                        {state.sponsorblock_remove && (
+                            <span
+                            className="border border-border py-1 px-2 rounded cursor-pointer"
+                            title={`SPONSORBLOCK REMOVED (${state.sponsorblock_remove})`}
+                            >
+                                SPBLOCK(R)
+                            </span>
+                        )}
                    </div>
                </div>
                <div className="w-full flex items-center gap-2">
--- a/src/components/pages/library/incompleteDownloads.tsx
+++ b/src/components/pages/library/incompleteDownloads.tsx
@@ -7,7 +7,7 @@ import { toast } from "sonner";
 import { useAppContext } from "@/providers/appContextProvider";
 import { useDownloadActionStatesStore, useSettingsPageStatesStore } from "@/services/store";
 import { formatFileSize, formatSecToTimeString, formatSpeed } from "@/utils";
-import { ArrowUpRightIcon, CircleCheck, File, Info, Loader2, Music, Pause, Play, RotateCw, Video, X } from "lucide-react";
+import { ArrowUpRightIcon, CircleCheck, File, Info, ListVideo, Loader2, Music, Pause, Play, RotateCw, Video, X } from "lucide-react";
 import { DownloadState } from "@/types/download";
 import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
 import { useNavigate } from "react-router-dom";
@@ -37,13 +37,34 @@ export function IncompleteDownload({ state }: IncompleteDownloadProps) {
        isDeleteFileChecked: false,
    };

+    const isPlaylist = state.playlist_id !== null && state.playlist_indices !== null;
+    const isMutilplePlaylistItems = isPlaylist && state.playlist_indices && state.playlist_indices.includes(',');
+
    return (
        <div className="p-4 border border-border rounded-lg flex gap-4" key={state.download_id}>
            <div className="w-[30%] flex flex-col justify-between gap-2">
-                <AspectRatio ratio={16 / 9} className="w-full rounded-lg overflow-hidden border border-border">
-                    <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="" />
-                </AspectRatio>
-                {state.ext ? (
+                {isMutilplePlaylistItems ? (
+                    <div className="w-full relative flex items-center justify-center mt-2">
+                        <AspectRatio ratio={16 / 9} className="w-full rounded-lg overflow-hidden border border-border mb-2 z-20">
+                            <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="" />
+                        </AspectRatio>
+                        <div className="w-[95%] aspect-video absolute -top-1 rounded-lg overflow-hidden border border-border mb-2 z-10">
+                            <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="blur-xs brightness-75" />
+                        </div>
+                        <div className="w-[87%] aspect-video absolute -top-2 rounded-lg overflow-hidden border border-border mb-2 z-0">
+                            <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="blur-sm brightness-50" />
+                        </div>
+                    </div>
+                ) : (
+                    <AspectRatio ratio={16 / 9} className="w-full rounded-lg overflow-hidden border border-border mb-2">
+                        <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="" />
+                    </AspectRatio>
+                )}
+                {isMutilplePlaylistItems ? (
+                    <span className="w-full flex items-center justify-center text-xs border border-border py-1 px-2 rounded">
+                        <ListVideo className="w-4 h-4 mr-2 stroke-primary" /> Playlist ({state.playlist_indices?.split(',').length})
+                    </span>
+                ) : state.ext ? (
                    <span className="w-full flex items-center justify-center text-xs border border-border py-1 px-2 rounded">
                        {state.filetype && (state.filetype === 'video' || state.filetype === 'video+audio') && (
                            <Video className="w-4 h-4 mr-2 stroke-primary" />
@@ -68,12 +89,15 @@ export function IncompleteDownload({ state }: IncompleteDownloadProps) {
            </div>
            <div className="w-full flex flex-col justify-between">
                <div className="flex flex-col gap-1">
-                    <h4>{state.title}</h4>
+                    <h4>{isMutilplePlaylistItems ? state.playlist_title : state.title}</h4>
                    {((state.download_status === 'starting') || (state.download_status === 'downloading' && state.status === 'finished')) && (
                        <IndeterminateProgress indeterminate={true} className="w-full" />
                    )}
                    {(state.download_status === 'downloading' || state.download_status === 'paused' || state.download_status === 'errored') && state.progress && state.status !== 'finished' && (
                        <div className="w-full flex items-center gap-2">
+                            {isMutilplePlaylistItems && state.item ? (
+                                <span className="text-sm text-nowrap">({state.item})</span>
+                            ) : null}
                            <span className="text-sm text-nowrap">{state.progress}%</span>
                            <Progress value={state.progress} />
                            <span className="text-sm text-nowrap">{