npm - @azure/communication-react - Versions diffs - 1.13.0 → 1.13.1-alpha-202402280012 - Mend

@azure/communication-react 1.13.0 → 1.13.1-alpha-202402280012

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.

Files changed (1247) hide show

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LocalDeviceSettings.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/LocalDeviceSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { AudioDeviceInfo, VideoDeviceInfo } from '@azure/communication-calling';\nimport { Dropdown, IDropdownOption, Label, mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(video-background-effects) /\nimport { DefaultButton } from '@fluentui/react';\nimport { useTheme, VideoStreamOptions, _DevicePermissionDropdown } from '@internal/react-components';\nimport React from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\nimport { dropDownStyles, dropDownTitleIconStyles, mainStackTokens, optionIconStyles, soundStackTokens } from '../styles/LocalDeviceSettings.styles';\n/ @conditional-compile-remove(call-readiness) / / @conditional-compile-remove(rooms) / / @conditional-compile-remove(video-background-effects) /\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { ConfigurationPageCameraDropdown } from './ConfigurationPageCameraDropdown';\nimport { ConfigurationPageMicDropdown } from './ConfigurationPageMicDropdown';\nimport { cameraAndVideoEffectsContainerStyleDesktop } from '../styles/CallConfiguration.styles';\n/ @conditional-compile-remove(video-background-effects) /\nimport { effectsButtonStyles } from '../styles/CallConfiguration.styles';\ntype iconType = 'Camera' \| 'Microphone' \| 'Speaker';\nconst getDropDownList = (list: Array<VideoDeviceInfo \| AudioDeviceInfo>): IDropdownOption[] => {\n // Remove duplicates\n const noDuplicates = new Map<string, VideoDeviceInfo \| AudioDeviceInfo>();\n for (const item of list) {\n noDuplicates.set(item.id, item);\n }\n const dropdownList: IDropdownOption[] = [];\n for (const item of noDuplicates.values()) {\n dropdownList.push({\n key: item.id,\n text: item.name === '' ? item.deviceType : item.name\n });\n }\n return dropdownList;\n};\nconst getOptionIcon = (type: iconType): JSX.Element \| undefined => {\n if (type === 'Camera') {\n return <CallCompositeIcon iconName=\"LocalDeviceSettingsCamera\" className={optionIconStyles} />;\n } else if (type === 'Microphone') {\n return <CallCompositeIcon iconName=\"LocalDeviceSettingsMic\" className={optionIconStyles} />;\n } else if (type === 'Speaker') {\n return <CallCompositeIcon iconName=\"LocalDeviceSettingsSpeaker\" className={optionIconStyles} />;\n } else {\n return undefined;\n }\n};\nconst onRenderTitle = (iconType: iconType, props?: IDropdownOption[]): JSX.Element => {\n const icon = props && getOptionIcon(iconType);\n return props ? <div className={dropDownTitleIconStyles}>\n {icon}\n <span>{props[0].text}</span>\n </div> : <></>;\n};\nconst localVideoViewOptions = ({\n scalingMode: 'Crop',\n isMirrored: true\n} as VideoStreamOptions);\n\n/\n @private\n /\nexport interface LocalDeviceSettingsType {\n cameras: VideoDeviceInfo[];\n microphones: AudioDeviceInfo[];\n speakers: AudioDeviceInfo[];\n selectedCamera?: VideoDeviceInfo;\n selectedMicrophone?: AudioDeviceInfo;\n selectedSpeaker?: AudioDeviceInfo;\n microphonePermissionGranted: boolean \| undefined;\n cameraPermissionGranted: boolean \| undefined;\n onSelectCamera: (device: VideoDeviceInfo, options?: VideoStreamOptions) => Promise<void>;\n onSelectMicrophone: (device: AudioDeviceInfo) => Promise<void>;\n onSelectSpeaker: (device: AudioDeviceInfo) => Promise<void>;\n / @conditional-compile-remove(video-background-effects) /\n onClickVideoEffects?: () => void;\n}\n\n/\n @private\n /\nexport const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element => {\n const theme = useTheme();\n const locale = useLocale();\n / @conditional-compile-remove(call-readiness) / / @conditional-compile-remove(video-background-effects) / / @conditional-compile-remove(rooms) /\n const adapter = useAdapter();\n / @conditional-compile-remove(video-background-effects) /\n const onResolveVideoEffectDependency = adapter.getState().onResolveVideoEffectDependency;\n const defaultPlaceHolder = locale.strings.call.defaultPlaceHolder;\n const cameraLabel = locale.strings.call.cameraLabel;\n const soundLabel = locale.strings.call.soundLabel;\n const noSpeakersLabel = locale.strings.call.noSpeakersLabel;\n const noCameraLabel = locale.strings.call.noCamerasLabel;\n const noMicLabel = locale.strings.call.noMicrophonesLabel;\n / @conditional-compile-remove(rooms) /\n const role = adapter.getState().call?.role;\n const cameraPermissionGranted = props.cameraPermissionGranted;\n const micPermissionGranted = props.microphonePermissionGranted;\n let roleCanUseCamera = true;\n let roleCanUseMic = true;\n\n / @conditional-compile-remove(rooms) /\n roleCanUseCamera = role === 'Consumer' ? false : true;\n / @conditional-compile-remove(rooms) /\n roleCanUseMic = role === 'Consumer' ? false : true;\n\n // TODO: speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its\n // actually granting access to query both microphone and speaker. However the browser popup asks you explicity for\n // 'microphone'. This needs investigation on how we want to handle this and maybe needs follow up with SDK team.\n const hasCameras = props.cameras.length > 0;\n const hasMicrophones = props.microphones.length > 0;\n const hasSpeakers = props.speakers.length > 0;\n const cameraGrantedDropdown = <Dropdown data-ui-id=\"call-composite-local-camera-settings\" aria-labelledby={'call-composite-local-camera-settings-label'} placeholder={hasCameras ? defaultPlaceHolder : noCameraLabel} options={cameraPermissionGranted ? getDropDownList(props.cameras) : [{\n key: 'deniedOrUnknown',\n text: ''\n }]} styles={dropDownStyles(theme)} disabled={!cameraPermissionGranted \|\| !hasCameras} errorMessage={props.cameraPermissionGranted === undefined \|\| props.cameraPermissionGranted ? undefined : locale.strings.call.cameraPermissionDenied} defaultSelectedKey={micPermissionGranted ? props.selectedCamera ? props.selectedCamera.id : props.cameras ? props.cameras[0]?.id : '' : 'deniedOrUnknown'} onChange={(event, option, index) => {\n props.onSelectCamera(props.cameras[index ?? 0], localVideoViewOptions);\n }} onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Camera', props)} />;\n const micGrantedDropdown = <>\n {roleCanUseMic && <Dropdown aria-labelledby={'call-composite-local-sound-settings-label'} placeholder={hasMicrophones ? defaultPlaceHolder : noMicLabel} styles={dropDownStyles(theme)} disabled={!micPermissionGranted \|\| !hasMicrophones} errorMessage={props.microphonePermissionGranted === undefined \|\| props.microphonePermissionGranted ? undefined : locale.strings.call.microphonePermissionDenied} options={micPermissionGranted ? getDropDownList(props.microphones) : [{\n key: 'deniedOrUnknown',\n text: ''\n }]} defaultSelectedKey={micPermissionGranted ? props.selectedMicrophone ? props.selectedMicrophone.id : defaultDeviceId(props.microphones) : 'deniedOrUnknown'} onChange={(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption \| undefined, index?: number \| undefined) => {\n props.onSelectMicrophone(props.microphones[index ?? 0]);\n }} onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Microphone', props)} />}\n </>;\n const speakerDropdown = <Dropdown aria-labelledby={'call-composite-local-sound-settings-label'} placeholder={hasSpeakers ? defaultPlaceHolder : noSpeakersLabel} styles={dropDownStyles(theme)} disabled={props.speakers.length === 0} options={getDropDownList(props.speakers)} defaultSelectedKey={props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers)} onChange={(event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption \| undefined, index?: number \| undefined) => {\n props.onSelectSpeaker(props.speakers[index ?? 0]);\n }} onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Speaker', props)} />;\n const SafariBrowserSpeakerDropdownTrampoline = (): JSX.Element => {\n return speakerDropdown;\n };\n return <Stack data-ui-id=\"call-composite-device-settings\" tokens={mainStackTokens}>\n {roleCanUseCamera && <Stack>\n <Stack horizontal horizontalAlign=\"space-between\" styles={cameraAndVideoEffectsContainerStyleDesktop}>\n <Label id={'call-composite-local-camera-settings-label'} className={mergeStyles(dropDownStyles(theme).label)} disabled={!cameraPermissionGranted} // follows dropdown disabled state\n >\n {cameraLabel}\n </Label>\n {/ @conditional-compile-remove(video-background-effects) */\n onResolveVideoEffectDependency && <DefaultButton iconProps={{\n iconName: 'ConfigurationScreenVideoEffectsButton'\n }} styles={effectsButtonStyles(theme)} onClick={props.onClickVideoEffects} data-ui-id={'call-config-video-effects-button'}>\n {locale.strings.call.configurationPageVideoEffectsButtonLabel}\n </DefaultButton>}\n </Stack>\n <ConfigurationPageCameraDropdown cameraGrantedDropdown={cameraGrantedDropdown} cameraPermissionGranted={cameraPermissionGranted ?? false} />\n </Stack>}\n <Stack>\n <Label id={'call-composite-local-sound-settings-label'} className={mergeStyles(dropDownStyles(theme).label)} disabled={!micPermissionGranted} // follows Start button disabled state in ConfigurationPage\n >\n {soundLabel}\n </Label>\n <Stack data-ui-id=\"call-composite-sound-settings\" tokens={soundStackTokens}>\n <ConfigurationPageMicDropdown micGrantedDropdown={micGrantedDropdown} micPermissionGranted={micPermissionGranted ?? false} />\n <SafariBrowserSpeakerDropdownTrampoline />\n </Stack>\n </Stack>\n </Stack>;\n};\nconst defaultDeviceId = (devices: AudioDeviceInfo[]): string => {\n if (devices.length === 0) {\n return '';\n }\n const defaultDevice = devices.find(device => device.isSystemDefault);\n if (defaultDevice) {\n return defaultDevice.id;\n }\n return devices[0].id;\n};"]}
1	+ {"version":3,"file":"LocalDeviceSettings.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LocalDeviceSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { AudioDeviceInfo, VideoDeviceInfo } from '@azure/communication-calling';\nimport { Dropdown, IDropdownOption, Label, mergeStyles, Stack } from '@fluentui/react';\n/* @conditional-compile-remove(video-background-effects) /\nimport { DefaultButton } from '@fluentui/react';\n/ @conditional-compile-remove(call-readiness) /\nimport { useEffect } from 'react';\nimport { useTheme, VideoStreamOptions, _DevicePermissionDropdown } from '@internal/react-components';\nimport React from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\nimport {\n dropDownStyles,\n dropDownTitleIconStyles,\n mainStackTokens,\n optionIconStyles,\n soundStackTokens\n} from '../styles/LocalDeviceSettings.styles';\n/ @conditional-compile-remove(call-readiness) / / @conditional-compile-remove(rooms) / / @conditional-compile-remove(video-background-effects) /\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { ConfigurationPageCameraDropdown } from './ConfigurationPageCameraDropdown';\nimport { ConfigurationPageMicDropdown } from './ConfigurationPageMicDropdown';\n/ @conditional-compile-remove(call-readiness) /\nimport { useHandlers } from '../hooks/useHandlers';\nimport { cameraAndVideoEffectsContainerStyleDesktop } from '../styles/CallConfiguration.styles';\n/ @conditional-compile-remove(video-background-effects) /\nimport { effectsButtonStyles } from '../styles/CallConfiguration.styles';\n\ntype iconType = 'Camera' \| 'Microphone' \| 'Speaker';\n\nconst getDropDownList = (list: Array<VideoDeviceInfo \| AudioDeviceInfo>): IDropdownOption[] => {\n // Remove duplicates\n const noDuplicates = new Map<string, VideoDeviceInfo \| AudioDeviceInfo>();\n for (const item of list) {\n noDuplicates.set(item.id, item);\n }\n const dropdownList: IDropdownOption[] = [];\n for (const item of noDuplicates.values()) {\n dropdownList.push({\n key: item.id,\n text: item.name === '' ? item.deviceType : item.name\n });\n }\n return dropdownList;\n};\n\nconst getOptionIcon = (type: iconType): JSX.Element \| undefined => {\n if (type === 'Camera') {\n return <CallCompositeIcon iconName=\"LocalDeviceSettingsCamera\" className={optionIconStyles} />;\n } else if (type === 'Microphone') {\n return <CallCompositeIcon iconName=\"LocalDeviceSettingsMic\" className={optionIconStyles} />;\n } else if (type === 'Speaker') {\n return <CallCompositeIcon iconName=\"LocalDeviceSettingsSpeaker\" className={optionIconStyles} />;\n } else {\n return undefined;\n }\n};\n\nconst onRenderTitle = (iconType: iconType, props?: IDropdownOption[]): JSX.Element => {\n const icon = props && getOptionIcon(iconType);\n return props ? (\n <div className={dropDownTitleIconStyles}>\n {icon}\n <span>{props[0].text}</span>\n </div>\n ) : (\n <></>\n );\n};\n\nconst localVideoViewOptions = {\n scalingMode: 'Crop',\n isMirrored: true\n} as VideoStreamOptions;\n\n/\n @private\n /\nexport interface LocalDeviceSettingsType {\n cameras: VideoDeviceInfo[];\n microphones: AudioDeviceInfo[];\n speakers: AudioDeviceInfo[];\n selectedCamera?: VideoDeviceInfo;\n selectedMicrophone?: AudioDeviceInfo;\n selectedSpeaker?: AudioDeviceInfo;\n microphonePermissionGranted: boolean \| undefined;\n cameraPermissionGranted: boolean \| undefined;\n onSelectCamera: (device: VideoDeviceInfo, options?: VideoStreamOptions) => Promise<void>;\n onSelectMicrophone: (device: AudioDeviceInfo) => Promise<void>;\n onSelectSpeaker: (device: AudioDeviceInfo) => Promise<void>;\n / @conditional-compile-remove(call-readiness) /\n onClickEnableDevicePermission?: () => void;\n / @conditional-compile-remove(video-background-effects) /\n onClickVideoEffects?: () => void;\n}\n\n/\n @private\n /\nexport const LocalDeviceSettings = (props: LocalDeviceSettingsType): JSX.Element => {\n const theme = useTheme();\n const locale = useLocale();\n / @conditional-compile-remove(call-readiness) / / @conditional-compile-remove(video-background-effects) / / @conditional-compile-remove(rooms) /\n const adapter = useAdapter();\n / @conditional-compile-remove(video-background-effects) /\n const onResolveVideoEffectDependency = adapter.getState().onResolveVideoEffectDependency;\n const defaultPlaceHolder = locale.strings.call.defaultPlaceHolder;\n const cameraLabel = locale.strings.call.cameraLabel;\n const soundLabel = locale.strings.call.soundLabel;\n const noSpeakersLabel = locale.strings.call.noSpeakersLabel;\n const noCameraLabel = locale.strings.call.noCamerasLabel;\n const noMicLabel = locale.strings.call.noMicrophonesLabel;\n / @conditional-compile-remove(rooms) /\n const role = adapter.getState().call?.role;\n\n const cameraPermissionGranted = props.cameraPermissionGranted;\n const micPermissionGranted = props.microphonePermissionGranted;\n\n let roleCanUseCamera = true;\n let roleCanUseMic = true;\n\n / @conditional-compile-remove(rooms) /\n roleCanUseCamera = role === 'Consumer' ? false : true;\n / @conditional-compile-remove(rooms) /\n roleCanUseMic = role === 'Consumer' ? false : true;\n\n // TODO: speaker permission is tied to microphone permission (when you request 'audio' permission using the SDK) its\n // actually granting access to query both microphone and speaker. However the browser popup asks you explicity for\n // 'microphone'. This needs investigation on how we want to handle this and maybe needs follow up with SDK team.\n / @conditional-compile-remove(call-readiness) /\n useEffect(() => {\n if (cameraPermissionGranted) {\n adapter.queryCameras();\n }\n if (micPermissionGranted) {\n adapter.queryMicrophones();\n }\n adapter.querySpeakers();\n }, [adapter, cameraPermissionGranted, micPermissionGranted]);\n\n / @conditional-compile-remove(call-readiness) /\n const dropdownProps = useHandlers(_DevicePermissionDropdown);\n\n const hasCameras = props.cameras.length > 0;\n const hasMicrophones = props.microphones.length > 0;\n const hasSpeakers = props.speakers.length > 0;\n / @conditional-compile-remove(unsupported-browser) /\n const isSafariWithNoSpeakers =\n adapter.getState().environmentInfo?.environment.browser.toLowerCase() === 'safari' && !hasSpeakers;\n\n const cameraGrantedDropdown = (\n <Dropdown\n data-ui-id=\"call-composite-local-camera-settings\"\n aria-labelledby={'call-composite-local-camera-settings-label'}\n placeholder={hasCameras ? defaultPlaceHolder : noCameraLabel}\n options={cameraPermissionGranted ? getDropDownList(props.cameras) : [{ key: 'deniedOrUnknown', text: '' }]}\n styles={dropDownStyles(theme)}\n disabled={!cameraPermissionGranted \|\| !hasCameras}\n errorMessage={\n props.cameraPermissionGranted === undefined \|\| props.cameraPermissionGranted\n ? undefined\n : locale.strings.call.cameraPermissionDenied\n }\n defaultSelectedKey={\n micPermissionGranted\n ? props.selectedCamera\n ? props.selectedCamera.id\n : props.cameras\n ? props.cameras[0]?.id\n : ''\n : 'deniedOrUnknown'\n }\n onChange={(event, option, index) => {\n props.onSelectCamera(props.cameras[index ?? 0], localVideoViewOptions);\n }}\n onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Camera', props)}\n />\n );\n\n const micGrantedDropdown = (\n <>\n {roleCanUseMic && (\n <Dropdown\n aria-labelledby={'call-composite-local-sound-settings-label'}\n placeholder={hasMicrophones ? defaultPlaceHolder : noMicLabel}\n styles={dropDownStyles(theme)}\n disabled={!micPermissionGranted \|\| !hasMicrophones}\n errorMessage={\n props.microphonePermissionGranted === undefined \|\| props.microphonePermissionGranted\n ? undefined\n : locale.strings.call.microphonePermissionDenied\n }\n options={micPermissionGranted ? getDropDownList(props.microphones) : [{ key: 'deniedOrUnknown', text: '' }]}\n defaultSelectedKey={\n micPermissionGranted\n ? props.selectedMicrophone\n ? props.selectedMicrophone.id\n : defaultDeviceId(props.microphones)\n : 'deniedOrUnknown'\n }\n onChange={(\n event: React.FormEvent<HTMLDivElement>,\n option?: IDropdownOption \| undefined,\n index?: number \| undefined\n ) => {\n props.onSelectMicrophone(props.microphones[index ?? 0]);\n }}\n onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Microphone', props)}\n />\n )}\n </>\n );\n\n const speakerDropdown = (\n <Dropdown\n aria-labelledby={'call-composite-local-sound-settings-label'}\n placeholder={hasSpeakers ? defaultPlaceHolder : noSpeakersLabel}\n styles={dropDownStyles(theme)}\n disabled={props.speakers.length === 0}\n options={getDropDownList(props.speakers)}\n defaultSelectedKey={props.selectedSpeaker ? props.selectedSpeaker.id : defaultDeviceId(props.speakers)}\n onChange={(\n event: React.FormEvent<HTMLDivElement>,\n option?: IDropdownOption \| undefined,\n index?: number \| undefined\n ) => {\n props.onSelectSpeaker(props.speakers[index ?? 0]);\n }}\n onRenderTitle={(props?: IDropdownOption[]) => onRenderTitle('Speaker', props)}\n />\n );\n\n const SafariBrowserSpeakerDropdownTrampoline = (): JSX.Element => {\n / @conditional-compile-remove(unsupported-browser) /\n if (isSafariWithNoSpeakers) {\n return <></>;\n }\n return speakerDropdown;\n };\n\n return (\n <Stack data-ui-id=\"call-composite-device-settings\" tokens={mainStackTokens}>\n {roleCanUseCamera && (\n <Stack>\n <Stack horizontal horizontalAlign=\"space-between\" styles={cameraAndVideoEffectsContainerStyleDesktop}>\n <Label\n id={'call-composite-local-camera-settings-label'}\n className={mergeStyles(dropDownStyles(theme).label)}\n disabled={!cameraPermissionGranted} // follows dropdown disabled state\n >\n {cameraLabel}\n </Label>\n {\n / @conditional-compile-remove(video-background-effects) /\n onResolveVideoEffectDependency && (\n <DefaultButton\n iconProps={{ iconName: 'ConfigurationScreenVideoEffectsButton' }}\n styles={effectsButtonStyles(theme)}\n onClick={props.onClickVideoEffects}\n data-ui-id={'call-config-video-effects-button'}\n >\n {locale.strings.call.configurationPageVideoEffectsButtonLabel}\n </DefaultButton>\n )\n }\n </Stack>\n <ConfigurationPageCameraDropdown\n cameraGrantedDropdown={cameraGrantedDropdown}\n cameraPermissionGranted={cameraPermissionGranted ?? false}\n / @conditional-compile-remove(call-readiness) /\n dropdownProps={dropdownProps}\n / @conditional-compile-remove(call-readiness) /\n onClickEnableDevicePermission={props.onClickEnableDevicePermission}\n />\n </Stack>\n )}\n <Stack>\n <Label\n id={'call-composite-local-sound-settings-label'}\n className={mergeStyles(dropDownStyles(theme).label)}\n disabled={!micPermissionGranted} // follows Start button disabled state in ConfigurationPage\n >\n {soundLabel}\n </Label>\n <Stack data-ui-id=\"call-composite-sound-settings\" tokens={soundStackTokens}>\n <ConfigurationPageMicDropdown\n micGrantedDropdown={micGrantedDropdown}\n micPermissionGranted={micPermissionGranted ?? false}\n / @conditional-compile-remove(call-readiness) /\n dropdownProps={dropdownProps}\n / @conditional-compile-remove(call-readiness) */\n onClickEnableDevicePermission={props.onClickEnableDevicePermission}\n />\n <SafariBrowserSpeakerDropdownTrampoline />\n </Stack>\n </Stack>\n </Stack>\n );\n};\n\nconst defaultDeviceId = (devices: AudioDeviceInfo[]): string => {\n if (devices.length === 0) {\n return '';\n }\n const defaultDevice = devices.find((device) => device.isSystemDefault);\n if (defaultDevice) {\n return defaultDevice.id;\n }\n return devices[0].id;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalPreview.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @private
  */

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalPreview.js CHANGED Viewed

@@ -37,12 +37,14 @@ export const LocalPreview = (props) => {
         isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();
     }), [adapter, isLocalMicrophoneEnabled]);
     const hasNoSpeakers = !devicesButtonProps.speakers.length;
-    const hasNoDevices = devicesButtonProps.cameras.length === 0 && devicesButtonProps.microphones.length === 0 && devicesButtonProps.speakers.length === 0;
+    const hasNoDevices = devicesButtonProps.cameras.length === 0 &&
+        devicesButtonProps.microphones.length === 0 &&
+        devicesButtonProps.speakers.length === 0;
     const hasCameras = devicesButtonProps.cameras.length > 0;
     const hasMicrophones = devicesButtonProps.microphones.length > 0;
     const theme = useTheme();
     const onRenderPlaceholder = useCallback(() => {
-        return React.createElement(Stack, { className: mergeStyles({
+        return (React.createElement(Stack, { className: mergeStyles({
                 width: '100%',
                 height: '100%',
                 // The text should be centered in the local preview with the camera icon
@@ -51,43 +53,37 @@ export const LocalPreview = (props) => {
                 marginTop: '-0.8rem'
             }), verticalAlign: "center" },
             React.createElement(Stack.Item, { align: "center" },
-                React.createElement(CallCompositeIcon, { iconName: "LocalPreviewPlaceholder", className: mergeStyles(cameraOffLabelStyle, {
-                        color: theme.palette.neutralTertiary
-                    }) })),
+                React.createElement(CallCompositeIcon, { iconName: "LocalPreviewPlaceholder", className: mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralTertiary }) })),
             React.createElement(Stack.Item, { align: "center" },
-                React.createElement(Text, { className: mergeStyles(cameraOffLabelStyle, {
-                        color: theme.palette.neutralSecondary
-                    }) }, locale.strings.call.cameraTurnedOff)));
+                React.createElement(Text, { className: mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralSecondary }) }, locale.strings.call.cameraTurnedOff))));
     }, [theme, locale.strings.call.cameraTurnedOff]);
-    const devicesButtonStyles = props.mobileView ? {
-        menuStyles: {
-            menuItemStyles: buttonFlyoutIncreasedSizeStyles
+    const devicesButtonStyles = props.mobileView
+        ? {
+            menuStyles: {
+                menuItemStyles: buttonFlyoutIncreasedSizeStyles
+            }
         }
-    } : undefined;
-    return React.createElement(Stack, { "data-ui-id": "call-composite-local-preview", className: props.mobileView ? localPreviewContainerStyleMobile(theme) : localPreviewContainerStyleDesktop(theme) },
-        React.createElement(VideoTile, { styles: localPreviewTileStyle, renderElement: (localPreviewProps === null || localPreviewProps === void 0 ? void 0 : localPreviewProps.videoStreamElement) ? React.createElement(StreamMedia, { videoStreamElement: localPreviewProps.videoStreamElement }) : undefined, onRenderPlaceholder: onRenderPlaceholder },
+        : undefined;
+    return (React.createElement(Stack, { "data-ui-id": "call-composite-local-preview", className: props.mobileView ? localPreviewContainerStyleMobile(theme) : localPreviewContainerStyleDesktop(theme) },
+        React.createElement(VideoTile, { styles: localPreviewTileStyle, renderElement: (localPreviewProps === null || localPreviewProps === void 0 ? void 0 : localPreviewProps.videoStreamElement) ? (React.createElement(StreamMedia, { videoStreamElement: localPreviewProps.videoStreamElement })) : undefined, onRenderPlaceholder: onRenderPlaceholder },
             React.createElement(ControlBar, { layout: "floatingBottom" },
                 React.createElement(MicrophoneButton, { "data-ui-id": "call-composite-local-device-settings-microphone-button", checked: isLocalMicrophoneEnabled, onToggleMicrophone: onToggleMic, disabled: !microphonePermissionGranted || !hasMicrophones, showLabel: true,
                     // disable tooltip as it obscures list of devices on mobile
-                    strings: props.mobileView ? {
-                        tooltipOnContent: '',
-                        tooltipOffContent: '',
-                        tooltipDisabledContent: ''
-                    } : {}, styles: localPreviewButtonStyle }),
+                    strings: props.mobileView ? { tooltipOnContent: '', tooltipOffContent: '', tooltipDisabledContent: '' } : {}, styles: localPreviewButtonStyle }),
                 React.createElement(CameraButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-camera-button" }, cameraButtonProps, { showLabel: true, disabled: !cameraPermissionGranted || !hasCameras,
                     // disable tooltip as it obscures list of devices on mobile
-                    strings: props.mobileView ? {
-                        tooltipOnContent: '',
-                        tooltipOffContent: '',
-                        tooltipDisabledContent: '',
-                        tooltipVideoLoadingContent: ''
-                    } : {}, styles: localPreviewButtonStyle })),
-                props.showDevicesButton && React.createElement(DevicesButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-options-button" }, devicesButtonProps, {
+                    strings: props.mobileView
+                        ? {
+                            tooltipOnContent: '',
+                            tooltipOffContent: '',
+                            tooltipDisabledContent: '',
+                            tooltipVideoLoadingContent: ''
+                        }
+                        : {}, styles: localPreviewButtonStyle })),
+                props.showDevicesButton && (React.createElement(DevicesButton, Object.assign({ "data-ui-id": "call-composite-local-device-settings-options-button" }, devicesButtonProps, {
                     // disable button whilst all other buttons are disabled
-                    disabled: !microphonePermissionGranted && !cameraPermissionGranted && hasNoSpeakers || hasNoDevices, showLabel: true,
+                    disabled: (!microphonePermissionGranted && !cameraPermissionGranted && hasNoSpeakers) || hasNoDevices, showLabel: true,
                     // disable tooltip as it obscures list of devices on mobile
-                    strings: props.mobileView ? {
-                        tooltipContent: ''
-                    } : {}, styles: devicesButtonStyles })))));
+                    strings: props.mobileView ? { tooltipContent: '' } : {}, styles: devicesButtonStyles })))))));
 };
 //# sourceMappingURL=LocalPreview.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalPreview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LocalPreview.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/LocalPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { CameraButton, ControlBar, MicrophoneButton, DevicesButton, StreamMedia, useTheme, VideoTile } from '@internal/react-components';\nimport React, { useCallback } from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { getLocalMicrophoneEnabled } from '../selectors/baseSelectors';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { localPreviewSelector } from '../selectors/localPreviewSelector';\nimport { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';\nimport { cameraOffLabelStyle, localPreviewButtonStyle, localPreviewContainerStyleDesktop, localPreviewContainerStyleMobile, localPreviewTileStyle } from '../styles/LocalPreview.styles';\n\n/*\n @private\n /\nexport interface LocalPreviewProps {\n mobileView: boolean;\n showDevicesButton: boolean;\n}\n\n/\n @private\n */\nexport const LocalPreview = (props: LocalPreviewProps): JSX.Element => {\n const locale = useLocale();\n const cameraButtonProps = usePropsFor(CameraButton);\n const localPreviewProps = useSelector(localPreviewSelector);\n const devicesButtonProps = usePropsFor(DevicesButton);\n const {\n audio: microphonePermissionGranted,\n video: cameraPermissionGranted\n } = useSelector(devicePermissionSelector);\n const isLocalMicrophoneEnabled = useSelector(getLocalMicrophoneEnabled);\n const adapter = useAdapter();\n const onToggleMic = useCallback(async () => {\n isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();\n }, [adapter, isLocalMicrophoneEnabled]);\n const hasNoSpeakers = !devicesButtonProps.speakers.length;\n const hasNoDevices = devicesButtonProps.cameras.length === 0 && devicesButtonProps.microphones.length === 0 && devicesButtonProps.speakers.length === 0;\n const hasCameras = devicesButtonProps.cameras.length > 0;\n const hasMicrophones = devicesButtonProps.microphones.length > 0;\n const theme = useTheme();\n const onRenderPlaceholder = useCallback((): JSX.Element => {\n return <Stack className={mergeStyles({\n width: '100%',\n height: '100%',\n // The text should be centered in the local preview with the camera icon\n // appearing above the text. To compensate for the camera icon's height,\n // we add a negative margin to the top of the container.\n marginTop: '-0.8rem'\n })} verticalAlign=\"center\">\n <Stack.Item align=\"center\">\n <CallCompositeIcon iconName=\"LocalPreviewPlaceholder\" className={mergeStyles(cameraOffLabelStyle, {\n color: theme.palette.neutralTertiary\n })} />\n </Stack.Item>\n <Stack.Item align=\"center\">\n <Text className={mergeStyles(cameraOffLabelStyle, {\n color: theme.palette.neutralSecondary\n })}>\n {locale.strings.call.cameraTurnedOff}\n </Text>\n </Stack.Item>\n </Stack>;\n }, [theme, locale.strings.call.cameraTurnedOff]);\n const devicesButtonStyles = props.mobileView ? {\n menuStyles: {\n menuItemStyles: buttonFlyoutIncreasedSizeStyles\n }\n } : undefined;\n return <Stack data-ui-id=\"call-composite-local-preview\" className={props.mobileView ? localPreviewContainerStyleMobile(theme) : localPreviewContainerStyleDesktop(theme)}>\n <VideoTile styles={localPreviewTileStyle} renderElement={localPreviewProps?.videoStreamElement ? <StreamMedia videoStreamElement={localPreviewProps.videoStreamElement} /> : undefined} onRenderPlaceholder={onRenderPlaceholder}>\n <ControlBar layout=\"floatingBottom\">\n <MicrophoneButton data-ui-id=\"call-composite-local-device-settings-microphone-button\" checked={isLocalMicrophoneEnabled} onToggleMicrophone={onToggleMic} disabled={!microphonePermissionGranted \|\| !hasMicrophones} showLabel={true}\n // disable tooltip as it obscures list of devices on mobile\n strings={props.mobileView ? {\n tooltipOnContent: '',\n tooltipOffContent: '',\n tooltipDisabledContent: ''\n } : {}} styles={localPreviewButtonStyle} />\n <CameraButton data-ui-id=\"call-composite-local-device-settings-camera-button\" {...cameraButtonProps} showLabel={true} disabled={!cameraPermissionGranted \|\| !hasCameras}\n // disable tooltip as it obscures list of devices on mobile\n strings={props.mobileView ? {\n tooltipOnContent: '',\n tooltipOffContent: '',\n tooltipDisabledContent: '',\n tooltipVideoLoadingContent: ''\n } : {}} styles={localPreviewButtonStyle} />\n {props.showDevicesButton && <DevicesButton data-ui-id=\"call-composite-local-device-settings-options-button\" {...devicesButtonProps}\n // disable button whilst all other buttons are disabled\n disabled={!microphonePermissionGranted && !cameraPermissionGranted && hasNoSpeakers \|\| hasNoDevices} showLabel={true}\n // disable tooltip as it obscures list of devices on mobile\n strings={props.mobileView ? {\n tooltipContent: ''\n } : {}} styles={devicesButtonStyles} />}\n </ControlBar>\n </VideoTile>\n </Stack>;\n};"]}
1	+ {"version":3,"file":"LocalPreview.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LocalPreview.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport {\n CameraButton,\n ControlBar,\n MicrophoneButton,\n DevicesButton,\n StreamMedia,\n useTheme,\n VideoTile\n} from '@internal/react-components';\nimport React, { useCallback } from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { useSelector } from '../hooks/useSelector';\nimport { getLocalMicrophoneEnabled } from '../selectors/baseSelectors';\nimport { devicePermissionSelector } from '../selectors/devicePermissionSelector';\nimport { localPreviewSelector } from '../selectors/localPreviewSelector';\nimport { buttonFlyoutIncreasedSizeStyles } from '../styles/Buttons.styles';\nimport {\n cameraOffLabelStyle,\n localPreviewButtonStyle,\n localPreviewContainerStyleDesktop,\n localPreviewContainerStyleMobile,\n localPreviewTileStyle\n} from '../styles/LocalPreview.styles';\n\n/*\n @private\n /\nexport interface LocalPreviewProps {\n mobileView: boolean;\n showDevicesButton: boolean;\n}\n\n/\n @private\n */\nexport const LocalPreview = (props: LocalPreviewProps): JSX.Element => {\n const locale = useLocale();\n const cameraButtonProps = usePropsFor(CameraButton);\n const localPreviewProps = useSelector(localPreviewSelector);\n const devicesButtonProps = usePropsFor(DevicesButton);\n const { audio: microphonePermissionGranted, video: cameraPermissionGranted } = useSelector(devicePermissionSelector);\n\n const isLocalMicrophoneEnabled = useSelector(getLocalMicrophoneEnabled);\n const adapter = useAdapter();\n\n const onToggleMic = useCallback(async () => {\n isLocalMicrophoneEnabled ? adapter.mute() : adapter.unmute();\n }, [adapter, isLocalMicrophoneEnabled]);\n\n const hasNoSpeakers = !devicesButtonProps.speakers.length;\n const hasNoDevices =\n devicesButtonProps.cameras.length === 0 &&\n devicesButtonProps.microphones.length === 0 &&\n devicesButtonProps.speakers.length === 0;\n\n const hasCameras = devicesButtonProps.cameras.length > 0;\n const hasMicrophones = devicesButtonProps.microphones.length > 0;\n\n const theme = useTheme();\n const onRenderPlaceholder = useCallback((): JSX.Element => {\n return (\n <Stack\n className={mergeStyles({\n width: '100%',\n height: '100%',\n // The text should be centered in the local preview with the camera icon\n // appearing above the text. To compensate for the camera icon's height,\n // we add a negative margin to the top of the container.\n marginTop: '-0.8rem'\n })}\n verticalAlign=\"center\"\n >\n <Stack.Item align=\"center\">\n <CallCompositeIcon\n iconName=\"LocalPreviewPlaceholder\"\n className={mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralTertiary })}\n />\n </Stack.Item>\n <Stack.Item align=\"center\">\n <Text className={mergeStyles(cameraOffLabelStyle, { color: theme.palette.neutralSecondary })}>\n {locale.strings.call.cameraTurnedOff}\n </Text>\n </Stack.Item>\n </Stack>\n );\n }, [theme, locale.strings.call.cameraTurnedOff]);\n\n const devicesButtonStyles = props.mobileView\n ? {\n menuStyles: {\n menuItemStyles: buttonFlyoutIncreasedSizeStyles\n }\n }\n : undefined;\n\n return (\n <Stack\n data-ui-id=\"call-composite-local-preview\"\n className={props.mobileView ? localPreviewContainerStyleMobile(theme) : localPreviewContainerStyleDesktop(theme)}\n >\n <VideoTile\n styles={localPreviewTileStyle}\n renderElement={\n localPreviewProps?.videoStreamElement ? (\n <StreamMedia videoStreamElement={localPreviewProps.videoStreamElement} />\n ) : undefined\n }\n onRenderPlaceholder={onRenderPlaceholder}\n >\n <ControlBar layout=\"floatingBottom\">\n <MicrophoneButton\n data-ui-id=\"call-composite-local-device-settings-microphone-button\"\n checked={isLocalMicrophoneEnabled}\n onToggleMicrophone={onToggleMic}\n disabled={!microphonePermissionGranted \|\| !hasMicrophones}\n showLabel={true}\n // disable tooltip as it obscures list of devices on mobile\n strings={\n props.mobileView ? { tooltipOnContent: '', tooltipOffContent: '', tooltipDisabledContent: '' } : {}\n }\n styles={localPreviewButtonStyle}\n />\n <CameraButton\n data-ui-id=\"call-composite-local-device-settings-camera-button\"\n {...cameraButtonProps}\n showLabel={true}\n disabled={!cameraPermissionGranted \|\| !hasCameras}\n // disable tooltip as it obscures list of devices on mobile\n strings={\n props.mobileView\n ? {\n tooltipOnContent: '',\n tooltipOffContent: '',\n tooltipDisabledContent: '',\n tooltipVideoLoadingContent: ''\n }\n : {}\n }\n styles={localPreviewButtonStyle}\n />\n {props.showDevicesButton && (\n <DevicesButton\n data-ui-id=\"call-composite-local-device-settings-options-button\"\n {...devicesButtonProps}\n // disable button whilst all other buttons are disabled\n disabled={(!microphonePermissionGranted && !cameraPermissionGranted && hasNoSpeakers) \|\| hasNoDevices}\n showLabel={true}\n // disable tooltip as it obscures list of devices on mobile\n strings={props.mobileView ? { tooltipContent: '' } : {}}\n styles={devicesButtonStyles}\n />\n )}\n </ControlBar>\n </VideoTile>\n </Stack>\n );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.d.ts CHANGED Viewed

@@ -1,7 +1,9 @@
+/// <reference types="react" />
 import { VideoGalleryLayout } from "../../../../../react-components/src";
 import { AvatarPersonaDataCallback } from '../../common/AvatarPersona';
 import { RemoteVideoTileMenuOptions } from '../CallComposite';
 import { LocalVideoTileOptions } from '../CallComposite';
+import { PromptProps } from './Prompt';
 /**
  * @private
  */
@@ -16,6 +18,9 @@ export interface MediaGalleryProps {
     localVideoTileOptions?: boolean | LocalVideoTileOptions;
     userSetOverflowGalleryPosition?: 'Responsive' | 'horizontalTop';
     userSetGalleryLayout: VideoGalleryLayout;
+    setIsPromptOpen: (isOpen: boolean) => void;
+    setPromptProps: (props: PromptProps) => void;
+    hideSpotlightButtons?: boolean;
 }
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js CHANGED Viewed

@@ -16,11 +16,12 @@ import { LocalVideoCameraCycleButton } from "../../../../../react-components/src
 import { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';
 /* @conditional-compile-remove(rooms) */
 import { useAdapter } from '../adapter/CallAdapterProvider';
+/* @conditional-compile-remove(spotlight) */
+import { useLocalSpotlightCallbacksWithPrompt, useRemoteSpotlightCallbacksWithPrompt } from '../utils/spotlightUtils';
 const VideoGalleryStyles = {
     root: {
         height: '100%',
-        minHeight: '10rem',
-        // space affordance to ensure media gallery is never collapsed
+        minHeight: '10rem', // space affordance to ensure media gallery is never collapsed
         minWidth: '6rem'
     }
 };
@@ -36,6 +37,8 @@ const remoteVideoViewOptions = {
  */
 export const MediaGallery = (props) => {
     var _a, _b, _c;
+    /* @conditional-compile-remove(spotlight) */
+    const { setIsPromptOpen, setPromptProps, hideSpotlightButtons } = props;
     const videoGalleryProps = usePropsFor(VideoGallery);
     const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);
     const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);
@@ -54,31 +57,24 @@ export const MediaGallery = (props) => {
     const containerHeight = _useContainerHeight(containerRef);
     /* @conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ /* @conditional-compile-remove(vertical-gallery) */
     const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;
-    const layoutBasedOnTilePosition = localVideoTileLayoutTrampoline(/* @conditional-compile-remove(click-to-call) */ (_b = props.localVideoTileOptions) === null || _b === void 0 ? void 0 : _b.position);
+    /* @conditional-compile-remove(reaction) */
+    const reactionResources = adapter.getState().reactions;
+    const layoutBasedOnTilePosition = localVideoTileLayoutTrampoline(
+    /* @conditional-compile-remove(click-to-call) */ (_b = props.localVideoTileOptions) === null || _b === void 0 ? void 0 : _b.position);
     const cameraSwitcherProps = useMemo(() => {
         return Object.assign(Object.assign({}, cameraSwitcherCallback), cameraSwitcherCameras);
     }, [cameraSwitcherCallback, cameraSwitcherCameras]);
     const onRenderAvatar = useCallback((userId, options) => {
-        return React.createElement(Stack, { className: mergeStyles({
-                position: 'absolute',
-                height: '100%',
-                width: '100%'
-            }) },
-            React.createElement(Stack, { styles: {
-                    root: {
-                        margin: 'auto',
-                        maxHeight: '100%'
-                    }
-                } }, (options === null || options === void 0 ? void 0 : options.coinSize) && React.createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData }))));
+        return (React.createElement(Stack, { className: mergeStyles({ position: 'absolute', height: '100%', width: '100%' }) },
+            React.createElement(Stack, { styles: { root: { margin: 'auto', maxHeight: '100%' } } }, (options === null || options === void 0 ? void 0 : options.coinSize) && (React.createElement(AvatarPersona, Object.assign({ userId: userId }, options, { dataProvider: props.onFetchAvatarPersonaData }))))));
     }, [props.onFetchAvatarPersonaData]);
     const remoteVideoTileMenuOptions = useMemo(() => {
         var _a;
-        return ((_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden) ? false : props.isMobile ? {
-            kind: 'drawer',
-            hostId: props.drawerMenuHostId
-        } : {
-            kind: 'contextual'
-        };
+        return ((_a = props.remoteVideoTileMenuOptions) === null || _a === void 0 ? void 0 : _a.isHidden)
+            ? false
+            : props.isMobile
+                ? { kind: 'drawer', hostId: props.drawerMenuHostId }
+                : { kind: 'contextual' };
     }, [(_c = props.remoteVideoTileMenuOptions) === null || _c === void 0 ? void 0 : _c.isHidden, props.isMobile, props.drawerMenuHostId]);
     /* @conditional-compile-remove(vertical-gallery) */
     const overflowGalleryPosition = useMemo(() => {
@@ -86,33 +82,84 @@ export const MediaGallery = (props) => {
         if (props.userSetOverflowGalleryPosition === 'horizontalTop') {
             return props.userSetOverflowGalleryPosition;
         }
-        return containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9 ? 'verticalRight' : 'horizontalBottom';
-    }, [/* @conditional-compile-remove(gallery-layouts) */ props.userSetOverflowGalleryPosition, containerWidth, containerHeight]);
+        return containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9
+            ? 'verticalRight'
+            : 'horizontalBottom';
+    }, [
+        /* @conditional-compile-remove(gallery-layouts) */ props.userSetOverflowGalleryPosition,
+        containerWidth,
+        containerHeight
+    ]);
+    /* @conditional-compile-remove(spotlight) */
+    const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight } = videoGalleryProps;
+    /* @conditional-compile-remove(spotlight) */
+    const { onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt } = useLocalSpotlightCallbacksWithPrompt(onStartLocalSpotlight, onStopLocalSpotlight, setIsPromptOpen, setPromptProps);
+    /* @conditional-compile-remove(spotlight) */
+    const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(onStartRemoteSpotlight, onStopRemoteSpotlight, setIsPromptOpen, setPromptProps);
     const VideoGalleryMemoized = useMemo(() => {
         const layoutBasedOnUserSelection = () => {
             /* @conditional-compile-remove(gallery-layouts) */
             return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;
             return layoutBasedOnTilePosition;
         };
-        return React.createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: layoutBasedOnUserSelection(), showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar, remoteVideoTileMenu: remoteVideoTileMenuOptions,
-            /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition: overflowGalleryPosition,
-            /* @conditional-compile-remove(rooms) */ localVideoTileSize: props.localVideoTileOptions === false || userRole === 'Consumer' || isRoomsCall && userRole === 'Unknown' ? 'hidden' : props.isMobile && containerAspectRatio < 1 ? '9:16' : '16:9' }));
-    }, [videoGalleryProps, props.isMobile, /* @conditional-compile-remove(rooms) */
-        props.localVideoTileOptions, cameraSwitcherProps, onRenderAvatar, remoteVideoTileMenuOptions, /* @conditional-compile-remove(vertical-gallery) */
-        overflowGalleryPosition, /* @conditional-compile-remove(rooms) */
-        userRole, /* @conditional-compile-remove(rooms) */
-        isRoomsCall, /* @conditional-compile-remove(vertical-gallery) */
-        containerAspectRatio, /* @conditional-compile-remove(gallery-layouts) */
-        props.userSetGalleryLayout, layoutBasedOnTilePosition]);
-    return React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
+        return (React.createElement(VideoGallery, Object.assign({}, videoGalleryProps, { localVideoViewOptions: localVideoViewOptions, remoteVideoViewOptions: remoteVideoViewOptions, styles: VideoGalleryStyles, layout: layoutBasedOnUserSelection(), showCameraSwitcherInLocalPreview: props.isMobile, localVideoCameraCycleButtonProps: cameraSwitcherProps, onRenderAvatar: onRenderAvatar, remoteVideoTileMenu: remoteVideoTileMenuOptions,
+            /* @conditional-compile-remove(vertical-gallery) */
+            overflowGalleryPosition: overflowGalleryPosition,
+            /* @conditional-compile-remove(rooms) */
+            localVideoTileSize: props.localVideoTileOptions === false || userRole === 'Consumer' || (isRoomsCall && userRole === 'Unknown')
+                ? 'hidden'
+                : props.isMobile && containerAspectRatio < 1
+                    ? '9:16'
+                    : '16:9',
+            /* @conditional-compile-remove(reaction) */
+            reactionResources: reactionResources,
+            /* @conditional-compile-remove(spotlight) */
+            onStartLocalSpotlight: hideSpotlightButtons ? undefined : onStartLocalSpotlightWithPrompt,
+            /* @conditional-compile-remove(spotlight) */
+            onStopLocalSpotlight: hideSpotlightButtons ? undefined : onStopLocalSpotlightWithPrompt,
+            /* @conditional-compile-remove(spotlight) */
+            onStartRemoteSpotlight: hideSpotlightButtons ? undefined : onStartRemoteSpotlightWithPrompt,
+            /* @conditional-compile-remove(spotlight) */
+            onStopRemoteSpotlight: hideSpotlightButtons ? undefined : onStopRemoteSpotlightWithPrompt })));
+    }, [
+        videoGalleryProps,
+        props.isMobile,
+        /* @conditional-compile-remove(rooms) */
+        props.localVideoTileOptions,
+        cameraSwitcherProps,
+        onRenderAvatar,
+        remoteVideoTileMenuOptions,
+        /* @conditional-compile-remove(vertical-gallery) */
+        overflowGalleryPosition,
+        /* @conditional-compile-remove(rooms) */
+        userRole,
+        /* @conditional-compile-remove(rooms) */
+        isRoomsCall,
+        /* @conditional-compile-remove(vertical-gallery) */
+        containerAspectRatio,
+        /* @conditional-compile-remove(gallery-layouts) */
+        props.userSetGalleryLayout,
+        layoutBasedOnTilePosition,
+        /* @conditional-compile-remove(reaction) */
+        reactionResources,
+        /* @conditional-compile-remove(spotlight) */
+        onStartLocalSpotlightWithPrompt,
+        /* @conditional-compile-remove(spotlight) */
+        onStopLocalSpotlightWithPrompt,
+        /* @conditional-compile-remove(spotlight) */
+        onStartRemoteSpotlightWithPrompt,
+        /* @conditional-compile-remove(spotlight) */
+        onStopRemoteSpotlightWithPrompt,
+        /* @conditional-compile-remove(spotlight) */
+        hideSpotlightButtons
+    ]);
+    return (React.createElement("div", { ref: containerRef, style: mediaGalleryContainerStyles },
         React.createElement(Announcer, { announcementString: announcerString, ariaLive: 'polite' }),
-        VideoGalleryMemoized);
-};
-const mediaGalleryContainerStyles = {
-    width: '100%',
-    height: '100%'
+        VideoGalleryMemoized));
 };
-const localVideoTileLayoutTrampoline = (localTileOptions) => {
+const mediaGalleryContainerStyles = { width: '100%', height: '100%' };
+const localVideoTileLayoutTrampoline = (
+/* @conditional-compile-remove(click-to-call) */ localTileOptions) => {
     /* @conditional-compile-remove(click-to-call) */
     return localTileOptions === 'grid' ? 'default' : 'floatingLocalVideo';
     return 'floatingLocalVideo';

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MediaGallery.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/MediaGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { CSSProperties, useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(vertical-gallery) / / @conditional-compile-remove(rooms) /\nimport { useRef } from 'react';\nimport { VideoGallery, VideoStreamOptions, CustomAvatarOptions, Announcer, VideoTileContextualMenuProps, VideoTileDrawerMenuProps } from '@internal/react-components';\nimport { VideoGalleryLayout } from '@internal/react-components';\n/ @conditional-compile-remove(vertical-gallery) / / @conditional-compile-remove(rooms) /\nimport { _useContainerWidth, _useContainerHeight } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useSelector } from '../hooks/useSelector';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { LocalVideoCameraCycleButton } from '@internal/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';\nimport { RemoteVideoTileMenuOptions } from '../CallComposite';\n/ @conditional-compile-remove(click-to-call) / / @conditional-compile-remove(rooms) / / @conditional-compile-remove(vertical-gallery) /\nimport { LocalVideoTileOptions } from '../CallComposite';\n/ @conditional-compile-remove(rooms) /\nimport { useAdapter } from '../adapter/CallAdapterProvider';\nconst VideoGalleryStyles = {\n root: {\n height: '100%',\n minHeight: '10rem',\n // space affordance to ensure media gallery is never collapsed\n minWidth: '6rem'\n }\n};\nconst localVideoViewOptions = ({\n scalingMode: 'Crop',\n isMirrored: true\n} as VideoStreamOptions);\nconst remoteVideoViewOptions = ({\n scalingMode: 'Crop'\n} as VideoStreamOptions);\n\n/\n @private\n /\nexport interface MediaGalleryProps {\n isVideoStreamOn?: boolean;\n isMicrophoneChecked?: boolean;\n onStartLocalVideo: () => Promise<void>;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n isMobile?: boolean;\n drawerMenuHostId?: string;\n remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n / @conditional-compile-remove(click-to-call) / / @conditional-compile-remove(rooms) / / @conditional-compile-remove(vertical-gallery) /\n localVideoTileOptions?: boolean \| LocalVideoTileOptions;\n / @conditional-compile-remove(gallery-layouts) /\n userSetOverflowGalleryPosition?: 'Responsive' \| 'horizontalTop';\n / @conditional-compile-remove(gallery-layouts) /\n userSetGalleryLayout: VideoGalleryLayout;\n}\n\n/\n @private\n /\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\n const videoGalleryProps = usePropsFor(VideoGallery);\n const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n const announcerString = useParticipantChangedAnnouncement();\n\n / @conditional-compile-remove(rooms) /\n const adapter = useAdapter();\n / @conditional-compile-remove(rooms) /\n const userRole = adapter.getState().call?.role;\n / @conditional-compile-remove(rooms) /\n const isRoomsCall = adapter.getState().isRoomsCall;\n\n / @conditional-compile-remove(vertical-gallery) / / @conditional-compile-remove(rooms) /\n const containerRef = useRef<HTMLDivElement>(null);\n / @conditional-compile-remove(vertical-gallery) / / @conditional-compile-remove(rooms) /\n const containerWidth = _useContainerWidth(containerRef);\n / @conditional-compile-remove(vertical-gallery) / / @conditional-compile-remove(rooms) /\n const containerHeight = _useContainerHeight(containerRef);\n / @conditional-compile-remove(click-to-call) / / @conditional-compile-remove(rooms) / / @conditional-compile-remove(vertical-gallery) /\n const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;\n const layoutBasedOnTilePosition: VideoGalleryLayout = localVideoTileLayoutTrampoline( / @conditional-compile-remove(click-to-call) /(props.localVideoTileOptions as LocalVideoTileOptions)?.position);\n const cameraSwitcherProps = useMemo(() => {\n return {\n ...cameraSwitcherCallback,\n ...cameraSwitcherCameras\n };\n }, [cameraSwitcherCallback, cameraSwitcherCameras]);\n const onRenderAvatar = useCallback((userId?: string, options?: CustomAvatarOptions) => {\n return <Stack className={mergeStyles({\n position: 'absolute',\n height: '100%',\n width: '100%'\n })}>\n <Stack styles={{\n root: {\n margin: 'auto',\n maxHeight: '100%'\n }\n }}>\n {options?.coinSize && <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />}\n </Stack>\n </Stack>;\n }, [props.onFetchAvatarPersonaData]);\n const remoteVideoTileMenuOptions: false \| VideoTileContextualMenuProps \| VideoTileDrawerMenuProps = useMemo(() => {\n return props.remoteVideoTileMenuOptions?.isHidden ? false : props.isMobile ? {\n kind: 'drawer',\n hostId: props.drawerMenuHostId\n } : {\n kind: 'contextual'\n };\n }, [props.remoteVideoTileMenuOptions?.isHidden, props.isMobile, props.drawerMenuHostId]);\n\n / @conditional-compile-remove(vertical-gallery) /\n const overflowGalleryPosition = useMemo(() => {\n / @conditional-compile-remove(gallery-layouts) /\n if (props.userSetOverflowGalleryPosition === 'horizontalTop') {\n return props.userSetOverflowGalleryPosition;\n }\n return containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9 ? 'verticalRight' : 'horizontalBottom';\n }, [/ @conditional-compile-remove(gallery-layouts) /props.userSetOverflowGalleryPosition, containerWidth, containerHeight]);\n const VideoGalleryMemoized = useMemo(() => {\n const layoutBasedOnUserSelection = (): VideoGalleryLayout => {\n / @conditional-compile-remove(gallery-layouts) /\n return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;\n return layoutBasedOnTilePosition;\n };\n return <VideoGallery {...videoGalleryProps} localVideoViewOptions={localVideoViewOptions} remoteVideoViewOptions={remoteVideoViewOptions} styles={VideoGalleryStyles} layout={layoutBasedOnUserSelection()} showCameraSwitcherInLocalPreview={props.isMobile} localVideoCameraCycleButtonProps={cameraSwitcherProps} onRenderAvatar={onRenderAvatar} remoteVideoTileMenu={remoteVideoTileMenuOptions}\n / @conditional-compile-remove(vertical-gallery) / overflowGalleryPosition={overflowGalleryPosition}\n / @conditional-compile-remove(rooms) / localVideoTileSize={props.localVideoTileOptions === false \|\| userRole === 'Consumer' \|\| isRoomsCall && userRole === 'Unknown' ? 'hidden' : props.isMobile && containerAspectRatio < 1 ? '9:16' : '16:9'} />;\n }, [videoGalleryProps, props.isMobile, / @conditional-compile-remove(rooms) /\n props.localVideoTileOptions, cameraSwitcherProps, onRenderAvatar, remoteVideoTileMenuOptions, / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryPosition, / @conditional-compile-remove(rooms) /\n userRole, / @conditional-compile-remove(rooms) /\n isRoomsCall, / @conditional-compile-remove(vertical-gallery) /\n containerAspectRatio, / @conditional-compile-remove(gallery-layouts) /\n props.userSetGalleryLayout, layoutBasedOnTilePosition]);\n return <div / @conditional-compile-remove(vertical-gallery) / ref={containerRef} style={mediaGalleryContainerStyles}>\n <Announcer announcementString={announcerString} ariaLive={'polite'} />\n {VideoGalleryMemoized}\n </div>;\n};\nconst mediaGalleryContainerStyles: CSSProperties = {\n width: '100%',\n height: '100%'\n};\nconst localVideoTileLayoutTrampoline = (localTileOptions?: string): VideoGalleryLayout => {\n / @conditional-compile-remove(click-to-call) */\n return localTileOptions === 'grid' ? 'default' : 'floatingLocalVideo';\n return 'floatingLocalVideo';\n};"]}
1	+ {"version":3,"file":"MediaGallery.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/MediaGallery.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { CSSProperties, useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(vertical-gallery) / / @conditional-compile-remove(rooms) /\nimport { useRef } from 'react';\nimport {\n VideoGallery,\n VideoStreamOptions,\n CustomAvatarOptions,\n Announcer,\n VideoTileContextualMenuProps,\n VideoTileDrawerMenuProps\n} from '@internal/react-components';\nimport { VideoGalleryLayout } from '@internal/react-components';\n/ @conditional-compile-remove(vertical-gallery) / / @conditional-compile-remove(rooms) /\nimport { _useContainerWidth, _useContainerHeight } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { AvatarPersona, AvatarPersonaDataCallback } from '../../common/AvatarPersona';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { useSelector } from '../hooks/useSelector';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { LocalVideoCameraCycleButton } from '@internal/react-components';\nimport { _formatString } from '@internal/acs-ui-common';\nimport { useParticipantChangedAnnouncement } from '../utils/MediaGalleryUtils';\nimport { RemoteVideoTileMenuOptions } from '../CallComposite';\n/ @conditional-compile-remove(click-to-call) / / @conditional-compile-remove(rooms) / / @conditional-compile-remove(vertical-gallery) /\nimport { LocalVideoTileOptions } from '../CallComposite';\n/ @conditional-compile-remove(rooms) /\nimport { useAdapter } from '../adapter/CallAdapterProvider';\n/ @conditional-compile-remove(spotlight) /\nimport { PromptProps } from './Prompt';\n/ @conditional-compile-remove(spotlight) /\nimport { useLocalSpotlightCallbacksWithPrompt, useRemoteSpotlightCallbacksWithPrompt } from '../utils/spotlightUtils';\n\nconst VideoGalleryStyles = {\n root: {\n height: '100%',\n minHeight: '10rem', // space affordance to ensure media gallery is never collapsed\n minWidth: '6rem'\n }\n};\n\nconst localVideoViewOptions = {\n scalingMode: 'Crop',\n isMirrored: true\n} as VideoStreamOptions;\n\nconst remoteVideoViewOptions = {\n scalingMode: 'Crop'\n} as VideoStreamOptions;\n\n/\n @private\n /\nexport interface MediaGalleryProps {\n isVideoStreamOn?: boolean;\n isMicrophoneChecked?: boolean;\n onStartLocalVideo: () => Promise<void>;\n onFetchAvatarPersonaData?: AvatarPersonaDataCallback;\n isMobile?: boolean;\n drawerMenuHostId?: string;\n remoteVideoTileMenuOptions?: RemoteVideoTileMenuOptions;\n / @conditional-compile-remove(click-to-call) / / @conditional-compile-remove(rooms) / / @conditional-compile-remove(vertical-gallery) /\n localVideoTileOptions?: boolean \| LocalVideoTileOptions;\n / @conditional-compile-remove(gallery-layouts) /\n userSetOverflowGalleryPosition?: 'Responsive' \| 'horizontalTop';\n / @conditional-compile-remove(gallery-layouts) /\n userSetGalleryLayout: VideoGalleryLayout;\n / @conditional-compile-remove(spotlight) /\n setIsPromptOpen: (isOpen: boolean) => void;\n / @conditional-compile-remove(spotlight) /\n setPromptProps: (props: PromptProps) => void;\n / @conditional-compile-remove(spotlight) /\n hideSpotlightButtons?: boolean;\n}\n\n/\n @private\n /\nexport const MediaGallery = (props: MediaGalleryProps): JSX.Element => {\n / @conditional-compile-remove(spotlight) /\n const { setIsPromptOpen, setPromptProps, hideSpotlightButtons } = props;\n\n const videoGalleryProps = usePropsFor(VideoGallery);\n const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n const announcerString = useParticipantChangedAnnouncement();\n\n / @conditional-compile-remove(rooms) /\n const adapter = useAdapter();\n / @conditional-compile-remove(rooms) /\n const userRole = adapter.getState().call?.role;\n / @conditional-compile-remove(rooms) /\n const isRoomsCall = adapter.getState().isRoomsCall;\n\n / @conditional-compile-remove(vertical-gallery) / / @conditional-compile-remove(rooms) /\n const containerRef = useRef<HTMLDivElement>(null);\n / @conditional-compile-remove(vertical-gallery) / / @conditional-compile-remove(rooms) /\n const containerWidth = _useContainerWidth(containerRef);\n / @conditional-compile-remove(vertical-gallery) / / @conditional-compile-remove(rooms) /\n const containerHeight = _useContainerHeight(containerRef);\n / @conditional-compile-remove(click-to-call) / / @conditional-compile-remove(rooms) / / @conditional-compile-remove(vertical-gallery) /\n const containerAspectRatio = containerWidth && containerHeight ? containerWidth / containerHeight : 0;\n / @conditional-compile-remove(reaction) /\n const reactionResources = adapter.getState().reactions;\n\n const layoutBasedOnTilePosition: VideoGalleryLayout = localVideoTileLayoutTrampoline(\n / @conditional-compile-remove(click-to-call) / (props.localVideoTileOptions as LocalVideoTileOptions)?.position\n );\n\n const cameraSwitcherProps = useMemo(() => {\n return {\n ...cameraSwitcherCallback,\n ...cameraSwitcherCameras\n };\n }, [cameraSwitcherCallback, cameraSwitcherCameras]);\n\n const onRenderAvatar = useCallback(\n (userId?: string, options?: CustomAvatarOptions) => {\n return (\n <Stack className={mergeStyles({ position: 'absolute', height: '100%', width: '100%' })}>\n <Stack styles={{ root: { margin: 'auto', maxHeight: '100%' } }}>\n {options?.coinSize && (\n <AvatarPersona userId={userId} {...options} dataProvider={props.onFetchAvatarPersonaData} />\n )}\n </Stack>\n </Stack>\n );\n },\n [props.onFetchAvatarPersonaData]\n );\n\n const remoteVideoTileMenuOptions: false \| VideoTileContextualMenuProps \| VideoTileDrawerMenuProps = useMemo(() => {\n return props.remoteVideoTileMenuOptions?.isHidden\n ? false\n : props.isMobile\n ? { kind: 'drawer', hostId: props.drawerMenuHostId }\n : { kind: 'contextual' };\n }, [props.remoteVideoTileMenuOptions?.isHidden, props.isMobile, props.drawerMenuHostId]);\n\n / @conditional-compile-remove(vertical-gallery) /\n const overflowGalleryPosition = useMemo(() => {\n / @conditional-compile-remove(gallery-layouts) /\n if (props.userSetOverflowGalleryPosition === 'horizontalTop') {\n return props.userSetOverflowGalleryPosition;\n }\n return containerWidth && containerHeight && containerWidth / containerHeight >= 16 / 9\n ? 'verticalRight'\n : 'horizontalBottom';\n }, [\n / @conditional-compile-remove(gallery-layouts) / props.userSetOverflowGalleryPosition,\n containerWidth,\n containerHeight\n ]);\n\n / @conditional-compile-remove(spotlight) /\n const { onStartLocalSpotlight, onStopLocalSpotlight, onStartRemoteSpotlight, onStopRemoteSpotlight } =\n videoGalleryProps;\n\n / @conditional-compile-remove(spotlight) /\n const { onStartLocalSpotlightWithPrompt, onStopLocalSpotlightWithPrompt } = useLocalSpotlightCallbacksWithPrompt(\n onStartLocalSpotlight,\n onStopLocalSpotlight,\n setIsPromptOpen,\n setPromptProps\n );\n\n / @conditional-compile-remove(spotlight) /\n const { onStartRemoteSpotlightWithPrompt, onStopRemoteSpotlightWithPrompt } = useRemoteSpotlightCallbacksWithPrompt(\n onStartRemoteSpotlight,\n onStopRemoteSpotlight,\n setIsPromptOpen,\n setPromptProps\n );\n\n const VideoGalleryMemoized = useMemo(() => {\n const layoutBasedOnUserSelection = (): VideoGalleryLayout => {\n / @conditional-compile-remove(gallery-layouts) /\n return props.localVideoTileOptions ? layoutBasedOnTilePosition : props.userSetGalleryLayout;\n return layoutBasedOnTilePosition;\n };\n\n return (\n <VideoGallery\n {...videoGalleryProps}\n localVideoViewOptions={localVideoViewOptions}\n remoteVideoViewOptions={remoteVideoViewOptions}\n styles={VideoGalleryStyles}\n layout={layoutBasedOnUserSelection()}\n showCameraSwitcherInLocalPreview={props.isMobile}\n localVideoCameraCycleButtonProps={cameraSwitcherProps}\n onRenderAvatar={onRenderAvatar}\n remoteVideoTileMenu={remoteVideoTileMenuOptions}\n / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryPosition={overflowGalleryPosition}\n / @conditional-compile-remove(rooms) /\n localVideoTileSize={\n props.localVideoTileOptions === false \|\| userRole === 'Consumer' \|\| (isRoomsCall && userRole === 'Unknown')\n ? 'hidden'\n : props.isMobile && containerAspectRatio < 1\n ? '9:16'\n : '16:9'\n }\n / @conditional-compile-remove(reaction) /\n reactionResources={reactionResources}\n / @conditional-compile-remove(spotlight) /\n onStartLocalSpotlight={hideSpotlightButtons ? undefined : onStartLocalSpotlightWithPrompt}\n / @conditional-compile-remove(spotlight) /\n onStopLocalSpotlight={hideSpotlightButtons ? undefined : onStopLocalSpotlightWithPrompt}\n / @conditional-compile-remove(spotlight) /\n onStartRemoteSpotlight={hideSpotlightButtons ? undefined : onStartRemoteSpotlightWithPrompt}\n / @conditional-compile-remove(spotlight) /\n onStopRemoteSpotlight={hideSpotlightButtons ? undefined : onStopRemoteSpotlightWithPrompt}\n />\n );\n }, [\n videoGalleryProps,\n props.isMobile,\n / @conditional-compile-remove(rooms) /\n props.localVideoTileOptions,\n cameraSwitcherProps,\n onRenderAvatar,\n remoteVideoTileMenuOptions,\n / @conditional-compile-remove(vertical-gallery) /\n overflowGalleryPosition,\n / @conditional-compile-remove(rooms) /\n userRole,\n / @conditional-compile-remove(rooms) /\n isRoomsCall,\n / @conditional-compile-remove(vertical-gallery) /\n containerAspectRatio,\n / @conditional-compile-remove(gallery-layouts) /\n props.userSetGalleryLayout,\n layoutBasedOnTilePosition,\n / @conditional-compile-remove(reaction) /\n reactionResources,\n / @conditional-compile-remove(spotlight) /\n onStartLocalSpotlightWithPrompt,\n / @conditional-compile-remove(spotlight) /\n onStopLocalSpotlightWithPrompt,\n / @conditional-compile-remove(spotlight) /\n onStartRemoteSpotlightWithPrompt,\n / @conditional-compile-remove(spotlight) /\n onStopRemoteSpotlightWithPrompt,\n / @conditional-compile-remove(spotlight) /\n hideSpotlightButtons\n ]);\n\n return (\n <div / @conditional-compile-remove(vertical-gallery) / ref={containerRef} style={mediaGalleryContainerStyles}>\n <Announcer announcementString={announcerString} ariaLive={'polite'} />\n {VideoGalleryMemoized}\n </div>\n );\n};\n\nconst mediaGalleryContainerStyles: CSSProperties = { width: '100%', height: '100%' };\n\nconst localVideoTileLayoutTrampoline = (\n / @conditional-compile-remove(click-to-call) / localTileOptions?: string\n): VideoGalleryLayout => {\n / @conditional-compile-remove(click-to-call) */\n return localTileOptions === 'grid' ? 'default' : 'floatingLocalVideo';\n return 'floatingLocalVideo';\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MutedNotification.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 /**
  * @private
  */

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MutedNotification.js CHANGED Viewed

@@ -10,10 +10,10 @@ import { useLocale } from '../../localization';
 export function MutedNotification(props) {
     const locale = useLocale();
     const theme = useTheme();
-    return React.createElement(Stack, { horizontal: true, horizontalAlign: "center", className: mergeStyles(props.speakingWhileMuted === true ? isSpeakingAndMutedAnimationStyles : isNotSpeakingAndMutedAnimationStyles) },
+    return (React.createElement(Stack, { horizontal: true, horizontalAlign: "center", className: mergeStyles(props.speakingWhileMuted === true ? isSpeakingAndMutedAnimationStyles : isNotSpeakingAndMutedAnimationStyles) },
         React.createElement(Stack, { horizontal: true, className: mergeStyles(stackStyle(theme)) },
             React.createElement(CallCompositeIcon, { iconName: "Muted", className: mergeStyles(iconStyle(theme)) }),
-            React.createElement(Text, { className: mergeStyles(textStyle(theme)), "aria-live": 'polite' }, locale.strings.call.mutedMessage)));
+            React.createElement(Text, { className: mergeStyles(textStyle(theme)), "aria-live": 'polite' }, locale.strings.call.mutedMessage))));
 }
 const stackStyle = (theme) => {
     return {

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/MutedNotification.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MutedNotification.js","sourceRoot":"","sources":["~~../../../../../../../preprocess-dist/~~react-composites/src/composites/CallComposite/components/MutedNotification.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAkB,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAS/C;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;~~IACzB~~,OAAO,oBAAC,KAAK,~~IAAC~~,UAAU,~~QAAC~~,eAAe,EAAC,QAAQ,~~EAAC~~,SAAS,EAAE,WAAW,~~CAAC~~,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,oCAAoC,~~CAAC~~;~~QAClL~~,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YACzD,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,GAAI;YAChF,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,eAAa,QAAQ,IAChE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAC5B,CACD,CACF,CAAC;~~AACb~~,CAAC;~~AACD~~,MAAM,UAAU,GAAG,CAAC,KAAa,EAAU,EAAE;IAC3C,OAAO;QACL,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC/B,GAAG,EAAE,MAAM;QACX,OAAO,EAAE,MAAM;QACf,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,GAAG;KACb,CAAC;AACJ,CAAC,CAAC;~~AACF~~,MAAM,SAAS,GAAG,CAAC,KAAa,EAAU,EAAE;IAC1C,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,SAAS,EAAE,SAAS;KACrB,CAAC;AACJ,CAAC,CAAC;~~AACF~~,MAAM,SAAS,GAAG,CAAC,KAAa,EAAU,EAAE;IAC1C,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,QAAQ,EAAE,MAAM;KACjB,CAAC;AACJ,CAAC,CAAC;~~AACF~~,MAAM,iCAAiC,qBAClC,eAAe,CAAC,SAAS,CAC7B,CAAC;~~AACF~~,MAAM,oCAAoC,mCACrC,eAAe,CAAC,UAAU,KAC7B,OAAO,EAAE,MAAM,GAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { AnimationStyles, IStyle, ITheme, mergeStyles, Stack, Text, useTheme } from '@fluentui/react';\nimport React from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\n\n/*\n @private\n /\nexport interface MutedNotificationProps {\n speakingWhileMuted: boolean;\n}\n\n/\n Notify the user that they're muted.\n */\nexport function MutedNotification(props: MutedNotificationProps): JSX.Element {\n const locale = useLocale();\n const theme = useTheme();\n return <Stack horizontal horizontalAlign=\"center\" className={mergeStyles(props.speakingWhileMuted === true ? isSpeakingAndMutedAnimationStyles : isNotSpeakingAndMutedAnimationStyles)}>\n <Stack horizontal className={mergeStyles(stackStyle(theme))}>\n <CallCompositeIcon iconName=\"Muted\" className={mergeStyles(iconStyle(theme))} />\n <Text className={mergeStyles(textStyle(theme))} aria-live={'polite'}>\n {locale.strings.call.mutedMessage}\n </Text>\n </Stack>\n </Stack~~>;\~~n}\nconst stackStyle = (theme: ITheme): IStyle => {\n return {\n background: theme.palette.black,\n gap: `1rem`,\n padding: `1rem`,\n borderRadius: theme.effects.roundedCorner4,\n width: 'fit-content',\n opacity: 0.8\n };\n};\nconst iconStyle = (theme: ITheme): IStyle => {\n return {\n color: theme.palette.white,\n maxHeight: '1.25rem'\n };\n};\nconst textStyle = (theme: ITheme): IStyle => {\n return {\n color: theme.palette.white,\n fontSize: `1rem`\n };\n};\nconst isSpeakingAndMutedAnimationStyles: IStyle = {\n ...AnimationStyles.fadeIn100\n};\nconst isNotSpeakingAndMutedAnimationStyles: IStyle = {\n ...AnimationStyles.fadeOut200,\n display: 'none'\n};"]}
1	+ {"version":3,"file":"MutedNotification.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/MutedNotification.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,EAAE,eAAe,EAAkB,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtG,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAS/C;;GAEG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,oBAAC,KAAK,IACJ,UAAU,QACV,eAAe,EAAC,QAAQ,EACxB,SAAS,EAAE,WAAW,CACpB,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,oCAAoC,CAC7G;QAED,oBAAC,KAAK,IAAC,UAAU,QAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;YACzD,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,GAAI;YAChF,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,eAAa,QAAQ,IAChE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAC5B,CACD,CACF,CACT,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,GAAG,CAAC,KAAa,EAAU,EAAE;IAC3C,OAAO;QACL,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC/B,GAAG,EAAE,MAAM;QACX,OAAO,EAAE,MAAM;QACf,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,cAAc;QAC1C,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,GAAG;KACb,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,KAAa,EAAU,EAAE;IAC1C,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,SAAS,EAAE,SAAS;KACrB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,CAAC,KAAa,EAAU,EAAE;IAC1C,OAAO;QACL,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC1B,QAAQ,EAAE,MAAM;KACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iCAAiC,qBAClC,eAAe,CAAC,SAAS,CAC7B,CAAC;AAEF,MAAM,oCAAoC,mCACrC,eAAe,CAAC,UAAU,KAC7B,OAAO,EAAE,MAAM,GAChB,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { AnimationStyles, IStyle, ITheme, mergeStyles, Stack, Text, useTheme } from '@fluentui/react';\nimport React from 'react';\nimport { CallCompositeIcon } from '../../common/icons';\nimport { useLocale } from '../../localization';\n\n/*\n @private\n /\nexport interface MutedNotificationProps {\n speakingWhileMuted: boolean;\n}\n\n/\n Notify the user that they're muted.\n */\nexport function MutedNotification(props: MutedNotificationProps): JSX.Element {\n const locale = useLocale();\n const theme = useTheme();\n\n return (\n <Stack\n horizontal\n horizontalAlign=\"center\"\n className={mergeStyles(\n props.speakingWhileMuted === true ? isSpeakingAndMutedAnimationStyles : isNotSpeakingAndMutedAnimationStyles\n )}\n >\n <Stack horizontal className={mergeStyles(stackStyle(theme))}>\n <CallCompositeIcon iconName=\"Muted\" className={mergeStyles(iconStyle(theme))} />\n <Text className={mergeStyles(textStyle(theme))} aria-live={'polite'}>\n {locale.strings.call.mutedMessage}\n </Text>\n </Stack>\n </Stack>\n );\n}\n\nconst stackStyle = (theme: ITheme): IStyle => {\n return {\n background: theme.palette.black,\n gap: `1rem`,\n padding: `1rem`,\n borderRadius: theme.effects.roundedCorner4,\n width: 'fit-content',\n opacity: 0.8\n };\n};\n\nconst iconStyle = (theme: ITheme): IStyle => {\n return {\n color: theme.palette.white,\n maxHeight: '1.25rem'\n };\n};\n\nconst textStyle = (theme: ITheme): IStyle => {\n return {\n color: theme.palette.white,\n fontSize: `1rem`\n };\n};\n\nconst isSpeakingAndMutedAnimationStyles: IStyle = {\n ...AnimationStyles.fadeIn100\n};\n\nconst isNotSpeakingAndMutedAnimationStyles: IStyle = {\n ...AnimationStyles.fadeOut200,\n display: 'none'\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/NetworkReconnectTile.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { VideoGalleryStream } from "../../../../../react-components/src";
 /**
  * @private

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/NetworkReconnectTile.js CHANGED Viewed

@@ -18,10 +18,10 @@ export const NetworkReconnectTile = (props) => {
     const palette = useTheme().palette;
     const strings = useLocale().strings.call;
     const handlers = useHandlers(ExpandedLocalVideoTile);
-    return React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(containerStyle), "aria-atomic": true },
+    return (React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(containerStyle), "aria-atomic": true },
             React.createElement(Stack, { horizontal: true, className: mergeStyles(titleContainerStyle) },
                 React.createElement(CallCompositeIcon, { iconName: "NetworkReconnectIcon", className: mergeStyles(titleStyle(palette, isVideoReady)) }),
                 React.createElement(Text, { className: mergeStyles(titleStyle(palette, isVideoReady)), "aria-live": 'assertive' }, strings.networkReconnectTitle)),
-            React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": 'assertive' }, strings.networkReconnectMoreDetails)) }, handlers));
+            React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": 'assertive' }, strings.networkReconnectMoreDetails)) }, handlers)));
 };
 //# sourceMappingURL=NetworkReconnectTile.js.map