[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,67 @@ 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 {
+    defaultSelectedEffectKey?: string;
+    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 _VideoEffectsItemNoBackground: (props: _VideoEffectsItemProps) => JSX.Element;
+
+// @internal
+export interface _VideoEffectsItemProps {
+    ariaLabel?: string;
+    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,67 @@ 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 {
+    defaultSelectedEffectKey?: string;
+    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 _VideoEffectsItemNoBackground: (props: _VideoEffectsItemProps) => JSX.Element;
+
+// @internal
+export interface _VideoEffectsItemProps {
+    ariaLabel?: string;
+    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,84 @@
+// 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 _VideoEffectsItemNoBackground = (props: _VideoEffectsItemProps): JSX.Element => {
+  const derivedProps = deriveProps(props, {
+    iconName: 'VideoEffectsNone',
+    title: 'None',
+    tooltipContent: 'Remove Background',
+    ariaLabel: 'Remove Background'
+  });
+
+  return <_VideoEffectsItem {...derivedProps} />;
+};
+
+/**
+ * 'Blur' Video Effects Item.
+ *
+ * @internal
+ */
+export const _VideoEffectsItemBlur = (props: _VideoEffectsItemProps): JSX.Element => {
+  const derivedProps = deriveProps(props, {
+    iconName: 'VideoEffectsBlur',
+    title: 'Blurred',
+    tooltipContent: 'Blur Background',
+    ariaLabel: 'Blur Background'
+  });
+
+  return <_VideoEffectsItem {...derivedProps} />;
+};
+
+/**
+ * 'Add Image' Video Effects Item.
+ *
+ * @internal
+ */
+export const _VideoEffectsItemAddImage = (props: _VideoEffectsItemProps): JSX.Element => {
+  const derivedProps = deriveProps(props, {
+    iconName: 'VideoEffectsAddImage',
+    title: 'Image',
+    tooltipContent: 'Upload Background Image',
+    ariaLabel: 'Upload Background Image'
+  });
+
+  return <_VideoEffectsItem {...derivedProps} />;
+};
+
+/** Applies fallbacks if props were not specified */
+const deriveProps = (
+  props: _VideoEffectsItemProps,
+  fallbacks: {
+    iconName: string;
+    title: string;
+    tooltipContent: string;
+    ariaLabel: string;
+  }
+): _VideoEffectsItemProps => {
+  const iconProps = props.iconProps ?? {
+    iconName: fallbacks.iconName
+  };
+  const title = props.title ?? fallbacks.title;
+  const tooltipProps = props.tooltipProps ?? {
+    content: props.title ?? fallbacks.tooltipContent
+  };
+  const ariaLabel =
+    props.ariaLabel ?? typeof props.tooltipProps?.content === 'string'
+      ? typeof props.tooltipProps?.content
+      : props.title ?? fallbacks.ariaLabel;
+
+  return {
+    ...props,
+    iconProps,
+    title,
+    tooltipProps,
+    ariaLabel
+  };
+};