mirror of
https://github.com/neosubhamoy/neodlp.git
synced 2026-02-04 17:42:22 +05:30
feat: added color scheme options and bumped up to shadcn 3.5
This commit is contained in:
@@ -12,7 +12,7 @@ import { determineFileType, fileFormatFilter, formatBitrate, formatDurationStrin
|
||||
import { Calendar, Clock, DownloadCloud, Eye, Info, Loader2, Music, ThumbsUp, Video, File, ListVideo, PackageSearch, AlertCircleIcon, X, Settings2, Clipboard } from "lucide-react";
|
||||
import { FormatSelectionGroup, FormatSelectionGroupItem } from "@/components/custom/formatSelectionGroup";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/custom/legacyToggleGroup";
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||
import { VideoFormat } from "@/types/video";
|
||||
// import { PlaylistToggleGroup, PlaylistToggleGroupItem } from "@/components/custom/playlistToggleGroup";
|
||||
import { PlaylistSelectionGroup, PlaylistSelectionGroupItem } from "@/components/custom/playlistSelectionGroup";
|
||||
@@ -360,7 +360,7 @@ export default function DownloaderPage() {
|
||||
<div className="container mx-auto p-4 space-y-4 relative" ref={containerRef}>
|
||||
<Card className="gap-4">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center"><PackageSearch className="size-5 mr-3" />{config.appName} Search</CardTitle>
|
||||
<CardTitle className="flex items-center"><PackageSearch className="size-5 mr-3 stroke-primary" />{config.appName} Search</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Form {...searchForm}>
|
||||
@@ -370,7 +370,7 @@ export default function DownloaderPage() {
|
||||
name="url"
|
||||
disabled={isMetadataLoading}
|
||||
render={({ field }) => (
|
||||
<FormItem className="w-full">
|
||||
<FormItem className="grow">
|
||||
<FormControl>
|
||||
<Input
|
||||
className="focus-visible:ring-0"
|
||||
@@ -396,6 +396,7 @@ export default function DownloaderPage() {
|
||||
{!isMetadataLoading && !videoUrl && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={isMetadataLoading}
|
||||
onClick={async () => {
|
||||
@@ -485,7 +486,7 @@ export default function DownloaderPage() {
|
||||
<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-10"></div>
|
||||
<div className="spacer mb-12"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-full pl-4">
|
||||
@@ -525,7 +526,7 @@ export default function DownloaderPage() {
|
||||
<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-muted/70 hover:bg-muted/70"
|
||||
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}
|
||||
@@ -615,7 +616,7 @@ export default function DownloaderPage() {
|
||||
</>
|
||||
)}
|
||||
</FormatSelectionGroup>
|
||||
<div className="spacer mb-10"></div>
|
||||
<div className="spacer mb-12"></div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="combine">
|
||||
@@ -632,7 +633,7 @@ export default function DownloaderPage() {
|
||||
<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-muted/70 hover:bg-muted/70"
|
||||
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}
|
||||
@@ -696,14 +697,14 @@ export default function DownloaderPage() {
|
||||
</FormatSelectionGroup>
|
||||
{(!videoOnlyFormats || videoOnlyFormats.length === 0 || !audioOnlyFormats || audioOnlyFormats.length === 0) && (
|
||||
<Alert>
|
||||
<AlertCircleIcon />
|
||||
<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-10"></div>
|
||||
<div className="spacer mb-12"></div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
@@ -758,7 +759,7 @@ export default function DownloaderPage() {
|
||||
<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-10"></div>
|
||||
<div className="spacer mb-12"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col w-full pl-4">
|
||||
@@ -792,7 +793,7 @@ export default function DownloaderPage() {
|
||||
<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-muted/70 hover:bg-muted/70"
|
||||
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}
|
||||
@@ -878,7 +879,7 @@ export default function DownloaderPage() {
|
||||
</>
|
||||
)}
|
||||
</FormatSelectionGroup>
|
||||
<div className="spacer mb-10"></div>
|
||||
<div className="spacer mb-12"></div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="combine">
|
||||
@@ -896,7 +897,7 @@ export default function DownloaderPage() {
|
||||
<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-muted/70 hover:bg-muted/70"
|
||||
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}
|
||||
@@ -952,14 +953,14 @@ export default function DownloaderPage() {
|
||||
</FormatSelectionGroup>
|
||||
{(!videoOnlyFormats || videoOnlyFormats.length === 0 || !audioOnlyFormats || audioOnlyFormats.length === 0) && (
|
||||
<Alert>
|
||||
<AlertCircleIcon />
|
||||
<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-10"></div>
|
||||
<div className="spacer mb-12"></div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
@@ -971,13 +972,13 @@ export default function DownloaderPage() {
|
||||
<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" />
|
||||
<Video className="w-4 h-4 stroke-primary" />
|
||||
)}
|
||||
{selectedFormatFileType && selectedFormatFileType === 'audio' && (
|
||||
<Music className="w-4 h-4" />
|
||||
<Music className="w-4 h-4 stroke-primary" />
|
||||
)}
|
||||
{(!selectedFormatFileType) || (selectedFormatFileType && selectedFormatFileType !== 'video' && selectedFormatFileType !== 'audio' && selectedFormatFileType !== 'video+audio') && (
|
||||
<File className="w-4 h-4" />
|
||||
<File className="w-4 h-4 stroke-primary" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
@@ -1021,7 +1022,7 @@ export default function DownloaderPage() {
|
||||
<TabsContent value="options">
|
||||
{useCustomCommands ? (
|
||||
<Alert className="mt-2 mb-3">
|
||||
<AlertCircleIcon />
|
||||
<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.
|
||||
@@ -1033,7 +1034,7 @@ export default function DownloaderPage() {
|
||||
{(selectedFormatFileType && (selectedFormatFileType === 'video' || selectedFormatFileType === 'video+audio')) || activeDownloadModeTab === 'combine' ? (
|
||||
<RadioGroup
|
||||
orientation="horizontal"
|
||||
className="flex items-center gap-4 flex-wrap"
|
||||
className="flex items-center gap-4 flex-wrap my-2"
|
||||
value={downloadConfiguration.output_format ?? 'auto'}
|
||||
onValueChange={(value) => setDownloadConfigurationKey('output_format', value)}
|
||||
disabled={useCustomCommands}
|
||||
@@ -1058,7 +1059,7 @@ export default function DownloaderPage() {
|
||||
) : selectedFormatFileType && selectedFormatFileType === 'audio' ? (
|
||||
<RadioGroup
|
||||
orientation="horizontal"
|
||||
className="flex items-center gap-4 flex-wrap"
|
||||
className="flex items-center gap-4 flex-wrap my-2"
|
||||
value={downloadConfiguration.output_format ?? 'auto'}
|
||||
onValueChange={(value) => setDownloadConfigurationKey('output_format', value)}
|
||||
disabled={useCustomCommands}
|
||||
@@ -1083,7 +1084,7 @@ export default function DownloaderPage() {
|
||||
) : (
|
||||
<RadioGroup
|
||||
orientation="horizontal"
|
||||
className="flex items-center gap-4 flex-wrap"
|
||||
className="flex items-center gap-4 flex-wrap my-2"
|
||||
value={downloadConfiguration.output_format ?? 'auto'}
|
||||
onValueChange={(value) => setDownloadConfigurationKey('output_format', value)}
|
||||
disabled={useCustomCommands}
|
||||
@@ -1123,7 +1124,7 @@ export default function DownloaderPage() {
|
||||
<Label className="text-xs my-3">Sponsorblock Mode</Label>
|
||||
<RadioGroup
|
||||
orientation="horizontal"
|
||||
className="flex items-center gap-4 flex-wrap"
|
||||
className="flex items-center gap-4 flex-wrap my-2"
|
||||
value={downloadConfiguration.sponsorblock ?? 'auto'}
|
||||
onValueChange={(value) => setDownloadConfigurationKey('sponsorblock', value)}
|
||||
disabled={useCustomCommands}
|
||||
@@ -1167,7 +1168,7 @@ export default function DownloaderPage() {
|
||||
<TabsContent value="commands">
|
||||
{!useCustomCommands ? (
|
||||
<Alert className="mt-2 mb-3">
|
||||
<AlertCircleIcon />
|
||||
<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.
|
||||
@@ -1181,7 +1182,7 @@ export default function DownloaderPage() {
|
||||
) : (
|
||||
<RadioGroup
|
||||
orientation="vertical"
|
||||
className="flex flex-col gap-2"
|
||||
className="flex flex-col gap-2 my-2"
|
||||
disabled={!useCustomCommands}
|
||||
value={downloadConfiguration.custom_command}
|
||||
onValueChange={(value) => setDownloadConfigurationKey('custom_command', value)}
|
||||
|
||||
@@ -158,7 +158,7 @@ export default function LibraryPage() {
|
||||
<div className="w-full flex items-center justify-between mb-4">
|
||||
<TabsList>
|
||||
<TabsTrigger value="completed">Completed {completedDownloads.length > 0 && (`(${completedDownloads.length})`)}</TabsTrigger>
|
||||
<TabsTrigger value="incomplete">Incomplete {(incompleteDownloads.length > 0 && ongoingDownloads.length <= 0) && (`(${incompleteDownloads.length})`)} {ongoingDownloads.length > 0 && (<Badge className="h-4 min-w-4 rounded-full px-1 font-mono tabular-nums ml-1">{ongoingDownloads.length}</Badge>)}</TabsTrigger>
|
||||
<TabsTrigger value="incomplete">Incomplete {(incompleteDownloads.length > 0 && ongoingDownloads.length <= 0) && (`(${incompleteDownloads.length})`)} {ongoingDownloads.length > 0 && (<Badge className="h-4 min-w-4 rounded-full px-1 font-mono tabular-nums ml-1.5 mt-0.5">{ongoingDownloads.length}</Badge>)}</TabsTrigger>
|
||||
</TabsList>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
@@ -206,13 +206,13 @@ export default function LibraryPage() {
|
||||
</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" />
|
||||
<Video className="w-4 h-4 mr-2 stroke-primary" />
|
||||
)}
|
||||
{state.filetype && state.filetype === 'audio' && (
|
||||
<Music className="w-4 h-4 mr-2" />
|
||||
<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" />
|
||||
<File className="w-4 h-4 mr-2 stroke-primary" />
|
||||
)}
|
||||
{state.ext?.toUpperCase()} {state.resolution ? `(${state.resolution})` : null}
|
||||
</span>
|
||||
@@ -220,7 +220,7 @@ export default function LibraryPage() {
|
||||
<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 ? `• ${state.host}` : 'unknown'}</p>
|
||||
<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" />
|
||||
@@ -351,13 +351,13 @@ export default function LibraryPage() {
|
||||
{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" />
|
||||
<Video className="w-4 h-4 mr-2 stroke-primary" />
|
||||
)}
|
||||
{state.filetype && state.filetype === 'audio' && (
|
||||
<Music className="w-4 h-4 mr-2" />
|
||||
<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" />
|
||||
<File className="w-4 h-4 mr-2 stroke-primary" />
|
||||
)}
|
||||
{state.ext.toUpperCase()} {state.resolution ? `(${state.resolution})` : null}
|
||||
</span>
|
||||
@@ -380,9 +380,9 @@ export default function LibraryPage() {
|
||||
}</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 ? `• ID: ${state.download_id.toUpperCase()}` : ""} ${state.download_status === 'downloading' && state.status !== 'finished' && state.speed ? `• Speed: ${formatSpeed(state.speed)}` : ""} ${state.download_status === 'downloading' && state.eta ? `• ETA: ${formatSecToTimeString(state.eta)}` : ""}`
|
||||
)}</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' ? (
|
||||
|
||||
@@ -27,7 +27,7 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import * as fs from "@tauri-apps/plugin-fs";
|
||||
import { join } from "@tauri-apps/api/path";
|
||||
import { formatSpeed, generateID } from "@/utils";
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/custom/legacyToggleGroup";
|
||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
import { isPermissionGranted, requestPermission } from '@tauri-apps/plugin-notification';
|
||||
@@ -94,6 +94,7 @@ export default function SettingsPage() {
|
||||
const ytDlpUpdateChannel = useSettingsPageStatesStore(state => state.settings.ytdlp_update_channel);
|
||||
const ytDlpAutoUpdate = useSettingsPageStatesStore(state => state.settings.ytdlp_auto_update);
|
||||
const appTheme = useSettingsPageStatesStore(state => state.settings.theme);
|
||||
const appColorScheme = useSettingsPageStatesStore(state => state.settings.color_scheme);
|
||||
const maxParallelDownloads = useSettingsPageStatesStore(state => state.settings.max_parallel_downloads);
|
||||
const maxRetries = useSettingsPageStatesStore(state => state.settings.max_retries);
|
||||
const preferVideoOverPlaylist = useSettingsPageStatesStore(state => state.settings.prefer_video_over_playlist);
|
||||
@@ -160,7 +161,18 @@ export default function SettingsPage() {
|
||||
{ value: 'system', icon: Monitor, label: 'System' },
|
||||
];
|
||||
|
||||
const sponsorblockCategories = [
|
||||
const colorSchemeOptions: { value: string; label: string }[] = [
|
||||
{ value: 'default', label: 'Default' },
|
||||
{ value: 'blue', label: 'Blue' },
|
||||
{ value: 'green', label: 'Green' },
|
||||
{ value: 'orange', label: 'Orange' },
|
||||
{ value: 'red', label: 'Red' },
|
||||
{ value: 'rose', label: 'Rose' },
|
||||
{ value: 'violet', label: 'Violet' },
|
||||
{ value: 'yellow', label: 'Yellow' },
|
||||
];
|
||||
|
||||
const sponsorblockCategories: { code: string; label: string }[] = [
|
||||
{ code: 'sponsor', label: 'Sponsorship' },
|
||||
{ code: 'intro', label: 'Intro' },
|
||||
{ code: 'outro', label: 'Outro' },
|
||||
@@ -374,10 +386,10 @@ export default function SettingsPage() {
|
||||
|
||||
useEffect(() => {
|
||||
const updateTheme = async () => {
|
||||
setTheme(appTheme);
|
||||
setTheme(appTheme, appColorScheme);
|
||||
}
|
||||
updateTheme().catch(console.error);
|
||||
}, [appTheme]);
|
||||
}, [appTheme, appColorScheme]);
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-4 space-y-4 min-h-screen">
|
||||
@@ -427,7 +439,7 @@ export default function SettingsPage() {
|
||||
<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] rounded-md overflow-hidden border border-border">
|
||||
<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">
|
||||
<Terminal className="size-5 text-white" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
@@ -624,6 +636,47 @@ export default function SettingsPage() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="app-color-scheme">
|
||||
<h3 className="font-semibold">Color Scheme</h3>
|
||||
<p className="text-xs text-muted-foreground mb-3">Choose app interface color scheme</p>
|
||||
<ToggleGroup
|
||||
type="single"
|
||||
variant="outline"
|
||||
className="flex flex-col items-start gap-2 mt-1"
|
||||
value={appColorScheme}
|
||||
onValueChange={(value) => saveSettingsKey('color_scheme', value)}
|
||||
>
|
||||
<div className="flex gap-2 flex-wrap items-center">
|
||||
{colorSchemeOptions.map(({ value, label }) => (
|
||||
<ToggleGroupItem
|
||||
key={value}
|
||||
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"
|
||||
size="sm"
|
||||
value={value}
|
||||
>
|
||||
<span className="relative flex gap-1 items-center">
|
||||
{
|
||||
<span
|
||||
className={cn(
|
||||
'inline-block w-3 h-3 rounded-full border border-border',
|
||||
value === 'default' && 'bg-neutral-900 dark:bg-neutral-100',
|
||||
value === 'blue' && 'bg-blue-500',
|
||||
value === 'green' && 'bg-green-500',
|
||||
value === 'orange' && 'bg-orange-500',
|
||||
value === 'red' && 'bg-red-500',
|
||||
value === 'rose' && 'bg-rose-500',
|
||||
value === 'violet' && 'bg-violet-500',
|
||||
value === 'yellow' && 'bg-yellow-500',
|
||||
)}
|
||||
/>
|
||||
}
|
||||
{label}
|
||||
</span>
|
||||
</ToggleGroupItem>
|
||||
))}
|
||||
</div>
|
||||
</ToggleGroup>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent key="folders" value="folders" className="flex flex-col gap-4 min-h-[425px]">
|
||||
<div className="download-dir">
|
||||
@@ -1097,7 +1150,7 @@ export default function SettingsPage() {
|
||||
{sponsorblockCategories.map((category) => (
|
||||
category.code !== "poi_highlight" && (
|
||||
<ToggleGroupItem
|
||||
className="text-xs text-nowrap border-2 data-[state=on]:border-2 data-[state=on]:border-primary data-[state=on]:bg-muted/70 hover:bg-muted/70"
|
||||
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={category.code}
|
||||
size="sm"
|
||||
aria-label={category.label}
|
||||
@@ -1143,7 +1196,7 @@ export default function SettingsPage() {
|
||||
<div className="flex gap-2 flex-wrap items-center">
|
||||
{sponsorblockCategories.map((category) => (
|
||||
<ToggleGroupItem
|
||||
className="text-xs text-nowrap border-2 data-[state=on]:border-2 data-[state=on]:border-primary data-[state=on]:bg-muted/70 hover:bg-muted/70"
|
||||
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={category.code}
|
||||
size="sm"
|
||||
aria-label={category.label}
|
||||
@@ -1212,7 +1265,7 @@ export default function SettingsPage() {
|
||||
<h3 className="font-semibold">Custom Commands</h3>
|
||||
<p className="text-xs text-muted-foreground mb-3"> Run custom yt-dlp commands for your downloads</p>
|
||||
<Alert className="mb-3">
|
||||
<TriangleAlert />
|
||||
<TriangleAlert className="size-4 stroke-primary" />
|
||||
<AlertTitle className="text-sm">Most Settings will be Disabled!</AlertTitle>
|
||||
<AlertDescription className="text-xs">
|
||||
This feature is intended for advanced users only. Turning it on will disable most other settings in the app. Make sure you know what you are doing before using this feature, otherwise things could break easily.
|
||||
@@ -1240,7 +1293,7 @@ export default function SettingsPage() {
|
||||
<FormItem className="w-full">
|
||||
<FormControl>
|
||||
<Textarea
|
||||
className="focus-visible:ring-0"
|
||||
className="focus-visible:ring-0 min-h-26"
|
||||
placeholder="Enter yt-dlp command line arguments (no need to start with 'yt-dlp', already passed args: url, output paths, selected formats, selected subtitles, playlist item. also, bulk downloading is not supported)"
|
||||
{...field}
|
||||
/>
|
||||
@@ -1360,7 +1413,7 @@ export default function SettingsPage() {
|
||||
<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] rounded-md overflow-hidden border border-border">
|
||||
<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">
|
||||
@@ -1435,7 +1488,7 @@ export default function SettingsPage() {
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<SlidingButton
|
||||
slidingContent={
|
||||
<div className="flex items-center justify-center gap-2 text-white dark:text-black">
|
||||
<div className="flex items-center justify-center gap-2 text-primary-foreground">
|
||||
<ArrowRight className="size-4" />
|
||||
<span>Get Now</span>
|
||||
</div>
|
||||
@@ -1443,7 +1496,7 @@ export default function SettingsPage() {
|
||||
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-white dark:fill-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<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
|
||||
@@ -1452,7 +1505,7 @@ export default function SettingsPage() {
|
||||
</SlidingButton>
|
||||
<SlidingButton
|
||||
slidingContent={
|
||||
<div className="flex items-center justify-center gap-2 text-white dark:text-black">
|
||||
<div className="flex items-center justify-center gap-2 text-primary-foreground">
|
||||
<ArrowRight className="size-4" />
|
||||
<span>Get Now</span>
|
||||
</div>
|
||||
@@ -1460,7 +1513,7 @@ export default function SettingsPage() {
|
||||
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-white dark:fill-black" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<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
|
||||
|
||||
Reference in New Issue
Block a user