@azure/communication-react 1.3.3-alpha-202209010016.0 → 1.3.3-alpha-202209020015.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/dist-cjs/communication-react/index.js +205 -246
- package/dist/dist-cjs/communication-react/index.js.map +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js +1 -1
- package/dist/dist-esm/acs-ui-common/src/telemetryVersion.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js +2 -46
- package/dist/dist-esm/react-components/src/components/RemoteVideoTile.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/VideoTile.js +9 -6
- package/dist/dist-esm/react-components/src/components/VideoTile.js.map +1 -1
- package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.d.ts +3 -3
- package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js +13 -15
- package/dist/dist-esm/react-components/src/components/styles/VideoTile.styles.js.map +1 -1
- package/dist/dist-esm/react-components/src/localization/locales/en-US/strings.json +2 -2
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.js +1 -0
- package/dist/dist-esm/react-composites/src/composites/CallComposite/utils/Utils.js.map +1 -1
- package/package.json +8 -8
|
@@ -192,7 +192,7 @@ const fromFlatCommunicationIdentifier = (id) => {
|
|
|
192
192
|
// Copyright (c) Microsoft Corporation.
|
|
193
193
|
// Licensed under the MIT license.
|
|
194
194
|
// GENERATED FILE. DO NOT EDIT MANUALLY.
|
|
195
|
-
var telemetryVersion = '1.3.3-alpha-
|
|
195
|
+
var telemetryVersion = '1.3.3-alpha-202209020015.0';
|
|
196
196
|
|
|
197
197
|
// Copyright (c) Microsoft Corporation.
|
|
198
198
|
/**
|
|
@@ -957,7 +957,7 @@ const typingIndicatorStringStyle = react.mergeStyles({
|
|
|
957
957
|
wordBreak: 'break-word'
|
|
958
958
|
});
|
|
959
959
|
|
|
960
|
-
var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed Participant",participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On
|
|
960
|
+
var participantItem$d={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed Participant",participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var typingIndicator$d={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$d={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait.",removeFile:"Remove file",uploading:"Uploading",uploadCompleted:"Upload completed"};var messageStatusIndicator$d={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$d={label:"Leave",tooltipContent:"Leave Call"};var cameraButton$d={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose Camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off"};var microphoneButton$d={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose Microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose Speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off"};var devicesButton$d={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose Camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose Audio Device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose Microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose Speaker"};var participantsButton$d={label:"People",tooltipContent:"Show Participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link"};var screenShareButton$d={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var messageThread$d={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",messageContentAriaText:"{author} said {message}",messageContentMineAriaText:"You said {message}",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options",downloadFile:"Download file"};var errorBar$d={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneMutedBySystem:"You are muted by your system.",callMicrophoneUnmutedBySystem:"Your microphone recovered and you were unmuted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callVideoStoppedBySystem:"Your video has been stopped by your system.",callVideoRecoveredBySystem:"Your video has resumed.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link."};var videoGallery$d={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed Participant"};var dialpad$d={placeholderText:"Enter phone number",deleteButtonAriaLabel:"Delete"};var holdButton={onLabel:"Resume",offLabel:"Hold",tooltipOnContent:"Resume call",tooltipOffContent:"Hold call"};var videoTile={participantStateConnecting:"Calling...",participantStateRinging:"Calling...",participantStateHold:"On hold"};var en_US$1 = {participantItem:participantItem$d,typingIndicator:typingIndicator$d,sendBox:sendBox$d,messageStatusIndicator:messageStatusIndicator$d,endCallButton:endCallButton$d,cameraButton:cameraButton$d,microphoneButton:microphoneButton$d,devicesButton:devicesButton$d,participantsButton:participantsButton$d,screenShareButton:screenShareButton$d,messageThread:messageThread$d,errorBar:errorBar$d,videoGallery:videoGallery$d,dialpad:dialpad$d,holdButton:holdButton,videoTile:videoTile};
|
|
961
961
|
|
|
962
962
|
var participantItem$c={isMeText:"(you)",menuTitle:"More Options",removeButtonLabel:"Remove",sharingIconLabel:"Sharing",mutedIconLabel:"Muted",displayNamePlaceholder:"Unnamed Participant"};var typingIndicator$c={singleUser:"{user} is typing ...",multipleUsers:"{users} are typing ...",multipleUsersAbbreviateOne:"{users} and 1 other are typing ...",multipleUsersAbbreviateMany:"{users} and {numOthers} others are typing ...",delimiter:", "};var sendBox$c={placeholderText:"Enter a message",textTooLong:"Your message length is over the maximum limit.",sendButtonAriaLabel:"Send message",fileUploadsPendingError:"Uploading... Please wait."};var messageStatusIndicator$c={deliveredAriaLabel:"Message sent",deliveredTooltipText:"Sent",seenAriaLabel:"Message seen by others",seenTooltipText:"Seen",readByTooltipText:"Read by {messageThreadReadCount} of {remoteParticipantsCount}",sendingAriaLabel:"Message sending",sendingTooltipText:"Sending",failedToSendAriaLabel:"Message failed to send",failedToSendTooltipText:"Failed to send"};var endCallButton$c={label:"Leave",tooltipContent:"Leave Call"};var cameraButton$c={onLabel:"Turn off",offLabel:"Turn on",tooltipDisabledContent:"Camera is disabled",tooltipOnContent:"Turn off camera",tooltipOffContent:"Turn on camera",tooltipVideoLoadingContent:"Video is loading",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose Camera",cameraButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Turn off camera and camera options",offSplitButtonAriaLabel:"Turn on camera and camera options",cameraActionTurnedOnAnnouncement:"Your camera has been turned on",cameraActionTurnedOffAnnouncement:"Your camera has been turned off"};var microphoneButton$c={onLabel:"Mute",offLabel:"Unmute",tooltipDisabledContent:"Microphone is disabled",tooltipOnContent:"Mute microphone",tooltipOffContent:"Unmute microphone",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose Microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose Speaker",microphoneButtonSplitRoleDescription:"Split button",onSplitButtonAriaLabel:"Mute microphone and audio options",offSplitButtonAriaLabel:"Unmute microphone and audio options",microphoneActionTurnedOnAnnouncement:"Your microphone has been turned on",microphoneActionTurnedOffAnnouncement:"Your microphone has been turned off"};var devicesButton$c={label:"Devices",tooltipContent:"Manage devices",cameraMenuTitle:"Camera",cameraMenuTooltip:"Choose Camera",audioDeviceMenuTitle:"Audio Device",audioDeviceMenuTooltip:"Choose Audio Device",microphoneMenuTitle:"Microphone",microphoneMenuTooltip:"Choose Microphone",speakerMenuTitle:"Speaker",speakerMenuTooltip:"Choose Speaker"};var participantsButton$c={label:"People",tooltipContent:"Show Participants",menuHeader:"In this call",participantsListButtonLabel:"{numParticipants} people",muteAllButtonLabel:"Mute all",copyInviteLinkButtonLabel:"Copy invite link"};var screenShareButton$c={onLabel:"Stop presenting",offLabel:"Present",tooltipDisabledContent:"Presenting is disabled",tooltipOnContent:"Presenting your screen",tooltipOffContent:"Present your screen"};var messageThread$c={yesterday:"Yesterday",sunday:"Sunday",monday:"Monday",tuesday:"Tuesday",wednesday:"Wednesday",thursday:"Thursday",friday:"Friday",saturday:"Saturday",participantJoined:"joined the chat.",participantLeft:"left the chat.",editMessage:"Edit",removeMessage:"Delete",resendMessage:"Try sending again",failToSendTag:"Failed to send",editedTag:"Edited",liveAuthorIntro:"{author} says",editBoxTextLimit:"Your message is over the limit of {limitNumber} characters",editBoxPlaceholderText:"Edit your message",newMessagesIndicator:"New messages",noDisplayNameSub:"No name",editBoxCancelButton:"Cancel",editBoxSubmitButton:"Submit",messageReadCount:"Read by {messageReadByCount} of {remoteParticipantsCount}",actionMenuMoreOptions:"More Options"};var errorBar$c={unableToReachChatService:"You are offline",accessDenied:"Unable to access chat services - please check the user credentials provided",userNotInChatThread:"You are no longer in this chat thread",sendMessageNotInChatThread:"Failed to send message because you are no longer in this chat thread",sendMessageGeneric:"Failed to send message",callingNetworkFailure:"Troubling connecting call - you seem to be offline",startVideoGeneric:"Failed to start video",stopVideoGeneric:"Failed to stop video",muteGeneric:"Failed to mute microphone",unmuteGeneric:"Failed to unmute microphone",speakingWhileMuted:"Your microphone is muted",startScreenShareGeneric:"Failed to start screen sharing",stopScreenShareGeneric:"Failed to stop screen sharing",callNetworkQualityLow:"Network quality is low.",callNoSpeakerFound:"No speakers or headphones found. Connect an audio device to hear the call.",callNoMicrophoneFound:"No microphones found. Connect an audio input device.",callMicrophoneAccessDenied:"Unable to access microphone. Click the lock in the address bar to grant permission to this webpage.",callMicrophoneMutedBySystem:"You are muted by your system.",callMacOsMicrophoneAccessDenied:"Unable to access microphone. Grant microphone permission in your macOS privacy settings.",callLocalVideoFreeze:"Network bandwidth is poor. Your video may appear paused for others on the call.",callCameraAccessDenied:"Unable to access camera. Click the lock in the address bar to grant permission to this webpage.",callCameraAlreadyInUse:"Unable to access camera. It may already be in use by another application.",callMacOsCameraAccessDenied:"MacOS is blocking access to your camera. Update your privacy settings to allow this browser to access your camera.",callMacOsScreenShareAccessDenied:"MacOS is blocking screen sharing. Update your privacy settings to allow this browser to record your screen.",dismissButtonAriaLabel:"Close",failedToJoinCallGeneric:"Failed to join call.",failedToJoinCallInvalidMeetingLink:"Unable to join Meeting. Invalid Link."};var videoGallery$c={screenIsBeingSharedMessage:"You are sharing your screen",screenShareLoadingMessage:"Loading {participant}'s screen",localVideoLabel:"You",localVideoCameraSwitcherLabel:"Switch camera",localVideoMovementLabel:"Movable Local Video Tile",localVideoSelectedDescription:"{cameraName} selected",displayNamePlaceholder:"Unnamed Participant"};var dialpad$c={placeholderText:"Enter a number"};var HoldButton$d={onLabel:"Resume",offLabel:"Hold",toolTipOnContent:"Resume call",toolTipOffContent:"Hold call"};var en_GB$1 = {participantItem:participantItem$c,typingIndicator:typingIndicator$c,sendBox:sendBox$c,messageStatusIndicator:messageStatusIndicator$c,endCallButton:endCallButton$c,cameraButton:cameraButton$c,microphoneButton:microphoneButton$c,devicesButton:devicesButton$c,participantsButton:participantsButton$c,screenShareButton:screenShareButton$c,messageThread:messageThread$c,errorBar:errorBar$c,videoGallery:videoGallery$c,dialpad:dialpad$c,HoldButton:HoldButton$d};
|
|
963
963
|
|
|
@@ -2275,12 +2275,6 @@ const useLocaleFileCardStringsTrampoline = () => {
|
|
|
2275
2275
|
/* @conditional-compile-remove(file-sharing) */
|
|
2276
2276
|
return useLocale$1().strings.sendBox;
|
|
2277
2277
|
};
|
|
2278
|
-
/**
|
|
2279
|
-
* Identify if a participant state if part of the Calling states or Hold states.
|
|
2280
|
-
*/
|
|
2281
|
-
const _isParticipantStateCallingOrHold = (participantState) => {
|
|
2282
|
-
return !!participantState && ['Idle', 'Connecting', 'EarlyMedia', 'Ringing', 'Hold'].includes(participantState);
|
|
2283
|
-
};
|
|
2284
2278
|
|
|
2285
2279
|
// Copyright (c) Microsoft Corporation.
|
|
2286
2280
|
/**
|
|
@@ -4813,9 +4807,10 @@ const overlayContainerStyles = {
|
|
|
4813
4807
|
*/
|
|
4814
4808
|
const tileInfoContainerStyle = react.mergeStyles({
|
|
4815
4809
|
position: 'absolute',
|
|
4816
|
-
bottom: '0
|
|
4817
|
-
left: '0
|
|
4818
|
-
|
|
4810
|
+
bottom: '0',
|
|
4811
|
+
left: '0',
|
|
4812
|
+
padding: '0.5rem',
|
|
4813
|
+
width: '100%'
|
|
4819
4814
|
});
|
|
4820
4815
|
/**
|
|
4821
4816
|
* @private
|
|
@@ -4853,30 +4848,27 @@ const displayNameStyle = {
|
|
|
4853
4848
|
/**
|
|
4854
4849
|
* @private
|
|
4855
4850
|
*/
|
|
4856
|
-
const iconContainerStyle = {
|
|
4857
|
-
|
|
4851
|
+
const iconContainerStyle = (theme) => ({
|
|
4852
|
+
margin: 'auto',
|
|
4858
4853
|
alignItems: 'center',
|
|
4859
4854
|
'& svg': {
|
|
4860
|
-
display: 'block'
|
|
4855
|
+
display: 'block',
|
|
4856
|
+
color: theme.palette.neutralPrimary
|
|
4861
4857
|
}
|
|
4862
|
-
};
|
|
4858
|
+
});
|
|
4863
4859
|
/**
|
|
4864
4860
|
* @private
|
|
4865
4861
|
*/
|
|
4866
|
-
const participantStateStringStyles = (
|
|
4862
|
+
const participantStateStringStyles = (theme) => {
|
|
4867
4863
|
return {
|
|
4868
|
-
|
|
4869
|
-
|
|
4870
|
-
color: 'inherit',
|
|
4871
|
-
width: showLabel ? 'auto' : '100%',
|
|
4872
|
-
marginRight: showLabel ? 0 : 'none',
|
|
4873
|
-
marginLeft: showLabel ? 'auto' : 'none',
|
|
4864
|
+
minWidth: 'max-content',
|
|
4865
|
+
color: theme.palette.black,
|
|
4874
4866
|
fontSize: '0.75rem',
|
|
4875
4867
|
lineHeight: 'normal',
|
|
4876
4868
|
overflow: 'hidden',
|
|
4877
4869
|
textOverflow: 'ellipsis',
|
|
4878
4870
|
whiteSpace: 'nowrap',
|
|
4879
|
-
padding: '0.
|
|
4871
|
+
padding: '0.1rem'
|
|
4880
4872
|
};
|
|
4881
4873
|
};
|
|
4882
4874
|
|
|
@@ -4955,13 +4947,13 @@ const VideoTile = (props) => {
|
|
|
4955
4947
|
height: '100%'
|
|
4956
4948
|
}
|
|
4957
4949
|
}, styles === null || styles === void 0 ? void 0 : styles.root) },
|
|
4958
|
-
isVideoRendered ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles) }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React__default['default'].createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
|
|
4950
|
+
isVideoRendered ? (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles, isMirrored && { transform: 'scaleX(-1)' }, styles === null || styles === void 0 ? void 0 : styles.videoContainer) }, renderElement)) : (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(videoContainerStyles), style: { opacity: participantStateString ? 0.4 : 1 } }, onRenderPlaceholder ? (onRenderPlaceholder(userId !== null && userId !== void 0 ? userId : '', placeholderOptions, DefaultPlaceholder)) : (React__default['default'].createElement(DefaultPlaceholder, Object.assign({}, placeholderOptions))))),
|
|
4959
4951
|
(canShowLabel || participantStateString) && (React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoContainerStyle, tokens: tileInfoContainerTokens },
|
|
4960
|
-
|
|
4961
|
-
React__default['default'].createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName }, displayName),
|
|
4962
|
-
|
|
4963
|
-
|
|
4964
|
-
|
|
4952
|
+
React__default['default'].createElement(react.Stack, { horizontal: true, className: tileInfoStyle },
|
|
4953
|
+
canShowLabel && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(displayNameStyle), title: displayName, style: { color: participantStateString ? theme.palette.neutralSecondary : 'inherit' } }, displayName)),
|
|
4954
|
+
participantStateString && (React__default['default'].createElement(react.Text, { className: react.mergeStyles(participantStateStringStyles(theme)) }, bracketedParticipantString(participantStateString, !!canShowLabel))),
|
|
4955
|
+
showMuteIndicator && isMuted && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(iconContainerStyle(theme)) },
|
|
4956
|
+
React__default['default'].createElement(react.Icon, { iconName: "VideoTileMicOff" })))))),
|
|
4965
4957
|
children && (React__default['default'].createElement(react.Stack, { className: react.mergeStyles(overlayContainerStyles, styles === null || styles === void 0 ? void 0 : styles.overlayContainer) }, children)))));
|
|
4966
4958
|
};
|
|
4967
4959
|
const participantStateStringTrampoline = (props, locale) => {
|
|
@@ -4983,184 +4975,8 @@ const tileInfoContainerTokens = {
|
|
|
4983
4975
|
// We need to allow the children to set their own margins
|
|
4984
4976
|
childrenGap: 'none'
|
|
4985
4977
|
};
|
|
4986
|
-
|
|
4987
|
-
|
|
4988
|
-
/**
|
|
4989
|
-
* @private
|
|
4990
|
-
*/
|
|
4991
|
-
const videoGalleryOuterDivStyle = react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
|
|
4992
|
-
/**
|
|
4993
|
-
* @private
|
|
4994
|
-
*/
|
|
4995
|
-
const videoGalleryContainerStyle = {
|
|
4996
|
-
root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
|
|
4997
|
-
};
|
|
4998
|
-
/**
|
|
4999
|
-
* Small floating modal width and height in rem for small screen
|
|
5000
|
-
*/
|
|
5001
|
-
const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
|
|
5002
|
-
/**
|
|
5003
|
-
* Large floating modal width and height in rem for large screen
|
|
5004
|
-
*/
|
|
5005
|
-
const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };
|
|
5006
|
-
/**
|
|
5007
|
-
* @private
|
|
5008
|
-
* z-index to ensure that the local video tile is above the video gallery.
|
|
5009
|
-
*/
|
|
5010
|
-
const LOCAL_VIDEO_TILE_ZINDEX = 2;
|
|
5011
|
-
/**
|
|
5012
|
-
* @private
|
|
5013
|
-
*/
|
|
5014
|
-
const floatingLocalVideoModalStyle = (theme, isNarrow) => {
|
|
5015
|
-
return react.concatStyleSets({
|
|
5016
|
-
main: localVideoTileContainerStyle(theme, isNarrow)
|
|
5017
|
-
}, {
|
|
5018
|
-
main: {
|
|
5019
|
-
boxShadow: theme.effects.elevation8,
|
|
5020
|
-
':focus-within': {
|
|
5021
|
-
boxShadow: theme.effects.elevation16,
|
|
5022
|
-
border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`
|
|
5023
|
-
}
|
|
5024
|
-
}
|
|
5025
|
-
}, localVideoModalStyles);
|
|
5026
|
-
};
|
|
5027
|
-
/**
|
|
5028
|
-
* Padding equal to the amount the modal should stay inside the bounds of the container.
|
|
5029
|
-
* i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
|
|
5030
|
-
* @private
|
|
5031
|
-
*/
|
|
5032
|
-
const localVideoTileOuterPaddingPX = 8;
|
|
5033
|
-
/**
|
|
5034
|
-
* @private
|
|
5035
|
-
*/
|
|
5036
|
-
const localVideoTileContainerStyle = (theme, isNarrow) => {
|
|
5037
|
-
return Object.assign({ minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width), minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
|
|
5038
|
-
? { left: _pxToRem(localVideoTileOuterPaddingPX) }
|
|
5039
|
-
: { right: _pxToRem(localVideoTileOuterPaddingPX) }));
|
|
5040
|
-
};
|
|
5041
|
-
/**
|
|
5042
|
-
* @private
|
|
5043
|
-
*/
|
|
5044
|
-
const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
|
|
5045
|
-
return react.concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
|
|
5046
|
-
root: { boxShadow: theme.effects.elevation8 }
|
|
5047
|
-
});
|
|
5048
|
-
};
|
|
5049
|
-
/**
|
|
5050
|
-
* @private
|
|
5051
|
-
*/
|
|
5052
|
-
const floatingLocalVideoTileStyle = {
|
|
5053
|
-
root: {
|
|
5054
|
-
position: 'absolute',
|
|
5055
|
-
zIndex: LOCAL_VIDEO_TILE_ZINDEX,
|
|
5056
|
-
height: '100%',
|
|
5057
|
-
width: '100%'
|
|
5058
|
-
}
|
|
5059
|
-
};
|
|
5060
|
-
/**
|
|
5061
|
-
* @private
|
|
5062
|
-
*/
|
|
5063
|
-
const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
|
|
5064
|
-
return {
|
|
5065
|
-
minHeight: isNarrow
|
|
5066
|
-
? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`
|
|
5067
|
-
: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
|
|
5068
|
-
width: shouldFloatLocalVideo
|
|
5069
|
-
? isNarrow
|
|
5070
|
-
? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`
|
|
5071
|
-
: `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`
|
|
5072
|
-
: '100%',
|
|
5073
|
-
paddingRight: '0.5rem'
|
|
5074
|
-
};
|
|
5075
|
-
};
|
|
5076
|
-
/**
|
|
5077
|
-
* @private
|
|
5078
|
-
*/
|
|
5079
|
-
const horizontalGalleryStyle = (isNarrow) => {
|
|
5080
|
-
return {
|
|
5081
|
-
children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
|
|
5082
|
-
};
|
|
5083
|
-
};
|
|
5084
|
-
/**
|
|
5085
|
-
* Small horizontal gallery tile size in rem
|
|
5086
|
-
* @private
|
|
5087
|
-
*/
|
|
5088
|
-
const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
|
|
5089
|
-
/**
|
|
5090
|
-
* Large horizontal gallery tile size in rem
|
|
5091
|
-
* @private
|
|
5092
|
-
*/
|
|
5093
|
-
const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };
|
|
5094
|
-
/**
|
|
5095
|
-
* @private
|
|
5096
|
-
*/
|
|
5097
|
-
const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
|
|
5098
|
-
minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
|
|
5099
|
-
minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
|
|
5100
|
-
maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
|
|
5101
|
-
maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
|
|
5102
|
-
};
|
|
5103
|
-
/**
|
|
5104
|
-
* @private
|
|
5105
|
-
*/
|
|
5106
|
-
const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
|
|
5107
|
-
minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
|
|
5108
|
-
minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
|
|
5109
|
-
maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
|
|
5110
|
-
maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
|
|
5111
|
-
};
|
|
5112
|
-
/**
|
|
5113
|
-
* @private
|
|
5114
|
-
*/
|
|
5115
|
-
const layerHostStyle = {
|
|
5116
|
-
position: 'absolute',
|
|
5117
|
-
left: 0,
|
|
5118
|
-
top: 0,
|
|
5119
|
-
width: '100%',
|
|
5120
|
-
height: '100%',
|
|
5121
|
-
overflow: 'hidden',
|
|
5122
|
-
// pointer events for layerHost set to none to make descendants interactive
|
|
5123
|
-
pointerEvents: 'none'
|
|
5124
|
-
};
|
|
5125
|
-
/**
|
|
5126
|
-
* @private
|
|
5127
|
-
*/
|
|
5128
|
-
const localVideoCameraCycleButtonStyles = (theme) => {
|
|
5129
|
-
return {
|
|
5130
|
-
root: {
|
|
5131
|
-
position: 'absolute',
|
|
5132
|
-
width: _pxToRem(32),
|
|
5133
|
-
height: _pxToRem(32),
|
|
5134
|
-
right: '0rem',
|
|
5135
|
-
top: '0rem',
|
|
5136
|
-
color: '#FFFFFF',
|
|
5137
|
-
zIndex: 2,
|
|
5138
|
-
background: 'rgba(0,0,0,0.4)',
|
|
5139
|
-
borderRadius: theme.effects.roundedCorner2
|
|
5140
|
-
},
|
|
5141
|
-
rootFocused: {
|
|
5142
|
-
// styles to remove the unwanted white highlight and blue colour after tapping on button.
|
|
5143
|
-
color: '#FFFFFF',
|
|
5144
|
-
background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.
|
|
5145
|
-
},
|
|
5146
|
-
icon: {
|
|
5147
|
-
paddingLeft: _pxToRem(3),
|
|
5148
|
-
paddingRight: _pxToRem(3),
|
|
5149
|
-
margin: 0
|
|
5150
|
-
},
|
|
5151
|
-
flexContainer: {
|
|
5152
|
-
paddingBottom: _pxToRem(8)
|
|
5153
|
-
}
|
|
5154
|
-
};
|
|
5155
|
-
};
|
|
5156
|
-
/**
|
|
5157
|
-
* Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
|
|
5158
|
-
* @private
|
|
5159
|
-
*/
|
|
5160
|
-
const localVideoModalStyles = {
|
|
5161
|
-
keyboardMoveIconContainer: {
|
|
5162
|
-
zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
|
|
5163
|
-
}
|
|
4978
|
+
const bracketedParticipantString = (participantString, withBrackets) => {
|
|
4979
|
+
return withBrackets ? `(${participantString})` : participantString;
|
|
5164
4980
|
};
|
|
5165
4981
|
|
|
5166
4982
|
// Copyright (c) Microsoft Corporation.
|
|
@@ -5174,9 +4990,6 @@ const localVideoModalStyles = {
|
|
|
5174
4990
|
const _RemoteVideoTile = React__default['default'].memo((props) => {
|
|
5175
4991
|
const { isAvailable, isReceiving = true, // default to true to prevent any breaking change
|
|
5176
4992
|
isMuted, isSpeaking, isScreenSharingOn, onCreateRemoteStreamView, onDisposeRemoteStreamView, remoteVideoViewOptions, renderElement, userId, displayName, onRenderAvatar, showMuteIndicator } = props;
|
|
5177
|
-
const containerRef = React__default['default'].useRef(null);
|
|
5178
|
-
/* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
|
|
5179
|
-
const containerWidth = _useContainerWidth(containerRef);
|
|
5180
4993
|
const remoteVideoStreamProps = React.useMemo(() => ({
|
|
5181
4994
|
isMirrored: remoteVideoViewOptions === null || remoteVideoViewOptions === void 0 ? void 0 : remoteVideoViewOptions.isMirrored,
|
|
5182
4995
|
isScreenSharingOn,
|
|
@@ -5209,45 +5022,11 @@ const _RemoteVideoTile = React__default['default'].memo((props) => {
|
|
|
5209
5022
|
}
|
|
5210
5023
|
return (React__default['default'].createElement(StreamMedia, { videoStreamElement: renderElement, loadingState: isReceiving === false ? 'loading' : 'none' }));
|
|
5211
5024
|
}, [renderElement, isReceiving]);
|
|
5212
|
-
|
|
5213
|
-
/* @conditional-compile-remove(one-to-n-calling) */ /* @conditional-compile-remove(PSTN-calls) */
|
|
5214
|
-
return canShowLabel(props.participantState, props.showLabel, containerWidth);
|
|
5215
|
-
}, [
|
|
5025
|
+
return (React__default['default'].createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: props.showLabel,
|
|
5216
5026
|
/* @conditional-compile-remove(one-to-n-calling) */
|
|
5217
5027
|
/* @conditional-compile-remove(PSTN-calls) */
|
|
5218
|
-
|
|
5219
|
-
props
|
|
5220
|
-
]);
|
|
5221
|
-
return (
|
|
5222
|
-
// IMPORTANT: This div needs to be a flex so that the children take up its full width and height
|
|
5223
|
-
React__default['default'].createElement("div", { ref: containerRef, style: { display: 'flex', flexGrow: 1 } },
|
|
5224
|
-
React__default['default'].createElement(VideoTile, { key: userId, userId: userId, renderElement: renderVideoStreamElement, displayName: displayName, onRenderPlaceholder: onRenderAvatar, isMuted: isMuted, isSpeaking: isSpeaking, showMuteIndicator: showMuteIndicator, personaMinSize: props.personaMinSize, showLabel: showLabelTrampoline,
|
|
5225
|
-
/* @conditional-compile-remove(one-to-n-calling) */
|
|
5226
|
-
/* @conditional-compile-remove(PSTN-calls) */
|
|
5227
|
-
participantState: props.participantState })));
|
|
5028
|
+
participantState: props.participantState }));
|
|
5228
5029
|
});
|
|
5229
|
-
/* @conditional-compile-remove(one-to-n-calling) */
|
|
5230
|
-
/* @conditional-compile-remove(PSTN-calls) */
|
|
5231
|
-
/**
|
|
5232
|
-
* Determines if a label should be shown for a remote video tile.
|
|
5233
|
-
* When the remote video tile is rendered as a small tile in horizontal gallery,
|
|
5234
|
-
* we hide the participants name if they are in hold/connecting states.
|
|
5235
|
-
*/
|
|
5236
|
-
const canShowLabel = (participantState, showLabel, containerWidth) => {
|
|
5237
|
-
// if showLabel has been explicitly set to false, don't show the label
|
|
5238
|
-
if (showLabel === false) {
|
|
5239
|
-
return showLabel;
|
|
5240
|
-
}
|
|
5241
|
-
// If the participant state is in calling or hold and
|
|
5242
|
-
// the container width is less than the small horizontal gallery tile size,
|
|
5243
|
-
// don't show the label (participant name)
|
|
5244
|
-
if (_isParticipantStateCallingOrHold(participantState)) {
|
|
5245
|
-
if (containerWidth && containerWidth / 16 <= SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width) {
|
|
5246
|
-
return false;
|
|
5247
|
-
}
|
|
5248
|
-
}
|
|
5249
|
-
return showLabel;
|
|
5250
|
-
};
|
|
5251
5030
|
|
|
5252
5031
|
// Copyright (c) Microsoft Corporation.
|
|
5253
5032
|
// Licensed under the MIT license.
|
|
@@ -5397,6 +5176,185 @@ const calculateChildrenPerPage = (args) => {
|
|
|
5397
5176
|
return Math.floor((childrenSpace + gapWidth) / (childWidth + gapWidth));
|
|
5398
5177
|
};
|
|
5399
5178
|
|
|
5179
|
+
// Copyright (c) Microsoft Corporation.
|
|
5180
|
+
/**
|
|
5181
|
+
* @private
|
|
5182
|
+
*/
|
|
5183
|
+
const videoGalleryOuterDivStyle = react.mergeStyles({ position: 'relative', width: '100%', height: '100%' });
|
|
5184
|
+
/**
|
|
5185
|
+
* @private
|
|
5186
|
+
*/
|
|
5187
|
+
const videoGalleryContainerStyle = {
|
|
5188
|
+
root: { position: 'relative', height: '100%', width: '100%', padding: '0.5rem' }
|
|
5189
|
+
};
|
|
5190
|
+
/**
|
|
5191
|
+
* Small floating modal width and height in rem for small screen
|
|
5192
|
+
*/
|
|
5193
|
+
const SMALL_FLOATING_MODAL_SIZE_PX = { width: 64, height: 88 };
|
|
5194
|
+
/**
|
|
5195
|
+
* Large floating modal width and height in rem for large screen
|
|
5196
|
+
*/
|
|
5197
|
+
const LARGE_FLOATING_MODAL_SIZE_PX = { width: 160, height: 120 };
|
|
5198
|
+
/**
|
|
5199
|
+
* @private
|
|
5200
|
+
* z-index to ensure that the local video tile is above the video gallery.
|
|
5201
|
+
*/
|
|
5202
|
+
const LOCAL_VIDEO_TILE_ZINDEX = 2;
|
|
5203
|
+
/**
|
|
5204
|
+
* @private
|
|
5205
|
+
*/
|
|
5206
|
+
const floatingLocalVideoModalStyle = (theme, isNarrow) => {
|
|
5207
|
+
return react.concatStyleSets({
|
|
5208
|
+
main: localVideoTileContainerStyle(theme, isNarrow)
|
|
5209
|
+
}, {
|
|
5210
|
+
main: {
|
|
5211
|
+
boxShadow: theme.effects.elevation8,
|
|
5212
|
+
':focus-within': {
|
|
5213
|
+
boxShadow: theme.effects.elevation16,
|
|
5214
|
+
border: `${_pxToRem(2)} solid ${theme.palette.neutralPrimary}`
|
|
5215
|
+
}
|
|
5216
|
+
}
|
|
5217
|
+
}, localVideoModalStyles);
|
|
5218
|
+
};
|
|
5219
|
+
/**
|
|
5220
|
+
* Padding equal to the amount the modal should stay inside the bounds of the container.
|
|
5221
|
+
* i.e. if this is 8px, the modal should always be at least 8px inside the container at all times on all sides.
|
|
5222
|
+
* @private
|
|
5223
|
+
*/
|
|
5224
|
+
const localVideoTileOuterPaddingPX = 8;
|
|
5225
|
+
/**
|
|
5226
|
+
* @private
|
|
5227
|
+
*/
|
|
5228
|
+
const localVideoTileContainerStyle = (theme, isNarrow) => {
|
|
5229
|
+
return Object.assign({ minWidth: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width), minHeight: isNarrow ? _pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.height) : _pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.height), position: 'absolute', bottom: _pxToRem(localVideoTileOuterPaddingPX), borderRadius: theme.effects.roundedCorner4, overflow: 'hidden' }, (theme.rtl
|
|
5230
|
+
? { left: _pxToRem(localVideoTileOuterPaddingPX) }
|
|
5231
|
+
: { right: _pxToRem(localVideoTileOuterPaddingPX) }));
|
|
5232
|
+
};
|
|
5233
|
+
/**
|
|
5234
|
+
* @private
|
|
5235
|
+
*/
|
|
5236
|
+
const localVideoTileWithControlsContainerStyle = (theme, isNarrow) => {
|
|
5237
|
+
return react.concatStyleSets(localVideoTileContainerStyle(theme, isNarrow), {
|
|
5238
|
+
root: { boxShadow: theme.effects.elevation8 }
|
|
5239
|
+
});
|
|
5240
|
+
};
|
|
5241
|
+
/**
|
|
5242
|
+
* @private
|
|
5243
|
+
*/
|
|
5244
|
+
const floatingLocalVideoTileStyle = {
|
|
5245
|
+
root: {
|
|
5246
|
+
position: 'absolute',
|
|
5247
|
+
zIndex: LOCAL_VIDEO_TILE_ZINDEX,
|
|
5248
|
+
height: '100%',
|
|
5249
|
+
width: '100%'
|
|
5250
|
+
}
|
|
5251
|
+
};
|
|
5252
|
+
/**
|
|
5253
|
+
* @private
|
|
5254
|
+
*/
|
|
5255
|
+
const horizontalGalleryContainerStyle = (shouldFloatLocalVideo, isNarrow) => {
|
|
5256
|
+
return {
|
|
5257
|
+
minHeight: isNarrow
|
|
5258
|
+
? `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`
|
|
5259
|
+
: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
|
|
5260
|
+
width: shouldFloatLocalVideo
|
|
5261
|
+
? isNarrow
|
|
5262
|
+
? `calc(100% - ${_pxToRem(SMALL_FLOATING_MODAL_SIZE_PX.width)})`
|
|
5263
|
+
: `calc(100% - ${_pxToRem(LARGE_FLOATING_MODAL_SIZE_PX.width)})`
|
|
5264
|
+
: '100%',
|
|
5265
|
+
paddingRight: '0.5rem'
|
|
5266
|
+
};
|
|
5267
|
+
};
|
|
5268
|
+
/**
|
|
5269
|
+
* @private
|
|
5270
|
+
*/
|
|
5271
|
+
const horizontalGalleryStyle = (isNarrow) => {
|
|
5272
|
+
return {
|
|
5273
|
+
children: isNarrow ? SMALL_HORIZONTAL_GALLERY_TILE_STYLE : LARGE_HORIZONTAL_GALLERY_TILE_STYLE
|
|
5274
|
+
};
|
|
5275
|
+
};
|
|
5276
|
+
/**
|
|
5277
|
+
* Small horizontal gallery tile size in rem
|
|
5278
|
+
* @private
|
|
5279
|
+
*/
|
|
5280
|
+
const SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 5.5, width: 5.5 };
|
|
5281
|
+
/**
|
|
5282
|
+
* Large horizontal gallery tile size in rem
|
|
5283
|
+
* @private
|
|
5284
|
+
*/
|
|
5285
|
+
const LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM = { height: 7.5, width: 10 };
|
|
5286
|
+
/**
|
|
5287
|
+
* @private
|
|
5288
|
+
*/
|
|
5289
|
+
const SMALL_HORIZONTAL_GALLERY_TILE_STYLE = {
|
|
5290
|
+
minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
|
|
5291
|
+
minWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
|
|
5292
|
+
maxHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
|
|
5293
|
+
maxWidth: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
|
|
5294
|
+
};
|
|
5295
|
+
/**
|
|
5296
|
+
* @private
|
|
5297
|
+
*/
|
|
5298
|
+
const LARGE_HORIZONTAL_GALLERY_TILE_STYLE = {
|
|
5299
|
+
minHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
|
|
5300
|
+
minWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`,
|
|
5301
|
+
maxHeight: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
|
|
5302
|
+
maxWidth: `${LARGE_HORIZONTAL_GALLERY_TILE_SIZE_REM.width}rem`
|
|
5303
|
+
};
|
|
5304
|
+
/**
|
|
5305
|
+
* @private
|
|
5306
|
+
*/
|
|
5307
|
+
const layerHostStyle = {
|
|
5308
|
+
position: 'absolute',
|
|
5309
|
+
left: 0,
|
|
5310
|
+
top: 0,
|
|
5311
|
+
width: '100%',
|
|
5312
|
+
height: '100%',
|
|
5313
|
+
overflow: 'hidden',
|
|
5314
|
+
// pointer events for layerHost set to none to make descendants interactive
|
|
5315
|
+
pointerEvents: 'none'
|
|
5316
|
+
};
|
|
5317
|
+
/**
|
|
5318
|
+
* @private
|
|
5319
|
+
*/
|
|
5320
|
+
const localVideoCameraCycleButtonStyles = (theme) => {
|
|
5321
|
+
return {
|
|
5322
|
+
root: {
|
|
5323
|
+
position: 'absolute',
|
|
5324
|
+
width: _pxToRem(32),
|
|
5325
|
+
height: _pxToRem(32),
|
|
5326
|
+
right: '0rem',
|
|
5327
|
+
top: '0rem',
|
|
5328
|
+
color: '#FFFFFF',
|
|
5329
|
+
zIndex: 2,
|
|
5330
|
+
background: 'rgba(0,0,0,0.4)',
|
|
5331
|
+
borderRadius: theme.effects.roundedCorner2
|
|
5332
|
+
},
|
|
5333
|
+
rootFocused: {
|
|
5334
|
+
// styles to remove the unwanted white highlight and blue colour after tapping on button.
|
|
5335
|
+
color: '#FFFFFF',
|
|
5336
|
+
background: 'rgba(0,0,0,0.4)' // sets opacity of background to be visible on all backdrops in video stream.
|
|
5337
|
+
},
|
|
5338
|
+
icon: {
|
|
5339
|
+
paddingLeft: _pxToRem(3),
|
|
5340
|
+
paddingRight: _pxToRem(3),
|
|
5341
|
+
margin: 0
|
|
5342
|
+
},
|
|
5343
|
+
flexContainer: {
|
|
5344
|
+
paddingBottom: _pxToRem(8)
|
|
5345
|
+
}
|
|
5346
|
+
};
|
|
5347
|
+
};
|
|
5348
|
+
/**
|
|
5349
|
+
* Styles for the local video tile modal when it is focused, will cause keyboard move icon to appear over video
|
|
5350
|
+
* @private
|
|
5351
|
+
*/
|
|
5352
|
+
const localVideoModalStyles = {
|
|
5353
|
+
keyboardMoveIconContainer: {
|
|
5354
|
+
zIndex: LOCAL_VIDEO_TILE_ZINDEX + 1 // zIndex to set the keyboard movement Icon above the other layers in the video tile.
|
|
5355
|
+
}
|
|
5356
|
+
};
|
|
5357
|
+
|
|
5400
5358
|
// Copyright (c) Microsoft Corporation.
|
|
5401
5359
|
/**
|
|
5402
5360
|
* @private
|
|
@@ -14510,6 +14468,7 @@ const getCallEndReason = (call) => {
|
|
|
14510
14468
|
* The code and subcode is the same as when a user is removed from a teams interop call.
|
|
14511
14469
|
* Hence, we look at the last remote participant removed to determine if the last participant removed was a phone number.
|
|
14512
14470
|
* If yes, the caller was kicked out of the call, but we need to show them that they left the call.
|
|
14471
|
+
* Note: This check will only work for 1:1 PSTN Calls. The subcode is different for 1:N PSTN calls, and we do not need to handle that case.
|
|
14513
14472
|
*/
|
|
14514
14473
|
if (remoteParticipantsEndedArray.length === 1 &&
|
|
14515
14474
|
communicationCommon.isPhoneNumberIdentifier(remoteParticipantsEndedArray[0].identifier) &&
|