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,
IconButton,
Spinner,
Badge,
} from '@chakra-ui/react';
import { Search2Icon, ChevronDownIcon } from '@chakra-ui/icons';
import type { Song, PlaylistNode } from '../types/interfaces';
@ -97,16 +96,9 @@ const SongItem = memo<{
/>
)}
<Box flex={1} minW={0}>
<Flex align="center" gap={2}>
<Text fontSize="sm" fontWeight="medium" color="white" noOfLines={1}>
{song.title}
</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}>
{song.artist}
</Text>

View File

@ -66,9 +66,16 @@ export const PersistentMusicPlayer: React.FC<PersistentMusicPlayerProps> = ({
const loadStreamingUrl = async () => {
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);
try {
const response = await fetch(`/api/music/${currentSong.s3File.musicFileId}/stream`);
const response = await fetch(`/api/music/${musicFileId}/stream`);
if (response.ok) {
const data = await response.json();
setStreamingUrl(data.streamingUrl);