@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
46 lines • 3.77 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Icon, Stack, Text } from '@fluentui/react';
import React, { useEffect } from 'react';
import { useLocale } from '../../localization';
import { useTheme } from '../../theming';
import { VideoTile } from '../VideoTile';
import { StreamMedia } from '../StreamMedia';
import { LoadingSpinner } from './RemoteScreenShare';
import { screenSharingContainerStyle, screenSharingNotificationContainerStyle, screenSharingNotificationIconContainerStyle, screenSharingNotificationIconStyle, screenSharingNotificationTextStyle } from './styles/LocalScreenShare.styles';
/**
* A memoized version of local screen share component. React.memo is used for a performance
* boost by memoizing the same rendered component to avoid rerendering this when the parent component rerenders.
* https://reactjs.org/docs/react-api.html#reactmemo
*/
export const LocalScreenShare = React.memo((props) => {
const { localParticipant, renderElement, isAvailable, onCreateLocalStreamView, onDisposeLocalScreenShareStreamView, localScreenShareView = 'stream' } = props;
const locale = useLocale();
const theme = useTheme();
if (!renderElement && localScreenShareView === 'stream') {
onCreateLocalStreamView && onCreateLocalStreamView();
}
useEffect(() => {
return () => {
// TODO: Isolate disposing behaviors for screenShare and videoStream
onDisposeLocalScreenShareStreamView && onDisposeLocalScreenShareStreamView();
};
}, [onDisposeLocalScreenShareStreamView]);
if (!localParticipant || !localParticipant.isScreenSharingOn) {
return null;
}
const localScreenSharingPlaceholder = React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingContainerStyle },
React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: screenSharingNotificationContainerStyle(theme), tokens: {
childrenGap: '1rem'
} },
React.createElement(Stack, { horizontal: true, verticalAlign: "center", className: screenSharingNotificationIconContainerStyle },
React.createElement(Icon, { iconName: "ControlButtonScreenShareStart", className: screenSharingNotificationIconStyle(theme) })),
React.createElement(Text, { className: screenSharingNotificationTextStyle, "aria-live": "polite" }, locale.strings.videoGallery.screenIsBeingSharedMessage)));
const displayName = !(localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName) ? locale.strings.videoGallery.displayNamePlaceholder : localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.displayName;
const loadingMessage = locale.strings.videoGallery.localScreenShareLoadingMessage;
if (localScreenShareView === 'placeholderMessage') {
return React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, onRenderPlaceholder: () => React.createElement(React.Fragment, null) }, localScreenSharingPlaceholder);
}
return React.createElement(VideoTile, { displayName: displayName, isMuted: localParticipant === null || localParticipant === void 0 ? void 0 : localParticipant.isMuted, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isAvailable === false ? 'loading' : 'none' }) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), mediaAccess: localParticipant.mediaAccess });
});
//# sourceMappingURL=LocalScreenShare.js.map