From 6004d9d3d156d628751d443f167cbffd0b4f073c Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Tue, 8 Jul 2025 16:32:21 +0530
Subject: [PATCH] Add progress thumb to PlayerControls and increase touch area
 height for better usability

---
 .../player/controls/PlayerControls.tsx          | 13 +++++++++++++
 src/components/player/utils/playerStyles.ts     | 17 ++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/components/player/controls/PlayerControls.tsx b/src/components/player/controls/PlayerControls.tsx
index 12c26d0..6b76bf5 100644
--- a/src/components/player/controls/PlayerControls.tsx
+++ b/src/components/player/controls/PlayerControls.tsx
@@ -115,6 +115,19 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
                 ]} 
               />
             </View>
+            
+            {/* Progress Thumb - Moved outside the progressBarContainer */}
+            <Animated.View 
+              style={[
+                styles.progressThumb,
+                { 
+                  left: progressAnim.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: ['0%', '100%']
+                  })
+                }
+              ]} 
+            />
           </TouchableOpacity>
         </View>
         <View style={styles.timeDisplay}>
diff --git a/src/components/player/utils/playerStyles.ts b/src/components/player/utils/playerStyles.ts
index 7226408..b3f1ead 100644
--- a/src/components/player/utils/playerStyles.ts
+++ b/src/components/player/utils/playerStyles.ts
@@ -134,7 +134,7 @@ export const styles = StyleSheet.create({
     zIndex: 1000,
   },
   progressTouchArea: {
-    height: 30,
+    height: 40, // Increased from 30 to give more space for the thumb
     justifyContent: 'center',
     width: '100%',
   },
@@ -161,6 +161,21 @@ export const styles = StyleSheet.create({
     backgroundColor: '#E50914',
     height: '100%',
   },
+  progressThumb: {
+    position: 'absolute',
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    backgroundColor: '#E50914',
+    top: -6, // Position to center on the progress bar
+    marginLeft: -8, // Center the thumb horizontally
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 3,
+    elevation: 4,
+    zIndex: 10, // Ensure it appears above the progress bar
+  },
   timeDisplay: {
     flexDirection: 'row',
     justifyContent: 'space-between',