+ {renderPage()}
+
+
+ {/* Sidebar Navigation */}
+
+ {/* Custom Title Bar */}
+
+
+
+
+
+ )
+}
+
+function App() {
+ return (
+
+
+ )
+}
diff --git a/src/renderer/src/components/download/UnifiedDownloadHistory.tsx b/src/renderer/src/components/download/UnifiedDownloadHistory.tsx
new file mode 100644
index 0000000..4749550
--- /dev/null
+++ b/src/renderer/src/components/download/UnifiedDownloadHistory.tsx
@@ -0,0 +1,114 @@
+import { Button } from '@renderer/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@renderer/components/ui/card'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { History as HistoryIcon } from 'lucide-react'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useHistorySync } from '../../hooks/use-history-sync'
+import { clearCompletedAtom, downloadStatsAtom, downloadsArrayAtom } from '../../store/downloads'
+import { DownloadItem } from './DownloadItem'
+
+type StatusFilter = 'all' | 'active' | 'completed' | 'error'
+
+export function UnifiedDownloadHistory() {
+ const { t } = useTranslation()
+ const allRecords = useAtomValue(downloadsArrayAtom)
+ const downloadStats = useAtomValue(downloadStatsAtom)
+ const clearCompleted = useSetAtom(clearCompletedAtom)
+ const [statusFilter, setStatusFilter] = useState
+ {/* Thumbnail */}
+
+
+
+
+ {/* Content */}
+
+
+
+
+
+ {/* Progress */}
+ {download.progress && download.status !== 'completed' && download.status !== 'error' && (
+
+
+
+
+
+
+
+
+
+
+ + {download.title} +
+{download.title}
+
+
+ {download.type}
+
+ {(statusIcon || statusText) && (
+
+
+ {statusIcon}
+ {statusText}
+
+ )}
+
+ {timestamp ? (
+ {formatDate(timestamp)}
+ ) : null}
+
+
+
+
+
+ {download.uploader &&
+ download.channel &&
+ download.uploader !== download.channel
+ ? `${download.uploader} • ${download.channel}`
+ : download.uploader
+ ? `${download.uploader}`
+ : download.channel
+ ? `${download.channel}`
+ : ''}
+
+
+
+
+
+
+ {download.duration ? {formatDuration(download.duration)} : null}
+ {download.selectedFormat ? (
+ <>
+ {download.selectedFormat.height ? (
+
+ {download.selectedFormat.height}p
+ {download.selectedFormat.fps === 60 ? '60' : ''}
+
+ ) : null}
+ {download.selectedFormat.ext ? (
+
+ {download.selectedFormat.ext.toUpperCase()}
+
+ ) : null}
+ {download.selectedFormat.filesize || download.selectedFormat.filesize_approx ? (
+
+ {formatFileSize(
+ download.selectedFormat.filesize ||
+ download.selectedFormat.filesize_approx
+ )}
+
+ ) : null}
+
+ ) : (
+ <>
+ {download.quality ? (
+
+ {download.quality}
+
+ ) : null}
+ {download.format ? (
+
+ {download.format.toUpperCase()}
+
+ ) : null}
+ {download.codec ? (
+ {download.codec}
+ ) : null}
+
+ )}
+
+ {download.url}
+
+ {isHistory ? (
+ <>
+ {download.outputPath && (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+
+
+
+
+
+
+
+ ) : (
+ <>
+ {download.status === 'completed' && download.outputPath && (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+ {(download.status === 'downloading' ||
+ download.status === 'pending' ||
+ download.status === 'processing') && (
+
+ )}
+
+ )}
+
+ {t('history.openFile')}
+{t('history.openFolder')}
+{t('history.removeItem')}
+{t('history.openFile')}
+{t('history.openFolder')}
+
+
+
+ )}
+
+ {/* Error message */}
+ {download.status === 'error' && download.error && (
+
+
+ {download.progress.percent.toFixed(1)}%
+
+
+
+ {download.progress.downloaded && download.progress.total && (
+
+ {download.progress.downloaded} / {download.progress.total}
+
+ )}
+ {download.progress.currentSpeed && (
+ {download.progress.currentSpeed}
+ )}
+ {download.progress.eta && (
+ ETA: {download.progress.eta}
+ )}
+
+ + {download.error} +
+ )} +
+
+
+ {t('download.downloadQueue')}
+
+
+ {hasCompletedActive && (
+
+ )}
+
+
+ {filters.map((filter) => {
+ const isActive = statusFilter === filter.key
+ return (
+
+ )
+ })}
+
+
+
+ ) : (
+ {t('download.noItems')}
+
+ {filteredRecords.map((record) => (
+
+ )}
+ {children}
+
+ {fallbackIcon ||
+ )
+ }
+
+ return (
+
+ {isLoading && (
+ 
+
+ )
+}
diff --git a/src/renderer/src/components/ui/input.tsx b/src/renderer/src/components/ui/input.tsx
new file mode 100644
index 0000000..e8930d0
--- /dev/null
+++ b/src/renderer/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import { cn } from '@renderer/lib/utils'
+import * as React from 'react'
+
+const Input = React.forwardRef
+ {fallbackIcon ||
+ )}
+
+
+ )
+}
+
+const itemVariants = cva(
+ 'group/item flex items-center border border-transparent text-sm transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+ {
+ variants: {
+ variant: {
+ default: 'bg-transparent',
+ outline: 'border-border',
+ muted: 'bg-muted/40'
+ },
+ size: {
+ default: 'p-4 gap-4 ',
+ sm: 'py-3 px-4 gap-2.5'
+ },
+ rounded: {
+ default: 'rounded-none',
+ none: 'rounded-none',
+ top: 'rounded-t-md',
+ bottom: 'rounded-b-md',
+ both: 'rounded-md'
+ }
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ rounded: 'default'
+ }
+ }
+)
+
+function Item({
+ className,
+ variant = 'default',
+ size = 'default',
+ rounded = 'default',
+ asChild = false,
+ ...props
+}: React.ComponentProps<'div'> & VariantPropsa:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4', + className + )} + {...props} + /> + ) +} + +function ItemActions({ className, ...props }: React.ComponentProps<'div'>) { + return ( +
+ ) +} + +function ItemHeader({ className, ...props }: React.ComponentProps<'div'>) { + return ( + + ) +} + +function ItemFooter({ className, ...props }: React.ComponentProps<'div'>) { + return ( + + ) +} + +export { + Item, + ItemMedia, + ItemContent, + ItemActions, + ItemGroup, + ItemSeparator, + ItemTitle, + ItemDescription, + ItemHeader, + ItemFooter +} diff --git a/src/renderer/src/components/ui/label.tsx b/src/renderer/src/components/ui/label.tsx new file mode 100644 index 0000000..3ecf37a --- /dev/null +++ b/src/renderer/src/components/ui/label.tsx @@ -0,0 +1,18 @@ +import * as LabelPrimitive from '@radix-ui/react-label' +import { cn } from '@renderer/lib/utils' +import { cva, type VariantProps } from 'class-variance-authority' +import * as React from 'react' + +const labelVariants = cva( + 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70' +) + +const Label = React.forwardRef< + React.ElementRef
+
+
+
+
+
+
+
+ {showLabel && (
+
+ {item.label}
+
+ )}
+
+ )
+ }
+
+ return (
+
+ )
+}
diff --git a/src/renderer/src/components/ui/sonner.tsx b/src/renderer/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..99c44e4
--- /dev/null
+++ b/src/renderer/src/components/ui/sonner.tsx
@@ -0,0 +1,27 @@
+import { useTheme } from 'next-themes'
+import { Toaster as Sonner } from 'sonner'
+
+type ToasterProps = React.ComponentProps{item.label}
+
+ {/* Window controls */}
+
+ )
+}
diff --git a/src/renderer/src/components/ui/tooltip.tsx b/src/renderer/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..bc3ce7d
--- /dev/null
+++ b/src/renderer/src/components/ui/tooltip.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import { cn } from '@renderer/lib/utils'
+import type * as React from 'react'
+
+function TooltipProvider({
+ delayDuration = 0,
+ ...props
+}: React.ComponentProps
+
+
+
+
+
+
+
+
+ {/* Subtitles */}
+
+
+
+ onStartTimeChange(e.target.value)}
+ title={t('advancedOptions.startHint')}
+ />
+
+ -
+
+ onEndTimeChange(e.target.value)}
+ title={t('advancedOptions.endHint')}
+ />
+
+ {t('advancedOptions.startHint')}
+
+
+
+
+ {/* Download Location */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+
+ // Audio only
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/renderer/src/components/video/VideoInfoCard.tsx b/src/renderer/src/components/video/VideoInfoCard.tsx
new file mode 100644
index 0000000..ffc63a1
--- /dev/null
+++ b/src/renderer/src/components/video/VideoInfoCard.tsx
@@ -0,0 +1,231 @@
+import { Badge } from '@renderer/components/ui/badge'
+import { Button } from '@renderer/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle
+} from '@renderer/components/ui/card'
+import { ImageWithPlaceholder } from '@renderer/components/ui/image-with-placeholder'
+import { Input } from '@renderer/components/ui/input'
+import { Label } from '@renderer/components/ui/label'
+import { Separator } from '@renderer/components/ui/separator'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@renderer/components/ui/tabs'
+import { useSetAtom } from 'jotai'
+import { ArrowLeft, Clock, Download as DownloadIcon, Eye, Play } from 'lucide-react'
+import { useId, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import type { VideoInfo } from '../../../../shared/types'
+import { useCachedThumbnail } from '../../hooks/use-cached-thumbnail'
+import { ipcServices } from '../../lib/ipc'
+import { addDownloadAtom } from '../../store/downloads'
+import { clearVideoInfoAtom } from '../../store/video'
+import { AdvancedOptions } from './AdvancedOptions'
+import { AudioExtractor } from './AudioExtractor'
+import { FormatSelector } from './FormatSelector'
+
+interface VideoInfoCardProps {
+ videoInfo: VideoInfo
+}
+
+function formatDuration(seconds?: number): string {
+ if (!seconds) return 'Unknown'
+ const h = Math.floor(seconds / 3600)
+ const m = Math.floor((seconds % 3600) / 60)
+ const s = Math.floor(seconds % 60)
+ if (h > 0) return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
+ return `${m}:${s.toString().padStart(2, '0')}`
+}
+
+function formatViews(views?: number): string {
+ if (!views) return 'Unknown'
+ if (views >= 1000000) return `${(views / 1000000).toFixed(1)}M`
+ if (views >= 1000) return `${(views / 1000).toFixed(1)}K`
+ return views.toString()
+}
+
+export function VideoInfoCard({ videoInfo }: VideoInfoCardProps) {
+ const { t } = useTranslation()
+ const clearVideoInfo = useSetAtom(clearVideoInfoAtom)
+ const addDownload = useSetAtom(addDownloadAtom)
+ const titleId = useId()
+ const cachedThumbnail = useCachedThumbnail(videoInfo.thumbnail)
+
+ const [activeTab, setActiveTab] = useState<'video' | 'audio'>('video')
+ const [title, setTitle] = useState(videoInfo.title)
+ const [selectedVideoFormat, setSelectedVideoFormat] = useState('')
+ const [selectedAudioForVideo, setSelectedAudioForVideo] = useState('')
+ const [selectedAudioFormat, setSelectedAudioFormat] = useState('')
+ const [startTime, setStartTime] = useState('')
+ const [endTime, setEndTime] = useState('')
+ const [downloadSubs, setDownloadSubs] = useState(false)
+
+ const handleDownload = async (type: 'video' | 'audio' | 'extract') => {
+ const id = `download_${Date.now()}_${Math.random().toString(36).substring(7)}`
+
+ const downloadItem = {
+ id,
+ url: videoInfo.webpage_url || '',
+ title,
+ thumbnail: videoInfo.thumbnail,
+ type: type === 'extract' ? 'audio' : type,
+ status: 'pending' as const,
+ progress: { percent: 0 },
+ duration: videoInfo.duration,
+ description: videoInfo.description,
+ channel: videoInfo.extractor_key,
+ uploader: videoInfo.extractor_key,
+ createdAt: Date.now()
+ }
+
+ const options = {
+ url: videoInfo.webpage_url || '',
+ type,
+ format: type === 'video' ? selectedVideoFormat : selectedAudioFormat,
+ audioFormat: type === 'video' ? selectedAudioForVideo : undefined,
+ startTime: startTime || undefined,
+ endTime: endTime || undefined,
+ downloadSubs
+ }
+
+ addDownload(downloadItem)
+
+ try {
+ await ipcServices.download.startDownload(id, options)
+
+ // Update the download info in the main process queue
+ await ipcServices.download.updateDownloadInfo(id, {
+ title,
+ thumbnail: videoInfo.thumbnail,
+ duration: videoInfo.duration,
+ description: videoInfo.description,
+ channel: videoInfo.extractor_key,
+ uploader: videoInfo.extractor_key,
+ createdAt: Date.now()
+ })
+
+ toast.success(t('notifications.downloadStarted'))
+ clearVideoInfo()
+ } catch (error) {
+ console.error('Failed to start download:', error)
+ toast.error(t('notifications.downloadFailed'))
+ }
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ setActiveTab(v as 'video' | 'audio')}>
+
+ {t('download.video')}
+ {t('download.audio')}
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/renderer/src/data/popularSites.ts b/src/renderer/src/data/popularSites.ts
new file mode 100644
index 0000000..2a96973
--- /dev/null
+++ b/src/renderer/src/data/popularSites.ts
@@ -0,0 +1,98 @@
+export interface PopularSite {
+ id: string
+ label: string
+ description?: string
+}
+
+export const popularSites: PopularSite[] = [
+ {
+ id: 'youtube',
+ label: 'YouTube',
+ description: 'Long-form and livestream video from creators worldwide.'
+ },
+ {
+ id: 'youtubemusic',
+ label: 'YouTube Music',
+ description: 'Official music videos, albums, and live performances.'
+ },
+ {
+ id: 'tiktok',
+ label: 'TikTok',
+ description: 'Short-form mobile videos, effects, and live streams.'
+ },
+ {
+ id: 'facebook',
+ label: 'Facebook',
+ description: 'Feed, Watch, and Reels videos from public pages.'
+ },
+ {
+ id: 'instagram',
+ label: 'Instagram',
+ description: 'Feed, Stories, Reels, and Highlights content.'
+ },
+ {
+ id: 'twitter',
+ label: 'X (Twitter)',
+ description: 'Timeline posts, Spaces recordings, and broadcasts.'
+ },
+ {
+ id: 'soundcloud',
+ label: 'SoundCloud',
+ description: 'Music tracks, playlists, and DJ sets.'
+ },
+ {
+ id: 'reddit',
+ label: 'Reddit',
+ description: 'Embedded clips and hosted videos from communities.'
+ },
+ {
+ id: 'vimeo',
+ label: 'Vimeo',
+ description: 'High-quality creator and business video hosting.'
+ },
+ {
+ id: 'dailymotion',
+ label: 'Dailymotion',
+ description: 'Global news, sports, and entertainment clips.'
+ },
+ {
+ id: 'twitch',
+ label: 'Twitch',
+ description: 'Gaming, music, and IRL live streams and VODs.'
+ },
+ {
+ id: 'linkedin',
+ label: 'LinkedIn',
+ description: 'Professional talks, webinars, and learning videos.'
+ },
+ {
+ id: 'pinterest',
+ label: 'Pinterest',
+ description: 'Idea pins, how-to reels, and lifestyle inspiration videos.'
+ },
+ {
+ id: 'tumblr',
+ label: 'Tumblr',
+ description: 'Creative short-form media and fan edits.'
+ },
+ {
+ id: 'mixcloud',
+ label: 'Mixcloud',
+ description: 'DJ mixes, radio shows, and long-form audio.'
+ },
+ {
+ id: 'niconico',
+ label: 'Niconico',
+ description: 'Japanese animation, music, and live broadcast archive.'
+ },
+ {
+ id: 'kick',
+ label: 'Kick',
+ description: 'Creator live streams and replays on the Kick platform.'
+ },
+ {
+ id: 'bandcamp',
+ label: 'Bandcamp',
+ description: 'Independent artist albums and community releases.'
+ }
+]
diff --git a/src/renderer/src/env.d.ts b/src/renderer/src/env.d.ts
new file mode 100644
index 0000000..ed77210
--- /dev/null
+++ b/src/renderer/src/env.d.ts
@@ -0,0 +1,2 @@
+///
+ {/* Thumbnail */}
+
+
+
+
+ {/* Video Metadata */}
+
+
+
+ {t('download.videoInfo')}
+
+ {videoInfo.duration && (
+
+
+ )}
+ {videoInfo.view_count && (
+
+
+ )}
+ {videoInfo.uploader && {videoInfo.uploader} }
+
+
+
+
+
+ setTitle(e.target.value)}
+ className="font-medium"
+ />
+
+
+
+ )
+}
diff --git a/src/renderer/src/pages/Home.tsx b/src/renderer/src/pages/Home.tsx
new file mode 100644
index 0000000..c116a32
--- /dev/null
+++ b/src/renderer/src/pages/Home.tsx
@@ -0,0 +1,662 @@
+import { Button } from '@renderer/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle
+} from '@renderer/components/ui/card'
+import { Input } from '@renderer/components/ui/input'
+import { Label } from '@renderer/components/ui/label'
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue
+} from '@renderer/components/ui/select'
+import { Tabs, TabsContent } from '@renderer/components/ui/tabs'
+import { popularSites } from '@renderer/data/popularSites'
+import type { AppSettings, OneClickQualityPreset } from '@shared/types'
+import { useAtom, useSetAtom } from 'jotai'
+import { AlertCircle, Download, Loader2, Search } from 'lucide-react'
+import { useCallback, useEffect, useId, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { UnifiedDownloadHistory } from '../components/download/UnifiedDownloadHistory'
+import { VideoInfoCard } from '../components/video/VideoInfoCard'
+import { ipcEvents, ipcServices } from '../lib/ipc'
+import {
+ addDownloadAtom,
+ addHistoryRecordAtom,
+ removeDownloadAtom,
+ updateDownloadAtom
+} from '../store/downloads'
+import { loadSettingsAtom, settingsAtom } from '../store/settings'
+import {
+ currentVideoInfoAtom,
+ fetchVideoInfoAtom,
+ videoInfoErrorAtom,
+ videoInfoLoadingAtom
+} from '../store/video'
+
+const qualityPresetToVideoHeight: Record
+
+
+
+
+
+
+
+ {t('about.shareTitle')}
+ {t('about.shareDescription')}
+
+
+
+
+
+
+
+ {t('about.resourcesTitle')}
+ {t('about.resourcesDescription')}
+
+
+
+
+
+
+
+
+ {t('about.title')}
+{t('about.description')}
+
+
+
+ 
+
+
+
+
+ {t('about.versionLabel', { version: appVersion })}
+
+
+
+
+ {t('about.appName')}
+{t('about.tagline')}
+
+
+
+
+
+ handleSettingChange('autoUpdate', value)}
+ />
+
+
+
+ {t('about.autoUpdateTitle')}
+{t('about.autoUpdateDescription')}
+{t('about.shareSupport')}
+
+
+
+
+
+
+ {aboutResources.map((resource) => {
+ const Icon = resource.icon
+ return (
+
+
+
+ )
+ })}
+
+
+ {resource.href ? (
+
+ ) : (
+
+ )}
+
+
+
+
+ {resource.label}
+ {resource.description ? ( +{resource.description}
+ ) : null} +
+
+ {/*
+
+
+
+
+ */}
+
+ {/* Single Video Download Tab */}
+
+ {/* URL Input Card */}
+ {!videoInfo && (
+
+
+ {t('download.enterUrl')}
+
+
+
+
+
+
+ )}
+
+ {/* Video Info and Download Options */}
+ {videoInfo && !loading &&
+
+ {/* Playlist Download Tab */}
+
+
+
+ {t('playlist.enterPlaylistUrl')}
+ {t('playlist.playlistUrlDescription')}
+
+
+
+
+
+
+
+ {/* Unified Download History */}
+
+ )
+}
diff --git a/src/renderer/src/pages/Settings.tsx b/src/renderer/src/pages/Settings.tsx
new file mode 100644
index 0000000..52a6b68
--- /dev/null
+++ b/src/renderer/src/pages/Settings.tsx
@@ -0,0 +1,341 @@
+import { Button } from '@renderer/components/ui/button'
+import { Input } from '@renderer/components/ui/input'
+import {
+ Item,
+ ItemActions,
+ ItemContent,
+ ItemDescription,
+ ItemGroup,
+ ItemSeparator,
+ ItemTitle
+} from '@renderer/components/ui/item'
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue
+} from '@renderer/components/ui/select'
+import { Switch } from '@renderer/components/ui/switch'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@renderer/components/ui/tabs'
+import type { OneClickQualityPreset } from '@shared/types'
+import { useAtom, useSetAtom } from 'jotai'
+import { useTheme } from 'next-themes'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import { loadSettingsAtom, saveSettingAtom, settingsAtom } from '../store/settings'
+
+export function Settings() {
+ const { t } = useTranslation()
+ const { theme, setTheme } = useTheme()
+ const [settings, _setSettings] = useAtom(settingsAtom)
+ const loadSettings = useSetAtom(loadSettingsAtom)
+ const saveSetting = useSetAtom(saveSettingAtom)
+
+ useEffect(() => {
+ loadSettings()
+ }, [loadSettings])
+
+ const handleSettingChange = async (
+ key: keyof typeof settings,
+ value: (typeof settings)[keyof typeof settings]
+ ) => {
+ await saveSetting({ key, value })
+ toast.success(t('notifications.settingsSaved'))
+ }
+
+ const handleSelectPath = async () => {
+ try {
+ const { ipcServices } = await import('../lib/ipc')
+ const path = await ipcServices.fs.selectDirectory()
+ if (path) {
+ await handleSettingChange('downloadPath', path)
+ }
+ } catch (error) {
+ console.error('Failed to select directory:', error)
+ toast.error('Failed to select directory')
+ }
+ }
+
+ const handleSelectConfigFile = async () => {
+ try {
+ const { ipcServices } = await import('../lib/ipc')
+ const path = await ipcServices.fs.selectFile()
+ if (path) {
+ await handleSettingChange('configPath', path)
+ }
+ } catch (error) {
+ console.error('Failed to select file:', error)
+ toast.error('Failed to select file')
+ }
+ }
+
+ const handleThemeChange = async (value: 'light' | 'dark' | 'system') => {
+ const currentTheme = (theme ?? settings.theme ?? 'system') as 'light' | 'dark' | 'system'
+ if (currentTheme === value) {
+ return
+ }
+
+ setTheme(value)
+ await handleSettingChange('theme', value)
+ }
+
+ return (
+
+ {t('sites.homeInlineDescription', { sites: inlinePreviewSites })}
+
+
+
+
+
+ {/* One-Click Download Info */}
+ {settings.oneClickDownload && (
+
+ setUrl(e.target.value)}
+ onKeyDown={handleKeyDown}
+ className="pr-10"
+ disabled={loading}
+ />
+ {loading && (
+
+
+ {settings.oneClickDownload ? (
+
+ ) : (
+
+ )}
+
+
+ )}
+
+
+ )}
+
+ {/* Error Display */}
+ {error && (
+
+
+
+
+ + {t('download.oneClickDownload')} +
++ {t('download.oneClickDownloadDescription')} +
+
+
+ )}
+
+
+
+
+ + {t('errors.fetchInfoFailed')} +
+{error}
+
+
+
+
+
+ setPlaylistUrl(e.target.value)}
+ className="flex-1"
+ disabled={playlistLoading}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setStartIndex(e.target.value)}
+ min="1"
+ disabled={playlistLoading}
+ />
+ setEndIndex(e.target.value)}
+ min="1"
+ disabled={playlistLoading}
+ />
+
+
+
+ )
+}
diff --git a/src/renderer/src/pages/SupportedSites.tsx b/src/renderer/src/pages/SupportedSites.tsx
new file mode 100644
index 0000000..3be9a52
--- /dev/null
+++ b/src/renderer/src/pages/SupportedSites.tsx
@@ -0,0 +1,58 @@
+import { Button } from '@renderer/components/ui/button'
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle
+} from '@renderer/components/ui/card'
+import { popularSites } from '@renderer/data/popularSites'
+import { useTranslation } from 'react-i18next'
+
+const referenceUrl = 'https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md'
+
+export function SupportedSites() {
+ const { t } = useTranslation()
+
+ return (
+
+
+
+ {t('settings.general')}
+ {t('settings.advanced')}
+
+
+
+
+ -
+
+ {t('settings.downloadPath')}
+ Choose where to save downloaded files
+
+
+
+
+
+ -
+
+ {t('settings.theme')}
+
+ Choose a light, dark, or system theme for VidBee
+
+
+
+
+
+
+
+
+
+ -
+
+ {t('settings.oneClickDownload')}
+ {t('settings.oneClickDownloadDescription')}
+
+
+ handleSettingChange('oneClickDownload', value)}
+ />
+
+
+
+ {settings.oneClickDownload && (
+ <>
+ -
+
+ {t('settings.oneClickDownloadType')}
+
+ Choose the default download type for one-click downloads. Quality uses the
+ preset below.
+
+
+
+
+
+
+ -
+
+ {t('settings.oneClickQuality')}
+
+ Select the quality preset used for one-click downloads
+
+
+
+
+
+
+
+ )}
+
+
+
+ -
+
+ {t('settings.showMoreFormats')}
+
+ Display additional format options in the interface
+
+
+
+ handleSettingChange('showMoreFormats', value)}
+ />
+
+
+
+
+
+
+
+ -
+
+ {t('settings.maxConcurrentDownloads')}
+ Maximum number of simultaneous downloads
+
+
+
+
+
+
+ -
+
+ {t('settings.browserForCookies')}
+
+ Browser to extract cookies from for authentication
+
+
+
+
+
+
+
+ -
+
+ {t('settings.proxy')}
+ Proxy server for network requests
+
+
+ handleSettingChange('proxy', e.target.value)}
+ className="w-64"
+ />
+
+
+
+ -
+
+ {t('settings.configFile')}
+ Custom configuration file for yt-dlp
+
+
+
+
+
+
+
+
+
+
+
+ {t('settings.title')}
+{t('settings.description')}
+
+
+
+
+
+
+
+
+
+
+
+ {t('sites.pageTitle')}
+ {t('sites.pageDescription')}
+
+
+
+
+
+
+
+
+
+
+ {t('sites.moreTitle')}
+ {t('sites.moreDescription')}
+
+
+
+
+
+
+ )
+}
diff --git a/src/renderer/src/store/downloads.ts b/src/renderer/src/store/downloads.ts
new file mode 100644
index 0000000..497d1a5
--- /dev/null
+++ b/src/renderer/src/store/downloads.ts
@@ -0,0 +1,177 @@
+import { atom } from 'jotai'
+import type { DownloadHistoryItem, DownloadItem } from '../../../shared/types'
+
+export type DownloadRecord = DownloadItem & {
+ entryType: 'active' | 'history'
+ downloadedAt?: number
+}
+
+const recordKey = (entryType: DownloadRecord['entryType'], id: string) => `${entryType}:${id}`
+
+const toActiveRecord = (item: DownloadItem): DownloadRecord => ({
+ ...item,
+ entryType: 'active'
+})
+
+const toHistoryRecord = (item: DownloadHistoryItem): DownloadRecord => ({
+ id: item.id,
+ url: item.url,
+ title: item.title,
+ thumbnail: item.thumbnail,
+ type: item.type,
+ status: item.status,
+ progress: undefined,
+ error: item.error,
+ outputPath: item.outputPath,
+ speed: undefined,
+ duration: item.duration,
+ fileSize: item.fileSize,
+ format: item.format,
+ quality: item.quality,
+ codec: item.codec,
+ createdAt: item.downloadedAt,
+ startedAt: item.downloadedAt,
+ completedAt: item.completedAt ?? item.downloadedAt,
+ description: item.description,
+ channel: item.channel,
+ uploader: item.uploader,
+ viewCount: item.viewCount,
+ tags: item.tags,
+ selectedFormat: item.selectedFormat,
+ entryType: 'history',
+ downloadedAt: item.downloadedAt
+})
+
+export const downloadRecordsAtom = atom{t('sites.pageIntro')}
+{t('sites.popularSection')}
+-
+ {popularSites.map((site) => (
+
-
+
{site.label}
+ {site.description ? ( +{site.description}
+ ) : null} +
+ ))}
+