feat(chat): Make chat push content to the side in tile view

css/_base.scss

@@ -33,6 +33,26 @@ body {
     }
 }
 
+/**
+ * AtlasKit sets a default margin on the rendered modals, so
+ * when the shift-right class is set when the chat opens, we
+ * pad the modal container in order for the modals to be centered
+ * while also taking the chat size into consideration.
+*/
+@media (min-width: 480px + $sidebarWidth) {
+    .shift-right [class^="Modal__FillScreen"] {
+        padding-left: $sidebarWidth;
+    }
+}
+
+/**
+ * Similarly, we offset the notifications when the chat is open by
+ * padding the container.
+*/
+.shift-right [class^="styledFlagGroup-"] {
+    padding-left: $sidebarWidth;
+}
+
 .jitsi-icon svg {
     fill: white;
 }

css/filmstrip/_tile_view.scss

@@ -46,7 +46,16 @@
         position: fixed;
         top: 0;
         width: 100%;
-        z-index: $filmstripVideosZ
+        z-index: $filmstripVideosZ;
+
+        &.shift-right {
+            margin-left: $sidebarWidth;
+            width: calc(100% - #{$sidebarWidth});
+
+            #filmstripRemoteVideos {
+                width: calc(100vw - #{$sidebarWidth});
+            }
+        }
     }
 
     /**

react/features/filmstrip/actions.web.js

@@ -1,5 +1,7 @@
 // @flow
 
+import { CHAT_SIZE } from '../chat/constants';
+
 import { SET_HORIZONTAL_VIEW_DIMENSIONS, SET_TILE_VIEW_DIMENSIONS } from './actionTypes';
 import { calculateThumbnailSizeForHorizontalView, calculateThumbnailSizeForTileView } from './functions';
 
@@ -13,15 +15,25 @@ const TILE_VIEW_SIDE_MARGINS = 10 * 2;
  *
  * @param {Object} dimensions - Whether the filmstrip is visible.
  * @param {Object} windowSize - The size of the window.
+ * @param {boolean} isChatOpen - Whether the chat panel is displayed, in
+ * order to properly compute the tile view size.
  * @returns {{
  *     type: SET_TILE_VIEW_DIMENSIONS,
  *     dimensions: Object
  * }}
  */
-export function setTileViewDimensions(dimensions: Object, windowSize: Object) {
+export function setTileViewDimensions(dimensions: Object, windowSize: Object, isChatOpen: boolean) {
+    const { clientWidth, clientHeight } = windowSize;
+    let widthToUse = clientWidth;
+
+    if (isChatOpen) {
+        widthToUse -= CHAT_SIZE;
+    }
+
     const thumbnailSize = calculateThumbnailSizeForTileView({
         ...dimensions,
-        ...windowSize
+        clientWidth: widthToUse,
+        clientHeight
     });
     const filmstripWidth = dimensions.columns * (TILE_VIEW_SIDE_MARGINS + thumbnailSize.width);
 

react/features/filmstrip/components/native/TileView.js

@@ -10,7 +10,7 @@ import type { Dispatch } from 'redux';
 
 import { connect } from '../../../base/redux';
 import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
-import { setTileViewDimensions } from '../../actions';
+import { setTileViewDimensions } from '../../actions.native';
 
 import Thumbnail from './Thumbnail';
 import styles from './styles';

react/features/filmstrip/components/web/Filmstrip.js

@@ -371,13 +371,15 @@ function _mapStateToProps(state) {
     const reduceHeight
         = !isFilmstripOnly && state['features/toolbox'].visible && interfaceConfig.TOOLBAR_BUTTONS.length;
     const remoteVideosVisible = shouldRemoteVideosBeVisible(state);
-    const className = `${remoteVideosVisible ? '' : 'hide-videos'} ${reduceHeight ? 'reduce-height' : ''}`.trim();
+    const { isOpen: shiftRight } = state['features/chat'];
+    const className = `${remoteVideosVisible ? '' : 'hide-videos'} ${
+        reduceHeight ? 'reduce-height' : ''
+    } ${shiftRight ? 'shift-right' : ''}`.trim();
     const videosClassName = `filmstrip__videos${
         isFilmstripOnly ? ' filmstrip__videos-filmstripOnly' : ''}${
         visible ? '' : ' hidden'}`;
     const { gridDimensions = {}, filmstripWidth } = state['features/filmstrip'].tileViewDimensions;
 
-
     return {
         _className: className,
         _columns: gridDimensions.columns,

react/features/filmstrip/middleware.web.js

@@ -10,7 +10,7 @@ import {
 } from '../video-layout';
 
 import { SET_HORIZONTAL_VIEW_DIMENSIONS, SET_TILE_VIEW_DIMENSIONS } from './actionTypes';
-import { setHorizontalViewDimensions, setTileViewDimensions } from './actions';
+import { setHorizontalViewDimensions, setTileViewDimensions } from './actions.web';
 
 import './subscriber.web';
 
@@ -29,11 +29,18 @@ MiddlewareRegistry.register(store => next => action => {
         case LAYOUTS.TILE_VIEW: {
             const { gridDimensions } = state['features/filmstrip'].tileViewDimensions;
             const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+            const { isOpen } = state['features/chat'];
 
-            store.dispatch(setTileViewDimensions(gridDimensions, {
+            store.dispatch(
-                clientHeight,
+                setTileViewDimensions(
-                clientWidth
+                    gridDimensions,
-            }));
+                    {
+                        clientHeight,
+                        clientWidth
+                    },
+                    isOpen
+                )
+            );
             break;
         }
         case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW:

react/features/filmstrip/subscriber.web.js

@@ -5,7 +5,7 @@ import VideoLayout from '../../../modules/UI/videolayout/VideoLayout';
 import { StateListenerRegistry, equals } from '../base/redux';
 import { getCurrentLayout, getTileViewGridDimensions, shouldDisplayTileView, LAYOUTS } from '../video-layout';
 
-import { setHorizontalViewDimensions, setTileViewDimensions } from './actions';
+import { setHorizontalViewDimensions, setTileViewDimensions } from './actions.web';
 
 /**
  * Listens for changes in the number of participants to calculate the dimensions of the tile view grid and the tiles.
@@ -19,12 +19,19 @@ StateListenerRegistry.register(
             const gridDimensions = getTileViewGridDimensions(state);
             const oldGridDimensions = state['features/filmstrip'].tileViewDimensions.gridDimensions;
             const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+            const { isOpen } = state['features/chat'];
 
             if (!equals(gridDimensions, oldGridDimensions)) {
-                store.dispatch(setTileViewDimensions(gridDimensions, {
+                store.dispatch(
-                    clientHeight,
+                    setTileViewDimensions(
-                    clientWidth
+                        gridDimensions,
-                }));
+                        {
+                            clientHeight,
+                            clientWidth
+                        },
+                        isOpen
+                    )
+                );
             }
         }
     });
@@ -40,12 +47,18 @@ StateListenerRegistry.register(
         switch (layout) {
         case LAYOUTS.TILE_VIEW: {
             const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+            const { isOpen } = state['features/chat'];
 
-            store.dispatch(setTileViewDimensions(
+            store.dispatch(
-                getTileViewGridDimensions(state), {
+                setTileViewDimensions(
-                    clientHeight,
+                    getTileViewGridDimensions(state),
-                    clientWidth
+                    {
-                }));
+                        clientHeight,
+                        clientWidth
+                    },
+                    isOpen
+                )
+            );
             break;
         }
         case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW:
@@ -76,3 +89,36 @@ StateListenerRegistry.register(
         }
     }
 );
+
+/**
+ * Listens for changes in the chat state to calculate the dimensions of the tile view grid and the tiles.
+ */
+StateListenerRegistry.register(
+    /* selector */ state => state['features/chat'].isOpen,
+    /* listener */ (isChatOpen, store) => {
+        const state = store.getState();
+
+        if (isChatOpen) {
+            // $FlowFixMe
+            document.body.classList.add('shift-right');
+        } else {
+            // $FlowFixMe
+            document.body.classList.remove('shift-right');
+        }
+
+        if (shouldDisplayTileView(state)) {
+            const gridDimensions = getTileViewGridDimensions(state);
+            const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+
+            store.dispatch(
+                setTileViewDimensions(
+                    gridDimensions,
+                    {
+                        clientHeight,
+                        clientWidth
+                    },
+                    isChatOpen
+                )
+            );
+        }
+    });