diff --git a/packages/frontend/src/components/SongMatching.tsx b/packages/frontend/src/components/SongMatching.tsx index 920e39a..7fb7dbc 100644 --- a/packages/frontend/src/components/SongMatching.tsx +++ b/packages/frontend/src/components/SongMatching.tsx @@ -29,7 +29,7 @@ import { Tooltip, Spinner, } from '@chakra-ui/react'; -import { FiPlay, FiLink, FiSearch, FiZap, FiMusic, FiCheck, FiX } from 'react-icons/fi'; +import { FiPlay, FiLink, FiSearch, FiZap } from 'react-icons/fi'; interface MatchResult { song: any; @@ -52,8 +52,7 @@ interface MatchingStats { export const SongMatching: React.FC = () => { const [stats, setStats] = useState(null); const [unmatchedMusicFiles, setUnmatchedMusicFiles] = useState([]); - const [matchedMusicFiles, setMatchedMusicFiles] = useState([]); - const [songsWithMusicFiles, setSongsWithMusicFiles] = useState([]); + // Removed matched and songs-with-files lists to reduce load const [isLoading, setIsLoading] = useState(false); const [autoLinking, setAutoLinking] = useState(false); const [selectedMusicFile, setSelectedMusicFile] = useState(null); @@ -70,11 +69,9 @@ export const SongMatching: React.FC = () => { const loadData = async () => { setIsLoading(true); try { - const [statsRes, unmatchedRes, matchedRes, songsWithRes] = await Promise.all([ + const [statsRes, unmatchedRes] = await Promise.all([ fetch('/api/matching/stats'), - fetch('/api/matching/unmatched-music-files?limit=200'), - fetch('/api/matching/matched-music-files?limit=200'), - fetch('/api/matching/songs-with-music-files?limit=200') + fetch('/api/matching/unmatched-music-files?limit=200') ]); if (statsRes.ok) { @@ -87,15 +84,7 @@ export const SongMatching: React.FC = () => { setUnmatchedMusicFiles(unmatchedData.musicFiles); } - if (matchedRes.ok) { - const matchedData = await matchedRes.json(); - setMatchedMusicFiles(matchedData.musicFiles); - } - - if (songsWithRes.ok) { - const songsData = await songsWithRes.json(); - setSongsWithMusicFiles(songsData.songs); - } + // Matched and songs-with-files lists are omitted } catch (error) { console.error('Error loading data:', error); toast({ @@ -209,35 +198,7 @@ export const SongMatching: React.FC = () => { } }; - const handleUnlinkMusicFile = async (songId: string) => { - try { - const response = await fetch(`/api/matching/unlink/${songId}`, { - method: 'DELETE', - }); - - if (response.ok) { - toast({ - title: 'Success', - description: 'Music file unlinked from song successfully', - status: 'success', - duration: 3000, - isClosable: true, - }); - loadData(); // Refresh data - } else { - throw new Error('Failed to unlink music file'); - } - } catch (error) { - console.error('Error unlinking music file:', error); - toast({ - title: 'Error', - description: 'Failed to unlink music file from song', - status: 'error', - duration: 3000, - isClosable: true, - }); - } - }; + // Unlink handler removed with matched/songs-with-files lists const getConfidenceColor = (confidence: number) => { if (confidence >= 0.9) return 'green'; @@ -386,162 +347,7 @@ export const SongMatching: React.FC = () => { - {/* Matched Music Files */} - - - Matched Music Files ({matchedMusicFiles.length}) - - - {matchedMusicFiles.length === 0 ? ( - - No music files are matched yet. - - ) : ( - - {matchedMusicFiles.slice(0, 10).map((file) => ( - - - - - - {file.title || file.originalName} - - - - Matched - - - - {file.artist} - - - {file.album} - - - - - } - size="sm" - variant="ghost" - colorScheme="red" - onClick={() => handleUnlinkMusicFile(file.songId)} - _hover={{ bg: "red.900" }} - /> - - - } - size="sm" - variant="ghost" - colorScheme="blue" - _hover={{ bg: "blue.900" }} - /> - - - - - ))} - {matchedMusicFiles.length > 10 && ( - - Showing first 10 of {matchedMusicFiles.length} matched files - - )} - - )} - - - - {/* Songs with Music Files */} - - - Songs with Music Files ({songsWithMusicFiles.length}) - - - {songsWithMusicFiles.length === 0 ? ( - - No songs have music files linked yet. - - ) : ( - - {songsWithMusicFiles.slice(0, 10).map((song) => ( - - - - - - {song.title} - - - - Has S3 File - - - - {song.artist} - - {song.location && ( - - 📁 {song.location} - - )} - {song.s3File?.streamingUrl && ( - - 🎵 S3: {song.s3File.s3Key} - - )} - - - - } - size="sm" - variant="ghost" - colorScheme="red" - onClick={() => handleUnlinkMusicFile(song._id)} - _hover={{ bg: "red.900" }} - /> - - - } - size="sm" - variant="ghost" - colorScheme="blue" - _hover={{ bg: "blue.800" }} - /> - - - - - ))} - {songsWithMusicFiles.length > 10 && ( - - Showing first 10 of {songsWithMusicFiles.length} songs with music files - - )} - - )} - - + {/* Removed Matched Music Files and Songs with Music Files lists to streamline UI */} {/* Suggestions Modal */}