@100mslive/react-native-room-kit/lib/module/components/HMSPreviewJoinButton.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 } from 'react-native';
import { shallowEqual, useSelector } from 'react-redux';
import { RadioIcon } from '../Icons';
import { useHMSLayoutConfig, useHMSRoomStyleSheet, useShouldGoLive } from '../hooks-util';
import { HMSPrimaryButton } from './HMSPrimaryButton';
import { TestIds } from '../utils/constants';
export const HMSPreviewJoinButton = ({
  loading,
  onJoin
}) => {
  const userNameInvalid = useSelector(state => state.user.userName.length <= 0);
  const joinButtonLabels = useHMSLayoutConfig(layoutConfig => {
    var _layoutConfig$screens;
    const joinLayoutConfig = layoutConfig === null || layoutConfig === void 0 || (_layoutConfig$screens = layoutConfig.screens) === null || _layoutConfig$screens === void 0 || (_layoutConfig$screens = _layoutConfig$screens.preview) === 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.join_form;
    return {
      joinBtnLabel: (joinLayoutConfig === null || joinLayoutConfig === void 0 ? void 0 : joinLayoutConfig.join_btn_label) || 'Join Now',
      goLiveBtnLabel: (joinLayoutConfig === null || joinLayoutConfig === void 0 ? void 0 : joinLayoutConfig.go_live_btn_label) || 'Go Live'
    };
  }, shallowEqual);
  const shouldGoLive = useShouldGoLive();
  const hmsRoomStyles = useHMSRoomStyleSheet(theme => ({
    disabledLiveIcon: {
      tintColor: theme.palette.on_primary_low
    },
    activeLiveIcon: {
      tintColor: theme.palette.on_primary_high
    }
  }));
  const disabledJoin = userNameInvalid || loading;
  return /*#__PURE__*/React.createElement(HMSPrimaryButton, {
    testId: shouldGoLive ? TestIds.go_live_btn : TestIds.join_now_btn,
    loading: loading,
    onPress: onJoin,
    title: shouldGoLive ? joinButtonLabels.goLiveBtnLabel : joinButtonLabels.joinBtnLabel,
    disabled: disabledJoin,
    leftComponent: shouldGoLive ? /*#__PURE__*/React.createElement(RadioIcon, {
      style: disabledJoin ? hmsRoomStyles.disabledLiveIcon : hmsRoomStyles.activeLiveIcon
    }) : null,
    style: styles.button
  });
};
const styles = StyleSheet.create({
  button: {
    marginLeft: 16
  }
});
//# sourceMappingURL=HMSPreviewJoinButton.js.map