Android Implementation for Secondary Progress

Author: Utkarsh-vishnoi

.gitignore

@@ -69,3 +69,6 @@ src/dist
 # Expo
 .expo
 web-build
+
+# VS Code
+.vscode

package/android/src/main/java/com/reactnativecommunity/slider/ReactSlider.java

@@ -57,6 +57,8 @@ public class ReactSlider extends AppCompatSeekBar {
    */
   private double mValue = 0;
 
+  private double mBufferedValue = 0;
+
   private boolean isSliding = false;
 
   /** If zero it's determined automatically. */
@@ -120,6 +122,11 @@ private void disableStateListAnimatorIfNeeded() {
     updateValue();
   }
 
+  /* package */ void setBufferedValue(double value) {
+    mBufferedValue = value;
+    updateBufferedValue();
+  }
+
   /* package */ void setStep(double step) {
     mStep = step;
     updateAll();
@@ -263,6 +270,10 @@ private void updateValue() {
     setProgress((int) Math.round((mValue - mMinValue) / (mMaxValue - mMinValue) * getTotalSteps()));
   }
 
+  private void updateBufferedValue() {
+    setSecondaryProgress((int) Math.round((mBufferedValue - mMinValue) / (mMaxValue - mMinValue) * getTotalSteps()));
+  }
+
   private int getTotalSteps() {
     return (int) Math.ceil((mMaxValue - mMinValue) / getStepValue());
   }

package/android/src/main/java/com/reactnativecommunity/slider/ReactSliderManagerImpl.java

@@ -44,6 +44,10 @@ public static void setValue(ReactSlider view, double value) {
         }
     }
 
+    public static void setBufferedValue(ReactSlider view, double value) {
+            view.setBufferedValue(value);
+    }
+
     public static void setMinimumValue(ReactSlider view, double value) {
         view.setMinValue(value);
     }
@@ -116,6 +120,21 @@ public static void setMaximumTrackTintColor(ReactSlider view, Integer color) {
         }
     }
 
+    public static void setBufferedTrackTintColor(ReactSlider view, Integer color) {
+        LayerDrawable drawable = (LayerDrawable) view.getProgressDrawable().getCurrent();
+        Drawable secondaryProgress = drawable.findDrawableByLayerId(android.R.id.secondaryProgress);
+        if (color == null) {
+            secondaryProgress.clearColorFilter();
+        } else {
+            if (Build.VERSION.SDK_INT > Build.VERSION_CODES.P) {
+                secondaryProgress.setColorFilter(new PorterDuffColorFilter((int)color, PorterDuff.Mode.SRC_IN));
+            }
+            else {
+                secondaryProgress.setColorFilter(color, PorterDuff.Mode.SRC_IN);
+            }
+        }
+    }
+
     public static void setInverted(ReactSlider view, boolean inverted) {
         if (inverted) view.setScaleX(-1f);
         else view.setScaleX(1f);

package/android/src/newarch/java/com/reactnativecommunity/slider/ReactSliderManager.java

@@ -106,6 +106,12 @@ public void setValue(ReactSlider view, float value) {
     ReactSliderManagerImpl.setValue(view, value);
   }
 
+  @Override
+  @ReactProp(name = "bufferedValue", defaultFloat = 0f)
+  public void setBufferedValue(ReactSlider view, float value) {
+    ReactSliderManagerImpl.setBufferedValue(view, value);
+  }
+
   @Override
   @ReactProp(name = "minimumValue", defaultFloat = 0f)
   public void setMinimumValue(ReactSlider view, double value) {
@@ -136,6 +142,12 @@ public void setMinimumTrackTintColor(ReactSlider view, Integer color) {
     ReactSliderManagerImpl.setMinimumTrackTintColor(view, color);
   }
 
+  @Override
+  @ReactProp(name = "bufferedTrackTintColor", customType = "Color")
+  public void setBufferedTrackTintColor(ReactSlider view, Integer color) {
+    ReactSliderManagerImpl.setBufferedTrackTintColor(view, color);
+  }
+
   @Override
   @ReactProp(name = "maximumTrackTintColor", customType = "Color")
   public void setMaximumTrackTintColor(ReactSlider view, Integer color) {

package/android/src/oldarch/java/com/reactnativecommunity/slider/ReactSliderManager.java

@@ -125,6 +125,11 @@ public void setValue(ReactSlider view, float value) {
     ReactSliderManagerImpl.setValue(view, value);
   }
 
+  @ReactProp(name = "bufferedValue", defaultFloat = 0f)
+  public void setBufferedValue(ReactSlider view, float value) {
+    ReactSliderManagerImpl.setBufferedValue(view, value);
+  }
+
   @ReactProp(name = "minimumValue", defaultFloat = 0f)
   public void setMinimumValue(ReactSlider view, double value) {
     ReactSliderManagerImpl.setMinimumValue(view, value);
@@ -160,6 +165,11 @@ public void setMinimumTrackTintColor(ReactSlider view, Integer color) {
     ReactSliderManagerImpl.setMinimumTrackTintColor(view, color);
   }
 
+  @ReactProp(name = "bufferedTrackTintColor", customType = "Color")
+  public void setBufferedTrackTintColor(ReactSlider view, Integer color) {
+    ReactSliderManagerImpl.setBufferedTrackTintColor(view, color);
+  }
+
   @ReactProp(name = "thumbImage")
   public void setThumbImage(ReactSlider view, @Nullable ReadableMap source) {
     ReactSliderManagerImpl.setThumbImage(view, source);

package/src/RNCSliderNativeComponent.ts

@@ -26,6 +26,7 @@ export interface NativeProps extends ViewProps {
   maximumValue?: Float;
   minimumTrackImage?: ImageSource;
   minimumTrackTintColor?: ColorValue;
+  bufferedTrackTintColor?: ColorValue;
   minimumValue?: Float;
   onChange?: BubblingEventHandler<Event>;
   onRNCSliderSlidingStart?: DirectEventHandler<Event>;
@@ -37,6 +38,7 @@ export interface NativeProps extends ViewProps {
   thumbTintColor?: ColorValue;
   trackImage?: ImageSource;
   value?: Float;
+  bufferedValue?: Float;
   lowerLimit?: Float;
   upperLimit?: Float;
 }

package/src/Slider.tsx

@@ -87,6 +87,15 @@ type Props = ViewProps &
      */
     value?: number;
 
+    /**
+     * Write-only property representing the secondaryProgress of the slider.
+     * Entered once at the beginning still acts as an initial value.
+     * The value should be between minimumValue and maximumValue,
+     * which default to 0 and 1 respectively.
+     * Default value is 0.
+     */
+    bufferedValue?: number;
+
     /**
      * Step value of the slider. The value should be
      * between 0 and (maximumValue - minimumValue).
@@ -120,6 +129,8 @@ type Props = ViewProps &
      */
     minimumTrackTintColor?: ColorValue;
 
+    bufferedTrackTintColor?: ColorValue;
+
     /**
      * The color used for the track to the right of the button.
      * Overrides the default blue gradient image on iOS.
@@ -351,6 +362,7 @@ const SliderWithRef = React.forwardRef(SliderComponent);
 
 SliderWithRef.defaultProps = {
   value: 0,
+  bufferedValue: 0,
   minimumValue: 0,
   maximumValue: 1,
   step: 0,

package/typings/index.d.ts

@@ -108,6 +108,12 @@ export interface SliderProps
    */
   minimumTrackTintColor?: string;
 
+  /**
+   * The color used for the buffered track (secondaryProgress)
+   * Overrides the default grey gradient image.
+   */
+  bufferedTrackTintColor?: string;
+
   /**
    * Initial minimum value of the slider. Default value is 0.
    */
@@ -157,6 +163,15 @@ export interface SliderProps
    */
   value?: number;
 
+  /**
+   * Write-only property representing the bufferedValue of the slider.
+   * Entered once at the beginning still acts as an initial value.
+   * The value should be between minimumValue and maximumValue,
+   * which default to 0 and 1 respectively.
+   * Default value is 0.
+   */
+  bufferedValue?: number;
+
   /**
    * Reverses the direction of the slider.
    */