[Custom Layouts] Speaker gallery component (#3443)

* add movement to the overflow gallery

* move the local tile fix vertical

* fix sample build

* Change files

* Duplicate change files for beta release

* CC component level

* update composite controls

* add localization and icons

* Beta API updates

* fix cc

* fix lint

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* create test for validating gallery movement

* remove test only

* Change files

* Duplicate change files for beta release

* update more button styles

* create component

* update logic to just show speaker

* maybe?

* Update packages/react-composites CallWithChatComposite browser test snapshots

* cc test

* fix local tile

* Change files

* Duplicate change files for beta release

* return composite to default

* fix issues when alone in call with speaker layout

* build API

* fix build

* Update packages/react-composites CallComposite browser test snapshots

* update API

* fix tests

* fix icon positioning

* remove not implemented API

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: dmceachernmsft

change-beta/@azure-communication-react-d6af3ed3-fb5f-4b20-85db-f34d8e3c965b.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Custom Layouts",
+  "comment": "Introduces Speaker gallery layout to the video gallery component",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-d6af3ed3-fb5f-4b20-85db-f34d8e3c965b.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "area": "feature",
+  "workstream": "Custom Layouts",
+  "comment": "Introduces Speaker gallery layout to the video gallery component",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -3850,7 +3850,7 @@ export interface VideoBackgroundReplacementEffect extends BackgroundReplacementC
 export const VideoGallery: (props: VideoGalleryProps) => JSX.Element;
 
 // @public (undocumented)
-export type VideoGalleryLayout = 'default' | 'floatingLocalVideo';
+export type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | /* @conditional-compile-remove(gallery-layouts) */ 'speaker';
 
 // @public
 export interface VideoGalleryLocalParticipant extends VideoGalleryParticipant {

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

@@ -2134,7 +2134,7 @@ export interface _VideoEffectsItemStyles {
 export const VideoGallery: (props: VideoGalleryProps) => JSX.Element;
 
 // @public (undocumented)
-export type VideoGalleryLayout = 'default' | 'floatingLocalVideo';
+export type VideoGalleryLayout = 'default' | 'floatingLocalVideo' | /* @conditional-compile-remove(gallery-layouts) */ 'speaker';
 
 // @public
 export interface VideoGalleryLocalParticipant extends VideoGalleryParticipant {

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

@@ -36,6 +36,8 @@ import { floatingLocalVideoTileStyle } from './VideoGallery/styles/FloatingLocal
 import { useId } from '@fluentui/react-hooks';
 /* @conditional-compile-remove(vertical-gallery) */
 import { VerticalGalleryStyles } from './VerticalGallery';
+/* @conditional-compile-remove(gallery-layouts) */
+import { SpeakerVideoLayout } from './VideoGallery/SpeakerVideoLayout';
 
 /**
  * @private
@@ -123,7 +125,10 @@ export interface VideoGalleryStrings {
 /**
  * @public
  */
-export type VideoGalleryLayout = 'default' | 'floatingLocalVideo';
+export type VideoGalleryLayout =
+  | 'default'
+  | 'floatingLocalVideo'
+  | /* @conditional-compile-remove(gallery-layouts) */ 'speaker';
 
 /**
  * {@link VideoGallery} Component Styles.
@@ -353,7 +358,10 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
   /* @conditional-compile-remove(pinned-participants) */
   const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);
 
-  const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);
+  const localTileNotInGrid = !!(
+    (layout === 'floatingLocalVideo' || /* @conditional-compile-remove(gallery-layouts) */ layout === 'speaker') &&
+    remoteParticipants.length > 0
+  );
 
   const containerRef = useRef<HTMLDivElement>(null);
   const containerWidth = _useContainerWidth(containerRef);
@@ -388,7 +396,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
     }
 
     const localVideoTileStyles = concatStyleSets(
-      shouldFloatLocalVideo ? floatingLocalVideoTileStyle : {},
+      localTileNotInGrid ? floatingLocalVideoTileStyle : {},
       {
         root: { borderRadius: theme.effects.roundedCorner4 }
       },
@@ -418,7 +426,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
           onRenderAvatar={onRenderAvatar}
           showLabel={
             !(
-              (shouldFloatLocalVideo && isNarrow) ||
+              (localTileNotInGrid && isNarrow) ||
               /*@conditional-compile-remove(click-to-call) */ /* @conditional-compile-remove(rooms) */ localVideoTileSize ===
                 '9:16'
             )
@@ -441,7 +449,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
     onDisposeLocalStreamView,
     onRenderAvatar,
     onRenderLocalVideoTile,
-    shouldFloatLocalVideo,
+    localTileNotInGrid,
     showCameraSwitcherInLocalPreview,
     showMuteIndicator,
     strings.localVideoCameraSwitcherLabel,
@@ -620,6 +628,10 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
     if (layout === 'floatingLocalVideo') {
       return <FloatingLocalVideoLayout {...layoutProps} />;
     }
+    /* @conditional-compile-remove(gallery-layouts) */
+    if (layout === 'speaker') {
+      return <SpeakerVideoLayout {...layoutProps} />;
+    }
     return <DefaultLayout {...layoutProps} />;
   }, [layout, layoutProps]);
 

packages/react-components/src/components/VideoGallery/DefaultLayout.tsx

@@ -61,7 +61,8 @@ export const DefaultLayout = (props: DefaultLayoutProps): JSX.Element => {
     maxOverflowGalleryDominantSpeakers: screenShareComponent
       ? childrenPerPage.current - ((pinnedParticipantUserIds.length + 1) % childrenPerPage.current)
       : childrenPerPage.current,
-    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
+    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
+    /* @conditional-compile-remove(gallery-layouts) */ layout: 'default'
   });
 
   let activeVideoStreams = 0;

packages/react-components/src/components/VideoGallery/FloatingLocalVideoLayout.tsx

@@ -92,7 +92,8 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
     maxOverflowGalleryDominantSpeakers: screenShareComponent
       ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
       : childrenPerPage.current,
-    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds
+    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
+    /* @conditional-compile-remove(gallery-layouts) */ layout: 'floatingLocalVideo'
   });
 
   let activeVideoStreams = 0;

packages/react-components/src/components/VideoGallery/SpeakerVideoLayout.tsx

@@ -0,0 +1,249 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT license.
+
+import { LayerHost, Stack, mergeStyles, useTheme } from '@fluentui/react';
+/* @conditional-compile-remove(click-to-call) */
+import { LocalVideoTileSize } from '../VideoGallery';
+import { LayoutProps } from './Layout';
+import { isNarrowWidth } from '../utils/responsive';
+/* @conditional-compile-remove(vertical-gallery) */
+import { isShortHeight } from '../utils/responsive';
+import React, { useMemo, useRef, useState } from 'react';
+import { OverflowGallery } from './OverflowGallery';
+import {
+  SMALL_FLOATING_MODAL_SIZE_REM,
+  LARGE_FLOATING_MODAL_SIZE_REM,
+  localVideoTileContainerStyle
+} from './styles/FloatingLocalVideo.styles';
+/* @conditional-compile-remove(vertical-gallery) */
+import {
+  VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM,
+  SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM
+} from './styles/FloatingLocalVideo.styles';
+import { useOrganizedParticipants } from './utils/videoGalleryLayoutUtils';
+import { GridLayout } from '../GridLayout';
+import { rootLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
+import { layerHostStyle, innerLayoutStyle } from './styles/FloatingLocalVideoLayout.styles';
+import { videoGalleryLayoutGap } from './styles/Layout.styles';
+import { useId } from '@fluentui/react-hooks';
+
+/**
+ * Props for {@link FloatingLocalVideoLayout}.
+ *
+ * @private
+ */
+export interface SpeakerVideoLayoutProps extends LayoutProps {
+  /**
+   * Whether to display the local video camera switcher button
+   */
+  showCameraSwitcherInLocalPreview?: boolean;
+  /**
+   * Height of parent element
+   */
+  parentHeight?: number;
+  /* @conditional-compile-remove(click-to-call) */
+  /**
+   * Local video tile mode
+   */
+  localVideoTileSize?: LocalVideoTileSize;
+}
+
+/**
+ * Layout for the gallery mode to highlight the current dominant speaker
+ *
+ * @private
+ */
+export const SpeakerVideoLayout = (props: SpeakerVideoLayoutProps): JSX.Element => {
+  const {
+    remoteParticipants = [],
+    dominantSpeakers,
+    localVideoComponent,
+    screenShareComponent,
+    onRenderRemoteParticipant,
+    styles,
+    maxRemoteVideoStreams,
+    parentWidth,
+    /* @conditional-compile-remove(vertical-gallery) */ parentHeight,
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition = 'HorizontalBottom',
+    pinnedParticipantUserIds = [],
+    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
+  } = props;
+
+  const theme = useTheme();
+
+  const isNarrow = parentWidth ? isNarrowWidth(parentWidth) : false;
+
+  /* @conditional-compile-remove(vertical-gallery) */
+  const isShort = parentHeight ? isShortHeight(parentHeight) : false;
+
+  // This is for tracking the number of children in the first page of overflow gallery.
+  // This number will be used for the maxOverflowGalleryDominantSpeakers when organizing the remote participants.
+  const childrenPerPage = useRef(4);
+  const { gridParticipants, overflowGalleryParticipants } = useOrganizedParticipants({
+    remoteParticipants,
+    dominantSpeakers,
+    maxRemoteVideoStreams,
+    isScreenShareActive: !!screenShareComponent,
+    maxOverflowGalleryDominantSpeakers: screenShareComponent
+      ? childrenPerPage.current - (pinnedParticipantUserIds.length % childrenPerPage.current)
+      : childrenPerPage.current,
+    /* @conditional-compile-remove(pinned-participants) */ pinnedParticipantUserIds,
+    /* @conditional-compile-remove(gallery-layouts) */ layout: 'speaker'
+  });
+
+  let activeVideoStreams = 0;
+
+  const gridTiles = gridParticipants.map((p) => {
+    return onRenderRemoteParticipant(
+      p,
+      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+        ? p.videoStream?.isAvailable && activeVideoStreams++ < maxRemoteVideoStreams
+        : p.videoStream?.isAvailable
+    );
+  });
+
+  const shouldFloatLocalVideo = remoteParticipants.length > 0;
+
+  if (!shouldFloatLocalVideo && localVideoComponent) {
+    gridTiles.push(localVideoComponent);
+  }
+
+  /**
+   * instantiate indexes available to render with indexes available that would be on first page
+   *
+   * For some components which do not strictly follow the order of the array, we might
+   * re-render the initial tiles -> dispose them -> create new tiles, we need to take care of
+   * this case when those components are here
+   */
+  const [indexesToRender, setIndexesToRender] = useState<number[]>([]);
+
+  const overflowGalleryTiles = overflowGalleryParticipants.map((p, i) => {
+    return onRenderRemoteParticipant(
+      p,
+      maxRemoteVideoStreams && maxRemoteVideoStreams >= 0
+        ? p.videoStream?.isAvailable &&
+            indexesToRender &&
+            indexesToRender.includes(i) &&
+            activeVideoStreams++ < maxRemoteVideoStreams
+        : p.videoStream?.isAvailable
+    );
+  });
+
+  const layerHostId = useId('layerhost');
+
+  const localVideoSizeRem = useMemo(() => {
+    if (isNarrow || /*@conditional-compile-remove(click-to-call) */ localVideoTileSize === '9:16') {
+      return SMALL_FLOATING_MODAL_SIZE_REM;
+    }
+    /* @conditional-compile-remove(vertical-gallery) */
+    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {
+      return isNarrow
+        ? SMALL_FLOATING_MODAL_SIZE_REM
+        : isShort
+        ? SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM
+        : VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM;
+    }
+    /*@conditional-compile-remove(click-to-call) */
+    if ((overflowGalleryTiles.length > 0 || screenShareComponent) && overflowGalleryPosition === 'HorizontalBottom') {
+      return localVideoTileSize === '16:9' || !isNarrow ? LARGE_FLOATING_MODAL_SIZE_REM : SMALL_FLOATING_MODAL_SIZE_REM;
+    }
+    return LARGE_FLOATING_MODAL_SIZE_REM;
+  }, [
+    overflowGalleryTiles.length,
+    isNarrow,
+    screenShareComponent,
+    /* @conditional-compile-remove(vertical-gallery) */ isShort,
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+    /* @conditional-compile-remove(click-to-call) */ localVideoTileSize
+  ]);
+
+  const wrappedLocalVideoComponent =
+    localVideoComponent || (screenShareComponent && localVideoComponent) ? (
+      <Stack
+        className={mergeStyles(
+          localVideoTileContainerStyle(
+            theme,
+            localVideoSizeRem,
+            !!screenShareComponent,
+            /* @conditional-compile-remove(gallery-layouts) */ overflowGalleryPosition
+          )
+        )}
+      >
+        {localVideoComponent}
+      </Stack>
+    ) : undefined;
+
+  const overflowGallery = useMemo(() => {
+    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
+      return null;
+    }
+    return (
+      <OverflowGallery
+        /* @conditional-compile-remove(vertical-gallery) */
+        isShort={isShort}
+        onFetchTilesToRender={setIndexesToRender}
+        isNarrow={isNarrow}
+        shouldFloatLocalVideo={true}
+        overflowGalleryElements={overflowGalleryTiles}
+        horizontalGalleryStyles={styles?.horizontalGallery}
+        /* @conditional-compile-remove(vertical-gallery) */
+        verticalGalleryStyles={styles?.verticalGallery}
+        /* @conditional-compile-remove(vertical-gallery) */
+        overflowGalleryPosition={overflowGalleryPosition}
+        onChildrenPerPageChange={(n: number) => {
+          childrenPerPage.current = n;
+        }}
+      />
+    );
+  }, [
+    isNarrow,
+    /* @conditional-compile-remove(vertical-gallery) */ isShort,
+    screenShareComponent,
+    overflowGalleryTiles,
+    styles?.horizontalGallery,
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
+    setIndexesToRender,
+    /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery
+  ]);
+
+  return (
+    <Stack styles={rootLayoutStyle}>
+      {wrappedLocalVideoComponent}
+      <LayerHost id={layerHostId} className={mergeStyles(layerHostStyle)} />
+      <Stack
+        /* @conditional-compile-remove(vertical-gallery) */
+        horizontal={overflowGalleryPosition === 'VerticalRight'}
+        styles={innerLayoutStyle}
+        tokens={videoGalleryLayoutGap}
+      >
+        {
+          /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition === 'HorizontalTop' ? (
+            overflowGallery
+          ) : (
+            <></>
+          )
+        }
+        {screenShareComponent ? (
+          screenShareComponent
+        ) : (
+          <GridLayout key="grid-layout" styles={styles?.gridLayout}>
+            {gridTiles}
+          </GridLayout>
+        )}
+        {overflowGalleryTrampoline(
+          overflowGallery,
+          /* @conditional-compile-remove(gallery-layouts) */ props.overflowGalleryPosition
+        )}
+      </Stack>
+    </Stack>
+  );
+};
+
+const overflowGalleryTrampoline = (
+  gallery: JSX.Element | null,
+  galleryPosition?: 'HorizontalBottom' | 'VerticalRight' | 'HorizontalTop'
+): JSX.Element | null => {
+  /* @conditional-compile-remove(gallery-layouts) */
+  return galleryPosition !== 'HorizontalTop' ? gallery : <></>;
+  return gallery;
+};