46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
|
|
import Touchable from '../message/Touchable';
|
|
import { CustomIcon } from '../CustomIcon';
|
|
import { useTheme } from '../../theme';
|
|
import styles from './styles';
|
|
import RCActivityIndicator from '../ActivityIndicator';
|
|
|
|
interface IButton {
|
|
loading: boolean;
|
|
paused: boolean;
|
|
disabled?: boolean;
|
|
onPress: () => void;
|
|
isReadyToPlay: boolean;
|
|
}
|
|
|
|
const BUTTON_HIT_SLOP = { top: 12, right: 12, bottom: 12, left: 12 };
|
|
|
|
type TCustomIconName = 'arrow-down' | 'play-shape-filled' | 'pause-shape-filled';
|
|
|
|
const PlayButton = React.memo(({ loading, paused, onPress, disabled, isReadyToPlay }: IButton) => {
|
|
const { colors } = useTheme();
|
|
|
|
let customIconName: TCustomIconName = 'arrow-down';
|
|
if (isReadyToPlay) {
|
|
customIconName = paused ? 'play-shape-filled' : 'pause-shape-filled';
|
|
}
|
|
return (
|
|
<Touchable
|
|
style={[styles.playPauseButton, { backgroundColor: colors.buttonBackgroundPrimaryDefault }]}
|
|
disabled={disabled}
|
|
onPress={onPress}
|
|
hitSlop={BUTTON_HIT_SLOP}
|
|
background={Touchable.SelectableBackgroundBorderless()}
|
|
>
|
|
{loading ? (
|
|
<RCActivityIndicator />
|
|
) : (
|
|
<CustomIcon name={customIconName} size={24} color={disabled ? colors.tintDisabled : colors.buttonFontPrimary} />
|
|
)}
|
|
</Touchable>
|
|
);
|
|
});
|
|
|
|
export default PlayButton;
|