From 809778421823e3d225d76e920d27374e686344b3 Mon Sep 17 00:00:00 2001
From: Saif Shaikh <saifshaikh1805@gmail.com>
Date: Fri, 16 Jan 2026 05:30:31 -0800
Subject: [PATCH] add: show buffer track

---
 .../player/controls/PlayerControls.tsx        | 78 ++++++++++++-------
 1 file changed, 51 insertions(+), 27 deletions(-)

diff --git a/src/components/player/controls/PlayerControls.tsx b/src/components/player/controls/PlayerControls.tsx
index 16bb7a3be..ce24b72f0 100644
--- a/src/components/player/controls/PlayerControls.tsx
+++ b/src/components/player/controls/PlayerControls.tsx
@@ -281,35 +281,59 @@ export const PlayerControls: React.FC<PlayerControlsProps> = ({
     >
       {/* Progress slider with native iOS slider */}
       <View style={styles.sliderContainer}>
-        <Slider
+        <View
           style={{
-            width: '100%',
             height: 40,
-            marginHorizontal: 0,
-          }}
-          minimumValue={0}
-          maximumValue={duration || 1}
-
-          value={previewTime}
-
-          onValueChange={(v) => setPreviewTime(v)}
-
-          onSlidingStart={() => {
-            isSlidingRef.current = true;
-            onSlidingStart();
-          }}
-
-          onSlidingComplete={(v) => {
-            isSlidingRef.current = false;
-            setPreviewTime(v);
-            onSlidingComplete(v);
-          }}
-
-          minimumTrackTintColor={currentTheme.colors.primary}
-          maximumTrackTintColor={currentTheme.colors.mediumEmphasis}
-          thumbTintColor={Platform.OS === 'android' ? currentTheme.colors.white : undefined}
-          tapToSeek={Platform.OS === 'ios'}
-        />
+            justifyContent: 'center',
+          }}>
+          {/* Non-interactive slider to only show the buffer track */}
+          <Slider
+            style={{
+              position: 'absolute',
+              width: '100%',
+              height: 40,
+            }}
+            step={1}
+            minimumValue={0}
+            maximumValue={duration || 1}
+            value={Math.min(buffered, duration || 1)}
+            minimumTrackTintColor={currentTheme.colors.highEmphasis}
+            maximumTrackTintColor={currentTheme.colors.mediumEmphasis}
+            thumbTintColor="transparent"
+            pointerEvents='none'
+          />
+          {/* Video seek & progress slider */}
+          <Slider
+            style={{
+              width: '100%',
+              height: 40,
+              marginHorizontal: 0,
+            }}
+            step={1}
+            minimumValue={0}
+            maximumValue={duration || 1}
+
+            value={previewTime}
+
+            onValueChange={(v) => setPreviewTime(v)}
+
+            onSlidingStart={() => {
+              isSlidingRef.current = true;
+              onSlidingStart();
+            }}
+
+            onSlidingComplete={(v) => {
+              isSlidingRef.current = false;
+              setPreviewTime(v);
+              onSlidingComplete(v);
+            }}
+
+            minimumTrackTintColor={currentTheme.colors.primary}
+            maximumTrackTintColor='transparent'
+            thumbTintColor={Platform.OS === 'android' ? currentTheme.colors.white : undefined}
+            tapToSeek={Platform.OS === 'ios'}
+          />
+        </View>
         <View style={[styles.timeDisplay, { paddingHorizontal: 14 }]}>
           <View style={styles.timeContainer}>
             <Text style={styles.duration}>{formatTime(previewTime)}</Text>