@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
31 lines • 2.04 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useEffect } from 'react';
import { mergeStyles, Stack } from '@fluentui/react';
import { StreamMedia, VideoTile } from "../../../../../react-components/src";
import { containerStyles, overlayBackgroundStyles, overlayContentStyles, videoTileStyles } from '../styles/ExpandedLocalVideoTile.styles';
const onRenderEmptyPlaceholder = () => React.createElement(React.Fragment, null);
const localVideoViewOptions = {
scalingMode: 'Crop',
isMirrored: true
};
/**
* @private
*/
export const ExpandedLocalVideoTile = (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 renderElement = videoStream === null || videoStream === void 0 ? void 0 : videoStream.renderElement;
useEffect(() => {
var _a;
if (videoStream && isVideoReady) {
(_a = props.onCreateLocalStreamView) === null || _a === void 0 ? void 0 : _a.call(props, localVideoViewOptions).catch(err => console.log('Can not render video', err));
}
}, [isVideoReady, videoStream, props, renderElement]);
return React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", styles: containerStyles, grow: true },
React.createElement(VideoTile, { styles: videoTileStyles, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement }) : undefined, onRenderPlaceholder: onRenderEmptyPlaceholder }, props.overlayContent && React.createElement(React.Fragment, null,
React.createElement(Stack, { className: mergeStyles(overlayBackgroundStyles(isVideoReady)) }),
React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContentStyles) }, props.overlayContent))));
};
//# sourceMappingURL=ExpandedLocalVideoTile.js.map