From ba72d8bca204ce78c3a16d84ee11d7202c85afaa Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Wed, 5 Nov 2025 18:48:38 +0530
Subject: [PATCH] player optimization

---
 App.tsx                                   | 4 +++-
 src/components/home/HeroCarousel.tsx      | 4 ++--
 src/components/metadata/SeriesContent.tsx | 7 +++++--
 src/navigation/AppNavigator.tsx           | 2 ++
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/App.tsx b/App.tsx
index 0b52a801..bd297656 100644
--- a/App.tsx
+++ b/App.tsx
@@ -17,7 +17,7 @@ import { NavigationContainer } from '@react-navigation/native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { StatusBar } from 'expo-status-bar';
 import { Provider as PaperProvider } from 'react-native-paper';
-import { enableScreens } from 'react-native-screens';
+import { enableScreens, enableFreeze } from 'react-native-screens';
 import AppNavigator, { 
   CustomNavigationDarkTheme,
   CustomDarkTheme
@@ -71,6 +71,8 @@ LogBox.ignoreLogs([
 
 // This fixes many navigation layout issues by using native screen containers
 enableScreens(true);
+// Freeze non-focused screens to stop background re-renders
+enableFreeze(true);
 
 // Inner app component that uses the theme context
 const ThemedApp = () => {
diff --git a/src/components/home/HeroCarousel.tsx b/src/components/home/HeroCarousel.tsx
index ba09cf2f..773b6a13 100644
--- a/src/components/home/HeroCarousel.tsx
+++ b/src/components/home/HeroCarousel.tsx
@@ -616,7 +616,7 @@ const CarouselCard: React.FC<CarouselCardProps> = memo(({ item, colors, logoFail
           }
         ] as StyleProp<ViewStyle>}>
           {/* FRONT FACE */}
-          <Animated.View style={[styles.flipFace as any, styles.frontFace as any, frontFlipStyle]}>
+          <Animated.View style={[styles.flipFace as any, styles.frontFace as any, frontFlipStyle]} pointerEvents={flipped ? 'none' : 'auto'}>
             <TouchableOpacity activeOpacity={0.9} onPress={onPressInfo} style={StyleSheet.absoluteFillObject as any}>
               <View style={styles.bannerContainer as ViewStyle}>
                 {!bannerLoaded && (
@@ -681,7 +681,7 @@ const CarouselCard: React.FC<CarouselCardProps> = memo(({ item, colors, logoFail
           </Animated.View>
 
           {/* BACK FACE */}
-          <Animated.View style={[styles.flipFace as any, styles.backFace as any, backFlipStyle]}>
+          <Animated.View style={[styles.flipFace as any, styles.backFace as any, backFlipStyle]} pointerEvents={flipped ? 'auto' : 'none'}>
             <View style={styles.bannerContainer as ViewStyle}>
               <FastImage
                 source={{ uri: item.banner || item.poster, priority: FastImage.priority.low, cache: FastImage.cacheControl.immutable }}
diff --git a/src/components/metadata/SeriesContent.tsx b/src/components/metadata/SeriesContent.tsx
index 2b266b9b..bd09eee3 100644
--- a/src/components/metadata/SeriesContent.tsx
+++ b/src/components/metadata/SeriesContent.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
+import React, { useEffect, useState, useRef, useCallback, useMemo, memo } from 'react';
 import { View, Text, StyleSheet, ScrollView, TouchableOpacity, ActivityIndicator, Dimensions, useWindowDimensions, useColorScheme, FlatList } from 'react-native';
 import FastImage from '@d11/react-native-fast-image';
 import { MaterialIcons } from '@expo/vector-icons';
@@ -39,7 +39,7 @@ const EPISODE_PLACEHOLDER = 'https://via.placeholder.com/500x280/1a1a1a/666666?t
 const TMDB_LOGO = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Tmdb.new.logo.svg/512px-Tmdb.new.logo.svg.png?20200406190906';
 const IMDb_LOGO = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/IMDB_Logo_2016.svg/575px-IMDB_Logo_2016.svg.png';
 
-export const SeriesContent: React.FC<SeriesContentProps> = ({
+const SeriesContentComponent: React.FC<SeriesContentProps> = ({
   episodes,
   selectedSeason,
   loadingSeasons,
@@ -1429,6 +1429,9 @@ export const SeriesContent: React.FC<SeriesContentProps> = ({
   );
 };
 
+// Export memoized component to reduce unnecessary re-renders when focused
+export const SeriesContent = memo(SeriesContentComponent);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx
index 40592854..7dcd7632 100644
--- a/src/navigation/AppNavigator.tsx
+++ b/src/navigation/AppNavigator.tsx
@@ -1095,6 +1095,8 @@ const InnerNavigator = ({ initialRouteName }: { initialRouteName?: keyof RootSta
             initialRouteName={initialRouteName || 'MainTabs'}
             screenOptions={{
               headerShown: false,
+              // Freeze non-focused stack screens to prevent background re-renders (e.g., SeriesContent behind player)
+              freezeOnBlur: true,
               // Use slide_from_right for consistency and smooth transitions
               animation: Platform.OS === 'android' ? 'slide_from_right' : 'slide_from_right',
               animationDuration: Platform.OS === 'android' ? 250 : 300,