Add progress thumb to PlayerControls and increase touch area height for better usability

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}>

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',