Merge pull request #2 from sheeshcake/fix/downloads-feature

Fix/downloads feature

Author: sheeshcake

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

App.tsx

@@ -1,15 +1,29 @@
 import React from 'react';
-import {StatusBar} from 'react-native';
+import {StatusBar, View} from 'react-native';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
-import {AppProvider} from './src/context';
+import {AppProvider, VideoPlayerProvider, useVideoPlayer} from './src/context';
 import {AppNavigator} from './src/navigation';
+import {VideoPlayerSheet} from './src/components/VideoPlayerSheet';
+
+const AppContent: React.FC = () => {
+  const {playerState} = useVideoPlayer();
+
+  return (
+    <View style={{flex: 1}}>
+      <AppNavigator />
+      {playerState.content && <VideoPlayerSheet />}
+    </View>
+  );
+};
 
 function App(): React.JSX.Element {
   return (
     <GestureHandlerRootView style={{flex: 1}}>
       <AppProvider>
-        <StatusBar barStyle="light-content" backgroundColor="#000000" />
-        <AppNavigator />
+        <VideoPlayerProvider>
+          <StatusBar barStyle="light-content" backgroundColor="#000000" />
+          <AppContent />
+        </VideoPlayerProvider>
       </AppProvider>
     </GestureHandlerRootView>
   );

YOUTUBE_STYLE_IMPLEMENTATION.md

@@ -0,0 +1,240 @@
+# YouTube-Style Video Player Implementation
+
+## Overview
+Successfully implemented a YouTube-style draggable video player with mini player functionality, exactly matching the gesture behavior from the reference repository (https://github.com/guneyural/youtube-clone).
+
+## Key Features
+
+### 1. Pan Gesture Video Player
+- **Drag Down**: Minimizes video to mini player at bottom-right
+- **Drag Up**: Expands mini player back to full screen
+- **Swipe Down Further**: Closes player completely
+- **Tap Mini Player**: Expands to full screen
+
+### 2. Smooth Animations
+All animations use spring physics for natural feel:
+- Video height: 33% screen → 150px → 60px (mini)
+- Video width: 100% → 30%
+- Mini player slides in from right
+- Content opacity fades during drag
+- Position interpolates smoothly
+
+### 3. Mini Player Features
+- Muted video thumbnail continues playing
+- Shows content title (truncated if long)
+- Displays episode info for TV shows (S1 E1)
+- Play/pause button
+- Close button
+- Tap anywhere to expand
+
+### 4. Gesture Thresholds
+- Drag > 100px: Minimizes to mini player
+- Drag < 100px: Snaps back to full screen
+- Drag > screen height - 80px: Closes completely
+
+### 5. Detail Screen Content
+- Full video player with controls
+- Content title and like button
+- Overview/description
+- Episodes list (for TV shows)
+- Similar content recommendations
+- Video scraping integration
+
+### 6. Back Button Handling
+- When expanded: Minimizes to mini player
+- When minimized: Handled by navigation
+
+## Architecture
+
+### New Files Created
+
+#### 1. `src/context/VideoPlayerContext.tsx`
+Global state management for video player:
+```typescript
+interface VideoPlayerState {
+  content: Movie | TVShow | null;
+  videoUrl: string;
+  isPlaying: boolean;
+  currentTime: number;
+  duration: number;
+  selectedSeason?: number;
+  selectedEpisode?: number;
+}
+```
+
+**Methods:**
+- `openDetailSheet(content)` - Opens player with content
+- `closeDetailSheet()` - Closes player and clears state
+- `setVideoUrl(url)` - Updates video URL
+- `setPlaybackState(isPlaying, currentTime, duration)` - Syncs playback
+- `setEpisodeInfo(season, episode)` - Sets episode info
+
+#### 2. `src/components/VideoPlayerSheet/VideoPlayerSheet.tsx`
+Main video player component with gestures:
+- Pan gesture handler for drag interactions
+- Animated interpolations for smooth transitions
+- Video player integration
+- Content details display
+- Episode selection
+- Similar content recommendations
+
+#### 3. `src/components/VideoPlayerSheet/index.tsx`
+Export file for the component
+
+### Modified Files
+
+#### 1. `App.tsx`
+- Added `VideoPlayerProvider` wrapper
+- Added `AppContent` component to access video player context
+- Conditionally renders `VideoPlayerSheet` when content is selected
+
+#### 2. `src/context/index.ts`
+- Exported `VideoPlayerProvider` and `useVideoPlayer`
+
+#### 3. `src/screens/HomeScreen.tsx`
+- Uses `openDetailSheet()` instead of `navigation.navigate('Detail')`
+- Removed Detail screen navigation
+
+#### 4. `src/screens/SearchScreen.tsx`
+- Uses `openDetailSheet()` instead of `navigation.navigate('Detail')`
+- Removed Detail screen navigation
+
+#### 5. `src/navigation/AppNavigator.tsx`
+- Removed Detail screen from navigation stack
+- Detail content now opens via overlay instead of navigation
+
+#### 6. `src/types/navigation.ts`
+- Removed `Detail` route from `RootStackParamList`
+
+## Technical Implementation
+
+### Gesture Handling
+Uses `react-native-gesture-handler` Gesture API:
+```typescript
+const panGesture = Gesture.Pan()
+  .onStart(() => {
+    context.value = {y: translationY.value};
+  })
+  .onUpdate(event => {
+    translationY.value = event.translationY + context.value.y;
+    translationY.value = Math.max(0, translationY.value);
+  })
+  .onEnd(() => {
+    // Snap to positions based on threshold
+  });
+```
+
+### Animation Interpolations
+Uses `react-native-reanimated` for 60fps animations:
+
+**Video Height:**
+```typescript
+interpolate(
+  translationY,
+  [0, SCREEN_HEIGHT - 300, SCREEN_HEIGHT - 80],
+  [VIDEO_HEIGHT, 150, MINI_PLAYER_HEIGHT],
+  Extrapolation.CLAMP
+)
+```
+
+**Video Width:**
+```typescript
+interpolate(
+  translationY,
+  [0, 500, SCREEN_HEIGHT - 80],
+  [100, 100, 30], // percentages
+  Extrapolation.CLAMP
+)
+```
+
+**Mini Player Position:**
+```typescript
+interpolate(
+  translationY,
+  [0, 500, SCREEN_HEIGHT - 80],
+  [500, 500, 125], // translateX values
+  Extrapolation.CLAMP
+)
+```
+
+**Opacity:**
+```typescript
+interpolate(
+  translationY,
+  [0, 350, 600],
+  [1, 0.5, 0],
+  Extrapolation.CLAMP
+)
+```
+
+### State Synchronization
+- Video playback state syncs between full player and mini player
+- Episode info persists during minimize/maximize
+- Video URL maintained across transitions
+- Playback continues seamlessly
+
+## Usage
+
+### Opening Content
+```typescript
+const {openDetailSheet} = useVideoPlayer();
+
+// On content card press
+openDetailSheet(movieOrTVShow);
+```
+
+### User Interactions
+1. **View Content**: Tap any movie/TV show card
+2. **Minimize**: Drag video player down
+3. **Expand**: Drag mini player up or tap it
+4. **Close**: Swipe mini player down or press close button
+5. **Browse**: Continue browsing with mini player visible
+6. **Select Episode**: Tap episode to play (TV shows)
+
+## Benefits
+
+1. **Better UX**: Browse while video plays
+2. **Familiar Pattern**: YouTube-like interaction
+3. **Smooth Performance**: 60fps animations
+4. **Gesture-Based**: Intuitive swipe controls
+5. **Seamless Playback**: Video continues during transitions
+6. **Episode Support**: Easy episode switching for TV shows
+7. **Content Discovery**: Similar content recommendations
+
+## Dependencies Used
+
+- `react-native-gesture-handler`: Gesture recognition
+- `react-native-reanimated`: High-performance animations
+- `react-native-video`: Video playback
+- `@react-native-vector-icons/material-icons`: Icons
+
+## Testing
+
+To test the implementation:
+1. Run the app
+2. Tap any content card from home or search
+3. Video player sheet slides up
+4. Drag down to minimize
+5. Drag up or tap to expand
+6. Swipe down far to close
+7. Try with TV shows to test episode selection
+
+## Notes
+
+- Mini player shows muted video thumbnail
+- Full player has audio and controls
+- Back button minimizes when expanded
+- Video scraping happens automatically
+- Similar content loads in background
+- Episode list shows first 5 episodes
+
+## Future Enhancements
+
+Possible improvements:
+- Full episode list with seasons selector
+- Picture-in-picture mode
+- Playlist/queue functionality
+- Swipe between episodes
+- Download progress in mini player
+- Cast button integration
+- Subtitle selector in mini player

android/app/build.gradle

@@ -83,7 +83,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
-        versionName "1.0.1"
+        versionName "1.0.2"
     }
     signingConfigs {
         debug {

android/app/src/main/AndroidManifest.xml

@@ -1,6 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 
     <application
       android:name=".MainApplication"

android/app/src/main/java/com/flickv4/MainApplication.kt

@@ -6,6 +6,7 @@ import com.facebook.react.ReactApplication
 import com.facebook.react.ReactHost
 import com.facebook.react.ReactNativeApplicationEntryPoint.loadReactNative
 import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
+// import com.eko.RNBackgroundDownloaderTurboPackage;
 
 class MainApplication : Application(), ReactApplication {
 
@@ -16,6 +17,7 @@ class MainApplication : Application(), ReactApplication {
         PackageList(this).packages.apply {
           // Packages that cannot be autolinked yet can be added manually here, for example:
           // add(MyReactNativePackage())
+          // add(RNBackgroundDownloaderTurboPackage())
         },
     )
   }

package-lock.json

@@ -34,6 +34,7 @@
     "react-native-linear-gradient": "^2.8.3",
     "react-native-orientation-locker": "^1.7.0",
     "react-native-reanimated": "^4.1.5",
+    "react-native-reanimated-carousel": "^4.0.3",
     "react-native-safe-area-context": "^5.5.2",
     "react-native-screens": "^4.18.0",
     "react-native-svg": "^15.14.0",

package.json

@@ -46,7 +46,6 @@ const ContinueWatchingCard: React.FC<ContinueWatchingCardProps> = ({
 
   const cardDimensions = getCardDimensions();
 
-  // Fetch content details
   useEffect(() => {
     const fetchContentDetails = async () => {
       try {

src/components/ContinueWatchingCard.tsx

@@ -165,7 +165,7 @@ export const DownloadButton: React.FC<DownloadButtonProps> = ({
 
   const contentType = 'title' in content ? 'movie' : 'tv';
   const isDownloaded = downloadService.isContentDownloaded(
-    content.id,
+    content?.id,
     contentType,
     season,
     episode
@@ -691,19 +691,18 @@ export const DownloadsList: React.FC<DownloadsListProps> = ({
                 Season {download.season}, Episode {download.episode}
               </Text>
             )}
-
             <View style={styles.downloadMeta}>
               <View style={[styles.statusBadge, { backgroundColor: getStatusColor(download.status) }]}>
                 <Text style={styles.statusText}>{getStatusText(download.status)}</Text>
               </View>
 
               <Text style={styles.quality}>{download.quality}</Text>
 
-              {download.totalSize && (
+              {/* {download.totalSize && (
                 <Text style={styles.fileSize}>
                   {formatFileSize(download.totalSize)}
                 </Text>
-              )}
+              )} */}
             </View>
 
             {download.status === DownloadStatus.DOWNLOADING && (