communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
53 lines • 3.35 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import { Spinner, SpinnerSize, Stack } from '@fluentui/react';
import React, { useEffect } from 'react';
import { useLocale } from '../../localization';
import { StreamMedia } from '../StreamMedia';
import { VideoTile } from '../VideoTile';
import { loadingLabelStyles, loadingStyle } from './styles/RemoteScreenShare.styles';
import { _formatString } from "../../../../acs-ui-common/src";
import { MeetingReactionOverlay } from '../MeetingReactionOverlay';
/**
* A memoized version of VideoTile for rendering the remote screen share stream. 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 RemoteScreenShare = React.memo((props) => {
const { userId, displayName, isMuted, renderElement, onCreateRemoteStreamView, onDisposeRemoteStreamView, isReceiving, participantVideoScalingMode, reactionResources, localParticipant, remoteParticipants } = props;
const locale = useLocale();
if (!renderElement) {
/**
* TODO: We need to pass in the scaling mode of the screen share participant to this function because when we
* call this it will recreate both streams (video and screen share) and we need to make sure that the scaling
* mode is the same as before we started the screen share.
*
* We should deprecate the current function and replace it with a
* createRemoteScreenShareStreamView and createRemoteVideoStreamView.
*/
onCreateRemoteStreamView && onCreateRemoteStreamView(userId, participantVideoScalingMode);
}
useEffect(() => {
return () => {
// TODO: Isolate disposing behaviors for screenShare and videoStream
onDisposeRemoteStreamView && onDisposeRemoteStreamView(userId);
};
}, [onDisposeRemoteStreamView, userId]);
const loadingMessage = displayName
? _formatString(locale.strings.videoGallery.screenShareLoadingMessage, {
participant: displayName
})
: '';
return (React.createElement(VideoTile, { displayName: displayName, isMuted: isMuted, renderElement: renderElement ? (React.createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' })) : undefined, onRenderPlaceholder: () => React.createElement(LoadingSpinner, { loadingMessage: loadingMessage }), overlay: reactionResources && (React.createElement(MeetingReactionOverlay, { reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants, overlayMode: "screen-share" })) }));
});
/**
* LoadingSpinner component for displaying a loading spinner.
*
* @param {string} props.loadingMessage - The loading message to display.
* @returns {JSX.Element} The JSX element representing the loading spinner.
*/
export const LoadingSpinner = (props) => {
return (React.createElement(Stack, { verticalAlign: "center", className: loadingStyle },
React.createElement(Spinner, { styles: loadingLabelStyles, label: props.loadingMessage, size: SpinnerSize.xSmall, "aria-live": 'assertive' })));
};
//# sourceMappingURL=RemoteScreenShare.js.map