Creepso/NuvioStreaming
1
0
Fork 0
mirror of https://github.com/tapframe/NuvioStreaming.git synced 2026-01-11 20:10:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

floating header logo fetch fix

Browse source
This commit is contained in:
tapframe 2025-10-17 23:41:27 +05:30
parent 1535ef9aac
commit fd5861026d
3 changed files with 23 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/metadata/FloatingHeader.tsx
View file

@ -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);
}}
/>

4
src/components/metadata/HeroSection.tsx
View file

@ -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);

7
src/screens/MetadataScreen.tsx
View file

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