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

reposnive layout for vetical episodes

Browse source
This commit is contained in:
tapframe 2025-07-29 15:02:15 +05:30
parent 17339d82a6
commit 9431f659d7
1 changed files with 55 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -345,7 +345,10 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
onPress={() => onSelectEpisode(episode)} onPress={() => onSelectEpisode(episode)}
activeOpacity={0.7} activeOpacity={0.7}
> >
<View style={styles.episodeImageContainer}> <View style={[
styles.episodeImageContainer,
isTablet && styles.episodeImageContainerTablet
]}>
<Image <Image
source={{ uri: episodeImage }} source={{ uri: episodeImage }}
style={styles.episodeImage} style={styles.episodeImage}
@ -371,12 +374,25 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
)} )}
</View> </View>
<View style={styles.episodeInfo}> <View style={[
<View style={styles.episodeHeader}> styles.episodeInfo,
<Text style={[styles.episodeTitle, { color: currentTheme.colors.text }]} numberOfLines={2}> isTablet && styles.episodeInfoTablet
]}>
<View style={[
styles.episodeHeader,
isTablet && styles.episodeHeaderTablet
]}>
<Text style={[
styles.episodeTitle,
isTablet && styles.episodeTitleTablet,
{ color: currentTheme.colors.text }
]} numberOfLines={2}>
{episode.name} {episode.name}
</Text> </Text>
<View style={styles.episodeMetadata}> <View style={[
styles.episodeMetadata,
isTablet && styles.episodeMetadataTablet
]}>
{episode.vote_average > 0 && ( {episode.vote_average > 0 && (
<View style={styles.ratingContainer}> <View style={styles.ratingContainer}>
<Image <Image
@ -404,7 +420,11 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
)} )}
</View> </View>
</View> </View>
<Text style={[styles.episodeOverview, { color: currentTheme.colors.mediumEmphasis }]} numberOfLines={2}> <Text style={[
styles.episodeOverview,
isTablet && styles.episodeOverviewTablet,
{ color: currentTheme.colors.mediumEmphasis }
]} numberOfLines={isTablet ? 3 : 2}>
{episode.overview || 'No description available'} {episode.overview || 'No description available'}
</Text> </Text>
</View> </View>
@ -716,12 +736,13 @@ const styles = StyleSheet.create({
paddingHorizontal: 16, paddingHorizontal: 16,
}, },
episodeListContentVerticalTablet: { episodeListContentVerticalTablet: {
paddingHorizontal: 8, paddingHorizontal: 16,
}, },
episodeGridVertical: { episodeGridVertical: {
flexDirection: 'row', flexDirection: 'row',
flexWrap: 'wrap', flexWrap: 'wrap',
justifyContent: 'space-between', justifyContent: 'space-between',
gap: 16,
}, },
episodeCardVertical: { episodeCardVertical: {
flexDirection: 'row', flexDirection: 'row',
@ -738,15 +759,20 @@ const styles = StyleSheet.create({
height: 120, height: 120,
}, },
episodeCardVerticalTablet: { episodeCardVerticalTablet: {
width: '48%', width: '47%',
flexDirection: 'column', flexDirection: 'row',
height: 120, height: 140,
marginBottom: 0,
}, },
episodeImageContainer: { episodeImageContainer: {
position: 'relative', position: 'relative',
width: 120, width: 120,
height: 120, height: 120,
}, },
episodeImageContainerTablet: {
width: 140,
height: 140,
},
episodeImage: { episodeImage: {
width: '100%', width: '100%',
height: '100%', height: '100%',
@ -775,20 +801,34 @@ const styles = StyleSheet.create({
padding: 12, padding: 12,
justifyContent: 'center', justifyContent: 'center',
}, },
episodeInfoTablet: {
padding: 16,
},
episodeHeader: { episodeHeader: {
marginBottom: 4, marginBottom: 4,
}, },
episodeHeaderTablet: {
marginBottom: 6,
},
episodeTitle: { episodeTitle: {
fontSize: 15, fontSize: 15,
fontWeight: '700', fontWeight: '700',
letterSpacing: 0.3, letterSpacing: 0.3,
marginBottom: 2, marginBottom: 2,
}, },
episodeTitleTablet: {
fontSize: 16,
marginBottom: 4,
},
episodeMetadata: { episodeMetadata: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
gap: 4, gap: 4,
}, },
episodeMetadataTablet: {
gap: 6,
flexWrap: 'wrap',
},
ratingContainer: { ratingContainer: {
flexDirection: 'row', flexDirection: 'row',
alignItems: 'center', alignItems: 'center',
@ -828,6 +868,10 @@ const styles = StyleSheet.create({
fontSize: 13, fontSize: 13,
lineHeight: 18, lineHeight: 18,
}, },
episodeOverviewTablet: {
fontSize: 14,
lineHeight: 20,
},
progressBarContainer: { progressBarContainer: {
position: 'absolute', position: 'absolute',
bottom: 0, bottom: 0,
@ -1053,4 +1097,4 @@ const styles = StyleSheet.create({
fontSize: 12, fontSize: 12,
fontWeight: '600', fontWeight: '600',
}, },
}); });