@azure/communication-react 1.18.0-alpha-202406250013 → 1.18.0-alpha-202406270014

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

@@ -1 +1 @@
-{"version":3,"file":"VideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/VideoEffectsPane.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright (c) Microsoft Corporation.\n// Licensed under the MIT License.\n\nimport React from 'react';\n\n/* @conditional-compile-remove(notifications) */\nimport { useState } from 'react';\n\nimport { useCallback, useMemo } from 'react';\n\nimport { MessageBar, MessageBarType, Stack, mergeStyles } from '@fluentui/react';\n\nimport { useLocale } from '../localization';\nimport { ActiveErrorMessage, _VideoEffectsItemProps } from '@internal/react-components';\n\nimport { _VideoBackgroundEffectsPicker } from '@internal/react-components';\n\nimport {\n  VideoBackgroundImage,\n  VideoBackgroundBlurEffect,\n  VideoBackgroundNoEffect,\n  VideoBackgroundReplacementEffect\n} from '../CallComposite';\n\nimport { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';\n\nimport { useSelector } from '../CallComposite/hooks/useSelector';\n\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\n\nimport { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';\nimport { ActiveVideoEffect } from '../CallComposite/components/SidePane/useVideoEffectsPane';\n/* @conditional-compile-remove(notifications) */\nimport { ActiveNotification, NotificationBar, NotificationBarStrings } from '@internal/react-components';\n\n/**\n * Pane that is used to show video effects button\n * @private\n */\n/** @beta */\nexport const VideoEffectsPaneContent = (props: {\n  activeVideoEffectError?: ActiveErrorMessage | /* @conditional-compile-remove(notifications) */ ActiveNotification;\n  onDismissError: (\n    error: ActiveErrorMessage | /* @conditional-compile-remove(notifications) */ ActiveNotification\n  ) => void;\n  activeVideoEffectChange: (effect: ActiveVideoEffect) => void;\n  updateFocusHandle: React.RefObject<{\n    focus: () => void;\n  }>;\n}): JSX.Element => {\n  const { onDismissError, activeVideoEffectError, activeVideoEffectChange } = props;\n\n  const locale = useLocale();\n\n  const adapter = useAdapter();\n\n  const strings = locale.strings.call;\n\n  const activeVideoEffects = useSelector(localVideoSelector).activeVideoEffects?.activeEffects;\n\n  const selectableVideoEffects: _VideoEffectsItemProps[] = useMemo(() => {\n    const videoEffects: _VideoEffectsItemProps[] = [\n      {\n        itemKey: 'none',\n        iconProps: {\n          iconName: 'RemoveVideoBackgroundEffect'\n        },\n        title: strings.removeBackgroundEffectButtonLabel,\n        tooltipProps: {\n          content: strings.removeBackgroundTooltip\n        }\n      },\n      {\n        itemKey: 'blur',\n        iconProps: {\n          iconName: 'BlurVideoBackground'\n        },\n        title: strings.blurBackgroundEffectButtonLabel,\n        tooltipProps: {\n          content: strings.blurBackgroundTooltip\n        }\n      }\n    ];\n    const videoEffectImages = adapter.getState().videoBackgroundImages;\n\n    if (videoEffectImages) {\n      videoEffectImages.forEach((img: VideoBackgroundImage) => {\n        videoEffects.push({\n          itemKey: img.key,\n          backgroundProps: {\n            url: img.url\n          },\n          tooltipProps: {\n            content: img.tooltipText ?? ''\n          }\n        });\n      });\n    }\n    return videoEffects;\n  }, [strings, adapter]);\n\n  const onEffectChange = useCallback(\n    async (effectKey: string) => {\n      if (effectKey === 'blur') {\n        const blurEffect: VideoBackgroundBlurEffect = {\n          effectName: effectKey\n        };\n        activeVideoEffectChange({\n          type: 'blur',\n          timestamp: new Date(Date.now())\n        });\n        await adapter.startVideoBackgroundEffect(blurEffect);\n        adapter.updateSelectedVideoBackgroundEffect(blurEffect);\n      } else if (effectKey === 'none') {\n        const noneEffect: VideoBackgroundNoEffect = {\n          effectName: effectKey\n        };\n        await adapter.stopVideoBackgroundEffects();\n        adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n      } else {\n        const backgroundImg = selectableVideoEffects.find((effect) => {\n          return effect.itemKey === effectKey;\n        });\n        if (backgroundImg && backgroundImg.backgroundProps) {\n          const replaceEffect: VideoBackgroundReplacementEffect = {\n            effectName: 'replacement',\n            key: effectKey,\n            backgroundImageUrl: backgroundImg.backgroundProps.url\n          };\n          activeVideoEffectChange({\n            type: 'replacement',\n            timestamp: new Date(Date.now())\n          });\n          await adapter.startVideoBackgroundEffect(replaceEffect);\n          adapter.updateSelectedVideoBackgroundEffect(replaceEffect);\n        }\n      }\n    },\n    [adapter, activeVideoEffectChange, selectableVideoEffects]\n  );\n\n  if (activeVideoEffectError && activeVideoEffects && activeVideoEffects.length === 0) {\n    const noneEffect: VideoBackgroundNoEffect = {\n      effectName: 'none'\n    };\n    adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n  }\n\n  return VideoEffectsPaneTrampoline(\n    onDismissError,\n    props.updateFocusHandle,\n    activeVideoEffectError,\n    selectableVideoEffects,\n    onEffectChange\n  );\n};\n\nconst VideoEffectsPaneTrampoline = (\n  onDismissError: (\n    error: ActiveErrorMessage | /* @conditional-compile-remove(notifications) */ ActiveNotification\n  ) => void,\n  updateFocusHandle: React.RefObject<{\n    focus: () => void;\n  }>,\n  activeVideoEffectError?: ActiveErrorMessage | /* @conditional-compile-remove(notifications) */ ActiveNotification,\n  selectableVideoEffects?: _VideoEffectsItemProps[],\n  onEffectChange?: (effectKey: string) => Promise<void>\n): JSX.Element => {\n  const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);\n\n  const isCameraOn = useSelector(localVideoSelector).isAvailable;\n\n  const showWarning = !isCameraOn && selectedEffect !== 'none';\n\n  const locale = useLocale();\n  /* @conditional-compile-remove(notifications) */\n  const videoEffectErrorStrings: NotificationBarStrings = {\n    title: locale.strings.call.unableToStartVideoEffect ?? '',\n    closeButtonAriaLabel: locale.strings.call.close\n  };\n  /* @conditional-compile-remove(notifications) */\n  const warningStrings: NotificationBarStrings = {\n    title: locale.strings.call.cameraOffBackgroundEffectWarningText ?? '',\n    closeButtonAriaLabel: locale.strings.call.close\n  };\n\n  /* @conditional-compile-remove(notifications) */\n  const [errorNotificationDismissed, setErrorNotificationDismissed] = useState(false);\n  /* @conditional-compile-remove(notifications) */\n  const [warningNotificationDismissed, setWarningNotificationDismissed] = useState(false);\n\n  const videoEffectErrorTrampoline = (): JSX.Element => {\n    /* @conditional-compile-remove(notifications) */\n    return (\n      <>\n        {activeVideoEffectError && isCameraOn && !errorNotificationDismissed && (\n          <NotificationBar\n            onDismiss={() => {\n              if (activeVideoEffectError) {\n                onDismissError(activeVideoEffectError);\n              }\n              setErrorNotificationDismissed(true);\n            }}\n            notificationBarStrings={videoEffectErrorStrings}\n          />\n        )}\n        {showWarning && !warningNotificationDismissed && (\n          <NotificationBar\n            onDismiss={() => {\n              setWarningNotificationDismissed(true);\n            }}\n            notificationBarStrings={warningStrings}\n          />\n        )}\n      </>\n    );\n\n    return (\n      <>\n        {activeVideoEffectError && isCameraOn && (\n          <MessageBar\n            messageBarType={MessageBarType.error}\n            onDismiss={() => {\n              if (activeVideoEffectError) {\n                onDismissError(activeVideoEffectError);\n              }\n            }}\n          >\n            {locale.strings.call.unableToStartVideoEffect}\n          </MessageBar>\n        )}\n        {showWarning && (\n          <MessageBar messageBarType={MessageBarType.warning}>\n            {locale.strings.call.cameraOffBackgroundEffectWarningText}\n          </MessageBar>\n        )}\n      </>\n    );\n  };\n\n  return (\n    <Stack tokens={{ childrenGap: '0.75rem' }} className={mergeStyles({ paddingLeft: '0.5rem' })}>\n      {videoEffectErrorTrampoline()}\n      <_VideoBackgroundEffectsPicker\n        label={locale.strings.call.videoEffectsPaneBackgroundSelectionTitle}\n        styles={backgroundPickerStyles}\n        options={selectableVideoEffects ?? []}\n        onChange={onEffectChange}\n        selectedEffectKey={selectedEffect}\n        componentRef={updateFocusHandle}\n      />\n    </Stack>\n  );\n  return <></>;\n};\n\nconst backgroundPickerStyles = {\n  label: {\n    fontSize: '0.75rem',\n    lineHeight: '0.5rem',\n    fontWeight: '400'\n  }\n};\n"]}
+{"version":3,"file":"VideoEffectsPane.js","sourceRoot":"","sources":["../../../../../../../react-composites/src/composites/common/VideoEffectsPane.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 { useCallback, useMemo } from 'react';\n\nimport { MessageBar, MessageBarType, Stack, mergeStyles } from '@fluentui/react';\n\nimport { useLocale } from '../localization';\nimport { ActiveErrorMessage, _VideoEffectsItemProps } from '@internal/react-components';\n\nimport { _VideoBackgroundEffectsPicker } from '@internal/react-components';\n\nimport {\n  VideoBackgroundImage,\n  VideoBackgroundBlurEffect,\n  VideoBackgroundNoEffect,\n  VideoBackgroundReplacementEffect\n} from '../CallComposite';\n\nimport { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';\n\nimport { useSelector } from '../CallComposite/hooks/useSelector';\n\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\n\nimport { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';\nimport { ActiveVideoEffect } from '../CallComposite/components/SidePane/useVideoEffectsPane';\n\n/**\n * Pane that is used to show video effects button\n * @private\n */\n/** @beta */\nexport const VideoEffectsPaneContent = (props: {\n  activeVideoEffectError?: ActiveErrorMessage;\n  onDismissError: (error: ActiveErrorMessage) => void;\n  activeVideoEffectChange: (effect: ActiveVideoEffect) => void;\n  updateFocusHandle: React.RefObject<{\n    focus: () => void;\n  }>;\n}): JSX.Element => {\n  const { onDismissError, activeVideoEffectError, activeVideoEffectChange } = props;\n\n  const locale = useLocale();\n\n  const adapter = useAdapter();\n\n  const strings = locale.strings.call;\n\n  const activeVideoEffects = useSelector(localVideoSelector).activeVideoEffects?.activeEffects;\n\n  const selectableVideoEffects: _VideoEffectsItemProps[] = useMemo(() => {\n    const videoEffects: _VideoEffectsItemProps[] = [\n      {\n        itemKey: 'none',\n        iconProps: {\n          iconName: 'RemoveVideoBackgroundEffect'\n        },\n        title: strings.removeBackgroundEffectButtonLabel,\n        tooltipProps: {\n          content: strings.removeBackgroundTooltip\n        }\n      },\n      {\n        itemKey: 'blur',\n        iconProps: {\n          iconName: 'BlurVideoBackground'\n        },\n        title: strings.blurBackgroundEffectButtonLabel,\n        tooltipProps: {\n          content: strings.blurBackgroundTooltip\n        }\n      }\n    ];\n    const videoEffectImages = adapter.getState().videoBackgroundImages;\n\n    if (videoEffectImages) {\n      videoEffectImages.forEach((img: VideoBackgroundImage) => {\n        videoEffects.push({\n          itemKey: img.key,\n          backgroundProps: {\n            url: img.url\n          },\n          tooltipProps: {\n            content: img.tooltipText ?? ''\n          }\n        });\n      });\n    }\n    return videoEffects;\n  }, [strings, adapter]);\n\n  const onEffectChange = useCallback(\n    async (effectKey: string) => {\n      if (effectKey === 'blur') {\n        const blurEffect: VideoBackgroundBlurEffect = {\n          effectName: effectKey\n        };\n        activeVideoEffectChange({\n          type: 'blur',\n          timestamp: new Date(Date.now())\n        });\n        await adapter.startVideoBackgroundEffect(blurEffect);\n        adapter.updateSelectedVideoBackgroundEffect(blurEffect);\n      } else if (effectKey === 'none') {\n        const noneEffect: VideoBackgroundNoEffect = {\n          effectName: effectKey\n        };\n        await adapter.stopVideoBackgroundEffects();\n        adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n      } else {\n        const backgroundImg = selectableVideoEffects.find((effect) => {\n          return effect.itemKey === effectKey;\n        });\n        if (backgroundImg && backgroundImg.backgroundProps) {\n          const replaceEffect: VideoBackgroundReplacementEffect = {\n            effectName: 'replacement',\n            key: effectKey,\n            backgroundImageUrl: backgroundImg.backgroundProps.url\n          };\n          activeVideoEffectChange({\n            type: 'replacement',\n            timestamp: new Date(Date.now())\n          });\n          await adapter.startVideoBackgroundEffect(replaceEffect);\n          adapter.updateSelectedVideoBackgroundEffect(replaceEffect);\n        }\n      }\n    },\n    [adapter, activeVideoEffectChange, selectableVideoEffects]\n  );\n\n  if (activeVideoEffectError && activeVideoEffects && activeVideoEffects.length === 0) {\n    const noneEffect: VideoBackgroundNoEffect = {\n      effectName: 'none'\n    };\n    adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n  }\n\n  return VideoEffectsPaneTrampoline(\n    onDismissError,\n    props.updateFocusHandle,\n    activeVideoEffectError,\n    selectableVideoEffects,\n    onEffectChange\n  );\n};\n\nconst VideoEffectsPaneTrampoline = (\n  onDismissError: (error: ActiveErrorMessage) => void,\n  updateFocusHandle: React.RefObject<{\n    focus: () => void;\n  }>,\n  activeVideoEffectError?: ActiveErrorMessage,\n  selectableVideoEffects?: _VideoEffectsItemProps[],\n  onEffectChange?: (effectKey: string) => Promise<void>\n): JSX.Element => {\n  const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);\n\n  const isCameraOn = useSelector(localVideoSelector).isAvailable;\n\n  const showWarning = !isCameraOn && selectedEffect !== 'none';\n\n  const locale = useLocale();\n\n  return (\n    <Stack tokens={{ childrenGap: '0.75rem' }} className={mergeStyles({ paddingLeft: '0.5rem' })}>\n      {activeVideoEffectError && isCameraOn && (\n        <MessageBar messageBarType={MessageBarType.error} onDismiss={() => onDismissError(activeVideoEffectError)}>\n          {locale.strings.call.unableToStartVideoEffect}\n        </MessageBar>\n      )}\n      {showWarning && (\n        <MessageBar messageBarType={MessageBarType.warning}>\n          {locale.strings.call.cameraOffBackgroundEffectWarningText}\n        </MessageBar>\n      )}\n      <_VideoBackgroundEffectsPicker\n        label={locale.strings.call.videoEffectsPaneBackgroundSelectionTitle}\n        styles={backgroundPickerStyles}\n        options={selectableVideoEffects ?? []}\n        onChange={onEffectChange}\n        selectedEffectKey={selectedEffect}\n        componentRef={updateFocusHandle}\n      />\n    </Stack>\n  );\n  return <></>;\n};\n\nconst backgroundPickerStyles = {\n  label: {\n    fontSize: '0.75rem',\n    lineHeight: '0.5rem',\n    fontWeight: '400'\n  }\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.18.0-alpha-202406250013",
+  "version": "1.18.0-alpha-202406270014",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -28,18 +28,18 @@
     "@azure/logger": "^1.0.4",
     "@fluentui/react-components": "^9.47.3",
     "@fluentui/react": "^8.117.1",
-    "@fluentui/react-file-type-icons": "8.11.9",
+    "@fluentui/react-file-type-icons": "8.11.16",
     "@fluentui/react-hooks": "^8.7.0",
-    "@fluentui/react-icons": "^2.0.239",
-    "@fluentui/react-window-provider": "^2.2.21",
+    "@fluentui/react-icons": "^2.0.245",
+    "@fluentui/react-window-provider": "^2.2.27",
     "@fluentui-contrib/react-chat": "0.1.9",
-    "@griffel/react": "^1.5.22",
+    "@griffel/react": "^1.5.23",
     "copy-to-clipboard": "^3.3.1",
     "dompurify": "^3.1.5",
     "events": "^3.3.0",
     "html-react-parser": "^5.1.10",
     "immer": "10.1.1",
-    "libphonenumber-js": "^1.11.3",
+    "libphonenumber-js": "^1.11.4",
     "memoize-one": "^5.2.1",
     "nanoid": "3.3.6",
     "react-linkify": "^1.0.0-alpha",
@@ -57,7 +57,7 @@
   "peerDependencies": {
     "@azure/communication-calling": "1.26.1-beta.1",
     "@azure/communication-calling-effects": "1.0.1",
-    "@azure/communication-chat": "1.6.0-beta.2",
+    "@azure/communication-chat": "1.6.0-beta.3",
     "@types/react": ">=16.8.0 <19.0.0",
     "@types/react-dom": ">=16.8.0 <19.0.0",
     "react": ">=16.8.0 <19.0.0",