@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
29 lines • 2.45 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React from 'react';
import { mergeStyles, Stack, Text } from '@fluentui/react';
import { LocalVideoCameraCycleButton, useTheme } from "../../../../../react-components/src";
import { localCameraSwitcherContainerStyles, moreDetailsStyle, overlayContainerStyle, titleStyle } from '../styles/LobbyTile.styles';
import { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';
import { useHandlers } from '../hooks/useHandlers';
import { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';
import { useSelector } from '../hooks/useSelector';
/**
* @private
*/
export const LobbyTile = (props) => {
var _a;
const videoStream = props.localParticipantVideoStream;
const isVideoReady = (_a = videoStream === null || videoStream === void 0 ? void 0 : videoStream.isAvailable) !== null && _a !== void 0 ? _a : false;
const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);
const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);
const palette = useTheme().palette;
const handlers = useHandlers(ExpandedLocalVideoTile);
return React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: props.overlayProps ? React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContainerStyle), "aria-atomic": true },
props.showLocalVideoCameraCycleButton && isVideoReady && React.createElement(Stack.Item, { styles: localCameraSwitcherContainerStyles },
React.createElement(LocalVideoCameraCycleButton, Object.assign({}, cameraSwitcherCallback, cameraSwitcherCameras, { size: 'large' }))),
React.createElement(Stack.Item, { className: mergeStyles(titleStyle(palette, isVideoReady)) }, props.overlayProps.overlayIcon),
React.createElement(Text, { className: mergeStyles(titleStyle(palette, isVideoReady)), "aria-live": "assertive", "data-ui-id": "lobbyScreenTitle", role: "alert" }, props.overlayProps.title),
props.overlayProps.moreDetails && React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": "assertive" }, props.overlayProps.moreDetails)) : undefined }, handlers));
};
//# sourceMappingURL=LobbyTile.js.map