fix: Resolve main view player issues and clean up UI

- Fix ObjectId casting error in PersistentMusicPlayer by handling both string IDs and populated objects
- Remove music icon badge from main view song list (play button is sufficient)
- Clean up unused Badge import in PaginatedSongList
- Ensure proper musicFileId extraction for API calls

The main view music player should now work correctly, and the UI is cleaner
without redundant music icons.
This commit is contained in:
Geert Rademakes 2025-08-06 15:18:51 +02:00
parent 4361531513
commit 6244c7c6b8
2 changed files with 11 additions and 12 deletions

View File

@ -17,7 +17,6 @@ import {
MenuDivider, MenuDivider,
IconButton, IconButton,
Spinner, Spinner,
Badge,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { Search2Icon, ChevronDownIcon } from '@chakra-ui/icons'; import { Search2Icon, ChevronDownIcon } from '@chakra-ui/icons';
import type { Song, PlaylistNode } from '../types/interfaces'; import type { Song, PlaylistNode } from '../types/interfaces';
@ -97,16 +96,9 @@ const SongItem = memo<{
/> />
)} )}
<Box flex={1} minW={0}> <Box flex={1} minW={0}>
<Flex align="center" gap={2}>
<Text fontSize="sm" fontWeight="medium" color="white" noOfLines={1}> <Text fontSize="sm" fontWeight="medium" color="white" noOfLines={1}>
{song.title} {song.title}
</Text> </Text>
{hasMusicFile(song) && (
<Badge colorScheme="green" size="sm" variant="subtle" bg="green.900" color="green.200">
🎵
</Badge>
)}
</Flex>
<Text fontSize="xs" color="gray.400" noOfLines={1}> <Text fontSize="xs" color="gray.400" noOfLines={1}>
{song.artist} {song.artist}
</Text> </Text>

View File

@ -66,9 +66,16 @@ export const PersistentMusicPlayer: React.FC<PersistentMusicPlayerProps> = ({
const loadStreamingUrl = async () => { const loadStreamingUrl = async () => {
if (!currentSong?.s3File?.musicFileId) return; if (!currentSong?.s3File?.musicFileId) return;
// Handle both string ID and populated object
const musicFileId = typeof currentSong.s3File.musicFileId === 'string'
? currentSong.s3File.musicFileId
: currentSong.s3File.musicFileId._id;
if (!musicFileId) return;
setIsLoading(true); setIsLoading(true);
try { try {
const response = await fetch(`/api/music/${currentSong.s3File.musicFileId}/stream`); const response = await fetch(`/api/music/${musicFileId}/stream`);
if (response.ok) { if (response.ok) {
const data = await response.json(); const data = await response.json();
setStreamingUrl(data.streamingUrl); setStreamingUrl(data.streamingUrl);