Fix: Prevent floating local video being dragged offscreen in VideoGallery (#1725)

Author: JamesBurnside

change/@internal-react-components-a34ce727-b847-411c-a3d9-f2ccfe0911b1.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix floating local video tile going offscreen in the VideoGallery Component",
+  "packageName": "@internal/react-components",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -43,6 +43,11 @@ import { useWindow } from '@fluentui/react-window-provider';
 
 // @TODO - need to change this to a panel whenever the breakpoint is under medium (verify the spec)
 
+interface ExtendedIModalProps extends IModalProps {
+  minDragPosition?: ICoordinates;
+  maxDragPosition?: ICoordinates;
+}
+
 const animationDuration = AnimationVariables.durationValue2;
 type ICoordinates = { x: number; y: number };
 
@@ -66,7 +71,7 @@ interface IModalInternalState {
 
 const ZERO: ICoordinates = { x: 0, y: 0 };
 
-const DEFAULT_PROPS: Partial<IModalProps> = {
+const DEFAULT_PROPS: Partial<ExtendedIModalProps> = {
   isOpen: false,
   isDarkOverlay: true,
   className: '',
@@ -103,7 +108,7 @@ const useComponentRef = (props: IModalProps, focusTrapZone: React.RefObject<IFoc
   );
 };
 
-const ModalBase: React.FunctionComponent<IModalProps> = React.forwardRef<HTMLDivElement, IModalProps>(
+const ModalBase: React.FunctionComponent<ExtendedIModalProps> = React.forwardRef<HTMLDivElement, ExtendedIModalProps>(
   (propsWithoutDefaults, ref) => {
     const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
     const {
@@ -133,7 +138,9 @@ const ModalBase: React.FunctionComponent<IModalProps> = React.forwardRef<HTMLDiv
       onLayerDidMount,
       isModeless,
       dragOptions,
-      onDismissed
+      onDismissed,
+      minDragPosition,
+      maxDragPosition
     } = props;
 
     const rootRef = React.useRef<HTMLDivElement>(null);
@@ -221,8 +228,8 @@ const ModalBase: React.FunctionComponent<IModalProps> = React.forwardRef<HTMLDiv
 
         if (keepInBounds) {
           // x/y are unavailable in IE, so use the equivalent left/top
-          internalState.minPosition = { x: -modalRectangle.left, y: -modalRectangle.top };
-          internalState.maxPosition = { x: modalRectangle.left, y: modalRectangle.top };
+          internalState.minPosition = minDragPosition ?? { x: -modalRectangle.left, y: -modalRectangle.top };
+          internalState.maxPosition = maxDragPosition ?? { x: modalRectangle.left, y: modalRectangle.top };
         }
       }
     };
@@ -1029,13 +1036,12 @@ const getStyles = (props: IModalStyleProps): IModalStyles => {
 };
 
 /** @private */
-export const ModalClone: React.FunctionComponent<IModalProps> = styled<IModalProps, IModalStyleProps, IModalStyles>(
-  ModalBase,
-  getStyles,
-  undefined,
-  {
-    scope: 'Modal',
-    fields: ['theme', 'styles', 'enableAriaHiddenSiblings']
-  }
-);
+export const ModalClone: React.FunctionComponent<ExtendedIModalProps> = styled<
+  ExtendedIModalProps,
+  IModalStyleProps,
+  IModalStyles
+>(ModalBase, getStyles, undefined, {
+  scope: 'Modal',
+  fields: ['theme', 'styles', 'enableAriaHiddenSiblings']
+});
 ModalClone.displayName = 'Modal';

packages/react-components/src/components/ModalClone/README.md

@@ -2,8 +2,16 @@
 
 ModalClone is a direct clone of https://github.com/microsoft/fluentui/blob/b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577/packages/react/src/components/Modal/Modal.ts
 
-The only alteration to these files is that the `FocusTrapZone` inside `ModalBase` has the prop `disabled` set to `true`.
+This has two deviations from Fluent's Modal:
+1. The `FocusTrapZone` inside `ModalBase` has the prop `disabled` set to `true`.
+    This is to workaround a Fluent A11y bug where the modal is stealing focus and not letting a user keyboard navigate outside the modal: https://github.com/microsoft/fluentui/issues/18924
+2. The Modal interface has been extended to allow setting the min and max draggable bounds of the modal:
+    ```ts
+    interface ExtendedIModalProps extends IModalProps {
+      minDragPosition?: ICoordinates;
+      maxDragPosition?: ICoordinates;
+    }
+    ```
+    This is to workaround: https://github.com/microsoft/fluentui/issues/20122. Without this the modal can be dragged offscreen.
 
-This is to workaround a Fluent A11y bug where the modal is stealing focus and not letting a user keyboard navigate outside the modal: https://github.com/microsoft/fluentui/issues/18924
-
-Once this is resolved delete both `ModalClone.tsx`.
+Once these are resolved `ModalClone.tsx` should be deleted and throughout ouur code we should use Fluent's `<Modal />` component.

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

@@ -31,7 +31,8 @@ import {
   layerHostStyle,
   localVideoTileContainerStyle,
   videoGalleryContainerStyle,
-  videoGalleryOuterDivStyle
+  videoGalleryOuterDivStyle,
+  localVideoTileStartPositionPX
 } from './styles/VideoGallery.styles';
 import { isNarrowWidth, useContainerWidth } from './utils/responsive';
 import { LocalScreenShare } from './VideoGallery/LocalScreenShare';
@@ -156,6 +157,12 @@ const DRAG_OPTIONS: IDragOptions = {
   keepInBounds: true
 };
 
+// Manually override the max position used to keep the modal in the bounds of its container.
+// This is a workaround for: https://github.com/microsoft/fluentui/issues/20122
+// Because our modal starts in the bottom right corner, we can say that this is the max (i.e. rightmost and bottomost)
+// position the modal can be dragged to.
+const maxDragPosition = { x: localVideoTileStartPositionPX.bottom, y: localVideoTileStartPositionPX.right };
+
 /**
  * VideoGallery represents a layout of video tiles for a specific call.
  * It displays a {@link VideoTile} for the local user as well as for each remote participant who has joined the call.
@@ -386,6 +393,7 @@ export const VideoGallery = (props: VideoGalleryProps): JSX.Element => {
             dragOptions={DRAG_OPTIONS}
             styles={floatingLocalVideoModalStyle(theme, isNarrow)}
             layerProps={{ hostId: layerHostId }}
+            maxDragPosition={maxDragPosition}
           >
             {localVideoTile}
           </ModalClone>

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

@@ -14,6 +14,7 @@ import {
 } from '@fluentui/react';
 import { VideoTileStylesProps } from '../VideoTile';
 import { HorizontalGalleryStyles } from '../HorizontalGallery';
+import { _pxToRem } from '@internal/acs-ui-common';
 
 /**
  * @private
@@ -67,6 +68,12 @@ export const floatingLocalVideoModalStyle = (
   );
 };
 
+/** @private */
+export const localVideoTileStartPositionPX = {
+  bottom: 8,
+  right: 8
+};
+
 /**
  * @private
  */
@@ -75,10 +82,12 @@ export const localVideoTileContainerStyle = (theme: Theme, isNarrow?: boolean):
     minWidth: isNarrow ? `${SMALL_FLOATING_MODAL_SIZE_REM.width}rem` : `${LARGE_FLOATING_MODAL_SIZE_REM.width}rem`,
     minHeight: isNarrow ? `${SMALL_FLOATING_MODAL_SIZE_REM.height}rem` : `${LARGE_FLOATING_MODAL_SIZE_REM.height}rem`,
     position: 'absolute',
-    bottom: '0.5rem',
+    bottom: `${_pxToRem(localVideoTileStartPositionPX.bottom)}`,
     borderRadius: theme.effects.roundedCorner4,
     overflow: 'hidden',
-    ...(theme.rtl ? { left: '0.5rem' } : { right: '0.5rem' })
+    ...(theme.rtl
+      ? { left: `${_pxToRem(localVideoTileStartPositionPX.right)}` }
+      : { right: `${_pxToRem(localVideoTileStartPositionPX.right)}` })
   };
 };