diff --git a/frontend/components/Sidebar.tsx b/frontend/components/Sidebar.tsx index f3a299e..b53999a 100644 --- a/frontend/components/Sidebar.tsx +++ b/frontend/components/Sidebar.tsx @@ -1,6 +1,6 @@ "use client"; -import { Home, Search, Library, Plus, Heart } from "lucide-react"; +import { Home, Search, Library, Plus, Heart, RefreshCcw } from "lucide-react"; import Link from "next/link"; import { usePlayer } from "@/context/PlayerContext"; import { useState } from "react"; @@ -14,6 +14,8 @@ export default function Sidebar() { const { likedTracks } = usePlayer(); const { userPlaylists, libraryItems, refreshLibrary: refresh, activeFilter, setActiveFilter } = useLibrary(); const [isCreateModalOpen, setIsCreateModalOpen] = useState(false); + const [isUpdating, setIsUpdating] = useState(false); + const [updateStatus, setUpdateStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle'); const handleCreatePlaylist = async (name: string) => { await dbService.createPlaylist(name); @@ -29,6 +31,26 @@ export default function Sidebar() { } }; + const handleUpdateYtdlp = async () => { + if (isUpdating) return; + setIsUpdating(true); + setUpdateStatus('loading'); + try { + const response = await fetch('/api/system/update-ytdlp', { method: 'POST' }); + if (response.ok) { + setUpdateStatus('success'); + setTimeout(() => setUpdateStatus('idle'), 5000); + } else { + setUpdateStatus('error'); + } + } catch (error) { + console.error("Failed to update yt-dlp:", error); + setUpdateStatus('error'); + } finally { + setIsUpdating(false); + } + }; + // Filtering Logic const showPlaylists = activeFilter === 'all' || activeFilter === 'playlists'; const showArtists = activeFilter === 'all' || activeFilter === 'artists'; @@ -179,6 +201,26 @@ export default function Sidebar() { + {/* System Section */} +
+ +
+ setIsCreateModalOpen(false)}