Fix leaving with screenshare error and off center tiles in vertical gallery (#2863)

* Revert "Video gallery show local tile and horizontal/vertical gallery when screensharing with no participant (#2822)"

* Change files

* Duplicate change files for beta release

* Revert VideoGalleryResponsiveVerticalGallery.styles.ts

Author: mgamis-msft

change-beta/@azure-communication-react-a44490ad-73fc-48b8-9ca5-47be397384fd.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Revert bug fix \"Video gallery show local tile and horizontal/vertical gallery when screensharing with no participant (#2822)\"",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

change/@azure-communication-react-a44490ad-73fc-48b8-9ca5-47be397384fd.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Revert bug fix \"Video gallery show local tile and horizontal/vertical gallery when screensharing with no participant (#2822)\"",
+  "packageName": "@azure/communication-react",
+  "email": "79475487+mgamis-msft@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

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

@@ -325,10 +325,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
   /* @conditional-compile-remove(pinned-participants) */
   const drawerMenuHostId = useId('drawerMenuHost', drawerMenuHostIdFromProp);
 
-  const shouldFloatLocalVideo = !!(
-    (layout === 'floatingLocalVideo' && remoteParticipants.length > 0) ||
-    localParticipant.isScreenSharingOn
-  );
+  const shouldFloatLocalVideo = !!(layout === 'floatingLocalVideo' && remoteParticipants.length > 0);
 
   const containerRef = useRef<HTMLDivElement>(null);
   const containerWidth = _useContainerWidth(containerRef);

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

@@ -98,7 +98,7 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
     );
   });
 
-  const shouldFloatLocalVideo = remoteParticipants.length > 0 || !!screenShareComponent;
+  const shouldFloatLocalVideo = remoteParticipants.length > 0;
 
   if (!shouldFloatLocalVideo && localVideoComponent) {
     gridTiles.push(localVideoComponent);
@@ -131,7 +131,7 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
       return SMALL_FLOATING_MODAL_SIZE_REM;
     }
     /* @conditional-compile-remove(vertical-gallery) */
-    if ((overflowGalleryTiles.length > 0 || !!screenShareComponent) && overflowGalleryPosition === 'VerticalRight') {
+    if (overflowGalleryTiles.length > 0 && overflowGalleryPosition === 'VerticalRight') {
       return isNarrow
         ? SMALL_FLOATING_MODAL_SIZE_REM
         : isShort
@@ -143,8 +143,7 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
     overflowGalleryTiles.length,
     isNarrow,
     /* @conditional-compile-remove(vertical-gallery) */ isShort,
-    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
-    /* @conditional-compile-remove(vertical-gallery) */ screenShareComponent
+    /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition
   ]);
 
   const wrappedLocalVideoComponent =
@@ -159,7 +158,7 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
         >
           {localVideoComponent}
         </Stack>
-      ) : overflowGalleryTiles.length > 0 || !!screenShareComponent ? (
+      ) : overflowGalleryTiles.length > 0 ? (
         <Stack className={mergeStyles(localVideoTileContainerStyle(theme, localVideoSizeRem))}>
           {localVideoComponent}
         </Stack>
@@ -175,7 +174,7 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
     ) : undefined;
 
   const overflowGallery = useMemo(() => {
-    if (overflowGalleryTiles.length === 0 && !screenShareComponent) {
+    if (overflowGalleryTiles.length === 0) {
       return null;
     }
     return (
@@ -203,7 +202,6 @@ export const FloatingLocalVideoLayout = (props: FloatingLocalVideoLayoutProps):
     styles?.horizontalGallery,
     /* @conditional-compile-remove(vertical-gallery) */ overflowGalleryPosition,
     setIndexesToRender,
-    screenShareComponent,
     /* @conditional-compile-remove(vertical-gallery) */ styles?.verticalGallery
   ]);
 

packages/react-components/src/components/VideoGallery/styles/VideoGalleryResponsiveVerticalGallery.styles.ts

@@ -35,8 +35,6 @@ export const VERTICAL_GALLERY_TILE_SIZE_REM = { minHeight: 6.75, maxHeight: 11,
  *
  * width is being increased by 1rem to account for the gap width desired for the VerticalGallery.
  *
- * Add 1.5 rem on width to account for horizontal padding
- *
  * @param shouldFloatLocalVideo whether rendered in floating layout or not
  * @returns Style set for VerticalGallery container.
  */
@@ -47,20 +45,20 @@ export const verticalGalleryContainerStyle = (
 ): IStyle => {
   return isNarrow && isShort
     ? {
-        width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,
+        width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
         height: shouldFloatLocalVideo ? `calc(100% - ${SMALL_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',
         paddingBottom: '0.5rem'
       }
     : !isNarrow && isShort
     ? {
-        width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,
+        width: `${SHORT_VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
         height: shouldFloatLocalVideo
           ? `calc(100% - ${SHORT_VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)`
           : '100%',
         paddingBottom: '0.5rem'
       }
     : {
-        width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width + 1.5}rem`,
+        width: `${VERTICAL_GALLERY_TILE_SIZE_REM.width}rem`,
         height: shouldFloatLocalVideo ? `calc(100% - ${VERTICAL_GALLERY_FLOATING_MODAL_SIZE_REM.height}rem)` : '100%',
         paddingBottom: '0.5rem'
       };