|
|
|
|
@ -1,10 +1,10 @@
@@ -1,10 +1,10 @@
|
|
|
|
|
import { |
|
|
|
|
$size, |
|
|
|
|
BottomModal, |
|
|
|
|
IconComponent, |
|
|
|
|
Txt, |
|
|
|
|
useEventsListener, |
|
|
|
|
useTheme, |
|
|
|
|
$size, |
|
|
|
|
BottomModal, |
|
|
|
|
IconComponent, |
|
|
|
|
Txt, |
|
|
|
|
useEventsListener, |
|
|
|
|
useTheme, |
|
|
|
|
} from '@/shared' |
|
|
|
|
import { PartialTheme } from '@/shared/themes/interfaces' |
|
|
|
|
import React, { FC, useEffect, useMemo, useRef, useState } from 'react' |
|
|
|
|
@ -16,178 +16,176 @@ import Animated, * as RNReanimated from 'react-native-reanimated'
@@ -16,178 +16,176 @@ import Animated, * as RNReanimated from 'react-native-reanimated'
|
|
|
|
|
import { mediaService } from '@/services/system' |
|
|
|
|
import { RecordAudioModalSettings } from '../interfaces' |
|
|
|
|
import { |
|
|
|
|
DEF_DB_LVL, |
|
|
|
|
DEF_VOLUME_INDICATOR_SIZE, |
|
|
|
|
INITIAL_PLAY_TIME, |
|
|
|
|
MAX_VOLUME_INDICATOR_SIZE, |
|
|
|
|
DEF_DB_LVL, |
|
|
|
|
DEF_VOLUME_INDICATOR_SIZE, |
|
|
|
|
INITIAL_PLAY_TIME, |
|
|
|
|
MAX_VOLUME_INDICATOR_SIZE, |
|
|
|
|
} from '../consts' |
|
|
|
|
|
|
|
|
|
export const RecordAudioModalSmart: FC = () => { |
|
|
|
|
const { styles, theme } = useTheme(createStyles) |
|
|
|
|
const [isRecording, setRecord] = useState<boolean>(false) |
|
|
|
|
const [playTime, setPlayTime] = useState<string>(INITIAL_PLAY_TIME) |
|
|
|
|
const [recordFilPath, setRecordFilePath] = useState<string>('') |
|
|
|
|
|
|
|
|
|
const animationVal = RNReanimated.useSharedValue(DEF_DB_LVL) |
|
|
|
|
const sheetRef = useRef<RBSheet | null>() |
|
|
|
|
const settingsRef = useRef<RecordAudioModalSettings>({ |
|
|
|
|
send: null, |
|
|
|
|
}).current |
|
|
|
|
|
|
|
|
|
const animatedStyles = RNReanimated.useAnimatedStyle(() => { |
|
|
|
|
const size = RNReanimated.interpolate( |
|
|
|
|
animationVal.value, |
|
|
|
|
[DEF_DB_LVL, 0], |
|
|
|
|
[DEF_VOLUME_INDICATOR_SIZE, MAX_VOLUME_INDICATOR_SIZE], |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
width: size, |
|
|
|
|
height: size, |
|
|
|
|
borderRadius: size / 2, |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
useEventsListener( |
|
|
|
|
'openRecordVoiceModal', |
|
|
|
|
data => { |
|
|
|
|
sheetRef.current.open() |
|
|
|
|
settingsRef.send = data.send |
|
|
|
|
}, |
|
|
|
|
[sheetRef.current, settingsRef], |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
const onStartRecord = async () => { |
|
|
|
|
setRecord(true) |
|
|
|
|
RNSoundLevel.start() |
|
|
|
|
await mediaService.onStartRecord() |
|
|
|
|
mediaService.addRecordBackListener(({ currentPosition }) => |
|
|
|
|
setPlayTime(mediaService.formatRecordPlayTime(currentPosition)), |
|
|
|
|
) |
|
|
|
|
RNSoundLevel.onNewFrame = data => { |
|
|
|
|
animationVal.value = RNReanimated.withSpring(data.value) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onStopRecord = async () => { |
|
|
|
|
setRecord(false) |
|
|
|
|
RNReanimated.cancelAnimation(animationVal) |
|
|
|
|
animationVal.value = RNReanimated.withSpring(DEF_DB_LVL) |
|
|
|
|
RNSoundLevel.stop() |
|
|
|
|
const path = await mediaService.onStopRecord() |
|
|
|
|
setRecordFilePath(path) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onClose = () => { |
|
|
|
|
setPlayTime(INITIAL_PLAY_TIME) |
|
|
|
|
onStopRecord() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onCancel = () => { |
|
|
|
|
setPlayTime(INITIAL_PLAY_TIME) |
|
|
|
|
setRecordFilePath('') |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onConfirm = () => { |
|
|
|
|
settingsRef?.send(recordFilPath) |
|
|
|
|
sheetRef.current.close() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
console.log({ recordFilPath, BOOLLrecordFilPath: !recordFilPath }) |
|
|
|
|
}, [recordFilPath]) |
|
|
|
|
|
|
|
|
|
const timer = useMemo(() => <Txt>{playTime}</Txt>, [playTime]) |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<BottomModal |
|
|
|
|
sheetRef={ref => (sheetRef.current = ref)} |
|
|
|
|
height={$size(200, 190)} |
|
|
|
|
onClose={onClose} |
|
|
|
|
containerStyle={styles.container}> |
|
|
|
|
<Txt style={styles.title}>Запис повідомлення</Txt> |
|
|
|
|
|
|
|
|
|
<View style={styles.actionsContainer}> |
|
|
|
|
<TouchableOpacity disabled={isRecording} onPress={onCancel}> |
|
|
|
|
<IconComponent |
|
|
|
|
name="xcircle-1" |
|
|
|
|
size={$size(23)} |
|
|
|
|
color={theme?.chats?.message?.$btnSend} |
|
|
|
|
/> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
|
|
|
|
|
<TouchableOpacity |
|
|
|
|
style={styles.micContainer} |
|
|
|
|
onPress={() => |
|
|
|
|
!isRecording ? onStartRecord() : onStopRecord() |
|
|
|
|
}> |
|
|
|
|
<View style={styles.micBtn}> |
|
|
|
|
<IconComponent |
|
|
|
|
name="microphone-1" |
|
|
|
|
size={$size(23)} |
|
|
|
|
color={theme?.chats?.message?.$btnSend} |
|
|
|
|
/> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
<Animated.View |
|
|
|
|
style={[styles.micVolumeCircle, animatedStyles]} |
|
|
|
|
/> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
|
|
|
|
|
<TouchableOpacity disabled={!recordFilPath || isRecording} onPress={onConfirm}> |
|
|
|
|
<Svg width={$size(20)} height={$size(25)} fill="none"> |
|
|
|
|
<Path |
|
|
|
|
d="M20.581 11.346 4.745 2.478a.75.75 0 0 0-1.072.906l2.987 8.364a.75.75 0 0 1 0 .504l-2.987 8.364a.75.75 0 0 0 1.072.907l15.836-8.868a.75.75 0 0 0 0-1.31v0ZM6.75 12h6" |
|
|
|
|
stroke={theme?.chats?.message?.$btnSend} |
|
|
|
|
strokeWidth={1.7} |
|
|
|
|
strokeLinecap="round" |
|
|
|
|
strokeLinejoin="round" |
|
|
|
|
transform={`translate(${$size(1, 2)}, ${$size( |
|
|
|
|
0.5, |
|
|
|
|
1.5, |
|
|
|
|
)}), scale(${$size(0.7, 0.85)})`}
|
|
|
|
|
/> |
|
|
|
|
</Svg> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
<View>{timer}</View> |
|
|
|
|
</BottomModal> |
|
|
|
|
) |
|
|
|
|
const { styles, theme } = useTheme(createStyles) |
|
|
|
|
const [isRecording, setRecord] = useState<boolean>(false) |
|
|
|
|
const [playTime, setPlayTime] = useState<string>(INITIAL_PLAY_TIME) |
|
|
|
|
const [recordFilPath, setRecordFilePath] = useState<string>('') |
|
|
|
|
|
|
|
|
|
const animationVal = RNReanimated.useSharedValue(DEF_DB_LVL) |
|
|
|
|
const sheetRef = useRef<RBSheet | null>() |
|
|
|
|
const settingsRef = useRef<RecordAudioModalSettings>({ |
|
|
|
|
send: null, |
|
|
|
|
}).current |
|
|
|
|
|
|
|
|
|
const animatedStyles = RNReanimated.useAnimatedStyle(() => { |
|
|
|
|
const size = RNReanimated.interpolate( |
|
|
|
|
animationVal.value, |
|
|
|
|
[DEF_DB_LVL, 0], |
|
|
|
|
[DEF_VOLUME_INDICATOR_SIZE, MAX_VOLUME_INDICATOR_SIZE], |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
return { |
|
|
|
|
width: size, |
|
|
|
|
height: size, |
|
|
|
|
borderRadius: size / 2, |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
useEventsListener( |
|
|
|
|
'openRecordVoiceModal', |
|
|
|
|
data => { |
|
|
|
|
sheetRef.current.open() |
|
|
|
|
settingsRef.send = data.send |
|
|
|
|
}, |
|
|
|
|
[sheetRef.current, settingsRef], |
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
const onStartRecord = async () => { |
|
|
|
|
setRecord(true) |
|
|
|
|
RNSoundLevel.start() |
|
|
|
|
await mediaService.onStartRecord() |
|
|
|
|
mediaService.addRecordBackListener(({ currentPosition }) => |
|
|
|
|
setPlayTime(mediaService.formatRecordPlayTime(currentPosition)), |
|
|
|
|
) |
|
|
|
|
RNSoundLevel.onNewFrame = data => { |
|
|
|
|
animationVal.value = RNReanimated.withSpring(data.value) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onStopRecord = async () => { |
|
|
|
|
setRecord(false) |
|
|
|
|
RNReanimated.cancelAnimation(animationVal) |
|
|
|
|
animationVal.value = RNReanimated.withSpring(DEF_DB_LVL) |
|
|
|
|
RNSoundLevel.stop() |
|
|
|
|
const path = await mediaService.onStopRecord() |
|
|
|
|
setRecordFilePath(path) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onClose = () => { |
|
|
|
|
setPlayTime(INITIAL_PLAY_TIME) |
|
|
|
|
onStopRecord() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onCancel = () => { |
|
|
|
|
setPlayTime(INITIAL_PLAY_TIME) |
|
|
|
|
setRecordFilePath('') |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const onConfirm = () => { |
|
|
|
|
settingsRef?.send(recordFilPath) |
|
|
|
|
sheetRef.current.close() |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const timer = useMemo(() => <Txt>{playTime}</Txt>, [playTime]) |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<BottomModal |
|
|
|
|
sheetRef={ref => (sheetRef.current = ref)} |
|
|
|
|
height={$size(200, 190)} |
|
|
|
|
onClose={onClose} |
|
|
|
|
containerStyle={styles.container}> |
|
|
|
|
<Txt style={styles.title}>Запис повідомлення</Txt> |
|
|
|
|
|
|
|
|
|
<View style={styles.actionsContainer}> |
|
|
|
|
<TouchableOpacity disabled={isRecording} onPress={onCancel}> |
|
|
|
|
<IconComponent |
|
|
|
|
name="xcircle-1" |
|
|
|
|
size={$size(23)} |
|
|
|
|
color={theme?.chats?.message?.$btnSend} |
|
|
|
|
/> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
|
|
|
|
|
<TouchableOpacity |
|
|
|
|
style={styles.micContainer} |
|
|
|
|
onPress={() => |
|
|
|
|
!isRecording ? onStartRecord() : onStopRecord() |
|
|
|
|
}> |
|
|
|
|
<View style={styles.micBtn}> |
|
|
|
|
<IconComponent |
|
|
|
|
name="microphone-1" |
|
|
|
|
size={$size(23)} |
|
|
|
|
color={theme?.chats?.message?.$btnSend} |
|
|
|
|
/> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
<Animated.View |
|
|
|
|
style={[styles.micVolumeCircle, animatedStyles]} |
|
|
|
|
/> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
|
|
|
|
|
<TouchableOpacity |
|
|
|
|
disabled={!recordFilPath || isRecording} |
|
|
|
|
onPress={onConfirm}> |
|
|
|
|
<Svg width={$size(20)} height={$size(25)} fill="none"> |
|
|
|
|
<Path |
|
|
|
|
d="M20.581 11.346 4.745 2.478a.75.75 0 0 0-1.072.906l2.987 8.364a.75.75 0 0 1 0 .504l-2.987 8.364a.75.75 0 0 0 1.072.907l15.836-8.868a.75.75 0 0 0 0-1.31v0ZM6.75 12h6" |
|
|
|
|
stroke={theme?.chats?.message?.$btnSend} |
|
|
|
|
strokeWidth={1.7} |
|
|
|
|
strokeLinecap="round" |
|
|
|
|
strokeLinejoin="round" |
|
|
|
|
transform={`translate(${$size(1, 2)}, ${$size( |
|
|
|
|
0.5, |
|
|
|
|
1.5, |
|
|
|
|
)}), scale(${$size(0.7, 0.85)})`}
|
|
|
|
|
/> |
|
|
|
|
</Svg> |
|
|
|
|
</TouchableOpacity> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
<View>{timer}</View> |
|
|
|
|
</BottomModal> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const createStyles = ({ chats: { sendVoiceMsg } }: PartialTheme) => |
|
|
|
|
StyleSheet.create({ |
|
|
|
|
container: { |
|
|
|
|
width: '100%', |
|
|
|
|
justifyContent: 'center', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
}, |
|
|
|
|
title: { |
|
|
|
|
top: $size(-35), |
|
|
|
|
}, |
|
|
|
|
actionsContainer: { |
|
|
|
|
width: '60%', |
|
|
|
|
flexDirection: 'row', |
|
|
|
|
justifyContent: 'space-between', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
marginBottom: $size(25), |
|
|
|
|
}, |
|
|
|
|
micContainer: { |
|
|
|
|
alignItems: 'center', |
|
|
|
|
justifyContent: 'center', |
|
|
|
|
}, |
|
|
|
|
micBtn: { |
|
|
|
|
alignItems: 'center', |
|
|
|
|
justifyContent: 'center', |
|
|
|
|
zIndex: 1, |
|
|
|
|
width: $size(52), |
|
|
|
|
height: $size(52), |
|
|
|
|
backgroundColor: sendVoiceMsg.micBtn.$bg, |
|
|
|
|
borderRadius: $size(62) / 2, |
|
|
|
|
}, |
|
|
|
|
micVolumeCircle: { |
|
|
|
|
position: 'absolute', |
|
|
|
|
backgroundColor: sendVoiceMsg.micBtn.$border, |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
StyleSheet.create({ |
|
|
|
|
container: { |
|
|
|
|
width: '100%', |
|
|
|
|
justifyContent: 'center', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
}, |
|
|
|
|
title: { |
|
|
|
|
top: $size(-35), |
|
|
|
|
}, |
|
|
|
|
actionsContainer: { |
|
|
|
|
width: '60%', |
|
|
|
|
flexDirection: 'row', |
|
|
|
|
justifyContent: 'space-between', |
|
|
|
|
alignItems: 'center', |
|
|
|
|
marginBottom: $size(25), |
|
|
|
|
}, |
|
|
|
|
micContainer: { |
|
|
|
|
alignItems: 'center', |
|
|
|
|
justifyContent: 'center', |
|
|
|
|
}, |
|
|
|
|
micBtn: { |
|
|
|
|
alignItems: 'center', |
|
|
|
|
justifyContent: 'center', |
|
|
|
|
zIndex: 1, |
|
|
|
|
width: $size(52), |
|
|
|
|
height: $size(52), |
|
|
|
|
backgroundColor: sendVoiceMsg.micBtn.$bg, |
|
|
|
|
borderRadius: $size(62) / 2, |
|
|
|
|
}, |
|
|
|
|
micVolumeCircle: { |
|
|
|
|
position: 'absolute', |
|
|
|
|
backgroundColor: sendVoiceMsg.micBtn.$border, |
|
|
|
|
}, |
|
|
|
|
}) |
|
|
|
|
|
Vitalik
3 years ago