@azure/communication-react 1.20.0-beta.1 → 1.21.0-alpha-202410180016

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.js

@@ -9,28 +9,30 @@ import { useLocale } from '../../localization';
  */
 export const CapabilitiesChangedNotificationBar = (props) => {
     const locale = useLocale();
-    return React.createElement(Stack, { "data-ui-id": "capabilities-changed-notification-bar-stack" }, props.capabilitiesChangedNotifications.map(notification => {
+    return (React.createElement(Stack, { "data-ui-id": "capabilities-changed-notification-bar-stack" }, props.capabilitiesChangedNotifications.map((notification) => {
         const message = getCapabilityChangedNotificationString(notification, locale.strings.call.capabilityChangedNotification);
         if (!message) {
             return null;
         }
         const iconProps = getCustomMessageBarIconProps(notification);
-        return React.createElement(MessageBar, { key: notification.capabilityName, styles: messageBarStyles, messageBarType: MessageBarType.warning, dismissIconProps: {
-                iconName: 'ErrorBarClear'
-            }, onDismiss: () => props.onDismissNotification(notification), messageBarIconProps: iconProps }, message);
-    }));
+        return (React.createElement(MessageBar, { key: notification.capabilityName, styles: messageBarStyles, messageBarType: MessageBarType.warning, dismissIconProps: { iconName: 'ErrorBarClear' }, onDismiss: () => props.onDismissNotification(notification), messageBarIconProps: iconProps }, message));
+    })));
 };
 const getCapabilityChangedNotificationString = (notification, strings) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     switch (notification.capabilityName) {
         case 'turnVideoOn':
             if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {
-                return notification.isPresent ? (_a = strings === null || strings === void 0 ? void 0 : strings.turnVideoOn) === null || _a === void 0 ? void 0 : _a.grantedDueToMeetingOption : (_b = strings === null || strings === void 0 ? void 0 : strings.turnVideoOn) === null || _b === void 0 ? void 0 : _b.lostDueToMeetingOption;
+                return notification.isPresent
+                    ? (_a = strings === null || strings === void 0 ? void 0 : strings.turnVideoOn) === null || _a === void 0 ? void 0 : _a.grantedDueToMeetingOption
+                    : (_b = strings === null || strings === void 0 ? void 0 : strings.turnVideoOn) === null || _b === void 0 ? void 0 : _b.lostDueToMeetingOption;
             }
             break;
         case 'unmuteMic':
             if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {
-                return notification.isPresent ? (_c = strings === null || strings === void 0 ? void 0 : strings.unmuteMic) === null || _c === void 0 ? void 0 : _c.grantedDueToMeetingOption : (_d = strings === null || strings === void 0 ? void 0 : strings.unmuteMic) === null || _d === void 0 ? void 0 : _d.lostDueToMeetingOption;
+                return notification.isPresent
+                    ? (_c = strings === null || strings === void 0 ? void 0 : strings.unmuteMic) === null || _c === void 0 ? void 0 : _c.grantedDueToMeetingOption
+                    : (_d = strings === null || strings === void 0 ? void 0 : strings.unmuteMic) === null || _d === void 0 ? void 0 : _d.lostDueToMeetingOption;
             }
             break;
         case 'shareScreen':
@@ -42,10 +44,14 @@ const getCapabilityChangedNotificationString = (notification, strings) => {
             }
             break;
         case 'viewAttendeeNames':
-            if (!notification.isPresent && notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' && notification.role === 'Attendee') {
+            if (!notification.isPresent &&
+                notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' &&
+                notification.role === 'Attendee') {
                 return (_g = strings === null || strings === void 0 ? void 0 : strings.hideAttendeeNames) === null || _g === void 0 ? void 0 : _g.hideAttendeeNameAttendee;
             }
-            if (!notification.isPresent && notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' && notification.role === 'Presenter') {
+            if (!notification.isPresent &&
+                notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' &&
+                notification.role === 'Presenter') {
                 return (_h = strings === null || strings === void 0 ? void 0 : strings.hideAttendeeNames) === null || _h === void 0 ? void 0 : _h.hideAttendeeNamePresenter;
             }
     }
@@ -73,17 +79,7 @@ const getCustomMessageBarIconProps = (notification) => {
         default:
             return undefined;
     }
-    return {
-        iconName,
-        styles: {
-            root: {
-                '> *': {
-                    height: '1rem',
-                    width: '1rem'
-                }
-            }
-        }
-    };
+    return { iconName, styles: { root: { '> *': { height: '1rem', width: '1rem' } } } };
 };
 const messageBarStyles = {
     innerText: {

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CapabilitiesChangedNotificationBar.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { IIconProps, IMessageBarProps, MessageBar, MessageBarType, Stack } from '@fluentui/react';\nimport { CapabilitiesChangedReason, ParticipantCapabilityName, ParticipantRole } from '@azure/communication-calling';\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface CapabilitiesChangeNotificationBarProps extends IMessageBarProps {\n  capabilitiesChangedNotifications: CapabalityChangedNotification[];\n  onDismissNotification: (notification: CapabalityChangedNotification) => void;\n}\n\n/**\n * @private\n */\nexport interface CapabalityChangedNotification {\n  /**\n   * Name of capability\n   */\n  capabilityName: ParticipantCapabilityName;\n  /**\n   * Is capability now available\n   */\n  isPresent: boolean;\n\n  /**\n   * Reason capability was changed\n   */\n  changedReason?: CapabilitiesChangedReason;\n\n  /**\n   * Role of participant when capability changed\n   */\n  role?: ParticipantRole;\n  /**\n   * The latest timestamp when this notification was observed.\n   *\n   * When available, this is used to track notifications that have already been seen and dismissed\n   * by the user.\n   */\n  timestamp?: Date;\n}\n\n/**\n * Notification bar for capabilities changed\n * @private\n */\nexport const CapabilitiesChangedNotificationBar = (props: CapabilitiesChangeNotificationBarProps): JSX.Element => {\n  const locale = useLocale();\n  return <Stack data-ui-id=\"capabilities-changed-notification-bar-stack\">\n      {props.capabilitiesChangedNotifications.map(notification => {\n      const message = getCapabilityChangedNotificationString(notification, locale.strings.call.capabilityChangedNotification);\n      if (!message) {\n        return null;\n      }\n      const iconProps = getCustomMessageBarIconProps(notification);\n      return <MessageBar key={notification.capabilityName} styles={messageBarStyles} messageBarType={MessageBarType.warning} dismissIconProps={{\n        iconName: 'ErrorBarClear'\n      }} onDismiss={() => props.onDismissNotification(notification)} messageBarIconProps={iconProps}>\n            {message}\n          </MessageBar>;\n    })}\n    </Stack>;\n};\nconst getCapabilityChangedNotificationString = (notification: CapabalityChangedNotification, strings?: CapabilityChangedNotificationStrings): string | undefined => {\n  switch (notification.capabilityName) {\n    case 'turnVideoOn':\n      if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {\n        return notification.isPresent ? strings?.turnVideoOn?.grantedDueToMeetingOption : strings?.turnVideoOn?.lostDueToMeetingOption;\n      }\n      break;\n    case 'unmuteMic':\n      if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {\n        return notification.isPresent ? strings?.unmuteMic?.grantedDueToMeetingOption : strings?.unmuteMic?.lostDueToMeetingOption;\n      }\n      break;\n    case 'shareScreen':\n      if (notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Presenter') {\n        return strings?.shareScreen?.grantedDueToRoleChangeToPresenter;\n      }\n      if (!notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Attendee') {\n        return strings?.shareScreen?.lostDueToRoleChangeToAttendee;\n      }\n      break;\n    case 'viewAttendeeNames':\n      if (!notification.isPresent && notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' && notification.role === 'Attendee') {\n        return strings?.hideAttendeeNames?.hideAttendeeNameAttendee;\n      }\n      if (!notification.isPresent && notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' && notification.role === 'Presenter') {\n        return strings?.hideAttendeeNames?.hideAttendeeNamePresenter;\n      }\n  }\n  return undefined;\n};\nconst getCustomMessageBarIconProps = (notification: CapabalityChangedNotification): IIconProps | undefined => {\n  let iconName: string | undefined = undefined;\n  switch (notification.capabilityName) {\n    case 'turnVideoOn':\n      if (notification.isPresent) {\n        iconName = 'ControlButtonCameraOn';\n      } else {\n        iconName = 'ControlButtonCameraProhibited';\n      }\n      break;\n    case 'unmuteMic':\n      if (notification.isPresent) {\n        iconName = 'ControlButtonMicOn';\n      } else {\n        iconName = 'ControlButtonMicProhibited';\n      }\n      break;\n    default:\n      return undefined;\n  }\n  return {\n    iconName,\n    styles: {\n      root: {\n        '> *': {\n          height: '1rem',\n          width: '1rem'\n        }\n      }\n    }\n  };\n};\nconst messageBarStyles = {\n  innerText: {\n    alignSelf: 'center'\n  },\n  icon: {\n    height: 0\n  },\n  content: {\n    lineHeight: 'inherit'\n  },\n  dismissal: {\n    height: 0,\n    paddingTop: '0.8rem'\n  }\n};\n\n/**\n * Strings for capability changed notification\n * @public\n */\nexport interface CapabilityChangedNotificationStrings {\n  /**\n   * Strings for 'turnVideoOn' capability\n   */\n  turnVideoOn?: {\n    /**\n     * Notification message shown to the user when capability to turn video on is lost due to a meeting option change\n     */\n    lostDueToMeetingOption?: string;\n    /**\n     * Notification message shown to the user when capability to turn video on is granted due to a meeting option change\n     */\n    grantedDueToMeetingOption?: string;\n  };\n  /**\n   * Strings for 'unmuteMic' capability\n   */\n  unmuteMic?: {\n    /**\n     * Notification message shown to the user when capability to unmute mic is lost due to a meeting option change\n     */\n    lostDueToMeetingOption?: string;\n    /**\n     * Notification message shown to the user when capability to unmute mic is granted due to a meeting option change\n     */\n    grantedDueToMeetingOption?: string;\n  };\n  /**\n   * Strings for 'shareScreen' capability\n   */\n  shareScreen?: {\n    /**\n     * Notification message shown to the user when capability to share screen is lost due to a role change to Attendeee\n     */\n    lostDueToRoleChangeToAttendee?: string;\n    /**\n     * Notification message shown to the user when capability to share screen is granted due to a role change to Presenter\n     */\n    grantedDueToRoleChangeToPresenter?: string;\n  };\n\n  /**\n   * Strings for hidden attendee names capability\n   */\n  hideAttendeeNames?: {\n    /**\n     * Notification message shown to the user when capability to view attendee names is lost due to a meeting option change for Attendee\n     */\n    hideAttendeeNameAttendee?: string;\n    /**\n     * Notification message shown to the user when capability to view attendee names is lost due to a meeting option change for Presenter\n     */\n    hideAttendeeNamePresenter?: string;\n  };\n}"]}
+{"version":3,"file":"CapabilitiesChangedNotificationBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/CapabilitiesChangedNotificationBar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n\nimport { IIconProps, IMessageBarProps, MessageBar, MessageBarType, Stack } from '@fluentui/react';\n\nimport { CapabilitiesChangedReason, ParticipantCapabilityName, ParticipantRole } from '@azure/communication-calling';\n\nimport { useLocale } from '../../localization';\n\n/**\n * @private\n */\nexport interface CapabilitiesChangeNotificationBarProps extends IMessageBarProps {\n  capabilitiesChangedNotifications: CapabalityChangedNotification[];\n  onDismissNotification: (notification: CapabalityChangedNotification) => void;\n}\n\n/**\n * @private\n */\nexport interface CapabalityChangedNotification {\n  /**\n   * Name of capability\n   */\n  capabilityName: ParticipantCapabilityName;\n  /**\n   * Is capability now available\n   */\n  isPresent: boolean;\n\n  /**\n   * Reason capability was changed\n   */\n  changedReason?: CapabilitiesChangedReason;\n\n  /**\n   * Role of participant when capability changed\n   */\n  role?: ParticipantRole;\n  /**\n   * The latest timestamp when this notification was observed.\n   *\n   * When available, this is used to track notifications that have already been seen and dismissed\n   * by the user.\n   */\n  timestamp?: Date;\n}\n\n/**\n * Notification bar for capabilities changed\n * @private\n */\nexport const CapabilitiesChangedNotificationBar = (props: CapabilitiesChangeNotificationBarProps): JSX.Element => {\n  const locale = useLocale();\n\n  return (\n    <Stack data-ui-id=\"capabilities-changed-notification-bar-stack\">\n      {props.capabilitiesChangedNotifications.map((notification) => {\n        const message = getCapabilityChangedNotificationString(\n          notification,\n          locale.strings.call.capabilityChangedNotification\n        );\n        if (!message) {\n          return null;\n        }\n        const iconProps = getCustomMessageBarIconProps(notification);\n        return (\n          <MessageBar\n            key={notification.capabilityName}\n            styles={messageBarStyles}\n            messageBarType={MessageBarType.warning}\n            dismissIconProps={{ iconName: 'ErrorBarClear' }}\n            onDismiss={() => props.onDismissNotification(notification)}\n            messageBarIconProps={iconProps}\n          >\n            {message}\n          </MessageBar>\n        );\n      })}\n    </Stack>\n  );\n};\n\nconst getCapabilityChangedNotificationString = (\n  notification: CapabalityChangedNotification,\n  strings?: CapabilityChangedNotificationStrings\n): string | undefined => {\n  switch (notification.capabilityName) {\n    case 'turnVideoOn':\n      if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {\n        return notification.isPresent\n          ? strings?.turnVideoOn?.grantedDueToMeetingOption\n          : strings?.turnVideoOn?.lostDueToMeetingOption;\n      }\n      break;\n    case 'unmuteMic':\n      if (notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged') {\n        return notification.isPresent\n          ? strings?.unmuteMic?.grantedDueToMeetingOption\n          : strings?.unmuteMic?.lostDueToMeetingOption;\n      }\n      break;\n    case 'shareScreen':\n      if (notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Presenter') {\n        return strings?.shareScreen?.grantedDueToRoleChangeToPresenter;\n      }\n      if (!notification.isPresent && notification.changedReason === 'RoleChanged' && notification.role === 'Attendee') {\n        return strings?.shareScreen?.lostDueToRoleChangeToAttendee;\n      }\n      break;\n    case 'viewAttendeeNames':\n      if (\n        !notification.isPresent &&\n        notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' &&\n        notification.role === 'Attendee'\n      ) {\n        return strings?.hideAttendeeNames?.hideAttendeeNameAttendee;\n      }\n      if (\n        !notification.isPresent &&\n        notification.changedReason === 'MeetingOptionOrOrganizerPolicyChanged' &&\n        notification.role === 'Presenter'\n      ) {\n        return strings?.hideAttendeeNames?.hideAttendeeNamePresenter;\n      }\n  }\n  return undefined;\n};\n\nconst getCustomMessageBarIconProps = (notification: CapabalityChangedNotification): IIconProps | undefined => {\n  let iconName: string | undefined = undefined;\n  switch (notification.capabilityName) {\n    case 'turnVideoOn':\n      if (notification.isPresent) {\n        iconName = 'ControlButtonCameraOn';\n      } else {\n        iconName = 'ControlButtonCameraProhibited';\n      }\n      break;\n    case 'unmuteMic':\n      if (notification.isPresent) {\n        iconName = 'ControlButtonMicOn';\n      } else {\n        iconName = 'ControlButtonMicProhibited';\n      }\n      break;\n    default:\n      return undefined;\n  }\n  return { iconName, styles: { root: { '> *': { height: '1rem', width: '1rem' } } } };\n};\n\nconst messageBarStyles = {\n  innerText: {\n    alignSelf: 'center'\n  },\n  icon: {\n    height: 0\n  },\n  content: {\n    lineHeight: 'inherit'\n  },\n  dismissal: {\n    height: 0,\n    paddingTop: '0.8rem'\n  }\n};\n\n/**\n * Strings for capability changed notification\n * @public\n */\nexport interface CapabilityChangedNotificationStrings {\n  /**\n   * Strings for 'turnVideoOn' capability\n   */\n  turnVideoOn?: {\n    /**\n     * Notification message shown to the user when capability to turn video on is lost due to a meeting option change\n     */\n    lostDueToMeetingOption?: string;\n    /**\n     * Notification message shown to the user when capability to turn video on is granted due to a meeting option change\n     */\n    grantedDueToMeetingOption?: string;\n  };\n  /**\n   * Strings for 'unmuteMic' capability\n   */\n  unmuteMic?: {\n    /**\n     * Notification message shown to the user when capability to unmute mic is lost due to a meeting option change\n     */\n    lostDueToMeetingOption?: string;\n    /**\n     * Notification message shown to the user when capability to unmute mic is granted due to a meeting option change\n     */\n    grantedDueToMeetingOption?: string;\n  };\n  /**\n   * Strings for 'shareScreen' capability\n   */\n  shareScreen?: {\n    /**\n     * Notification message shown to the user when capability to share screen is lost due to a role change to Attendeee\n     */\n    lostDueToRoleChangeToAttendee?: string;\n    /**\n     * Notification message shown to the user when capability to share screen is granted due to a role change to Presenter\n     */\n    grantedDueToRoleChangeToPresenter?: string;\n  };\n\n  /**\n   * Strings for hidden attendee names capability\n   */\n  hideAttendeeNames?: {\n    /**\n     * Notification message shown to the user when capability to view attendee names is lost due to a meeting option change for Attendee\n     */\n    hideAttendeeNameAttendee?: string;\n    /**\n     * Notification message shown to the user when capability to view attendee names is lost due to a meeting option change for Presenter\n     */\n    hideAttendeeNamePresenter?: string;\n  };\n}\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.js

@@ -1,25 +1,27 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/* @conditional-compile-remove(call-readiness) */
 import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
 import { useTheme, _DevicePermissionDropdown } from "../../../../../react-components/src";
+/* @conditional-compile-remove(call-readiness) */
 import { dropDownStyles } from '../styles/LocalDeviceSettings.styles';
+/* @conditional-compile-remove(call-readiness) */
 import { CallCompositeIcon } from '../../common/icons';
 /**
  * @private
  */
 export const ConfigurationPageCameraDropdown = (props) => {
+    /* @conditional-compile-remove(call-readiness) */
     const theme = useTheme();
+    /* @conditional-compile-remove(call-readiness) */
     const devicePermissionDropdownStringsCamera = {
         placeHolderText: 'Enable Camera (optional)',
         actionButtonContent: 'Allow'
     };
-    const cameraBlockedDropdown = React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: {
-            video: true,
-            audio: false
-        }, strings: devicePermissionDropdownStringsCamera, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: {
-                height: '1.25rem',
-                marginRight: '0.625rem'
-            } }), onClick: props.onClickEnableDevicePermission }));
+    /* @conditional-compile-remove(call-readiness) */
+    const cameraBlockedDropdown = (React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: { video: true, audio: false }, strings: devicePermissionDropdownStringsCamera, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonCameraOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission })));
+    /* @conditional-compile-remove(call-readiness) */
     return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;
     return props.cameraGrantedDropdown;
 };

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPageCameraDropdown.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAoC,yBAAyB,EAAkC,4CAAmC;AACnJ,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAYvD;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAA2C,EAAe,EAAE;IAC1G,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,qCAAqC,GAAqC;QAC9E,eAAe,EAAE,0BAA0B;QAC3C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IACF,MAAM,qBAAqB,GAAG,oBAAC,yBAAyB,oBAAK,KAAK,CAAC,aAAa,IAAE,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;YAC1H,KAAK,EAAE,IAAI;YACX,KAAK,EAAE,KAAK;SACb,EAAE,OAAO,EAAE,qCAAqC,EAAE,IAAI,EAAE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,uBAAuB,EAAC,KAAK,EAAE;gBAClH,MAAM,EAAE,SAAS;gBACjB,WAAW,EAAE,UAAU;aACxB,GAAI,EAAE,OAAO,EAAE,KAAK,CAAC,6BAA6B,IAAI,CAAC;IACxD,OAAO,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAC3F,OAAO,KAAK,CAAC,qBAAqB,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\nimport { useTheme, _DevicePermissionDropdownStrings, _DevicePermissionDropdown, _DevicePermissionDropdownProps } from '@internal/react-components';\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface ConfigurationPageCameraDropdownProps {\n  cameraGrantedDropdown: JSX.Element;\n  cameraPermissionGranted: boolean;\n  dropdownProps: Partial<_DevicePermissionDropdownProps>;\n  onClickEnableDevicePermission?: () => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageCameraDropdown = (props: ConfigurationPageCameraDropdownProps): JSX.Element => {\n  const theme = useTheme();\n  const devicePermissionDropdownStringsCamera: _DevicePermissionDropdownStrings = {\n    placeHolderText: 'Enable Camera (optional)',\n    actionButtonContent: 'Allow'\n  };\n  const cameraBlockedDropdown = <_DevicePermissionDropdown {...props.dropdownProps} styles={dropDownStyles(theme)} constrain={{\n    video: true,\n    audio: false\n  }} strings={devicePermissionDropdownStringsCamera} icon={<CallCompositeIcon iconName=\"ControlButtonCameraOn\" style={{\n    height: '1.25rem',\n    marginRight: '0.625rem'\n  }} />} onClick={props.onClickEnableDevicePermission} />;\n  return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;\n  return props.cameraGrantedDropdown;\n};"]}
+{"version":3,"file":"ConfigurationPageCameraDropdown.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationPageCameraDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,iDAAiD;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EACL,QAAQ,EAER,yBAAyB,EAE1B,4CAAmC;AACpC,iDAAiD;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,iDAAiD;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAavD;;GAEG;AACH,MAAM,CAAC,MAAM,+BAA+B,GAAG,CAAC,KAA2C,EAAe,EAAE;IAC1G,iDAAiD;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,iDAAiD;IACjD,MAAM,qCAAqC,GAAqC;QAC9E,eAAe,EAAE,0BAA0B;QAC3C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IACF,iDAAiD;IACjD,MAAM,qBAAqB,GAAG,CAC5B,oBAAC,yBAAyB,oBACpB,KAAK,CAAC,aAAa,IACvB,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,EACxC,OAAO,EAAE,qCAAqC,EAC9C,IAAI,EACF,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,uBAAuB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,GAAI,EAE/G,OAAO,EAAE,KAAK,CAAC,6BAA6B,IAC5C,CACH,CAAC;IAEF,iDAAiD;IACjD,OAAO,KAAK,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAK,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAE3F,OAAO,KAAK,CAAC,qBAAqB,CAAC;AACrC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(call-readiness) */\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n  useTheme,\n  _DevicePermissionDropdownStrings,\n  _DevicePermissionDropdown,\n  _DevicePermissionDropdownProps\n} from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\n/* @conditional-compile-remove(call-readiness) */\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface ConfigurationPageCameraDropdownProps {\n  cameraGrantedDropdown: JSX.Element;\n  cameraPermissionGranted: boolean;\n  /* @conditional-compile-remove(call-readiness) */\n  dropdownProps: Partial<_DevicePermissionDropdownProps>;\n  onClickEnableDevicePermission?: () => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageCameraDropdown = (props: ConfigurationPageCameraDropdownProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const theme = useTheme();\n\n  /* @conditional-compile-remove(call-readiness) */\n  const devicePermissionDropdownStringsCamera: _DevicePermissionDropdownStrings = {\n    placeHolderText: 'Enable Camera (optional)',\n    actionButtonContent: 'Allow'\n  };\n  /* @conditional-compile-remove(call-readiness) */\n  const cameraBlockedDropdown = (\n    <_DevicePermissionDropdown\n      {...props.dropdownProps}\n      styles={dropDownStyles(theme)}\n      constrain={{ video: true, audio: false }}\n      strings={devicePermissionDropdownStringsCamera}\n      icon={\n        <CallCompositeIcon iconName=\"ControlButtonCameraOn\" style={{ height: '1.25rem', marginRight: '0.625rem' }} />\n      }\n      onClick={props.onClickEnableDevicePermission}\n    />\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  return props.cameraPermissionGranted ? props.cameraGrantedDropdown : cameraBlockedDropdown;\n\n  return props.cameraGrantedDropdown;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.js

@@ -6,14 +6,24 @@ import { _TroubleshootingGuideErrorBar, ErrorBar } from "../../../../../react-co
  * @private
  */
 export const ConfigurationPageErrorBar = (props) => {
-    const { errorBarProps, showTroubleShootingErrorBar = false, onPermissionsTroubleshootingClick, onNetworkingTroubleShootingClick, permissionsState } = props;
+    const { errorBarProps, 
+    /* @conditional-compile-remove(call-readiness) */
+    showTroubleShootingErrorBar = false, 
+    /* @conditional-compile-remove(call-readiness) */
+    onPermissionsTroubleshootingClick, 
+    /* @conditional-compile-remove(call-readiness) */
+    onNetworkingTroubleShootingClick, 
+    /* @conditional-compile-remove(call-readiness) */
+    permissionsState } = props;
+    /* @conditional-compile-remove(call-readiness) */
     const permissionTroubleshootingGuideStrings = {
         devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',
         networkTroubleshootingLinkText: 'Troubleshooting Network Connection',
         dismissButtonText: 'OK'
     };
+    /* @conditional-compile-remove(call-readiness) */
     if (showTroubleShootingErrorBar) {
-        return React.createElement(_TroubleshootingGuideErrorBar, Object.assign({ troubleshootingGuideStrings: permissionTroubleshootingGuideStrings, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick: onNetworkingTroubleShootingClick, permissionsState: permissionsState }, errorBarProps, { onDismissError: props.onDismissError }));
+        return (React.createElement(_TroubleshootingGuideErrorBar, Object.assign({ troubleshootingGuideStrings: permissionTroubleshootingGuideStrings, onPermissionsTroubleshootingClick: onPermissionsTroubleshootingClick, onNetworkingTroubleshootingClick: onNetworkingTroubleShootingClick, permissionsState: permissionsState }, errorBarProps, { onDismissError: props.onDismissError })));
     }
     return React.createElement(ErrorBar, Object.assign({}, errorBarProps, { onDismissError: props.onDismissError }));
 };

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPageErrorBar.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAwK,6BAA6B,EAAE,QAAQ,EAAE,4CAAmC;AAwB3P;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,aAAa,EACb,2BAA2B,GAAG,KAAK,EACnC,iCAAiC,EACjC,gCAAgC,EAChC,gBAAgB,EACjB,GAAG,KAAK,CAAC;IACV,MAAM,qCAAqC,GAAyC;QAClF,wBAAwB,EAAE,mDAAmD;QAC7E,8BAA8B,EAAE,oCAAoC;QACpE,iBAAiB,EAAE,IAAI;KACxB,CAAC;IACF,IAAI,2BAA2B,EAAE,CAAC;QAChC,OAAO,oBAAC,6BAA6B,kBAAC,2BAA2B,EAAE,qCAAqC,EAAE,iCAAiC,EAAE,iCAAiC,EAAE,gCAAgC,EAAE,gCAAgC,EAAE,gBAAgB,EAAE,gBAAgB,IAAM,aAAa,IAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAAC;IACtV,CAAC;IACD,OAAO,oBAAC,QAAQ,oBAAK,aAAa,IAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAAC;AAC/E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { _DevicePermissionDropdownStrings, _DevicePermissionDropdown, _DevicePermissionDropdownProps, ActiveErrorMessage, ErrorBarProps, _TroubleshootingGuideErrorBarStrings, _TroubleshootingGuideErrorBar, ErrorBar } from '@internal/react-components';\nimport { CallingHandlers } from '@internal/calling-component-bindings';\nimport { Common } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport interface ConfigurationPageErrorBarProps {\n  errorBarProps: {\n    activeErrorMessages: ActiveErrorMessage[];\n  } & Common<CallingHandlers, ErrorBarProps>;\n  showTroubleShootingErrorBar?: boolean;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  onNetworkingTroubleShootingClick?: () => void;\n  permissionsState?: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  onDismissError: (error: ActiveErrorMessage) => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageErrorBar = (props: ConfigurationPageErrorBarProps): JSX.Element => {\n  const {\n    errorBarProps,\n    showTroubleShootingErrorBar = false,\n    onPermissionsTroubleshootingClick,\n    onNetworkingTroubleShootingClick,\n    permissionsState\n  } = props;\n  const permissionTroubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings = {\n    devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',\n    networkTroubleshootingLinkText: 'Troubleshooting Network Connection',\n    dismissButtonText: 'OK'\n  };\n  if (showTroubleShootingErrorBar) {\n    return <_TroubleshootingGuideErrorBar troubleshootingGuideStrings={permissionTroubleshootingGuideStrings} onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick} onNetworkingTroubleshootingClick={onNetworkingTroubleShootingClick} permissionsState={permissionsState} {...errorBarProps} onDismissError={props.onDismissError} />;\n  }\n  return <ErrorBar {...errorBarProps} onDismissError={props.onDismissError} />;\n};"]}
+{"version":3,"file":"ConfigurationPageErrorBar.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationPageErrorBar.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAOL,6BAA6B,EAC7B,QAAQ,EACT,4CAAmC;AAwBpC;;GAEG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,KAAqC,EAAe,EAAE;IAC9F,MAAM,EACJ,aAAa;IACb,iDAAiD;IACjD,2BAA2B,GAAG,KAAK;IACnC,iDAAiD;IACjD,iCAAiC;IACjC,iDAAiD;IACjD,gCAAgC;IAChC,iDAAiD;IACjD,gBAAgB,EACjB,GAAG,KAAK,CAAC;IAEV,iDAAiD;IACjD,MAAM,qCAAqC,GAAyC;QAClF,wBAAwB,EAAE,mDAAmD;QAC7E,8BAA8B,EAAE,oCAAoC;QACpE,iBAAiB,EAAE,IAAI;KACxB,CAAC;IAEF,iDAAiD;IACjD,IAAI,2BAA2B,EAAE,CAAC;QAChC,OAAO,CACL,oBAAC,6BAA6B,kBAC5B,2BAA2B,EAAE,qCAAqC,EAClE,iCAAiC,EAAE,iCAAiC,EACpE,gCAAgC,EAAE,gCAAgC,EAClE,gBAAgB,EAAE,gBAAgB,IAC9B,aAAa,IACjB,cAAc,EAAE,KAAK,CAAC,cAAc,IACpC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,oBAAC,QAAQ,oBAAK,aAAa,IAAE,cAAc,EAAE,KAAK,CAAC,cAAc,IAAI,CAAC;AAC/E,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport {\n  _DevicePermissionDropdownStrings,\n  _DevicePermissionDropdown,\n  _DevicePermissionDropdownProps,\n  ActiveErrorMessage,\n  ErrorBarProps,\n  _TroubleshootingGuideErrorBarStrings,\n  _TroubleshootingGuideErrorBar,\n  ErrorBar\n} from '@internal/react-components';\nimport { CallingHandlers } from '@internal/calling-component-bindings';\nimport { Common } from '@internal/acs-ui-common';\n\n/**\n * @private\n */\nexport interface ConfigurationPageErrorBarProps {\n  errorBarProps: {\n    activeErrorMessages: ActiveErrorMessage[];\n  } & Common<CallingHandlers, ErrorBarProps>;\n  showTroubleShootingErrorBar?: boolean;\n  onPermissionsTroubleshootingClick?: (permissionsState: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  }) => void;\n  onNetworkingTroubleShootingClick?: () => void;\n  permissionsState?: {\n    camera: PermissionState;\n    microphone: PermissionState;\n  };\n  onDismissError: (error: ActiveErrorMessage) => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageErrorBar = (props: ConfigurationPageErrorBarProps): JSX.Element => {\n  const {\n    errorBarProps,\n    /* @conditional-compile-remove(call-readiness) */\n    showTroubleShootingErrorBar = false,\n    /* @conditional-compile-remove(call-readiness) */\n    onPermissionsTroubleshootingClick,\n    /* @conditional-compile-remove(call-readiness) */\n    onNetworkingTroubleShootingClick,\n    /* @conditional-compile-remove(call-readiness) */\n    permissionsState\n  } = props;\n\n  /* @conditional-compile-remove(call-readiness) */\n  const permissionTroubleshootingGuideStrings: _TroubleshootingGuideErrorBarStrings = {\n    devicePermissionLinkText: 'Troubleshooting Camera and Microphone Permissions',\n    networkTroubleshootingLinkText: 'Troubleshooting Network Connection',\n    dismissButtonText: 'OK'\n  };\n\n  /* @conditional-compile-remove(call-readiness) */\n  if (showTroubleShootingErrorBar) {\n    return (\n      <_TroubleshootingGuideErrorBar\n        troubleshootingGuideStrings={permissionTroubleshootingGuideStrings}\n        onPermissionsTroubleshootingClick={onPermissionsTroubleshootingClick}\n        onNetworkingTroubleshootingClick={onNetworkingTroubleShootingClick}\n        permissionsState={permissionsState}\n        {...errorBarProps}\n        onDismissError={props.onDismissError}\n      />\n    );\n  }\n\n  return <ErrorBar {...errorBarProps} onDismissError={props.onDismissError} />;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.js

@@ -1,25 +1,27 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
+/* @conditional-compile-remove(call-readiness) */
 import React from 'react';
+/* @conditional-compile-remove(call-readiness) */
 import { useTheme, _DevicePermissionDropdown } from "../../../../../react-components/src";
+/* @conditional-compile-remove(call-readiness) */
 import { dropDownStyles } from '../styles/LocalDeviceSettings.styles';
+/* @conditional-compile-remove(call-readiness) */
 import { CallCompositeIcon } from '../../common/icons';
 /**
  * @private
  */
 export const ConfigurationPageMicDropdown = (props) => {
+    /* @conditional-compile-remove(call-readiness) */
     const theme = useTheme();
+    /* @conditional-compile-remove(call-readiness) */
     const devicePermissionDropdownStringsMicrophone = {
         placeHolderText: 'Enable Microphone (required)',
         actionButtonContent: 'Allow'
     };
-    const microphoneBlockedDropdown = React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: {
-            video: false,
-            audio: true
-        }, strings: devicePermissionDropdownStringsMicrophone, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonMicOn", style: {
-                height: '1.25rem',
-                marginRight: '0.625rem'
-            } }), onClick: props.onClickEnableDevicePermission }));
+    /* @conditional-compile-remove(call-readiness) */
+    const microphoneBlockedDropdown = (React.createElement(_DevicePermissionDropdown, Object.assign({}, props.dropdownProps, { styles: dropDownStyles(theme), constrain: { video: false, audio: true }, strings: devicePermissionDropdownStringsMicrophone, icon: React.createElement(CallCompositeIcon, { iconName: "ControlButtonMicOn", style: { height: '1.25rem', marginRight: '0.625rem' } }), onClick: props.onClickEnableDevicePermission })));
+    /* @conditional-compile-remove(call-readiness) */
     return props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown;
     return props.micGrantedDropdown;
 };

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurationPageMicDropdown.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,EAAoC,yBAAyB,EAAkC,4CAAmC;AACnJ,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAYvD;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAe,EAAE;IACpG,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,MAAM,yCAAyC,GAAqC;QAClF,eAAe,EAAE,8BAA8B;QAC/C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IACF,MAAM,yBAAyB,GAAG,oBAAC,yBAAyB,oBAAK,KAAK,CAAC,aAAa,IAAE,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE;YAC9H,KAAK,EAAE,KAAK;YACZ,KAAK,EAAE,IAAI;SACZ,EAAE,OAAO,EAAE,yCAAyC,EAAE,IAAI,EAAE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,oBAAoB,EAAC,KAAK,EAAE;gBACnH,MAAM,EAAE,SAAS;gBACjB,WAAW,EAAE,UAAU;aACxB,GAAI,EAAE,OAAO,EAAE,KAAK,CAAC,6BAA6B,IAAI,CAAC;IACxD,OAAO,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,yBAAyB,CAAC;IACzF,OAAO,KAAK,CAAC,kBAAkB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\nimport React from 'react';\nimport { useTheme, _DevicePermissionDropdownStrings, _DevicePermissionDropdown, _DevicePermissionDropdownProps } from '@internal/react-components';\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface ConfigurationPageMicDropdownProps {\n  micGrantedDropdown: JSX.Element;\n  micPermissionGranted: boolean;\n  dropdownProps: Partial<_DevicePermissionDropdownProps>;\n  onClickEnableDevicePermission?: () => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageMicDropdown = (props: ConfigurationPageMicDropdownProps): JSX.Element => {\n  const theme = useTheme();\n  const devicePermissionDropdownStringsMicrophone: _DevicePermissionDropdownStrings = {\n    placeHolderText: 'Enable Microphone (required)',\n    actionButtonContent: 'Allow'\n  };\n  const microphoneBlockedDropdown = <_DevicePermissionDropdown {...props.dropdownProps} styles={dropDownStyles(theme)} constrain={{\n    video: false,\n    audio: true\n  }} strings={devicePermissionDropdownStringsMicrophone} icon={<CallCompositeIcon iconName=\"ControlButtonMicOn\" style={{\n    height: '1.25rem',\n    marginRight: '0.625rem'\n  }} />} onClick={props.onClickEnableDevicePermission} />;\n  return props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown;\n  return props.micGrantedDropdown;\n};"]}
+{"version":3,"file":"ConfigurationPageMicDropdown.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ConfigurationPageMicDropdown.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,iDAAiD;AACjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,iDAAiD;AACjD,OAAO,EACL,QAAQ,EAER,yBAAyB,EAE1B,4CAAmC;AACpC,iDAAiD;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AACtE,iDAAiD;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAavD;;GAEG;AACH,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,KAAwC,EAAe,EAAE;IACpG,iDAAiD;IACjD,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IACzB,iDAAiD;IACjD,MAAM,yCAAyC,GAAqC;QAClF,eAAe,EAAE,8BAA8B;QAC/C,mBAAmB,EAAE,OAAO;KAC7B,CAAC;IAEF,iDAAiD;IACjD,MAAM,yBAAyB,GAAG,CAChC,oBAAC,yBAAyB,oBACpB,KAAK,CAAC,aAAa,IACvB,MAAM,EAAE,cAAc,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EACxC,OAAO,EAAE,yCAAyC,EAClD,IAAI,EAAE,oBAAC,iBAAiB,IAAC,QAAQ,EAAC,oBAAoB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,UAAU,EAAE,GAAI,EAChH,OAAO,EAAE,KAAK,CAAC,6BAA6B,IAC5C,CACH,CAAC;IAEF,iDAAiD;IACjD,OAAO,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,yBAAyB,CAAC;IAEzF,OAAO,KAAK,CAAC,kBAAkB,CAAC;AAClC,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\n/* @conditional-compile-remove(call-readiness) */\nimport React from 'react';\n/* @conditional-compile-remove(call-readiness) */\nimport {\n  useTheme,\n  _DevicePermissionDropdownStrings,\n  _DevicePermissionDropdown,\n  _DevicePermissionDropdownProps\n} from '@internal/react-components';\n/* @conditional-compile-remove(call-readiness) */\nimport { dropDownStyles } from '../styles/LocalDeviceSettings.styles';\n/* @conditional-compile-remove(call-readiness) */\nimport { CallCompositeIcon } from '../../common/icons';\n\n/**\n * @private\n */\nexport interface ConfigurationPageMicDropdownProps {\n  micGrantedDropdown: JSX.Element;\n  micPermissionGranted: boolean;\n  /* @conditional-compile-remove(call-readiness) */\n  dropdownProps: Partial<_DevicePermissionDropdownProps>;\n  onClickEnableDevicePermission?: () => void;\n}\n\n/**\n * @private\n */\nexport const ConfigurationPageMicDropdown = (props: ConfigurationPageMicDropdownProps): JSX.Element => {\n  /* @conditional-compile-remove(call-readiness) */\n  const theme = useTheme();\n  /* @conditional-compile-remove(call-readiness) */\n  const devicePermissionDropdownStringsMicrophone: _DevicePermissionDropdownStrings = {\n    placeHolderText: 'Enable Microphone (required)',\n    actionButtonContent: 'Allow'\n  };\n\n  /* @conditional-compile-remove(call-readiness) */\n  const microphoneBlockedDropdown = (\n    <_DevicePermissionDropdown\n      {...props.dropdownProps}\n      styles={dropDownStyles(theme)}\n      constrain={{ video: false, audio: true }}\n      strings={devicePermissionDropdownStringsMicrophone}\n      icon={<CallCompositeIcon iconName=\"ControlButtonMicOn\" style={{ height: '1.25rem', marginRight: '0.625rem' }} />}\n      onClick={props.onClickEnableDevicePermission}\n    />\n  );\n\n  /* @conditional-compile-remove(call-readiness) */\n  return props.micPermissionGranted ? props.micGrantedDropdown : microphoneBlockedDropdown;\n\n  return props.micGrantedDropdown;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ExpandedLocalVideoTile.js

@@ -20,12 +20,13 @@ export const ExpandedLocalVideoTile = (props) => {
     const palette = useTheme().palette;
     useEffect(() => {
         if (videoStream && isVideoReady) {
-            props.onCreateLocalStreamView && props.onCreateLocalStreamView(localVideoViewOptions).catch(err => console.log('Can not render video', err));
+            props.onCreateLocalStreamView &&
+                props.onCreateLocalStreamView(localVideoViewOptions).catch((err) => console.log('Can not render video', err));
         }
     }, [isVideoReady, videoStream, props, renderElement]);
-    return React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", styles: containerStyles, grow: true },
-        React.createElement(VideoTile, { styles: videoTileStyles, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement }) : undefined, onRenderPlaceholder: onRenderEmptyPlaceholder }, props.overlayContent && React.createElement(React.Fragment, null,
+    return (React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", styles: containerStyles, grow: true },
+        React.createElement(VideoTile, { styles: videoTileStyles, renderElement: renderElement ? React.createElement(StreamMedia, { videoStreamElement: renderElement }) : undefined, onRenderPlaceholder: onRenderEmptyPlaceholder }, props.overlayContent && (React.createElement(React.Fragment, null,
             React.createElement(Stack, { className: mergeStyles(overlayBackgroundStyles(palette, isVideoReady)) }),
-            React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContentStyles) }, props.overlayContent))));
+            React.createElement(Stack, { horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContentStyles) }, props.overlayContent))))));
 };
 //# sourceMappingURL=ExpandedLocalVideoTile.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/ExpandedLocalVideoTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandedLocalVideoTile.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/ExpandedLocalVideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAsB,SAAS,EAAE,QAAQ,EAAmD,4CAAmC;AACnJ,OAAO,EAAE,eAAe,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAC1I,MAAM,wBAAwB,GAAG,GAAgB,EAAE,CAAC,yCAAK,CAAC;AAC1D,MAAM,qBAAqB,GAAG;IAC5B,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACK,CAAC;AAWxB;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;;IACxF,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IACvD,MAAM,aAAa,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC;IACjD,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,IAAI,YAAY,EAAE,CAAC;YAChC,KAAK,CAAC,uBAAuB,IAAI,KAAK,CAAC,uBAAuB,CAAC,qBAAqB,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC,CAAC;QAC/I,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IACtD,OAAO,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,EAAE,IAAI;QACvF,oBAAC,SAAS,IAAC,MAAM,EAAE,eAAe,EAAE,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,GAAI,CAAC,CAAC,CAAC,SAAS,EAAE,mBAAmB,EAAE,wBAAwB,IAC7K,KAAK,CAAC,cAAc,IAAI;YACrB,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,uBAAuB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,GAAI;YACjF,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC,IAChG,KAAK,CAAC,cAAc,CACf,CACP,CACK,CACN,CAAC;AACb,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect } from 'react';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport { StreamMedia, VideoGalleryStream, VideoTile, useTheme, VideoStreamOptions, CreateVideoStreamViewResult } from '@internal/react-components';\nimport { containerStyles, overlayBackgroundStyles, overlayContentStyles, videoTileStyles } from '../styles/ExpandedLocalVideoTile.styles';\nconst onRenderEmptyPlaceholder = (): JSX.Element => <></>;\nconst localVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * @private\n */\nexport interface ExpandedLocalVideoTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  overlayContent?: JSX.Element;\n}\n\n/**\n * @private\n */\nexport const ExpandedLocalVideoTile = (props: ExpandedLocalVideoTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n  const renderElement = videoStream?.renderElement;\n  const palette = useTheme().palette;\n  useEffect(() => {\n    if (videoStream && isVideoReady) {\n      props.onCreateLocalStreamView && props.onCreateLocalStreamView(localVideoViewOptions).catch(err => console.log('Can not render video', err));\n    }\n  }, [isVideoReady, videoStream, props, renderElement]);\n  return <Stack horizontalAlign=\"center\" verticalAlign=\"center\" styles={containerStyles} grow>\n      <VideoTile styles={videoTileStyles} renderElement={renderElement ? <StreamMedia videoStreamElement={renderElement} /> : undefined} onRenderPlaceholder={onRenderEmptyPlaceholder}>\n        {props.overlayContent && <>\n            <Stack className={mergeStyles(overlayBackgroundStyles(palette, isVideoReady))} />\n            <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={mergeStyles(overlayContentStyles)}>\n              {props.overlayContent}\n            </Stack>\n          </>}\n      </VideoTile>\n    </Stack>;\n};"]}
+{"version":3,"file":"ExpandedLocalVideoTile.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/ExpandedLocalVideoTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EACL,WAAW,EAEX,SAAS,EACT,QAAQ,EAGT,4CAAmC;AACpC,OAAO,EACL,eAAe,EACf,uBAAuB,EACvB,oBAAoB,EACpB,eAAe,EAChB,MAAM,yCAAyC,CAAC;AAEjD,MAAM,wBAAwB,GAAG,GAAgB,EAAE,CAAC,yCAAK,CAAC;AAE1D,MAAM,qBAAqB,GAAG;IAC5B,WAAW,EAAE,MAAM;IACnB,UAAU,EAAE,IAAI;CACK,CAAC;AAWxB;;GAEG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAAkC,EAAe,EAAE;;IACxF,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IACvD,MAAM,aAAa,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,aAAa,CAAC;IACjD,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IAEnC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,WAAW,IAAI,YAAY,EAAE,CAAC;YAChC,KAAK,CAAC,uBAAuB;gBAC3B,KAAK,CAAC,uBAAuB,CAAC,qBAAqB,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,sBAAsB,EAAE,GAAG,CAAC,CAAC,CAAC;QAClH,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;IACtD,OAAO,CACL,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,MAAM,EAAE,eAAe,EAAE,IAAI;QAClF,oBAAC,SAAS,IACR,MAAM,EAAE,eAAe,EACvB,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,oBAAC,WAAW,IAAC,kBAAkB,EAAE,aAAa,GAAI,CAAC,CAAC,CAAC,SAAS,EAC7F,mBAAmB,EAAE,wBAAwB,IAE5C,KAAK,CAAC,cAAc,IAAI,CACvB;YACE,oBAAC,KAAK,IAAC,SAAS,EAAE,WAAW,CAAC,uBAAuB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,GAAI;YACjF,oBAAC,KAAK,IAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,oBAAoB,CAAC,IAChG,KAAK,CAAC,cAAc,CACf,CACP,CACJ,CACS,CACN,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useEffect } from 'react';\nimport { mergeStyles, Stack } from '@fluentui/react';\nimport {\n  StreamMedia,\n  VideoGalleryStream,\n  VideoTile,\n  useTheme,\n  VideoStreamOptions,\n  CreateVideoStreamViewResult\n} from '@internal/react-components';\nimport {\n  containerStyles,\n  overlayBackgroundStyles,\n  overlayContentStyles,\n  videoTileStyles\n} from '../styles/ExpandedLocalVideoTile.styles';\n\nconst onRenderEmptyPlaceholder = (): JSX.Element => <></>;\n\nconst localVideoViewOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n} as VideoStreamOptions;\n\n/**\n * @private\n */\nexport interface ExpandedLocalVideoTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  overlayContent?: JSX.Element;\n}\n\n/**\n * @private\n */\nexport const ExpandedLocalVideoTile = (props: ExpandedLocalVideoTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n  const renderElement = videoStream?.renderElement;\n  const palette = useTheme().palette;\n\n  useEffect(() => {\n    if (videoStream && isVideoReady) {\n      props.onCreateLocalStreamView &&\n        props.onCreateLocalStreamView(localVideoViewOptions).catch((err) => console.log('Can not render video', err));\n    }\n  }, [isVideoReady, videoStream, props, renderElement]);\n  return (\n    <Stack horizontalAlign=\"center\" verticalAlign=\"center\" styles={containerStyles} grow>\n      <VideoTile\n        styles={videoTileStyles}\n        renderElement={renderElement ? <StreamMedia videoStreamElement={renderElement} /> : undefined}\n        onRenderPlaceholder={onRenderEmptyPlaceholder}\n      >\n        {props.overlayContent && (\n          <>\n            <Stack className={mergeStyles(overlayBackgroundStyles(palette, isVideoReady))} />\n            <Stack horizontalAlign=\"center\" verticalAlign=\"center\" className={mergeStyles(overlayContentStyles)}>\n              {props.overlayContent}\n            </Stack>\n          </>\n        )}\n      </VideoTile>\n    </Stack>\n  );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/HoldPane.js

@@ -43,7 +43,7 @@ export const HoldPane = () => {
             clearInterval(interval);
         };
     }, [startTime]);
-    return React.createElement(Stack, { styles: paneStyles },
+    return (React.createElement(Stack, { styles: paneStyles },
         React.createElement(Stack, { horizontal: true, styles: holdPaneContentStyles },
             React.createElement(Text, { styles: holdPaneTimerStyles }, elapsedTime),
             React.createElement(Text, { styles: holdPaneLabelStyles, role: "status", "aria-live": "assertive" }, strings.holdScreenLabel),
@@ -56,7 +56,7 @@ export const HoldPane = () => {
                         setResumingCall(false);
                         throw e;
                     }
-                }), "data-ui-id": "hold-page-resume-call-button", autoFocus: true })));
+                }), "data-ui-id": "hold-page-resume-call-button", autoFocus: true }))));
 };
 const getMinutes = (time) => {
     return Math.floor(getSeconds(time) / 60);
@@ -72,8 +72,8 @@ const getHours = (time) => {
  */
 export const getReadableTime = (time) => {
     const hours = getHours(time);
-    const readableMinutes = ('0' + getMinutes(time) % 60).slice(-2);
-    const readableSeconds = ('0' + getSeconds(time) % 60).slice(-2);
+    const readableMinutes = ('0' + (getMinutes(time) % 60)).slice(-2);
+    const readableSeconds = ('0' + (getSeconds(time) % 60)).slice(-2);
     return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;
 };
 //# sourceMappingURL=HoldPane.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/HoldPane.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoldPane.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/HoldPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { PrimaryButton, Stack, Text } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React, { useRef, useState } from 'react';\nimport { useLocale } from '../../localization';\nimport { HoldButton } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport { holdPaneContentStyles, holdPaneLabelStyles, holdPaneTimerStyles, paneStyles, resumeButtonStyles } from '../styles/HoldPane.styles';\ninterface HoldPaneStrings {\n  holdScreenLabel: string;\n  resumeCallButtonLabel: string;\n  resumeCallButtonAriaLabel: string;\n  resumingCallButtonLabel: string;\n  resumingCallButtonAriaLabel: string;\n}\n\n/**\n * Hold pane to display when the user places themselves on hold\n *\n * @beta\n */\nexport const HoldPane = (): JSX.Element => {\n  const holdButtonProps = usePropsFor(HoldButton);\n  const locale = useLocale();\n  const strings: HoldPaneStrings = {\n    holdScreenLabel: locale.strings.call.holdScreenLabel ?? '',\n    resumeCallButtonLabel: locale.strings.call.resumeCallButtonLabel ?? '',\n    resumeCallButtonAriaLabel: locale.strings.call.resumeCallButtonAriaLabel ?? '',\n    resumingCallButtonLabel: locale.strings.call.resumingCallButtonLabel ?? '',\n    resumingCallButtonAriaLabel: locale.strings.call.resumingCallButtonAriaLabel ?? ''\n  };\n  const [time, setTime] = useState<number>(0);\n  const elapsedTime = getReadableTime(time);\n  const startTime = useRef(performance.now());\n  const [resumingCall, setResumingCall] = useState<boolean>(false);\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setTime(performance.now() - startTime.current);\n    }, 10);\n    return () => {\n      clearInterval(interval);\n    };\n  }, [startTime]);\n  return <Stack styles={paneStyles}>\n      <Stack horizontal styles={holdPaneContentStyles}>\n        <Text styles={holdPaneTimerStyles}>{elapsedTime}</Text>\n        <Text styles={holdPaneLabelStyles} role=\"status\" aria-live=\"assertive\">\n          {strings.holdScreenLabel}\n        </Text>\n        <PrimaryButton text={!resumingCall ? strings.resumeCallButtonLabel : strings.resumingCallButtonLabel} ariaLabel={!resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel} styles={resumeButtonStyles} disabled={resumingCall} onClick={async () => {\n        setResumingCall(true);\n        try {\n          await holdButtonProps.onToggleHold();\n        } catch (e) {\n          setResumingCall(false);\n          throw e;\n        }\n      }} data-ui-id=\"hold-page-resume-call-button\" autoFocus></PrimaryButton>\n      </Stack>\n    </Stack>;\n};\nconst getMinutes = (time: number): number => {\n  return Math.floor(getSeconds(time) / 60);\n};\nconst getSeconds = (time: number): number => {\n  return Math.floor(time / 1000);\n};\nconst getHours = (time: number): number => {\n  return Math.floor(getMinutes(time) / 60);\n};\n\n/**\n * @internal\n */\nexport const getReadableTime = (time: number): string => {\n  const hours = getHours(time);\n  const readableMinutes = ('0' + getMinutes(time) % 60).slice(-2);\n  const readableSeconds = ('0' + getSeconds(time) % 60).slice(-2);\n  return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;\n};"]}
+{"version":3,"file":"HoldPane.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/HoldPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport { PrimaryButton, Stack, Text } from '@fluentui/react';\nimport { _pxToRem } from '@internal/acs-ui-common';\nimport React, { useRef, useState } from 'react';\nimport { useLocale } from '../../localization';\nimport { HoldButton } from '@internal/react-components';\nimport { usePropsFor } from '../hooks/usePropsFor';\nimport {\n  holdPaneContentStyles,\n  holdPaneLabelStyles,\n  holdPaneTimerStyles,\n  paneStyles,\n  resumeButtonStyles\n} from '../styles/HoldPane.styles';\n\ninterface HoldPaneStrings {\n  holdScreenLabel: string;\n  resumeCallButtonLabel: string;\n  resumeCallButtonAriaLabel: string;\n  resumingCallButtonLabel: string;\n  resumingCallButtonAriaLabel: string;\n}\n\n/**\n * Hold pane to display when the user places themselves on hold\n *\n * @beta\n */\nexport const HoldPane = (): JSX.Element => {\n  const holdButtonProps = usePropsFor(HoldButton);\n  const locale = useLocale();\n\n  const strings: HoldPaneStrings = {\n    holdScreenLabel: locale.strings.call.holdScreenLabel ?? '',\n    resumeCallButtonLabel: locale.strings.call.resumeCallButtonLabel ?? '',\n    resumeCallButtonAriaLabel: locale.strings.call.resumeCallButtonAriaLabel ?? '',\n    resumingCallButtonLabel: locale.strings.call.resumingCallButtonLabel ?? '',\n    resumingCallButtonAriaLabel: locale.strings.call.resumingCallButtonAriaLabel ?? ''\n  };\n\n  const [time, setTime] = useState<number>(0);\n\n  const elapsedTime = getReadableTime(time);\n\n  const startTime = useRef(performance.now());\n  const [resumingCall, setResumingCall] = useState<boolean>(false);\n\n  React.useEffect(() => {\n    const interval = setInterval(() => {\n      setTime(performance.now() - startTime.current);\n    }, 10);\n    return () => {\n      clearInterval(interval);\n    };\n  }, [startTime]);\n\n  return (\n    <Stack styles={paneStyles}>\n      <Stack horizontal styles={holdPaneContentStyles}>\n        <Text styles={holdPaneTimerStyles}>{elapsedTime}</Text>\n        <Text styles={holdPaneLabelStyles} role=\"status\" aria-live=\"assertive\">\n          {strings.holdScreenLabel}\n        </Text>\n        <PrimaryButton\n          text={!resumingCall ? strings.resumeCallButtonLabel : strings.resumingCallButtonLabel}\n          ariaLabel={!resumingCall ? strings.resumeCallButtonAriaLabel : strings.resumingCallButtonAriaLabel}\n          styles={resumeButtonStyles}\n          disabled={resumingCall}\n          onClick={async () => {\n            setResumingCall(true);\n            try {\n              await holdButtonProps.onToggleHold();\n            } catch (e) {\n              setResumingCall(false);\n              throw e;\n            }\n          }}\n          data-ui-id=\"hold-page-resume-call-button\"\n          autoFocus\n        ></PrimaryButton>\n      </Stack>\n    </Stack>\n  );\n};\n\nconst getMinutes = (time: number): number => {\n  return Math.floor(getSeconds(time) / 60);\n};\n\nconst getSeconds = (time: number): number => {\n  return Math.floor(time / 1000);\n};\n\nconst getHours = (time: number): number => {\n  return Math.floor(getMinutes(time) / 60);\n};\n\n/**\n * @internal\n */\nexport const getReadableTime = (time: number): string => {\n  const hours = getHours(time);\n  const readableMinutes = ('0' + (getMinutes(time) % 60)).slice(-2);\n  const readableSeconds = ('0' + (getSeconds(time) % 60)).slice(-2);\n  return `${hours > 0 ? hours + ':' : ''}${readableMinutes}:${readableSeconds}`;\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LobbyTile.js

@@ -19,11 +19,11 @@ export const LobbyTile = (props) => {
     const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);
     const palette = useTheme().palette;
     const handlers = useHandlers(ExpandedLocalVideoTile);
-    return React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: props.overlayProps ? React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContainerStyle), "aria-atomic": true },
-            props.showLocalVideoCameraCycleButton && isVideoReady && React.createElement(Stack.Item, { styles: localCameraSwitcherContainerStyles },
-                React.createElement(LocalVideoCameraCycleButton, Object.assign({}, cameraSwitcherCallback, cameraSwitcherCameras, { size: 'large' }))),
+    return (React.createElement(ExpandedLocalVideoTile, Object.assign({ localParticipantVideoStream: props.localParticipantVideoStream, overlayContent: props.overlayProps ? (React.createElement(Stack, { verticalFill: true, horizontalAlign: "center", verticalAlign: "center", className: mergeStyles(overlayContainerStyle), "aria-atomic": true },
+            props.showLocalVideoCameraCycleButton && isVideoReady && (React.createElement(Stack.Item, { styles: localCameraSwitcherContainerStyles },
+                React.createElement(LocalVideoCameraCycleButton, Object.assign({}, cameraSwitcherCallback, cameraSwitcherCameras, { size: 'large' })))),
             React.createElement(Stack.Item, { className: mergeStyles(titleStyle(palette, isVideoReady)) }, props.overlayProps.overlayIcon),
             React.createElement(Text, { className: mergeStyles(titleStyle(palette, isVideoReady)), "aria-live": "assertive", "data-ui-id": "lobbyScreenTitle" }, props.overlayProps.title),
-            props.overlayProps.moreDetails && React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": "assertive" }, props.overlayProps.moreDetails)) : undefined }, handlers));
+            props.overlayProps.moreDetails && (React.createElement(Text, { className: mergeStyles(moreDetailsStyle(palette, isVideoReady)), "aria-live": "assertive" }, props.overlayProps.moreDetails)))) : undefined }, handlers)));
 };
 //# sourceMappingURL=LobbyTile.js.map

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LobbyTile.js.map

@@ -1 +1 @@
-{"version":3,"file":"LobbyTile.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/LobbyTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,2BAA2B,EAAsB,QAAQ,EAAE,4CAAmC;AACvG,OAAO,EAAE,kCAAkC,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACrI,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAoBnD;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;;IAC9D,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IACvD,MAAM,qBAAqB,GAAG,WAAW,CAAC,mCAAmC,CAAC,CAAC;IAC/E,MAAM,sBAAsB,GAAG,WAAW,CAAC,2BAA2B,CAAC,CAAC;IACxE,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IACrD,OAAO,oBAAC,sBAAsB,kBAAC,2BAA2B,EAAE,KAAK,CAAC,2BAA2B,EAAE,cAAc,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,oBAAC,KAAK,IAAC,YAAY,QAAC,eAAe,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC;YAC1O,KAAK,CAAC,+BAA+B,IAAI,YAAY,IAAI,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,kCAAkC;gBAC5G,oBAAC,2BAA2B,oBAAK,sBAAsB,EAAM,qBAAqB,IAAE,IAAI,EAAE,OAAO,IAAI,CAC1F;YACf,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,IAClE,KAAK,CAAC,YAAY,CAAC,WAAW,CACpB;YACb,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAY,WAAW,gBAAY,kBAAkB,IACjH,KAAK,CAAC,YAAY,CAAC,KAAK,CACpB;YACN,KAAK,CAAC,YAAY,CAAC,WAAW,IAAI,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAY,WAAW,IAC1H,KAAK,CAAC,YAAY,CAAC,WAAW,CAC1B,CACH,CAAC,CAAC,CAAC,SAAS,IAAM,QAAQ,EAAI,CAAC;AACjD,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { LocalVideoCameraCycleButton, VideoGalleryStream, useTheme } from '@internal/react-components';\nimport { localCameraSwitcherContainerStyles, moreDetailsStyle, overlayContainerStyle, titleStyle } from '../styles/LobbyTile.styles';\nimport { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { useSelector } from '../hooks/useSelector';\n\n/**\n * @private\n */\nexport interface LobbyOverlayProps {\n  overlayIcon?: JSX.Element;\n  title: string;\n  moreDetails?: string;\n}\n\n/**\n * @private\n */\nexport interface LobbyTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  overlayProps: LobbyOverlayProps;\n  showLocalVideoCameraCycleButton?: boolean;\n}\n\n/**\n * @private\n */\nexport const LobbyTile = (props: LobbyTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n  const palette = useTheme().palette;\n  const handlers = useHandlers(ExpandedLocalVideoTile);\n  return <ExpandedLocalVideoTile localParticipantVideoStream={props.localParticipantVideoStream} overlayContent={props.overlayProps ? <Stack verticalFill horizontalAlign=\"center\" verticalAlign=\"center\" className={mergeStyles(overlayContainerStyle)} aria-atomic>\n            {props.showLocalVideoCameraCycleButton && isVideoReady && <Stack.Item styles={localCameraSwitcherContainerStyles}>\n                <LocalVideoCameraCycleButton {...cameraSwitcherCallback} {...cameraSwitcherCameras} size={'large'} />\n              </Stack.Item>}\n            <Stack.Item className={mergeStyles(titleStyle(palette, isVideoReady))}>\n              {props.overlayProps.overlayIcon}\n            </Stack.Item>\n            <Text className={mergeStyles(titleStyle(palette, isVideoReady))} aria-live=\"assertive\" data-ui-id=\"lobbyScreenTitle\">\n              {props.overlayProps.title}\n            </Text>\n            {props.overlayProps.moreDetails && <Text className={mergeStyles(moreDetailsStyle(palette, isVideoReady))} aria-live=\"assertive\">\n                {props.overlayProps.moreDetails}\n              </Text>}\n          </Stack> : undefined} {...handlers} />;\n};"]}
+{"version":3,"file":"LobbyTile.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LobbyTile.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAElC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,2BAA2B,EAAsB,QAAQ,EAAE,4CAAmC;AACvG,OAAO,EACL,kCAAkC,EAClC,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACX,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mCAAmC,EAAE,MAAM,qCAAqC,CAAC;AAC1F,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAoBnD;;GAEG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAe,EAAE;;IAC9D,MAAM,WAAW,GAAG,KAAK,CAAC,2BAA2B,CAAC;IACtD,MAAM,YAAY,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,WAAW,mCAAI,KAAK,CAAC;IAEvD,MAAM,qBAAqB,GAAG,WAAW,CAAC,mCAAmC,CAAC,CAAC;IAC/E,MAAM,sBAAsB,GAAG,WAAW,CAAC,2BAA2B,CAAC,CAAC;IAExE,MAAM,OAAO,GAAG,QAAQ,EAAE,CAAC,OAAO,CAAC;IACnC,MAAM,QAAQ,GAAG,WAAW,CAAC,sBAAsB,CAAC,CAAC;IAErD,OAAO,CACL,oBAAC,sBAAsB,kBACrB,2BAA2B,EAAE,KAAK,CAAC,2BAA2B,EAC9D,cAAc,EACZ,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CACnB,oBAAC,KAAK,IACJ,YAAY,QACZ,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,WAAW,CAAC,qBAAqB,CAAC;YAG5C,KAAK,CAAC,+BAA+B,IAAI,YAAY,IAAI,CACxD,oBAAC,KAAK,CAAC,IAAI,IAAC,MAAM,EAAE,kCAAkC;gBACpD,oBAAC,2BAA2B,oBAAK,sBAAsB,EAAM,qBAAqB,IAAE,IAAI,EAAE,OAAO,IAAI,CAC1F,CACd;YACD,oBAAC,KAAK,CAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,IAClE,KAAK,CAAC,YAAY,CAAC,WAAW,CACpB;YACb,oBAAC,IAAI,IACH,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAC/C,WAAW,gBACV,kBAAkB,IAE5B,KAAK,CAAC,YAAY,CAAC,KAAK,CACpB;YACN,KAAK,CAAC,YAAY,CAAC,WAAW,IAAI,CACjC,oBAAC,IAAI,IAAC,SAAS,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC,eAAY,WAAW,IACzF,KAAK,CAAC,YAAY,CAAC,WAAW,CAC1B,CACR,CACK,CACT,CAAC,CAAC,CAAC,SAAS,IAEX,QAAQ,EACZ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\nimport { mergeStyles, Stack, Text } from '@fluentui/react';\nimport { LocalVideoCameraCycleButton, VideoGalleryStream, useTheme } from '@internal/react-components';\nimport {\n  localCameraSwitcherContainerStyles,\n  moreDetailsStyle,\n  overlayContainerStyle,\n  titleStyle\n} from '../styles/LobbyTile.styles';\nimport { ExpandedLocalVideoTile } from './ExpandedLocalVideoTile';\nimport { useHandlers } from '../hooks/useHandlers';\nimport { localVideoCameraCycleButtonSelector } from '../selectors/LocalVideoTileSelector';\nimport { useSelector } from '../hooks/useSelector';\n\n/**\n * @private\n */\nexport interface LobbyOverlayProps {\n  overlayIcon?: JSX.Element;\n  title: string;\n  moreDetails?: string;\n}\n\n/**\n * @private\n */\nexport interface LobbyTileProps {\n  localParticipantVideoStream: VideoGalleryStream;\n  overlayProps: LobbyOverlayProps;\n  showLocalVideoCameraCycleButton?: boolean;\n}\n\n/**\n * @private\n */\nexport const LobbyTile = (props: LobbyTileProps): JSX.Element => {\n  const videoStream = props.localParticipantVideoStream;\n  const isVideoReady = videoStream?.isAvailable ?? false;\n\n  const cameraSwitcherCameras = useSelector(localVideoCameraCycleButtonSelector);\n  const cameraSwitcherCallback = useHandlers(LocalVideoCameraCycleButton);\n\n  const palette = useTheme().palette;\n  const handlers = useHandlers(ExpandedLocalVideoTile);\n\n  return (\n    <ExpandedLocalVideoTile\n      localParticipantVideoStream={props.localParticipantVideoStream}\n      overlayContent={\n        props.overlayProps ? (\n          <Stack\n            verticalFill\n            horizontalAlign=\"center\"\n            verticalAlign=\"center\"\n            className={mergeStyles(overlayContainerStyle)}\n            aria-atomic\n          >\n            {props.showLocalVideoCameraCycleButton && isVideoReady && (\n              <Stack.Item styles={localCameraSwitcherContainerStyles}>\n                <LocalVideoCameraCycleButton {...cameraSwitcherCallback} {...cameraSwitcherCameras} size={'large'} />\n              </Stack.Item>\n            )}\n            <Stack.Item className={mergeStyles(titleStyle(palette, isVideoReady))}>\n              {props.overlayProps.overlayIcon}\n            </Stack.Item>\n            <Text\n              className={mergeStyles(titleStyle(palette, isVideoReady))}\n              aria-live=\"assertive\"\n              data-ui-id=\"lobbyScreenTitle\"\n            >\n              {props.overlayProps.title}\n            </Text>\n            {props.overlayProps.moreDetails && (\n              <Text className={mergeStyles(moreDetailsStyle(palette, isVideoReady))} aria-live=\"assertive\">\n                {props.overlayProps.moreDetails}\n              </Text>\n            )}\n          </Stack>\n        ) : undefined\n      }\n      {...handlers}\n    />\n  );\n};\n"]}

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalAndRemotePIP.js

@@ -23,23 +23,32 @@ export const LocalAndRemotePIP = (props) => {
             renderElement: (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
             raisedHand: localParticipant.raisedHand
         });
-    }, [localParticipant.displayName, (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable, (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement, onCreateLocalStreamView, onDisposeLocalStreamView, localParticipant.raisedHand]);
+    }, [
+        localParticipant.displayName,
+        (_a = localParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
+        (_b = localParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.renderElement,
+        onCreateLocalStreamView,
+        onDisposeLocalStreamView,
+        localParticipant.raisedHand
+    ]);
     const remoteVideoTileProps = useMemo(() => {
         var _a, _b, _c;
-        return !remoteParticipant ? undefined : {
-            remoteParticipant: remoteParticipant,
-            onCreateRemoteStreamView,
-            onDisposeRemoteStreamView,
-            remoteVideoViewOptions,
-            displayName: remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.displayName,
-            showLabel: false,
-            showMuteIndicator: false,
-            isAvailable: (_a = remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
-            isReceiving: (_b = remoteParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.isReceiving,
-            renderElement: (_c = remoteParticipant.videoStream) === null || _c === void 0 ? void 0 : _c.renderElement,
-            userId: remoteParticipant.userId,
-            key: remoteParticipant.userId
-        };
+        return !remoteParticipant
+            ? undefined
+            : {
+                remoteParticipant: remoteParticipant,
+                onCreateRemoteStreamView,
+                onDisposeRemoteStreamView,
+                remoteVideoViewOptions,
+                displayName: remoteParticipant === null || remoteParticipant === void 0 ? void 0 : remoteParticipant.displayName,
+                showLabel: false,
+                showMuteIndicator: false,
+                isAvailable: (_a = remoteParticipant.videoStream) === null || _a === void 0 ? void 0 : _a.isAvailable,
+                isReceiving: (_b = remoteParticipant.videoStream) === null || _b === void 0 ? void 0 : _b.isReceiving,
+                renderElement: (_c = remoteParticipant.videoStream) === null || _c === void 0 ? void 0 : _c.renderElement,
+                userId: remoteParticipant.userId,
+                key: remoteParticipant.userId
+            };
     }, [remoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]);
     const locale = useLocale();
     const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;
@@ -48,17 +57,19 @@ export const LocalAndRemotePIP = (props) => {
     }), [ariaLabel]);
     // If there are no remote participants, show the local participant as the primary tile
     const primaryTileProps = useMemo(() => ({
-        children: remoteVideoTileProps ? React.createElement(_RemoteVideoTile, Object.assign({}, remoteVideoTileProps, { strings: locale.component.strings.videoGallery, onLongTouch: () => { } })) : React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps)),
+        children: remoteVideoTileProps ? (React.createElement(_RemoteVideoTile, Object.assign({}, remoteVideoTileProps, { strings: locale.component.strings.videoGallery, onLongTouch: () => { } }))) : (React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps))),
         // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
         orientation: 'portrait'
     }), [localVideoTileProps, remoteVideoTileProps, locale.component.strings.videoGallery]);
     // If we are showing the local participant as the primary tile, show nothing for the secondary tile
-    const secondaryTileProps = useMemo(() => remoteVideoTileProps ? {
-        children: React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps, { personaMinSize: 20 })),
-        // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
-        orientation: 'portrait'
-    } : undefined, [localVideoTileProps, remoteVideoTileProps]);
-    return React.createElement(_PictureInPictureInPicture, { onClick: props.onClick, strings: strings, primaryTile: primaryTileProps, secondaryTile: secondaryTileProps });
+    const secondaryTileProps = useMemo(() => remoteVideoTileProps
+        ? {
+            children: React.createElement(_LocalVideoTile, Object.assign({}, localVideoTileProps, { personaMinSize: 20 })),
+            // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.
+            orientation: 'portrait'
+        }
+        : undefined, [localVideoTileProps, remoteVideoTileProps]);
+    return (React.createElement(_PictureInPictureInPicture, { onClick: props.onClick, strings: strings, primaryTile: primaryTileProps, secondaryTile: secondaryTileProps }));
 };
 const localVideoViewOptions = {
     scalingMode: 'Crop',

package/dist/dist-esm/react-composites/src/composites/CallComposite/components/LocalAndRemotePIP.js.map

@@ -1 +1 @@
-{"version":3,"file":"LocalAndRemotePIP.js","sourceRoot":"","sources":["../../../../../../../preprocess-dist/react-composites/src/composites/CallComposite/components/LocalAndRemotePIP.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport { CreateVideoStreamViewResult, VideoGalleryStream, VideoStreamOptions, _LocalVideoTile, _RemoteVideoTile, _PictureInPictureInPicture, _PictureInPictureInPictureTileProps } from '@internal/react-components';\nimport { useLocale } from '../../localization';\nimport { RaisedHand } from '@internal/react-components';\n\n/**\n * @private\n */\nexport interface LocalAndRemotePIPProps {\n  localParticipant: {\n    displayName?: string;\n    videoStream?: VideoGalleryStream;\n    raisedHand?: RaisedHand;\n  };\n  remoteParticipant?: {\n    userId: string;\n    displayName?: string;\n    videoStream?: VideoGalleryStream;\n  };\n\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (userId: string, options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  onClick?: () => void;\n}\n\n/**\n * @private\n */\nexport const LocalAndRemotePIP = (props: LocalAndRemotePIPProps): JSX.Element => {\n  const {\n    localParticipant,\n    remoteParticipant,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView\n  } = props;\n  const localVideoTileProps = useMemo(() => ({\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    localVideoViewOptions,\n    displayName: localParticipant.displayName,\n    showLabel: false,\n    showMuteIndicator: false,\n    showCameraSwitcherInLocalPreview: false,\n    isAvailable: localParticipant.videoStream?.isAvailable,\n    renderElement: localParticipant.videoStream?.renderElement,\n    raisedHand: localParticipant.raisedHand\n  }), [localParticipant.displayName, localParticipant.videoStream?.isAvailable, localParticipant.videoStream?.renderElement, onCreateLocalStreamView, onDisposeLocalStreamView, localParticipant.raisedHand]);\n  const remoteVideoTileProps = useMemo(() => !remoteParticipant ? undefined : {\n    remoteParticipant: remoteParticipant,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView,\n    remoteVideoViewOptions,\n    displayName: remoteParticipant?.displayName,\n    showLabel: false,\n    showMuteIndicator: false,\n    isAvailable: remoteParticipant.videoStream?.isAvailable,\n    isReceiving: remoteParticipant.videoStream?.isReceiving,\n    renderElement: remoteParticipant.videoStream?.renderElement,\n    userId: remoteParticipant.userId,\n    key: remoteParticipant.userId\n  }, [remoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]);\n  const locale = useLocale();\n  const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;\n  const strings = useMemo(() => ({\n    rootAriaLabel: ariaLabel\n  }), [ariaLabel]);\n\n  // If there are no remote participants, show the local participant as the primary tile\n  const primaryTileProps: _PictureInPictureInPictureTileProps = useMemo(() => ({\n    children: remoteVideoTileProps ? <_RemoteVideoTile {...remoteVideoTileProps} strings={locale.component.strings.videoGallery} onLongTouch={() => {}} /> : <_LocalVideoTile {...localVideoTileProps} />,\n    // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.\n    orientation: 'portrait'\n  }), [localVideoTileProps, remoteVideoTileProps, locale.component.strings.videoGallery]);\n\n  // If we are showing the local participant as the primary tile, show nothing for the secondary tile\n  const secondaryTileProps: _PictureInPictureInPictureTileProps | undefined = useMemo(() => remoteVideoTileProps ? {\n    children: <_LocalVideoTile {...localVideoTileProps} personaMinSize={20} />,\n    // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.\n    orientation: 'portrait'\n  } : undefined, [localVideoTileProps, remoteVideoTileProps]);\n  return <_PictureInPictureInPicture onClick={props.onClick} strings={strings} primaryTile={primaryTileProps} secondaryTile={secondaryTileProps} />;\n};\nconst localVideoViewOptions: VideoStreamOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n};\nconst remoteVideoViewOptions: VideoStreamOptions = {\n  scalingMode: 'Crop',\n  isMirrored: false\n};"]}
+{"version":3,"file":"LocalAndRemotePIP.js","sourceRoot":"","sources":["../../../../../../../../react-composites/src/composites/CallComposite/components/LocalAndRemotePIP.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React, { useMemo } from 'react';\nimport {\n  CreateVideoStreamViewResult,\n  VideoGalleryStream,\n  VideoStreamOptions,\n  _LocalVideoTile,\n  _RemoteVideoTile,\n  _PictureInPictureInPicture,\n  _PictureInPictureInPictureTileProps\n} from '@internal/react-components';\n\nimport { useLocale } from '../../localization';\n\nimport { RaisedHand } from '@internal/react-components';\n\n/**\n * @private\n */\nexport interface LocalAndRemotePIPProps {\n  localParticipant: {\n    displayName?: string;\n    videoStream?: VideoGalleryStream;\n    raisedHand?: RaisedHand;\n  };\n  remoteParticipant?: {\n    userId: string;\n    displayName?: string;\n    videoStream?: VideoGalleryStream;\n  };\n\n  /** Callback to create the local video stream view */\n  onCreateLocalStreamView?: (options?: VideoStreamOptions) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose of the local video stream view */\n  onDisposeLocalStreamView?: () => void;\n  /** Callback to create a remote video stream view */\n  onCreateRemoteStreamView?: (\n    userId: string,\n    options?: VideoStreamOptions\n  ) => Promise<void | CreateVideoStreamViewResult>;\n  /** Callback to dispose a remote video stream view */\n  onDisposeRemoteStreamView?: (userId: string) => Promise<void>;\n  onClick?: () => void;\n}\n\n/**\n * @private\n */\nexport const LocalAndRemotePIP = (props: LocalAndRemotePIPProps): JSX.Element => {\n  const {\n    localParticipant,\n    remoteParticipant,\n    onCreateLocalStreamView,\n    onDisposeLocalStreamView,\n    onCreateRemoteStreamView,\n    onDisposeRemoteStreamView\n  } = props;\n\n  const localVideoTileProps = useMemo(\n    () => ({\n      onCreateLocalStreamView,\n      onDisposeLocalStreamView,\n      localVideoViewOptions,\n      displayName: localParticipant.displayName,\n      showLabel: false,\n      showMuteIndicator: false,\n      showCameraSwitcherInLocalPreview: false,\n      isAvailable: localParticipant.videoStream?.isAvailable,\n      renderElement: localParticipant.videoStream?.renderElement,\n      raisedHand: localParticipant.raisedHand\n    }),\n    [\n      localParticipant.displayName,\n      localParticipant.videoStream?.isAvailable,\n      localParticipant.videoStream?.renderElement,\n      onCreateLocalStreamView,\n      onDisposeLocalStreamView,\n      localParticipant.raisedHand\n    ]\n  );\n\n  const remoteVideoTileProps = useMemo(\n    () =>\n      !remoteParticipant\n        ? undefined\n        : {\n            remoteParticipant: remoteParticipant,\n            onCreateRemoteStreamView,\n            onDisposeRemoteStreamView,\n            remoteVideoViewOptions,\n            displayName: remoteParticipant?.displayName,\n            showLabel: false,\n            showMuteIndicator: false,\n            isAvailable: remoteParticipant.videoStream?.isAvailable,\n            isReceiving: remoteParticipant.videoStream?.isReceiving,\n            renderElement: remoteParticipant.videoStream?.renderElement,\n            userId: remoteParticipant.userId,\n            key: remoteParticipant.userId\n          },\n    [remoteParticipant, onCreateRemoteStreamView, onDisposeRemoteStreamView]\n  );\n\n  const locale = useLocale();\n  const ariaLabel = locale.strings.callWithChat.pictureInPictureTileAriaLabel;\n  const strings = useMemo(\n    () => ({\n      rootAriaLabel: ariaLabel\n    }),\n    [ariaLabel]\n  );\n\n  // If there are no remote participants, show the local participant as the primary tile\n  const primaryTileProps: _PictureInPictureInPictureTileProps = useMemo(\n    () => ({\n      children: remoteVideoTileProps ? (\n        <_RemoteVideoTile\n          {...remoteVideoTileProps}\n          strings={locale.component.strings.videoGallery}\n          onLongTouch={() => {}}\n        />\n      ) : (\n        <_LocalVideoTile {...localVideoTileProps} />\n      ),\n      // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.\n      orientation: 'portrait'\n    }),\n    [localVideoTileProps, remoteVideoTileProps, locale.component.strings.videoGallery]\n  );\n\n  // If we are showing the local participant as the primary tile, show nothing for the secondary tile\n  const secondaryTileProps: _PictureInPictureInPictureTileProps | undefined = useMemo(\n    () =>\n      remoteVideoTileProps\n        ? {\n            children: <_LocalVideoTile {...localVideoTileProps} personaMinSize={20} />,\n            // TODO: when the calling SDK provides height/width stream information - update this to reflect the stream orientation.\n            orientation: 'portrait'\n          }\n        : undefined,\n    [localVideoTileProps, remoteVideoTileProps]\n  );\n\n  return (\n    <_PictureInPictureInPicture\n      onClick={props.onClick}\n      strings={strings}\n      primaryTile={primaryTileProps}\n      secondaryTile={secondaryTileProps}\n    />\n  );\n};\n\nconst localVideoViewOptions: VideoStreamOptions = {\n  scalingMode: 'Crop',\n  isMirrored: true\n};\n\nconst remoteVideoViewOptions: VideoStreamOptions = {\n  scalingMode: 'Crop',\n  isMirrored: false\n};\n"]}