Add a new prop 'menuItems' that allows developers to inject contextual menu in Video Tile (#2507)

* Add a new prop  that allows developers to inject contextual menu and drawer menu items in Video Tile

* Change files

* minor changes

* conditional compile for pinned participants

* minor change

* Addressed Comments

* minor changes

* minor change

* API.md files

* minor change

* updated API.md

* minor change

Co-authored-by: Anjul Garg <anjulgarg@live.com>

Author: prabhjot-msft

change/@internal-react-components-e6336aab-e712-4716-a5da-7b4c55edac9b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add a new prop 'menuItems' that allows developers to inject contextual menu items in Video Tile",
+  "packageName": "@internal/react-components",
+  "email": "97124699+prabhjot-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -41,6 +41,7 @@ import { IContextualMenuItemStyles } from '@fluentui/react';
 import { IContextualMenuStyles } from '@fluentui/react';
 import { IDropdownOption } from '@fluentui/react';
 import { IDropdownStyles } from '@fluentui/react';
+import { IIconProps } from '@fluentui/react';
 import { ILinkStyles } from '@fluentui/react';
 import { IMessageBarProps } from '@fluentui/react';
 import { IncomingCall } from '@azure/communication-calling';
@@ -3174,6 +3175,15 @@ export interface VideoStreamRendererViewState {
 // @public
 export const VideoTile: (props: VideoTileProps) => JSX.Element;
 
+// @beta
+export type VideoTileMenuItems = Array<{
+    key: string;
+    ariaLabel?: string;
+    text: string;
+    onClick: () => void;
+    iconProps: IIconProps;
+}>;
+
 // @public
 export interface VideoTileProps {
     children?: React_2.ReactNode;
@@ -3183,6 +3193,7 @@ export interface VideoTileProps {
     isMuted?: boolean;
     isPinned?: boolean;
     isSpeaking?: boolean;
+    menuItems?: VideoTileMenuItems;
     noVideoAvailableAriaLabel?: string;
     onRenderPlaceholder?: OnRenderAvatarCallback;
     participantState?: ParticipantState;

packages/communication-react/src/index.ts

@@ -147,6 +147,9 @@ export type {
   MicrophoneDomainPermissionsProps
 } from '../../react-components/src';
 
+/* @conditional-compile-remove(pinned-participants) */
+export type { VideoTileMenuItems } from '../../react-components/src';
+
 export type {
   _IdentifierProviderProps,
   _Identifiers,

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

@@ -1673,6 +1673,15 @@ export interface VideoStreamOptions {
 // @public
 export const VideoTile: (props: VideoTileProps) => JSX.Element;
 
+// @beta
+export type VideoTileMenuItems = Array<{
+    key: string;
+    ariaLabel?: string;
+    text: string;
+    onClick: () => void;
+    iconProps: IIconProps;
+}>;
+
 // @public
 export interface VideoTileProps {
     children?: React_2.ReactNode;
@@ -1682,6 +1691,7 @@ export interface VideoTileProps {
     isMuted?: boolean;
     isPinned?: boolean;
     isSpeaking?: boolean;
+    menuItems?: VideoTileMenuItems;
     noVideoAvailableAriaLabel?: string;
     onRenderPlaceholder?: OnRenderAvatarCallback;
     participantState?: ParticipantState;

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

@@ -1418,6 +1418,15 @@ export interface VideoStreamOptions {
 // @public
 export const VideoTile: (props: VideoTileProps) => JSX.Element;
 
+// @beta
+export type VideoTileMenuItems = Array<{
+    key: string;
+    ariaLabel?: string;
+    text: string;
+    onClick: () => void;
+    iconProps: IIconProps;
+}>;
+
 // @public
 export interface VideoTileProps {
     children?: React_2.ReactNode;

packages/react-components/src/components/VideoTile.tsx

@@ -1,7 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { Icon, IStyle, mergeStyles, Persona, Stack, Text } from '@fluentui/react';
+import { Icon, IStyle, mergeStyles, Persona, Stack, Text, IIconProps } from '@fluentui/react';
+/* @conditional-compile-remove(pinned-participants) */
+import { MoreHorizontal20Filled } from '@fluentui/react-icons';
 import { Ref } from '@fluentui/react-northstar';
 import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useIdentifiers } from '../identifiers';
@@ -23,8 +25,12 @@ import {
   participantStateStringStyles
 } from './styles/VideoTile.styles';
 /* @conditional-compile-remove(pinned-participants) */
-import { pinIconStyle } from './styles/VideoTile.styles';
+import { pinIconStyle, menuButtonStyles } from './styles/VideoTile.styles';
 import { getVideoTileOverrideColor } from './utils/videoTileStylesUtils';
+/* @conditional-compile-remove(pinned-participants) */
+import { DefaultButton, concatStyleSets, DirectionalHint } from '@fluentui/react';
+/* @conditional-compile-remove(pinned-participants) */
+import { mapMenuItemsToContextualMenuItems } from './utils';
 
 /**
  * Strings of {@link VideoTile} that can be overridden.
@@ -89,6 +95,11 @@ export interface VideoTileProps {
    */
   isMuted?: boolean;
   /* @conditional-compile-remove(pinned-participants) */
+  /**
+   * Display custom menu items in the VideoTile's contextual menu.
+   */
+  menuItems?: VideoTileMenuItems;
+  /* @conditional-compile-remove(pinned-participants) */
   /**
    * If true, the video tile will show the pin icon.
    */
@@ -158,8 +169,39 @@ const DefaultPlaceholder = (props: CustomAvatarOptions): JSX.Element => {
   );
 };
 
+/**
+ * @beta
+ * MenuItems to be diplayed in video tile in the contextual/drawer menu
+ */
+export type VideoTileMenuItems = Array<{
+  key: string;
+  ariaLabel?: string;
+  text: string;
+  onClick: () => void;
+  iconProps: IIconProps;
+}>;
+
+/* @conditional-compile-remove(pinned-participants) */
+const menuIcon = (): JSX.Element => <MoreHorizontal20Filled primaryFill="currentColor" />;
+
 const defaultPersonaStyles = { root: { margin: 'auto', maxHeight: '100%' } };
 
+/* @conditional-compile-remove(pinned-participants) */
+const VideoTileMoreOptionsButton = (props: { menuItems?: VideoTileMenuItems; menuStyles?: IStyle }): JSX.Element => {
+  const { menuItems, menuStyles } = props;
+  if (!menuItems || menuItems.length === 0) {
+    return <></>;
+  }
+  return (
+    <DefaultButton
+      styles={concatStyleSets(menuButtonStyles, menuStyles ?? {})}
+      onRenderIcon={menuIcon}
+      menuIconProps={{ hidden: true }}
+      menuProps={{ items: mapMenuItemsToContextualMenuItems(menuItems), directionalHint: DirectionalHint.topRightEdge }}
+    />
+  );
+};
+
 /**
  * A component to render the video stream for a single call participant.
  *
@@ -184,6 +226,8 @@ export const VideoTile = (props: VideoTileProps): JSX.Element => {
     userId,
     noVideoAvailableAriaLabel,
     isSpeaking,
+    /* @conditional-compile-remove(pinned-participants) */
+    menuItems,
     personaMinSize = DEFAULT_PERSONA_MIN_SIZE_PX,
     personaMaxSize = DEFAULT_PERSONA_MAX_SIZE_PX
   } = props;
@@ -237,7 +281,6 @@ export const VideoTile = (props: VideoTileProps): JSX.Element => {
 
   const canShowLabel = showLabel && (displayName || (showMuteIndicator && isMuted));
   const participantStateString = participantStateStringTrampoline(props, locale);
-
   return (
     <Ref innerRef={videoTileRef}>
       <Stack
@@ -304,6 +347,10 @@ export const VideoTile = (props: VideoTileProps): JSX.Element => {
                   <Icon iconName="VideoTileMicOff" />
                 </Stack>
               )}
+              {
+                /* @conditional-compile-remove(pinned-participants) */
+                <VideoTileMoreOptionsButton menuItems={menuItems} menuStyles={props.styles} />
+              }
               {
                 /* @conditional-compile-remove(pinned-participants) */
                 isPinned && (

packages/react-components/src/components/styles/VideoTile.styles.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { IStyle, mergeStyles, Theme } from '@fluentui/react';
+import { IButtonStyles, IStyle, mergeStyles, Theme } from '@fluentui/react';
 
 /**
  * @private
@@ -119,3 +119,39 @@ export const participantStateStringStyles = (theme: Theme): IStyle => {
     padding: '0.1rem'
   };
 };
+
+/**
+ * @private
+ */
+export const menuButtonStyles: IButtonStyles = {
+  root: {
+    background: 'none',
+    border: 'none',
+    borderRadius: 0,
+    minHeight: '0.125rem',
+    minWidth: '2rem',
+    width: '100%',
+    maxWidth: '3rem',
+    svg: {
+      verticalAlign: 'text-top'
+    }
+  },
+  splitButtonMenuButton: {
+    border: 'none'
+  },
+  flexContainer: {
+    flexFlow: 'column',
+    display: 'contents'
+  },
+  label: {
+    fontSize: '0.625rem',
+    fontWeight: '400',
+    lineHeight: '1rem',
+    cursor: 'pointer',
+    display: 'block',
+    margin: '0rem 0.25rem',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  }
+};

packages/react-components/src/components/utils.ts

@@ -1,8 +1,9 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
 
-import { IIconProps, MessageBarType } from '@fluentui/react';
+import { IContextualMenuItem, IIconProps, MessageBarType } from '@fluentui/react';
 import { ActiveErrorMessage, ErrorType } from './ErrorBar';
+import { VideoTileMenuItems } from './VideoTile';
 
 /**
  * @private
@@ -149,6 +150,24 @@ export const messageBarType = (errorType: ErrorType): MessageBarType => {
   }
 };
 
+/**
+ * @private
+ */
+export const mapMenuItemsToContextualMenuItems = (menuItems: VideoTileMenuItems): IContextualMenuItem[] => {
+  const contextualMenuItems: IContextualMenuItem[] = [];
+  menuItems.map((item) => {
+    contextualMenuItems.push({
+      key: item.key,
+      text: item.text,
+      ariaLabel: item.ariaLabel,
+      onClick: item.onClick,
+      iconProps: item.iconProps
+    });
+  });
+
+  return contextualMenuItems;
+};
+
 /**
  * @private
  * @param errorType

packages/react-components/src/index.ts

@@ -20,6 +20,8 @@ export {
 /* @conditional-compile-remove(rooms) */
 export type { _Permissions, _PermissionsProviderProps, Role } from './permissions';
 
+export type { VideoTileMenuItems } from './components/VideoTile';
+
 export type {
   BaseCustomStyles,
   CallParticipantListParticipant,