verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

hitSlop

This commit is contained in:
Reinaldo Neto 2023-10-23 18:06:59 -03:00
parent 8468c1ce96
commit 0154c5a5b2
3 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/containers/AudioPlayer/PlayButton.tsx
View File

@ -5,6 +5,7 @@ import { CustomIcon } from '../CustomIcon';
import { useTheme } from '../../theme'; import { useTheme } from '../../theme';
import styles from './styles'; import styles from './styles';
import RCActivityIndicator from '../ActivityIndicator'; import RCActivityIndicator from '../ActivityIndicator';
import { AUDIO_BUTTON_HIT_SLOP } from './utils';
interface IButton { interface IButton {
loading: boolean; loading: boolean;
@ -14,8 +15,6 @@ interface IButton {
isReadyToPlay: boolean; isReadyToPlay: boolean;
} }
const BUTTON_HIT_SLOP = { top: 12, right: 12, bottom: 12, left: 12 };
type TCustomIconName = 'arrow-down' | 'play-shape-filled' | 'pause-shape-filled'; type TCustomIconName = 'arrow-down' | 'play-shape-filled' | 'pause-shape-filled';
const PlayButton = ({ loading, paused, onPress, disabled, isReadyToPlay }: IButton) => { const PlayButton = ({ loading, paused, onPress, disabled, isReadyToPlay }: IButton) => {
@ -30,7 +29,7 @@ const PlayButton = ({ loading, paused, onPress, disabled, isReadyToPlay }: IButt
style={[styles.playPauseButton, { backgroundColor: colors.buttonBackgroundPrimaryDefault }]} style={[styles.playPauseButton, { backgroundColor: colors.buttonBackgroundPrimaryDefault }]}
disabled={disabled} disabled={disabled}
onPress={onPress} onPress={onPress}
hitSlop={BUTTON_HIT_SLOP} hitSlop={AUDIO_BUTTON_HIT_SLOP}
background={Touchable.SelectableBackgroundBorderless()} background={Touchable.SelectableBackgroundBorderless()}
> >
{loading ? ( {loading ? (

13
app/containers/AudioPlayer/Seek.tsx
View File

@ -13,6 +13,7 @@ import Animated, {
import styles from './styles'; import styles from './styles';
import { useTheme } from '../../theme'; import { useTheme } from '../../theme';
import { AUDIO_BUTTON_HIT_SLOP } from './utils';
const AnimatedTextInput = Animated.createAnimatedComponent(TextInput); const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
@ -23,13 +24,6 @@ interface ISeek {
onChangeTime: (time: number) => Promise<void>; onChangeTime: (time: number) => Promise<void>;
} }
const BUTTON_HIT_SLOP = {
top: 8,
right: 8,
bottom: 8,
left: 8
};
const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) => { const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) => {
const { colors } = useTheme(); const { colors } = useTheme();
@ -141,7 +135,10 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) =>
<View style={[styles.line, { backgroundColor: colors.strokeLight }]} /> <View style={[styles.line, { backgroundColor: colors.strokeLight }]} />
<Animated.View style={[styles.line, styleLine, { backgroundColor: colors.buttonBackgroundPrimaryDefault }]} /> <Animated.View style={[styles.line, styleLine, { backgroundColor: colors.buttonBackgroundPrimaryDefault }]} />
<PanGestureHandler enabled={loaded} onGestureEvent={gestureHandler}> <PanGestureHandler enabled={loaded} onGestureEvent={gestureHandler}>
<Animated.View hitSlop={BUTTON_HIT_SLOP} style={[styles.thumbSeek, { backgroundColor: thumbColor }, styleThumb]} /> <Animated.View
hitSlop={AUDIO_BUTTON_HIT_SLOP}
style={[styles.thumbSeek, { backgroundColor: thumbColor }, styleThumb]}
/>
</PanGestureHandler> </PanGestureHandler>
</View> </View>
</View> </View>

3
app/containers/AudioPlayer/utils.ts Normal file
View File

@ -0,0 +1,3 @@
export const AVAILABLE_SPEEDS = [1, 1.5, 2, 0.5];
export const AUDIO_BUTTON_HIT_SLOP = { top: 8, right: 8, bottom: 8, left: 8 };