From 6244c7c6b8d809f44274edbc920abac0b567f6c7 Mon Sep 17 00:00:00 2001
From: Geert Rademakes <g26107@eon.com>
Date: Wed, 6 Aug 2025 15:18:51 +0200
Subject: [PATCH] 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.
---
 .../frontend/src/components/PaginatedSongList.tsx  | 14 +++-----------
 .../src/components/PersistentMusicPlayer.tsx       |  9 ++++++++-
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/PaginatedSongList.tsx b/packages/frontend/src/components/PaginatedSongList.tsx
index 3758c78..69d050a 100644
--- a/packages/frontend/src/components/PaginatedSongList.tsx
+++ b/packages/frontend/src/components/PaginatedSongList.tsx
@@ -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="sm" fontWeight="medium" color="white" noOfLines={1}>
+          {song.title}
+        </Text>
         <Text fontSize="xs" color="gray.400" noOfLines={1}>
           {song.artist}
         </Text>
diff --git a/packages/frontend/src/components/PersistentMusicPlayer.tsx b/packages/frontend/src/components/PersistentMusicPlayer.tsx
index 2d0bd77..6c4317d 100644
--- a/packages/frontend/src/components/PersistentMusicPlayer.tsx
+++ b/packages/frontend/src/components/PersistentMusicPlayer.tsx
@@ -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);