mirror of
https://github.com/neosubhamoy/neodlp.git
synced 2026-03-22 23:55:48 +05:30
feat: added support for full-playlist/selective-batch downloading #9
This commit is contained in:
@@ -6,7 +6,6 @@ import { formatBitrate, formatFileSize } from "@/utils";
|
||||
import { Loader2, Music, Video, File, AlertCircleIcon, Settings2 } from "lucide-react";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { RawVideoInfo, VideoFormat } from "@/types/video";
|
||||
// import { PlaylistToggleGroup, PlaylistToggleGroupItem } from "@/components/custom/playlistToggleGroup";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||
@@ -282,17 +281,21 @@ export function BottomBar({ videoMetadata, selectedFormat, selectedFormatFileTyp
|
||||
const selectedCombinableVideoFormat = useDownloaderPageStatesStore((state) => state.selectedCombinableVideoFormat);
|
||||
const selectedCombinableAudioFormat = useDownloaderPageStatesStore((state) => state.selectedCombinableAudioFormat);
|
||||
const selectedSubtitles = useDownloaderPageStatesStore((state) => state.selectedSubtitles);
|
||||
const selectedPlaylistVideoIndex = useDownloaderPageStatesStore((state) => state.selectedPlaylistVideoIndex);
|
||||
const selectedPlaylistVideos = useDownloaderPageStatesStore((state) => state.selectedPlaylistVideos);
|
||||
const downloadConfiguration = useDownloaderPageStatesStore((state) => state.downloadConfiguration);
|
||||
const setActiveDownloadConfigurationTab = useDownloaderPageStatesStore((state) => state.setActiveDownloadConfigurationTab);
|
||||
const setIsStartingDownload = useDownloaderPageStatesStore((state) => state.setIsStartingDownload);
|
||||
|
||||
const videoFormat = useSettingsPageStatesStore(state => state.settings.video_format);
|
||||
const audioFormat = useSettingsPageStatesStore(state => state.settings.audio_format);
|
||||
const useSponsorblock = useSettingsPageStatesStore(state => state.settings.use_sponsorblock);
|
||||
const useCustomCommands = useSettingsPageStatesStore(state => state.settings.use_custom_commands);
|
||||
|
||||
const bottomBarRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const isPlaylist = videoMetadata._type === 'playlist';
|
||||
const isMultiplePlaylistItems = isPlaylist && selectedPlaylistVideos.length > 1;
|
||||
|
||||
let selectedFormatExtensionMsg = 'Auto - unknown';
|
||||
if (activeDownloadModeTab === 'combine') {
|
||||
if (downloadConfiguration.output_format && downloadConfiguration.output_format !== 'auto') {
|
||||
@@ -327,8 +330,8 @@ export function BottomBar({ videoMetadata, selectedFormat, selectedFormatFileTyp
|
||||
|
||||
let selectedFormatDynamicRangeMsg = '';
|
||||
if (activeDownloadModeTab === 'combine') {
|
||||
selectedFormatDynamicRangeMsg = selectedVideoFormat?.dynamic_range && selectedVideoFormat.dynamic_range !== 'SDR' ? selectedVideoFormat.dynamic_range : '';
|
||||
} else if (selectedFormat?.dynamic_range && selectedFormat.dynamic_range !== 'SDR') {
|
||||
selectedFormatDynamicRangeMsg = selectedVideoFormat?.dynamic_range && selectedVideoFormat.dynamic_range !== 'SDR' && selectedVideoFormat.dynamic_range !== 'auto' ? selectedVideoFormat.dynamic_range : '';
|
||||
} else if (selectedFormat?.dynamic_range && selectedFormat.dynamic_range !== 'SDR' && selectedFormat.dynamic_range !== 'auto') {
|
||||
selectedFormatDynamicRangeMsg = selectedFormat.dynamic_range;
|
||||
}
|
||||
|
||||
@@ -342,13 +345,13 @@ export function BottomBar({ videoMetadata, selectedFormat, selectedFormatFileTyp
|
||||
let selectedFormatFinalMsg = '';
|
||||
if (activeDownloadModeTab === 'combine') {
|
||||
if (selectedCombinableVideoFormat && selectedCombinableAudioFormat) {
|
||||
selectedFormatFinalMsg = `${selectedFormatExtensionMsg} (${selectedFormatResolutionMsg}) ${selectedFormatDynamicRangeMsg} ${selectedSubtitles.length > 0 ? `• ESUB` : ''} • ${selectedFormatFileSizeMsg}`;
|
||||
selectedFormatFinalMsg = `${selectedFormatExtensionMsg} (${selectedFormatResolutionMsg}) ${selectedFormatDynamicRangeMsg} ${selectedSubtitles.length > 0 ? `• ESUB` : ''} ${useSponsorblock || (downloadConfiguration.sponsorblock && downloadConfiguration.sponsorblock !== 'auto') ? `• SPBLOCK` : ''} • ${selectedFormatFileSizeMsg}`;
|
||||
} else {
|
||||
selectedFormatFinalMsg = `Choose a video and audio stream to combine`;
|
||||
}
|
||||
} else {
|
||||
if (selectedFormat) {
|
||||
selectedFormatFinalMsg = `${selectedFormatExtensionMsg} (${selectedFormatResolutionMsg}) ${selectedFormatDynamicRangeMsg} ${selectedSubtitles.length > 0 ? `• ESUB` : ''} • ${selectedFormatFileSizeMsg}`;
|
||||
selectedFormatFinalMsg = `${selectedFormatExtensionMsg} (${selectedFormatResolutionMsg}) ${selectedFormatDynamicRangeMsg} ${selectedSubtitles.length > 0 ? `• ESUB` : ''} ${useSponsorblock || (downloadConfiguration.sponsorblock && downloadConfiguration.sponsorblock !== 'auto') ? `• SPBLOCK` : ''} • ${selectedFormatFileSizeMsg}`;
|
||||
} else {
|
||||
selectedFormatFinalMsg = `Choose a stream to download`;
|
||||
}
|
||||
@@ -397,7 +400,7 @@ export function BottomBar({ videoMetadata, selectedFormat, selectedFormatFileTyp
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-sm text-nowrap max-w-120 xl:max-w-200 overflow-hidden text-ellipsis">{videoMetadata._type === 'video' ? videoMetadata.title : videoMetadata._type === 'playlist' ? videoMetadata.entries[Number(selectedPlaylistVideoIndex) - 1].title : 'Unknown' }</span>
|
||||
<span className="text-sm text-nowrap max-w-120 xl:max-w-200 overflow-hidden text-ellipsis">{videoMetadata._type === 'video' ? videoMetadata.title : videoMetadata._type === 'playlist' ? selectedPlaylistVideos.length === 1 ? videoMetadata.entries[Number(selectedPlaylistVideos[0]) - 1].title : `${selectedPlaylistVideos.length} Items` : 'Unknown' }</span>
|
||||
<span className="text-xs text-muted-foreground">{selectedFormatFinalMsg}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -410,10 +413,14 @@ export function BottomBar({ videoMetadata, selectedFormat, selectedFormatFileTyp
|
||||
if (videoMetadata._type === 'playlist') {
|
||||
await startDownload({
|
||||
url: videoMetadata.original_url,
|
||||
selectedFormat: activeDownloadModeTab === 'combine' ? `${selectedCombinableVideoFormat}+${selectedCombinableAudioFormat}` : selectedDownloadFormat === 'best' ? videoMetadata.entries[Number(selectedPlaylistVideoIndex) - 1].requested_downloads[0].format_id : selectedDownloadFormat,
|
||||
selectedFormat: activeDownloadModeTab === 'combine' ? `${selectedCombinableVideoFormat}+${selectedCombinableAudioFormat}` : selectedDownloadFormat,
|
||||
downloadConfig: downloadConfiguration,
|
||||
selectedSubtitles: selectedSubtitles.length > 0 ? selectedSubtitles.join(',') : null,
|
||||
playlistItems: selectedPlaylistVideoIndex
|
||||
playlistItems: selectedPlaylistVideos.sort((a, b) => Number(a) - Number(b)).join(','),
|
||||
overrideOptions: isMultiplePlaylistItems ? {
|
||||
filesize: activeDownloadModeTab === 'combine' ? (selectedVideoFormat?.filesize_approx && selectedAudioFormat?.filesize_approx ? selectedVideoFormat.filesize_approx + selectedAudioFormat.filesize_approx : undefined) : selectedFormat?.filesize_approx ? selectedFormat.filesize_approx : undefined,
|
||||
tbr: activeDownloadModeTab === 'combine' ? (selectedVideoFormat?.tbr && selectedAudioFormat?.tbr ? selectedVideoFormat.tbr + selectedAudioFormat.tbr : undefined) : selectedFormat?.tbr ? selectedFormat.tbr : undefined,
|
||||
} : undefined
|
||||
});
|
||||
} else if (videoMetadata._type === 'video') {
|
||||
await startDownload({
|
||||
|
||||
@@ -3,11 +3,12 @@ import { DownloadCloud, Info, ListVideo, AlertCircleIcon } from "lucide-react";
|
||||
import { FormatSelectionGroup, FormatSelectionGroupItem } from "@/components/custom/formatSelectionGroup";
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||
import { RawVideoInfo, VideoFormat } from "@/types/video";
|
||||
// import { PlaylistToggleGroup, PlaylistToggleGroupItem } from "@/components/custom/playlistToggleGroup";
|
||||
import { PlaylistSelectionGroup, PlaylistSelectionGroupItem } from "@/components/custom/playlistSelectionGroup";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
|
||||
import { PlaylistToggleGroup, PlaylistToggleGroupItem } from "@/components/custom/playlistToggleGroup";
|
||||
import { getMergedBestFormat } from "@/utils";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
|
||||
interface PlaylistPreviewSelectionProps {
|
||||
videoMetadata: RawVideoInfo;
|
||||
@@ -38,28 +39,61 @@ interface PlaylistDownloaderProps {
|
||||
}
|
||||
|
||||
function PlaylistPreviewSelection({ videoMetadata }: PlaylistPreviewSelectionProps) {
|
||||
const selectedPlaylistVideoIndex = useDownloaderPageStatesStore((state) => state.selectedPlaylistVideoIndex);
|
||||
const selectedPlaylistVideos = useDownloaderPageStatesStore((state) => state.selectedPlaylistVideos);
|
||||
const setSelectedDownloadFormat = useDownloaderPageStatesStore((state) => state.setSelectedDownloadFormat);
|
||||
const setSelectedCombinableVideoFormat = useDownloaderPageStatesStore((state) => state.setSelectedCombinableVideoFormat);
|
||||
const setSelectedCombinableAudioFormat = useDownloaderPageStatesStore((state) => state.setSelectedCombinableAudioFormat);
|
||||
const setSelectedSubtitles = useDownloaderPageStatesStore((state) => state.setSelectedSubtitles);
|
||||
const setSelectedPlaylistVideoIndex = useDownloaderPageStatesStore((state) => state.setSelectedPlaylistVideoIndex);
|
||||
const setSelectedPlaylistVideos = useDownloaderPageStatesStore((state) => state.setSelectedPlaylistVideos);
|
||||
const resetDownloadConfiguration = useDownloaderPageStatesStore((state) => state.resetDownloadConfiguration);
|
||||
|
||||
const totalVideos = videoMetadata.entries.filter((entry) => entry).length;
|
||||
const allVideoIndices = videoMetadata.entries.filter((entry) => entry).map((entry) => entry.playlist_index.toString());
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full pr-4">
|
||||
<h3 className="text-sm mb-4 mt-2 flex items-center gap-2">
|
||||
<ListVideo className="w-4 h-4" />
|
||||
<span>Playlist ({videoMetadata.entries[0].n_entries})</span>
|
||||
</h3>
|
||||
<div className="flex items-center justify-between mb-4 mt-2">
|
||||
<h3 className="text-sm flex items-center gap-2">
|
||||
<ListVideo className="w-4 h-4" />
|
||||
<span>Playlist ({videoMetadata.entries[0].n_entries})</span>
|
||||
</h3>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="select-all-videos"
|
||||
checked={selectedPlaylistVideos.length === totalVideos && totalVideos > 0}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
setSelectedPlaylistVideos(allVideoIndices);
|
||||
} else {
|
||||
setSelectedPlaylistVideos(["1"]);
|
||||
}
|
||||
setSelectedDownloadFormat('best');
|
||||
setSelectedSubtitles([]);
|
||||
setSelectedCombinableVideoFormat('');
|
||||
setSelectedCombinableAudioFormat('');
|
||||
resetDownloadConfiguration();
|
||||
}}
|
||||
disabled={totalVideos <= 1}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col overflow-y-scroll max-h-[50vh] xl:max-h-[60vh] no-scrollbar">
|
||||
<h2 className="mb-1">{videoMetadata.entries[0].playlist_title ? videoMetadata.entries[0].playlist_title : 'UNTITLED'}</h2>
|
||||
<p className="text-muted-foreground text-xs mb-4">{videoMetadata.entries[0].playlist_creator || videoMetadata.entries[0].playlist_channel || videoMetadata.entries[0].playlist_uploader || 'unknown'}</p>
|
||||
{/* <PlaylistToggleGroup
|
||||
<PlaylistToggleGroup
|
||||
className="mb-2"
|
||||
type="multiple"
|
||||
value={selectedVideos}
|
||||
onValueChange={setSelectedVideos}
|
||||
value={selectedPlaylistVideos}
|
||||
onValueChange={(value: string[]) => {
|
||||
if (value.length > 0) {
|
||||
setSelectedPlaylistVideos(value);
|
||||
setSelectedDownloadFormat('best');
|
||||
setSelectedSubtitles([]);
|
||||
setSelectedCombinableVideoFormat('');
|
||||
setSelectedCombinableAudioFormat('');
|
||||
resetDownloadConfiguration();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{videoMetadata.entries.map((entry) => entry ? (
|
||||
<PlaylistToggleGroupItem
|
||||
@@ -68,27 +102,7 @@ function PlaylistPreviewSelection({ videoMetadata }: PlaylistPreviewSelectionPro
|
||||
video={entry}
|
||||
/>
|
||||
) : null)}
|
||||
</PlaylistToggleGroup> */}
|
||||
<PlaylistSelectionGroup
|
||||
className="mb-2"
|
||||
value={selectedPlaylistVideoIndex}
|
||||
onValueChange={(value) => {
|
||||
setSelectedPlaylistVideoIndex(value);
|
||||
setSelectedDownloadFormat('best');
|
||||
setSelectedSubtitles([]);
|
||||
setSelectedCombinableVideoFormat('');
|
||||
setSelectedCombinableAudioFormat('');
|
||||
resetDownloadConfiguration();
|
||||
}}
|
||||
>
|
||||
{videoMetadata.entries.map((entry) => entry ? (
|
||||
<PlaylistSelectionGroupItem
|
||||
key={entry.playlist_index}
|
||||
value={entry.playlist_index.toString()}
|
||||
video={entry}
|
||||
/>
|
||||
) : null)}
|
||||
</PlaylistSelectionGroup>
|
||||
</PlaylistToggleGroup>
|
||||
<div className="flex items-center text-muted-foreground">
|
||||
<Info className="w-3 h-3 mr-2" />
|
||||
<span className="text-xs">Extracted from {videoMetadata.entries[0].extractor ? videoMetadata.entries[0].extractor.charAt(0).toUpperCase() + videoMetadata.entries[0].extractor.slice(1) : 'Unknown'}</span>
|
||||
@@ -102,7 +116,7 @@ function PlaylistPreviewSelection({ videoMetadata }: PlaylistPreviewSelectionPro
|
||||
function SelectivePlaylistDownload({ videoMetadata, audioOnlyFormats, videoOnlyFormats, combinedFormats, qualityPresetFormats, subtitleLanguages }: SelectivePlaylistDownloadProps) {
|
||||
const selectedDownloadFormat = useDownloaderPageStatesStore((state) => state.selectedDownloadFormat);
|
||||
const selectedSubtitles = useDownloaderPageStatesStore((state) => state.selectedSubtitles);
|
||||
const selectedPlaylistVideoIndex = useDownloaderPageStatesStore((state) => state.selectedPlaylistVideoIndex);
|
||||
const selectedPlaylistVideos = useDownloaderPageStatesStore((state) => state.selectedPlaylistVideos);
|
||||
const setSelectedDownloadFormat = useDownloaderPageStatesStore((state) => state.setSelectedDownloadFormat);
|
||||
const setSelectedSubtitles = useDownloaderPageStatesStore((state) => state.setSelectedSubtitles);
|
||||
const resetDownloadConfiguration = useDownloaderPageStatesStore((state) => state.resetDownloadConfiguration);
|
||||
@@ -120,16 +134,23 @@ function SelectivePlaylistDownload({ videoMetadata, audioOnlyFormats, videoOnlyF
|
||||
>
|
||||
<p className="text-xs">Subtitle Languages</p>
|
||||
<div className="flex gap-2 flex-wrap items-center">
|
||||
{subtitleLanguages.map((lang) => (
|
||||
<ToggleGroupItem
|
||||
className="text-xs text-nowrap border-2 data-[state=on]:border-2 data-[state=on]:border-primary data-[state=on]:bg-primary/10 hover:bg-muted/70"
|
||||
value={lang.code}
|
||||
size="sm"
|
||||
aria-label={lang.lang}
|
||||
key={lang.code}>
|
||||
{lang.lang}
|
||||
</ToggleGroupItem>
|
||||
))}
|
||||
{subtitleLanguages.map((lang) => {
|
||||
const hasAutoSubSelected = selectedSubtitles.some(code => code.endsWith('-orig'));
|
||||
const hasNormalSubSelected = selectedSubtitles.some(code => !code.endsWith('-orig'));
|
||||
const isDisabled = (hasAutoSubSelected && !lang.code.endsWith('-orig')) || (hasNormalSubSelected && lang.code.endsWith('-orig'));
|
||||
|
||||
return (
|
||||
<ToggleGroupItem
|
||||
className="text-xs text-nowrap border-2 data-[state=on]:border-2 data-[state=on]:border-primary data-[state=on]:bg-primary/10 hover:bg-muted/70"
|
||||
value={lang.code}
|
||||
size="sm"
|
||||
aria-label={lang.lang}
|
||||
key={lang.code}
|
||||
disabled={isDisabled}>
|
||||
{lang.lang}
|
||||
</ToggleGroupItem>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ToggleGroup>
|
||||
)}
|
||||
@@ -149,7 +170,7 @@ function SelectivePlaylistDownload({ videoMetadata, audioOnlyFormats, videoOnlyF
|
||||
<FormatSelectionGroupItem
|
||||
key="best"
|
||||
value="best"
|
||||
format={videoMetadata.entries[Number(selectedPlaylistVideoIndex) - 1].requested_downloads[0]}
|
||||
format={getMergedBestFormat(videoMetadata.entries, selectedPlaylistVideos) as VideoFormat}
|
||||
/>
|
||||
</div>
|
||||
{qualityPresetFormats && qualityPresetFormats.length > 0 && (
|
||||
@@ -235,16 +256,23 @@ function CombinedPlaylistDownload({ audioOnlyFormats, videoOnlyFormats, subtitle
|
||||
>
|
||||
<p className="text-xs">Subtitle Languages</p>
|
||||
<div className="flex gap-2 flex-wrap items-center">
|
||||
{subtitleLanguages.map((lang) => (
|
||||
<ToggleGroupItem
|
||||
className="text-xs text-nowrap border-2 data-[state=on]:border-2 data-[state=on]:border-primary data-[state=on]:bg-primary/10 hover:bg-muted/70"
|
||||
value={lang.code}
|
||||
size="sm"
|
||||
aria-label={lang.lang}
|
||||
key={lang.code}>
|
||||
{lang.lang}
|
||||
</ToggleGroupItem>
|
||||
))}
|
||||
{subtitleLanguages.map((lang) => {
|
||||
const hasAutoSubSelected = selectedSubtitles.some(code => code.endsWith('-orig'));
|
||||
const hasNormalSubSelected = selectedSubtitles.some(code => !code.endsWith('-orig'));
|
||||
const isDisabled = (hasAutoSubSelected && !lang.code.endsWith('-orig')) || (hasNormalSubSelected && lang.code.endsWith('-orig'));
|
||||
|
||||
return (
|
||||
<ToggleGroupItem
|
||||
className="text-xs text-nowrap border-2 data-[state=on]:border-2 data-[state=on]:border-primary data-[state=on]:bg-primary/10 hover:bg-muted/70"
|
||||
value={lang.code}
|
||||
size="sm"
|
||||
aria-label={lang.lang}
|
||||
key={lang.code}
|
||||
disabled={isDisabled}>
|
||||
{lang.lang}
|
||||
</ToggleGroupItem>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ToggleGroup>
|
||||
)}
|
||||
|
||||
@@ -112,16 +112,23 @@ function SelectiveVideoDownload({ videoMetadata, audioOnlyFormats, videoOnlyForm
|
||||
>
|
||||
<p className="text-xs">Subtitle Languages</p>
|
||||
<div className="flex gap-2 flex-wrap items-center">
|
||||
{subtitleLanguages.map((lang) => (
|
||||
<ToggleGroupItem
|
||||
className="text-xs text-nowrap border-2 data-[state=on]:border-2 data-[state=on]:border-primary data-[state=on]:bg-primary/10 hover:bg-muted/70"
|
||||
value={lang.code}
|
||||
size="sm"
|
||||
aria-label={lang.lang}
|
||||
key={lang.code}>
|
||||
{lang.lang}
|
||||
</ToggleGroupItem>
|
||||
))}
|
||||
{subtitleLanguages.map((lang) => {
|
||||
const hasAutoSubSelected = selectedSubtitles.some(code => code.endsWith('-orig'));
|
||||
const hasNormalSubSelected = selectedSubtitles.some(code => !code.endsWith('-orig'));
|
||||
const isDisabled = (hasAutoSubSelected && !lang.code.endsWith('-orig')) || (hasNormalSubSelected && lang.code.endsWith('-orig'));
|
||||
|
||||
return (
|
||||
<ToggleGroupItem
|
||||
className="text-xs text-nowrap border-2 data-[state=on]:border-2 data-[state=on]:border-primary data-[state=on]:bg-primary/10 hover:bg-muted/70"
|
||||
value={lang.code}
|
||||
size="sm"
|
||||
aria-label={lang.lang}
|
||||
key={lang.code}
|
||||
disabled={isDisabled}>
|
||||
{lang.lang}
|
||||
</ToggleGroupItem>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ToggleGroup>
|
||||
)}
|
||||
@@ -227,16 +234,23 @@ function CombinedVideoDownload({ audioOnlyFormats, videoOnlyFormats, subtitleLan
|
||||
>
|
||||
<p className="text-xs">Subtitle Languages</p>
|
||||
<div className="flex gap-2 flex-wrap items-center">
|
||||
{subtitleLanguages.map((lang) => (
|
||||
<ToggleGroupItem
|
||||
className="text-xs text-nowrap border-2 data-[state=on]:border-2 data-[state=on]:border-primary data-[state=on]:bg-primary/10 hover:bg-muted/70"
|
||||
value={lang.code}
|
||||
size="sm"
|
||||
aria-label={lang.lang}
|
||||
key={lang.code}>
|
||||
{lang.lang}
|
||||
</ToggleGroupItem>
|
||||
))}
|
||||
{subtitleLanguages.map((lang) => {
|
||||
const hasAutoSubSelected = selectedSubtitles.some(code => code.endsWith('-orig'));
|
||||
const hasNormalSubSelected = selectedSubtitles.some(code => !code.endsWith('-orig'));
|
||||
const isDisabled = (hasAutoSubSelected && !lang.code.endsWith('-orig')) || (hasNormalSubSelected && lang.code.endsWith('-orig'));
|
||||
|
||||
return (
|
||||
<ToggleGroupItem
|
||||
className="text-xs text-nowrap border-2 data-[state=on]:border-2 data-[state=on]:border-primary data-[state=on]:bg-primary/10 hover:bg-muted/70"
|
||||
value={lang.code}
|
||||
size="sm"
|
||||
aria-label={lang.lang}
|
||||
key={lang.code}
|
||||
disabled={isDisabled}>
|
||||
{lang.lang}
|
||||
</ToggleGroupItem>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ToggleGroup>
|
||||
)}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">{
|
||||
|
||||
@@ -362,7 +362,7 @@ function AppFolderSettings() {
|
||||
</div>
|
||||
<div className="filename-template">
|
||||
<h3 className="font-semibold">Filename Template</h3>
|
||||
<p className="text-xs text-muted-foreground mb-3">Set the template for naming downloaded files (download id and file extension will be auto-appended at the end, changing template may cause paused downloads to re-start from begining)</p>
|
||||
<p className="text-xs text-muted-foreground mb-3">Set the template for naming downloaded files (download id, file extension and playlist index will be auto-appended, changing template may cause paused downloads to re-start from begining)</p>
|
||||
<Form {...filenameTemplateForm}>
|
||||
<form onSubmit={filenameTemplateForm.handleSubmit(handleFilenameTemplateSubmit)} className="flex gap-4 w-full" autoComplete="off">
|
||||
<FormField
|
||||
@@ -1142,7 +1142,7 @@ function AppCommandSettings() {
|
||||
<FormControl>
|
||||
<Textarea
|
||||
className="focus-visible:ring-0 min-h-26"
|
||||
placeholder="Enter yt-dlp command line arguments (no need to start with 'yt-dlp', already passed args: url, output paths, selected formats, selected subtitles, playlist item. also, bulk downloading is not supported)"
|
||||
placeholder="Enter yt-dlp command line arguments (no need to start with 'yt-dlp', already passed args: url, output paths, selected formats, selected subtitles, playlist items etc.)"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
@@ -1395,7 +1395,7 @@ function AppInfoSettings() {
|
||||
<p className="text-xs text-muted-foreground mb-3">License and usage terms of NeoDLP</p>
|
||||
<div className="license">
|
||||
<p className="text-sm mb-3">NeoDLP is a Fully Open-Source Software Licensed under the MIT license. Anyone can view, modify, use (personal and commercial) or distribute it's sources without any extra permission (Just include the LICENSE file :)</p>
|
||||
<p className="text-sm mb-3"><TriangleAlert className="size-4 stroke-primary inline mb-1 mr-0.5" /> DISCLAIMER: NeoDLP facilitates downloading from various Online Platforms with different Policies and Terms of Use which Users must follow. We strictly do not promote any unauthorized downloading of copyrighted content and content piracy. NeoDLP is only made for downloading content that the user holds the copyright to or has the authority for. Users must use the downloaded content wisely and solely at their own legal responsibility. The developer is not responsible for any action taken by the user, and takes zero direct or indirect liability for that matter.</p>
|
||||
<p className="text-sm mb-3"><TriangleAlert className="size-4 stroke-primary inline mb-1 mr-0.5" /> DISCLAIMER: NeoDLP facilitates downloading from various Online Platforms with different Policies and Terms of Use which Users must follow. We strictly do not promote any unauthorized downloading of copyrighted content. NeoDLP is only made for downloading content that the user holds the copyright to or has the authority for. Users must use the downloaded content wisely and solely at their own legal responsibility. The developer is not responsible for any action taken by the user, and takes zero direct or indirect liability for that matter.</p>
|
||||
<span className="flex items-center gap-4 flex-wrap">
|
||||
<Button className="px-4" variant="outline" size="sm" asChild>
|
||||
<a href={'https://github.com/' + config.appRepo + '/blob/main/LICENSE'} target="_blank" >
|
||||
|
||||
Reference in New Issue
Block a user