-
Notifications
You must be signed in to change notification settings - Fork 305
/
AudioRecordingPreview.tsx
102 lines (93 loc) · 2.75 KB
/
AudioRecordingPreview.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import React from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import dayjs from 'dayjs';
import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
import { Pause, Play } from '../../../../icons';
import { WaveProgressBar } from '../../../ProgressControl/WaveProgressBar';
export type AudioRecordingPreviewProps = {
/**
* Boolean used to show the paused state of the player.
*/
paused: boolean;
/**
* Number used to show the current position of the audio being played.
*/
position: number;
/**
* Number used to show the percentage of progress of the audio being played. It should be in 0-1 range.
*/
progress: number;
/**
* The waveform data to be presented to show the audio levels.
*/
waveformData: number[];
/**
* Function to play or pause the audio player.
*/
onVoicePlayerPlayPause?: () => Promise<void>;
};
/**
* Component displayed when the audio is recorded and can be previewed.
*/
export const AudioRecordingPreview = (props: AudioRecordingPreviewProps) => {
const { onVoicePlayerPlayPause, paused, position, progress, waveformData } = props;
const {
theme: {
colors: { accent_blue, grey_dark },
messageInput: {
audioRecordingPreview: {
container,
currentTime,
infoContainer,
pauseIcon,
playIcon,
progressBar,
},
},
},
} = useTheme();
return (
<View style={[styles.container, container]}>
<View style={[styles.infoContainer, infoContainer]}>
<Pressable onPress={onVoicePlayerPlayPause}>
{paused ? (
<Play fill={accent_blue} height={32} width={32} {...playIcon} />
) : (
<Pause fill={accent_blue} height={32} width={32} {...pauseIcon} />
)}
</Pressable>
{/* `durationMillis` is for Expo apps, `currentPosition` is for Native CLI apps. */}
<Text style={[styles.currentTime, { color: grey_dark }, currentTime]}>
{dayjs.duration(position).format('mm:ss')}
</Text>
</View>
<View style={[styles.progressBar, progressBar]}>
{/* Since the progress is in range 0-1 we convert it in terms of 100% */}
<WaveProgressBar progress={progress} waveformData={waveformData} />
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
alignItems: 'center',
display: 'flex',
flexDirection: 'row',
paddingBottom: 8,
paddingTop: 4,
},
currentTime: {
fontSize: 16,
marginLeft: 4,
},
infoContainer: {
alignItems: 'center',
display: 'flex',
flex: 1,
flexDirection: 'row',
},
progressBar: {
flex: 3,
},
});
AudioRecordingPreview.displayName = 'AudioRecordingPreview{messageInput}';