communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
220 lines • 13.4 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
/* @conditional-compile-remove(call-readiness) */
import { CameraAndMicrophoneSitePermissions, CameraSitePermissions, MicrophoneSitePermissions, _DrawerSurface } from "../../../../../react-components/src";
/* @conditional-compile-remove(call-readiness) */
import { _ModalClone } from "../../../../../react-components/src";
/* @conditional-compile-remove(call-readiness) */
import { drawerContainerStyles } from '../styles/CallComposite.styles';
/* @conditional-compile-remove(call-readiness) */ /* @conditional-compile-remove(unsupported-browser) */
import { _isSafari } from '../utils';
/* @conditional-compile-remove(call-readiness) */
const DRAWER_HIGH_Z_BAND = 99; // setting z index to 99 so that it sit above all components
/* @conditional-compile-remove(call-readiness) */
/**
* Modal that guides user through enabling their camera and mic access
* @private
*/
export const CallReadinessModal = (props) => {
const { mobileView, permissionsState,
/* @conditional-compile-remove(unsupported-browser) */ environmentInfo, isPermissionsModalDismissed, setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick } = props;
const onLightDismissTriggered = () => {
// do nothing here
// only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt
};
// On Safari browser with 2 options: don't allow/never for this website again, when don't allow is clicked, permissionAPI returns prompt and PermissionGranted from calling sdk returns false (the right value)
const videoState = permissionsState.camera;
const audioState = permissionsState.microphone;
const showModal = (!props.doNotPromptCamera && videoState === 'denied') ||
(!props.doNotPromptCamera && videoState === 'prompt') ||
audioState === 'denied' ||
audioState === 'prompt';
/* @conditional-compile-remove(unsupported-browser) */
const isSafari = _isSafari(environmentInfo);
const modal = !showModal
? undefined
: () => {
// if both video and audio permission are not set
if (videoState === 'prompt' && !props.doNotPromptCamera && audioState === 'prompt') {
return (React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app',
/* @conditional-compile-remove(unsupported-browser) */
browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
? () => {
onPermissionsTroubleshootingClick(permissionsState);
}
: undefined, kind: "request" }));
}
// if audio permission is set up but video is not
else if (videoState === 'prompt' && !props.doNotPromptCamera) {
return (React.createElement(CameraSitePermissions, { appName: 'app',
/* @conditional-compile-remove(unsupported-browser) */
browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
? () => {
onPermissionsTroubleshootingClick(permissionsState);
}
: undefined, onContinueAnywayClick: () => {
setIsPermissionsModalDismissed(false);
}, kind: "request" }));
}
// if video permission is set up but audio is not
else if (audioState === 'prompt') {
return (React.createElement(MicrophoneSitePermissions, { appName: 'app',
/* @conditional-compile-remove(unsupported-browser) */
browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
? () => {
onPermissionsTroubleshootingClick(permissionsState);
}
: undefined, kind: "request" }));
}
// if both video and audio are denied
else if (videoState === 'denied' && !props.doNotPromptCamera && audioState === 'denied') {
return (React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app',
/* @conditional-compile-remove(unsupported-browser) */
browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
? () => {
onPermissionsTroubleshootingClick(permissionsState);
}
: undefined, kind: "denied" }));
}
// if only video is denied
else if (videoState === 'denied' && !props.doNotPromptCamera) {
return (React.createElement(CameraSitePermissions, { appName: 'app',
/* @conditional-compile-remove(unsupported-browser) */
browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
? () => {
onPermissionsTroubleshootingClick(permissionsState);
}
: undefined, onContinueAnywayClick: () => {
setIsPermissionsModalDismissed(false);
}, kind: "denied" }));
}
// if only audio is denied
else {
return (React.createElement(MicrophoneSitePermissions, { appName: 'app',
/* @conditional-compile-remove(unsupported-browser) */
browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
? () => {
onPermissionsTroubleshootingClick(permissionsState);
}
: undefined, kind: "denied" }));
}
};
if (mobileView && modal !== undefined) {
return (React.createElement(React.Fragment, null, isPermissionsModalDismissed && (React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) }, modal()))));
}
else if (!mobileView && modal !== undefined) {
return (React.createElement(_ModalClone, { styles: {
root: { position: 'unset' },
main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
}, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
setIsPermissionsModalDismissed(false);
}, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } }, forceFocusInsideTrap: true, focusTrapZoneProps: {
disabled: false,
onKeyDown: (ev) => {
if (ev.key === 'Escape') {
setIsPermissionsModalDismissed(false);
}
}
} }, modal()));
}
else {
return React.createElement(React.Fragment, null);
}
};
/* @conditional-compile-remove(call-readiness) */
/**
* Modal that guides user through enabling their camera and mic access
* This is used when permission API is not supported
* @private
*/
export const CallReadinessModalFallBack = (props) => {
const { mobileView, checkPermissionModalShowing, permissionsState,
/* @conditional-compile-remove(unsupported-browser) */ environmentInfo, isPermissionsModalDismissed, setIsPermissionsModalDismissed, onPermissionsTroubleshootingClick } = props;
const onLightDismissTriggered = () => {
// do nothing here
// only way to dismiss this drawer is clicking on allow access which will leads to device permission prompt
};
const videoState = permissionsState.camera;
const audioState = permissionsState.microphone;
// When permissions are not set, do nothing here
// When permissions are set to denied, show helper screen
const showModal = videoState === 'denied' || audioState === 'denied';
/* @conditional-compile-remove(unsupported-browser) */
const isSafari = _isSafari(environmentInfo);
const modal = !showModal
? undefined
: () => {
if (videoState === 'denied' && audioState === 'denied') {
return (React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app',
/* @conditional-compile-remove(unsupported-browser) */
browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
? () => {
onPermissionsTroubleshootingClick(permissionsState);
}
: undefined, kind: "denied" }));
}
else if (videoState === 'denied' && audioState === 'granted') {
return (React.createElement(CameraSitePermissions, { appName: 'app',
/* @conditional-compile-remove(unsupported-browser) */
browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
? () => {
onPermissionsTroubleshootingClick(permissionsState);
}
: undefined, onContinueAnywayClick: () => {
setIsPermissionsModalDismissed(false);
}, kind: "denied" }));
}
else {
return (React.createElement(MicrophoneSitePermissions, { appName: 'app',
/* @conditional-compile-remove(unsupported-browser) */
browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
? () => {
onPermissionsTroubleshootingClick(permissionsState);
}
: undefined, kind: "denied" }));
}
};
if (mobileView) {
return (React.createElement(React.Fragment, null,
(checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) },
React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app',
/* @conditional-compile-remove(unsupported-browser) */
browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
? () => {
onPermissionsTroubleshootingClick(permissionsState);
}
: undefined, kind: "check" }))),
isPermissionsModalDismissed && !checkPermissionModalShowing && modal !== undefined && (React.createElement(_DrawerSurface, { disableMaxHeight: true, onLightDismiss: onLightDismissTriggered, styles: drawerContainerStyles(DRAWER_HIGH_Z_BAND) }, modal()))));
}
else {
return (React.createElement(React.Fragment, null,
(checkPermissionModalShowing || audioState === 'prompt' || videoState === 'prompt') && (React.createElement(_ModalClone, { styles: {
root: { position: 'unset' },
main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
}, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
setIsPermissionsModalDismissed(false);
}, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } } },
React.createElement(CameraAndMicrophoneSitePermissions, { appName: 'app',
/* @conditional-compile-remove(unsupported-browser) */
browserHint: isSafari ? 'safari' : 'unset', onTroubleshootingClick: onPermissionsTroubleshootingClick
? () => {
onPermissionsTroubleshootingClick(permissionsState);
}
: undefined, kind: "check" }))),
!checkPermissionModalShowing && modal !== undefined && (React.createElement(_ModalClone, { styles: {
root: { position: 'unset' },
main: { position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)' }
}, layerProps: { hostId: props.modalLayerHostId }, isOpen: isPermissionsModalDismissed, isBlocking: false, onDismiss: () => {
setIsPermissionsModalDismissed(false);
}, overlay: { styles: { root: { background: 'rgba(0,0,0,0.4)' } } } }, modal()))));
}
};
/**
* Placeholder for conditional compile
* @private
*/
export const CallReadinessModalPlaceHolder = () => {
return React.createElement(React.Fragment, null);
};
//# sourceMappingURL=CallReadinessModal.js.map