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

Enhance SeriesContent component with improved styling and layout adjustments

Browse source 
This update introduces several enhancements to the SeriesContent component, including the addition of a subtle highlight border for episode cards, refined gradient overlay colors, and new badge styles for episode numbers and runtime. The layout has been optimized for better readability and visual appeal, ensuring a more cohesive presentation of episode information. These changes aim to enhance the overall user experience by providing clearer and more attractive content displays.
This commit is contained in:
tapframe 2025-06-18 18:30:37 +05:30
parent d5cfe8a563
commit f41bba740d
1 changed files with 45 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
src/components/metadata/SeriesContent.tsx
View file

@ -333,7 +333,12 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
key={episode.id} key={episode.id}
style={[ style={[
styles.episodeCardHorizontal, styles.episodeCardHorizontal,
isTablet && styles.episodeCardHorizontalTablet isTablet && styles.episodeCardHorizontalTablet,
// Add subtle highlight border only
{
borderWidth: 2,
borderColor: currentTheme.colors.primary + '40', // 40% opacity for subtle effect
}
]} ]}
onPress={() => onSelectEpisode(episode)} onPress={() => onSelectEpisode(episode)}
activeOpacity={0.85} activeOpacity={0.85}
@ -345,21 +350,24 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
contentFit="cover" contentFit="cover"
/> />
{/* Gradient Overlay */} {/* Standard Gradient Overlay */}
<LinearGradient <LinearGradient
colors={[ colors={[
'rgba(0,0,0,0.1)', 'rgba(0,0,0,0.05)',
'rgba(0,0,0,0.3)', 'rgba(0,0,0,0.2)',
'rgba(0,0,0,0.8)', 'rgba(0,0,0,0.6)',
'rgba(0,0,0,0.85)',
'rgba(0,0,0,0.95)' 'rgba(0,0,0,0.95)'
]} ]}
locations={[0, 0.3, 0.7, 1]} locations={[0, 0.2, 0.5, 0.8, 1]}
style={styles.episodeGradient} style={styles.episodeGradient}
> >
{/* Content Container */} {/* Content Container */}
<View style={styles.episodeContent}> <View style={styles.episodeContent}>
{/* Episode Number Badge */} {/* Episode Number Badge */}
<Text style={styles.episodeNumberHorizontal}>{episodeString}</Text> <View style={styles.episodeNumberBadgeHorizontal}>
<Text style={styles.episodeNumberHorizontal}>{episodeString}</Text>
</View>
{/* Episode Title */} {/* Episode Title */}
<Text style={styles.episodeTitleHorizontal} numberOfLines={2}> <Text style={styles.episodeTitleHorizontal} numberOfLines={2}>
@ -374,9 +382,11 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
{/* Metadata Row */} {/* Metadata Row */}
<View style={styles.episodeMetadataRowHorizontal}> <View style={styles.episodeMetadataRowHorizontal}>
{episode.runtime && ( {episode.runtime && (
<Text style={styles.runtimeTextHorizontal}> <View style={styles.runtimeContainerHorizontal}>
{formatRuntime(episode.runtime)} <Text style={styles.runtimeTextHorizontal}>
</Text> {formatRuntime(episode.runtime)}
</Text>
</View>
)} )}
{episode.vote_average > 0 && ( {episode.vote_average > 0 && (
<View style={styles.ratingContainerHorizontal}> <View style={styles.ratingContainerHorizontal}>
@ -395,7 +405,10 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
<View <View
style={[ style={[
styles.progressBarHorizontal, styles.progressBarHorizontal,
{ width: `${progressPercent}%`, backgroundColor: currentTheme.colors.primary } {
width: `${progressPercent}%`,
backgroundColor: currentTheme.colors.primary,
}
]} ]}
/> />
</View> </View>
@ -403,14 +416,16 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
{/* Completed Badge */} {/* Completed Badge */}
{progressPercent >= 95 && ( {progressPercent >= 95 && (
<View style={[styles.completedBadgeHorizontal, { backgroundColor: currentTheme.colors.primary }]}> <View style={[styles.completedBadgeHorizontal, {
backgroundColor: currentTheme.colors.primary,
}]}>
<MaterialIcons name="check" size={16} color="#fff" /> <MaterialIcons name="check" size={16} color="#fff" />
</View> </View>
)} )}
{/* More Options */} {/* More Options Button */}
<TouchableOpacity style={styles.moreButton} activeOpacity={0.7}> <TouchableOpacity style={styles.moreButton} activeOpacity={0.7}>
<MaterialIcons name="more-horiz" size={24} color="rgba(255,255,255,0.8)" /> <MaterialIcons name="more-horiz" size={24} color="rgba(255,255,255,0.9)" />
</TouchableOpacity> </TouchableOpacity>
</LinearGradient> </LinearGradient>
</TouchableOpacity> </TouchableOpacity>
@ -708,6 +723,14 @@ const styles = StyleSheet.create({
padding: 12, padding: 12,
paddingBottom: 16, paddingBottom: 16,
}, },
episodeNumberBadgeHorizontal: {
backgroundColor: 'rgba(0,0,0,0.4)',
paddingHorizontal: 6,
paddingVertical: 3,
borderRadius: 4,
marginBottom: 6,
alignSelf: 'flex-start',
},
episodeNumberHorizontal: { episodeNumberHorizontal: {
color: 'rgba(255,255,255,0.8)', color: 'rgba(255,255,255,0.8)',
fontSize: 10, fontSize: 10,
@ -736,6 +759,14 @@ const styles = StyleSheet.create({
alignItems: 'center', alignItems: 'center',
gap: 8, gap: 8,
}, },
runtimeContainerHorizontal: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.4)',
paddingHorizontal: 5,
paddingVertical: 2,
borderRadius: 3,
},
runtimeTextHorizontal: { runtimeTextHorizontal: {
color: 'rgba(255,255,255,0.8)', color: 'rgba(255,255,255,0.8)',
fontSize: 11, fontSize: 11,