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

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