[Calling] Reaction mobile view button animations (#4252)

Mohtasim · web-flow · commit 468a66b6c208 · 2024-03-14T10:31:40.000-07:00
diff --git a/change-beta/@azure-communication-react-2cda5a7c-4cfd-4493-a1fc-f2cd95478213.json b/change-beta/@azure-communication-react-2cda5a7c-4cfd-4493-a1fc-f2cd95478213.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Reaction",
+  "comment": "[Calling] Reaction mobile view buttons (#4260)",
+  "packageName": "@azure/communication-react",
+  "email": "mbellah@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change-beta/@azure-communication-react-2e8df48b-3186-4ea9-ba88-5cdca8e70fae.json b/change-beta/@azure-communication-react-2e8df48b-3186-4ea9-ba88-5cdca8e70fae.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "improvement",
+  "workstream": "Componentize the mobile view reaction button",
+  "comment": "Componentizing the reaction button for mobile view",
+  "packageName": "@azure/communication-react",
+  "email": "mbellah@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change-beta/@azure-communication-react-32240110-839d-495e-8f96-1eb94c333a6c.json b/change-beta/@azure-communication-react-32240110-839d-495e-8f96-1eb94c333a6c.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "improvement",
+  "workstream": "Add mobile view reactions for drawer menu",
+  "comment": "Reaction mobile view button animations",
+  "packageName": "@azure/communication-react",
+  "email": "mbellah@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change-beta/@azure-communication-react-620cfff7-2075-4461-b442-1363c891c420.json b/change-beta/@azure-communication-react-620cfff7-2075-4461-b442-1363c891c420.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "improvement",
+  "workstream": "removing unwanted dependency",
+  "comment": "Reaction mobile button PR feedback",
+  "packageName": "@azure/communication-react",
+  "email": "mbellah@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change-beta/@azure-communication-react-7a814f0e-f330-4cfe-b40c-e1fdc760c94a.json b/change-beta/@azure-communication-react-7a814f0e-f330-4cfe-b40c-e1fdc760c94a.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "improvement",
+  "workstream": "Reactions",
+  "comment": "CC refactor and UI styles unit update",
+  "packageName": "@azure/communication-react",
+  "email": "mbellah@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change-beta/@azure-communication-react-91cefaf2-d8aa-4ace-af6a-da0baad63c36.json b/change-beta/@azure-communication-react-91cefaf2-d8aa-4ace-af6a-da0baad63c36.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Reactions",
+  "comment": "Componentizing the reaction button for mobile view",
+  "packageName": "@azure/communication-react",
+  "email": "mbellah@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change-beta/@azure-communication-react-d54219e1-a29e-44dc-a5ba-a9a4e4193856.json b/change-beta/@azure-communication-react-d54219e1-a29e-44dc-a5ba-a9a4e4193856.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "improvement",
+  "workstream": "Knit pick",
+  "comment": "Reaction mobile view button animations",
+  "packageName": "@azure/communication-react",
+  "email": "mbellah@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/review/beta/react-components.api.md b/packages/react-components/review/beta/react-components.api.md
@@ -1031,6 +1031,7 @@ export interface _DrawerMenuItemProps {
     itemKey: string;
     // (undocumented)
     onItemClick?: (ev?: React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement>, itemKey?: string) => void;
+    onRendererContent?: () => JSX.Element;
     secondaryComponent?: JSX.Element;
     secondaryIconProps?: IIconProps;
     secondaryText?: string;
@@ -1937,6 +1938,16 @@ export interface ReactionButtonStrings {
     tooltipDisabledContent?: string;
 }
 
+// @internal
+export const _ReactionDrawerMenuItem: (props: _ReactionMenuItemProps) => JSX.Element;
+
+// @internal
+export interface _ReactionMenuItemProps {
+    disabled?: boolean;
+    onReactionClick?: (reaction: string) => Promise<void>;
+    reactionResources?: ReactionResources;
+}
+
 // @beta
 export interface ReactionResources {
     applauseReaction?: ReactionSprite;
diff --git a/packages/react-components/review/stable/react-components.api.md b/packages/react-components/review/stable/react-components.api.md
@@ -801,6 +801,7 @@ export interface _DrawerMenuItemProps {
     itemKey: string;
     // (undocumented)
     onItemClick?: (ev?: React_2.MouseEvent<HTMLElement> | React_2.KeyboardEvent<HTMLElement>, itemKey?: string) => void;
+    onRendererContent?: () => JSX.Element;
     secondaryComponent?: JSX.Element;
     secondaryIconProps?: IIconProps;
     secondaryText?: string;
diff --git a/packages/react-components/src/components/Drawer/DrawerMenu.tsx b/packages/react-components/src/components/Drawer/DrawerMenu.tsx
@@ -46,6 +46,10 @@ export interface _DrawerMenuProps {
   styles?: _DrawerMenuStyles;
 }
 
+const isDrawerMenuItem = (item: _DrawerMenuItemProps): boolean => {
+  return item.onRendererContent === undefined;
+};
+
 /**
  * Takes a set of menu items and returns a created menu inside a {@link _DrawerSurface}.
  *
@@ -61,7 +65,7 @@ export const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {
   const menuItemsToRender = useMemo(() => {
     let items: _DrawerMenuItemProps[] | undefined = props.items;
     for (const subMenuKey of selectedKeyPath) {
-      items = items?.find((item) => item.itemKey === subMenuKey)?.subMenuProps;
+      items = items?.find((item) => isDrawerMenuItem(item) && item.itemKey === subMenuKey)?.subMenuProps;
     }
     return items;
   }, [props.items, selectedKeyPath]);
@@ -85,7 +89,7 @@ export const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {
 
   // Ensure the first item has a border radius that matches the DrawerSurface
   const borderRadius = useTheme().effects.roundedCorner4;
-  const firstItemStyle = menuItemsToRender && menuItemsToRender[0]?.styles;
+  const firstItemStyle = menuItemsToRender?.[0] && menuItemsToRender[0]?.styles;
   const modifiedFirstItemStyle = useMemo(
     () =>
       merge(firstItemStyle ?? {}, {
@@ -105,26 +109,38 @@ export const _DrawerMenu = (props: _DrawerMenuProps): JSX.Element => {
       heading={props.heading}
     >
       <Stack styles={props.styles} role="menu" data-ui-id="drawer-menu">
-        {menuItemsToRender?.slice(0, 1).map((item) => (
-          <DrawerMenuItem
-            {...item}
-            key={`${item.itemKey}` + '0'}
-            shouldFocusOnMount={true}
-            styles={modifiedFirstItemStyle}
-            onItemClick={(ev, itemKey) => {
-              onItemClick(item, ev, itemKey);
-            }}
-          />
-        ))}
-        {menuItemsToRender?.slice(1).map((item, i) => (
-          <DrawerMenuItem
-            {...item}
-            key={`${item.itemKey}` + `${i + 1}`}
-            onItemClick={(ev, itemKey) => {
-              onItemClick(item, ev, itemKey);
-            }}
-          />
-        ))}
+        {menuItemsToRender?.slice(0, 1).map((item) =>
+          isDrawerMenuItem(item) ? (
+            <DrawerMenuItem
+              {...item}
+              key={`${item.itemKey}` + '0'}
+              shouldFocusOnMount={item.itemKey === 'reactions' ? false : true}
+              styles={modifiedFirstItemStyle}
+              onItemClick={
+                item.itemKey === 'reactions'
+                  ? undefined
+                  : (ev, itemKey) => {
+                      onItemClick(item, ev, itemKey);
+                    }
+              }
+            />
+          ) : (
+            item.onRendererContent?.()
+          )
+        )}
+        {menuItemsToRender?.slice(1).map((item, i) =>
+          isDrawerMenuItem(item) ? (
+            <DrawerMenuItem
+              {...item}
+              key={`${item.itemKey}` + `${i + 1}`}
+              onItemClick={(ev, itemKey) => {
+                onItemClick(item, ev, itemKey);
+              }}
+            />
+          ) : (
+            item.onRendererContent?.()
+          )
+        )}
       </Stack>
     </_DrawerSurface>
   );
diff --git a/packages/react-components/src/components/Drawer/DrawerMenuItem.tsx b/packages/react-components/src/components/Drawer/DrawerMenuItem.tsx
@@ -54,6 +54,10 @@ export interface _DrawerMenuItemProps {
    * Property to set the focus since this is the first item in the menu
    */
   shouldFocusOnMount?: boolean;
+  /**
+   * Custom JSX item injection for custom mobile view button on drawers
+   */
+  onRendererContent?: () => JSX.Element;
 }
 
 /**
diff --git a/packages/react-components/src/components/Drawer/ReactionDrawerMenuItem.tsx b/packages/react-components/src/components/Drawer/ReactionDrawerMenuItem.tsx
@@ -0,0 +1,115 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+/* @conditional-compile-remove(reaction) */
+import { IRawStyle, IStyle, mergeStyles, Stack } from '@fluentui/react';
+/* @conditional-compile-remove(reaction) */
+import React from 'react';
+/* @conditional-compile-remove(reaction) */
+import { useTheme } from '../../theming/FluentThemeProvider';
+/* @conditional-compile-remove(reaction) */
+import { mobileViewEmojiStyles, mobileViewMenuItemStyle } from '../styles/ReactionButton.styles';
+/* @conditional-compile-remove(reaction) */
+import { IconButton } from '@fluentui/react';
+/* @conditional-compile-remove(reaction) */
+import { _DrawerMenuItemProps, ReactionResources } from '../..';
+
+/* @conditional-compile-remove(reaction) */
+/**
+ * Props for the ReactionMenuItem
+ *
+ * @internal
+ */
+export interface _ReactionMenuItemProps {
+  /**
+   * Reaction resources to render for mobile button menus for reaction
+   */
+  reactionResources?: ReactionResources;
+  /**
+   * reaction click event from the call adapter.
+   */
+  onReactionClick?: (reaction: string) => Promise<void>;
+  /**
+   * Whether the menu item is disabled
+   * @defaultvalue false
+   */
+  disabled?: boolean;
+}
+
+/* @conditional-compile-remove(reaction) */
+/**
+ * Maps the individual item in menuProps.items passed in the {@link DrawerMenu} into a UI component.
+ *
+ * @internal
+ */
+export const _ReactionDrawerMenuItem = (props: _ReactionMenuItemProps): JSX.Element => {
+  const theme = useTheme();
+  const resources = props.reactionResources;
+  const emojiResource: Map<string, string | undefined> = new Map([
+    ['like', resources?.likeReaction?.url],
+    ['heart', resources?.heartReaction?.url],
+    ['laugh', resources?.laughReaction?.url],
+    ['applause', resources?.applauseReaction?.url],
+    ['surprised', resources?.surprisedReaction?.url]
+  ]);
+  const emojis: string[] = ['like', 'heart', 'laugh', 'applause', 'surprised'];
+
+  const borderRadius = useTheme().effects.roundedCorner4;
+  const modifiedFirstItemStyle = {
+    root: {
+      borderTopRightRadius: borderRadius,
+      borderTopLeftRadius: borderRadius,
+      marginTop: '12px'
+    }
+  };
+
+  return (
+    <Stack
+      id="reaction"
+      role="menuitem"
+      horizontal
+      className={mergeStyles(
+        drawerMenuItemRootStyles(theme.palette.neutralLight, theme.fonts.small),
+        props.disabled ? disabledDrawerMenuItemRootStyles(theme.palette.neutralQuaternaryAlt) : undefined,
+        modifiedFirstItemStyle.root
+      )}
+    >
+      <div style={mobileViewMenuItemStyle()}>
+        {emojis.map((emoji, index) => {
+          const resourceUrl = emojiResource.get(emoji.toString());
+
+          return (
+            <IconButton
+              key={index}
+              onClick={() => {
+                props.onReactionClick?.(emoji);
+              }}
+              style={mobileViewEmojiStyles(resourceUrl ? resourceUrl : '', 'running')}
+            />
+          );
+        })}
+      </div>
+    </Stack>
+  );
+};
+
+/* @conditional-compile-remove(reaction) */
+const drawerMenuItemRootStyles = (hoverBackground: string, fontSize: IRawStyle): IStyle => ({
+  ...fontSize,
+  height: '3rem',
+  lineHeight: '3rem',
+  padding: '0rem 0.75rem',
+  cursor: 'pointer',
+  ':hover, :focus': {
+    background: hoverBackground
+  }
+});
+
+/* @conditional-compile-remove(reaction) */
+const disabledDrawerMenuItemRootStyles = (background: string): IStyle => ({
+  pointerEvents: 'none',
+  background: background,
+  ':hover, :focus': {
+    background: background
+  }
+});
diff --git a/packages/react-components/src/components/Drawer/index.ts b/packages/react-components/src/components/Drawer/index.ts
@@ -7,3 +7,7 @@ export type { _DrawerMenuItemProps } from './DrawerMenuItem';
 
 export { _DrawerSurface } from './DrawerSurface';
 export type { _DrawerSurfaceProps, _DrawerSurfaceStyles } from './DrawerSurface';
+/* @conditional-compile-remove(reaction) */
+export { _ReactionDrawerMenuItem } from './ReactionDrawerMenuItem';
+/* @conditional-compile-remove(reaction) */
+export type { _ReactionMenuItemProps } from './ReactionDrawerMenuItem';
diff --git a/packages/react-components/src/components/styles/ReactionButton.styles.ts b/packages/react-components/src/components/styles/ReactionButton.styles.ts
@@ -44,7 +44,7 @@ export const emojiStyles = (backgroundImage: string, animationPlayState: string)
     justifyContent: 'center',
     alignItems: 'center',
     backgroundPosition: 'center',
-    backgroundSize: `44px 2142px`,
+    backgroundSize: `2.75rem 133.875rem`,
     transition: 'opacity 2s',
     backgroundColor: 'transparent',
     transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`
@@ -62,8 +62,8 @@ export const reactionEmojiMenuStyles = (): React.CSSProperties => {
     justifyContent: 'center',
     alignItems: 'center',
     flexDirection: 'row',
-    width: '220px',
-    height: '42px'
+    width: '13.75rem',
+    height: '2.625rem'
   };
 };
 
@@ -82,3 +82,49 @@ export const reactionToolTipHostStyle = (): ITooltipHostStyles => {
     }
   };
 };
+
+/* @conditional-compile-remove(reaction) */
+/**
+ *
+ * @private
+ */
+export const mobileViewMenuItemStyle = (): React.CSSProperties => {
+  return {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexDirection: 'row',
+    width: '100%',
+    height: '2.625rem'
+  };
+};
+
+/* @conditional-compile-remove(reaction) */
+/**
+ * @param backgroundImage - the uri for the reaction emoji resource
+ * @param animationPlayState - the value is either 'running' or 'paused' based on the mouse hover event
+ *
+ * @private
+ */
+export const mobileViewEmojiStyles = (backgroundImage: string, animationPlayState: string): React.CSSProperties => {
+  const imageResourceUrl = `url(${backgroundImage})`;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '2.75rem',
+    backgroundImage: imageResourceUrl,
+    animationName: playFrames(),
+    animationDuration: '8.12s',
+    animationTimingFunction: `steps(102)`,
+    animationPlayState: animationPlayState,
+    animationIterationCount: 'infinite',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundPosition: 'center',
+    backgroundSize: `2.75rem 133.875rem`,
+    transition: 'opacity 2s',
+    backgroundColor: 'transparent',
+    transform: `${animationPlayState === 'running' ? 'scale(0.8)' : 'scale(0.6)'}`
+  };
+};
diff --git a/packages/react-composites/src/composites/CallComposite/components/CallArrangement.tsx b/packages/react-composites/src/composites/CallComposite/components/CallArrangement.tsx
diff --git a/packages/react-composites/src/composites/common/Drawer/MoreDrawer.tsx b/packages/react-composites/src/composites/common/Drawer/MoreDrawer.tsx
diff --git a/packages/react-composites/src/composites/common/Drawer/PreparedMoreDrawer.tsx b/packages/react-composites/src/composites/common/Drawer/PreparedMoreDrawer.tsx
diff --git a/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoGallery.test.ts-snapshots/gallery-options-mobile-Mobile-Android-Portrait-linux.png b/packages/react-composites/tests/browser/snapshots/stable/tests/browser/call/hermetic/VideoGallery.test.ts-snapshots/gallery-options-mobile-Mobile-Android-Portrait-linux.png
