fixed bugs on history,artist,spotify and some ui issue fixed

Author: gauravxdev

Api/Recommended.js

@@ -3,22 +3,28 @@ import { getCachedData, CACHE_GROUPS, isNetworkAvailable } from './CacheManager'
 
 async function getRecommendedSongs(id) {
   try {
-    // Skip recommendation requests for YouTube Music songs (11-character IDs)
-    // ONLY if it's not explicitly a Saavn song OR doesn't have Saavn download URLs
-    const isYouTubeId = id && typeof id === 'string' && id.length === 11 && !/[\\/.]/.test(id);
-    if (isYouTubeId) {
-      // If we have access to the song object, we could be more precise.
-      // For now, let's assume if it's 11 chars AND doesn't look like a Saavn ID (optional)
-      // But Saavn IDs can be anything. Better to check if we're in a Saavn context.
+    // Skip if no ID provided
+    if (!id || typeof id !== 'string') {
+      return { data: [], success: true, message: "No valid ID provided" };
+    }
+
+    // Skip recommendation requests for Spotify songs (22-character alphanumeric IDs)
+    // Spotify IDs are exactly 22 chars, containing only letters and numbers (Base62)
+    const isSpotifyId = id.length === 22 && /^[a-zA-Z0-9]+$/.test(id);
+    if (isSpotifyId) {
+      return { data: [], success: true, message: "Spotify uses its own recommendation system" };
     }
 
-    if (isYouTubeId && !id.startsWith('_')) { // Many Saavn IDs start with underscores
-      return { data: [], success: true, message: "Recommendations not available for YouTube songs" };
+    // Skip recommendation requests for YouTube Music songs (11-character IDs)
+    // YouTube video IDs are 11 chars, can contain letters, numbers, hyphens, and underscores
+    const isYouTubeId = id.length === 11 && /^[a-zA-Z0-9_-]+$/.test(id);
+    if (isYouTubeId) {
+      return { data: [], success: true, message: "YouTube Music uses its own recommendation system" };
     }
 
     // Skip recommendation requests for DAB songs (purely numeric, typically 9-12 digits)
     // DAB uses Last.fm recommendations via DABRecommendationService, not Saavn
-    const isDabId = id && typeof id === 'string' && /^\d{6,15}$/.test(id);
+    const isDabId = /^\d{6,15}$/.test(id);
     if (isDabId) {
       return { data: [], success: true, message: "DAB uses Last.fm recommendations" };
     }

Component/History/HistoryCard.jsx

@@ -63,17 +63,77 @@ export const HistoryCard = memo(function HistoryCard({ historyItem, onRefresh })
   // Play song
   const playSong = async () => {
     try {
-      const songData = {
-        id: historyItem.id,
-        title: historyItem.title,
-        artist: historyItem.artist,
-        artwork: historyItem.artwork,
-        url: historyItem.url,
-        duration: historyItem.duration,
-        sourceType: historyItem.sourceType,
-        isLocal: historyItem.isLocal,
-        path: historyItem.path,
-      };
+      // Check if this is a legacy history entry (empty URL and no videoId)
+      // For these, we need to search YouTube Music by title/artist
+      const isLegacyEntry = !historyItem.url && !historyItem.videoId && historyItem.sourceType === 'online';
+
+      let songData;
+
+      if (isLegacyEntry) {
+        // Legacy entry without videoId - search YouTube Music first
+        console.log('🔍 History: Legacy entry, searching YTMusic for:', historyItem.title);
+        try {
+          const YouTubeMusicService = require('../../Utils/YouTubeMusicService').default;
+          const ytResult = await YouTubeMusicService.searchAndStream(
+            historyItem.title,
+            historyItem.artist || ''
+          );
+
+          if (ytResult && ytResult.url && !ytResult.error) {
+            // Successfully found on YouTube Music
+            songData = {
+              id: ytResult.videoId,
+              title: historyItem.title,
+              artist: historyItem.artist,
+              artwork: historyItem.artwork,
+              url: ytResult.url,
+              headers: ytResult.headers,
+              duration: historyItem.duration,
+              sourceType: 'online',
+              isLocal: false,
+              source: 'ytmusic',
+              videoId: ytResult.videoId,
+              _prefetched: true,
+            };
+            console.log('✅ History: Found on YTMusic:', ytResult.videoId);
+          } else {
+            throw new Error('Could not find song on YouTube Music');
+          }
+        } catch (searchError) {
+          console.error('❌ History: YTMusic search failed:', searchError.message);
+          ToastAndroid.show('Could not find song', ToastAndroid.SHORT);
+          return;
+        }
+      } else {
+        // Standard case - has URL or videoId
+        const needsStreamFetch = !historyItem.url && (
+          historyItem.videoId ||
+          historyItem.source === 'ytmusic' ||
+          historyItem.source === 'spotify' ||
+          historyItem.source === 'dab'
+        );
+
+        songData = {
+          // Use videoId as ID if available (for YTMusic playback), otherwise use original ID
+          id: historyItem.videoId || historyItem.id,
+          title: historyItem.title,
+          artist: historyItem.artist,
+          artwork: historyItem.artwork,
+          url: historyItem.url || '', // Empty URL will trigger stream fetch
+          duration: historyItem.duration,
+          sourceType: historyItem.sourceType,
+          isLocal: historyItem.isLocal,
+          path: historyItem.path,
+          // Include source info for proper stream fetching
+          source: historyItem.videoId ? 'ytmusic' : historyItem.source,
+          videoId: historyItem.videoId,
+          spotifyId: historyItem.spotifyId,
+          // Flag to trigger stream fetch if URL is empty
+          _needsStream: needsStreamFetch,
+          // Mark if this was mapped from Spotify
+          mappedFromSpotify: !!historyItem.spotifyId,
+        };
+      }
 
       await PlayOneSong(songData);
       setIndex(1); // Open full screen player
@@ -209,14 +269,15 @@ export const HistoryCard = memo(function HistoryCard({ historyItem, onRefresh })
   }, [historyItem.id, historyItem.sourceType]);
 
   return (
-    <View style={styles.container}>
-      <Pressable
-        onPress={playSong}
-        android_ripple={{
-          color: dark ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.08)',
-          borderless: false,
-          radius: SCREEN_WIDTH * 0.45
-        }}
+    <Pressable
+      onPress={playSong}
+      android_ripple={{
+        color: dark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.05)',
+        borderless: false,
+      }}
+      style={styles.container}
+    >
+      <View
         style={styles.pressableContent}
       >
         <FastImage
@@ -244,11 +305,14 @@ export const HistoryCard = memo(function HistoryCard({ historyItem, onRefresh })
             style={[styles.artist, { color: colors.textSecondary }]}
           />
         </View>
-      </Pressable>
+      </View>
 
       <Pressable
         ref={buttonRef}
-        onPress={showMenu}
+        onPress={(e) => {
+          e.stopPropagation();
+          showMenu();
+        }}
         style={styles.menuButton}
       >
         <MaterialCommunityIcons name="dots-vertical" size={22} color={colors.text} />
@@ -293,27 +357,32 @@ export const HistoryCard = memo(function HistoryCard({ historyItem, onRefresh })
           </View>
         </TouchableOpacity>
       </Modal>
-    </View>
+    </Pressable>
   );
 });
 
 const getThemedStyles = (colors, dark) => StyleSheet.create({
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 8,
+    paddingVertical: 6,
+    paddingHorizontal: 10,
+    marginHorizontal: 10,
+    marginVertical: 2,
+    borderRadius: 8,
     backgroundColor: colors.background,
   },
   pressableContent: {
     flex: 1,
     flexDirection: 'row',
     alignItems: 'center',
+    paddingVertical: 6,
+    paddingLeft: 4
   },
   artwork: {
     width: 50,
     height: 50,
-    borderRadius: 4,
+    borderRadius: 8,
     marginRight: 12,
   },
   textContainer: {

Component/MusicPlayer/BottomSheetMusic.jsx

@@ -133,10 +133,12 @@ const BottomSheetMusic = React.memo(({ color }) => {
   // Timing animation config for smooth, predictable open/close transitions
   // Using timing instead of spring to avoid stuck transitions
   // OPTIMIZED: Higher stiffness spring for fast, responsive open/close
+  // OPTIMIZED: Ultra-fast spring animation for instant fullscreen transition
+  // Very high stiffness + very low mass = near-instant snap with no visible bottom gap
   const animationConfigs = useBottomSheetSpringConfigs({
-    damping: 25,
-    stiffness: 300,
-    mass: 0.4,
+    damping: 35,
+    stiffness: 700,
+    mass: 0.2,
     overshootClamping: true,
     restDisplacementThreshold: 0.01,
     restSpeedThreshold: 0.01,
@@ -396,6 +398,8 @@ const BottomSheetMusic = React.memo(({ color }) => {
       <BottomSheetView
         style={{
           ...styles.contentContainer,
+          // Solid background when fullscreen to prevent gap during animation
+          backgroundColor: Index === 1 ? (color || colors.musicPlayerBg) : 'transparent',
         }}
       >
         {Index !== 1 ? (

Component/MusicPlayer/EachSongMenuButton.jsx

@@ -208,11 +208,41 @@ export const EachSongMenuButton = ({
       const isYouTubeSong = song.id && typeof song.id === 'string' && song.id.length === 11 && !song.isLocalMusic;
       // Check if this is a DAB Music track (multiple detection methods)
       const isDabTrack = song.isDabTrack || song.source === 'dab' || (!isNaN(song.url) && String(song.url).length > 5);
+      // Check if this is a Spotify track
+      const isSpotifyTrack = song.source === 'spotify' || song.spotifyId || song._needsSpotifyMapping || (typeof song.url === 'string' && song.url?.startsWith('spotify://'));
 
       let songUrl = '';
       let songMetadata = { ...song };
 
-      if (isYouTubeSong) {
+      if (isSpotifyTrack) {
+        // For Spotify songs, map to YouTube Music to get stream URL
+        try {
+          const ytMusicResult = await YouTubeMusicService.searchAndStream(
+            song.title || song.name,
+            song.artist || ''
+          );
+
+          if (ytMusicResult && ytMusicResult.url && !ytMusicResult.error) {
+            songUrl = ytMusicResult.url;
+            songMetadata = {
+              ...songMetadata,
+              url: ytMusicResult.url,
+              headers: ytMusicResult.headers,
+              userAgent: ytMusicResult.headers?.['User-Agent'],
+              artwork: ytMusicResult.thumbnail || songMetadata.artwork,
+              mappedFromSpotify: true,
+            };
+          } else {
+            console.error('❌ Failed to map Spotify track to YTMusic');
+            ToastAndroid.show('Failed to get stream URL', ToastAndroid.SHORT);
+            return;
+          }
+        } catch (error) {
+          console.error('❌ Error mapping Spotify to YTMusic:', error);
+          ToastAndroid.show('Failed to load Spotify stream', ToastAndroid.SHORT);
+          return;
+        }
+      } else if (isYouTubeSong) {
         // For YouTube songs, fetch the actual stream URL
         try {
           const streamData = await youtubeStreamingService.getStreamUrl(song.id);
@@ -279,6 +309,11 @@ export const EachSongMenuButton = ({
         duration: songMetadata.duration || 0,
         language: songMetadata.language || '',
         artistID: songMetadata.artistID || '',
+        // Preserve source metadata for info modal
+        source: isSpotifyTrack ? 'spotify' : (isDabTrack ? 'dab' : (isYouTubeSong ? 'ytmusic' : song.source)),
+        spotifyId: isSpotifyTrack ? song.id : song.spotifyId,
+        album: songMetadata.album || song.album || '',
+        mappedFromSpotify: songMetadata.mappedFromSpotify || false,
         ...(songMetadata.headers && { headers: songMetadata.headers }),
         ...(songMetadata.userAgent && { userAgent: songMetadata.userAgent })
       });
@@ -303,11 +338,41 @@ export const EachSongMenuButton = ({
       const isYouTubeSong = song.id && typeof song.id === 'string' && song.id.length === 11 && !song.isLocalMusic;
       // Check if this is a DAB Music track (multiple detection methods)
       const isDabTrack = song.isDabTrack || song.source === 'dab' || (!isNaN(song.url) && String(song.url).length > 5);
+      // Check if this is a Spotify track
+      const isSpotifyTrack = song.source === 'spotify' || song.spotifyId || song._needsSpotifyMapping || (typeof song.url === 'string' && song.url?.startsWith('spotify://'));
 
       let songUrl = '';
       let songMetadata = { ...song };
 
-      if (isYouTubeSong) {
+      if (isSpotifyTrack) {
+        // For Spotify songs, map to YouTube Music to get stream URL
+        try {
+          const ytMusicResult = await YouTubeMusicService.searchAndStream(
+            song.title || song.name,
+            song.artist || ''
+          );
+
+          if (ytMusicResult && ytMusicResult.url && !ytMusicResult.error) {
+            songUrl = ytMusicResult.url;
+            songMetadata = {
+              ...songMetadata,
+              url: ytMusicResult.url,
+              headers: ytMusicResult.headers,
+              userAgent: ytMusicResult.headers?.['User-Agent'],
+              artwork: ytMusicResult.thumbnail || songMetadata.artwork,
+              mappedFromSpotify: true,
+            };
+          } else {
+            console.error('❌ Failed to map Spotify track to YTMusic');
+            ToastAndroid.show('Failed to get stream URL', ToastAndroid.SHORT);
+            return;
+          }
+        } catch (error) {
+          console.error('❌ Error mapping Spotify to YTMusic:', error);
+          ToastAndroid.show('Failed to load Spotify stream', ToastAndroid.SHORT);
+          return;
+        }
+      } else if (isYouTubeSong) {
         // For YouTube songs, fetch the actual stream URL
         try {
           const streamData = await youtubeStreamingService.getStreamUrl(song.id);
@@ -374,6 +439,11 @@ export const EachSongMenuButton = ({
         duration: songMetadata.duration || 0,
         language: songMetadata.language || '',
         artistID: songMetadata.artistID || '',
+        // Preserve source metadata for info modal
+        source: isSpotifyTrack ? 'spotify' : (isDabTrack ? 'dab' : (isYouTubeSong ? 'ytmusic' : song.source)),
+        spotifyId: isSpotifyTrack ? song.id : song.spotifyId,
+        album: songMetadata.album || song.album || '',
+        mappedFromSpotify: songMetadata.mappedFromSpotify || false,
         ...(songMetadata.headers && { headers: songMetadata.headers }),
         ...(songMetadata.userAgent && { userAgent: songMetadata.userAgent })
       };

Component/Playlist/CustomPlaylistView.jsx

@@ -920,6 +920,7 @@ export const CustomPlaylistView = (props) => {
         initialNumToRender={15}
         windowSize={11}
         removeClippedSubviews={true}
+        contentContainerStyle={{ paddingBottom: 150 }}
         ListHeaderComponent={
           <PlaylistHeader
             imageUrl={getSafeImageSource(Songs[Songs.length - 1] || {})?.uri || getSafeImageSource(Songs[Songs.length - 1] || {})}

MusicPlayerFunctions.js

@@ -571,6 +571,35 @@ async function AddPlaylist(songs, startSongId = null) {
       }
     }
 
+    // OPTIMISTIC UI: Emit early metadata for first song so mini player shows immediately
+    // This provides instant feedback while stream URL is being fetched
+    const firstSong = tracksToAdd[0];
+    if (firstSong) {
+      const earlyArtwork = extractArtwork(firstSong) || firstSong.artwork || firstSong.image || '';
+      // Format artist properly - handle various data structures
+      let artistDisplay = firstSong.artist || 'Loading...';
+      if (!artistDisplay || artistDisplay === 'Loading...') {
+        if (firstSong.artists?.primary && Array.isArray(firstSong.artists.primary)) {
+          artistDisplay = FormatArtist(firstSong.artists.primary);
+        } else if (typeof firstSong.artists === 'string') {
+          artistDisplay = firstSong.artists;
+        } else if (firstSong.primaryArtists) {
+          artistDisplay = firstSong.primaryArtists;
+        }
+      }
+
+      DeviceEventEmitter.emit('song-loading-started', {
+        id: firstSong.id || firstSong.videoId,
+        title: firstSong.title || firstSong.name || firstSong.song || 'Loading...',
+        artist: artistDisplay,
+        artwork: earlyArtwork,
+        image: earlyArtwork,
+        duration: firstSong.duration,
+        isLoading: true,
+        isPlaylist: true, // Flag to indicate playlist/album playback
+      });
+    }
+
     // Get quality setting ONCE
     const qualityIndex = await getIndexQuality();
     const qualityNames = ['12kbps', '48kbps', '96kbps', '160kbps', '320kbps'];