@azure/communication-react 1.3.3-alpha-202209220018.0 → 1.3.3-alpha-202210070024.0

package/dist/dist-esm/react-composites/src/composites/common/AddPeopleDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddPeopleDropdown.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AddPeopleDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport {\n  DefaultButton,\n  IContextualMenuItem,\n  IContextualMenuProps,\n  PrimaryButton,\n  Stack,\n  useTheme\n} from '@fluentui/react';\n\nimport { _DrawerMenu, _DrawerMenuItemProps, Announcer } from '@internal/react-components';\nimport copy from 'copy-to-clipboard';\nimport { useMemo, useState } from 'react';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallWithChatCompositeIcon } from './icons';\nimport { iconStyles, themedCopyLinkButtonStyles, themedMenuStyle } from './AddPeopleDropdown.styles';\nimport { CallingDialpad } from './CallingDialpad';\nimport { CallingDialpadStrings } from './CallingDialpad';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\nimport { convertContextualMenuItemToDrawerMenuItem } from '../CallWithChatComposite/ConvertContextualMenuItemToDrawerMenuItem';\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\n\n/** @private */\nexport interface AddPeopleDropdownStrings extends CallingDialpadStrings {\n  copyInviteLinkButtonLabel: string;\n  openDialpadButtonLabel: string;\n  peoplePaneAddPeopleButtonLabel: string;\n  copyInviteLinkActionedAriaLabel: string;\n}\n\n/** @private */\nexport interface AddPeopleDropdownProps {\n  inviteLink?: string;\n  mobileView?: boolean;\n  strings: AddPeopleDropdownStrings;\n  onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId?: string;\n}\n\n/** @private */\nexport const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element => {\n  const theme = useTheme();\n\n  const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId } = props;\n\n  const [showDialpad, setShowDialpad] = useState(false);\n\n  const [announcerStrings, setAnnouncerStrings] = useState<string>();\n\n  const menuStyleThemed = useMemo(() => themedMenuStyle(theme), [theme]);\n\n  const copyLinkButtonStylesThemed = useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);\n\n  const defaultMenuProps = useMemo((): IContextualMenuProps => {\n    const menuProps: IContextualMenuProps = {\n      styles: menuStyleThemed,\n      items: [],\n      useTargetWidth: true,\n      calloutProps: {\n        preventDismissOnEvent\n      },\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onMenuOpened(contextualMenu?) {\n        setAnnouncerStrings(undefined);\n      }\n    };\n\n    if (inviteLink) {\n      menuProps.items.push({\n        key: 'InviteLinkKey',\n        text: strings.copyInviteLinkButtonLabel,\n        itemProps: { styles: copyLinkButtonStylesThemed },\n        iconProps: { iconName: 'Link', style: iconStyles },\n        onClick: () => {\n          setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n          copy(inviteLink);\n        }\n      });\n    }\n\n    // only show the dialpad option when alternateCallerId is set\n    if (alternateCallerId) {\n      menuProps.items.push({\n        key: 'DialpadKey',\n        text: strings.openDialpadButtonLabel,\n        itemProps: { styles: copyLinkButtonStylesThemed },\n        iconProps: { iconName: PeoplePaneOpenDialpadIconNameTrampoline(), style: iconStyles },\n        onClick: () => setShowDialpad(true),\n        'data-ui-id': 'call-dial-phone-number-button'\n      });\n    }\n\n    return menuProps;\n  }, [\n    menuStyleThemed,\n    inviteLink,\n    alternateCallerId,\n    strings.copyInviteLinkButtonLabel,\n    strings.copyInviteLinkActionedAriaLabel,\n    strings.openDialpadButtonLabel,\n    copyLinkButtonStylesThemed\n  ]);\n\n  const onDismissDialpad = (): void => {\n    setShowDialpad(false);\n  };\n\n  const [addPeopleDrawerMenuItems, setAddPeopleDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n\n  const setDrawerMenuItemsForAddPeople: () => void = useMemo(() => {\n    return () => {\n      const drawerMenuItems = defaultMenuProps.items.map((contextualMenu: IContextualMenuItem) =>\n        convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setAddPeopleDrawerMenuItems([]))\n      );\n      setAddPeopleDrawerMenuItems(drawerMenuItems);\n    };\n  }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);\n\n  if (mobileView) {\n    return (\n      <Stack>\n        <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n        <Stack.Item styles={copyLinkButtonContainerStyles}>\n          <PrimaryButton\n            onClick={setDrawerMenuItemsForAddPeople}\n            styles={copyLinkButtonStylesThemed}\n            onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()}\n            text={strings.peoplePaneAddPeopleButtonLabel}\n            data-ui-id=\"call-add-people-button\"\n          />\n        </Stack.Item>\n\n        {addPeopleDrawerMenuItems.length > 0 && (\n          <Stack styles={drawerContainerStyles} data-ui-id=\"call-add-people-dropdown\">\n            <_DrawerMenu onLightDismiss={() => setAddPeopleDrawerMenuItems([])} items={addPeopleDrawerMenuItems} />\n          </Stack>\n        )}\n        {alternateCallerId && (\n          <CallingDialpad\n            isMobile\n            strings={strings}\n            showDialpad={showDialpad}\n            onDismissDialpad={onDismissDialpad}\n            onAddParticipant={onAddParticipant}\n            alternateCallerId={alternateCallerId}\n          />\n        )}\n      </Stack>\n    );\n  }\n\n  return (\n    <>\n      {\n        <Stack>\n          <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n          {alternateCallerId && (\n            <CallingDialpad\n              isMobile={false}\n              strings={strings}\n              showDialpad={showDialpad}\n              onDismissDialpad={onDismissDialpad}\n              onAddParticipant={onAddParticipant}\n              alternateCallerId={alternateCallerId}\n            />\n          )}\n\n          <Stack styles={copyLinkButtonStackStyles}>\n            <DefaultButton\n              onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()}\n              text={strings.peoplePaneAddPeopleButtonLabel}\n              menuProps={defaultMenuProps}\n              styles={copyLinkButtonStylesThemed}\n              data-ui-id=\"call-add-people-button\"\n            />\n          </Stack>\n        </Stack>\n      }\n    </>\n  );\n};\n\nfunction PeoplePaneOpenDialpadIconNameTrampoline(): string {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return 'PeoplePaneOpenDialpad';\n\n  return '';\n}\n\nfunction PeoplePaneAddPersonIconTrampoline(): JSX.Element {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return <CallWithChatCompositeIcon iconName=\"PeoplePaneAddPerson\" />;\n\n  return <></>;\n}\n\"../../../../react-components/src\"\"../../../../acs-ui-common/src\""]}
+{"version":3,"file":"AddPeopleDropdown.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/AddPeopleDropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport React from 'react';\nimport {\n  DefaultButton,\n  IContextualMenuItem,\n  IContextualMenuProps,\n  PrimaryButton,\n  Stack,\n  useTheme\n} from '@fluentui/react';\n\nimport { _DrawerMenu, _DrawerMenuItemProps, Announcer } from '@internal/react-components';\nimport copy from 'copy-to-clipboard';\nimport { useMemo, useState } from 'react';\n/* @conditional-compile-remove(PSTN-calls) */\nimport { CallWithChatCompositeIcon } from './icons';\nimport { iconStyles, themedCopyLinkButtonStyles, themedMenuStyle } from './AddPeopleDropdown.styles';\nimport { CallingDialpad } from './CallingDialpad';\nimport { CallingDialpadStrings } from './CallingDialpad';\nimport { _preventDismissOnEvent as preventDismissOnEvent } from '@internal/acs-ui-common';\nimport { copyLinkButtonContainerStyles, copyLinkButtonStackStyles } from './styles/PeoplePaneContent.styles';\nimport { drawerContainerStyles } from '../CallComposite/styles/CallComposite.styles';\nimport { convertContextualMenuItemToDrawerMenuItem } from '../CallWithChatComposite/ConvertContextualMenuItemToDrawerMenuItem';\nimport { PhoneNumberIdentifier } from '@azure/communication-common';\nimport { AddPhoneNumberOptions } from '@azure/communication-calling';\n\n/** @private */\nexport interface AddPeopleDropdownStrings extends CallingDialpadStrings {\n  copyInviteLinkButtonLabel: string;\n  openDialpadButtonLabel: string;\n  peoplePaneAddPeopleButtonLabel: string;\n  copyInviteLinkActionedAriaLabel: string;\n}\n\n/** @private */\nexport interface AddPeopleDropdownProps {\n  inviteLink?: string;\n  mobileView?: boolean;\n  strings: AddPeopleDropdownStrings;\n  onAddParticipant: (participant: PhoneNumberIdentifier, options?: AddPhoneNumberOptions) => void;\n  alternateCallerId?: string;\n}\n\n/** @private */\nexport const AddPeopleDropdown = (props: AddPeopleDropdownProps): JSX.Element => {\n  const theme = useTheme();\n\n  const { inviteLink, strings, mobileView, onAddParticipant, alternateCallerId } = props;\n\n  const [showDialpad, setShowDialpad] = useState(false);\n\n  const [announcerStrings, setAnnouncerStrings] = useState<string>();\n\n  const menuStyleThemed = useMemo(() => themedMenuStyle(theme), [theme]);\n\n  const copyLinkButtonStylesThemed = useMemo(() => themedCopyLinkButtonStyles(theme, mobileView), [mobileView, theme]);\n\n  const defaultMenuProps = useMemo((): IContextualMenuProps => {\n    const menuProps: IContextualMenuProps = {\n      styles: menuStyleThemed,\n      items: [],\n      useTargetWidth: true,\n      calloutProps: {\n        preventDismissOnEvent\n      },\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      onMenuOpened(contextualMenu?) {\n        setAnnouncerStrings(undefined);\n      }\n    };\n\n    if (inviteLink) {\n      menuProps.items.push({\n        key: 'InviteLinkKey',\n        text: strings.copyInviteLinkButtonLabel,\n        itemProps: { styles: copyLinkButtonStylesThemed },\n        iconProps: { iconName: 'Link', style: iconStyles },\n        onClick: () => {\n          setAnnouncerStrings(strings.copyInviteLinkActionedAriaLabel);\n          copy(inviteLink);\n        }\n      });\n    }\n\n    // only show the dialpad option when alternateCallerId is set\n    if (alternateCallerId) {\n      menuProps.items.push({\n        key: 'DialpadKey',\n        text: strings.openDialpadButtonLabel,\n        itemProps: { styles: copyLinkButtonStylesThemed },\n        iconProps: { iconName: PeoplePaneOpenDialpadIconNameTrampoline(), style: iconStyles },\n        onClick: () => setShowDialpad(true),\n        'data-ui-id': 'call-dial-phone-number-button'\n      });\n    }\n\n    return menuProps;\n  }, [\n    menuStyleThemed,\n    inviteLink,\n    alternateCallerId,\n    strings.copyInviteLinkButtonLabel,\n    strings.copyInviteLinkActionedAriaLabel,\n    strings.openDialpadButtonLabel,\n    copyLinkButtonStylesThemed\n  ]);\n\n  const onDismissDialpad = (): void => {\n    setShowDialpad(false);\n  };\n\n  const [addPeopleDrawerMenuItems, setAddPeopleDrawerMenuItems] = useState<_DrawerMenuItemProps[]>([]);\n\n  const setDrawerMenuItemsForAddPeople: () => void = useMemo(() => {\n    return () => {\n      const drawerMenuItems = defaultMenuProps.items.map((contextualMenu: IContextualMenuItem) =>\n        convertContextualMenuItemToDrawerMenuItem(contextualMenu, () => setAddPeopleDrawerMenuItems([]))\n      );\n      setAddPeopleDrawerMenuItems(drawerMenuItems);\n    };\n  }, [defaultMenuProps, setAddPeopleDrawerMenuItems]);\n\n  if (mobileView) {\n    return (\n      <Stack>\n        <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n        {defaultMenuProps.items.length > 0 && (\n          <Stack.Item styles={copyLinkButtonContainerStyles}>\n            <PrimaryButton\n              onClick={setDrawerMenuItemsForAddPeople}\n              styles={copyLinkButtonStylesThemed}\n              onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()}\n              text={strings.peoplePaneAddPeopleButtonLabel}\n              data-ui-id=\"call-add-people-button\"\n            />\n          </Stack.Item>\n        )}\n\n        {addPeopleDrawerMenuItems.length > 0 && (\n          <Stack styles={drawerContainerStyles} data-ui-id=\"call-add-people-dropdown\">\n            <_DrawerMenu onLightDismiss={() => setAddPeopleDrawerMenuItems([])} items={addPeopleDrawerMenuItems} />\n          </Stack>\n        )}\n        {alternateCallerId && (\n          <CallingDialpad\n            isMobile\n            strings={strings}\n            showDialpad={showDialpad}\n            onDismissDialpad={onDismissDialpad}\n            onAddParticipant={onAddParticipant}\n            alternateCallerId={alternateCallerId}\n          />\n        )}\n      </Stack>\n    );\n  }\n\n  return (\n    <>\n      {\n        <Stack>\n          <Announcer ariaLive={'assertive'} announcementString={announcerStrings} />\n          {alternateCallerId && (\n            <CallingDialpad\n              isMobile={false}\n              strings={strings}\n              showDialpad={showDialpad}\n              onDismissDialpad={onDismissDialpad}\n              onAddParticipant={onAddParticipant}\n              alternateCallerId={alternateCallerId}\n            />\n          )}\n\n          {defaultMenuProps.items.length > 0 && (\n            <Stack styles={copyLinkButtonStackStyles}>\n              <DefaultButton\n                onRenderIcon={() => PeoplePaneAddPersonIconTrampoline()}\n                text={strings.peoplePaneAddPeopleButtonLabel}\n                menuProps={defaultMenuProps}\n                styles={copyLinkButtonStylesThemed}\n                data-ui-id=\"call-add-people-button\"\n              />\n            </Stack>\n          )}\n        </Stack>\n      }\n    </>\n  );\n};\n\nfunction PeoplePaneOpenDialpadIconNameTrampoline(): string {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return 'PeoplePaneOpenDialpad';\n\n  return '';\n}\n\nfunction PeoplePaneAddPersonIconTrampoline(): JSX.Element {\n  /* @conditional-compile-remove(PSTN-calls) */\n  return <CallWithChatCompositeIcon iconName=\"PeoplePaneAddPerson\" />;\n\n  return <></>;\n}\n\"../../../../react-components/src\"\"../../../../acs-ui-common/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/ModalLocalAndRemotePIP.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { CallAdapter } from '../CallComposite';
+/// <reference types="react" />
 import { _ICoordinates } from "../../../../react-components/src";
 import { ModalLocalAndRemotePIPStyles } from './styles/ModalLocalAndRemotePIP.styles';
 /**
@@ -8,12 +7,10 @@ import { ModalLocalAndRemotePIPStyles } from './styles/ModalLocalAndRemotePIP.st
  * @private
  */
 export declare const ModalLocalAndRemotePIP: (props: {
-    callAdapter: CallAdapter;
     hidden: boolean;
     modalLayerHostId: string;
-    children?: React.ReactNode;
     styles?: ModalLocalAndRemotePIPStyles;
     minDragPosition?: _ICoordinates;
     maxDragPosition?: _ICoordinates;
-}) => JSX.Element;
+}) => JSX.Element | null;
 //# sourceMappingURL=ModalLocalAndRemotePIP.d.ts.map

package/dist/dist-esm/react-composites/src/composites/common/ModalLocalAndRemotePIP.js

@@ -2,12 +2,13 @@
 // Licensed under the MIT license.
 import { concatStyleSets, ContextualMenu, Stack } from '@fluentui/react';
 import React, { useMemo } from 'react';
-import { CallAdapterProvider } from '../CallComposite/adapter/CallAdapterProvider';
 import { LocalAndRemotePIP } from '../CallComposite/components/LocalAndRemotePIP';
 import { useHandlers } from '../CallComposite/hooks/useHandlers';
 import { useSelector } from '../CallComposite/hooks/useSelector';
 import { localAndRemotePIPSelector } from '../CallComposite/selectors/localAndRemotePIPSelector';
 import { _ModalClone } from "../../../../react-components/src";
+/* @conditional-compile-remove(rooms) */
+import { _RemoteVideoTile, _usePermissions } from "../../../../react-components/src";
 import { hiddenStyle, modalStyle, PIPContainerStyle } from './styles/ModalLocalAndRemotePIP.styles';
 /**
  * Drag options for Modal in {@link ModalLocalAndRemotePIP} component
@@ -18,12 +19,34 @@ const DRAG_OPTIONS = {
     menu: ContextualMenu,
     keepInBounds: true
 };
-const _ModalLocalAndRemotePIP = (props) => {
+/**
+ * A wrapping component with a draggable {@link LocalAndRemotePIP} component that is bound to a LayerHost component with id
+ * specified by `modalLayerHostId` prop
+ * @private
+ */
+export const ModalLocalAndRemotePIP = (props) => {
     var _a;
     const rootStyles = props.hidden ? hiddenStyle : PIPContainerStyle;
+    /* @conditional-compile-remove(rooms) */
+    const rolePermissions = _usePermissions();
     const pictureInPictureProps = useSelector(localAndRemotePIPSelector);
     const pictureInPictureHandlers = useHandlers(LocalAndRemotePIP);
-    const localAndRemotePIP = useMemo(() => React.createElement(LocalAndRemotePIP, Object.assign({}, pictureInPictureProps, pictureInPictureHandlers)), [pictureInPictureProps, pictureInPictureHandlers]);
+    const localAndRemotePIP = useMemo(() => {
+        var _a;
+        /* @conditional-compile-remove(rooms) */
+        if (!rolePermissions.cameraButton && ((_a = pictureInPictureProps.dominantRemoteParticipant) === null || _a === void 0 ? void 0 : _a.userId)) {
+            return React.createElement(_RemoteVideoTile, Object.assign({}, pictureInPictureProps.dominantRemoteParticipant));
+        }
+        return React.createElement(LocalAndRemotePIP, Object.assign({}, pictureInPictureProps, pictureInPictureHandlers));
+    }, [
+        pictureInPictureProps,
+        pictureInPictureHandlers,
+        /* @conditional-compile-remove(rooms) */ rolePermissions.cameraButton
+    ]);
+    /* @conditional-compile-remove(rooms) */
+    if (!rolePermissions.cameraButton && !pictureInPictureProps.dominantRemoteParticipant) {
+        return null;
+    }
     const modalStylesThemed = concatStyleSets(modalStyle, (_a = props.styles) === null || _a === void 0 ? void 0 : _a.modal);
     return (React.createElement(Stack, { styles: rootStyles },
         React.createElement(_ModalClone, { isOpen: true, isModeless: true, dragOptions: DRAG_OPTIONS, styles: modalStylesThemed, layerProps: { hostId: props.modalLayerHostId }, minDragPosition: props.minDragPosition, maxDragPosition: props.maxDragPosition }, 
@@ -31,13 +54,4 @@ const _ModalLocalAndRemotePIP = (props) => {
         // possession of the dominant remote participant video stream
         !props.hidden && localAndRemotePIP)));
 };
-/**
- * A wrapping component with a draggable {@link LocalAndRemotePIP} component that is bound to a LayerHost component with id
- * specified by `modalLayerHostId` prop
- * @private
- */
-export const ModalLocalAndRemotePIP = (props) => {
-    return (React.createElement(CallAdapterProvider, { adapter: props.callAdapter },
-        React.createElement(_ModalLocalAndRemotePIP, Object.assign({}, props), props.children)));
-};
 //# sourceMappingURL=ModalLocalAndRemotePIP.js.map

package/dist/dist-esm/react-composites/src/composites/common/ModalLocalAndRemotePIP.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModalLocalAndRemotePIP.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ModalLocalAndRemotePIP.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACvF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,8CAA8C,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,sDAAsD,CAAC;AACjG,OAAO,EAAE,WAAW,EAAiB,yCAAmC;AACxE,OAAO,EACL,WAAW,EAEX,UAAU,EACV,iBAAiB,EAClB,MAAM,wCAAwC,CAAC;AAEhD;;GAEG;AACH,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,MAAM,uBAAuB,GAAG,CAAC,KAMhC,EAAe,EAAE;;IAChB,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAClE,MAAM,qBAAqB,GAAG,WAAW,CAAC,yBAAyB,CAAC,CAAC;IACrE,MAAM,wBAAwB,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAChE,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,oBAAC,iBAAiB,oBAAK,qBAAqB,EAAM,wBAAwB,EAAI,EACpF,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,CAClD,CAAC;IAEF,MAAM,iBAAiB,GAAG,eAAe,CAAC,UAAU,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,KAAK,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU;QACvB,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,iBAAiB,EACzB,UAAU,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,gBAAgB,EAAE,EAC9C,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,eAAe,EAAE,KAAK,CAAC,eAAe;QAGpC,qGAAqG;QACrG,6DAA6D;QAC7D,CAAC,KAAK,CAAC,MAAM,IAAI,iBAAiB,CAExB,CACR,CACT,CAAC;AACJ,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAQtC,EAAe,EAAE;IAChB,OAAO,CACL,oBAAC,mBAAmB,IAAC,OAAO,EAAE,KAAK,CAAC,WAAW;QAC7C,oBAAC,uBAAuB,oBAAK,KAAK,GAAG,KAAK,CAAC,QAAQ,CAA2B,CAC1D,CACvB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { concatStyleSets, ContextualMenu, IDragOptions, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { CallAdapter } from '../CallComposite';\nimport { CallAdapterProvider } from '../CallComposite/adapter/CallAdapterProvider';\nimport { LocalAndRemotePIP } from '../CallComposite/components/LocalAndRemotePIP';\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\nimport { useSelector } from '../CallComposite/hooks/useSelector';\nimport { localAndRemotePIPSelector } from '../CallComposite/selectors/localAndRemotePIPSelector';\nimport { _ModalClone, _ICoordinates } from '@internal/react-components';\nimport {\n  hiddenStyle,\n  ModalLocalAndRemotePIPStyles,\n  modalStyle,\n  PIPContainerStyle\n} from './styles/ModalLocalAndRemotePIP.styles';\n\n/**\n * Drag options for Modal in {@link ModalLocalAndRemotePIP} component\n */\nconst DRAG_OPTIONS: IDragOptions = {\n  moveMenuItemText: 'Move',\n  closeMenuItemText: 'Close',\n  menu: ContextualMenu,\n  keepInBounds: true\n};\n\nconst _ModalLocalAndRemotePIP = (props: {\n  hidden: boolean;\n  modalLayerHostId: string;\n  styles?: ModalLocalAndRemotePIPStyles;\n  minDragPosition?: _ICoordinates;\n  maxDragPosition?: _ICoordinates;\n}): JSX.Element => {\n  const rootStyles = props.hidden ? hiddenStyle : PIPContainerStyle;\n  const pictureInPictureProps = useSelector(localAndRemotePIPSelector);\n  const pictureInPictureHandlers = useHandlers(LocalAndRemotePIP);\n  const localAndRemotePIP = useMemo(\n    () => <LocalAndRemotePIP {...pictureInPictureProps} {...pictureInPictureHandlers} />,\n    [pictureInPictureProps, pictureInPictureHandlers]\n  );\n\n  const modalStylesThemed = concatStyleSets(modalStyle, props.styles?.modal);\n\n  return (\n    <Stack styles={rootStyles}>\n      <_ModalClone\n        isOpen={true}\n        isModeless={true}\n        dragOptions={DRAG_OPTIONS}\n        styles={modalStylesThemed}\n        layerProps={{ hostId: props.modalLayerHostId }}\n        minDragPosition={props.minDragPosition}\n        maxDragPosition={props.maxDragPosition}\n      >\n        {\n          // Only render LocalAndRemotePIP when this component is NOT hidden because VideoGallery needs to have\n          // possession of the dominant remote participant video stream\n          !props.hidden && localAndRemotePIP\n        }\n      </_ModalClone>\n    </Stack>\n  );\n};\n\n/**\n * A wrapping component with a draggable {@link LocalAndRemotePIP} component that is bound to a LayerHost component with id\n * specified by `modalLayerHostId` prop\n * @private\n */\nexport const ModalLocalAndRemotePIP = (props: {\n  callAdapter: CallAdapter;\n  hidden: boolean;\n  modalLayerHostId: string;\n  children?: React.ReactNode;\n  styles?: ModalLocalAndRemotePIPStyles;\n  minDragPosition?: _ICoordinates;\n  maxDragPosition?: _ICoordinates;\n}): JSX.Element => {\n  return (\n    <CallAdapterProvider adapter={props.callAdapter}>\n      <_ModalLocalAndRemotePIP {...props}>{props.children}</_ModalLocalAndRemotePIP>\n    </CallAdapterProvider>\n  );\n};\n\"../../../../react-components/src\""]}
+{"version":3,"file":"ModalLocalAndRemotePIP.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/ModalLocalAndRemotePIP.tsx"],"names":[],"mappings":"AAAA,uCAAuC;AACvC,kCAAkC;AAClC,OAAO,EAAE,eAAe,EAAE,cAAc,EAAgB,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACvF,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,EAAE,yBAAyB,EAAE,MAAM,sDAAsD,CAAC;AACjG,OAAO,EAAE,WAAW,EAAiB,yCAAmC;AACxE,wCAAwC;AACxC,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,yCAAmC;AAC/E,OAAO,EACL,WAAW,EAEX,UAAU,EACV,iBAAiB,EAClB,MAAM,wCAAwC,CAAC;AAEhD;;GAEG;AACH,MAAM,YAAY,GAAiB;IACjC,gBAAgB,EAAE,MAAM;IACxB,iBAAiB,EAAE,OAAO;IAC1B,IAAI,EAAE,cAAc;IACpB,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,KAMtC,EAAsB,EAAE;;IACvB,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAElE,wCAAwC;IACxC,MAAM,eAAe,GAAG,eAAe,EAAE,CAAC;IAE1C,MAAM,qBAAqB,GAAG,WAAW,CAAC,yBAAyB,CAAC,CAAC;IAErE,MAAM,wBAAwB,GAAG,WAAW,CAAC,iBAAiB,CAAC,CAAC;IAChE,MAAM,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE;;QACrC,wCAAwC;QACxC,IAAI,CAAC,eAAe,CAAC,YAAY,KAAI,MAAA,qBAAqB,CAAC,yBAAyB,0CAAE,MAAM,CAAA,EAAE;YAC5F,OAAO,oBAAC,gBAAgB,oBAAK,qBAAqB,CAAC,yBAAyB,EAAI,CAAC;SAClF;QACD,OAAO,oBAAC,iBAAiB,oBAAK,qBAAqB,EAAM,wBAAwB,EAAI,CAAC;IACxF,CAAC,EAAE;QACD,qBAAqB;QACrB,wBAAwB;QACxB,wCAAwC,CAAC,eAAe,CAAC,YAAY;KACtE,CAAC,CAAC;IAEH,wCAAwC;IACxC,IAAI,CAAC,eAAe,CAAC,YAAY,IAAI,CAAC,qBAAqB,CAAC,yBAAyB,EAAE;QACrF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,iBAAiB,GAAG,eAAe,CAAC,UAAU,EAAE,MAAA,KAAK,CAAC,MAAM,0CAAE,KAAK,CAAC,CAAC;IAE3E,OAAO,CACL,oBAAC,KAAK,IAAC,MAAM,EAAE,UAAU;QACvB,oBAAC,WAAW,IACV,MAAM,EAAE,IAAI,EACZ,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,iBAAiB,EACzB,UAAU,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,gBAAgB,EAAE,EAC9C,eAAe,EAAE,KAAK,CAAC,eAAe,EACtC,eAAe,EAAE,KAAK,CAAC,eAAe;QAGpC,qGAAqG;QACrG,6DAA6D;QAC7D,CAAC,KAAK,CAAC,MAAM,IAAI,iBAAiB,CAExB,CACR,CACT,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT license.\nimport { concatStyleSets, ContextualMenu, IDragOptions, Stack } from '@fluentui/react';\nimport React, { useMemo } from 'react';\nimport { LocalAndRemotePIP } from '../CallComposite/components/LocalAndRemotePIP';\nimport { useHandlers } from '../CallComposite/hooks/useHandlers';\nimport { useSelector } from '../CallComposite/hooks/useSelector';\nimport { localAndRemotePIPSelector } from '../CallComposite/selectors/localAndRemotePIPSelector';\nimport { _ModalClone, _ICoordinates } from '@internal/react-components';\n/* @conditional-compile-remove(rooms) */\nimport { _RemoteVideoTile, _usePermissions } from '@internal/react-components';\nimport {\n  hiddenStyle,\n  ModalLocalAndRemotePIPStyles,\n  modalStyle,\n  PIPContainerStyle\n} from './styles/ModalLocalAndRemotePIP.styles';\n\n/**\n * Drag options for Modal in {@link ModalLocalAndRemotePIP} component\n */\nconst DRAG_OPTIONS: IDragOptions = {\n  moveMenuItemText: 'Move',\n  closeMenuItemText: 'Close',\n  menu: ContextualMenu,\n  keepInBounds: true\n};\n\n/**\n * A wrapping component with a draggable {@link LocalAndRemotePIP} component that is bound to a LayerHost component with id\n * specified by `modalLayerHostId` prop\n * @private\n */\nexport const ModalLocalAndRemotePIP = (props: {\n  hidden: boolean;\n  modalLayerHostId: string;\n  styles?: ModalLocalAndRemotePIPStyles;\n  minDragPosition?: _ICoordinates;\n  maxDragPosition?: _ICoordinates;\n}): JSX.Element | null => {\n  const rootStyles = props.hidden ? hiddenStyle : PIPContainerStyle;\n\n  /* @conditional-compile-remove(rooms) */\n  const rolePermissions = _usePermissions();\n\n  const pictureInPictureProps = useSelector(localAndRemotePIPSelector);\n\n  const pictureInPictureHandlers = useHandlers(LocalAndRemotePIP);\n  const localAndRemotePIP = useMemo(() => {\n    /* @conditional-compile-remove(rooms) */\n    if (!rolePermissions.cameraButton && pictureInPictureProps.dominantRemoteParticipant?.userId) {\n      return <_RemoteVideoTile {...pictureInPictureProps.dominantRemoteParticipant} />;\n    }\n    return <LocalAndRemotePIP {...pictureInPictureProps} {...pictureInPictureHandlers} />;\n  }, [\n    pictureInPictureProps,\n    pictureInPictureHandlers,\n    /* @conditional-compile-remove(rooms) */ rolePermissions.cameraButton\n  ]);\n\n  /* @conditional-compile-remove(rooms) */\n  if (!rolePermissions.cameraButton && !pictureInPictureProps.dominantRemoteParticipant) {\n    return null;\n  }\n\n  const modalStylesThemed = concatStyleSets(modalStyle, props.styles?.modal);\n\n  return (\n    <Stack styles={rootStyles}>\n      <_ModalClone\n        isOpen={true}\n        isModeless={true}\n        dragOptions={DRAG_OPTIONS}\n        styles={modalStylesThemed}\n        layerProps={{ hostId: props.modalLayerHostId }}\n        minDragPosition={props.minDragPosition}\n        maxDragPosition={props.maxDragPosition}\n      >\n        {\n          // Only render LocalAndRemotePIP when this component is NOT hidden because VideoGallery needs to have\n          // possession of the dominant remote participant video stream\n          !props.hidden && localAndRemotePIP\n        }\n      </_ModalClone>\n    </Stack>\n  );\n};\n\"../../../../react-components/src\""]}

package/dist/dist-esm/react-composites/src/composites/common/icons.d.ts

@@ -96,6 +96,7 @@ export declare const DEFAULT_COMPOSITE_ICONS: {
     DomainPermissionCamera: JSX.Element;
     DomainPermissionMic: JSX.Element;
     UnsupportedBrowserWarning: JSX.Element;
+    BrowserPermissionDeniedError: JSX.Element;
 };
 /** @private */
 export declare type CompositeIconProps<Icons> = IIconProps & {

package/dist/dist-esm/react-composites/src/composites/localization/locales/en-US/strings.json

@@ -40,6 +40,8 @@
         "deniedPermissionToRoomTitle": "Permission denied to room",
         "peopleButtonLabel": "People",
         "peoplePaneTitle": "People",
+        "peopleButtonTooltipOpen": "Show participants",
+        "peopleButtonTooltipClose": "Hide participants",
         "peoplePaneSubTitle": "In this call",
         "privacyPolicy": "Privacy policy",
         "rejoinCallButtonLabel": "Re-join call",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.3.3-alpha-202209220018.0",
+  "version": "1.3.3-alpha-202210070024.0",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -46,7 +46,7 @@
     "@azure/core-rest-pipeline": "~1.9.2"
   },
   "peerDependencies": {
-    "@azure/communication-calling": "1.6.1-beta.1 || 1.4.4",
+    "@azure/communication-calling": "1.8.0-beta.1 || 1.4.4",
     "@azure/communication-chat": "1.2.0",
     "@types/react": ">=16.8.0 <18.0.0",
     "@types/react-dom": ">=16.8.0 <18.0.0",
@@ -81,18 +81,18 @@
     "_by-flavor": "rushx _current-flavor && env-cmd -f ../../common/config/env/.env --use-shell"
   },
   "devDependencies": {
-    "@azure/communication-calling": "1.6.1-beta.1 || 1.4.4",
+    "@azure/communication-calling": "1.8.0-beta.1 || 1.4.4",
     "@azure/communication-chat": "1.2.0",
     "@azure/core-auth": "1.3.2",
     "@babel/cli": "~7.16.0",
     "@babel/core": "~7.16.0",
-    "@internal/calling-component-bindings": "1.3.3-alpha-202209220018.0",
-    "@internal/calling-stateful-client": "1.3.3-alpha-202209220018.0",
-    "@internal/chat-component-bindings": "1.3.3-alpha-202209220018.0",
-    "@internal/chat-stateful-client": "1.3.3-alpha-202209220018.0",
-    "@internal/fake-backends": "1.3.3-alpha-202209220018.0",
-    "@internal/react-components": "1.3.3-alpha-202209220018.0",
-    "@internal/react-composites": "1.3.3-alpha-202209220018.0",
+    "@internal/calling-component-bindings": "1.3.3-alpha-202210070024.0",
+    "@internal/calling-stateful-client": "1.3.3-alpha-202210070024.0",
+    "@internal/chat-component-bindings": "1.3.3-alpha-202210070024.0",
+    "@internal/chat-stateful-client": "1.3.3-alpha-202210070024.0",
+    "@internal/fake-backends": "1.3.3-alpha-202210070024.0",
+    "@internal/react-components": "1.3.3-alpha-202210070024.0",
+    "@internal/react-composites": "1.3.3-alpha-202210070024.0",
     "@microsoft/api-documenter": "~7.12.11",
     "@microsoft/api-extractor": "~7.18.0",
     "@rollup/plugin-json": "~4.1.0",