Azure · dmceachernmsft · Sep 26, 2023 · Sep 8, 2023 · Sep 8, 2023 · Sep 8, 2023
diff --git a/change-beta/@azure-communication-react-6bc5b934-6586-4f9b-943f-670b5b7d24ae.json b/change-beta/@azure-communication-react-6bc5b934-6586-4f9b-943f-670b5b7d24ae.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Gallery Layouts",
+  "comment": "Introduce gallery controls to mobile for default and dynamic views",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-6bc5b934-6586-4f9b-943f-670b5b7d24ae.json b/change/@azure-communication-react-6bc5b934-6586-4f9b-943f-670b5b7d24ae.json
@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Gallery Layouts",
+  "comment": "Introduce gallery controls to mobile for default and dynamic views",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
@@ -1212,6 +1212,7 @@ export interface CallWithChatCompositeStrings {
     moreDrawerButtonTooltip: string;
     moreDrawerCaptionLanguageMenuTitle: string;
     moreDrawerCaptionsMenuTitle: string;
+    moreDrawerGalleryOptionsMenuTitle: string;
     moreDrawerMicrophoneMenuTitle: string;
     moreDrawerSpeakerMenuTitle: string;
     moreDrawerSpokenLanguageMenuTitle: string;

@@ -42,7 +42,7 @@ import { VerticalGalleryStyles } from './VerticalGallery';
 import { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';
 /* @conditional-compile-remove(gallery-layouts) */
 import { FocusedContentLayout } from './VideoGallery/FocusContentLayout';
-/* @conditional-compile-remove(gallery-layouts) */
+/* @conditional-compile-remove(large-gallery) */
 import { LargeGalleryLayout } from './VideoGallery/LargeGalleryLayout';
 
 /**
@@ -431,6 +431,12 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
 
     const initialsName = !localParticipant.displayName ? '' : localParticipant.displayName;
 
+    const showDisplayNameTrampoline = (): string => {
+      /* @conditional-compile-remove(gallery-layouts) */
+      return layout === 'default' ? strings.localVideoLabel : isNarrow ? '' : strings.localVideoLabel;
+      return isNarrow ? '' : strings.localVideoLabel;
+    };
+
     return (
       <Stack
         styles={localVideoTileContainerStyles}
@@ -446,7 +452,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
           isAvailable={localParticipant?.videoStream?.isAvailable}
           isMuted={localParticipant.isMuted}
           renderElement={localParticipant?.videoStream?.renderElement}
-          displayName={isNarrow ? '' : strings.localVideoLabel}
+          displayName={showDisplayNameTrampoline()}
           initialsName={initialsName}
           localVideoViewOptions={localVideoViewOptions}
           onRenderAvatar={onRenderAvatar}
@@ -455,7 +461,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
               (localTileNotInGrid && isNarrow) ||
               /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize ===
                 '9:16'
-            )
+            ) || /* @conditional-compile-remove(gallery-layouts) */ layout === 'default'
           }
           showMuteIndicator={showMuteIndicator}
           showCameraSwitcherInLocalPreview={showCameraSwitcherInLocalPreview}
@@ -487,7 +493,9 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
     styles?.localVideo,
     theme.effects.roundedCorner4,
     /*@conditional-compile-remove(click-to-call) */
-    localVideoTileSize
+    localVideoTileSize,
+    /* @conditional-compile-remove(gallery-layouts) */
+    layout
   ]);
 
   /* @conditional-compile-remove(pinned-participants) */

@@ -118,6 +118,8 @@ export const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {
         onChildrenPerPageChange={(n: number) => {
           childrenPerPage.current = n;
         }}
+        /* @conditional-compile-remove(gallery-layouts) */
+        layout={'default'}
       />
     );
   }, [

@@ -76,7 +76,7 @@ export const LargeGalleryLayout = (props: LargeGalleryProps): JSX.Element => {
       ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
       : childrenPerPage.current,
     /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
-    /* @conditional-compile-remove(gallery-layouts) */ layout: 'largeGallery'
+    /* @conditional-compile-remove(large-gallery) */ layout: 'largeGallery'
   });
   let activeVideoStreams = 0;
 

@@ -12,6 +12,8 @@ import { HORIZONTAL_GALLERY_BUTTON_WIDTH, HORIZONTAL_GALLERY_GAP } from '../styl
 import { VerticalGalleryStyles } from '../VerticalGallery';
 /* @conditional-compile-remove(vertical-gallery) */
 import { OverflowGalleryPosition } from '../VideoGallery';
+/* @conditional-compile-remove(gallery-layouts) */
+import { VideoGalleryLayout } from '../VideoGallery';
 import { ScrollableHorizontalGallery } from './ScrollableHorizontalGallery';
 import {
   horizontalGalleryContainerStyle,
@@ -41,6 +43,8 @@ export const OverflowGallery = (props: {
   /* @conditional-compile-remove(vertical-gallery) */
   overflowGalleryPosition?: OverflowGalleryPosition;
   onChildrenPerPageChange?: (childrenPerPage: number) => void;
+  /* @conditional-compile-remove(gallery-layouts) */
+  layout?: VideoGalleryLayout;
 }): JSX.Element => {
   const {
     shouldFloatLocalVideo = false,
@@ -110,6 +114,8 @@ export const OverflowGallery = (props: {
         horizontalGalleryElements={overflowGalleryElements ? overflowGalleryElements : [<></>]}
         onFetchTilesToRender={onFetchTilesToRender}
         key="scrollable-horizontal-gallery"
+        /* @conditional-compile-remove(gallery-layouts) */
+        layout={props.layout}
       />
     );
   }

@@ -8,6 +8,8 @@ import {
   scrollableHorizontalGalleryContainerStyles,
   scrollableHorizontalGalleryStyles
 } from './styles/ScrollableHorizontalGallery.style';
+/* @conditional-compile-remove(gallery-layouts) */
+import { VideoGalleryLayout } from '../VideoGallery';
 
 /**
  * Component to display elements horizontally in a scrollable container
@@ -16,8 +18,17 @@ import {
 export const ScrollableHorizontalGallery = (props: {
   horizontalGalleryElements?: JSX.Element[];
   onFetchTilesToRender?: (indexes: number[]) => void;
+  /* @conditional-compile-remove(gallery-layouts) */
+  layout?: VideoGalleryLayout;
 }): JSX.Element => {
-  const { horizontalGalleryElements, onFetchTilesToRender } = props;
+  const { horizontalGalleryElements, onFetchTilesToRender, /* @conditional-compile-remove(gallery-layouts) */ layout } =
+    props;
+
+  const useFullWidthTrampoline = (): boolean => {
+    /* @conditional-compile-remove(gallery-layouts) */
+    return layout === 'default' ? true : false;
+    return false;
+  };
 
   useEffect(() => {
     const indexesArray = [...Array(horizontalGalleryElements?.length).keys()];
@@ -30,7 +41,11 @@ export const ScrollableHorizontalGallery = (props: {
   const { events: dragabbleEvents } = useDraggable(ref);
 
   return (
-    <div ref={ref} {...dragabbleEvents} className={scrollableHorizontalGalleryContainerStyles}>
+    <div
+      ref={ref}
+      {...dragabbleEvents}
+      className={scrollableHorizontalGalleryContainerStyles(useFullWidthTrampoline())}
+    >
       <Stack
         data-ui-id="scrollable-horizontal-gallery"
         horizontal={true}

@@ -23,12 +23,14 @@ export const scrollableHorizontalGalleryStyles: IStackStyles = {
 /**
  * @private
  */
-export const scrollableHorizontalGalleryContainerStyles = mergeStyles({
-  display: 'flex',
-  width: `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`,
-  minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
-  overflow: 'scroll',
-  '-ms-overflow-style': 'none',
-  'scrollbar-width': 'none',
-  '::-webkit-scrollbar': { display: 'none' }
-});
+export const scrollableHorizontalGalleryContainerStyles = (fullWidth: boolean): string => {
+  return mergeStyles({
+    display: 'flex',
+    width: fullWidth ? '100%' : `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.width}rem)`,
+    minHeight: `${SMALL_HORIZONTAL_GALLERY_TILE_SIZE_REM.height}rem`,
+    overflow: 'scroll',
+    '-ms-overflow-style': 'none',
+    'scrollbar-width': 'none',
+    '::-webkit-scrollbar': { display: 'none' }
+  });
+};
@@ -910,6 +910,7 @@ export interface CallWithChatCompositeStrings {
     moreDrawerButtonTooltip: string;
     moreDrawerCaptionLanguageMenuTitle: string;
     moreDrawerCaptionsMenuTitle: string;
+    moreDrawerGalleryOptionsMenuTitle: string;
     moreDrawerMicrophoneMenuTitle: string;
     moreDrawerSpeakerMenuTitle: string;
     moreDrawerSpokenLanguageMenuTitle: string;

@@ -366,6 +366,10 @@ export const CallArrangement = (props: CallArrangementProps): JSX.Element => {
                 disableButtonsForHoldScreen={isInLocalHold}
                 /* @conditional-compile-remove(close-captions) */
                 isCaptionsSupported={isTeamsCall && hasJoinedCall}
+                /* @conditional-compile-remove(gallery-layouts) */
+                onUserSetGalleryLayout={props.onUserSetGalleryLayoutChange}
+                /* @conditional-compile-remove(gallery-layouts) */
+                userSetGalleryLayout={props.userSetGalleryLayout}
               />
             </Stack>
           )}

@@ -80,6 +80,11 @@ export interface CallWithChatCompositeStrings {
    * Only used with `mobileView` set to `true`.
    */
   moreDrawerCaptionLanguageMenuTitle: string;
+  /* @conditional-compile-remove(gallery-layouts) */
+  /**
+   * Title for the gallery options sub-menu in the more button drawer.
+   */
+  moreDrawerGalleryOptionsMenuTitle: string;
   /**
    * {@Link CallWithChatComposite} control bar More button label
    */

@@ -2,8 +2,6 @@
 // Licensed under the MIT License.
 
 import { IContextualMenuItem } from '@fluentui/react';
-/* @conditional-compile-remove(gallery-layouts) */
-import { ContextualMenuItemType } from '@fluentui/react';
 import { ControlBarButtonProps } from '@internal/react-components';
 /* @conditional-compile-remove(gallery-layouts) */
 import { VideoGalleryLayout } from '@internal/react-components';
@@ -293,32 +291,6 @@ export const DesktopMoreButton = (props: DesktopMoreButtonProps): JSX.Element =>
               iconName: 'FocusedContentGalleryLayout',
               styles: { root: { lineHeight: 0 } }
             }
-          },
-          { key: 'dividerLayoutsKey', itemType: ContextualMenuItemType.Divider },
-          {
-            key: 'topKey',
-            text: localeStrings.strings.call.moreButtonGalleryPositionToggleLabel,
-            canCheck: true,
-            topDivider: true,
-            itemProps: {
-              styles: buttonFlyoutIncreasedSizeStyles
-            },
-            iconProps: {
-              iconName: 'OverflowGalleryTop',
-              styles: { root: { lineHeight: 0 } }
-            },
-            isChecked: galleryPositionTop,
-            onClick: () => {
-              if (galleryPositionTop === false) {
-                props.onUserSetOverflowGalleryPositionChange &&
-                  props.onUserSetOverflowGalleryPositionChange('HorizontalTop');
-                setGalleryPositionTop(true);
-              } else {
-                props.onUserSetOverflowGalleryPositionChange &&
-                  props.onUserSetOverflowGalleryPositionChange('Responsive');
-                setGalleryPositionTop(false);
-              }
-            }
           }
         ],
         calloutProps: {
@@ -327,7 +299,7 @@ export const DesktopMoreButton = (props: DesktopMoreButtonProps): JSX.Element =>
       }
     };
     /* @conditional-compile-remove(large-gallery) */
-    const largeGalleryOption = {
+    const largeGalleryOptions = {
       key: 'largeGallerySelectionKey',
       text: localeStrings.strings.call.moreButtonLargeGalleryDefaultLayoutLabel,
       canCheck: true,
@@ -344,9 +316,37 @@ export const DesktopMoreButton = (props: DesktopMoreButtonProps): JSX.Element =>
         styles: { root: { lineHeight: 0 } }
       }
     };
+
+    /* @conditional-compile-remove(gallery-layouts) */
+    const overflowGalleryOptions = {
+      key: 'topKey',
+      text: localeStrings.strings.call.moreButtonGalleryPositionToggleLabel,
+      canCheck: true,
+      topDivider: true,
+      itemProps: {
+        styles: buttonFlyoutIncreasedSizeStyles
+      },
+      iconProps: {
+        iconName: 'OverflowGalleryTop',
+        styles: { root: { lineHeight: 0 } }
+      },
+      isChecked: galleryPositionTop,
+      onClick: () => {
+        if (galleryPositionTop === false) {
+          props.onUserSetOverflowGalleryPositionChange && props.onUserSetOverflowGalleryPositionChange('HorizontalTop');
+          setGalleryPositionTop(true);
+        } else {
+          props.onUserSetOverflowGalleryPositionChange && props.onUserSetOverflowGalleryPositionChange('Responsive');
+          setGalleryPositionTop(false);
+        }
+      }
+    };
     /* @conditional-compile-remove(large-gallery) */
-    galleryOptions.subMenuProps?.items?.push(largeGalleryOption);
+    galleryOptions.subMenuProps?.items?.push(largeGalleryOptions);
+    /* @conditional-compile-remove(gallery-layouts) */
+    galleryOptions.subMenuProps?.items?.push(overflowGalleryOptions);
 
+    /* @conditional-compile-remove(gallery-layouts) */
     moreButtonContextualMenuItems.push(galleryOptions);
   }
 

@@ -12,6 +12,8 @@ import {
   _DrawerMenuItemProps as DrawerMenuItemProps,
   _DrawerMenuStyles
 } from '@internal/react-components';
+/* @conditional-compile-remove(gallery-layouts) */
+import { VideoGalleryLayout } from '@internal/react-components';
 /* @conditional-compile-remove(close-captions) */
 import { _StartCaptionsButton, _CaptionsSettingsModal } from '@internal/react-components';
 
@@ -98,6 +100,12 @@ export interface MoreDrawerStrings {
    * @remarks Only displayed when in Teams call, disabled until captions is on
    */
   captionLanguageMenuTitle: string;
+
+  /* @conditional-compile-remove(gallery-layouts) */
+  /**
+   * Label for gallery options drawerMenuItem
+   */
+  galleryOptionsMenuTitle: string;
 }
 
 /** @private */
@@ -126,6 +134,13 @@ export interface MoreDrawerDevicesMenuProps {
    * Callback when a microphone is selected
    */
   onSelectMicrophone: (device: AudioDeviceInfo) => Promise<void>;
+  /* @conditional-compile-remove(gallery-layouts) */
+  userSetGalleryLayout?: VideoGalleryLayout;
+  /* @conditional-compile-remove(gallery-layouts) */
+  /**
+   * Callback for when the gallery layout is changed
+   */
+  onUserSetGalleryLayout?: (layout: VideoGalleryLayout) => void;
 }
 
 /** @private */
@@ -242,6 +257,42 @@ export const MoreDrawer = (props: MoreDrawerProps): JSX.Element => {
       secondaryText: props.selectedMicrophone?.name
     });
   }
+  /* @conditional-compile-remove(gallery-layouts) */
+  drawerMenuItems.push({
+    itemKey: 'overflowGalleryPositionKey',
+    iconProps: {
+      iconName: 'GalleryOptions',
+      styles: { root: { lineHeight: 0 } }
+    },
+    text: localeStrings.strings.call.moreButtonGalleryControlLabel,
+    subMenuProps: [
+      {
+        itemKey: 'dynamicSelectionKey',
+        text: localeStrings.strings.call.moreButtonGalleryFloatingLocalLayoutLabel,
+        onItemClick: () => {
+          props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('floatingLocalVideo');
+          onLightDismiss();
+        },
+        iconProps: {
+          iconName: 'FloatingLocalVideoGalleryLayout',
+          styles: { root: { lineHeight: 0 } }
+        }
+      },
+      {
+        itemKey: 'defaultSelectionKey',
+        text: localeStrings.strings.call.moreButtonGalleryDefaultLayoutLabel,
+        onItemClick: () => {
+          props.onUserSetGalleryLayout && props.onUserSetGalleryLayout('default');
+          onLightDismiss();
+        },
+        iconProps: {
+          iconName: 'DefaultGalleryLayout',
+          styles: { root: { lineHeight: 0 } }
+        }
+      }
+    ]
+  });
+
   if (drawerSelectionOptions !== false && isEnabled(drawerSelectionOptions?.peopleButton)) {
     drawerMenuItems.push({
       itemKey: 'people',