@100mslive/react-native-room-kit/lib/module/components/HMSHandRaiseNotification.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 { StyleSheet, Text, TouchableHighlight } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import { HandIcon } from '../Icons';
import { useHMSInstance, useHMSLayoutConfig, useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
import { HMSNotification } from './HMSNotification';
import { useDispatch, useSelector } from 'react-redux';
import { removeNotification } from '../redux/actions';
export const HMSHandRaiseNotification = ({
  peer,
  id,
  dismissDelay = 5000,
  autoDismiss
}) => {
  const dispatch = useDispatch();
  const hmsInstance = useHMSInstance();
  const onStageExpData = useHMSLayoutConfig(layoutConfig => {
    var _layoutConfig$screens;
    return layoutConfig === null || layoutConfig === void 0 || (_layoutConfig$screens = layoutConfig.screens) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.conferencing) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.default) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.elements) === null || _layoutConfig$screens === void 0 ? void 0 : _layoutConfig$screens.on_stage_exp;
  });
  const onStageRole = useSelector(state => {
    const onStageRoleStr = onStageExpData === null || onStageExpData === void 0 ? void 0 : onStageExpData.on_stage_role;
    if (!onStageRoleStr) {
      return null;
    }
    return state.hmsStates.roles.find(role => role.name === onStageRoleStr) || null;
  });
  const {
    secondary_dim: secondaryDimColor
  } = useHMSRoomColorPalette();
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    button: {
      backgroundColor: theme.palette.secondary_default
    },
    buttonText: {
      color: theme.palette.on_secondary_high,
      fontFamily: `${typography.font_family}-SemiBold`
    }
  }));
  const bringPeerToStage = async () => {
    if (!onStageRole) {
      return Promise.reject(`${onStageExpData ? '"on_stage_role"' : '"on_stage_exp"'} data is not available`);
    }
    dispatch(removeNotification(id));
    await hmsInstance.changeRoleOfPeer(peer, onStageRole, (onStageExpData === null || onStageExpData === void 0 ? void 0 : onStageExpData.skip_preview_for_role_change) || false);
  };
  return /*#__PURE__*/React.createElement(HMSNotification, {
    id: id,
    icon: /*#__PURE__*/React.createElement(HandIcon, null),
    text: `${peer.name} raised hand`,
    dismissDelay: dismissDelay,
    autoDismiss: autoDismiss,
    cta: /*#__PURE__*/React.createElement(GestureDetector, {
      gesture: Gesture.Tap()
    }, /*#__PURE__*/React.createElement(TouchableHighlight, {
      underlayColor: secondaryDimColor,
      style: [styles.button, hmsRoomStyles.button],
      onPress: bringPeerToStage
    }, /*#__PURE__*/React.createElement(Text, {
      style: [styles.buttonText, hmsRoomStyles.buttonText]
    }, (onStageExpData === null || onStageExpData === void 0 ? void 0 : onStageExpData.bring_to_stage_label) || 'Bring to Stage')))
  });
};
const styles = StyleSheet.create({
  button: {
    paddingVertical: 8,
    paddingHorizontal: 16,
    borderRadius: 8,
    marginRight: 16
  },
  buttonText: {
    fontSize: 14,
    lineHeight: 20,
    letterSpacing: 0.25
  }
});
//# sourceMappingURL=HMSHandRaiseNotification.js.map