@azure/communication-react
Version:
React library for building modern communication user experiences utilizing Azure Communication Services
73 lines • 4.33 kB
JavaScript
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.
import React, { useMemo } from 'react';
import { _LocalVideoTile, _RemoteVideoTile, _PictureInPictureInPicture } from "../../../../../react-components/src";
import { useLocale } from '../../localization';
/**
* @private
*/
export const LocalAndRemotePIP = (props) => {
var _a, _b;
const { localParticipant, remoteParticipant, onCreateLocalStreamView, onDisposeLocalStreamView, onCreateRemoteStreamView, onDisposeRemoteStreamView } = props;
const localVideoTileProps = useMemo(() => {
var _a, _b;
return ({
onCreateLocalStreamView,
onDisposeLocalStreamView,
localVideoViewOptions,
displayName: localParticipant.displayName,
showLabel: false,
showMuteIndicator: false,
showCameraSwitcherInLocalPreview: false,
isAvailable: (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
renderElement: (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
raisedHand: localParticipant.raisedHand
});
}, [localParticipant.displayName, (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateLocalStreamView, onDisposeLocalStreamView, localParticipant.raisedHand]);
const remoteVideoTileProps = useMemo(() => {
var _a, _b, _c;
return !remoteParticipant ? undefined : {
remoteParticipant: remoteParticipant,
onCreateRemoteStreamView,
onDisposeRemoteStreamView,
remoteVideoViewOptions,
displayName: remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.displayName,
showLabel: false,
showMuteIndicator: false,
isAvailable: (_a = remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
isReceiving: (_b = remoteParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.isReceiving,
renderElement: (_c = remoteParticipant.videoStream) === null || _c === void 0 ? void 0 : _c.renderElement,
userId: remoteParticipant.userId,
key: remoteParticipant.userId
};
}, [remoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]);
const locale = useLocale();
const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;
const strings = useMemo(() => ({
rootAriaLabel: ariaLabel
}), [ariaLabel]);
// If there are no remote participants, show the local participant as the primary tile
const primaryTileProps = useMemo(() => ({
children: remoteVideoTileProps ? React.createElement(_RemoteVideoTile, Object.assign({}, remoteVideoTileProps, { strings: locale.component.strings.videoGallery, onLongTouch: () => {
/* Add to disable scaling */
} })) : React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps)),
// TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
orientation: 'portrait'
}), [localVideoTileProps, remoteVideoTileProps, locale.component.strings.videoGallery]);
// If we are showing the local participant as the primary tile, show nothing for the secondary tile
const secondaryTileProps = useMemo(() => remoteVideoTileProps ? {
children: React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps, { personaMinSize: 20 })),
// TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
orientation: 'portrait'
} : undefined, [localVideoTileProps, remoteVideoTileProps]);
return React.createElement(_PictureInPictureInPicture, { onClick: props.onClick, strings: strings, primaryTile: primaryTileProps, secondaryTile: secondaryTileProps });
};
const localVideoViewOptions = {
scalingMode: 'Crop',
isMirrored: true
};
const remoteVideoViewOptions = {
scalingMode: 'Crop',
isMirrored: false
};
//# sourceMappingURL=LocalAndRemotePIP.js.map