mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-01-11 20:10:25 +00:00
push
This commit is contained in:
tapframe
parent
383ac95e90
commit
714226b6a5
1 changed files with 0 additions and 237 deletions
|
|
@ -1,237 +0,0 @@
|
|||
# FastImage Broken Images Fix
|
||||
|
||||
## Issue Description
|
||||
After migrating to FastImage, posters were showing broken image icons when:
|
||||
1. Navigating away from HomeScreen and returning
|
||||
2. Going to the player and coming back
|
||||
3. Any unmount/remount cycle of the HomeScreen
|
||||
|
||||
## Root Cause
|
||||
The HomeScreen was aggressively clearing FastImage's memory cache in two places:
|
||||
1. **On component unmount** - Clearing cache when leaving HomeScreen
|
||||
2. **Before player navigation** - Clearing cache before opening the video player
|
||||
|
||||
This defeated the purpose of having a cache and caused broken images because:
|
||||
- FastImage's disk cache requires the memory cache to load images efficiently
|
||||
- Clearing memory cache on every navigation forces re-download from network
|
||||
- The images weren't broken, just not yet reloaded from disk/network
|
||||
|
||||
## Solution Applied
|
||||
|
||||
### ✅ 1. Removed Aggressive Cache Clearing
|
||||
**Location**: `HomeScreen.tsx` unmount cleanup
|
||||
|
||||
**Before**:
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
// Clear image cache when component unmounts to free memory
|
||||
try {
|
||||
FastImage.clearMemoryCache();
|
||||
} catch (error) {
|
||||
console.warn('Failed to clear image cache:', error);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
```
|
||||
|
||||
**After**:
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
// Don't clear FastImage cache on unmount - it causes broken images on remount
|
||||
// FastImage's native libraries (SDWebImage/Glide) handle memory automatically
|
||||
// Cache clearing only happens on app background (see AppState handler above)
|
||||
};
|
||||
}, []);
|
||||
```
|
||||
|
||||
### ✅ 2. Removed Player Navigation Cache Clearing
|
||||
**Location**: `HomeScreen.tsx` handlePlayStream
|
||||
|
||||
**Before**:
|
||||
```typescript
|
||||
const handlePlayStream = async (stream: Stream) => {
|
||||
try {
|
||||
// Clear image cache to reduce memory pressure before orientation change
|
||||
await FastImage.clearMemoryCache();
|
||||
// ... navigation code
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
**After**:
|
||||
```typescript
|
||||
const handlePlayStream = async (stream: Stream) => {
|
||||
try {
|
||||
// Don't clear cache before player - causes broken images on return
|
||||
// FastImage's native libraries handle memory efficiently
|
||||
// ... navigation code
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### ✅ 3. Added Smart Background Cache Management
|
||||
**Location**: `HomeScreen.tsx` new AppState handler
|
||||
|
||||
**Added**:
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
const subscription = AppState.addEventListener('change', nextAppState => {
|
||||
if (nextAppState === 'background') {
|
||||
// Only clear memory cache when app goes to background
|
||||
// This frees memory while keeping disk cache intact for fast restoration
|
||||
try {
|
||||
FastImage.clearMemoryCache();
|
||||
if (__DEV__) console.log('[HomeScreen] Cleared memory cache on background');
|
||||
} catch (error) {
|
||||
if (__DEV__) console.warn('[HomeScreen] Failed to clear memory cache:', error);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return () => {
|
||||
subscription?.remove();
|
||||
};
|
||||
}, []);
|
||||
```
|
||||
|
||||
## How FastImage Caching Works
|
||||
|
||||
### Three-Tier Cache System
|
||||
1. **Memory Cache** (fastest)
|
||||
- In-RAM decoded images ready for immediate display
|
||||
- Automatically managed by SDWebImage (iOS) / Glide (Android)
|
||||
- Cleared only when system requests or app backgrounds
|
||||
|
||||
2. **Disk Cache** (fast)
|
||||
- Downloaded images stored on device
|
||||
- Persists across app launches
|
||||
- Used to restore memory cache quickly
|
||||
|
||||
3. **Network** (slowest)
|
||||
- Only used if image not in memory or disk cache
|
||||
- Requires network connection
|
||||
|
||||
### Why Not Clear Cache on Navigation?
|
||||
- **Memory cache is fast to rebuild** from disk cache (~10-50ms)
|
||||
- **Disk cache persists** - no re-download needed
|
||||
- **Native libraries are smart** - they handle memory pressure automatically
|
||||
- **User experience** - instant image display when returning to screen
|
||||
|
||||
## Best Practices for Cache Management
|
||||
|
||||
### ✅ DO:
|
||||
- Let FastImage's native libraries handle memory automatically
|
||||
- Clear memory cache only when app goes to **background**
|
||||
- Trust SDWebImage (iOS) and Glide (Android) - they're battle-tested
|
||||
- Use `cache: FastImage.cacheControl.immutable` for all images
|
||||
|
||||
### ❌ DON'T:
|
||||
- Clear cache on component unmount
|
||||
- Clear cache before navigation
|
||||
- Clear cache on every screen change
|
||||
- Manually manage memory that native libraries handle better
|
||||
|
||||
### Optional Manual Cache Clearing
|
||||
If you need to clear cache (e.g., in Settings):
|
||||
|
||||
```typescript
|
||||
// Clear memory cache only (fast, recoverable from disk)
|
||||
await FastImage.clearMemoryCache();
|
||||
|
||||
// Clear disk cache (removes downloaded images, forces re-download)
|
||||
await FastImage.clearDiskCache();
|
||||
```
|
||||
|
||||
## Testing the Fix
|
||||
|
||||
### Before Fix:
|
||||
1. ✅ Open HomeScreen - images load
|
||||
2. ❌ Navigate to Metadata screen
|
||||
3. ❌ Return to HomeScreen - broken image icons
|
||||
4. ⏳ Wait 1-2 seconds - images reload
|
||||
|
||||
### After Fix:
|
||||
1. ✅ Open HomeScreen - images load
|
||||
2. ✅ Navigate to Metadata screen
|
||||
3. ✅ Return to HomeScreen - images display instantly
|
||||
4. ✅ No broken icons, no waiting
|
||||
|
||||
### After App Backgrounding:
|
||||
1. ✅ Put app in background
|
||||
2. ✅ Memory cache cleared (frees RAM)
|
||||
3. ✅ Return to app
|
||||
4. ✅ Images restore quickly from disk cache (~50ms)
|
||||
|
||||
## Memory Management
|
||||
|
||||
FastImage's native libraries handle memory efficiently:
|
||||
|
||||
### iOS (SDWebImage)
|
||||
- Automatic memory warnings handling
|
||||
- LRU (Least Recently Used) eviction
|
||||
- Configurable cache size limits
|
||||
- Image decompression on background threads
|
||||
|
||||
### Android (Glide)
|
||||
- Automatic low memory detection
|
||||
- Smart cache trimming based on device state
|
||||
- Bitmap pooling for memory efficiency
|
||||
- Activity lifecycle awareness
|
||||
|
||||
## Performance Impact
|
||||
|
||||
### Before Fix:
|
||||
- 🐌 Image load on return: 500-2000ms (network re-download)
|
||||
- 📉 Poor UX: broken icons visible to user
|
||||
- 🔄 Unnecessary network traffic
|
||||
- 🔋 Battery drain from re-downloads
|
||||
|
||||
### After Fix:
|
||||
- ⚡ Image load on return: 10-50ms (disk cache restore)
|
||||
- 😊 Great UX: instant image display
|
||||
- 📈 Reduced network traffic
|
||||
- 🔋 Better battery life
|
||||
|
||||
## Additional Notes
|
||||
|
||||
### When Images Might Still Break
|
||||
Images will only show broken icons if:
|
||||
1. **Network failure** during initial load
|
||||
2. **Invalid image URL** provided
|
||||
3. **Server returns 404/403** for the image
|
||||
4. **Disk space full** preventing cache storage
|
||||
|
||||
These are legitimate failures, not cache clearing issues.
|
||||
|
||||
### How to Debug
|
||||
If images are still broken after this fix:
|
||||
|
||||
```typescript
|
||||
// Add to component
|
||||
useEffect(() => {
|
||||
const checkImage = async () => {
|
||||
try {
|
||||
const response = await fetch(imageUrl, { method: 'HEAD' });
|
||||
console.log('Image reachable:', response.ok);
|
||||
} catch (error) {
|
||||
console.log('Image network error:', error);
|
||||
}
|
||||
};
|
||||
checkImage();
|
||||
}, [imageUrl]);
|
||||
```
|
||||
|
||||
## Conclusion
|
||||
|
||||
The fix ensures:
|
||||
- ✅ No broken images on navigation
|
||||
- ✅ Instant image display on screen return
|
||||
- ✅ Efficient memory management
|
||||
- ✅ Better user experience
|
||||
- ✅ Reduced network usage
|
||||
- ✅ Better battery life
|
||||
|
||||
FastImage's native libraries are designed for this exact use case - trust them to handle memory efficiently rather than manually clearing cache on every navigation.
|
||||
|
||||
Loading…
Reference in a new issue