NuvioStreaming/plan.md

HomeScreen Analysis and Improvement Plan

This document outlines the analysis of the HomeScreen.tsx component and suggests potential improvements.

Analysis

Strengths:

1. Component Structure: Good use of breaking down UI into smaller, reusable components (ContentItem, DropUpMenu, SkeletonCatalog, SkeletonFeatured, ThisWeekSection, ContinueWatchingSection).
2. Performance Optimizations:
   • Uses FlatList for horizontal catalogs with optimizations (initialNumToRender, maxToRenderPerBatch, windowSize, removeClippedSubviews, getItemLayout).
   • Uses expo-image for optimized image loading, caching, and prefetching (ExpoImage.prefetch). Includes loading/error states per image.
   • Leverages useCallback to memoize event handlers and functions.
   • Uses react-native-reanimated and react-native-gesture-handler for performant animations/gestures.
   • Parallel initial data loading (Promise.all).
   • Uses AbortController to cancel stale fetch requests.
3. User Experience:
   • Skeleton loaders (SkeletonFeatured, SkeletonCatalog).
   • Pull-to-refresh (RefreshControl).
   • Interactive DropUpMenu with smooth animations and gesture dismissal.
   • Haptics feedback (Haptics.impactAsync).
   • Reactive library status updates (catalogService.subscribeToLibraryUpdates).
   • Screen focus events refresh "Continue Watching".
   • Graceful handling of empty catalog states.
4. Code Quality:
   • Uses TypeScript with interfaces.
   • Separation of concerns via services (catalogService, tmdbService, storageService, logger).
   • Basic error handling and logging.

Areas for Potential Improvement & Suggestions

1. Component Complexity (HomeScreen):

   • The main component is large and manages significant state/effects.
   • Suggestion: Extract data fetching and related state into custom hooks (e.g., useFeaturedContent, useHomeCatalogs) to simplify HomeScreen.
   • Example Hook Structure:

     // hooks/useHomeCatalogs.ts
     function useHomeCatalogs() {
       const [catalogs, setCatalogs] = useState<CatalogContent[]>([]);
       const [loading, setLoading] = useState(true);
       // ... fetch logic from loadCatalogs ...
       return { catalogs, loading, reloadCatalogs: loadCatalogs }; 
     }
     

2. Outer FlatList for Catalogs:

   • Using FlatList with scrollEnabled={false} disables its virtualization benefits.
   • Suggestion: If the number of catalogs can grow large, this might impact performance. For a small, fixed number of catalogs, rendering directly in the ScrollView using .map() might be simpler. If virtualization is needed for many catalogs, revisit the structure (potentially enabling scroll on the outer FlatList, which can be complex with nested scrolling).

3. Hardcoded Values:

   • GENRE_MAP: TMDB genres can change.
   • Suggestion: Fetch genre lists from the TMDB API (/genre/movie/list, /genre/tv/list) periodically and cache them (e.g., in context or async storage).
   • SAMPLE_CATEGORIES: Ensure replacement if dynamic categories are needed.

4. Image Preloading Strategy:

   • preloadImages currently tries to preload posters, banners, and logos for all fetched featured items.
   • Suggestion: If the trending list is long, this is bandwidth-intensive. Consider preloading only for the initially selected featuredContent or the first few items in the allFeaturedContent array to optimize resource usage.

5. Error Handling & Retries:

   • The maxRetries variable is defined but not used.
   • Suggestion: Implement retry logic (e.g., with exponential backoff) in catch blocks for loadCatalogs and loadFeaturedContent, or remove the unused variable. Enhance user feedback on errors beyond console logs (e.g., Toast messages).

6. Type Safety (StyleSheet.create<any>):

   • Styles use StyleSheet.create<any>.
   • Suggestion: Define a specific interface for styles using ViewStyle, TextStyle, ImageStyle from react-native for better type safety and autocompletion.

     import { ViewStyle, TextStyle, ImageStyle } from 'react-native';
     
     interface Styles {
       container: ViewStyle;
       // ... other styles
     }
     
     const styles = StyleSheet.create<Styles>({ ... });
     

7. Featured Content Interaction:

   • The "Info" button fetches stremioId asynchronously.
   • Suggestion: Add a loading indicator (e.g., disable button + ActivityIndicator) during the getStremioId call for better UX feedback.

8. Featured Content Rotation:

   • Auto-rotation is fixed at 15 seconds.
   • Suggestion (Minor UX): Consider adding visual indicators (e.g., dots) for featured items, allow manual swiping, and pause the auto-rotation timer on user interaction.