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:*
        ```typescript
        // 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.
        ```typescript
        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.