[Component and Story] Add background picker component

change-beta/@azure-communication-react-45991606-a062-47ab-9913-6f57304c112e.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add Video background effects picker component",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change-beta/@azure-communication-react-f44e919c-b4e1-4c2b-869b-3ae551c8c662.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add video background effect choice items for upcoming background picker",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-45991606-a062-47ab-9913-6f57304c112e.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add Video background effects picker component",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-f44e919c-b4e1-4c2b-869b-3ae551c8c662.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add video background effect choice items for upcoming background picker",
+  "packageName": "@azure/communication-react",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/review/beta/react-components.api.md

@@ -25,6 +25,7 @@ import { IRenderFunction } from '@fluentui/react';
 import { IStyle } from '@fluentui/react';
 import { IStyleFunctionOrObject } from '@fluentui/react';
 import { ITextFieldStyles } from '@fluentui/react';
+import { ITooltipHostProps } from '@fluentui/react';
 import { MessageStatus } from '@internal/acs-ui-common';
 import { PartialTheme } from '@fluentui/react';
 import { PersonaPresence } from '@fluentui/react';
@@ -1652,6 +1653,65 @@ export const _usePermissions: () => _Permissions;
 // @public
 export const useTheme: () => Theme;
 
+// @internal
+export type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;
+
+// @internal
+export const _VideoBackgroundEffectsPicker: (props: _VideoBackgroundEffectsPickerProps) => JSX.Element;
+
+// @internal
+export interface _VideoBackgroundEffectsPickerProps {
+    itemsPerRow?: 'wrap' | number;
+    label?: string;
+    onChange?: (effectKey: string) => void;
+    options: _VideoBackgroundEffectChoiceOption[];
+    selectedEffectKey?: string;
+    styles?: _VideoBackgroundEffectsPickerStyles;
+}
+
+// @internal
+export interface _VideoBackgroundEffectsPickerStyles {
+    label?: IStyle;
+    root?: IStyle;
+    rowRoot?: IStyle;
+}
+
+// @internal
+export const _VideoEffectsItem: (props: _VideoEffectsItemProps) => JSX.Element;
+
+// @internal
+export const _VideoEffectsItemAddImage: (props: _VideoEffectsItemProps) => JSX.Element;
+
+// @internal
+export const _VideoEffectsItemBlur: (props: _VideoEffectsItemProps) => JSX.Element;
+
+// @internal
+export const _VideoEffectsItemNone: (props: _VideoEffectsItemProps) => JSX.Element;
+
+// @internal
+export interface _VideoEffectsItemProps {
+    backgroundProps?: {
+        url: string;
+        position?: string;
+        size?: string;
+    };
+    disabled?: boolean;
+    iconProps?: IIconProps;
+    isSelected?: boolean;
+    key: string;
+    onSelect?: (key: string) => void;
+    styles?: _VideoEffectsItemStyles;
+    title?: string;
+    tooltipProps?: ITooltipHostProps;
+}
+
+// @internal
+export interface _VideoEffectsItemStyles {
+    iconContainer: IStyle;
+    root: IStyle;
+    textContainer: IStyle;
+}
+
 // @public
 export const VideoGallery: (props: VideoGalleryProps) => JSX.Element;
 

packages/react-components/review/stable/react-components.api.md

@@ -23,6 +23,7 @@ import { IRenderFunction } from '@fluentui/react';
 import { IStyle } from '@fluentui/react';
 import { IStyleFunctionOrObject } from '@fluentui/react';
 import { ITextFieldStyles } from '@fluentui/react';
+import { ITooltipHostProps } from '@fluentui/react';
 import { MessageStatus } from '@internal/acs-ui-common';
 import { PartialTheme } from '@fluentui/react';
 import { PersonaPresence } from '@fluentui/react';
@@ -1398,6 +1399,65 @@ export const _useContainerWidth: (containerRef: RefObject<HTMLElement>) => numbe
 // @public
 export const useTheme: () => Theme;
 
+// @internal
+export type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;
+
+// @internal
+export const _VideoBackgroundEffectsPicker: (props: _VideoBackgroundEffectsPickerProps) => JSX.Element;
+
+// @internal
+export interface _VideoBackgroundEffectsPickerProps {
+    itemsPerRow?: 'wrap' | number;
+    label?: string;
+    onChange?: (effectKey: string) => void;
+    options: _VideoBackgroundEffectChoiceOption[];
+    selectedEffectKey?: string;
+    styles?: _VideoBackgroundEffectsPickerStyles;
+}
+
+// @internal
+export interface _VideoBackgroundEffectsPickerStyles {
+    label?: IStyle;
+    root?: IStyle;
+    rowRoot?: IStyle;
+}
+
+// @internal
+export const _VideoEffectsItem: (props: _VideoEffectsItemProps) => JSX.Element;
+
+// @internal
+export const _VideoEffectsItemAddImage: (props: _VideoEffectsItemProps) => JSX.Element;
+
+// @internal
+export const _VideoEffectsItemBlur: (props: _VideoEffectsItemProps) => JSX.Element;
+
+// @internal
+export const _VideoEffectsItemNone: (props: _VideoEffectsItemProps) => JSX.Element;
+
+// @internal
+export interface _VideoEffectsItemProps {
+    backgroundProps?: {
+        url: string;
+        position?: string;
+        size?: string;
+    };
+    disabled?: boolean;
+    iconProps?: IIconProps;
+    isSelected?: boolean;
+    key: string;
+    onSelect?: (key: string) => void;
+    styles?: _VideoEffectsItemStyles;
+    title?: string;
+    tooltipProps?: ITooltipHostProps;
+}
+
+// @internal
+export interface _VideoEffectsItemStyles {
+    iconContainer: IStyle;
+    root: IStyle;
+    textContainer: IStyle;
+}
+
 // @public
 export const VideoGallery: (props: VideoGalleryProps) => JSX.Element;
 

packages/react-components/src/components/VideoEffects/PresetVideoEffectsItems.tsx

@@ -0,0 +1,56 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import React from 'react';
+import { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';
+
+/**
+ * 'None' Video Effects Item.
+ *
+ * @internal
+ */
+export const _VideoEffectsItemNone = (props: _VideoEffectsItemProps): JSX.Element => {
+  const iconProps = props.iconProps ?? {
+    iconName: 'VideoEffectsNone'
+  };
+  const title = props.title ?? 'None';
+  const tooltipProps = props.tooltipProps ?? {
+    content: props.title ?? 'Remove Background'
+  };
+
+  return <_VideoEffectsItem {...props} iconProps={iconProps} title={title} tooltipProps={tooltipProps} />;
+};
+
+/**
+ * 'Blur' Video Effects Item.
+ *
+ * @internal
+ */
+export const _VideoEffectsItemBlur = (props: _VideoEffectsItemProps): JSX.Element => {
+  const iconProps = props.iconProps ?? {
+    iconName: 'VideoEffectsBlur'
+  };
+  const title = props.title ?? 'Blurred';
+  const tooltipProps = props.tooltipProps ?? {
+    content: props.title ?? 'Blur Background'
+  };
+
+  return <_VideoEffectsItem {...props} iconProps={iconProps} title={title} tooltipProps={tooltipProps} />;
+};
+
+/**
+ * 'Add Image' Video Effects Item.
+ *
+ * @internal
+ */
+export const _VideoEffectsItemAddImage = (props: _VideoEffectsItemProps): JSX.Element => {
+  const iconProps = props.iconProps ?? {
+    iconName: 'VideoEffectsAddImage'
+  };
+  const title = props.title ?? 'Image';
+  const tooltipProps = props.tooltipProps ?? {
+    content: props.title ?? 'Upload Background Image'
+  };
+
+  return <_VideoEffectsItem {...props} iconProps={iconProps} title={title} tooltipProps={tooltipProps} />;
+};

packages/react-components/src/components/VideoEffects/VideoBackgroundEffectsPicker.tsx

@@ -0,0 +1,121 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { IStyle, Label, mergeStyles, Stack } from '@fluentui/react';
+import React from 'react';
+import { chunk } from '../utils';
+import { _VideoEffectsItem, _VideoEffectsItemProps } from './VideoEffectsItem';
+
+/**
+ * Props for {@link _VideoBackgroundEffectsPicker}
+ * @internal
+ */
+export interface _VideoBackgroundEffectsPickerProps {
+  /**
+   * The options to display in the picker.
+   */
+  options: _VideoBackgroundEffectChoiceOption[];
+
+  /**
+   * The key of the current selected Video Background Effect.
+   * If you provide this, you must maintain selection state by observing onChange events and passing a new value in when changed.
+   */
+  selectedEffectKey?: string;
+
+  /**
+   * Callback to invoke when a Video Background Effect is selected.
+   * @param effectKey - The key of the Video Background Effect that was selected.
+   */
+  onChange?: (effectKey: string) => void;
+
+  /**
+   * The label to display for the picker.
+   */
+  label?: string;
+
+  /**
+   * The number of items to display per row.
+   * @default 3
+   */
+  itemsPerRow?: 'wrap' | number;
+
+  /**
+   * Styles for the picker.
+   */
+  styles?: _VideoBackgroundEffectsPickerStyles;
+}
+
+/**
+ * Option for the {@link _VideoBackgroundEffectsPicker}.
+ * @internal
+ */
+export type _VideoBackgroundEffectChoiceOption = _VideoEffectsItemProps;
+
+/**
+ * Styles for the {@link _VideoBackgroundEffectsPicker}.
+ * @internal
+ */
+export interface _VideoBackgroundEffectsPickerStyles {
+  /**
+   * Styles for the root element.
+   */
+  root?: IStyle;
+
+  /**
+   * Styles for the label.
+   */
+  label?: IStyle;
+
+  /**
+   * Styles for the root of each row element.
+   */
+  rowRoot?: IStyle;
+}
+
+/**
+ * Picker for choosing a Video Background Effect.
+ *
+ * @remarks
+ * This functions similar to a radio group of buttons, where the user can select one of the options.
+ *
+ * @internal
+ */
+export const _VideoBackgroundEffectsPicker = (props: _VideoBackgroundEffectsPickerProps): JSX.Element => {
+  const [componentControlledSelectedEffectKey, setComponentControlledSelectedEffectKey] = React.useState<
+    string | undefined
+  >(props.selectedEffectKey);
+
+  const selectedEffect = props.selectedEffectKey ?? componentControlledSelectedEffectKey;
+  const setSelectedEffect = (selectedEffectKey: string): void => {
+    setComponentControlledSelectedEffectKey(selectedEffectKey);
+    props.onChange?.(selectedEffectKey);
+  };
+
+  const convertedOptions: _VideoEffectsItemProps[] = props.options.map((option) => ({
+    isSelected: option.key === selectedEffect,
+    onSelect: () => setSelectedEffect(option.key),
+    ...option
+  }));
+
+  const optionsByRow =
+    props.itemsPerRow === 'wrap' ? [convertedOptions] : chunk(convertedOptions, props.itemsPerRow ?? 3);
+
+  return (
+    <Stack tokens={{ childrenGap: '0.5rem' }}>
+      <Label className={mergeStyles(props.styles?.label)}>{props.label}</Label>
+      {optionsByRow.map((options, rowIndex) => (
+        <Stack
+          className={mergeStyles(props.styles?.rowRoot)}
+          wrap={props.itemsPerRow === 'wrap'}
+          horizontal
+          key={rowIndex}
+          tokens={{ childrenGap: '0.5rem' }}
+        >
+          {options.map((option) => (
+            <_VideoEffectsItem {...option} key={option.key} />
+          ))}
+        </Stack>
+      ))}
+    </Stack>
+  );
+};