@theoplayer/react-native-ui/lib/module/ui/components/message/ErrorDisplay.js

A React Native UI for @theoplayer/react-native

import React from 'react';
import { Text, View } from 'react-native';
import { PlayerContext } from '../util/PlayerContext';
import { SvgContext } from '../button/svg/SvgUtils';
import { ErrorSvg } from '../button/svg/ErrorSvg';
import { FULLSCREEN_CENTER_STYLE } from '../uicontroller/UiContainer';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * A fullscreen error component for the `react-native-theoplayer` UI.
 */
export function ErrorDisplay(props) {
  const {
    error
  } = props;
  return /*#__PURE__*/_jsx(PlayerContext.Consumer, {
    children: context => /*#__PURE__*/_jsxs(View, {
      style: [FULLSCREEN_CENTER_STYLE, {
        backgroundColor: context.style.colors.errorBackground
      }],
      children: [/*#__PURE__*/_jsxs(View, {
        style: {
          flexDirection: 'row'
        },
        children: [/*#__PURE__*/_jsx(SvgContext.Provider, {
          value: {
            fill: context.style.colors.icon,
            height: '100%',
            width: '100%'
          },
          children: /*#__PURE__*/_jsx(View, {
            style: {
              height: context.style.dimensions.controlBarHeight,
              aspectRatio: 1,
              padding: 5
            },
            children: /*#__PURE__*/_jsx(ErrorSvg, {})
          })
        }), /*#__PURE__*/_jsx(Text, {
          style: [context.style.text, {
            color: context.style.colors.text,
            alignSelf: 'center',
            paddingLeft: 5
          }],
          children: "Error:"
        })]
      }), /*#__PURE__*/_jsx(Text, {
        style: [context.style.text, {
          color: context.style.colors.text
        }],
        children: context.locale.errorMessage({
          error
        })
      })]
    })
  });
}
//# sourceMappingURL=ErrorDisplay.js.map