From d2f9b7586a225684a548eccadafeafd59320baba Mon Sep 17 00:00:00 2001
From: AdityasahuX07 <smily998800@gmail.com>
Date: Tue, 23 Dec 2025 15:24:02 +0530
Subject: [PATCH] Refactor SourcesModal component styling and layout

Refactor QualityBadge component for improved styling and readability. Update source selection UI for better user experience.
---
 src/components/player/modals/SourcesModal.tsx | 191 ++++++++----------
 1 file changed, 80 insertions(+), 111 deletions(-)

diff --git a/src/components/player/modals/SourcesModal.tsx b/src/components/player/modals/SourcesModal.tsx
index 6bfac5d..4cef29e 100644
--- a/src/components/player/modals/SourcesModal.tsx
+++ b/src/components/player/modals/SourcesModal.tsx
@@ -22,41 +22,29 @@ const QualityBadge = ({ quality }: { quality: string | null }) => {
   if (!quality) return null;
 
   const qualityNum = parseInt(quality);
-  let color = '#8B5CF6'; // Default purple
+  let color = '#8B5CF6';
   let label = `${quality}p`;
 
   if (qualityNum >= 2160) {
-    color = '#F59E0B'; // Gold for 4K
+    color = '#F59E0B';
     label = '4K';
   } else if (qualityNum >= 1080) {
-    color = '#EF4444'; // Red for 1080p
-    label = 'FHD';
+    color = '#3B82F6';
+    label = '1080p';
   } else if (qualityNum >= 720) {
-    color = '#10B981'; // Green for 720p
-    label = 'HD';
+    color = '#10B981';
+    label = '720p';
   }
 
   return (
-    <View
-      style={{
-        backgroundColor: `${color}20`,
-        borderColor: `${color}60`,
-        borderWidth: 1,
-        paddingHorizontal: 8,
-        paddingVertical: 4,
-        borderRadius: 8,
-        flexDirection: 'row',
-        alignItems: 'center',
-      }}
-    >
-      <Text style={{
-        color: color,
-        fontSize: 12,
-        fontWeight: '700',
-        letterSpacing: 0.5,
-      }}>
-        {label}
-      </Text>
+    <View style={{
+      backgroundColor: color,
+      paddingHorizontal: 6,
+      paddingVertical: 2,
+      borderRadius: 4,
+      marginLeft: 8,
+    }}>
+      <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>{label}</Text>
     </View>
   );
 };
@@ -97,9 +85,18 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
   };
 
   return (
-    <View style={[StyleSheet.absoluteFill, { zIndex: 9999 }]}>
-      <TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={handleClose}>
-        <Animated.View entering={FadeIn.duration(200)} exiting={FadeOut.duration(150)} style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }} />
+    <View style={StyleSheet.absoluteFill} zIndex={10000}>
+      {/* Backdrop */}
+      <TouchableOpacity
+        style={StyleSheet.absoluteFill}
+        activeOpacity={1}
+        onPress={handleClose}
+      >
+        <Animated.View
+          entering={FadeIn.duration(200)}
+          exiting={FadeOut.duration(150)}
+          style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0.5)' }}
+        />
       </TouchableOpacity>
 
       <Animated.View
@@ -116,32 +113,35 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
           borderColor: 'rgba(255,255,255,0.1)',
         }}
       >
-        <View style={{ paddingTop: Platform.OS === 'ios' ? 60 : 15, paddingHorizontal: 20 }}>
-          <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
-            <Text style={{ color: 'white', fontSize: 22, fontWeight: '700' }}>Change Source</Text>
-          </View>
+        {/* Header */}
+        <View style={{
+          paddingTop: Platform.OS === 'ios' ? 60 : 20,
+          paddingHorizontal: 20,
+          paddingBottom: 20,
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          alignItems: 'center'
+        }}>
+          <Text style={{ color: 'white', fontSize: 20, fontWeight: '700' }}>
+            Change Source
+          </Text>
         </View>
 
         <ScrollView
           showsVerticalScrollIndicator={false}
-          contentContainerStyle={{ padding: 15, paddingBottom: 40 }}
+          contentContainerStyle={{ paddingHorizontal: 15, paddingBottom: 40 }}
         >
           {isChangingSource && (
             <View style={{
               backgroundColor: 'rgba(34, 197, 94, 0.1)',
-              borderRadius: 16,
-              padding: 16,
-              marginBottom: 20,
+              borderRadius: 12,
+              padding: 10,
+              marginBottom: 15,
               flexDirection: 'row',
               alignItems: 'center',
             }}>
               <ActivityIndicator size="small" color="#22C55E" />
-              <Text style={{
-                color: '#22C55E',
-                fontSize: 14,
-                fontWeight: '600',
-                marginLeft: 12,
-              }}>
+              <Text style={{ color: '#22C55E', fontSize: 14, fontWeight: '600', marginLeft: 10 }}>
                 Switching source...
               </Text>
             </View>
@@ -149,14 +149,15 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
 
           {sortedProviders.length > 0 ? (
             sortedProviders.map(([providerId, providerData]) => (
-              <View key={providerId} style={{ marginBottom: 30 }}>
+              <View key={providerId} style={{ marginBottom: 20 }}>
                 <Text style={{
-                  color: 'rgba(255, 255, 255, 0.7)',
-                  fontSize: 14,
-                  fontWeight: '600',
-                  marginBottom: 15,
+                  color: 'rgba(255, 255, 255, 0.4)',
+                  fontSize: 12,
+                  fontWeight: '700',
+                  marginBottom: 10,
+                  marginLeft: 5,
                   textTransform: 'uppercase',
-                  letterSpacing: 0.5,
+                  letterSpacing: 1,
                 }}>
                   {providerData.addonName} ({providerData.streams.length})
                 </Text>
@@ -170,12 +171,12 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
                       <TouchableOpacity
                         key={`${providerId}-${index}`}
                         style={{
-                          backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.06)',
+                          padding: 8,
                           borderRadius: 12,
-                          padding: 12,
+                          backgroundColor: isSelected ? 'white' : 'rgba(255,255,255,0.05)',
                           borderWidth: 1,
-                          borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.1)',
-                          opacity: (isChangingSource && !isSelected) ? 0.6 : 1,
+                          borderColor: isSelected ? 'white' : 'rgba(255,255,255,0.05)',
+                          opacity: (isChangingSource && !isSelected) ? 0.5 : 1,
                         }}
                         onPress={() => handleStreamSelect(stream)}
                         activeOpacity={0.7}
@@ -183,60 +184,46 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
                       >
                         <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                           <View style={{ flex: 1 }}>
-                            <View style={{
-                              flexDirection: 'row',
-                              alignItems: 'center',
-                              marginBottom: 8,
-                              gap: 8,
-                            }}>
+                            <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                               <Text style={{
                                 color: isSelected ? 'black' : 'white',
-                                fontSize: 15,
                                 fontWeight: isSelected ? '700' : '500',
+                                fontSize: 14,
                                 flex: 1,
-                              }}>
+                              }} numberOfLines={1}>
                                 {stream.title || stream.name || `Stream ${index + 1}`}
                               </Text>
-                              {quality && <QualityBadge quality={quality} />}
+                              <QualityBadge quality={quality} />
                             </View>
 
                             {(stream.size || stream.lang) && (
-                              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
+                              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
                                 {stream.size && (
-                                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                                    <MaterialIcons name="storage" size={14} color={isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.5)'} />
-                                    <Text style={{
-                                      color: isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(255,255,255,0.5)',
-                                      fontSize: 12,
-                                      fontWeight: '600',
-                                      marginLeft: 4,
-                                    }}>
-                                      {(stream.size / (1024 * 1024 * 1024)).toFixed(1)} GB
-                                    </Text>
-                                  </View>
+                                  <Text style={{
+                                    color: isSelected ? 'rgba(0,0,0,0.5)' : 'rgba(255,255,255,0.5)',
+                                    fontSize: 11,
+                                  }}>
+                                    {(stream.size / (1024 * 1024 * 1024)).toFixed(1)} GB
+                                  </Text>
                                 )}
                                 {stream.lang && (
-                                  <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-                                    <MaterialIcons name="language" size={14} color={isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(59,130,246,0.8)'} />
-                                    <Text style={{
-                                      color: isSelected ? 'rgba(0,0,0,0.6)' : 'rgba(59,130,246,0.8)',
-                                      fontSize: 12,
-                                      fontWeight: '600',
-                                      marginLeft: 4,
-                                    }}>
-                                      {stream.lang.toUpperCase()}
-                                    </Text>
-                                  </View>
+                                  <Text style={{
+                                    color: isSelected ? 'rgba(59, 130, 246, 1)' : 'rgba(59, 130, 246, 0.8)',
+                                    fontSize: 11,
+                                    fontWeight: '600',
+                                  }}>
+                                    {stream.lang.toUpperCase()}
+                                  </Text>
                                 )}
                               </View>
                             )}
                           </View>
 
-                          <View style={{ marginLeft: 12, alignItems: 'center' }}>
+                          <View style={{ marginLeft: 12 }}>
                             {isSelected ? (
-                              <MaterialIcons name="check" size={18} color="black" />
+                              <MaterialIcons name="check" size={20} color="black" />
                             ) : (
-                              <MaterialIcons name="play-arrow" size={20} color="rgba(255,255,255,0.4)" />
+                              <MaterialIcons name="play-arrow" size={20} color="rgba(255,255,255,0.3)" />
                             )}
                           </View>
                         </View>
@@ -247,28 +234,10 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
               </View>
             ))
           ) : (
-            <View style={{
-              backgroundColor: 'rgba(255, 255, 255, 0.05)',
-              borderRadius: 16,
-              padding: 20,
-              alignItems: 'center',
-            }}>
-              <MaterialIcons name="error-outline" size={48} color="rgba(255,255,255,0.3)" />
-              <Text style={{
-                color: 'rgba(255, 255, 255, 0.6)',
-                fontSize: 16,
-                marginTop: 16,
-                textAlign: 'center',
-              }}>
-                No sources available
-              </Text>
-              <Text style={{
-                color: 'rgba(255, 255, 255, 0.4)',
-                fontSize: 14,
-                marginTop: 8,
-                textAlign: 'center',
-              }}>
-                Try searching for different content
+            <View style={{ padding: 40, alignItems: 'center', opacity: 0.5 }}>
+              <MaterialIcons name="cloud-off" size={48} color="white" />
+              <Text style={{ color: 'white', marginTop: 16, textAlign: 'center', fontWeight: '600' }}>
+                No sources found
               </Text>
             </View>
           )}
@@ -276,4 +245,4 @@ export const SourcesModal: React.FC<SourcesModalProps> = ({
       </Animated.View>
     </View>
   );
-};
\ No newline at end of file
+};