New Audio slider using react-native-gesture-handler

app/containers/message/Audio.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
 import { Audio, AVPlaybackStatus, InterruptionModeAndroid, InterruptionModeIOS } from 'expo-av';
-import Slider from '@react-native-community/slider';
 import moment from 'moment';
 import { dequal } from 'dequal';
 import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
@@ -12,13 +11,17 @@ import Markdown from '../markdown';
 import { CustomIcon } from '../CustomIcon';
 import sharedStyles from '../../views/Styles';
 import { themes } from '../../lib/constants';
-import { isAndroid, isIOS } from '../../lib/methods/helpers';
+import {
+	isAndroid
+	//  isIOS
+} from '../../lib/methods/helpers';
 import MessageContext from './Context';
 import ActivityIndicator from '../ActivityIndicator';
 import { withDimensions } from '../../dimensions';
 import { TGetCustomEmoji } from '../../definitions/IEmoji';
 import { IAttachment } from '../../definitions';
 import { TSupportedThemes } from '../../theme';
+import Slider from './Slider';
 import { downloadAudioFile } from '../../lib/methods/audioFile';
 
 interface IButton {
@@ -73,9 +76,6 @@ const styles = StyleSheet.create({
 	audioLoading: {
 		marginHorizontal: 8
 	},
-	slider: {
-		flex: 1
-	},
 	duration: {
 		marginHorizontal: 12,
 		fontSize: 14,
@@ -262,7 +262,14 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 
 	render() {
 		const { loading, paused, currentTime, duration } = this.state;
-		const { file, getCustomEmoji, theme, scale, isReply, style } = this.props;
+		const {
+			file,
+			getCustomEmoji,
+			theme,
+			// scale,
+			isReply,
+			style
+		} = this.props;
 		const { description } = file;
 		const { baseUrl, user } = this.context;
 
@@ -295,16 +302,14 @@ class MessageAudio extends React.Component<IMessageAudioProps, IMessageAudioStat
 				>
 					<Button disabled={isReply} loading={loading} paused={paused} onPress={this.togglePlayPause} theme={theme} />
 					<Slider
-						disabled={isReply}
-						style={styles.slider}
 						value={currentTime}
 						maximumValue={duration}
-						minimumValue={0}
+						onValueChange={this.onValueChange}
 						thumbTintColor={thumbColor}
 						minimumTrackTintColor={themes[theme].tintColor}
+						disabled={isReply}
 						maximumTrackTintColor={themes[theme].auxiliaryText}
-						onValueChange={this.onValueChange}
+						// thumbImage={isIOS ? { uri: 'audio_thumb', scale } : undefined}
-						thumbImage={isIOS ? { uri: 'audio_thumb', scale } : undefined}
 					/>
 					<Text style={[styles.duration, { color: themes[theme].auxiliaryText }]}>{this.duration}</Text>
 				</View>

app/containers/message/Slider.tsx

@@ -0,0 +1,98 @@
+import React, { 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 styles, { SLIDER_THUMB_RADIUS } from './styles';
+import { useTheme } from '../../theme';
+import { debounce } from '../../lib/methods/helpers';
+
+interface ISliderProps {
+	value: number;
+	maximumValue: number;
+	onValueChange: (value: number) => Promise<void>;
+	thumbTintColor?: string;
+	minimumTrackTintColor?: string;
+	maximumTrackTintColor?: string;
+	disabled?: boolean;
+	thumbImage?: { uri: string; scale: number | undefined };
+	containerStyle?: StyleProp<ViewStyle>;
+}
+
+const Slider = React.memo(
+	({
+		value,
+		maximumValue,
+		onValueChange,
+		thumbTintColor,
+		minimumTrackTintColor,
+		maximumTrackTintColor,
+		disabled,
+		containerStyle
+	}: ISliderProps) => {
+		const { colors } = useTheme();
+		const [sliderWidth, setSliderWidth] = useState<number>(0);
+		const position = useSharedValue(value);
+		// console.log('Slider', value, maximumValue);
+
+		const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);
+
+		const equivalentValue = (sliderPosition: number) => interpolate(sliderPosition, [0, sliderWidth], [0, maximumValue]);
+
+		const onLayout = (event: any) => {
+			setSliderWidth(event.nativeEvent.layout.width);
+		};
+
+		const onChangeDebounce = debounce((currentValue: number) => onValueChange(currentValue), 50);
+
+		const tapGesture = Gesture.Tap().onStart(e => {
+			position.value = clamp(e.x, 0, sliderWidth);
+			onValueChange(equivalentValue(position.value));
+		});
+
+		const dragGesture = Gesture.Pan()
+			.onChange(e => {
+				position.value = clamp(e.x, 0, sliderWidth);
+				onChangeDebounce(equivalentValue(position.value));
+			})
+			.onEnd(() => {
+				onValueChange(equivalentValue(position.value));
+			});
+
+		const animatedThumbStyles = useAnimatedStyle(() => ({
+			transform: [
+				{
+					translateX: interpolate(value, [0, maximumValue], [0, sliderWidth]) - SLIDER_THUMB_RADIUS
+				}
+			]
+		}));
+
+		const animatedTrackStyles = useAnimatedStyle(() => ({
+			width: interpolate(value, [0, maximumValue], [0, sliderWidth])
+		}));
+
+		const gesture = disabled ? undefined : Gesture.Simultaneous(tapGesture, dragGesture);
+
+		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>
+			</View>
+		);
+	}
+);
+
+export default Slider;

app/containers/message/styles.ts

@@ -3,6 +3,8 @@ import { StyleSheet } from 'react-native';
 import sharedStyles from '../../views/Styles';
 import { isTablet } from '../../lib/methods/helpers';
 
+export const SLIDER_THUMB_RADIUS = 6;
+
 export default StyleSheet.create({
 	root: {
 		flexDirection: 'row'
@@ -169,5 +171,22 @@ export default StyleSheet.create({
 	threadDetails: {
 		flex: 1,
 		marginLeft: 12
+	},
+	sliderContainer: {
+		flex: 1
+	},
+	track: {
+		justifyContent: 'center'
+	},
+	activeTrack: {
+		height: 2,
+		width: 0
+	},
+	sliderThumb: {
+		height: SLIDER_THUMB_RADIUS * 2,
+		width: SLIDER_THUMB_RADIUS * 2,
+		borderRadius: SLIDER_THUMB_RADIUS,
+		position: 'absolute',
+		zIndex: 2
 	}
 });