Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-03-11 17:45:38 +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

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

@ -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>
);
};
};