streamsceen scrollview changed to sectionlist

src/components/TabletStreamsLayout.tsx

@@ -1,12 +1,11 @@
-import React, { memo, useEffect, useState } from 'react';
+import React, { memo, useEffect, useState, useCallback, useMemo } from 'react';
 import {
   View,
   Text,
   StyleSheet,
   ActivityIndicator,
-  FlatList,
+  SectionList,
   Platform,
-  ScrollView,
   TouchableOpacity,
 } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -310,33 +309,17 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
       }
     }
 
-    return (
+    // Convert sections to SectionList format
-      <ScrollView
+    const sectionListData = sections
-        style={styles.streamsContent}
+      .filter(Boolean)
-        contentContainerStyle={[
+      .filter(section => section!.data && section!.data.length > 0)
-          styles.streamsContainer,
+      .map(section => ({
-          { paddingBottom: insets.bottom + 100 }
+        title: section!.title,
-        ]}
+        addonId: section!.addonId,
-        showsVerticalScrollIndicator={false}
+        data: section!.data,
-        bounces={true}
+      }));
-        overScrollMode="never"
-        scrollEventThrottle={16}
-      >
-        {sections.filter(Boolean).map((section, sectionIndex) => (
-          <View key={section!.addonId || sectionIndex}>
-            {renderSectionHeader({ section: section! })}
 
-            {section!.data && section!.data.length > 0 ? (
+    const renderItem = ({ item, index }: { item: Stream; index: number }) => (
-              <FlatList
-                data={section!.data}
-                keyExtractor={(item, index) => {
-                  if (item && item.url) {
-                    return `${item.url}-${sectionIndex}-${index}`;
-                  }
-                  return `empty-${sectionIndex}-${index}`;
-                }}
-                renderItem={({ item, index }) => (
-                  <View>
       <StreamCard
         stream={item}
         onPress={() => handleStreamPress(item)}
@@ -357,31 +340,52 @@ const TabletStreamsLayout: React.FC<TabletStreamsLayoutProps> = ({
         parentId={id}
         parentImdbId={imdbId || undefined}
       />
-                  </View>
+    );
-                )}
-                scrollEnabled={false}
-                initialNumToRender={6}
-                maxToRenderPerBatch={2}
-                windowSize={3}
-                removeClippedSubviews={true}
-                showsVerticalScrollIndicator={false}
-                getItemLayout={(data, index) => ({
-                  length: 78,
-                  offset: 78 * index,
-                  index,
-                })}
-              />
-            ) : null}
-          </View>
-        ))}
 
-        {(loadingStreams || loadingEpisodeStreams) && hasStremioStreamProviders && (
+    const keyExtractor = (item: Stream, index: number) => {
+      if (item && item.url) {
+        return `${item.url}-${index}`;
+      }
+      return `empty-${index}`;
+    };
+
+    const ListFooterComponent = () => {
+      if (!(loadingStreams || loadingEpisodeStreams) || !hasStremioStreamProviders) return null;
+      return (
         <View style={styles.footerLoading}>
           <ActivityIndicator size="small" color={colors.primary} />
           <Text style={styles.footerLoadingText}>Loading more sources...</Text>
         </View>
-        )}
+      );
-      </ScrollView>
+    };
+
+    const getItemLayout = (data: any, index: number) => ({
+      length: 78,
+      offset: 78 * index,
+      index,
+    });
+
+    return (
+      <SectionList
+        sections={sectionListData}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        renderSectionHeader={({ section }) => renderSectionHeader({ section })}
+        ListFooterComponent={ListFooterComponent}
+        stickySectionHeadersEnabled={false}
+        contentContainerStyle={[
+          styles.streamsContainer,
+          { paddingBottom: insets.bottom + 100 }
+        ]}
+        style={styles.streamsContent}
+        showsVerticalScrollIndicator={false}
+        initialNumToRender={5}
+        maxToRenderPerBatch={3}
+        updateCellsBatchingPeriod={100}
+        windowSize={3}
+        removeClippedSubviews={true}
+        getItemLayout={getItemLayout}
+      />
     );
   };
 

src/components/player/AndroidVideoPlayer.tsx

@@ -95,15 +95,18 @@ const AndroidVideoPlayer: React.FC = () => {
 
   // Dual video engine state: ExoPlayer primary, MPV fallback
   // If videoPlayerEngine is 'mpv', always use MPV; otherwise use auto behavior
-  const [useExoPlayer, setUseExoPlayer] = useState(settings.videoPlayerEngine !== 'mpv');
+  const shouldUseMpvOnly = settings.videoPlayerEngine === 'mpv';
+  const [useExoPlayer, setUseExoPlayer] = useState(!shouldUseMpvOnly);
   const hasExoPlayerFailed = useRef(false);
 
-  // Sync useExoPlayer with settings when videoPlayerEngine changes
+  // Sync useExoPlayer with settings when videoPlayerEngine is set to 'mpv'
+  // Only run once on mount to avoid re-render loops
+  const hasAppliedEngineSettingRef = useRef(false);
   useEffect(() => {
-    if (settings.videoPlayerEngine === 'mpv') {
+    if (!hasAppliedEngineSettingRef.current && settings.videoPlayerEngine === 'mpv') {
+      hasAppliedEngineSettingRef.current = true;
       setUseExoPlayer(false);
     }
-    // Note: We don't reset to true when 'auto' because ExoPlayer might have failed
   }, [settings.videoPlayerEngine]);
 
   // Subtitle addon state

src/screens/streams/components/StreamsList.tsx

@@ -1,10 +1,9 @@
-import React, { memo, useCallback } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import {
   View,
   Text,
   StyleSheet,
-  ScrollView,
+  SectionList,
-  FlatList,
   ActivityIndicator,
   Platform,
 } from 'react-native';
@@ -86,47 +85,20 @@ const StreamsList = memo(
       [loadingProviders, styles, colors.primary]
     );
 
-    return (
+    // Convert sections to SectionList format
-      <View collapsable={false} style={{ flex: 1 }}>
+    const sectionListData = useMemo(() => {
-        {/* Autoplay overlay */}
+      return sections
-        {isAutoplayWaiting && !autoplayTriggered && (
+        .filter(Boolean)
-          <View style={styles.autoplayOverlay}>
+        .filter(section => section!.data && section!.data.length > 0)
-            <View style={styles.autoplayIndicator}>
+        .map(section => ({
-              <ActivityIndicator size="small" color={colors.primary} />
+          title: section!.title,
-              <Text style={styles.autoplayText}>Starting best stream...</Text>
+          addonId: section!.addonId,
-            </View>
+          data: section!.data,
-          </View>
+        }));
-        )}
+    }, [sections]);
 
-        <ScrollView
+    const renderItem = useCallback(
-          style={styles.streamsContent}
+      ({ item, index }: { item: Stream; index: number }) => (
-          contentContainerStyle={[
-            styles.streamsContainer,
-            { paddingBottom: insets.bottom + 100 },
-          ]}
-          showsVerticalScrollIndicator={false}
-          bounces={true}
-          overScrollMode="never"
-          {...(Platform.OS === 'ios' && {
-            removeClippedSubviews: false,
-            scrollEventThrottle: 16,
-          })}
-        >
-          {sections.filter(Boolean).map((section, sectionIndex) => (
-            <View key={section!.addonId || sectionIndex}>
-              {renderSectionHeader({ section: section! })}
-
-              {section!.data && section!.data.length > 0 ? (
-                <FlatList
-                  data={section!.data}
-                  keyExtractor={(item, index) => {
-                    if (item && item.url) {
-                      return `${item.url}-${sectionIndex}-${index}`;
-                    }
-                    return `empty-${sectionIndex}-${index}`;
-                  }}
-                  renderItem={({ item, index }) => (
-                    <View>
         <StreamCard
           stream={item}
           onPress={() => handleStreamPress(item)}
@@ -161,32 +133,68 @@ const StreamsList = memo(
           parentId={id}
           parentImdbId={imdbId}
         />
-                    </View>
+      ),
-                  )}
+      [handleStreamPress, currentTheme, settings.showScraperLogos, scraperLogos, openAlert, metadata, type, currentEpisode, episodeImage, streams, id, imdbId]
-                  scrollEnabled={false}
+    );
-                  initialNumToRender={6}
-                  maxToRenderPerBatch={2}
-                  windowSize={3}
-                  removeClippedSubviews={true}
-                  showsVerticalScrollIndicator={false}
-                  getItemLayout={(data, index) => ({
-                    length: 78,
-                    offset: 78 * index,
-                    index,
-                  })}
-                />
-              ) : null}
-            </View>
-          ))}
 
-          {/* Footer Loading */}
+    const keyExtractor = useCallback((item: Stream, index: number) => {
-          {(loadingStreams || loadingEpisodeStreams) && hasStremioStreamProviders && (
+      if (item && item.url) {
+        return `${item.url}-${index}`;
+      }
+      return `empty-${index}`;
+    }, []);
+
+    const ListHeaderComponent = useMemo(() => {
+      if (!isAutoplayWaiting || autoplayTriggered) return null;
+      return (
+        <View style={styles.autoplayOverlay}>
+          <View style={styles.autoplayIndicator}>
+            <ActivityIndicator size="small" color={colors.primary} />
+            <Text style={styles.autoplayText}>Starting best stream...</Text>
+          </View>
+        </View>
+      );
+    }, [isAutoplayWaiting, autoplayTriggered, styles, colors.primary]);
+
+    const ListFooterComponent = useMemo(() => {
+      if (!(loadingStreams || loadingEpisodeStreams) || !hasStremioStreamProviders) return null;
+      return (
         <View style={styles.footerLoading}>
           <ActivityIndicator size="small" color={colors.primary} />
           <Text style={styles.footerLoadingText}>Loading more sources...</Text>
         </View>
-          )}
+      );
-        </ScrollView>
+    }, [loadingStreams, loadingEpisodeStreams, hasStremioStreamProviders, styles, colors.primary]);
+
+    const getItemLayout = useCallback((data: any, index: number) => ({
+      length: 78,
+      offset: 78 * index,
+      index,
+    }), []);
+
+    return (
+      <View collapsable={false} style={{ flex: 1 }}>
+        <SectionList
+          sections={sectionListData}
+          keyExtractor={keyExtractor}
+          renderItem={renderItem}
+          renderSectionHeader={renderSectionHeader}
+          ListHeaderComponent={ListHeaderComponent}
+          ListFooterComponent={ListFooterComponent}
+          stickySectionHeadersEnabled={false}
+          contentContainerStyle={[
+            styles.streamsContainer,
+            { paddingBottom: insets.bottom + 100 },
+          ]}
+          style={styles.streamsContent}
+          showsVerticalScrollIndicator={false}
+          initialNumToRender={5}
+          maxToRenderPerBatch={3}
+          updateCellsBatchingPeriod={100}
+          windowSize={3}
+          removeClippedSubviews={true}
+          getItemLayout={getItemLayout}
+        />
       </View>
     );
   }