@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
101 lines • 7.13 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
import { mergeStyles, Stack, Text } from '@fluentui/react';
import { CameraButton, ControlBar, MicrophoneButton, DevicesButton, StreamMedia, useTheme, VideoTile } from "../../../../../react-components/src";
import React, { useCallback } from 'react';
import { CallCompositeIcon } from '../../common/icons';
import { useLocale } from '../../localization';
import { useAdapter } from '../adapter/CallAdapterProvider';
import { usePropsFor } from '../hooks/usePropsFor';
import { useSelector } from '../hooks/useSelector';
import { getLocalMicrophoneEnabled } from '../selectors/baseSelectors';
import { devicePermissionSelector } from '../selectors/devicePermissionSelector';
import { localPreviewSelector } from '../selectors/localPreviewSelector';
import { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';
import { cameraOffLabelStyle, localPreviewButtonStyle, localPreviewContainerStyleDesktop, localPreviewContainerStyleMobile, localPreviewTileStyle } from '../styles/LocalPreview.styles';
/**
* @private
*/
export const LocalPreview = (props) => {
var _a;
const locale = useLocale();
const cameraButtonProps = usePropsFor(CameraButton);
const localPreviewProps = useSelector(localPreviewSelector);
const devicesButtonProps = usePropsFor(DevicesButton);
const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector(devicePermissionSelector);
const isLocalMicrophoneEnabled = useSelector(getLocalMicrophoneEnabled);
const adapter = useAdapter();
const onToggleMic = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
if (isLocalMicrophoneEnabled) {
adapter.mute();
}
else {
adapter.unmute();
}
}), [adapter, isLocalMicrophoneEnabled]);
const hasNoSpeakers = !devicesButtonProps.speakers.length;
const hasNoDevices = devicesButtonProps.cameras.length === 0 && devicesButtonProps.microphones.length === 0 && devicesButtonProps.speakers.length === 0;
const hasCameras = devicesButtonProps.cameras.length > 0;
const hasMicrophones = devicesButtonProps.microphones.length > 0;
const cameraLoadingString = (_a = locale.strings.call.configurationPageCameraIsLoadingLabel) !== null && _a !== void 0 ? _a : locale.strings.call.cameraTurnedOff;
const previewCameraString = props.cameraLoading ? cameraLoadingString : locale.strings.call.cameraTurnedOff;
const theme = useTheme();
const onRenderPlaceholder = useCallback(() => {
return React.createElement(Stack, { className: mergeStyles({
width: '100%',
height: '100%',
// The text should be centered in the local preview with the camera icon
// appearing above the text. To compensate for the camera icon's height,
// we add a negative margin to the top of the container.
marginTop: '-0.8rem'
}), verticalAlign: "center" },
React.createElement(Stack.Item, { align: "center" },
React.createElement(CallCompositeIcon, { iconName: "LocalPreviewPlaceholder", className: mergeStyles(cameraOffLabelStyle, {
color: theme.palette.neutralTertiary
}) })),
React.createElement(Stack.Item, { align: "center" },
React.createElement(Text, { className: mergeStyles(cameraOffLabelStyle, {
color: theme.palette.neutralSecondary
}) }, previewCameraString)));
}, [theme, previewCameraString]);
const devicesButtonStyles = props.mobileView ? {
menuStyles: {
menuItemStyles: buttonFlyoutIncreasedSizeStyles
}
} : undefined;
return React.createElement(Stack, { "data-ui-id": "call-composite-local-preview", className: props.mobileView ? localPreviewContainerStyleMobile(theme) : localPreviewContainerStyleDesktop(theme) },
React.createElement(VideoTile, { styles: localPreviewTileStyle, renderElement: (localPreviewProps === null || localPreviewProps === void 0 ? void 0 : localPreviewProps.videoStreamElement) ? React.createElement(StreamMedia, { videoStreamElement: localPreviewProps.videoStreamElement }) : undefined, onRenderPlaceholder: onRenderPlaceholder },
React.createElement(ControlBar, { layout: "floatingBottom" },
React.createElement(MicrophoneButton, { "data-ui-id": "call-composite-local-device-settings-microphone-button", checked: isLocalMicrophoneEnabled, onToggleMicrophone: onToggleMic, disabled: !microphonePermissionGranted || !hasMicrophones, showLabel: true,
// disable tooltip as it obscures list of devices on mobile
strings: props.mobileView ? {
tooltipOnContent: '',
tooltipOffContent: '',
tooltipDisabledContent: ''
} : {}, styles: localPreviewButtonStyle(props.mobileView) }),
React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-camera-button" }, cameraButtonProps, { onToggleCamera: props.onToggleCamera, showLabel: true, disabled: !cameraPermissionGranted || !hasCameras || props.cameraLoading,
// disable tooltip as it obscures list of devices on mobile
strings: props.mobileView ? {
tooltipOnContent: '',
tooltipOffContent: '',
tooltipDisabledContent: '',
tooltipVideoLoadingContent: ''
} : {}, styles: localPreviewButtonStyle(props.mobileView) })),
props.showDevicesButton && React.createElement(DevicesButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-options-button" }, devicesButtonProps, {
// disable button whilst all other buttons are disabled
disabled: !microphonePermissionGranted && !cameraPermissionGranted && hasNoSpeakers || hasNoDevices, showLabel: true,
// disable tooltip as it obscures list of devices on mobile
strings: props.mobileView ? {
tooltipContent: ''
} : {}, styles: devicesButtonStyles })))));
};
//# sourceMappingURL=LocalPreview.js.map