player optimization

This commit is contained in:
tapframe 2025-11-05 18:48:38 +05:30
parent 19420e901e
commit ba72d8bca2
4 changed files with 12 additions and 5 deletions

View file

@ -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 = () => {

View file

@ -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 }}

View file

@ -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,

View file

@ -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,