@100mslive/react-native-room-kit/lib/module/components/HMSManageVirtualBackground.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 { useSelector } from 'react-redux';
import { VirtualBackgroundIcon } from '../Icons';
import { useCanPublishVideo } from '../hooks-sdk';
import { PressableIcon } from './PressableIcon';
import { useHMSRoomStyle, useModalType } from '../hooks-util';
import { VirtualBackgroundBottomSheet } from './VirtualBackgroundBottomSheet';
import { ModalTypes } from '../utils/types';
export const HMSManageVirtualBackground = ({
  style
}) => {
  const canPublishVideo = useCanPublishVideo();
  const videoPluginExists = useSelector(state => !!state.hmsStates.videoPlugin);
  if (!canPublishVideo || !videoPluginExists) {
    return null;
  }
  return /*#__PURE__*/React.createElement(VirtualBackgroundButton, {
    style: style
  });
};
const VirtualBackgroundButton = ({
  style
}) => {
  const {
    handleModalVisibleType
  } = useModalType();
  const isLocalVideoMuted = useSelector(state => state.hmsStates.isLocalVideoMuted);
  const videoPluginExists = useSelector(state => !!state.hmsStates.videoPlugin);
  const handleVideoMuteTogglePress = async () => {
    if (isLocalVideoMuted || !videoPluginExists) {
      return;
    }
    handleModalVisibleType(ModalTypes.VIRTUAL_BACKGROUND);
  };
  const cameraIconStyles = useHMSRoomStyle(theme => ({
    tintColor: isLocalVideoMuted ? theme.palette.on_surface_low : theme.palette.on_surface_high
  }), [isLocalVideoMuted]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PressableIcon, {
    onPress: handleVideoMuteTogglePress,
    disabled: isLocalVideoMuted,
    style: style
  }, /*#__PURE__*/React.createElement(VirtualBackgroundIcon, {
    style: cameraIconStyles
  })), /*#__PURE__*/React.createElement(VirtualBackgroundBottomSheet, null));
};
//# sourceMappingURL=HMSManageVirtualBackground.js.map