@100mslive/react-native-room-kit/lib/module/components/PeerVideoTile/VideoView.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 { View, Text, StyleSheet } from 'react-native';
import { useSelector } from 'react-redux';
import { BlurView } from '@react-native-community/blur';
import { useHMSRoomStyleSheet } from '../../hooks-util';
import { HMSPinchGesture } from './HMSPinchGesture';
import { AlertTriangleIcon } from '../../Icons';
const _VideoView = /*#__PURE__*/React.forwardRef(({
  trackId,
  peer,
  overlay,
  isDegraded,
  scaleType,
  containerStyle,
  zoomIn = false
}, hmsViewRef) => {
  const HmsView = useSelector(state => {
    var _state$user$hmsInstan;
    return ((_state$user$hmsInstan = state.user.hmsInstance) === null || _state$user$hmsInstan === void 0 ? void 0 : _state$user$hmsInstan.HmsView) || null;
  });
  const mirrorCamera = useSelector(state => state.app.joinConfig.mirrorCamera);
  const autoSimulcast = useSelector(state => state.app.joinConfig.autoSimulcast);
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    degradedView: {
      backgroundColor: theme.palette.surface_default
    },
    degradedText: {
      color: theme.palette.on_surface_high,
      fontFamily: `${typography.font_family}-Regular`
    },
    icon: {
      tintColor: theme.palette.on_surface_high
    }
  }));
  if (!HmsView) {
    return null;
  }
  const videoView = /*#__PURE__*/React.createElement(View, {
    style: [styles.container, containerStyle]
  }, /*#__PURE__*/React.createElement(HmsView, {
    ref: hmsViewRef,
    setZOrderMediaOverlay: overlay,
    trackId: trackId,
    key: trackId,
    autoSimulcast: autoSimulcast,
    mirror: peer.isLocal ? mirrorCamera : false,
    scaleType: scaleType,
    style: styles.hmsView
  }));
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, zoomIn ? /*#__PURE__*/React.createElement(HMSPinchGesture, {
    style: styles.container
  }, videoView) : videoView, isDegraded ? /*#__PURE__*/React.createElement(View, {
    style: styles.degradedView
  }, /*#__PURE__*/React.createElement(BlurView, {
    style: styles.blurView,
    blurType: "dark",
    blurAmount: 24
  }), /*#__PURE__*/React.createElement(AlertTriangleIcon, {
    type: "fill",
    style: [styles.icon, hmsRoomStyles.icon]
  }), /*#__PURE__*/React.createElement(Text, {
    numberOfLines: 2,
    style: [styles.degradedText, hmsRoomStyles.degradedText]
  }, peer.isLocal ? 'Your' : `${peer.name}'s`, " network is unstable")) : null);
});
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  hmsView: {
    flex: 1
    // height: '100%',
    // width: '100%',
  },
  degradedView: {
    flex: 1,
    position: 'absolute',
    height: '100%',
    width: '100%',
    zIndex: 2,
    alignItems: 'center',
    justifyContent: 'center'
  },
  blurView: {
    flex: 1,
    position: 'absolute',
    height: '100%',
    width: '100%'
  },
  degradedText: {
    fontSize: 12,
    lineHeight: 16,
    letterSpacing: 0.4,
    marginTop: 8,
    textAlign: 'center',
    paddingHorizontal: 8
  },
  icon: {
    width: 32,
    height: 32
  }
});
export const VideoView = /*#__PURE__*/React.memo(_VideoView);
//# sourceMappingURL=VideoView.js.map