mirror of
https://github.com/neosubhamoy/neodlp.git
synced 2025-12-20 10:09:34 +05:30
refactor: more component separation, persisted sidebar state and other improvements
This commit is contained in:
@@ -35,8 +35,8 @@ const PlaylistSelectionGroupItem = React.forwardRef<
|
|||||||
<RadioGroupPrimitive.Item
|
<RadioGroupPrimitive.Item
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"relative w-full rounded-lg border-2 border-border bg-card p-2 shadow-sm transition-all",
|
"relative w-full rounded-lg border-2 border-border bg-background p-2 shadow-sm transition-all",
|
||||||
"data-[state=checked]:border-primary data-[state=checked]:border-2 data-[state=checked]:bg-muted/70",
|
"data-[state=checked]:border-primary data-[state=checked]:border-2 data-[state=checked]:bg-primary/10",
|
||||||
"hover:bg-muted/70",
|
"hover:bg-muted/70",
|
||||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
className
|
className
|
||||||
@@ -44,7 +44,7 @@ const PlaylistSelectionGroupItem = React.forwardRef<
|
|||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<div className="flex gap-2 w-full relative">
|
<div className="flex gap-2 w-full relative">
|
||||||
<div className="w-[7rem] xl:w-[10rem]">
|
<div className="w-28 xl:w-40">
|
||||||
<AspectRatio
|
<AspectRatio
|
||||||
ratio={16 / 9}
|
ratio={16 / 9}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
@@ -63,9 +63,9 @@ const PlaylistSelectionGroupItem = React.forwardRef<
|
|||||||
</AspectRatio>
|
</AspectRatio>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex w-[10rem] lg:w-[12rem] xl:w-[15rem] flex-col items-start text-start">
|
<div className="flex w-40 lg:w-48 xl:w-60 flex-col items-start text-start">
|
||||||
<h3 className="text-sm text-nowrap w-full overflow-hidden text-ellipsis mb-1" title={video.title}>{video.title}</h3>
|
<h3 className="text-sm text-nowrap w-full overflow-hidden text-ellipsis mb-1" title={video.title}>{video.title}</h3>
|
||||||
<p className="text-xs text-muted-foreground mb-2">{video.channel || video.uploader || 'unknown'}</p>
|
<p className="text-xs text-nowrap w-full overflow-hidden text-ellipsis text-muted-foreground mb-2" title={video.creator || video.channel || video.uploader || 'unknown'}>{video.creator || video.channel || video.uploader || 'unknown'}</p>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<span className="text-xs text-muted-foreground flex items-center pr-3">
|
<span className="text-xs text-muted-foreground flex items-center pr-3">
|
||||||
<Clock className="w-4 h-4 mr-2"/>
|
<Clock className="w-4 h-4 mr-2"/>
|
||||||
|
|||||||
443
src/components/pages/downloader/bottomBar.tsx
Normal file
443
src/components/pages/downloader/bottomBar.tsx
Normal file
@@ -0,0 +1,443 @@
|
|||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { useAppContext } from "@/providers/appContextProvider";
|
||||||
|
import { useDownloaderPageStatesStore, useSettingsPageStatesStore } from "@/services/store";
|
||||||
|
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";
|
||||||
|
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
|
||||||
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
|
||||||
|
interface DownloadConfigDialogProps {
|
||||||
|
selectedFormatFileType: "video+audio" | "video" | "audio" | "unknown";
|
||||||
|
}
|
||||||
|
|
||||||
|
interface BottomBarProps {
|
||||||
|
videoMetadata: RawVideoInfo;
|
||||||
|
selectedFormat: VideoFormat | undefined;
|
||||||
|
selectedFormatFileType: "video+audio" | "video" | "audio" | "unknown";
|
||||||
|
selectedVideoFormat: VideoFormat | undefined;
|
||||||
|
selectedAudioFormat: VideoFormat | undefined;
|
||||||
|
containerRef: React.RefObject<HTMLDivElement | null>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function DownloadConfigDialog({ selectedFormatFileType }: DownloadConfigDialogProps) {
|
||||||
|
const activeDownloadModeTab = useDownloaderPageStatesStore((state) => state.activeDownloadModeTab);
|
||||||
|
const activeDownloadConfigurationTab = useDownloaderPageStatesStore((state) => state.activeDownloadConfigurationTab);
|
||||||
|
const selectedDownloadFormat = useDownloaderPageStatesStore((state) => state.selectedDownloadFormat);
|
||||||
|
const selectedCombinableVideoFormat = useDownloaderPageStatesStore((state) => state.selectedCombinableVideoFormat);
|
||||||
|
const selectedCombinableAudioFormat = useDownloaderPageStatesStore((state) => state.selectedCombinableAudioFormat);
|
||||||
|
const downloadConfiguration = useDownloaderPageStatesStore((state) => state.downloadConfiguration);
|
||||||
|
const setActiveDownloadConfigurationTab = useDownloaderPageStatesStore((state) => state.setActiveDownloadConfigurationTab);
|
||||||
|
const setDownloadConfigurationKey = useDownloaderPageStatesStore((state) => state.setDownloadConfigurationKey);
|
||||||
|
|
||||||
|
const embedVideoMetadata = useSettingsPageStatesStore(state => state.settings.embed_video_metadata);
|
||||||
|
const embedAudioMetadata = useSettingsPageStatesStore(state => state.settings.embed_audio_metadata);
|
||||||
|
const embedVideoThumbnail = useSettingsPageStatesStore(state => state.settings.embed_video_thumbnail);
|
||||||
|
const embedAudioThumbnail = useSettingsPageStatesStore(state => state.settings.embed_audio_thumbnail);
|
||||||
|
const useCustomCommands = useSettingsPageStatesStore(state => state.settings.use_custom_commands);
|
||||||
|
const customCommands = useSettingsPageStatesStore(state => state.settings.custom_commands);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
disabled={!selectedDownloadFormat || (activeDownloadModeTab === 'combine' && (!selectedCombinableVideoFormat || !selectedCombinableAudioFormat))}
|
||||||
|
>
|
||||||
|
<Settings2 className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent>
|
||||||
|
<p>Configurations</p>
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
<DialogContent className="sm:max-w-[450px]">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Configurations</DialogTitle>
|
||||||
|
<DialogDescription>Tweak this download's configurations</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="flex flex-col gap-2 max-h-[300px] overflow-y-scroll overflow-x-hidden no-scrollbar">
|
||||||
|
<Tabs
|
||||||
|
className=""
|
||||||
|
value={activeDownloadConfigurationTab}
|
||||||
|
onValueChange={(tab) => setActiveDownloadConfigurationTab(tab)}
|
||||||
|
>
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="options">Options</TabsTrigger>
|
||||||
|
<TabsTrigger value="commands">Commands</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
<TabsContent value="options">
|
||||||
|
{useCustomCommands ? (
|
||||||
|
<Alert className="mt-2 mb-3">
|
||||||
|
<AlertCircleIcon className="size-4 stroke-primary" />
|
||||||
|
<AlertTitle className="text-sm">Options Unavailable!</AlertTitle>
|
||||||
|
<AlertDescription className="text-xs">
|
||||||
|
You cannot use these options when custom commands are enabled. To use these options, disable custom commands from Settings.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
) : null}
|
||||||
|
<div className="video-format">
|
||||||
|
<Label className="text-xs mb-3 mt-2">Output Format ({(selectedFormatFileType && (selectedFormatFileType === 'video' || selectedFormatFileType === 'video+audio')) || activeDownloadModeTab === 'combine' ? 'Video' : selectedFormatFileType && selectedFormatFileType === 'audio' ? 'Audio' : 'Unknown'})</Label>
|
||||||
|
{(selectedFormatFileType && (selectedFormatFileType === 'video' || selectedFormatFileType === 'video+audio')) || activeDownloadModeTab === 'combine' ? (
|
||||||
|
<RadioGroup
|
||||||
|
orientation="horizontal"
|
||||||
|
className="flex items-center gap-4 flex-wrap my-2"
|
||||||
|
value={downloadConfiguration.output_format ?? 'auto'}
|
||||||
|
onValueChange={(value) => setDownloadConfigurationKey('output_format', value)}
|
||||||
|
disabled={useCustomCommands}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="auto" id="v-auto" />
|
||||||
|
<Label htmlFor="v-auto">Follow Settings</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="mp4" id="v-mp4" />
|
||||||
|
<Label htmlFor="v-mp4">MP4</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="webm" id="v-webm" />
|
||||||
|
<Label htmlFor="v-webm">WEBM</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="mkv" id="v-mkv" />
|
||||||
|
<Label htmlFor="v-mkv">MKV</Label>
|
||||||
|
</div>
|
||||||
|
</RadioGroup>
|
||||||
|
) : selectedFormatFileType && selectedFormatFileType === 'audio' ? (
|
||||||
|
<RadioGroup
|
||||||
|
orientation="horizontal"
|
||||||
|
className="flex items-center gap-4 flex-wrap my-2"
|
||||||
|
value={downloadConfiguration.output_format ?? 'auto'}
|
||||||
|
onValueChange={(value) => setDownloadConfigurationKey('output_format', value)}
|
||||||
|
disabled={useCustomCommands}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="auto" id="a-auto" />
|
||||||
|
<Label htmlFor="a-auto">Follow Settings</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="m4a" id="a-m4a" />
|
||||||
|
<Label htmlFor="a-m4a">M4A</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="opus" id="a-opus" />
|
||||||
|
<Label htmlFor="a-opus">OPUS</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="mp3" id="a-mp3" />
|
||||||
|
<Label htmlFor="a-mp3">MP3</Label>
|
||||||
|
</div>
|
||||||
|
</RadioGroup>
|
||||||
|
) : (
|
||||||
|
<RadioGroup
|
||||||
|
orientation="horizontal"
|
||||||
|
className="flex items-center gap-4 flex-wrap my-2"
|
||||||
|
value={downloadConfiguration.output_format ?? 'auto'}
|
||||||
|
onValueChange={(value) => setDownloadConfigurationKey('output_format', value)}
|
||||||
|
disabled={useCustomCommands}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="auto" id="u-auto" />
|
||||||
|
<Label htmlFor="u-auto">Follow Settings</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="mp4" id="u-mp4" />
|
||||||
|
<Label htmlFor="u-mp4">MP4</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="webm" id="u-webm" />
|
||||||
|
<Label htmlFor="u-webm">WEBM</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="mkv" id="u-mkv" />
|
||||||
|
<Label htmlFor="u-mkv">MKV</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="m4a" id="u-m4a" />
|
||||||
|
<Label htmlFor="u-m4a">M4A</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="opus" id="u-opus" />
|
||||||
|
<Label htmlFor="u-opus">OPUS</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="mp3" id="u-mp3" />
|
||||||
|
<Label htmlFor="u-mp3">MP3</Label>
|
||||||
|
</div>
|
||||||
|
</RadioGroup>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="sponsorblock">
|
||||||
|
<Label className="text-xs my-3">Sponsorblock Mode</Label>
|
||||||
|
<RadioGroup
|
||||||
|
orientation="horizontal"
|
||||||
|
className="flex items-center gap-4 flex-wrap my-2"
|
||||||
|
value={downloadConfiguration.sponsorblock ?? 'auto'}
|
||||||
|
onValueChange={(value) => setDownloadConfigurationKey('sponsorblock', value)}
|
||||||
|
disabled={useCustomCommands}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="auto" id="sb-auto" />
|
||||||
|
<Label htmlFor="sb-auto">Follow Settings</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="remove" id="sb-remove" />
|
||||||
|
<Label htmlFor="sb-remove">Remove</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<RadioGroupItem value="mark" id="sb-mark" />
|
||||||
|
<Label htmlFor="sb-mark">Mark</Label>
|
||||||
|
</div>
|
||||||
|
</RadioGroup>
|
||||||
|
</div>
|
||||||
|
<div className="embeding-options">
|
||||||
|
<Label className="text-xs my-3">Embeding Options</Label>
|
||||||
|
<div className="flex items-center space-x-2 mt-3">
|
||||||
|
<Switch
|
||||||
|
id="embed-metadata"
|
||||||
|
checked={downloadConfiguration.embed_metadata !== null ? downloadConfiguration.embed_metadata : (selectedFormatFileType && (selectedFormatFileType === 'video' || selectedFormatFileType === 'video+audio')) || activeDownloadModeTab === 'combine' ? embedVideoMetadata : selectedFormatFileType && selectedFormatFileType === 'audio' ? embedAudioMetadata : false}
|
||||||
|
onCheckedChange={(checked) => setDownloadConfigurationKey('embed_metadata', checked)}
|
||||||
|
disabled={useCustomCommands}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="embed-metadata">Embed Metadata</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2 mt-3">
|
||||||
|
<Switch
|
||||||
|
id="embed-thumbnail"
|
||||||
|
checked={downloadConfiguration.embed_thumbnail !== null ? downloadConfiguration.embed_thumbnail : (selectedFormatFileType && (selectedFormatFileType === 'video' || selectedFormatFileType === 'video+audio')) || activeDownloadModeTab === 'combine' ? embedVideoThumbnail : selectedFormatFileType && selectedFormatFileType === 'audio' ? embedAudioThumbnail : false}
|
||||||
|
onCheckedChange={(checked) => setDownloadConfigurationKey('embed_thumbnail', checked)}
|
||||||
|
disabled={useCustomCommands}
|
||||||
|
/>
|
||||||
|
<Label htmlFor="embed-thumbnail">Embed Thumbnail</Label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="commands">
|
||||||
|
{!useCustomCommands ? (
|
||||||
|
<Alert className="mt-2 mb-3">
|
||||||
|
<AlertCircleIcon className="size-4 stroke-primary" />
|
||||||
|
<AlertTitle className="text-sm">Enable Custom Commands!</AlertTitle>
|
||||||
|
<AlertDescription className="text-xs">
|
||||||
|
To run custom commands for downloads, please enable it from the Settings.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
) : null}
|
||||||
|
<div className="custom-commands">
|
||||||
|
<Label className="text-xs mb-3 mt-2">Run Custom Command</Label>
|
||||||
|
{customCommands.length === 0 ? (
|
||||||
|
<p className="text-sm text-muted-foreground">NO CUSTOM COMMAND TEMPLATE ADDED YET!</p>
|
||||||
|
) : (
|
||||||
|
<RadioGroup
|
||||||
|
orientation="vertical"
|
||||||
|
className="flex flex-col gap-2 my-2"
|
||||||
|
disabled={!useCustomCommands}
|
||||||
|
value={downloadConfiguration.custom_command}
|
||||||
|
onValueChange={(value) => setDownloadConfigurationKey('custom_command', value)}
|
||||||
|
>
|
||||||
|
{customCommands.map((command) => (
|
||||||
|
<div className="flex items-center gap-3" key={command.id}>
|
||||||
|
<RadioGroupItem value={command.id} id={`cmd-${command.id}`} />
|
||||||
|
<Label htmlFor={`cmd-${command.id}`}>{command.label}</Label>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</RadioGroup>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function BottomBar({ videoMetadata, selectedFormat, selectedFormatFileType, selectedVideoFormat, selectedAudioFormat, containerRef }: BottomBarProps) {
|
||||||
|
const { startDownload } = useAppContext();
|
||||||
|
|
||||||
|
const activeDownloadModeTab = useDownloaderPageStatesStore((state) => state.activeDownloadModeTab);
|
||||||
|
const isStartingDownload = useDownloaderPageStatesStore((state) => state.isStartingDownload);
|
||||||
|
const selectedDownloadFormat = useDownloaderPageStatesStore((state) => state.selectedDownloadFormat);
|
||||||
|
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 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 useCustomCommands = useSettingsPageStatesStore(state => state.settings.use_custom_commands);
|
||||||
|
|
||||||
|
const bottomBarRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
let selectedFormatExtensionMsg = 'Auto - unknown';
|
||||||
|
if (activeDownloadModeTab === 'combine') {
|
||||||
|
if (downloadConfiguration.output_format && downloadConfiguration.output_format !== 'auto') {
|
||||||
|
selectedFormatExtensionMsg = `Combined - ${downloadConfiguration.output_format.toUpperCase()}`;
|
||||||
|
}
|
||||||
|
else if (videoFormat !== 'auto') {
|
||||||
|
selectedFormatExtensionMsg = `Combined - ${videoFormat.toUpperCase()}`;
|
||||||
|
}
|
||||||
|
else if (selectedAudioFormat?.ext && selectedVideoFormat?.ext) {
|
||||||
|
selectedFormatExtensionMsg = `Combined - ${selectedVideoFormat.ext.toUpperCase()} + ${selectedAudioFormat.ext.toUpperCase()}`;
|
||||||
|
} else {
|
||||||
|
selectedFormatExtensionMsg = `Combined - unknown`;
|
||||||
|
}
|
||||||
|
} else if (selectedFormat?.ext) {
|
||||||
|
if ((selectedFormatFileType === 'video+audio' || selectedFormatFileType === 'video') && ((downloadConfiguration.output_format && downloadConfiguration.output_format !== 'auto') || videoFormat !== 'auto')) {
|
||||||
|
selectedFormatExtensionMsg = `Forced - ${(downloadConfiguration.output_format && downloadConfiguration.output_format !== 'auto') ? downloadConfiguration.output_format.toUpperCase() : videoFormat.toUpperCase()}`;
|
||||||
|
} else if (selectedFormatFileType === 'audio' && ((downloadConfiguration.output_format && downloadConfiguration.output_format !== 'auto') || audioFormat !== 'auto')) {
|
||||||
|
selectedFormatExtensionMsg = `Forced - ${(downloadConfiguration.output_format && downloadConfiguration.output_format !== 'auto') ? downloadConfiguration.output_format.toUpperCase() : audioFormat.toUpperCase()}`;
|
||||||
|
} else if (selectedFormatFileType === 'unknown' && downloadConfiguration.output_format && downloadConfiguration.output_format !== 'auto') {
|
||||||
|
selectedFormatExtensionMsg = `Forced - ${downloadConfiguration.output_format.toUpperCase()}`;
|
||||||
|
} else {
|
||||||
|
selectedFormatExtensionMsg = `Auto - ${selectedFormat.ext.toUpperCase()}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let selectedFormatResolutionMsg = 'unknown';
|
||||||
|
if (activeDownloadModeTab === 'combine') {
|
||||||
|
selectedFormatResolutionMsg = `${selectedVideoFormat?.resolution ?? 'unknown'} + ${selectedAudioFormat?.tbr ? formatBitrate(selectedAudioFormat.tbr) : 'unknown'}`;
|
||||||
|
} else if (selectedFormat?.resolution) {
|
||||||
|
selectedFormatResolutionMsg = selectedFormat.resolution;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 = selectedFormat.dynamic_range;
|
||||||
|
}
|
||||||
|
|
||||||
|
let selectedFormatFileSizeMsg = 'unknown filesize';
|
||||||
|
if (activeDownloadModeTab === 'combine') {
|
||||||
|
selectedFormatFileSizeMsg = selectedVideoFormat?.filesize_approx && selectedAudioFormat?.filesize_approx ? formatFileSize(selectedVideoFormat.filesize_approx + selectedAudioFormat.filesize_approx) : 'unknown filesize';
|
||||||
|
} else if (selectedFormat?.filesize_approx) {
|
||||||
|
selectedFormatFileSizeMsg = formatFileSize(selectedFormat.filesize_approx);
|
||||||
|
}
|
||||||
|
|
||||||
|
let selectedFormatFinalMsg = '';
|
||||||
|
if (activeDownloadModeTab === 'combine') {
|
||||||
|
if (selectedCombinableVideoFormat && selectedCombinableAudioFormat) {
|
||||||
|
selectedFormatFinalMsg = `${selectedFormatExtensionMsg} (${selectedFormatResolutionMsg}) ${selectedFormatDynamicRangeMsg} ${selectedSubtitles.length > 0 ? `• ESUB` : ''} • ${selectedFormatFileSizeMsg}`;
|
||||||
|
} else {
|
||||||
|
selectedFormatFinalMsg = `Choose a video and audio stream to combine`;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (selectedFormat) {
|
||||||
|
selectedFormatFinalMsg = `${selectedFormatExtensionMsg} (${selectedFormatResolutionMsg}) ${selectedFormatDynamicRangeMsg} ${selectedSubtitles.length > 0 ? `• ESUB` : ''} • ${selectedFormatFileSizeMsg}`;
|
||||||
|
} else {
|
||||||
|
selectedFormatFinalMsg = `Choose a stream to download`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const updateBottomBarWidth = (): void => {
|
||||||
|
if (containerRef.current && bottomBarRef.current) {
|
||||||
|
bottomBarRef.current.style.width = `${containerRef.current.offsetWidth}px`;
|
||||||
|
const containerRect = containerRef.current.getBoundingClientRect();
|
||||||
|
bottomBarRef.current.style.left = `${containerRect.left}px`;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
updateBottomBarWidth();
|
||||||
|
const resizeObserver = new ResizeObserver(() => {
|
||||||
|
updateBottomBarWidth();
|
||||||
|
});
|
||||||
|
if (containerRef.current) {
|
||||||
|
resizeObserver.observe(containerRef.current);
|
||||||
|
}
|
||||||
|
window.addEventListener('resize', updateBottomBarWidth);
|
||||||
|
window.addEventListener('scroll', updateBottomBarWidth);
|
||||||
|
return () => {
|
||||||
|
resizeObserver.disconnect();
|
||||||
|
window.removeEventListener('resize', updateBottomBarWidth);
|
||||||
|
window.removeEventListener('scroll', updateBottomBarWidth);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
useCustomCommands ? setActiveDownloadConfigurationTab('commands') : setActiveDownloadConfigurationTab('options');
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex justify-between items-center gap-2 fixed bottom-0 right-0 p-4 w-full bg-background rounded-t-lg border-t border-border z-20" ref={bottomBarRef}>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="flex justify-center items-center p-3 rounded-md border border-border">
|
||||||
|
{selectedFormatFileType && (selectedFormatFileType === 'video' || selectedFormatFileType === 'video+audio') && (
|
||||||
|
<Video className="w-4 h-4 stroke-primary" />
|
||||||
|
)}
|
||||||
|
{selectedFormatFileType && selectedFormatFileType === 'audio' && (
|
||||||
|
<Music className="w-4 h-4 stroke-primary" />
|
||||||
|
)}
|
||||||
|
{(!selectedFormatFileType) || (selectedFormatFileType && selectedFormatFileType !== 'video' && selectedFormatFileType !== 'audio' && selectedFormatFileType !== 'video+audio') && (
|
||||||
|
<File className="w-4 h-4 stroke-primary" />
|
||||||
|
)}
|
||||||
|
</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-xs text-muted-foreground">{selectedFormatFinalMsg}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<DownloadConfigDialog selectedFormatFileType={selectedFormatFileType} />
|
||||||
|
<Button
|
||||||
|
onClick={async () => {
|
||||||
|
setIsStartingDownload(true);
|
||||||
|
try {
|
||||||
|
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,
|
||||||
|
downloadConfig: downloadConfiguration,
|
||||||
|
selectedSubtitles: selectedSubtitles.length > 0 ? selectedSubtitles.join(',') : null,
|
||||||
|
playlistItems: selectedPlaylistVideoIndex
|
||||||
|
});
|
||||||
|
} else if (videoMetadata._type === 'video') {
|
||||||
|
await startDownload({
|
||||||
|
url: videoMetadata.webpage_url,
|
||||||
|
selectedFormat: activeDownloadModeTab === 'combine' ? `${selectedCombinableVideoFormat}+${selectedCombinableAudioFormat}` : selectedDownloadFormat === 'best' ? videoMetadata.requested_downloads[0].format_id : selectedDownloadFormat,
|
||||||
|
downloadConfig: downloadConfiguration,
|
||||||
|
selectedSubtitles: selectedSubtitles.length > 0 ? selectedSubtitles.join(',') : null
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// toast({
|
||||||
|
// title: 'Download Initiated',
|
||||||
|
// description: 'Download initiated, it will start shortly.',
|
||||||
|
// });
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Download failed to start:', error);
|
||||||
|
toast.error("Failed to Start Download", {
|
||||||
|
description: "There was an error initiating the download."
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setIsStartingDownload(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={isStartingDownload || !selectedDownloadFormat || (activeDownloadModeTab === 'combine' && (!selectedCombinableVideoFormat || !selectedCombinableAudioFormat)) || (useCustomCommands && !downloadConfiguration.custom_command)}
|
||||||
|
>
|
||||||
|
{isStartingDownload ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
Starting Download
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Start Download'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
375
src/components/pages/downloader/playlistDownloader.tsx
Normal file
375
src/components/pages/downloader/playlistDownloader.tsx
Normal file
@@ -0,0 +1,375 @@
|
|||||||
|
import { useDownloaderPageStatesStore } from "@/services/store";
|
||||||
|
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";
|
||||||
|
|
||||||
|
interface PlaylistPreviewSelectionProps {
|
||||||
|
videoMetadata: RawVideoInfo;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SelectivePlaylistDownloadProps {
|
||||||
|
videoMetadata: RawVideoInfo;
|
||||||
|
audioOnlyFormats: VideoFormat[] | undefined;
|
||||||
|
videoOnlyFormats: VideoFormat[] | undefined;
|
||||||
|
combinedFormats: VideoFormat[] | undefined;
|
||||||
|
qualityPresetFormats: VideoFormat[] | undefined;
|
||||||
|
allFilteredFormats: VideoFormat[];
|
||||||
|
subtitleLanguages: { code: string; lang: string }[];
|
||||||
|
selectedFormat: VideoFormat | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CombinedPlaylistDownloadProps {
|
||||||
|
audioOnlyFormats: VideoFormat[] | undefined;
|
||||||
|
videoOnlyFormats: VideoFormat[] | undefined;
|
||||||
|
subtitleLanguages: { code: string; lang: string }[];
|
||||||
|
selectedFormat: VideoFormat | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PlaylistDownloaderProps {
|
||||||
|
videoMetadata: RawVideoInfo;
|
||||||
|
audioOnlyFormats: VideoFormat[] | undefined;
|
||||||
|
videoOnlyFormats: VideoFormat[] | undefined;
|
||||||
|
combinedFormats: VideoFormat[] | undefined;
|
||||||
|
qualityPresetFormats: VideoFormat[] | undefined;
|
||||||
|
allFilteredFormats: VideoFormat[];
|
||||||
|
subtitleLanguages: { code: string; lang: string }[];
|
||||||
|
selectedFormat: VideoFormat | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
function PlaylistPreviewSelection({ videoMetadata }: PlaylistPreviewSelectionProps) {
|
||||||
|
const selectedPlaylistVideoIndex = useDownloaderPageStatesStore((state) => state.selectedPlaylistVideoIndex);
|
||||||
|
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 resetDownloadConfiguration = useDownloaderPageStatesStore((state) => state.resetDownloadConfiguration);
|
||||||
|
|
||||||
|
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 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
|
||||||
|
className="mb-2"
|
||||||
|
type="multiple"
|
||||||
|
value={selectedVideos}
|
||||||
|
onValueChange={setSelectedVideos}
|
||||||
|
>
|
||||||
|
{videoMetadata.entries.map((entry) => entry ? (
|
||||||
|
<PlaylistToggleGroupItem
|
||||||
|
key={entry.playlist_index}
|
||||||
|
value={entry.playlist_index.toString()}
|
||||||
|
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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div className="spacer mb-12"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectivePlaylistDownload({ videoMetadata, audioOnlyFormats, videoOnlyFormats, combinedFormats, qualityPresetFormats, allFilteredFormats, subtitleLanguages, selectedFormat }: SelectivePlaylistDownloadProps) {
|
||||||
|
const selectedDownloadFormat = useDownloaderPageStatesStore((state) => state.selectedDownloadFormat);
|
||||||
|
const selectedSubtitles = useDownloaderPageStatesStore((state) => state.selectedSubtitles);
|
||||||
|
const selectedPlaylistVideoIndex = useDownloaderPageStatesStore((state) => state.selectedPlaylistVideoIndex);
|
||||||
|
const setSelectedDownloadFormat = useDownloaderPageStatesStore((state) => state.setSelectedDownloadFormat);
|
||||||
|
const setSelectedSubtitles = useDownloaderPageStatesStore((state) => state.setSelectedSubtitles);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col overflow-y-scroll max-h-[50vh] xl:max-h-[60vh] no-scrollbar">
|
||||||
|
{subtitleLanguages && subtitleLanguages.length > 0 && (
|
||||||
|
<ToggleGroup
|
||||||
|
type="multiple"
|
||||||
|
variant="outline"
|
||||||
|
className="flex flex-col items-start gap-2 mb-2"
|
||||||
|
value={selectedSubtitles}
|
||||||
|
onValueChange={(value) => setSelectedSubtitles(value)}
|
||||||
|
disabled={selectedFormat?.ext !== 'mp4' && selectedFormat?.ext !== 'mkv' && selectedFormat?.ext !== 'webm'}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ToggleGroup>
|
||||||
|
)}
|
||||||
|
<FormatSelectionGroup
|
||||||
|
value={selectedDownloadFormat}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setSelectedDownloadFormat(value);
|
||||||
|
const currentlySelectedFormat = value === 'best' ? videoMetadata?.entries[Number(value) - 1].requested_downloads[0] : allFilteredFormats.find((format) => format.format_id === value);
|
||||||
|
if (currentlySelectedFormat?.ext !== 'mp4' && currentlySelectedFormat?.ext !== 'mkv' && currentlySelectedFormat?.ext !== 'webm') {
|
||||||
|
setSelectedSubtitles([]);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p className="text-xs">Suggested</p>
|
||||||
|
<div className="">
|
||||||
|
<FormatSelectionGroupItem
|
||||||
|
key="best"
|
||||||
|
value="best"
|
||||||
|
format={videoMetadata.entries[Number(selectedPlaylistVideoIndex) - 1].requested_downloads[0]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{qualityPresetFormats && qualityPresetFormats.length > 0 && (
|
||||||
|
<>
|
||||||
|
<p className="text-xs">Quality Presets</p>
|
||||||
|
<div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
|
||||||
|
{qualityPresetFormats.map((format) => (
|
||||||
|
<FormatSelectionGroupItem
|
||||||
|
key={format.format_id}
|
||||||
|
value={format.format_id}
|
||||||
|
format={format}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{audioOnlyFormats && audioOnlyFormats.length > 0 && (
|
||||||
|
<>
|
||||||
|
<p className="text-xs">Audio</p>
|
||||||
|
<div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
|
||||||
|
{audioOnlyFormats.map((format) => (
|
||||||
|
<FormatSelectionGroupItem
|
||||||
|
key={format.format_id}
|
||||||
|
value={format.format_id}
|
||||||
|
format={format}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{videoOnlyFormats && videoOnlyFormats.length > 0 && (
|
||||||
|
<>
|
||||||
|
<p className="text-xs">Video {videoOnlyFormats.every(format => format.acodec === 'none') ? '(no audio)' : ''}</p>
|
||||||
|
<div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
|
||||||
|
{videoOnlyFormats.map((format) => (
|
||||||
|
<FormatSelectionGroupItem
|
||||||
|
key={format.format_id}
|
||||||
|
value={format.format_id}
|
||||||
|
format={format}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{combinedFormats && combinedFormats.length > 0 && (
|
||||||
|
<>
|
||||||
|
<p className="text-xs">Video</p>
|
||||||
|
<div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
|
||||||
|
{combinedFormats.map((format) => (
|
||||||
|
<FormatSelectionGroupItem
|
||||||
|
key={format.format_id}
|
||||||
|
value={format.format_id}
|
||||||
|
format={format}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</FormatSelectionGroup>
|
||||||
|
<div className="spacer mb-12"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CombinedPlaylistDownload({ audioOnlyFormats, videoOnlyFormats, subtitleLanguages, selectedFormat }: CombinedPlaylistDownloadProps) {
|
||||||
|
const selectedCombinableVideoFormat = useDownloaderPageStatesStore((state) => state.selectedCombinableVideoFormat);
|
||||||
|
const selectedCombinableAudioFormat = useDownloaderPageStatesStore((state) => state.selectedCombinableAudioFormat);
|
||||||
|
const selectedSubtitles = useDownloaderPageStatesStore((state) => state.selectedSubtitles);
|
||||||
|
const setSelectedCombinableVideoFormat = useDownloaderPageStatesStore((state) => state.setSelectedCombinableVideoFormat);
|
||||||
|
const setSelectedCombinableAudioFormat = useDownloaderPageStatesStore((state) => state.setSelectedCombinableAudioFormat);
|
||||||
|
const setSelectedSubtitles = useDownloaderPageStatesStore((state) => state.setSelectedSubtitles);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col overflow-y-scroll max-h-[50vh] xl:max-h-[60vh] no-scrollbar">
|
||||||
|
{audioOnlyFormats && audioOnlyFormats.length > 0 && videoOnlyFormats && videoOnlyFormats.length > 0 && subtitleLanguages && subtitleLanguages.length > 0 && (
|
||||||
|
<ToggleGroup
|
||||||
|
type="multiple"
|
||||||
|
variant="outline"
|
||||||
|
className="flex flex-col items-start gap-2 mb-2"
|
||||||
|
value={selectedSubtitles}
|
||||||
|
onValueChange={(value) => setSelectedSubtitles(value)}
|
||||||
|
disabled={selectedFormat?.ext !== 'mp4' && selectedFormat?.ext !== 'mkv' && selectedFormat?.ext !== 'webm'}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ToggleGroup>
|
||||||
|
)}
|
||||||
|
<FormatSelectionGroup
|
||||||
|
className="mb-2"
|
||||||
|
value={selectedCombinableAudioFormat}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setSelectedCombinableAudioFormat(value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{videoOnlyFormats && videoOnlyFormats.length > 0 && audioOnlyFormats && audioOnlyFormats.length > 0 && (
|
||||||
|
<>
|
||||||
|
<p className="text-xs">Audio</p>
|
||||||
|
<div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
|
||||||
|
{audioOnlyFormats.map((format) => (
|
||||||
|
<FormatSelectionGroupItem
|
||||||
|
key={format.format_id}
|
||||||
|
value={format.format_id}
|
||||||
|
format={format}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</FormatSelectionGroup>
|
||||||
|
<FormatSelectionGroup
|
||||||
|
value={selectedCombinableVideoFormat}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setSelectedCombinableVideoFormat(value);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{audioOnlyFormats && audioOnlyFormats.length > 0 && videoOnlyFormats && videoOnlyFormats.length > 0 && (
|
||||||
|
<>
|
||||||
|
<p className="text-xs">Video</p>
|
||||||
|
<div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
|
||||||
|
{videoOnlyFormats.map((format) => (
|
||||||
|
<FormatSelectionGroupItem
|
||||||
|
key={format.format_id}
|
||||||
|
value={format.format_id}
|
||||||
|
format={format}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</FormatSelectionGroup>
|
||||||
|
{(!videoOnlyFormats || videoOnlyFormats.length === 0 || !audioOnlyFormats || audioOnlyFormats.length === 0) && (
|
||||||
|
<Alert>
|
||||||
|
<AlertCircleIcon className="size-4 stroke-primary" />
|
||||||
|
<AlertTitle>Unable to use Combine Mode!</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
Cannot use combine mode for this video as it does not have both audio and video formats available. Use Selective Mode or try another video.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
<div className="spacer mb-12"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function PlaylistDownloader({ videoMetadata, audioOnlyFormats, videoOnlyFormats, combinedFormats, qualityPresetFormats, allFilteredFormats, subtitleLanguages, selectedFormat }: PlaylistDownloaderProps) {
|
||||||
|
const activeDownloadModeTab = useDownloaderPageStatesStore((state) => state.activeDownloadModeTab);
|
||||||
|
const setActiveDownloadModeTab = useDownloaderPageStatesStore((state) => state.setActiveDownloadModeTab);
|
||||||
|
const playlistPanelSizes = useDownloaderPageStatesStore((state) => state.playlistPanelSizes);
|
||||||
|
const setPlaylistPanelSizes = useDownloaderPageStatesStore((state) => state.setPlaylistPanelSizes);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex">
|
||||||
|
<ResizablePanelGroup
|
||||||
|
direction="horizontal"
|
||||||
|
className="w-full"
|
||||||
|
onLayout={(sizes) => setPlaylistPanelSizes(sizes)}
|
||||||
|
>
|
||||||
|
<ResizablePanel
|
||||||
|
defaultSize={playlistPanelSizes[0]}
|
||||||
|
>
|
||||||
|
<PlaylistPreviewSelection videoMetadata={videoMetadata} />
|
||||||
|
</ResizablePanel>
|
||||||
|
<ResizableHandle />
|
||||||
|
<ResizablePanel
|
||||||
|
defaultSize={playlistPanelSizes[1]}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col w-full pl-4">
|
||||||
|
<Tabs
|
||||||
|
className=""
|
||||||
|
value={activeDownloadModeTab}
|
||||||
|
onValueChange={(tab) => setActiveDownloadModeTab(tab)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h3 className="text-sm flex items-center gap-2">
|
||||||
|
<DownloadCloud className="w-4 h-4" />
|
||||||
|
<span>Download Options</span>
|
||||||
|
</h3>
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="selective">Selective</TabsTrigger>
|
||||||
|
<TabsTrigger value="combine">Combine</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</div>
|
||||||
|
<TabsContent value="selective">
|
||||||
|
<SelectivePlaylistDownload
|
||||||
|
videoMetadata={videoMetadata}
|
||||||
|
audioOnlyFormats={audioOnlyFormats}
|
||||||
|
videoOnlyFormats={videoOnlyFormats}
|
||||||
|
combinedFormats={combinedFormats}
|
||||||
|
qualityPresetFormats={qualityPresetFormats}
|
||||||
|
allFilteredFormats={allFilteredFormats}
|
||||||
|
subtitleLanguages={subtitleLanguages}
|
||||||
|
selectedFormat={selectedFormat}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="combine">
|
||||||
|
<CombinedPlaylistDownload
|
||||||
|
audioOnlyFormats={audioOnlyFormats}
|
||||||
|
videoOnlyFormats={videoOnlyFormats}
|
||||||
|
subtitleLanguages={subtitleLanguages}
|
||||||
|
selectedFormat={selectedFormat}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</ResizablePanel>
|
||||||
|
</ResizablePanelGroup>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
379
src/components/pages/downloader/videoDownloader.tsx
Normal file
379
src/components/pages/downloader/videoDownloader.tsx
Normal file
@@ -0,0 +1,379 @@
|
|||||||
|
import clsx from "clsx";
|
||||||
|
import { ProxyImage } from "@/components/custom/proxyImage";
|
||||||
|
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { useDownloaderPageStatesStore } from "@/services/store";
|
||||||
|
import { formatBitrate, formatDurationString, formatReleaseDate, formatYtStyleCount, isObjEmpty } from "@/utils";
|
||||||
|
import { Calendar, Clock, DownloadCloud, Eye, Info, ThumbsUp, 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||||
|
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
|
||||||
|
|
||||||
|
interface VideoPreviewProps {
|
||||||
|
videoMetadata: RawVideoInfo;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface SelectiveVideoDownloadProps {
|
||||||
|
videoMetadata: RawVideoInfo;
|
||||||
|
audioOnlyFormats: VideoFormat[] | undefined;
|
||||||
|
videoOnlyFormats: VideoFormat[] | undefined;
|
||||||
|
combinedFormats: VideoFormat[] | undefined;
|
||||||
|
qualityPresetFormats: VideoFormat[] | undefined;
|
||||||
|
subtitleLanguages: { code: string; lang: string }[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CombinedVideoDownloadProps {
|
||||||
|
audioOnlyFormats: VideoFormat[] | undefined;
|
||||||
|
videoOnlyFormats: VideoFormat[] | undefined;
|
||||||
|
subtitleLanguages: { code: string; lang: string }[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface VideoDownloaderProps {
|
||||||
|
videoMetadata: RawVideoInfo;
|
||||||
|
audioOnlyFormats: VideoFormat[] | undefined;
|
||||||
|
videoOnlyFormats: VideoFormat[] | undefined;
|
||||||
|
combinedFormats: VideoFormat[] | undefined;
|
||||||
|
qualityPresetFormats: VideoFormat[] | undefined;
|
||||||
|
subtitleLanguages: { code: string; lang: string }[];
|
||||||
|
}
|
||||||
|
|
||||||
|
function VideoPreview({ videoMetadata }: VideoPreviewProps) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col w-full pr-4">
|
||||||
|
<h3 className="text-sm mb-4 mt-2 flex items-center gap-2">
|
||||||
|
<Info className="w-4 h-4" />
|
||||||
|
<span>Metadata</span>
|
||||||
|
</h3>
|
||||||
|
<div className="flex flex-col overflow-y-scroll max-h-[50vh] xl:max-h-[60vh] no-scrollbar">
|
||||||
|
<AspectRatio ratio={16 / 9} className={clsx("w-full rounded-lg overflow-hidden mb-2 border border-border", videoMetadata.aspect_ratio && videoMetadata.aspect_ratio === 0.56 && "relative")}>
|
||||||
|
<ProxyImage src={videoMetadata.thumbnail} alt="thumbnail" className={clsx(videoMetadata.aspect_ratio && videoMetadata.aspect_ratio === 0.56 && "absolute h-full w-auto top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")} />
|
||||||
|
</AspectRatio>
|
||||||
|
<h2 className="mb-1">{videoMetadata.title ? videoMetadata.title : 'UNTITLED'}</h2>
|
||||||
|
<p className="text-muted-foreground text-xs mb-2">{videoMetadata.creator || videoMetadata.channel || videoMetadata.uploader || 'unknown'}</p>
|
||||||
|
<div className="flex items-center mb-2">
|
||||||
|
<span className="text-xs text-muted-foreground flex items-center pr-3"><Clock className="w-4 h-4 mr-2"/> {videoMetadata.duration_string ? formatDurationString(videoMetadata.duration_string) : 'unknown'}</span>
|
||||||
|
<Separator orientation="vertical" />
|
||||||
|
<span className="text-xs text-muted-foreground flex items-center px-3"><Eye className="w-4 h-4 mr-2"/> {videoMetadata.view_count ? formatYtStyleCount(videoMetadata.view_count) : 'unknown'}</span>
|
||||||
|
<Separator orientation="vertical" />
|
||||||
|
<span className="text-xs text-muted-foreground flex items-center pl-3"><ThumbsUp className="w-4 h-4 mr-2"/> {videoMetadata.like_count ? formatYtStyleCount(videoMetadata.like_count) : 'unknown'}</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground flex items-center gap-2 mb-2">
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
<span className="">{videoMetadata.upload_date ? formatReleaseDate(videoMetadata.upload_date) : 'unknown'}</span>
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-wrap gap-2 text-xs mb-2">
|
||||||
|
{videoMetadata.resolution && (
|
||||||
|
<span className="border border-border py-1 px-2 rounded">{videoMetadata.resolution}</span>
|
||||||
|
)}
|
||||||
|
{videoMetadata.tbr && (
|
||||||
|
<span className="border border-border py-1 px-2 rounded">{formatBitrate(videoMetadata.tbr)}</span>
|
||||||
|
)}
|
||||||
|
{videoMetadata.fps && (
|
||||||
|
<span className="border border-border py-1 px-2 rounded">{videoMetadata.fps} fps</span>
|
||||||
|
)}
|
||||||
|
{videoMetadata.subtitles && !isObjEmpty(videoMetadata.subtitles) && (
|
||||||
|
<span className="border border-border py-1 px-2 rounded">SUB</span>
|
||||||
|
)}
|
||||||
|
{videoMetadata.dynamic_range && videoMetadata.dynamic_range !== 'SDR' && (
|
||||||
|
<span className="border border-border py-1 px-2 rounded">{videoMetadata.dynamic_range}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-muted-foreground">
|
||||||
|
<Info className="w-3 h-3 mr-2" />
|
||||||
|
<span className="text-xs">Extracted from {videoMetadata.extractor ? videoMetadata.extractor.charAt(0).toUpperCase() + videoMetadata.extractor.slice(1) : 'Unknown'}</span>
|
||||||
|
</div>
|
||||||
|
<div className="spacer mb-12"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function SelectiveVideoDownload({ videoMetadata, audioOnlyFormats, videoOnlyFormats, combinedFormats, qualityPresetFormats, subtitleLanguages }: SelectiveVideoDownloadProps) {
|
||||||
|
const selectedDownloadFormat = useDownloaderPageStatesStore((state) => state.selectedDownloadFormat);
|
||||||
|
const selectedSubtitles = useDownloaderPageStatesStore((state) => state.selectedSubtitles);
|
||||||
|
const setSelectedDownloadFormat = useDownloaderPageStatesStore((state) => state.setSelectedDownloadFormat);
|
||||||
|
const setSelectedSubtitles = useDownloaderPageStatesStore((state) => state.setSelectedSubtitles);
|
||||||
|
const setDownloadConfigurationKey = useDownloaderPageStatesStore((state) => state.setDownloadConfigurationKey);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col overflow-y-scroll max-h-[50vh] xl:max-h-[60vh] no-scrollbar">
|
||||||
|
{subtitleLanguages && subtitleLanguages.length > 0 && (
|
||||||
|
<ToggleGroup
|
||||||
|
type="multiple"
|
||||||
|
variant="outline"
|
||||||
|
className="flex flex-col items-start gap-2 mb-2"
|
||||||
|
value={selectedSubtitles}
|
||||||
|
onValueChange={(value) => setSelectedSubtitles(value)}
|
||||||
|
// disabled={selectedFormat?.ext !== 'mp4' && selectedFormat?.ext !== 'mkv' && selectedFormat?.ext !== 'webm'}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ToggleGroup>
|
||||||
|
)}
|
||||||
|
<FormatSelectionGroup
|
||||||
|
value={selectedDownloadFormat}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setSelectedDownloadFormat(value);
|
||||||
|
// const currentlySelectedFormat = value === 'best' ? videoMetadata?.requested_downloads[0] : allFilteredFormats.find((format) => format.format_id === value);
|
||||||
|
// if (currentlySelectedFormat?.ext !== 'mp4' && currentlySelectedFormat?.ext !== 'mkv' && currentlySelectedFormat?.ext !== 'webm') {
|
||||||
|
// setSelectedSubtitles([]);
|
||||||
|
// }
|
||||||
|
setDownloadConfigurationKey('output_format', null);
|
||||||
|
setDownloadConfigurationKey('embed_metadata', null);
|
||||||
|
setDownloadConfigurationKey('embed_thumbnail', null);
|
||||||
|
setDownloadConfigurationKey('sponsorblock', null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p className="text-xs">Suggested</p>
|
||||||
|
<div className="">
|
||||||
|
<FormatSelectionGroupItem
|
||||||
|
key="best"
|
||||||
|
value="best"
|
||||||
|
format={videoMetadata.requested_downloads[0]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{qualityPresetFormats && qualityPresetFormats.length > 0 && (
|
||||||
|
<>
|
||||||
|
<p className="text-xs">Quality Presets</p>
|
||||||
|
<div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
|
||||||
|
{qualityPresetFormats.map((format) => (
|
||||||
|
<FormatSelectionGroupItem
|
||||||
|
key={format.format_id}
|
||||||
|
value={format.format_id}
|
||||||
|
format={format}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{audioOnlyFormats && audioOnlyFormats.length > 0 && (
|
||||||
|
<>
|
||||||
|
<p className="text-xs">Audio</p>
|
||||||
|
<div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
|
||||||
|
{audioOnlyFormats.map((format) => (
|
||||||
|
<FormatSelectionGroupItem
|
||||||
|
key={format.format_id}
|
||||||
|
value={format.format_id}
|
||||||
|
format={format}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{videoOnlyFormats && videoOnlyFormats.length > 0 && (
|
||||||
|
<>
|
||||||
|
<p className="text-xs">Video {videoOnlyFormats.every(format => format.acodec === 'none') ? '(no audio)' : ''}</p>
|
||||||
|
<div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
|
||||||
|
{videoOnlyFormats.map((format) => (
|
||||||
|
<FormatSelectionGroupItem
|
||||||
|
key={format.format_id}
|
||||||
|
value={format.format_id}
|
||||||
|
format={format}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{combinedFormats && combinedFormats.length > 0 && (
|
||||||
|
<>
|
||||||
|
<p className="text-xs">Video</p>
|
||||||
|
<div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
|
||||||
|
{combinedFormats.map((format) => (
|
||||||
|
<FormatSelectionGroupItem
|
||||||
|
key={format.format_id}
|
||||||
|
value={format.format_id}
|
||||||
|
format={format}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</FormatSelectionGroup>
|
||||||
|
<div className="spacer mb-12"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CombinedVideoDownload({ audioOnlyFormats, videoOnlyFormats, subtitleLanguages }: CombinedVideoDownloadProps) {
|
||||||
|
const selectedCombinableVideoFormat = useDownloaderPageStatesStore((state) => state.selectedCombinableVideoFormat);
|
||||||
|
const selectedCombinableAudioFormat = useDownloaderPageStatesStore((state) => state.selectedCombinableAudioFormat);
|
||||||
|
const selectedSubtitles = useDownloaderPageStatesStore((state) => state.selectedSubtitles);
|
||||||
|
const setSelectedCombinableVideoFormat = useDownloaderPageStatesStore((state) => state.setSelectedCombinableVideoFormat);
|
||||||
|
const setSelectedCombinableAudioFormat = useDownloaderPageStatesStore((state) => state.setSelectedCombinableAudioFormat);
|
||||||
|
const setSelectedSubtitles = useDownloaderPageStatesStore((state) => state.setSelectedSubtitles);
|
||||||
|
const setDownloadConfigurationKey = useDownloaderPageStatesStore((state) => state.setDownloadConfigurationKey);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col overflow-y-scroll max-h-[50vh] xl:max-h-[60vh] no-scrollbar">
|
||||||
|
{audioOnlyFormats && audioOnlyFormats.length > 0 && videoOnlyFormats && videoOnlyFormats.length > 0 && subtitleLanguages && subtitleLanguages.length > 0 && (
|
||||||
|
<ToggleGroup
|
||||||
|
type="multiple"
|
||||||
|
variant="outline"
|
||||||
|
className="flex flex-col items-start gap-2 mb-2"
|
||||||
|
value={selectedSubtitles}
|
||||||
|
onValueChange={(value) => setSelectedSubtitles(value)}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</ToggleGroup>
|
||||||
|
)}
|
||||||
|
<FormatSelectionGroup
|
||||||
|
className="mb-2"
|
||||||
|
value={selectedCombinableAudioFormat}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setSelectedCombinableAudioFormat(value);
|
||||||
|
setDownloadConfigurationKey('output_format', null);
|
||||||
|
setDownloadConfigurationKey('embed_metadata', null);
|
||||||
|
setDownloadConfigurationKey('embed_thumbnail', null);
|
||||||
|
setDownloadConfigurationKey('sponsorblock', null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{videoOnlyFormats && videoOnlyFormats.length > 0 && audioOnlyFormats && audioOnlyFormats.length > 0 && (
|
||||||
|
<>
|
||||||
|
<p className="text-xs">Audio</p>
|
||||||
|
<div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
|
||||||
|
{audioOnlyFormats.map((format) => (
|
||||||
|
<FormatSelectionGroupItem
|
||||||
|
key={format.format_id}
|
||||||
|
value={format.format_id}
|
||||||
|
format={format}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</FormatSelectionGroup>
|
||||||
|
<FormatSelectionGroup
|
||||||
|
value={selectedCombinableVideoFormat}
|
||||||
|
onValueChange={(value) => {
|
||||||
|
setSelectedCombinableVideoFormat(value);
|
||||||
|
setDownloadConfigurationKey('output_format', null);
|
||||||
|
setDownloadConfigurationKey('embed_metadata', null);
|
||||||
|
setDownloadConfigurationKey('embed_thumbnail', null);
|
||||||
|
setDownloadConfigurationKey('sponsorblock', null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{audioOnlyFormats && audioOnlyFormats.length > 0 && videoOnlyFormats && videoOnlyFormats.length > 0 && (
|
||||||
|
<>
|
||||||
|
<p className="text-xs">Video</p>
|
||||||
|
<div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
|
||||||
|
{videoOnlyFormats.map((format) => (
|
||||||
|
<FormatSelectionGroupItem
|
||||||
|
key={format.format_id}
|
||||||
|
value={format.format_id}
|
||||||
|
format={format}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</FormatSelectionGroup>
|
||||||
|
{(!videoOnlyFormats || videoOnlyFormats.length === 0 || !audioOnlyFormats || audioOnlyFormats.length === 0) && (
|
||||||
|
<Alert>
|
||||||
|
<AlertCircleIcon className="size-4 stroke-primary" />
|
||||||
|
<AlertTitle>Unable to use Combine Mode!</AlertTitle>
|
||||||
|
<AlertDescription>
|
||||||
|
Cannot use combine mode for this video as it does not have both audio and video formats available. Use Selective Mode or try another video.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
)}
|
||||||
|
<div className="spacer mb-12"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function VideoDownloader({ videoMetadata, audioOnlyFormats, videoOnlyFormats, combinedFormats, qualityPresetFormats, subtitleLanguages }: VideoDownloaderProps) {
|
||||||
|
const activeDownloadModeTab = useDownloaderPageStatesStore((state) => state.activeDownloadModeTab);
|
||||||
|
const setActiveDownloadModeTab = useDownloaderPageStatesStore((state) => state.setActiveDownloadModeTab);
|
||||||
|
const setDownloadConfigurationKey = useDownloaderPageStatesStore((state) => state.setDownloadConfigurationKey);
|
||||||
|
const videoPanelSizes = useDownloaderPageStatesStore((state) => state.videoPanelSizes);
|
||||||
|
const setVideoPanelSizes = useDownloaderPageStatesStore((state) => state.setVideoPanelSizes);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex">
|
||||||
|
<ResizablePanelGroup
|
||||||
|
direction="horizontal"
|
||||||
|
className="w-full"
|
||||||
|
onLayout={(sizes) => setVideoPanelSizes(sizes)}
|
||||||
|
>
|
||||||
|
<ResizablePanel
|
||||||
|
defaultSize={videoPanelSizes[0]}
|
||||||
|
>
|
||||||
|
<VideoPreview videoMetadata={videoMetadata} />
|
||||||
|
</ResizablePanel>
|
||||||
|
<ResizableHandle />
|
||||||
|
<ResizablePanel
|
||||||
|
defaultSize={videoPanelSizes[1]}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col w-full pl-4">
|
||||||
|
<Tabs
|
||||||
|
className=""
|
||||||
|
value={activeDownloadModeTab}
|
||||||
|
onValueChange={(tab) => {
|
||||||
|
setActiveDownloadModeTab(tab)
|
||||||
|
setDownloadConfigurationKey('output_format', null);
|
||||||
|
setDownloadConfigurationKey('embed_metadata', null);
|
||||||
|
setDownloadConfigurationKey('embed_thumbnail', null);
|
||||||
|
setDownloadConfigurationKey('sponsorblock', null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h3 className="text-sm flex items-center gap-2">
|
||||||
|
<DownloadCloud className="w-4 h-4" />
|
||||||
|
<span>Download Options</span>
|
||||||
|
</h3>
|
||||||
|
<TabsList>
|
||||||
|
<TabsTrigger value="selective">Selective</TabsTrigger>
|
||||||
|
<TabsTrigger value="combine">Combine</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
</div>
|
||||||
|
<TabsContent value="selective">
|
||||||
|
<SelectiveVideoDownload
|
||||||
|
videoMetadata={videoMetadata}
|
||||||
|
audioOnlyFormats={audioOnlyFormats}
|
||||||
|
videoOnlyFormats={videoOnlyFormats}
|
||||||
|
combinedFormats={combinedFormats}
|
||||||
|
qualityPresetFormats={qualityPresetFormats}
|
||||||
|
subtitleLanguages={subtitleLanguages}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent value="combine">
|
||||||
|
<CombinedVideoDownload
|
||||||
|
audioOnlyFormats={audioOnlyFormats}
|
||||||
|
videoOnlyFormats={videoOnlyFormats}
|
||||||
|
subtitleLanguages={subtitleLanguages}
|
||||||
|
/>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</div>
|
||||||
|
</ResizablePanel>
|
||||||
|
</ResizablePanelGroup>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
286
src/components/pages/library/completedDownloads.tsx
Normal file
286
src/components/pages/library/completedDownloads.tsx
Normal file
@@ -0,0 +1,286 @@
|
|||||||
|
import { ProxyImage } from "@/components/custom/proxyImage";
|
||||||
|
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { useCurrentVideoMetadataStore, useDownloadActionStatesStore } from "@/services/store";
|
||||||
|
import { formatBitrate, formatCodec, formatDurationString, formatFileSize } from "@/utils";
|
||||||
|
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 { DownloadState } from "@/types/download";
|
||||||
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { useDeleteDownloadState } from "@/services/mutations";
|
||||||
|
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { useLogger } from "@/helpers/use-logger";
|
||||||
|
import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
|
||||||
|
|
||||||
|
interface CompletedDownloadProps {
|
||||||
|
state: DownloadState;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface CompletedDownloadsProps {
|
||||||
|
downloads: DownloadState[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CompletedDownload({ state }: CompletedDownloadProps) {
|
||||||
|
const downloadActions = useDownloadActionStatesStore(state => state.downloadActions);
|
||||||
|
const setIsDeleteFileChecked = useDownloadActionStatesStore(state => state.setIsDeleteFileChecked);
|
||||||
|
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const downloadStateDeleter = useDeleteDownloadState();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const LOG = useLogger();
|
||||||
|
|
||||||
|
const openFile = async (filePath: string | null, app: string | null) => {
|
||||||
|
if (filePath && await fs.exists(filePath)) {
|
||||||
|
try {
|
||||||
|
await invoke('open_file_with_app', { filePath: filePath, appName: app }).then(() => {
|
||||||
|
toast.info(`${app === 'explorer' ? 'Revealing' : 'Opening'} file`, {
|
||||||
|
description: `${app === 'explorer' ? 'Revealing' : 'Opening'} the file ${app === 'explorer' ? 'in' : 'with'} ${app ? app : 'default app'}.`,
|
||||||
|
})
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
toast.error(`Failed to ${app === 'explorer' ? 'reveal' : 'open'} file`, {
|
||||||
|
description: `An error occurred while trying to ${app === 'explorer' ? 'reveal' : 'open'} the file.`,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
toast.info("File unavailable", {
|
||||||
|
description: `The file you are trying to ${app === 'explorer' ? 'reveal' : 'open'} does not exist.`,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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}"`);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
downloadStateDeleter.mutate(downloadState.download_id, {
|
||||||
|
onSuccess: (data) => {
|
||||||
|
console.log("Download State deleted successfully:", data);
|
||||||
|
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.`,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
toast.success("Removed from downloads", {
|
||||||
|
description: `The download for "${downloadState.title}" has been removed successfully.`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onError: (error) => {
|
||||||
|
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}".`,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
toast.error("Failed to remove download", {
|
||||||
|
description: `An error occurred while trying to remove the download for "${downloadState.title}".`,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSearch = async (url: string, isPlaylist: boolean) => {
|
||||||
|
try {
|
||||||
|
LOG.info('NEODLP', `Received search request from library for URL: ${url}`);
|
||||||
|
navigate('/');
|
||||||
|
const { setRequestedUrl, setAutoSubmitSearch } = useCurrentVideoMetadataStore.getState();
|
||||||
|
setRequestedUrl(url);
|
||||||
|
setAutoSubmitSearch(true);
|
||||||
|
toast.info(`Initiating ${isPlaylist ? 'Playlist' : 'Video'} Search`, {
|
||||||
|
description: `Initiating search for the selected ${isPlaylist ? 'playlist' : 'video'}.`,
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
toast.error("Failed to initiate search", {
|
||||||
|
description: "An error occurred while trying to initiate the search.",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const itemActionStates = downloadActions[state.download_id] || {
|
||||||
|
isResuming: false,
|
||||||
|
isPausing: false,
|
||||||
|
isCanceling: false,
|
||||||
|
isDeleteFileChecked: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
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>
|
||||||
|
</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>
|
||||||
|
<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>
|
||||||
|
<Separator orientation="vertical" />
|
||||||
|
<span className="text-xs text-muted-foreground flex items-center px-3">
|
||||||
|
{state.filetype && (state.filetype === 'video' || state.filetype === 'video+audio') && (
|
||||||
|
<FileVideo2 className="w-4 h-4 mr-2"/>
|
||||||
|
)}
|
||||||
|
{state.filetype && state.filetype === 'audio' && (
|
||||||
|
<FileAudio2 className="w-4 h-4 mr-2" />
|
||||||
|
)}
|
||||||
|
{(!state.filetype) || (state.filetype && state.filetype !== 'video' && state.filetype !== 'audio' && state.filetype !== 'video+audio') && (
|
||||||
|
<FileQuestion className="w-4 h-4 mr-2" />
|
||||||
|
)}
|
||||||
|
{state.filesize ? formatFileSize(state.filesize) : 'unknown'}
|
||||||
|
</span>
|
||||||
|
<Separator orientation="vertical" />
|
||||||
|
<span className="text-xs text-muted-foreground flex items-center pl-3"><AudioLines className="w-4 h-4 mr-2"/>
|
||||||
|
{state.vbr && state.abr ? (
|
||||||
|
formatBitrate(state.vbr + state.abr)
|
||||||
|
) : state.vbr ? (
|
||||||
|
formatBitrate(state.vbr)
|
||||||
|
) : state.abr ? (
|
||||||
|
formatBitrate(state.abr)
|
||||||
|
) : (
|
||||||
|
'unknown'
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="hidden xl:flex items-center mt-1 gap-2 flex-wrap text-xs">
|
||||||
|
{state.playlist_id && state.playlist_index && (
|
||||||
|
<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})
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{state.vcodec && (
|
||||||
|
<span className="border border-border py-1 px-2 rounded">{formatCodec(state.vcodec)}</span>
|
||||||
|
)}
|
||||||
|
{state.acodec && (
|
||||||
|
<span className="border border-border py-1 px-2 rounded">{formatCodec(state.acodec)}</span>
|
||||||
|
)}
|
||||||
|
{state.dynamic_range && state.dynamic_range !== 'SDR' && (
|
||||||
|
<span className="border border-border py-1 px-2 rounded">{state.dynamic_range}</span>
|
||||||
|
)}
|
||||||
|
{state.subtitle_id && (
|
||||||
|
<span
|
||||||
|
className="border border-border py-1 px-2 rounded cursor-pointer"
|
||||||
|
title={`EMBEDED SUBTITLE (${state.subtitle_id})`}
|
||||||
|
>
|
||||||
|
ESUB
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full flex items-center gap-2">
|
||||||
|
<Button size="sm" onClick={() => openFile(state.filepath, null)}>
|
||||||
|
<Play className="w-4 h-4" />
|
||||||
|
Open
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="outline" onClick={() => openFile(state.filepath, 'explorer')}>
|
||||||
|
<FolderInput className="w-4 h-4" />
|
||||||
|
Reveal
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="outline" onClick={() => handleSearch(state.url, state.playlist_id ? true : false)}>
|
||||||
|
<Search className="w-4 h-4" />
|
||||||
|
Search
|
||||||
|
</Button>
|
||||||
|
<AlertDialog>
|
||||||
|
<AlertDialogTrigger asChild>
|
||||||
|
<Button size="sm" variant="destructive">
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
Remove
|
||||||
|
</Button>
|
||||||
|
</AlertDialogTrigger>
|
||||||
|
<AlertDialogContent>
|
||||||
|
<AlertDialogHeader>
|
||||||
|
<AlertDialogTitle>Remove from library?</AlertDialogTitle>
|
||||||
|
<AlertDialogDescription>
|
||||||
|
Are you sure you want to remove this download from the library? You can also delete the downloaded file by cheking the box below. This action cannot be undone.
|
||||||
|
</AlertDialogDescription>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox id="delete-file" checked={itemActionStates.isDeleteFileChecked} onCheckedChange={() => {setIsDeleteFileChecked(state.download_id, !itemActionStates.isDeleteFileChecked)}} />
|
||||||
|
<Label htmlFor="delete-file">Delete the downloaded file</Label>
|
||||||
|
</div>
|
||||||
|
</AlertDialogHeader>
|
||||||
|
<AlertDialogFooter>
|
||||||
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||||
|
<AlertDialogAction onClick={
|
||||||
|
() => removeFromDownloads(state, itemActionStates.isDeleteFileChecked).then(() => {
|
||||||
|
setIsDeleteFileChecked(state.download_id, false);
|
||||||
|
})
|
||||||
|
}>Remove</AlertDialogAction>
|
||||||
|
</AlertDialogFooter>
|
||||||
|
</AlertDialogContent>
|
||||||
|
</AlertDialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CompletedDownloads({ downloads }: CompletedDownloadsProps) {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full flex flex-col gap-2">
|
||||||
|
{downloads.length > 0 ? (
|
||||||
|
downloads.map((state) => {
|
||||||
|
return (
|
||||||
|
<CompletedDownload key={state.download_id} state={state} />
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<Empty className="mt-10">
|
||||||
|
<EmptyHeader>
|
||||||
|
<EmptyMedia variant="icon">
|
||||||
|
<CircleArrowDown />
|
||||||
|
</EmptyMedia>
|
||||||
|
<EmptyTitle>No Completed Downloads</EmptyTitle>
|
||||||
|
<EmptyDescription>
|
||||||
|
You have not completed any downloads yet! Complete downloading something to see here :)
|
||||||
|
</EmptyDescription>
|
||||||
|
</EmptyHeader>
|
||||||
|
<Button
|
||||||
|
variant="link"
|
||||||
|
className="text-muted-foreground"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => navigate("/")}
|
||||||
|
>
|
||||||
|
Spin Up a New Download <ArrowUpRightIcon />
|
||||||
|
</Button>
|
||||||
|
</Empty>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
233
src/components/pages/library/incompleteDownloads.tsx
Normal file
233
src/components/pages/library/incompleteDownloads.tsx
Normal file
@@ -0,0 +1,233 @@
|
|||||||
|
import { IndeterminateProgress } from "@/components/custom/indeterminateProgress";
|
||||||
|
import { ProxyImage } from "@/components/custom/proxyImage";
|
||||||
|
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Progress } from "@/components/ui/progress";
|
||||||
|
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, Loader2, Music, Pause, Play, 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";
|
||||||
|
|
||||||
|
interface IncompleteDownloadProps {
|
||||||
|
state: DownloadState;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IncompleteDownloadsProps {
|
||||||
|
downloads: DownloadState[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export function IncompleteDownload({ state }: IncompleteDownloadProps) {
|
||||||
|
const downloadActions = useDownloadActionStatesStore(state => state.downloadActions);
|
||||||
|
const setIsResumingDownload = useDownloadActionStatesStore(state => state.setIsResumingDownload);
|
||||||
|
const setIsPausingDownload = useDownloadActionStatesStore(state => state.setIsPausingDownload);
|
||||||
|
const setIsCancelingDownload = useDownloadActionStatesStore(state => state.setIsCancelingDownload);
|
||||||
|
|
||||||
|
const debugMode = useSettingsPageStatesStore(state => state.settings.debug_mode);
|
||||||
|
|
||||||
|
const { pauseDownload, resumeDownload, cancelDownload } = useAppContext()
|
||||||
|
|
||||||
|
const itemActionStates = downloadActions[state.download_id] || {
|
||||||
|
isResuming: false,
|
||||||
|
isPausing: false,
|
||||||
|
isCanceling: false,
|
||||||
|
isDeleteFileChecked: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
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 ? (
|
||||||
|
<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>
|
||||||
|
) : (
|
||||||
|
<span className="w-full flex items-center justify-center text-xs border border-border py-1 px-2 rounded">
|
||||||
|
{state.download_status === 'starting' ? (
|
||||||
|
<><Loader2 className="h-4 w-4 mr-2 stroke-primary animate-spin" /> Processing...</>
|
||||||
|
) : (
|
||||||
|
<><File className="w-4 h-4 mr-2 stroke-primary" /> Unknown</>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="w-full flex flex-col justify-between">
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
<h4>{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.progress && state.status !== 'finished' && (
|
||||||
|
<div className="w-full flex items-center gap-2">
|
||||||
|
<span className="text-sm text-nowrap">{state.progress}%</span>
|
||||||
|
<Progress value={state.progress} />
|
||||||
|
<span className="text-sm text-nowrap">{
|
||||||
|
state.downloaded && state.total
|
||||||
|
? `(${formatFileSize(state.downloaded)} / ${formatFileSize(state.total)})`
|
||||||
|
: null
|
||||||
|
}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="text-xs text-muted-foreground">
|
||||||
|
{state.download_status && state.download_status === 'downloading' && state.status === 'finished' ? 'Processing' : state.download_status.charAt(0).toUpperCase() + state.download_status.slice(1)} {debugMode && state.download_id ? <><span className="text-primary">•</span> ID: {state.download_id.toUpperCase()}</> : ""} {state.download_status === 'downloading' && state.status !== 'finished' && state.speed ? <><span className="text-primary">•</span> Speed: {formatSpeed(state.speed)}</> : ""} {state.download_status === 'downloading' && state.eta ? <><span className="text-primary">•</span> ETA: {formatSecToTimeString(state.eta)}</> : ""}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-full flex items-center gap-2 mt-2">
|
||||||
|
{state.download_status === 'paused' ? (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className="w-fill"
|
||||||
|
onClick={async () => {
|
||||||
|
setIsResumingDownload(state.download_id, true);
|
||||||
|
try {
|
||||||
|
await resumeDownload(state)
|
||||||
|
// toast.success("Resumed Download", {
|
||||||
|
// description: "Download resumed, it will re-start shortly.",
|
||||||
|
// })
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
toast.error("Failed to Resume Download", {
|
||||||
|
description: "An error occurred while trying to resume the download.",
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
setIsResumingDownload(state.download_id, false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={itemActionStates.isResuming || itemActionStates.isCanceling}
|
||||||
|
>
|
||||||
|
{itemActionStates.isResuming ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
Resuming
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Play className="w-4 h-4" />
|
||||||
|
Resume
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
className="w-fill"
|
||||||
|
onClick={async () => {
|
||||||
|
setIsPausingDownload(state.download_id, true);
|
||||||
|
try {
|
||||||
|
await pauseDownload(state)
|
||||||
|
// toast.success("Paused Download", {
|
||||||
|
// description: "Download paused successfully.",
|
||||||
|
// })
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
toast.error("Failed to Pause Download", {
|
||||||
|
description: "An error occurred while trying to pause the download."
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
setIsPausingDownload(state.download_id, false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={itemActionStates.isPausing || itemActionStates.isCanceling || state.download_status !== 'downloading' || (state.download_status === 'downloading' && state.status === 'finished')}
|
||||||
|
>
|
||||||
|
{itemActionStates.isPausing ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
Pausing
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<Pause className="w-4 h-4" />
|
||||||
|
Pause
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="destructive"
|
||||||
|
onClick={async () => {
|
||||||
|
setIsCancelingDownload(state.download_id, true);
|
||||||
|
try {
|
||||||
|
await cancelDownload(state)
|
||||||
|
toast.success("Canceled Download", {
|
||||||
|
description: "Download canceled successfully.",
|
||||||
|
})
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
toast.error("Failed to Cancel Download", {
|
||||||
|
description: "An error occurred while trying to cancel the download.",
|
||||||
|
})
|
||||||
|
} finally {
|
||||||
|
setIsCancelingDownload(state.download_id, false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={itemActionStates.isCanceling || itemActionStates.isResuming || itemActionStates.isPausing || state.download_status === 'starting' || (state.download_status === 'downloading' && state.status === 'finished')}
|
||||||
|
>
|
||||||
|
{itemActionStates.isCanceling ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
Canceling
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<X className="w-4 h-4" />
|
||||||
|
Cancel
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function IncompleteDownloads({ downloads }: IncompleteDownloadsProps) {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full flex flex-col gap-2">
|
||||||
|
{downloads.length > 0 ? (
|
||||||
|
downloads.map((state) => {
|
||||||
|
return (
|
||||||
|
<IncompleteDownload key={state.download_id} state={state} />
|
||||||
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<Empty className="mt-10">
|
||||||
|
<EmptyHeader>
|
||||||
|
<EmptyMedia variant="icon">
|
||||||
|
<CircleCheck />
|
||||||
|
</EmptyMedia>
|
||||||
|
<EmptyTitle>No Incomplete Downloads</EmptyTitle>
|
||||||
|
<EmptyDescription>
|
||||||
|
You have all caught up! Sit back and relax or just spin up a new download to see here :)
|
||||||
|
</EmptyDescription>
|
||||||
|
</EmptyHeader>
|
||||||
|
<Button
|
||||||
|
variant="link"
|
||||||
|
className="text-muted-foreground"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => navigate("/")}
|
||||||
|
>
|
||||||
|
Spin Up a New Download <ArrowUpRightIcon />
|
||||||
|
</Button>
|
||||||
|
</Empty>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
1456
src/components/pages/settings/applicationSettings.tsx
Normal file
1456
src/components/pages/settings/applicationSettings.tsx
Normal file
File diff suppressed because it is too large
Load Diff
295
src/components/pages/settings/extensionSettings.tsx
Normal file
295
src/components/pages/settings/extensionSettings.tsx
Normal file
@@ -0,0 +1,295 @@
|
|||||||
|
import { useEffect } from "react";
|
||||||
|
import { Card } from "@/components/ui/card";
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
|
import { useSettingsPageStatesStore } from "@/services/store";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
import { ArrowDownToLine, ArrowRight, EthernetPort, Loader2, Radio, RotateCw } from "lucide-react";
|
||||||
|
import { useSettings } from "@/helpers/use-settings";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod"
|
||||||
|
import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
|
||||||
|
import { invoke } from "@tauri-apps/api/core";
|
||||||
|
import { SlidingButton } from "@/components/custom/slidingButton";
|
||||||
|
|
||||||
|
const websocketPortSchema = z.object({
|
||||||
|
port: z.coerce.number<number>({
|
||||||
|
error: (issue) => issue.input === undefined || issue.input === null || issue.input === ""
|
||||||
|
? "Websocket Port is required"
|
||||||
|
: "Websocket Port must be a valid number"
|
||||||
|
}).int({
|
||||||
|
message: "Websocket Port must be an integer"
|
||||||
|
}).min(50000, {
|
||||||
|
message: "Websocket Port must be at least 50000"
|
||||||
|
}).max(60000, {
|
||||||
|
message: "Websocket Port must be at most 60000"
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
function ExtInstallSettings() {
|
||||||
|
const openLink = async (url: string, app: string | null) => {
|
||||||
|
try {
|
||||||
|
await invoke('open_file_with_app', { filePath: url, appName: app }).then(() => {
|
||||||
|
toast.info("Opening link", {
|
||||||
|
description: `Opening link with ${app ? app : 'default app'}.`,
|
||||||
|
})
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
toast.error("Failed to open link", {
|
||||||
|
description: "An error occurred while trying to open the link.",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="install-neodlp-extension">
|
||||||
|
<h3 className="font-semibold">NeoDLP Extension</h3>
|
||||||
|
<p className="text-xs text-muted-foreground mb-4">Integrate NeoDLP with your favourite browser</p>
|
||||||
|
<div className="flex items-center gap-4 mb-4">
|
||||||
|
<SlidingButton
|
||||||
|
slidingContent={
|
||||||
|
<div className="flex items-center justify-center gap-2 text-primary-foreground">
|
||||||
|
<ArrowRight className="size-4" />
|
||||||
|
<span>Get Now</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
onClick={() => openLink('https://chromewebstore.google.com/detail/neo-downloader-plus/mehopeailfjmiloiiohgicphlcgpompf', 'chrome')}
|
||||||
|
>
|
||||||
|
<span className="font-semibold flex items-center gap-2">
|
||||||
|
<svg className="size-4 fill-primary-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<path d="M0 256C0 209.4 12.5 165.6 34.3 127.1L144.1 318.3C166 357.5 207.9 384 256 384C270.3 384 283.1 381.7 296.8 377.4L220.5 509.6C95.9 492.3 0 385.3 0 256zM365.1 321.6C377.4 302.4 384 279.1 384 256C384 217.8 367.2 183.5 340.7 160H493.4C505.4 189.6 512 222.1 512 256C512 397.4 397.4 511.1 256 512L365.1 321.6zM477.8 128H256C193.1 128 142.3 172.1 130.5 230.7L54.2 98.5C101 38.5 174 0 256 0C350.8 0 433.5 51.5 477.8 128V128zM168 256C168 207.4 207.4 168 256 168C304.6 168 344 207.4 344 256C344 304.6 304.6 344 256 344C207.4 344 168 304.6 168 256z"/>
|
||||||
|
</svg>
|
||||||
|
Get Chrome Extension
|
||||||
|
</span>
|
||||||
|
<span className="text-xs">from Chrome Web Store</span>
|
||||||
|
</SlidingButton>
|
||||||
|
<SlidingButton
|
||||||
|
slidingContent={
|
||||||
|
<div className="flex items-center justify-center gap-2 text-primary-foreground">
|
||||||
|
<ArrowRight className="size-4" />
|
||||||
|
<span>Get Now</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
onClick={() => openLink('https://addons.mozilla.org/en-US/firefox/addon/neo-downloader-plus', 'firefox')}
|
||||||
|
>
|
||||||
|
<span className="font-semibold flex items-center gap-2">
|
||||||
|
<svg className="size-4 fill-primary-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||||
|
<path d="M130.2 127.5C130.4 127.6 130.3 127.6 130.2 127.5V127.5zM481.6 172.9C471 147.4 449.6 119.9 432.7 111.2C446.4 138.1 454.4 165 457.4 185.2C457.4 185.3 457.4 185.4 457.5 185.6C429.9 116.8 383.1 89.1 344.9 28.7C329.9 5.1 334 3.5 331.8 4.1L331.7 4.2C285 30.1 256.4 82.5 249.1 126.9C232.5 127.8 216.2 131.9 201.2 139C199.8 139.6 198.7 140.7 198.1 142C197.4 143.4 197.2 144.9 197.5 146.3C197.7 147.2 198.1 148 198.6 148.6C199.1 149.3 199.8 149.9 200.5 150.3C201.3 150.7 202.1 151 203 151.1C203.8 151.1 204.7 151 205.5 150.8L206 150.6C221.5 143.3 238.4 139.4 255.5 139.2C318.4 138.7 352.7 183.3 363.2 201.5C350.2 192.4 326.8 183.3 304.3 187.2C392.1 231.1 368.5 381.8 247 376.4C187.5 373.8 149.9 325.5 146.4 285.6C146.4 285.6 157.7 243.7 227 243.7C234.5 243.7 256 222.8 256.4 216.7C256.3 214.7 213.8 197.8 197.3 181.5C188.4 172.8 184.2 168.6 180.5 165.5C178.5 163.8 176.4 162.2 174.2 160.7C168.6 141.2 168.4 120.6 173.5 101.1C148.5 112.5 129 130.5 114.8 146.4H114.7C105 134.2 105.7 93.8 106.3 85.3C106.1 84.8 99 89 98.1 89.7C89.5 95.7 81.6 102.6 74.3 110.1C58 126.7 30.1 160.2 18.8 211.3C14.2 231.7 12 255.7 12 263.6C12 398.3 121.2 507.5 255.9 507.5C376.6 507.5 478.9 420.3 496.4 304.9C507.9 228.2 481.6 173.8 481.6 172.9z"/>
|
||||||
|
</svg>
|
||||||
|
Get Firefox Extension
|
||||||
|
</span>
|
||||||
|
<span className="text-xs">from Mozilla Addons Store</span>
|
||||||
|
</SlidingButton>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2 mb-4">
|
||||||
|
<Button variant="outline" onClick={() => openLink('https://chromewebstore.google.com/detail/neo-downloader-plus/mehopeailfjmiloiiohgicphlcgpompf', 'msedge')}>Edge</Button>
|
||||||
|
<Button variant="outline" onClick={() => openLink('https://chromewebstore.google.com/detail/neo-downloader-plus/mehopeailfjmiloiiohgicphlcgpompf', 'opera')}>Opera</Button>
|
||||||
|
<Button variant="outline" onClick={() => openLink('https://chromewebstore.google.com/detail/neo-downloader-plus/mehopeailfjmiloiiohgicphlcgpompf', 'brave')}>Brave</Button>
|
||||||
|
<Button variant="outline" onClick={() => openLink('https://chromewebstore.google.com/detail/neo-downloader-plus/mehopeailfjmiloiiohgicphlcgpompf', 'vivaldi')}>Vivaldi</Button>
|
||||||
|
<Button variant="outline" onClick={() => openLink('https://addons.mozilla.org/en-US/firefox/addon/neo-downloader-plus', 'zen')}>Zen</Button>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-muted-foreground mb-2">* These links opens with coresponding browsers only. Make sure the browser is installed before clicking the link</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ExtPortSettings() {
|
||||||
|
const formResetTrigger = useSettingsPageStatesStore(state => state.formResetTrigger);
|
||||||
|
const acknowledgeFormReset = useSettingsPageStatesStore(state => state.acknowledgeFormReset);
|
||||||
|
|
||||||
|
const websocketPort = useSettingsPageStatesStore(state => state.settings.websocket_port);
|
||||||
|
const isChangingWebSocketPort = useSettingsPageStatesStore(state => state.isChangingWebSocketPort);
|
||||||
|
const setIsChangingWebSocketPort = useSettingsPageStatesStore(state => state.setIsChangingWebSocketPort);
|
||||||
|
const isRestartingWebSocketServer = useSettingsPageStatesStore(state => state.isRestartingWebSocketServer);
|
||||||
|
|
||||||
|
const { saveSettingsKey } = useSettings();
|
||||||
|
|
||||||
|
interface Config {
|
||||||
|
port: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const websocketPortForm = useForm<z.infer<typeof websocketPortSchema>>({
|
||||||
|
resolver: zodResolver(websocketPortSchema),
|
||||||
|
defaultValues: {
|
||||||
|
port: websocketPort,
|
||||||
|
},
|
||||||
|
mode: "onChange",
|
||||||
|
});
|
||||||
|
const watchedPort = websocketPortForm.watch("port");
|
||||||
|
const { errors: websocketPortFormErrors } = websocketPortForm.formState;
|
||||||
|
|
||||||
|
async function handleWebsocketPortSubmit(values: z.infer<typeof websocketPortSchema>) {
|
||||||
|
setIsChangingWebSocketPort(true);
|
||||||
|
try {
|
||||||
|
// const port = parseInt(values.port, 10);
|
||||||
|
const updatedConfig: Config = await invoke("update_config", {
|
||||||
|
newConfig: {
|
||||||
|
port: values.port,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
saveSettingsKey('websocket_port', updatedConfig.port);
|
||||||
|
toast.success("Websocket port updated", {
|
||||||
|
description: `Websocket port changed to ${values.port}`,
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error changing websocket port:", error);
|
||||||
|
toast.error("Failed to change websocket port", {
|
||||||
|
description: "An error occurred while trying to change the websocket port. Please try again.",
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setIsChangingWebSocketPort(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (formResetTrigger > 0) {
|
||||||
|
websocketPortForm.reset();
|
||||||
|
acknowledgeFormReset();
|
||||||
|
}
|
||||||
|
}, [formResetTrigger]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="websocket-port">
|
||||||
|
<h3 className="font-semibold">Websocket Port</h3>
|
||||||
|
<p className="text-xs text-muted-foreground mb-3">Change extension websocket server port</p>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<Form {...websocketPortForm}>
|
||||||
|
<form onSubmit={websocketPortForm.handleSubmit(handleWebsocketPortSubmit)} className="flex gap-4 w-full" autoComplete="off">
|
||||||
|
<FormField
|
||||||
|
control={websocketPortForm.control}
|
||||||
|
name="port"
|
||||||
|
disabled={isChangingWebSocketPort}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="w-full">
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
className="focus-visible:ring-0"
|
||||||
|
placeholder="Enter port number"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<Label htmlFor="port" className="text-xs text-muted-foreground">(Current: {websocketPort}) (Default: 53511, Range: 50000-60000)</Label>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
disabled={!watchedPort || Number(watchedPort) === websocketPort || Object.keys(websocketPortFormErrors).length > 0 || isChangingWebSocketPort || isRestartingWebSocketServer}
|
||||||
|
>
|
||||||
|
{isChangingWebSocketPort ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
Changing
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
'Change'
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ExtensionSettings() {
|
||||||
|
const activeSubExtTab = useSettingsPageStatesStore(state => state.activeSubExtTab);
|
||||||
|
const setActiveSubExtTab = useSettingsPageStatesStore(state => state.setActiveSubExtTab);
|
||||||
|
|
||||||
|
const isChangingWebSocketPort = useSettingsPageStatesStore(state => state.isChangingWebSocketPort);
|
||||||
|
const isRestartingWebSocketServer = useSettingsPageStatesStore(state => state.isRestartingWebSocketServer);
|
||||||
|
const setIsRestartingWebSocketServer = useSettingsPageStatesStore(state => state.setIsRestartingWebSocketServer);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card className="p-4 space-y-4 my-4">
|
||||||
|
<div className="w-full flex gap-4 items-center justify-between">
|
||||||
|
<div className="flex gap-4 items-center">
|
||||||
|
<div className="imgwrapper w-10 h-10 flex items-center justify-center bg-linear-65 from-[#FF43D0] to-[#4444FF] customscheme:from-chart-1 customscheme:to-chart-5 rounded-md overflow-hidden border border-border">
|
||||||
|
<Radio className="size-5 text-white" />
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<h3 className="">Extension Websocket Server</h3>
|
||||||
|
<div className="text-xs flex items-center">
|
||||||
|
{isChangingWebSocketPort || isRestartingWebSocketServer ? (
|
||||||
|
<><div className="h-1.5 w-1.5 rounded-full bg-amber-600 dark:bg-amber-500 mr-1.5 mt-0.5" /><span className="text-amber-600 dark:text-amber-500">Restarting...</span></>
|
||||||
|
) : (
|
||||||
|
<><div className="h-1.5 w-1.5 rounded-full bg-emerald-600 dark:bg-emerald-500 mr-1.5 mt-0.5" /><span className="text-emerald-600 dark:text-emerald-500">Running</span></>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-4 items-center">
|
||||||
|
<Button
|
||||||
|
onClick={async () => {
|
||||||
|
setIsRestartingWebSocketServer(true);
|
||||||
|
try {
|
||||||
|
await invoke("restart_websocket_server");
|
||||||
|
toast.success("Websocket server restarted", {
|
||||||
|
description: "Websocket server restarted successfully.",
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error restarting websocket server:", error);
|
||||||
|
toast.error("Failed to restart websocket server", {
|
||||||
|
description: "An error occurred while trying to restart the websocket server. Please try again.",
|
||||||
|
});
|
||||||
|
} finally {
|
||||||
|
setIsRestartingWebSocketServer(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
disabled={isRestartingWebSocketServer || isChangingWebSocketPort}
|
||||||
|
>
|
||||||
|
{isRestartingWebSocketServer ? (
|
||||||
|
<>
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
Restarting
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<RotateCw className="h-4 w-4" />
|
||||||
|
Restart
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
<Tabs
|
||||||
|
className="w-full flex flex-row items-start gap-4 mt-7"
|
||||||
|
orientation="vertical"
|
||||||
|
value={activeSubExtTab}
|
||||||
|
onValueChange={setActiveSubExtTab}
|
||||||
|
>
|
||||||
|
<TabsList className="shrink-0 grid grid-cols-1 gap-1 p-0 bg-background min-w-45">
|
||||||
|
<TabsTrigger
|
||||||
|
key="install"
|
||||||
|
value="install"
|
||||||
|
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground justify-start px-3 py-1.5 gap-2"
|
||||||
|
>
|
||||||
|
<ArrowDownToLine className="size-4" /> Install
|
||||||
|
</TabsTrigger>
|
||||||
|
<TabsTrigger
|
||||||
|
key="port"
|
||||||
|
value="port"
|
||||||
|
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground justify-start px-3 py-1.5 gap-2"
|
||||||
|
>
|
||||||
|
<EthernetPort className="size-4" /> Port
|
||||||
|
</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
<div className="min-h-full flex flex-col w-full border-l border-border pl-4">
|
||||||
|
<TabsContent key="install" value="install" className="flex flex-col gap-4 min-h-[150px] max-w-[90%]">
|
||||||
|
<ExtInstallSettings />
|
||||||
|
</TabsContent>
|
||||||
|
<TabsContent key="port" value="port" className="flex flex-col gap-4 min-h-[150px] max-w-[70%]">
|
||||||
|
<ExtPortSettings />
|
||||||
|
</TabsContent>
|
||||||
|
</div>
|
||||||
|
</Tabs>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -26,7 +26,7 @@ import {
|
|||||||
} from "@/components/ui/tooltip"
|
} from "@/components/ui/tooltip"
|
||||||
|
|
||||||
const SIDEBAR_COOKIE_NAME = "sidebar_state"
|
const SIDEBAR_COOKIE_NAME = "sidebar_state"
|
||||||
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
|
const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 30 // 30 days
|
||||||
const SIDEBAR_WIDTH = "16rem"
|
const SIDEBAR_WIDTH = "16rem"
|
||||||
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
const SIDEBAR_WIDTH_MOBILE = "18rem"
|
||||||
const SIDEBAR_WIDTH_ICON = "3rem"
|
const SIDEBAR_WIDTH_ICON = "3rem"
|
||||||
@@ -69,9 +69,25 @@ function SidebarProvider({
|
|||||||
const isMobile = useIsMobile()
|
const isMobile = useIsMobile()
|
||||||
const [openMobile, setOpenMobile] = React.useState(false)
|
const [openMobile, setOpenMobile] = React.useState(false)
|
||||||
|
|
||||||
|
// Helper to read cookie value
|
||||||
|
const getCookieValue = (name: string): boolean | null => {
|
||||||
|
if (typeof document === "undefined") return null
|
||||||
|
const value = document.cookie
|
||||||
|
.split("; ")
|
||||||
|
.find((row) => row.startsWith(`${name}=`))
|
||||||
|
?.split("=")[1]
|
||||||
|
return value === "true" ? true : value === "false" ? false : null
|
||||||
|
}
|
||||||
|
|
||||||
|
// Read initial state from cookie, fallback to defaultOpen
|
||||||
|
const getInitialState = () => {
|
||||||
|
const cookieValue = getCookieValue(SIDEBAR_COOKIE_NAME)
|
||||||
|
return cookieValue !== null ? cookieValue : defaultOpen
|
||||||
|
}
|
||||||
|
|
||||||
// This is the internal state of the sidebar.
|
// This is the internal state of the sidebar.
|
||||||
// We use openProp and setOpenProp for control from outside the component.
|
// We use openProp and setOpenProp for control from outside the component.
|
||||||
const [_open, _setOpen] = React.useState(defaultOpen)
|
const [_open, _setOpen] = React.useState(getInitialState)
|
||||||
const open = openProp ?? _open
|
const open = openProp ?? _open
|
||||||
const setOpen = React.useCallback(
|
const setOpen = React.useCallback(
|
||||||
(value: boolean | ((value: boolean) => boolean)) => {
|
(value: boolean | ((value: boolean) => boolean)) => {
|
||||||
|
|||||||
@@ -7,7 +7,6 @@ import { Command } from "@tauri-apps/plugin-shell";
|
|||||||
import { RawVideoInfo } from "@/types/video";
|
import { RawVideoInfo } from "@/types/video";
|
||||||
import { useDeleteDownloadState, useSaveDownloadState, useSavePlaylistInfo, useSaveVideoInfo, useUpdateDownloadFilePath, useUpdateDownloadStatus } from "@/services/mutations";
|
import { useDeleteDownloadState, useSaveDownloadState, useSavePlaylistInfo, useSaveVideoInfo, useUpdateDownloadFilePath, useUpdateDownloadStatus } from "@/services/mutations";
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
import { useQueryClient } from "@tanstack/react-query";
|
||||||
import { useFetchAllDownloadStates } from "@/services/queries";
|
|
||||||
import { platform } from "@tauri-apps/plugin-os";
|
import { platform } from "@tauri-apps/plugin-os";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { useLogger } from "@/helpers/use-logger";
|
import { useLogger } from "@/helpers/use-logger";
|
||||||
@@ -17,7 +16,6 @@ import { FetchVideoMetadataParams, StartDownloadParams } from "@/providers/appCo
|
|||||||
import { debounce } from "es-toolkit";
|
import { debounce } from "es-toolkit";
|
||||||
|
|
||||||
export default function useDownloader() {
|
export default function useDownloader() {
|
||||||
const { data: downloadStates, isSuccess: isSuccessFetchingDownloadStates } = useFetchAllDownloadStates();
|
|
||||||
const globalDownloadStates = useDownloadStatesStore((state) => state.downloadStates);
|
const globalDownloadStates = useDownloadStatesStore((state) => state.downloadStates);
|
||||||
|
|
||||||
const ffmpegPath = useBasePathsStore((state) => state.ffmpegPath);
|
const ffmpegPath = useBasePathsStore((state) => state.ffmpegPath);
|
||||||
@@ -60,7 +58,6 @@ export default function useDownloader() {
|
|||||||
filename_template: FILENAME_TEMPLATE,
|
filename_template: FILENAME_TEMPLATE,
|
||||||
debug_mode: DEBUG_MODE,
|
debug_mode: DEBUG_MODE,
|
||||||
log_verbose: LOG_VERBOSE,
|
log_verbose: LOG_VERBOSE,
|
||||||
log_warning: LOG_WARNING,
|
|
||||||
log_progress: LOG_PROGRESS,
|
log_progress: LOG_PROGRESS,
|
||||||
enable_notifications: ENABLE_NOTIFICATIONS,
|
enable_notifications: ENABLE_NOTIFICATIONS,
|
||||||
download_completion_notification: DOWNLOAD_COMPLETION_NOTIFICATION
|
download_completion_notification: DOWNLOAD_COMPLETION_NOTIFICATION
|
||||||
@@ -292,12 +289,10 @@ export default function useDownloader() {
|
|||||||
args.push('--ffmpeg-location', '/Applications/NeoDLP.app/Contents/MacOS', '--js-runtimes', 'deno:/Applications/NeoDLP.app/Contents/MacOS/deno');
|
args.push('--ffmpeg-location', '/Applications/NeoDLP.app/Contents/MacOS', '--js-runtimes', 'deno:/Applications/NeoDLP.app/Contents/MacOS/deno');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!DEBUG_MODE || (DEBUG_MODE && !LOG_WARNING)) {
|
|
||||||
args.push('--no-warnings');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (DEBUG_MODE && LOG_VERBOSE) {
|
if (DEBUG_MODE && LOG_VERBOSE) {
|
||||||
args.push('--verbose');
|
args.push('--verbose');
|
||||||
|
} else {
|
||||||
|
args.push('--no-warnings');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (selectedSubtitles) {
|
if (selectedSubtitles) {
|
||||||
@@ -479,7 +474,7 @@ export default function useDownloader() {
|
|||||||
url: url,
|
url: url,
|
||||||
host: videoMetadata.webpage_url_domain,
|
host: videoMetadata.webpage_url_domain,
|
||||||
thumbnail: videoMetadata.thumbnail || null,
|
thumbnail: videoMetadata.thumbnail || null,
|
||||||
channel: videoMetadata.channel || null,
|
channel: videoMetadata.creator || videoMetadata.channel || videoMetadata.uploader || null,
|
||||||
duration_string: videoMetadata.duration_string || null,
|
duration_string: videoMetadata.duration_string || null,
|
||||||
release_date: videoMetadata.release_date || null,
|
release_date: videoMetadata.release_date || null,
|
||||||
view_count: videoMetadata.view_count || null,
|
view_count: videoMetadata.view_count || null,
|
||||||
@@ -569,7 +564,7 @@ export default function useDownloader() {
|
|||||||
url: url,
|
url: url,
|
||||||
host: videoMetadata.webpage_url_domain,
|
host: videoMetadata.webpage_url_domain,
|
||||||
thumbnail: videoMetadata.thumbnail || null,
|
thumbnail: videoMetadata.thumbnail || null,
|
||||||
channel: videoMetadata.channel || videoMetadata.uploader || null,
|
channel: videoMetadata.creator || videoMetadata.channel || videoMetadata.uploader || null,
|
||||||
duration_string: videoMetadata.duration_string || null,
|
duration_string: videoMetadata.duration_string || null,
|
||||||
release_date: videoMetadata.release_date || null,
|
release_date: videoMetadata.release_date || null,
|
||||||
view_count: videoMetadata.view_count || null,
|
view_count: videoMetadata.view_count || null,
|
||||||
@@ -583,7 +578,7 @@ export default function useDownloader() {
|
|||||||
playlist_title: videoMetadata.playlist_title,
|
playlist_title: videoMetadata.playlist_title,
|
||||||
playlist_url: videoMetadata.playlist_webpage_url,
|
playlist_url: videoMetadata.playlist_webpage_url,
|
||||||
playlist_n_entries: videoMetadata.playlist_count || videoMetadata.n_entries,
|
playlist_n_entries: videoMetadata.playlist_count || videoMetadata.n_entries,
|
||||||
playlist_channel: videoMetadata.playlist_channel || null
|
playlist_channel: videoMetadata.playlist_creator || videoMetadata.playlist_channel || videoMetadata.playlist_uploader || null
|
||||||
}, {
|
}, {
|
||||||
onSuccess: (data) => {
|
onSuccess: (data) => {
|
||||||
console.log("Playlist Info saved successfully:", data);
|
console.log("Playlist Info saved successfully:", data);
|
||||||
@@ -606,7 +601,7 @@ export default function useDownloader() {
|
|||||||
url: url,
|
url: url,
|
||||||
host: videoMetadata.webpage_url_domain,
|
host: videoMetadata.webpage_url_domain,
|
||||||
thumbnail: videoMetadata.thumbnail || null,
|
thumbnail: videoMetadata.thumbnail || null,
|
||||||
channel: videoMetadata.channel || null,
|
channel: videoMetadata.creator || videoMetadata.channel || videoMetadata.uploader || null,
|
||||||
duration_string: videoMetadata.duration_string || null,
|
duration_string: videoMetadata.duration_string || null,
|
||||||
release_date: videoMetadata.release_date || null,
|
release_date: videoMetadata.release_date || null,
|
||||||
view_count: videoMetadata.view_count || null,
|
view_count: videoMetadata.view_count || null,
|
||||||
@@ -682,42 +677,29 @@ export default function useDownloader() {
|
|||||||
console.log("Killing process with PID:", downloadState.process_id);
|
console.log("Killing process with PID:", downloadState.process_id);
|
||||||
await invoke('kill_all_process', { pid: downloadState.process_id });
|
await invoke('kill_all_process', { pid: downloadState.process_id });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return new Promise<void>((resolve, reject) => {
|
||||||
|
setTimeout(() => {
|
||||||
downloadStatusUpdater.mutate({ download_id: downloadState.download_id, download_status: 'paused' }, {
|
downloadStatusUpdater.mutate({ download_id: downloadState.download_id, download_status: 'paused' }, {
|
||||||
onSuccess: (data) => {
|
onSuccess: (data) => {
|
||||||
console.log("Download status updated successfully:", data);
|
console.log("Download status updated successfully:", data);
|
||||||
queryClient.invalidateQueries({ queryKey: ['download-states'] });
|
queryClient.invalidateQueries({ queryKey: ['download-states'] });
|
||||||
|
|
||||||
/* re-check if the download is properly paused (if not try again after a small delay)
|
|
||||||
as the pause opertion happens within high throughput of operations and have a high chgance of failure.
|
|
||||||
*/
|
|
||||||
if (isSuccessFetchingDownloadStates && downloadStates.find(state => state.download_id === downloadState.download_id)?.download_status !== 'paused') {
|
|
||||||
console.log("Download status not updated to paused yet, retrying...");
|
|
||||||
setTimeout(() => {
|
|
||||||
downloadStatusUpdater.mutate({ download_id: downloadState.download_id, download_status: 'paused' }, {
|
|
||||||
onSuccess: (data) => {
|
|
||||||
console.log("Download status updated successfully on retry:", data);
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['download-states'] });
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
console.error("Failed to update download status:", error);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, 200);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reset the processing flag to ensure queue can be processed
|
// Reset the processing flag to ensure queue can be processed
|
||||||
isProcessingQueueRef.current = false;
|
isProcessingQueueRef.current = false;
|
||||||
|
|
||||||
// Process the queue after a short delay to ensure state is updated
|
// Process the queue after a short delay to ensure state is updated
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
processQueuedDownloads();
|
processQueuedDownloads();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
resolve();
|
||||||
},
|
},
|
||||||
onError: (error) => {
|
onError: (error) => {
|
||||||
console.error("Failed to update download status:", error);
|
console.error("Failed to update download status:", error);
|
||||||
|
isProcessingQueueRef.current = false;
|
||||||
|
reject(error);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return Promise.resolve();
|
}, 1000);
|
||||||
|
});
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(`Failed to pause download: ${e}`);
|
console.error(`Failed to pause download: ${e}`);
|
||||||
LOG.error('NEODLP', `Failed to pause download with id: ${downloadState.download_id} with error: ${e}`);
|
LOG.error('NEODLP', `Failed to pause download with id: ${downloadState.download_id} with error: ${e}`);
|
||||||
|
|||||||
@@ -8,6 +8,7 @@ export function useSettings() {
|
|||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
const setSettingsKey = useSettingsPageStatesStore(state => state.setSettingsKey);
|
const setSettingsKey = useSettingsPageStatesStore(state => state.setSettingsKey);
|
||||||
const resetSettingsState = useSettingsPageStatesStore(state => state.resetSettings);
|
const resetSettingsState = useSettingsPageStatesStore(state => state.resetSettings);
|
||||||
|
const triggerFormReset = useSettingsPageStatesStore(state => state.triggerFormReset);
|
||||||
const settingsKeySaver = useSaveSettingsKey();
|
const settingsKeySaver = useSaveSettingsKey();
|
||||||
const settingsReseter = useResetSettings();
|
const settingsReseter = useResetSettings();
|
||||||
|
|
||||||
@@ -34,6 +35,7 @@ export function useSettings() {
|
|||||||
try {
|
try {
|
||||||
await invoke("reset_config");
|
await invoke("reset_config");
|
||||||
resetSettingsState();
|
resetSettingsState();
|
||||||
|
triggerFormReset();
|
||||||
console.log("Settings reset successfully");
|
console.log("Settings reset successfully");
|
||||||
queryClient.invalidateQueries({ queryKey: ["settings"] });
|
queryClient.invalidateQueries({ queryKey: ["settings"] });
|
||||||
toast.success("Settings reset successfully", {
|
toast.success("Settings reset successfully", {
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,47 +1,23 @@
|
|||||||
import { IndeterminateProgress } from "@/components/custom/indeterminateProgress";
|
|
||||||
import { ProxyImage } from "@/components/custom/proxyImage";
|
|
||||||
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Progress } from "@/components/ui/progress";
|
|
||||||
import { Separator } from "@/components/ui/separator";
|
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { useAppContext } from "@/providers/appContextProvider";
|
import { useAppContext } from "@/providers/appContextProvider";
|
||||||
import { useCurrentVideoMetadataStore, useDownloadActionStatesStore, useDownloadStatesStore, useLibraryPageStatesStore, useSettingsPageStatesStore } from "@/services/store";
|
import { useDownloadActionStatesStore, useDownloadStatesStore, useLibraryPageStatesStore } from "@/services/store";
|
||||||
import { formatBitrate, formatCodec, formatDurationString, formatFileSize, formatSecToTimeString, formatSpeed } from "@/utils";
|
import { Square } from "lucide-react";
|
||||||
import { AudioLines, Clock, File, FileAudio2, FileQuestion, FileVideo2, FolderInput, ListVideo, Loader2, Music, Pause, Play, Search, Square, Trash2, Video, X } from "lucide-react";
|
|
||||||
import { invoke } from "@tauri-apps/api/core";
|
|
||||||
import * as fs from "@tauri-apps/plugin-fs";
|
|
||||||
import { DownloadState } from "@/types/download";
|
|
||||||
import { useQueryClient } from "@tanstack/react-query";
|
|
||||||
import { useDeleteDownloadState } from "@/services/mutations";
|
|
||||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
|
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
|
||||||
import { Checkbox } from "@/components/ui/checkbox";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import Heading from "@/components/heading";
|
import Heading from "@/components/heading";
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { CompletedDownloads } from "@/components/pages/library/completedDownloads";
|
||||||
import { useLogger } from "@/helpers/use-logger";
|
import { IncompleteDownloads } from "@/components/pages/library/incompleteDownloads";
|
||||||
|
|
||||||
export default function LibraryPage() {
|
export default function LibraryPage() {
|
||||||
const activeTab = useLibraryPageStatesStore(state => state.activeTab);
|
const activeTab = useLibraryPageStatesStore(state => state.activeTab);
|
||||||
const setActiveTab = useLibraryPageStatesStore(state => state.setActiveTab);
|
const setActiveTab = useLibraryPageStatesStore(state => state.setActiveTab);
|
||||||
|
|
||||||
const downloadStates = useDownloadStatesStore(state => state.downloadStates);
|
const downloadStates = useDownloadStatesStore(state => state.downloadStates);
|
||||||
const downloadActions = useDownloadActionStatesStore(state => state.downloadActions);
|
|
||||||
const setIsResumingDownload = useDownloadActionStatesStore(state => state.setIsResumingDownload);
|
|
||||||
const setIsPausingDownload = useDownloadActionStatesStore(state => state.setIsPausingDownload);
|
const setIsPausingDownload = useDownloadActionStatesStore(state => state.setIsPausingDownload);
|
||||||
const setIsCancelingDownload = useDownloadActionStatesStore(state => state.setIsCancelingDownload);
|
|
||||||
const setIsDeleteFileChecked = useDownloadActionStatesStore(state => state.setIsDeleteFileChecked);
|
|
||||||
|
|
||||||
const debugMode = useSettingsPageStatesStore(state => state.settings.debug_mode);
|
const { pauseDownload } = useAppContext();
|
||||||
|
|
||||||
const { pauseDownload, resumeDownload, cancelDownload } = useAppContext()
|
|
||||||
|
|
||||||
const queryClient = useQueryClient();
|
|
||||||
const downloadStateDeleter = useDeleteDownloadState();
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const LOG = useLogger();
|
|
||||||
|
|
||||||
const incompleteDownloads = downloadStates.filter(state => state.download_status !== 'completed');
|
const incompleteDownloads = downloadStates.filter(state => state.download_status !== 'completed');
|
||||||
const completedDownloads = downloadStates.filter(state => state.download_status === 'completed')
|
const completedDownloads = downloadStates.filter(state => state.download_status === 'completed')
|
||||||
@@ -55,57 +31,6 @@ export default function LibraryPage() {
|
|||||||
['starting', 'downloading', 'queued'].includes(state.download_status)
|
['starting', 'downloading', 'queued'].includes(state.download_status)
|
||||||
);
|
);
|
||||||
|
|
||||||
const openFile = async (filePath: string | null, app: string | null) => {
|
|
||||||
if (filePath && await fs.exists(filePath)) {
|
|
||||||
try {
|
|
||||||
await invoke('open_file_with_app', { filePath: filePath, appName: app }).then(() => {
|
|
||||||
toast.info(`${app === 'explorer' ? 'Revealing' : 'Opening'} file`, {
|
|
||||||
description: `${app === 'explorer' ? 'Revealing' : 'Opening'} the file ${app === 'explorer' ? 'in' : 'with'} ${app ? app : 'default app'}.`,
|
|
||||||
})
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
toast.error(`Failed to ${app === 'explorer' ? 'reveal' : 'open'} file`, {
|
|
||||||
description: `An error occurred while trying to ${app === 'explorer' ? 'reveal' : 'open'} the file.`,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
toast.info("File unavailable", {
|
|
||||||
description: `The file you are trying to ${app === 'explorer' ? 'reveal' : 'open'} does not exist.`,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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}`);
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
downloadStateDeleter.mutate(downloadState.download_id, {
|
|
||||||
onSuccess: (data) => {
|
|
||||||
console.log("Download State deleted successfully:", data);
|
|
||||||
queryClient.invalidateQueries({ queryKey: ['download-states'] });
|
|
||||||
toast.success("Removed from downloads", {
|
|
||||||
description: "The download has been removed successfully.",
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onError: (error) => {
|
|
||||||
console.error("Failed to delete download state:", error);
|
|
||||||
toast.error("Failed to remove download", {
|
|
||||||
description: "An error occurred while trying to remove the download.",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const stopOngoingDownloads = async () => {
|
const stopOngoingDownloads = async () => {
|
||||||
if (ongoingDownloads.length > 0) {
|
if (ongoingDownloads.length > 0) {
|
||||||
for (const state of ongoingDownloads) {
|
for (const state of ongoingDownloads) {
|
||||||
@@ -133,24 +58,6 @@ export default function LibraryPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleSearch = async (url: string, isPlaylist: boolean) => {
|
|
||||||
try {
|
|
||||||
LOG.info('NEODLP', `Received search request from library for URL: ${url}`);
|
|
||||||
navigate('/');
|
|
||||||
const { setRequestedUrl, setAutoSubmitSearch } = useCurrentVideoMetadataStore.getState();
|
|
||||||
setRequestedUrl(url);
|
|
||||||
setAutoSubmitSearch(true);
|
|
||||||
toast.info(`Initiating ${isPlaylist ? 'Playlist' : 'Video'} Search`, {
|
|
||||||
description: `Initiating search for the selected ${isPlaylist ? 'playlist' : 'video'}.`,
|
|
||||||
});
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
toast.error("Failed to initiate search", {
|
|
||||||
description: "An error occurred while trying to initiate the search.",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto p-4 space-y-4">
|
<div className="container mx-auto p-4 space-y-4">
|
||||||
<Heading title="Library" description="Manage all your downloads in one place" />
|
<Heading title="Library" description="Manage all your downloads in one place" />
|
||||||
@@ -189,317 +96,10 @@ export default function LibraryPage() {
|
|||||||
</AlertDialog>
|
</AlertDialog>
|
||||||
</div>
|
</div>
|
||||||
<TabsContent value="completed">
|
<TabsContent value="completed">
|
||||||
<div className="w-full flex flex-col gap-2">
|
<CompletedDownloads downloads={completedDownloads} />
|
||||||
{completedDownloads.length > 0 ? (
|
|
||||||
completedDownloads.map((state) => {
|
|
||||||
const itemActionStates = downloadActions[state.download_id] || {
|
|
||||||
isResuming: false,
|
|
||||||
isPausing: false,
|
|
||||||
isCanceling: false,
|
|
||||||
isDeleteFileChecked: false,
|
|
||||||
};
|
|
||||||
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?.toUpperCase()} {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>
|
|
||||||
<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>
|
|
||||||
<Separator orientation="vertical" />
|
|
||||||
<span className="text-xs text-muted-foreground flex items-center px-3">
|
|
||||||
{state.filetype && (state.filetype === 'video' || state.filetype === 'video+audio') && (
|
|
||||||
<FileVideo2 className="w-4 h-4 mr-2"/>
|
|
||||||
)}
|
|
||||||
{state.filetype && state.filetype === 'audio' && (
|
|
||||||
<FileAudio2 className="w-4 h-4 mr-2" />
|
|
||||||
)}
|
|
||||||
{(!state.filetype) || (state.filetype && state.filetype !== 'video' && state.filetype !== 'audio' && state.filetype !== 'video+audio') && (
|
|
||||||
<FileQuestion className="w-4 h-4 mr-2" />
|
|
||||||
)}
|
|
||||||
{state.filesize ? formatFileSize(state.filesize) : 'unknown'}
|
|
||||||
</span>
|
|
||||||
<Separator orientation="vertical" />
|
|
||||||
<span className="text-xs text-muted-foreground flex items-center pl-3"><AudioLines className="w-4 h-4 mr-2"/>
|
|
||||||
{state.vbr && state.abr ? (
|
|
||||||
formatBitrate(state.vbr + state.abr)
|
|
||||||
) : state.vbr ? (
|
|
||||||
formatBitrate(state.vbr)
|
|
||||||
) : state.abr ? (
|
|
||||||
formatBitrate(state.abr)
|
|
||||||
) : (
|
|
||||||
'unknown'
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="hidden xl:flex items-center mt-1 gap-2 flex-wrap text-xs">
|
|
||||||
{state.playlist_id && state.playlist_index && (
|
|
||||||
<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})
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{state.vcodec && (
|
|
||||||
<span className="border border-border py-1 px-2 rounded">{formatCodec(state.vcodec)}</span>
|
|
||||||
)}
|
|
||||||
{state.acodec && (
|
|
||||||
<span className="border border-border py-1 px-2 rounded">{formatCodec(state.acodec)}</span>
|
|
||||||
)}
|
|
||||||
{state.dynamic_range && state.dynamic_range !== 'SDR' && (
|
|
||||||
<span className="border border-border py-1 px-2 rounded">{state.dynamic_range}</span>
|
|
||||||
)}
|
|
||||||
{state.subtitle_id && (
|
|
||||||
<span
|
|
||||||
className="border border-border py-1 px-2 rounded cursor-pointer"
|
|
||||||
title={`EMBEDED SUBTITLE (${state.subtitle_id})`}
|
|
||||||
>
|
|
||||||
ESUB
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full flex items-center gap-2">
|
|
||||||
<Button size="sm" onClick={() => openFile(state.filepath, null)}>
|
|
||||||
<Play className="w-4 h-4" />
|
|
||||||
Open
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" variant="outline" onClick={() => openFile(state.filepath, 'explorer')}>
|
|
||||||
<FolderInput className="w-4 h-4" />
|
|
||||||
Reveal
|
|
||||||
</Button>
|
|
||||||
<Button size="sm" variant="outline" onClick={() => handleSearch(state.url, state.playlist_id ? true : false)}>
|
|
||||||
<Search className="w-4 h-4" />
|
|
||||||
Search
|
|
||||||
</Button>
|
|
||||||
<AlertDialog>
|
|
||||||
<AlertDialogTrigger asChild>
|
|
||||||
<Button size="sm" variant="destructive">
|
|
||||||
<Trash2 className="w-4 h-4" />
|
|
||||||
Remove
|
|
||||||
</Button>
|
|
||||||
</AlertDialogTrigger>
|
|
||||||
<AlertDialogContent>
|
|
||||||
<AlertDialogHeader>
|
|
||||||
<AlertDialogTitle>Remove from library?</AlertDialogTitle>
|
|
||||||
<AlertDialogDescription>
|
|
||||||
Are you sure you want to remove this download from the library? You can also delete the downloaded file by cheking the box below. This action cannot be undone.
|
|
||||||
</AlertDialogDescription>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Checkbox id="delete-file" checked={itemActionStates.isDeleteFileChecked} onCheckedChange={() => {setIsDeleteFileChecked(state.download_id, !itemActionStates.isDeleteFileChecked)}} />
|
|
||||||
<Label htmlFor="delete-file">Delete the downloaded file</Label>
|
|
||||||
</div>
|
|
||||||
</AlertDialogHeader>
|
|
||||||
<AlertDialogFooter>
|
|
||||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
||||||
<AlertDialogAction onClick={
|
|
||||||
() => removeFromDownloads(state, itemActionStates.isDeleteFileChecked).then(() => {
|
|
||||||
setIsDeleteFileChecked(state.download_id, false);
|
|
||||||
})
|
|
||||||
}>Remove</AlertDialogAction>
|
|
||||||
</AlertDialogFooter>
|
|
||||||
</AlertDialogContent>
|
|
||||||
</AlertDialog>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
<div className="w-full flex flex-col items-center gap-2 justify-center mt-27">
|
|
||||||
<h4 className="text-4xl font-bold text-muted-foreground/80 dark:text-muted">Nothing!</h4>
|
|
||||||
<p className="text-lg font-semibold text-muted-foreground/50">No Completed Downloads</p>
|
|
||||||
<p className="max-w-[50%] text-center text-xs text-muted-foreground/70">You have not completed any downloads yet. Complete downloading something to see here :)</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
<TabsContent value="incomplete">
|
<TabsContent value="incomplete">
|
||||||
<div className="w-full flex flex-col gap-2">
|
<IncompleteDownloads downloads={incompleteDownloads} />
|
||||||
{incompleteDownloads.length > 0 ? (
|
|
||||||
incompleteDownloads.map((state) => {
|
|
||||||
const itemActionStates = downloadActions[state.download_id] || {
|
|
||||||
isResuming: false,
|
|
||||||
isPausing: false,
|
|
||||||
isCanceling: false,
|
|
||||||
isDeleteFileChecked: false,
|
|
||||||
};
|
|
||||||
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 && (
|
|
||||||
<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.toUpperCase()} {state.resolution ? `(${state.resolution})` : null}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="w-full flex flex-col justify-between">
|
|
||||||
<div className="flex flex-col gap-1">
|
|
||||||
<h4>{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.progress && state.status !== 'finished' && (
|
|
||||||
<div className="w-full flex items-center gap-2">
|
|
||||||
<span className="text-sm text-nowrap">{state.progress}%</span>
|
|
||||||
<Progress value={state.progress} />
|
|
||||||
<span className="text-sm text-nowrap">{
|
|
||||||
state.downloaded && state.total
|
|
||||||
? `(${formatFileSize(state.downloaded)} / ${formatFileSize(state.total)})`
|
|
||||||
: null
|
|
||||||
}</span>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className="text-xs text-muted-foreground">
|
|
||||||
{state.download_status && state.download_status === 'downloading' && state.status === 'finished' ? 'Processing' : state.download_status.charAt(0).toUpperCase() + state.download_status.slice(1)} {debugMode && state.download_id ? <><span className="text-primary">•</span> ID: {state.download_id.toUpperCase()}</> : ""} {state.download_status === 'downloading' && state.status !== 'finished' && state.speed ? <><span className="text-primary">•</span> Speed: {formatSpeed(state.speed)}</> : ""} {state.download_status === 'downloading' && state.eta ? <><span className="text-primary">•</span> ETA: {formatSecToTimeString(state.eta)}</> : ""}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="w-full flex items-center gap-2 mt-2">
|
|
||||||
{state.download_status === 'paused' ? (
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
className="w-fill"
|
|
||||||
onClick={async () => {
|
|
||||||
setIsResumingDownload(state.download_id, true);
|
|
||||||
try {
|
|
||||||
await resumeDownload(state)
|
|
||||||
// toast.success("Resumed Download", {
|
|
||||||
// description: "Download resumed, it will re-start shortly.",
|
|
||||||
// })
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
toast.error("Failed to Resume Download", {
|
|
||||||
description: "An error occurred while trying to resume the download.",
|
|
||||||
})
|
|
||||||
} finally {
|
|
||||||
setIsResumingDownload(state.download_id, false);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
disabled={itemActionStates.isResuming || itemActionStates.isCanceling}
|
|
||||||
>
|
|
||||||
{itemActionStates.isResuming ? (
|
|
||||||
<>
|
|
||||||
<Loader2 className="h-4 w-4 animate-spin" />
|
|
||||||
Resuming
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Play className="w-4 h-4" />
|
|
||||||
Resume
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
) : (
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
className="w-fill"
|
|
||||||
onClick={async () => {
|
|
||||||
setIsPausingDownload(state.download_id, true);
|
|
||||||
try {
|
|
||||||
await pauseDownload(state)
|
|
||||||
// toast.success("Paused Download", {
|
|
||||||
// description: "Download paused successfully.",
|
|
||||||
// })
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
toast.error("Failed to Pause Download", {
|
|
||||||
description: "An error occurred while trying to pause the download."
|
|
||||||
})
|
|
||||||
} finally {
|
|
||||||
setIsPausingDownload(state.download_id, false);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
disabled={itemActionStates.isPausing || itemActionStates.isCanceling || state.download_status !== 'downloading' || (state.download_status === 'downloading' && state.status === 'finished')}
|
|
||||||
>
|
|
||||||
{itemActionStates.isPausing ? (
|
|
||||||
<>
|
|
||||||
<Loader2 className="h-4 w-4 animate-spin" />
|
|
||||||
Pausing
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<Pause className="w-4 h-4" />
|
|
||||||
Pause
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="destructive"
|
|
||||||
onClick={async () => {
|
|
||||||
setIsCancelingDownload(state.download_id, true);
|
|
||||||
try {
|
|
||||||
await cancelDownload(state)
|
|
||||||
toast.success("Canceled Download", {
|
|
||||||
description: "Download canceled successfully.",
|
|
||||||
})
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e);
|
|
||||||
toast.error("Failed to Cancel Download", {
|
|
||||||
description: "An error occurred while trying to cancel the download.",
|
|
||||||
})
|
|
||||||
} finally {
|
|
||||||
setIsCancelingDownload(state.download_id, false);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
disabled={itemActionStates.isCanceling || itemActionStates.isResuming || itemActionStates.isPausing || state.download_status === 'starting' || (state.download_status === 'downloading' && state.status === 'finished')}
|
|
||||||
>
|
|
||||||
{itemActionStates.isCanceling ? (
|
|
||||||
<>
|
|
||||||
<Loader2 className="h-4 w-4 animate-spin" />
|
|
||||||
Canceling
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<X className="w-4 h-4" />
|
|
||||||
Cancel
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
) : (
|
|
||||||
<div className="w-full flex flex-col items-center gap-2 justify-center mt-27">
|
|
||||||
<h4 className="text-4xl font-bold text-muted-foreground/80 dark:text-muted">Nothing!</h4>
|
|
||||||
<p className="text-lg font-semibold text-muted-foreground/50">No Incomplete Downloads</p>
|
|
||||||
<p className="max-w-[50%] text-center text-xs text-muted-foreground/70">You have all caught up! Sit back and relax or just spin up a new download to see here :)</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -64,6 +64,8 @@ export const useDownloaderPageStatesStore = create<DownloaderPageStatesStore>((s
|
|||||||
isErrored: false,
|
isErrored: false,
|
||||||
isErrorExpected: false,
|
isErrorExpected: false,
|
||||||
erroredDownloadId: null,
|
erroredDownloadId: null,
|
||||||
|
videoPanelSizes: [35, 65],
|
||||||
|
playlistPanelSizes: [45, 55],
|
||||||
setActiveDownloadModeTab: (tab) => set(() => ({ activeDownloadModeTab: tab })),
|
setActiveDownloadModeTab: (tab) => set(() => ({ activeDownloadModeTab: tab })),
|
||||||
setActiveDownloadConfigurationTab: (tab) => set(() => ({ activeDownloadConfigurationTab: tab })),
|
setActiveDownloadConfigurationTab: (tab) => set(() => ({ activeDownloadConfigurationTab: tab })),
|
||||||
setIsStartingDownload: (isStarting) => set(() => ({ isStartingDownload: isStarting })),
|
setIsStartingDownload: (isStarting) => set(() => ({ isStartingDownload: isStarting })),
|
||||||
@@ -91,6 +93,8 @@ export const useDownloaderPageStatesStore = create<DownloaderPageStatesStore>((s
|
|||||||
setIsErrored: (isErrored) => set(() => ({ isErrored: isErrored })),
|
setIsErrored: (isErrored) => set(() => ({ isErrored: isErrored })),
|
||||||
setIsErrorExpected: (isErrorExpected) => set(() => ({ isErrorExpected: isErrorExpected })),
|
setIsErrorExpected: (isErrorExpected) => set(() => ({ isErrorExpected: isErrorExpected })),
|
||||||
setErroredDownloadId: (downloadId) => set(() => ({ erroredDownloadId: downloadId })),
|
setErroredDownloadId: (downloadId) => set(() => ({ erroredDownloadId: downloadId })),
|
||||||
|
setVideoPanelSizes: (sizes) => set(() => ({ videoPanelSizes: sizes })),
|
||||||
|
setPlaylistPanelSizes: (sizes) => set(() => ({ playlistPanelSizes: sizes }))
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useLibraryPageStatesStore = create<LibraryPageStatesStore>((set) => ({
|
export const useLibraryPageStatesStore = create<LibraryPageStatesStore>((set) => ({
|
||||||
@@ -165,9 +169,9 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
|
|||||||
audio_format: 'auto',
|
audio_format: 'auto',
|
||||||
always_reencode_video: false,
|
always_reencode_video: false,
|
||||||
embed_video_metadata: false,
|
embed_video_metadata: false,
|
||||||
embed_audio_metadata: true,
|
embed_audio_metadata: false,
|
||||||
embed_video_thumbnail: false,
|
embed_video_thumbnail: false,
|
||||||
embed_audio_thumbnail: true,
|
embed_audio_thumbnail: false,
|
||||||
use_cookies: false,
|
use_cookies: false,
|
||||||
import_cookies_from: 'browser',
|
import_cookies_from: 'browser',
|
||||||
cookies_browser: 'firefox',
|
cookies_browser: 'firefox',
|
||||||
@@ -186,7 +190,6 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
|
|||||||
filename_template: '%(title)s_%(resolution|unknown)s',
|
filename_template: '%(title)s_%(resolution|unknown)s',
|
||||||
debug_mode: false,
|
debug_mode: false,
|
||||||
log_verbose: true,
|
log_verbose: true,
|
||||||
log_warning: true,
|
|
||||||
log_progress: false,
|
log_progress: false,
|
||||||
enable_notifications: false,
|
enable_notifications: false,
|
||||||
update_notification: true,
|
update_notification: true,
|
||||||
@@ -201,6 +204,8 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
|
|||||||
appUpdate: null,
|
appUpdate: null,
|
||||||
isUpdatingApp: false,
|
isUpdatingApp: false,
|
||||||
appUpdateDownloadProgress: 0,
|
appUpdateDownloadProgress: 0,
|
||||||
|
formResetTrigger: 0,
|
||||||
|
resetAcknowledgements: 0,
|
||||||
setActiveTab: (tab) => set(() => ({ activeTab: tab })),
|
setActiveTab: (tab) => set(() => ({ activeTab: tab })),
|
||||||
setActiveSubAppTab: (tab) => set(() => ({ activeSubAppTab: tab })),
|
setActiveSubAppTab: (tab) => set(() => ({ activeSubAppTab: tab })),
|
||||||
setActiveSubExtTab: (tab) => set(() => ({ activeSubExtTab: tab })),
|
setActiveSubExtTab: (tab) => set(() => ({ activeSubExtTab: tab })),
|
||||||
@@ -235,9 +240,9 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
|
|||||||
audio_format: 'auto',
|
audio_format: 'auto',
|
||||||
always_reencode_video: false,
|
always_reencode_video: false,
|
||||||
embed_video_metadata: false,
|
embed_video_metadata: false,
|
||||||
embed_audio_metadata: true,
|
embed_audio_metadata: false,
|
||||||
embed_video_thumbnail: false,
|
embed_video_thumbnail: false,
|
||||||
embed_audio_thumbnail: true,
|
embed_audio_thumbnail: false,
|
||||||
use_cookies: false,
|
use_cookies: false,
|
||||||
import_cookies_from: 'browser',
|
import_cookies_from: 'browser',
|
||||||
cookies_browser: 'firefox',
|
cookies_browser: 'firefox',
|
||||||
@@ -256,7 +261,6 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
|
|||||||
filename_template: '%(title)s_%(resolution|unknown)s',
|
filename_template: '%(title)s_%(resolution|unknown)s',
|
||||||
debug_mode: false,
|
debug_mode: false,
|
||||||
log_verbose: true,
|
log_verbose: true,
|
||||||
log_warning: true,
|
|
||||||
log_progress: false,
|
log_progress: false,
|
||||||
enable_notifications: false,
|
enable_notifications: false,
|
||||||
update_notification: true,
|
update_notification: true,
|
||||||
@@ -272,7 +276,14 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
|
|||||||
setIsCheckingAppUpdate: (isChecking) => set(() => ({ isCheckingAppUpdate: isChecking })),
|
setIsCheckingAppUpdate: (isChecking) => set(() => ({ isCheckingAppUpdate: isChecking })),
|
||||||
setAppUpdate: (update) => set(() => ({ appUpdate: update })),
|
setAppUpdate: (update) => set(() => ({ appUpdate: update })),
|
||||||
setIsUpdatingApp: (isUpdating) => set(() => ({ isUpdatingApp: isUpdating })),
|
setIsUpdatingApp: (isUpdating) => set(() => ({ isUpdatingApp: isUpdating })),
|
||||||
setAppUpdateDownloadProgress: (progress) => set(() => ({ appUpdateDownloadProgress: progress }))
|
setAppUpdateDownloadProgress: (progress) => set(() => ({ appUpdateDownloadProgress: progress })),
|
||||||
|
triggerFormReset: () => set((state) => ({
|
||||||
|
formResetTrigger: state.formResetTrigger + 1,
|
||||||
|
resetAcknowledgements: 0
|
||||||
|
})),
|
||||||
|
acknowledgeFormReset: () => set((state) => ({
|
||||||
|
resetAcknowledgements: state.resetAcknowledgements + 1
|
||||||
|
})),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useKvPairsStatesStore = create<KvPairsStatesStore>((set) => ({
|
export const useKvPairsStatesStore = create<KvPairsStatesStore>((set) => ({
|
||||||
|
|||||||
@@ -50,7 +50,6 @@ export interface Settings {
|
|||||||
filename_template: string;
|
filename_template: string;
|
||||||
debug_mode: boolean;
|
debug_mode: boolean;
|
||||||
log_verbose: boolean;
|
log_verbose: boolean;
|
||||||
log_warning: boolean;
|
|
||||||
log_progress: boolean;
|
log_progress: boolean;
|
||||||
enable_notifications: boolean;
|
enable_notifications: boolean;
|
||||||
update_notification: boolean;
|
update_notification: boolean;
|
||||||
|
|||||||
@@ -48,6 +48,8 @@ export interface DownloaderPageStatesStore {
|
|||||||
isErrored: boolean;
|
isErrored: boolean;
|
||||||
isErrorExpected: boolean;
|
isErrorExpected: boolean;
|
||||||
erroredDownloadId: string | null;
|
erroredDownloadId: string | null;
|
||||||
|
videoPanelSizes: number[];
|
||||||
|
playlistPanelSizes: number[];
|
||||||
setActiveDownloadModeTab: (tab: string) => void;
|
setActiveDownloadModeTab: (tab: string) => void;
|
||||||
setActiveDownloadConfigurationTab: (tab: string) => void;
|
setActiveDownloadConfigurationTab: (tab: string) => void;
|
||||||
setIsStartingDownload: (isStarting: boolean) => void;
|
setIsStartingDownload: (isStarting: boolean) => void;
|
||||||
@@ -62,6 +64,8 @@ export interface DownloaderPageStatesStore {
|
|||||||
setIsErrored: (isErrored: boolean) => void;
|
setIsErrored: (isErrored: boolean) => void;
|
||||||
setIsErrorExpected: (isErrorExpected: boolean) => void;
|
setIsErrorExpected: (isErrorExpected: boolean) => void;
|
||||||
setErroredDownloadId: (downloadId: string | null) => void;
|
setErroredDownloadId: (downloadId: string | null) => void;
|
||||||
|
setVideoPanelSizes: (sizes: number[]) => void;
|
||||||
|
setPlaylistPanelSizes: (sizes: number[]) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface LibraryPageStatesStore {
|
export interface LibraryPageStatesStore {
|
||||||
@@ -101,6 +105,8 @@ export interface SettingsPageStatesStore {
|
|||||||
appUpdate: Update | null;
|
appUpdate: Update | null;
|
||||||
isUpdatingApp: boolean;
|
isUpdatingApp: boolean;
|
||||||
appUpdateDownloadProgress: number;
|
appUpdateDownloadProgress: number;
|
||||||
|
formResetTrigger: number;
|
||||||
|
resetAcknowledgements: number;
|
||||||
setActiveTab: (tab: string) => void;
|
setActiveTab: (tab: string) => void;
|
||||||
setActiveSubAppTab: (tab: string) => void;
|
setActiveSubAppTab: (tab: string) => void;
|
||||||
setActiveSubExtTab: (tab: string) => void;
|
setActiveSubExtTab: (tab: string) => void;
|
||||||
@@ -119,6 +125,8 @@ export interface SettingsPageStatesStore {
|
|||||||
setAppUpdate: (update: Update | null) => void;
|
setAppUpdate: (update: Update | null) => void;
|
||||||
setIsUpdatingApp: (isUpdating: boolean) => void;
|
setIsUpdatingApp: (isUpdating: boolean) => void;
|
||||||
setAppUpdateDownloadProgress: (progress: number) => void;
|
setAppUpdateDownloadProgress: (progress: number) => void;
|
||||||
|
triggerFormReset: () => void;
|
||||||
|
acknowledgeFormReset: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface KvPairsStatesStore {
|
export interface KvPairsStatesStore {
|
||||||
|
|||||||
@@ -7,6 +7,7 @@ export interface RawVideoInfo {
|
|||||||
thumbnail: string;
|
thumbnail: string;
|
||||||
channel: string;
|
channel: string;
|
||||||
uploader: string;
|
uploader: string;
|
||||||
|
creator: string;
|
||||||
duration_string: string;
|
duration_string: string;
|
||||||
release_date: string;
|
release_date: string;
|
||||||
upload_date: string;
|
upload_date: string;
|
||||||
@@ -39,6 +40,7 @@ export interface RawVideoInfo {
|
|||||||
playlist_title: string;
|
playlist_title: string;
|
||||||
playlist_channel: string;
|
playlist_channel: string;
|
||||||
playlist_uploader: string;
|
playlist_uploader: string;
|
||||||
|
playlist_creator: string;
|
||||||
playlist_webpage_url: string;
|
playlist_webpage_url: string;
|
||||||
entries: RawVideoInfo[];
|
entries: RawVideoInfo[];
|
||||||
n_entries: number;
|
n_entries: number;
|
||||||
|
|||||||
Reference in New Issue
Block a user