@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
76 lines (75 loc) • 2.21 kB
JavaScript
import { Image, Platform, TouchableOpacity, View } from 'react-native';
import React, { useContext, useState } from 'react';
import { SvgContext } from '../svg/SvgUtils';
import { PlayerContext } from '../../util/PlayerContext';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* The default style applied to the ActionButton
*/
export const DEFAULT_ACTION_BUTTON_STYLE = {
height: '100%',
aspectRatio: 1,
padding: 5
};
/**
* The default button component that renders an image/svg source for the `react-native-theoplayer` UI.
*/
export const ActionButton = props => {
const {
icon,
style,
svg,
onPress,
highlighted,
testID
} = props;
const [focused, setFocused] = useState(false);
const context = useContext(PlayerContext);
const shouldChangeTintColor = highlighted || focused && Platform.isTV;
const touchable = props.touchable != false;
if (!touchable) {
return /*#__PURE__*/_jsx(View, {
style: [DEFAULT_ACTION_BUTTON_STYLE, style],
children: svg
});
}
const onTouch = () => {
if (context.ui.buttonsEnabled_) {
onPress?.();
}
context.ui.onUserAction_();
};
return /*#__PURE__*/_jsx(PlayerContext.Consumer, {
children: context => /*#__PURE__*/_jsxs(TouchableOpacity, {
style: [DEFAULT_ACTION_BUTTON_STYLE, style],
testID: testID,
onPress: onTouch,
onFocus: () => {
context.ui.onUserAction_();
setFocused(true);
},
onBlur: () => {
setFocused(false);
},
children: [svg && /*#__PURE__*/_jsx(SvgContext.Provider, {
value: {
fill: shouldChangeTintColor ? context.style.colors.iconSelected : context.style.colors.icon,
height: '100%',
width: '100%'
},
children: /*#__PURE__*/_jsx(View, {
children: svg
})
}), svg === undefined && icon && /*#__PURE__*/_jsx(Image, {
style: [{
height: '100%',
width: '100%'
}, {
tintColor: shouldChangeTintColor ? context.style.colors.iconSelected : context.style.colors.icon
}],
source: icon
})]
})
});
};
//# sourceMappingURL=ActionButton.js.map