-
Notifications
You must be signed in to change notification settings - Fork 107
/
Controls.tsx
36 lines (31 loc) · 1.17 KB
/
Controls.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
import React from "react";
import { TouchableOpacity, View, ActivityIndicator, Image } from "react-native";
import styles from "./MediaControls.style";
import { getPlayerStateIcon } from "./utils";
import { Props } from "./MediaControls";
import { PLAYER_STATES } from "./constants/playerStates";
type ControlsProps = Pick<
Props,
"isLoading" | "mainColor" | "playerState" | "onReplay"
> & {
onPause: () => void;
};
const Controls = (props: ControlsProps) => {
const { isLoading, mainColor, playerState, onReplay, onPause } = props;
const icon = getPlayerStateIcon(playerState);
const pressAction = playerState === PLAYER_STATES.ENDED ? onReplay : onPause;
const content = isLoading ? (
<ActivityIndicator size="large" color="#FFF" />
) : (
<TouchableOpacity
style={[styles.playButton, { backgroundColor: mainColor }]}
onPress={pressAction}
accessibilityLabel={PLAYER_STATES.PAUSED ? "Tap to Play" : "Tap to Pause"}
accessibilityHint={"Plays and Pauses the Video"}
>
<Image source={icon} style={styles.playIcon} />
</TouchableOpacity>
);
return <View style={[styles.controlsRow]}>{content}</View>;
};
export { Controls };