From 3805bc9c32502de4889e1e41dca8cd568306580b Mon Sep 17 00:00:00 2001 From: Reinaldo Neto Date: Mon, 23 Oct 2023 21:12:10 -0300 Subject: [PATCH] tweak at names --- app/containers/AudioPlayer/Seek.tsx | 42 +++++++++++++++------------- app/containers/AudioPlayer/index.tsx | 12 ++++---- app/lib/methods/audioPlayer.ts | 4 +-- 3 files changed, 29 insertions(+), 29 deletions(-) diff --git a/app/containers/AudioPlayer/Seek.tsx b/app/containers/AudioPlayer/Seek.tsx index 4853c07da..3f27d5ee7 100644 --- a/app/containers/AudioPlayer/Seek.tsx +++ b/app/containers/AudioPlayer/Seek.tsx @@ -15,6 +15,8 @@ import styles from './styles'; import { useTheme } from '../../theme'; import { AUDIO_BUTTON_HIT_SLOP } from './utils'; +const DEFAULT_TIME_LABEL = '00:00'; + const AnimatedTextInput = Animated.createAnimatedComponent(TextInput); interface ISeek { @@ -28,20 +30,20 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) => const { colors } = useTheme(); const maxWidth = useSharedValue(1); - const x = useSharedValue(0); - const current = useSharedValue('00:00'); + const timeValue = useSharedValue(0); + const timeLabel = useSharedValue(DEFAULT_TIME_LABEL); const scale = useSharedValue(1); const isHandlePan = useSharedValue(false); const onEndGestureHandler = useSharedValue(false); const isTimeChanged = useSharedValue(false); const styleLine = useAnimatedStyle(() => ({ - width: x.value, + width: timeValue.value, zIndex: 2 })); const styleThumb = useAnimatedStyle(() => ({ - transform: [{ translateX: x.value }, { scale: scale.value }] + transform: [{ translateX: timeValue.value }, { scale: scale.value }] })); const onLayout = (event: LayoutChangeEvent) => { @@ -49,19 +51,19 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) => maxWidth.value = width - 12; }; - const gestureHandler = useAnimatedGestureHandler({ + const onGestureEvent = useAnimatedGestureHandler({ onStart: (_, ctx: any) => { - ctx.startX = x.value; + ctx.startX = timeValue.value; isHandlePan.value = true; }, onActive: (event, ctx: any) => { const moveInX: number = ctx.startX + event.translationX; if (moveInX < 0) { - x.value = 0; + timeValue.value = 0; } else if (moveInX > maxWidth.value) { - x.value = maxWidth.value; + timeValue.value = maxWidth.value; } else { - x.value = moveInX; + timeValue.value = moveInX; } isTimeChanged.value = true; scale.value = 1.3; @@ -97,36 +99,36 @@ const Seek = ({ currentTime, duration, loaded = false, onChangeTime }: ISeek) => useDerivedValue(() => { if (isHandlePan.value) { - const cTime = (x.value * duration.value) / maxWidth.value || 0; - currentTime.value = cTime; - current.value = formatTime(cTime); + const timeSelected = (timeValue.value * duration.value) / maxWidth.value || 0; + currentTime.value = timeSelected; + timeLabel.value = formatTime(timeSelected); } else { - const xTime = (currentTime.value * maxWidth.value) / duration.value || 0; - x.value = xTime; - current.value = formatTime(currentTime.value); + const timeInProgress = (currentTime.value * maxWidth.value) / duration.value || 0; + timeValue.value = timeInProgress; + timeLabel.value = formatTime(currentTime.value); if (currentTime.value !== 0) { isTimeChanged.value = true; } } - }, [x, maxWidth, duration, isHandlePan, currentTime]); + }, [timeValue, maxWidth, duration, isHandlePan, currentTime]); const getCurrentTime = useAnimatedProps(() => { if (isTimeChanged.value) { return { - text: current.value + text: timeLabel.value } as TextInputProps; } return { text: formatTime(duration.value) } as TextInputProps; - }, [current, isTimeChanged, duration]); + }, [timeLabel, isTimeChanged, duration]); const thumbColor = loaded ? colors.buttonBackgroundPrimaryDefault : colors.tintDisabled; return ( - + - - - - - - + + + + + ); }; diff --git a/app/lib/methods/audioPlayer.ts b/app/lib/methods/audioPlayer.ts index 0de735693..890dee88d 100644 --- a/app/lib/methods/audioPlayer.ts +++ b/app/lib/methods/audioPlayer.ts @@ -1,7 +1,7 @@ import { AVPlaybackStatus, Audio, InterruptionModeAndroid, InterruptionModeIOS } from 'expo-av'; import { Sound } from 'expo-av/build/Audio/Sound'; -const mode = { +const AUDIO_MODE = { allowsRecordingIOS: false, playsInSilentModeIOS: true, staysActiveInBackground: true, @@ -57,7 +57,7 @@ class AudioPlayer { if (this.audioPlaying) { await this.pauseAudio(this.audioPlaying); } - await Audio.setAudioModeAsync(mode); + await Audio.setAudioModeAsync(AUDIO_MODE); await this.audioQueue[uri]?.playAsync(); this.audioPlaying = uri; }