@100mslive/react-native-room-kit/lib/module/components/ReconnectionView.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import { useSelector } from 'react-redux';
import { BlurView } from '@react-native-community/blur';
import { AlertTriangleIcon } from '../Icons';
import { useHMSRoomStyleSheet } from '../hooks-util';
export const _ReconnectionView = () => {
  const reconnecting = useSelector(state => state.hmsStates.reconnecting);
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    degradedText: {
      color: theme.palette.on_surface_high,
      fontFamily: `${typography.font_family}-Regular`
    },
    icon: {
      tintColor: theme.palette.on_surface_high
    }
  }));
  if (!reconnecting) {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: [StyleSheet.absoluteFill, styles.container]
  }, /*#__PURE__*/React.createElement(BlurView, {
    style: StyleSheet.absoluteFill,
    blurType: "dark",
    blurRadius: 25,
    blurAmount: Platform.OS === 'ios' ? 4 : 32,
    downsampleFactor: 25
  }), /*#__PURE__*/React.createElement(AlertTriangleIcon, {
    type: "fill",
    style: [styles.icon, hmsRoomStyles.icon]
  }), /*#__PURE__*/React.createElement(Text, {
    numberOfLines: 2,
    style: [styles.degradedText, hmsRoomStyles.degradedText]
  }, "Your network is unstable"));
};
export const ReconnectionView = /*#__PURE__*/React.memo(_ReconnectionView);
const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  icon: {
    width: 32,
    height: 32
  },
  degradedText: {
    fontSize: 16,
    lineHeight: 24,
    letterSpacing: 0.4,
    marginTop: 8,
    textAlign: 'center',
    paddingHorizontal: 8
  }
});
//# sourceMappingURL=ReconnectionView.js.map