communication-react-19
Version:
React library for building modern communication user experiences utilizing Azure Communication Services (React 19 compatible fork)
77 lines • 3.9 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useLayoutEffect, useRef, useState } from 'react';
import { ParticipantVideoTileOverlay } from './VideoGallery/ParticipantVideoTileOverlay';
import { RemoteContentShareReactionOverlay } from './VideoGallery/RemoteContentShareReactionOverlay';
import { TogetherModeOverlay } from './TogetherModeOverlay';
import { togetherModeMeetingOverlayStyle } from './styles/TogetherMode.styles';
/**
* Emoji max size
* @internal
*/
const DEFAULT_EMOJI_MAX_SIZE_PX = 70;
/**
* Emoji min size
* @internal
*/
const DEFAULT_EMOJI_MIN_SIZE_PX = 32;
/**
* Emoji resize scale constant
* @internal
*/
const REACTION_EMOJI_RESIZE_SCALE_CONSTANT = 3;
/**
* Reaction overlay component
*
* Can be used with {@link VideoTile}.
*
* @internal
*/
export const MeetingReactionOverlay = (props) => {
const { overlayMode, reaction, reactionResources, localParticipant, remoteParticipants, togetherModeSeatPositions } = props;
const [emojiSizePx, setEmojiSizePx] = useState(0);
const [divHeight, setDivHeight] = useState(0);
const [divWidth, setDivWidth] = useState(0);
const videoTileRef = useRef(null);
const observer = useRef(new ResizeObserver((entries) => {
var _a;
const domRect = (_a = entries.at(0)) === null || _a === void 0 ? void 0 : _a.contentRect;
const width = domRect !== undefined ? domRect.width : 0;
const height = domRect !== undefined ? domRect.height : 0;
const reactionEmojiCalcSize = Math.min(width, height) / REACTION_EMOJI_RESIZE_SCALE_CONSTANT;
// we only want to set the persona size if it has changed
if (reactionEmojiCalcSize !== emojiSizePx) {
setEmojiSizePx(Math.max(Math.min(reactionEmojiCalcSize, DEFAULT_EMOJI_MAX_SIZE_PX), DEFAULT_EMOJI_MIN_SIZE_PX));
}
if (height !== divHeight) {
setDivHeight(height);
}
if (width !== divWidth) {
setDivWidth(width);
}
}));
useLayoutEffect(() => {
if (videoTileRef.current) {
observer.current.observe(videoTileRef.current);
}
const currentObserver = observer.current;
return () => currentObserver.disconnect();
}, [videoTileRef]);
if (overlayMode === 'grid-tiles') {
return (React.createElement("div", { ref: videoTileRef, style: { width: '100%', height: '100%', pointerEvents: 'none' } },
React.createElement(ParticipantVideoTileOverlay, { emojiSize: emojiSizePx, reaction: reaction, reactionResources: reactionResources })));
}
else if (props.overlayMode === 'screen-share' || props.overlayMode === 'content-share') {
return (React.createElement("div", { ref: videoTileRef, style: { width: '100%', height: '100%', pointerEvents: 'none' } },
React.createElement(RemoteContentShareReactionOverlay, { hostDivHeight: divHeight, hostDivWidth: divWidth, reactionResources: reactionResources, localParticipant: localParticipant, remoteParticipants: remoteParticipants })));
}
else if (props.overlayMode === 'together-mode') {
return (React.createElement("div", { style: Object.assign({}, togetherModeMeetingOverlayStyle) },
React.createElement(TogetherModeOverlay, { emojiSize: emojiSizePx, reactionResources: reactionResources, localParticipant: localParticipant !== null && localParticipant !== void 0 ? localParticipant : {}, remoteParticipants: remoteParticipants !== null && remoteParticipants !== void 0 ? remoteParticipants : [], togetherModeSeatPositions: togetherModeSeatPositions !== null && togetherModeSeatPositions !== void 0 ? togetherModeSeatPositions : {} })));
return React.createElement(React.Fragment, null);
}
else {
return React.createElement(React.Fragment, null);
}
};
//# sourceMappingURL=MeetingReactionOverlay.js.map