@azure/communication-react 1.5.1-alpha-202304290012 → 1.5.1-alpha-202305030013

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

@@ -11,6 +11,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 // Licensed under the MIT license.
 import React from 'react';
 /* @conditional-compile-remove(video-background-effects) */
+import { useState } from 'react';
+/* @conditional-compile-remove(video-background-effects) */
 import { useCallback, useMemo } from 'react';
 /* @conditional-compile-remove(video-background-effects) */
 import { MessageBar, MessageBarType, Panel, mergeStyles } from '@fluentui/react';
@@ -25,6 +27,8 @@ import { useSelector } from '../CallComposite/hooks/useSelector';
 /* @conditional-compile-remove(video-background-effects) */
 import { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';
 /* @conditional-compile-remove(video-background-effects) */
+import { videoBackgroundErrorsSelector } from '../CallComposite/selectors/videoBackgroundErrorsSelector';
+/* @conditional-compile-remove(video-background-effects) */
 import { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';
 /**
  * Pane that is used to show video effects button
@@ -118,6 +122,12 @@ export const VideoEffectsPane = (props) => {
     onEffectChange);
 };
 const VideoEffectsPaneTrampoline = (showVideoEffectsOptions, setshowVideoEffectsOptions, selectableVideoEffects, onEffectChange) => {
+    /* @conditional-compile-remove(video-background-effects) */
+    const [dismissedError, setDismissedError] = useState();
+    /* @conditional-compile-remove(video-background-effects) */
+    const latestEffectError = useSelector(videoBackgroundErrorsSelector);
+    /* @conditional-compile-remove(video-background-effects) */
+    const showError = latestEffectError && (!dismissedError || latestEffectError.timestamp > dismissedError.dismissedAt);
     /* @conditional-compile-remove(video-background-effects) */
     const locale = useLocale();
     /* @conditional-compile-remove(video-background-effects) */
@@ -132,8 +142,23 @@ const VideoEffectsPaneTrampoline = (showVideoEffectsOptions, setshowVideoEffects
     };
     /* @conditional-compile-remove(video-background-effects) */
     return (React.createElement(Panel, { headerText: locale.strings.call.effects, isOpen: showVideoEffectsOptions, onDismiss: () => setshowVideoEffectsOptions(false), hasCloseButton: true, closeButtonAriaLabel: "Close", isLightDismiss: true, className: mergeStyles(headerStyles) },
+        showError && latestEffectError && (React.createElement(MessageBar, { messageBarType: MessageBarType.error, onDismiss: () => setDismissedError(dismissError(latestEffectError)) }, locale.strings.call.unableToStartVideoEffect)),
         showWarning && (React.createElement(MessageBar, { messageBarType: MessageBarType.warning }, locale.strings.call.cameraOffBackgroundEffectWarningText)),
         selectableVideoEffects && (React.createElement(_VideoBackgroundEffectsPicker, { options: selectableVideoEffects, onChange: onEffectChange, selectedEffectKey: selectedEffect }))));
     return React.createElement(React.Fragment, null);
 };
+/* @conditional-compile-remove(video-background-effects) */
+/**
+ * @private
+ */
+export const dismissError = (toDismiss) => {
+    var _a;
+    const now = new Date(Date.now());
+    const toDismissTimestamp = (_a = toDismiss.timestamp) !== null && _a !== void 0 ? _a : now;
+    // Record that this error was dismissed for the first time right now.
+    return {
+        dismissedAt: now > toDismissTimestamp ? now : toDismissTimestamp,
+        activeSince: toDismiss.timestamp
+    };
+};
 //# sourceMappingURL=VideoEffectsPane.js.map

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.\nimport React from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { MessageBar, MessageBarType, Panel, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../localization';\nimport { _VideoEffectsItemProps } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport { _VideoBackgroundEffectsPicker } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport {\n  VideoBackgroundImage,\n  VideoBackgroundBlurEffect,\n  VideoBackgroundNoneEffect,\n  VideoBackgroundReplacementEffect\n} from '../CallComposite';\n/* @conditional-compile-remove(video-background-effects) */\nimport { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useSelector } from '../CallComposite/hooks/useSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\n/* @conditional-compile-remove(video-background-effects) */\nimport { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';\n\n/**\n * Pane that is used to show video effects button\n * @private\n */\n/** @beta */\nexport const VideoEffectsPane = (props: {\n  showVideoEffectsOptions: boolean;\n  setshowVideoEffectsOptions: (showVideoEffectsOptions: boolean) => void;\n}): JSX.Element => {\n  const { showVideoEffectsOptions, setshowVideoEffectsOptions } = props;\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n  /* @conditional-compile-remove(video-background-effects) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(video-background-effects) */\n  const strings = locale.strings.call;\n  /* @conditional-compile-remove(video-background-effects) */\n  const selectableVideoEffects: _VideoEffectsItemProps[] = useMemo(() => {\n    const videoEffects: _VideoEffectsItemProps[] = [\n      {\n        key: 'none',\n        iconProps: {\n          iconName: 'RemoveVideoBackgroundEffect'\n        },\n        title: strings.removeBackgroundEffectButtonLabel,\n        tooltipProps: {\n          content: strings.removeBackgroundTooltip\n        }\n      },\n      {\n        key: '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          key: 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  /* @conditional-compile-remove(video-background-effects) */\n  const onEffectChange = useCallback(\n    async (effectKey: string) => {\n      if (effectKey === 'blur') {\n        const blurEffect: VideoBackgroundBlurEffect = {\n          effectName: effectKey\n        };\n        adapter.updateSelectedVideoBackgroundEffect(blurEffect);\n        await adapter.blurVideoBackground();\n      } else if (effectKey === 'none') {\n        const noneEffect: VideoBackgroundNoneEffect = {\n          effectName: effectKey\n        };\n        adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n        await adapter.stopVideoBackgroundEffect();\n      } else {\n        const backgroundImg = selectableVideoEffects.find((effect) => {\n          return effect.key === effectKey;\n        });\n        if (backgroundImg && backgroundImg.backgroundProps) {\n          const replaceEffect: VideoBackgroundReplacementEffect = {\n            effectName: 'replacement',\n            effectKey,\n            backgroundImageUrl: backgroundImg.backgroundProps.url\n          };\n          adapter.updateSelectedVideoBackgroundEffect(replaceEffect);\n          await adapter.replaceVideoBackground({ backgroundImageUrl: backgroundImg.backgroundProps.url });\n        }\n      }\n    },\n    [adapter, selectableVideoEffects]\n  );\n  return VideoEffectsPaneTrampoline(\n    showVideoEffectsOptions,\n    setshowVideoEffectsOptions,\n    /* @conditional-compile-remove(video-background-effects) */\n    selectableVideoEffects,\n    /* @conditional-compile-remove(video-background-effects) */\n    onEffectChange\n  );\n};\n\nconst VideoEffectsPaneTrampoline = (\n  showVideoEffectsOptions: boolean,\n  setshowVideoEffectsOptions: (showVideoEffectsOptions: boolean) => void,\n  selectableVideoEffects?: _VideoEffectsItemProps[],\n  onEffectChange?: (effectKey: string) => Promise<void>\n): JSX.Element => {\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n  /* @conditional-compile-remove(video-background-effects) */\n  const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);\n  /* @conditional-compile-remove(video-background-effects) */\n  const isCameraOn = useSelector(localVideoSelector).isAvailable;\n  /* @conditional-compile-remove(video-background-effects) */\n  const showWarning = !isCameraOn && selectedEffect !== 'none';\n  /* @conditional-compile-remove(video-background-effects) */\n  const headerStyles = {\n    zIndex: 0\n  };\n\n  /* @conditional-compile-remove(video-background-effects) */\n  return (\n    <Panel\n      headerText={locale.strings.call.effects}\n      isOpen={showVideoEffectsOptions}\n      onDismiss={() => setshowVideoEffectsOptions(false)}\n      hasCloseButton={true}\n      closeButtonAriaLabel=\"Close\"\n      isLightDismiss={true}\n      className={mergeStyles(headerStyles)}\n    >\n      {showWarning && (\n        <MessageBar messageBarType={MessageBarType.warning}>\n          {locale.strings.call.cameraOffBackgroundEffectWarningText}\n        </MessageBar>\n      )}\n      {selectableVideoEffects && (\n        <_VideoBackgroundEffectsPicker\n          options={selectableVideoEffects}\n          onChange={onEffectChange}\n          selectedEffectKey={selectedEffect}\n        ></_VideoBackgroundEffectsPicker>\n      )}\n    </Panel>\n  );\n  return <></>;\n};\n\"../../../../react-components/src\""]}
+{"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.\nimport React from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useState } from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useCallback, useMemo } from 'react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { MessageBar, MessageBarType, Panel, mergeStyles } from '@fluentui/react';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useLocale } from '../localization';\nimport { _VideoEffectsItemProps } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport { _VideoBackgroundEffectsPicker } from '@internal/react-components';\n/* @conditional-compile-remove(video-background-effects) */\nimport {\n  VideoBackgroundImage,\n  VideoBackgroundBlurEffect,\n  VideoBackgroundNoneEffect,\n  VideoBackgroundReplacementEffect\n} from '../CallComposite';\n/* @conditional-compile-remove(video-background-effects) */\nimport { activeVideoBackgroundEffectSelector } from '../CallComposite/selectors/activeVideoBackgroundEffectSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useSelector } from '../CallComposite/hooks/useSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { useAdapter } from '../CallComposite/adapter/CallAdapterProvider';\n/* @conditional-compile-remove(video-background-effects) */\nimport { videoBackgroundErrorsSelector } from '../CallComposite/selectors/videoBackgroundErrorsSelector';\n/* @conditional-compile-remove(video-background-effects) */\nimport { AdapterError } from './adapters';\n/* @conditional-compile-remove(video-background-effects) */\nimport { localVideoSelector } from '../CallComposite/selectors/localVideoStreamSelector';\n/* @conditional-compile-remove(video-background-effects) */\n/**\n * @private\n */\ninterface DismissedError {\n  dismissedAt: Date;\n  activeSince?: Date;\n}\n\n/**\n * Pane that is used to show video effects button\n * @private\n */\n/** @beta */\nexport const VideoEffectsPane = (props: {\n  showVideoEffectsOptions: boolean;\n  setshowVideoEffectsOptions: (showVideoEffectsOptions: boolean) => void;\n}): JSX.Element => {\n  const { showVideoEffectsOptions, setshowVideoEffectsOptions } = props;\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n  /* @conditional-compile-remove(video-background-effects) */\n  const adapter = useAdapter();\n  /* @conditional-compile-remove(video-background-effects) */\n  const strings = locale.strings.call;\n  /* @conditional-compile-remove(video-background-effects) */\n  const selectableVideoEffects: _VideoEffectsItemProps[] = useMemo(() => {\n    const videoEffects: _VideoEffectsItemProps[] = [\n      {\n        key: 'none',\n        iconProps: {\n          iconName: 'RemoveVideoBackgroundEffect'\n        },\n        title: strings.removeBackgroundEffectButtonLabel,\n        tooltipProps: {\n          content: strings.removeBackgroundTooltip\n        }\n      },\n      {\n        key: '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          key: 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  /* @conditional-compile-remove(video-background-effects) */\n  const onEffectChange = useCallback(\n    async (effectKey: string) => {\n      if (effectKey === 'blur') {\n        const blurEffect: VideoBackgroundBlurEffect = {\n          effectName: effectKey\n        };\n        adapter.updateSelectedVideoBackgroundEffect(blurEffect);\n        await adapter.blurVideoBackground();\n      } else if (effectKey === 'none') {\n        const noneEffect: VideoBackgroundNoneEffect = {\n          effectName: effectKey\n        };\n        adapter.updateSelectedVideoBackgroundEffect(noneEffect);\n        await adapter.stopVideoBackgroundEffect();\n      } else {\n        const backgroundImg = selectableVideoEffects.find((effect) => {\n          return effect.key === effectKey;\n        });\n        if (backgroundImg && backgroundImg.backgroundProps) {\n          const replaceEffect: VideoBackgroundReplacementEffect = {\n            effectName: 'replacement',\n            effectKey,\n            backgroundImageUrl: backgroundImg.backgroundProps.url\n          };\n          adapter.updateSelectedVideoBackgroundEffect(replaceEffect);\n          await adapter.replaceVideoBackground({ backgroundImageUrl: backgroundImg.backgroundProps.url });\n        }\n      }\n    },\n    [adapter, selectableVideoEffects]\n  );\n  return VideoEffectsPaneTrampoline(\n    showVideoEffectsOptions,\n    setshowVideoEffectsOptions,\n    /* @conditional-compile-remove(video-background-effects) */\n    selectableVideoEffects,\n    /* @conditional-compile-remove(video-background-effects) */\n    onEffectChange\n  );\n};\n\nconst VideoEffectsPaneTrampoline = (\n  showVideoEffectsOptions: boolean,\n  setshowVideoEffectsOptions: (showVideoEffectsOptions: boolean) => void,\n  selectableVideoEffects?: _VideoEffectsItemProps[],\n  onEffectChange?: (effectKey: string) => Promise<void>\n): JSX.Element => {\n  /* @conditional-compile-remove(video-background-effects) */\n  const [dismissedError, setDismissedError] = useState<DismissedError>();\n  /* @conditional-compile-remove(video-background-effects) */\n  const latestEffectError = useSelector(videoBackgroundErrorsSelector);\n  /* @conditional-compile-remove(video-background-effects) */\n  const showError = latestEffectError && (!dismissedError || latestEffectError.timestamp > dismissedError.dismissedAt);\n  /* @conditional-compile-remove(video-background-effects) */\n  const locale = useLocale();\n  /* @conditional-compile-remove(video-background-effects) */\n  const selectedEffect = useSelector(activeVideoBackgroundEffectSelector);\n  /* @conditional-compile-remove(video-background-effects) */\n  const isCameraOn = useSelector(localVideoSelector).isAvailable;\n  /* @conditional-compile-remove(video-background-effects) */\n  const showWarning = !isCameraOn && selectedEffect !== 'none';\n  /* @conditional-compile-remove(video-background-effects) */\n  const headerStyles = {\n    zIndex: 0\n  };\n\n  /* @conditional-compile-remove(video-background-effects) */\n  return (\n    <Panel\n      headerText={locale.strings.call.effects}\n      isOpen={showVideoEffectsOptions}\n      onDismiss={() => setshowVideoEffectsOptions(false)}\n      hasCloseButton={true}\n      closeButtonAriaLabel=\"Close\"\n      isLightDismiss={true}\n      className={mergeStyles(headerStyles)}\n    >\n      {showError && latestEffectError && (\n        <MessageBar\n          messageBarType={MessageBarType.error}\n          onDismiss={() => setDismissedError(dismissError(latestEffectError))}\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      {selectableVideoEffects && (\n        <_VideoBackgroundEffectsPicker\n          options={selectableVideoEffects}\n          onChange={onEffectChange}\n          selectedEffectKey={selectedEffect}\n        ></_VideoBackgroundEffectsPicker>\n      )}\n    </Panel>\n  );\n  return <></>;\n};\n\n/* @conditional-compile-remove(video-background-effects) */\n/**\n * @private\n */\nexport const dismissError = (toDismiss: AdapterError): DismissedError => {\n  const now = new Date(Date.now());\n  const toDismissTimestamp = toDismiss.timestamp ?? now;\n\n  // Record that this error was dismissed for the first time right now.\n  return {\n    dismissedAt: now > toDismissTimestamp ? now : toDismissTimestamp,\n    activeSince: toDismiss.timestamp\n  };\n};\n\"../../../../react-components/src\""]}

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

@@ -24,6 +24,7 @@
         "defaultPlaceHolder": "Select an option",
         "dismissSidePaneButtonLabel": "Close",
         "effects": "Effects",
+        "unableToStartVideoEffect": "Unable to apply video effect.",
         "blurBackgroundEffectButtonLabel": "Blur",
         "blurBackgroundTooltip": "Blur Background",
         "removeBackgroundEffectButtonLabel": "None",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@azure/communication-react",
-  "version": "1.5.1-alpha-202304290012",
+  "version": "1.5.1-alpha-202305030013",
   "sideEffects": false,
   "description": "React library for building modern communication user experiences utilizing Azure Communication Services",
   "keywords": [
@@ -89,13 +89,13 @@
     "@azure/core-auth": "1.3.2",
     "@babel/cli": "~7.16.0",
     "@babel/core": "~7.16.0",
-    "@internal/calling-component-bindings": "1.5.1-alpha-202304290012",
-    "@internal/calling-stateful-client": "1.5.1-alpha-202304290012",
-    "@internal/chat-component-bindings": "1.5.1-alpha-202304290012",
-    "@internal/chat-stateful-client": "1.5.1-alpha-202304290012",
-    "@internal/fake-backends": "1.5.1-alpha-202304290012",
-    "@internal/react-components": "1.5.1-alpha-202304290012",
-    "@internal/react-composites": "1.5.1-alpha-202304290012",
+    "@internal/calling-component-bindings": "1.5.1-alpha-202305030013",
+    "@internal/calling-stateful-client": "1.5.1-alpha-202305030013",
+    "@internal/chat-component-bindings": "1.5.1-alpha-202305030013",
+    "@internal/chat-stateful-client": "1.5.1-alpha-202305030013",
+    "@internal/fake-backends": "1.5.1-alpha-202305030013",
+    "@internal/react-components": "1.5.1-alpha-202305030013",
+    "@internal/react-composites": "1.5.1-alpha-202305030013",
     "@microsoft/api-documenter": "~7.12.11",
     "@microsoft/api-extractor": "~7.18.0",
     "@rollup/plugin-json": "~4.1.0",