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

Refactor SeriesContent component to enhance episode rendering and layout handling

Browse source 
This update improves the SeriesContent component by replacing the horizontal ScrollView with a FlatList, optimizing performance and responsiveness. The FlatList implementation includes adjustments for both horizontal and vertical layouts, ensuring efficient rendering of episodes. Additionally, the code structure has been refined for better readability and maintainability, enhancing the overall user experience.
This commit is contained in:
tapframe 2025-06-21 20:48:00 +05:30
parent 7738f70211
commit 6b63bc3d7f
1 changed files with 42 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -134,10 +134,12 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
if (selectedIndex !== -1) { if (selectedIndex !== -1) {
// Wait a small amount of time for layout to be ready // Wait a small amount of time for layout to be ready
setTimeout(() => { setTimeout(() => {
seasonScrollViewRef.current?.scrollTo({ if (seasonScrollViewRef.current && typeof (seasonScrollViewRef.current as any).scrollToOffset === 'function') {
x: selectedIndex * 116, // 100px width + 16px margin (seasonScrollViewRef.current as any).scrollToOffset({
animated: true offset: selectedIndex * 116, // 100px width + 16px margin
}); animated: true
});
}
}, 300); }, 300);
} }
} }
@ -181,14 +183,17 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
return ( return (
<View style={styles.seasonSelectorWrapper}> <View style={styles.seasonSelectorWrapper}>
<Text style={[styles.seasonSelectorTitle, { color: currentTheme.colors.highEmphasis }]}>Seasons</Text> <Text style={[styles.seasonSelectorTitle, { color: currentTheme.colors.highEmphasis }]}>Seasons</Text>
<ScrollView <FlatList
ref={seasonScrollViewRef} ref={seasonScrollViewRef as React.RefObject<FlatList<any>>}
horizontal data={seasons}
horizontal
showsHorizontalScrollIndicator={false} showsHorizontalScrollIndicator={false}
style={styles.seasonSelectorContainer} style={styles.seasonSelectorContainer}
contentContainerStyle={styles.seasonSelectorContent} contentContainerStyle={styles.seasonSelectorContent}
> initialNumToRender={5}
{seasons.map(season => { maxToRenderPerBatch={5}
windowSize={3}
renderItem={({ item: season }) => {
const seasonEpisodes = groupedEpisodes[season] || []; const seasonEpisodes = groupedEpisodes[season] || [];
let seasonPoster = DEFAULT_PLACEHOLDER; let seasonPoster = DEFAULT_PLACEHOLDER;
if (seasonEpisodes[0]?.season_poster_path) { if (seasonEpisodes[0]?.season_poster_path) {
@ -234,8 +239,9 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>
); );
})} }}
</ScrollView> keyExtractor={season => season.toString()}
/>
</View> </View>
); );
}; };
@ -583,46 +589,37 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
maxToRenderPerBatch={3} maxToRenderPerBatch={3}
windowSize={5} windowSize={5}
/> />
) : ) : (
// Vertical Layout (Traditional) // Vertical Layout (Traditional)
isTablet ? ( <View
<FlatList style={[
data={currentSeasonEpisodes} styles.episodeList,
renderItem={({ item: episode, index }) => ( isTablet ? styles.episodeListContentVerticalTablet : styles.episodeListContentVertical
<Animated.View ]}
>
{isTablet ? (
<View style={styles.episodeGridVertical}>
{currentSeasonEpisodes.map((episode, index) => (
<Animated.View
key={episode.id}
entering={FadeIn.duration(300).delay(100 + index * 30)}
>
{renderVerticalEpisodeCard(episode)}
</Animated.View>
))}
</View>
) : (
currentSeasonEpisodes.map((episode, index) => (
<Animated.View
key={episode.id} key={episode.id}
entering={FadeIn.duration(300).delay(100 + index * 30)} entering={FadeIn.duration(300).delay(100 + index * 30)}
> >
{renderVerticalEpisodeCard(episode)} {renderVerticalEpisodeCard(episode)}
</Animated.View> </Animated.View>
)} ))
keyExtractor={episode => episode.id.toString()} )}
numColumns={2} </View>
style={styles.episodeList} )
contentContainerStyle={styles.episodeListContentVerticalTablet}
initialNumToRender={10}
maxToRenderPerBatch={10}
windowSize={10}
/>
) : (
<FlatList
data={currentSeasonEpisodes}
renderItem={({ item: episode, index }) => (
<Animated.View
key={episode.id}
entering={FadeIn.duration(300).delay(100 + index * 30)}
>
{renderVerticalEpisodeCard(episode)}
</Animated.View>
)}
keyExtractor={episode => episode.id.toString()}
style={styles.episodeList}
contentContainerStyle={styles.episodeListContentVertical}
initialNumToRender={10}
maxToRenderPerBatch={10}
windowSize={10}
/>
)
)} )}
</Animated.View> </Animated.View>
</View> </View>