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