@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
64 lines (63 loc) • 2.24 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ErrorDisplay = ErrorDisplay;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _PlayerContext = require("../util/PlayerContext");
var _SvgUtils = require("../button/svg/SvgUtils");
var _ErrorSvg = require("../button/svg/ErrorSvg");
var _UiContainer = require("../uicontroller/UiContainer");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* A fullscreen error component for the `react-native-theoplayer` UI.
*/
function ErrorDisplay(props) {
const {
error
} = props;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayerContext.PlayerContext.Consumer, {
children: context => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [_UiContainer.FULLSCREEN_CENTER_STYLE, {
backgroundColor: context.style.colors.errorBackground
}],
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: {
flexDirection: 'row'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SvgUtils.SvgContext.Provider, {
value: {
fill: context.style.colors.icon,
height: '100%',
width: '100%'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: {
height: context.style.dimensions.controlBarHeight,
aspectRatio: 1,
padding: 5
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ErrorSvg.ErrorSvg, {})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [context.style.text, {
color: context.style.colors.text,
alignSelf: 'center',
paddingLeft: 5
}],
children: "Error:"
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [context.style.text, {
color: context.style.colors.text
}],
children: context.locale.errorMessage({
error
})
})]
})
});
}
//# sourceMappingURL=ErrorDisplay.js.map