From fd5861026d9088d7be12a2acb2d04d0fa924c954 Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Fri, 17 Oct 2025 23:41:27 +0530
Subject: [PATCH] floating header logo fetch fix

---
 src/components/metadata/FloatingHeader.tsx | 24 ++++++++++++----------
 src/components/metadata/HeroSection.tsx    |  4 ++++
 src/screens/MetadataScreen.tsx             |  7 ++++++-
 3 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/metadata/FloatingHeader.tsx b/src/components/metadata/FloatingHeader.tsx
index fd3a8ac0d..23193eb6f 100644
--- a/src/components/metadata/FloatingHeader.tsx
+++ b/src/components/metadata/FloatingHeader.tsx
@@ -6,6 +6,7 @@ import {
   TouchableOpacity,
   Platform,
   Dimensions,
+  Image,
 } from 'react-native';
 import { BlurView as ExpoBlurView } from 'expo-blur';
 import { MaterialIcons, Feather } from '@expo/vector-icons';
@@ -24,7 +25,6 @@ if (Platform.OS === 'ios') {
     liquidGlassAvailable = false;
   }
 }
-import FastImage from '@d11/react-native-fast-image';
 import Animated, {
   useAnimatedStyle,
   interpolate,
@@ -49,6 +49,7 @@ interface FloatingHeaderProps {
   headerElementsOpacity: SharedValue<number>;
   safeAreaTop: number;
   setLogoLoadError: (error: boolean) => void;
+  stableLogoUri?: string | null;
 }
 
 const FloatingHeader: React.FC<FloatingHeaderProps> = ({
@@ -62,6 +63,7 @@ const FloatingHeader: React.FC<FloatingHeaderProps> = ({
   headerElementsOpacity,
   safeAreaTop,
   setLogoLoadError,
+  stableLogoUri,
 }) => {
   const { currentTheme } = useTheme();
   const [isHeaderInteractive, setIsHeaderInteractive] = React.useState(false);
@@ -111,13 +113,13 @@ const FloatingHeader: React.FC<FloatingHeaderProps> = ({
               </TouchableOpacity>
 
               <View style={styles.headerTitleContainer}>
-                {metadata.logo && !logoLoadError ? (
-                  <FastImage
-                    source={{ uri: metadata.logo }}
+                {(stableLogoUri || metadata.logo) && !logoLoadError ? (
+                  <Image
+                    source={{ uri: stableLogoUri || metadata.logo }}
                     style={styles.floatingHeaderLogo}
-                    resizeMode={FastImage.resizeMode.contain}
+                    resizeMode="contain"
                     onError={() => {
-                      logger.warn(`[FloatingHeader] Logo failed to load: ${metadata.logo}`);
+                      logger.warn(`[FloatingHeader] Logo failed to load: ${stableLogoUri || metadata.logo}`);
                       setLogoLoadError(true);
                     }}
                   />
@@ -155,13 +157,13 @@ const FloatingHeader: React.FC<FloatingHeaderProps> = ({
               </TouchableOpacity>
 
               <View style={styles.headerTitleContainer}>
-                {metadata.logo && !logoLoadError ? (
-                  <FastImage
-                    source={{ uri: metadata.logo }}
+                {(stableLogoUri || metadata.logo) && !logoLoadError ? (
+                  <Image
+                    source={{ uri: stableLogoUri || metadata.logo }}
                     style={styles.floatingHeaderLogo}
-                    resizeMode={FastImage.resizeMode.contain}
+                    resizeMode="contain"
                     onError={() => {
-                      logger.warn(`[FloatingHeader] Logo failed to load: ${metadata.logo}`);
+                      logger.warn(`[FloatingHeader] Logo failed to load: ${stableLogoUri || metadata.logo}`);
                       setLogoLoadError(true);
                     }}
                   />
diff --git a/src/components/metadata/HeroSection.tsx b/src/components/metadata/HeroSection.tsx
index 470c29e34..64fef14c5 100644
--- a/src/components/metadata/HeroSection.tsx
+++ b/src/components/metadata/HeroSection.tsx
@@ -83,6 +83,7 @@ interface HeroSectionProps {
     traktSynced?: boolean;
     traktProgress?: number;
   } | null;
+  onStableLogoUriChange?: (logoUri: string | null) => void;
   type: 'movie' | 'series';
   getEpisodeDetails: (episodeId: string) => { seasonNumber: string; episodeNumber: string; episodeName: string } | null;
   handleShowStreams: () => void;
@@ -777,6 +778,7 @@ const HeroSection: React.FC<HeroSectionProps> = memo(({
   buttonsTranslateY,
   watchProgressOpacity,
   watchProgress,
+  onStableLogoUriChange,
   type,
   getEpisodeDetails,
   handleShowStreams,
@@ -966,12 +968,14 @@ const HeroSection: React.FC<HeroSectionProps> = memo(({
 
     if (metadata?.logo && metadata.logo !== stableLogoUri) {
       setStableLogoUri(metadata.logo);
+      onStableLogoUriChange?.(metadata.logo);
       setLogoHasLoadedSuccessfully(false); // Reset for new logo
       logoLoadOpacity.value = 0; // reset fade for new logo
       setShouldShowTextFallback(false);
     } else if (!metadata?.logo && stableLogoUri) {
       // Clear logo if metadata no longer has one
       setStableLogoUri(null);
+      onStableLogoUriChange?.(null);
       setLogoHasLoadedSuccessfully(false);
       // Start a short grace period before showing text fallback
       setShouldShowTextFallback(false);
diff --git a/src/screens/MetadataScreen.tsx b/src/screens/MetadataScreen.tsx
index a922d8cf5..40043dea9 100644
--- a/src/screens/MetadataScreen.tsx
+++ b/src/screens/MetadataScreen.tsx
@@ -211,6 +211,9 @@ const MetadataScreen: React.FC = () => {
   const watchProgressData = useWatchProgress(id, Object.keys(groupedEpisodes).length > 0 ? 'series' : type as 'movie' | 'series', episodeId, episodes);
   const assetData = useMetadataAssets(metadata, id, type, imdbId, settings, setMetadata);
   const animations = useMetadataAnimations(safeAreaTop, watchProgressData.watchProgress);
+
+  // Stable logo URI from HeroSection
+  const [stableLogoUri, setStableLogoUri] = React.useState<string | null>(null);
   
   // Extract dominant color from hero image for dynamic background
   const heroImageUri = useMemo(() => {
@@ -870,7 +873,7 @@ const MetadataScreen: React.FC = () => {
       {metadata && (
         <>
           {/* Floating Header - Optimized */}
-          <FloatingHeader 
+          <FloatingHeader
             metadata={metadata}
             logoLoadError={assetData.logoLoadError}
             handleBack={handleBack}
@@ -881,6 +884,7 @@ const MetadataScreen: React.FC = () => {
             headerElementsOpacity={animations.headerElementsOpacity}
             safeAreaTop={safeAreaTop}
             setLogoLoadError={assetData.setLogoLoadError}
+            stableLogoUri={stableLogoUri}
           />
 
           <Animated.ScrollView
@@ -908,6 +912,7 @@ const MetadataScreen: React.FC = () => {
               watchProgressOpacity={animations.watchProgressOpacity}
               watchProgressWidth={animations.watchProgressWidth}
               watchProgress={watchProgressData.watchProgress}
+              onStableLogoUriChange={setStableLogoUri}
               type={Object.keys(groupedEpisodes).length > 0 ? 'series' : type as 'movie' | 'series'}
               getEpisodeDetails={watchProgressData.getEpisodeDetails}
               handleShowStreams={handleShowStreams}