From 497e631510e00ff7bb3a2c2490856b6b2d5d17bd Mon Sep 17 00:00:00 2001
From: Danish Ahmed Mirza <danishmirza30602@gmail.com>
Date: Thu, 16 Jun 2022 03:19:28 +0530
Subject: [PATCH] Improve slider animation performance

---
 .../message/Components/Audio/Slider.tsx       | 71 +++++++++++--------
 1 file changed, 40 insertions(+), 31 deletions(-)

diff --git a/app/containers/message/Components/Audio/Slider.tsx b/app/containers/message/Components/Audio/Slider.tsx
index e01208c86..c1c967ad5 100644
--- a/app/containers/message/Components/Audio/Slider.tsx
+++ b/app/containers/message/Components/Audio/Slider.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import { View, StyleProp, ViewStyle } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Touchable from 'react-native-platform-touchable';
-import Animated, { useSharedValue, useAnimatedStyle, interpolate } from 'react-native-reanimated';
+import Animated, { useSharedValue, useAnimatedStyle, interpolate, withTiming } from 'react-native-reanimated';
 
 import styles, { SLIDER_THUMB_RADIUS } from '../../styles';
 import { useTheme } from '../../../../theme';
+// import { debounce } from '../../../../lib/methods/helpers';
 
 interface ISliderProps {
 	value: number;
@@ -32,14 +32,15 @@ const Slider = React.memo(
 	}: ISliderProps) => {
 		const { colors } = useTheme();
 		const [sliderWidth, setSliderWidth] = useState<number>(0);
-		const position = useSharedValue(0);
+		const [isSliding, setSliding] = useState<boolean>(false);
+		const sliderThumbWidth = useSharedValue(2 * SLIDER_THUMB_RADIUS);
 		const currentValue = useSharedValue(0);
 
 		useEffect(() => {
-			if (value !== currentValue.value) {
+			if (!isSliding) {
 				currentValue.value = value;
 			}
-		}, [value]);
+		}, [value, isSliding]);
 
 		const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
 
@@ -49,20 +50,30 @@ const Slider = React.memo(
 			setSliderWidth(event.nativeEvent.layout.width);
 		};
 
-		const tapGesture = Gesture.Tap().onStart(e => {
-			position.value = clamp(e.x, 0, sliderWidth);
-			currentValue.value = equivalentValue(position.value);
-			onValueChange(currentValue.value);
-		});
+		// const debouncedOnValueChange = debounce((value: number) => onValueChange(value), 50);
+
+		const tapGesture = Gesture.Tap()
+			.hitSlop({ vertical: 10 })
+			.onStart(e => {
+				currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
+				onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
+			});
 
 		const dragGesture = Gesture.Pan()
-			.onChange(e => {
-				position.value = clamp(e.x, 0, sliderWidth);
-				currentValue.value = equivalentValue(position.value);
-				onValueChange(currentValue.value);
+			.hitSlop({ horizontal: 5, vertical: 20 })
+			.onStart(() => {
+				setSliding(true);
+				sliderThumbWidth.value = withTiming(3 * SLIDER_THUMB_RADIUS, { duration: 100 });
 			})
-			.onEnd(() => {
-				onValueChange(currentValue.value);
+			.onChange(e => {
+				currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
+				onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
+			})
+			.onEnd(e => {
+				sliderThumbWidth.value = withTiming(2 * SLIDER_THUMB_RADIUS, { duration: 100 });
+				currentValue.value = equivalentValue(clamp(e.x, 0, sliderWidth));
+				onValueChange(equivalentValue(clamp(e.x, 0, sliderWidth)));
+				setSliding(false);
 			});
 
 		const animatedThumbStyles = useAnimatedStyle(() => ({
@@ -70,7 +81,9 @@ const Slider = React.memo(
 				{
 					translateX: interpolate(currentValue.value, [0, maximumValue], [0, sliderWidth]) - SLIDER_THUMB_RADIUS
 				}
-			]
+			],
+			width: sliderThumbWidth.value,
+			height: sliderThumbWidth.value
 		}));
 
 		const animatedTrackStyles = useAnimatedStyle(() => ({
@@ -81,20 +94,16 @@ const Slider = React.memo(
 
 		return (
 			<View style={[styles.sliderContainer, containerStyle]}>
-				<Touchable onPress={() => {}}>
-					<GestureDetector gesture={gesture}>
-						<View
-							style={[styles.track, { backgroundColor: maximumTrackTintColor || colors.buttonBackground }]}
-							onLayout={onLayout}>
-							<Animated.View
-								style={[styles.sliderThumb, { backgroundColor: thumbTintColor || colors.tintColor }, animatedThumbStyles]}
-							/>
-							<Animated.View
-								style={[styles.activeTrack, { backgroundColor: minimumTrackTintColor || colors.tintColor }, animatedTrackStyles]}
-							/>
-						</View>
-					</GestureDetector>
-				</Touchable>
+				<GestureDetector gesture={gesture}>
+					<View style={[styles.track, { backgroundColor: maximumTrackTintColor || colors.buttonBackground }]} onLayout={onLayout}>
+						<Animated.View
+							style={[styles.sliderThumb, { backgroundColor: thumbTintColor || colors.tintColor }, animatedThumbStyles]}
+						/>
+						<Animated.View
+							style={[styles.activeTrack, { backgroundColor: minimumTrackTintColor || colors.tintColor }, animatedTrackStyles]}
+						/>
+					</View>
+				</GestureDetector>
 			</View>
 		);
 	}