major fix on streams screen

This commit is contained in:
Nayif Noushad 2025-04-15 15:58:12 +05:30
parent 7f55bba2aa
commit b10b3479d7

View file

@ -54,7 +54,7 @@ const DOLBY_ICON = 'https://upload.wikimedia.org/wikipedia/en/thumb/3/3f/Dolby_V
const { width, height } = Dimensions.get('window'); const { width, height } = Dimensions.get('window');
// Extracted Components // Extracted Components
const StreamCard = memo(({ stream, onPress, index, torrentProgress, isLoading, statusMessage }: { const StreamCard = ({ stream, onPress, index, torrentProgress, isLoading, statusMessage }: {
stream: Stream; stream: Stream;
onPress: () => void; onPress: () => void;
index: number; index: number;
@ -174,15 +174,7 @@ const StreamCard = memo(({ stream, onPress, index, torrentProgress, isLoading, s
</View> </View>
</TouchableOpacity> </TouchableOpacity>
); );
}, (prevProps, nextProps) => { };
// Simplified memo comparison that won't interfere with onPress
return (
prevProps.stream.url === nextProps.stream.url &&
prevProps.isLoading === nextProps.isLoading &&
prevProps.torrentProgress?.bufferProgress === nextProps.torrentProgress?.bufferProgress &&
prevProps.statusMessage === nextProps.statusMessage
);
});
const QualityTag = React.memo(({ text, color }: { text: string; color: string }) => ( const QualityTag = React.memo(({ text, color }: { text: string; color: string }) => (
<View style={[styles.chip, { backgroundColor: color }]}> <View style={[styles.chip, { backgroundColor: color }]}>
@ -1065,39 +1057,32 @@ export const StreamsScreen = () => {
<Text style={styles.noStreamsText}>No streams available</Text> <Text style={styles.noStreamsText}>No streams available</Text>
</Animated.View> </Animated.View>
) : ( ) : (
<SectionList <View collapsable={false} style={{ flex: 1 }}>
sections={sections} <SectionList
keyExtractor={(item, index) => `${item.url}-${index}`} sections={sections}
renderItem={renderItem} keyExtractor={(item) => item.url || `${item.name}-${item.title}`}
renderSectionHeader={renderSectionHeader} renderItem={renderItem}
stickySectionHeadersEnabled={false} renderSectionHeader={renderSectionHeader}
initialNumToRender={8} stickySectionHeadersEnabled={false}
maxToRenderPerBatch={4} initialNumToRender={8}
windowSize={5} maxToRenderPerBatch={4}
removeClippedSubviews={true} windowSize={5}
contentContainerStyle={styles.streamsContainer} removeClippedSubviews={false}
style={styles.streamsContent} contentContainerStyle={styles.streamsContainer}
showsVerticalScrollIndicator={false} style={styles.streamsContent}
bounces={true} showsVerticalScrollIndicator={false}
overScrollMode="never" bounces={true}
getItemLayout={(data, index) => ({ overScrollMode="never"
length: 86, // Height of each stream card + margin ListFooterComponent={
offset: 86 * index, isLoading ? (
index, <View style={styles.footerLoading}>
})} <ActivityIndicator size="small" color={colors.primary} />
maintainVisibleContentPosition={{ <Text style={styles.footerLoadingText}>Loading more sources...</Text>
minIndexForVisible: 0, </View>
autoscrollToTopThreshold: 10 ) : null
}} }
ListFooterComponent={ />
isLoading ? ( </View>
<View style={styles.footerLoading}>
<ActivityIndicator size="small" color={colors.primary} />
<Text style={styles.footerLoadingText}>Loading more sources...</Text>
</View>
) : null
}
/>
)} )}
</View> </View>
</View> </View>
@ -1115,6 +1100,7 @@ const styles = StyleSheet.create({
left: 0, left: 0,
right: 0, right: 0,
zIndex: 2, zIndex: 2,
pointerEvents: 'box-none',
}, },
backButton: { backButton: {
flexDirection: 'row', flexDirection: 'row',
@ -1132,7 +1118,7 @@ const styles = StyleSheet.create({
flex: 1, flex: 1,
backgroundColor: colors.darkBackground, backgroundColor: colors.darkBackground,
paddingTop: 20, paddingTop: 20,
zIndex: 0, zIndex: 1,
}, },
streamsMainContentMovie: { streamsMainContentMovie: {
paddingTop: Platform.OS === 'android' ? 90 : 100, paddingTop: Platform.OS === 'android' ? 90 : 100,
@ -1168,7 +1154,7 @@ const styles = StyleSheet.create({
streamsContent: { streamsContent: {
flex: 1, flex: 1,
width: '100%', width: '100%',
zIndex: 1, zIndex: 2,
}, },
streamsContainer: { streamsContainer: {
paddingHorizontal: 16, paddingHorizontal: 16,
@ -1324,6 +1310,7 @@ const styles = StyleSheet.create({
marginBottom: 0, marginBottom: 0,
position: 'relative', position: 'relative',
backgroundColor: colors.black, backgroundColor: colors.black,
pointerEvents: 'box-none',
}, },
streamsHeroBackground: { streamsHeroBackground: {
width: '100%', width: '100%',
@ -1450,6 +1437,7 @@ const styles = StyleSheet.create({
width: '100%', width: '100%',
height: 180, height: 180,
backgroundColor: colors.black, backgroundColor: colors.black,
pointerEvents: 'box-none',
}, },
movieTitleBackground: { movieTitleBackground: {
width: '100%', width: '100%',