Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-05-04 17:29:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor SourcesModal component styling and layout

Browse source 
Refactor QualityBadge component for improved styling and readability. Update source selection UI for better user experience.
This commit is contained in:
AdityasahuX07 2025-12-23 15:24:02 +05:30 committed by GitHub
parent 4753b2a57a
commit d2f9b7586a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 80 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

169
src/components/player/modals/SourcesModal.tsx
View file

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