communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
57 lines • 4.44 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useEffect, useMemo, memo, useState } from 'react';
import { StreamMedia } from '../StreamMedia';
import { MeetingReactionOverlay } from '../MeetingReactionOverlay';
import { Stack } from '@fluentui/react';
import { togetherModeStreamRootStyle } from '../styles/TogetherMode.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 TogetherModeStream = memo((props) => {
var _a, _b, _c, _d;
const { startTogetherModeEnabled, isTogetherModeActive, onCreateTogetherModeStreamView, onStartTogetherMode, onSetTogetherModeSceneSize, onDisposeTogetherModeStreamView, togetherModeStreams, containerWidth, containerHeight } = props;
const [showLoadingIndicator, setShowLoadingIndicator] = useState(false);
useEffect(() => {
return () => {
// TODO: Isolate disposing behaviors for screenShare and videoStream
onDisposeTogetherModeStreamView && onDisposeTogetherModeStreamView();
};
}, [onDisposeTogetherModeStreamView]);
// Trigger startTogetherMode only when needed
useEffect(() => {
if (startTogetherModeEnabled && !isTogetherModeActive) {
onStartTogetherMode === null || onStartTogetherMode === void 0 ? void 0 : onStartTogetherMode();
}
}, [startTogetherModeEnabled, isTogetherModeActive, onStartTogetherMode]);
// Create stream view if not already created
useEffect(() => {
var _a, _b;
if (((_a = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _a === void 0 ? void 0 : _a.isAvailable) && !((_b = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _b === void 0 ? void 0 : _b.renderElement)) {
onCreateTogetherModeStreamView === null || onCreateTogetherModeStreamView === void 0 ? void 0 : onCreateTogetherModeStreamView();
}
}, [
(_a = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _a === void 0 ? void 0 : _a.renderElement,
(_b = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _b === void 0 ? void 0 : _b.isAvailable,
onCreateTogetherModeStreamView
]);
// Re-render the component if mainVideoStream isReceiving changes
useEffect(() => {
var _a;
setShowLoadingIndicator(!((_a = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _a === void 0 ? void 0 : _a.isReceiving));
// This effect will trigger a re-render when isReceiving changes
}, [(_c = togetherModeStreams === null || togetherModeStreams === void 0 ? void 0 : togetherModeStreams.mainVideoStream) === null || _c === void 0 ? void 0 : _c.isReceiving]);
// Update scene size only when container dimensions change
useMemo(() => {
if (onSetTogetherModeSceneSize && containerWidth && containerHeight) {
onSetTogetherModeSceneSize(containerWidth, containerHeight);
}
}, [onSetTogetherModeSceneSize, containerWidth, containerHeight]);
const stream = (_d = props.togetherModeStreams) === null || _d === void 0 ? void 0 : _d.mainVideoStream;
return containerWidth && containerHeight ? (React.createElement(Stack, { styles: togetherModeStreamRootStyle, horizontalAlign: "center", verticalAlign: "center", "data-ui-id": "together-mode-layout" },
React.createElement(StreamMedia, { videoStreamElement: (stream === null || stream === void 0 ? void 0 : stream.renderElement) || null, isMirrored: true, loadingState: showLoadingIndicator ? 'loading' : 'none' }),
React.createElement(MeetingReactionOverlay, { reactionResources: props.reactionResources || {}, localParticipant: props.localParticipant, remoteParticipants: props.remoteParticipants, togetherModeSeatPositions: props.seatingCoordinates, overlayMode: "together-mode" }))) : (React.createElement(React.Fragment, null));
});
//# sourceMappingURL=TogetherModeStream.js.map