fix(filmstrip) Fix resizing on chat toggle (#11305)

Fix pinned indicator to be displayed only for pinned participants

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

@@ -18,7 +18,6 @@ import { translate } from '../../../base/i18n';
 import { Icon, IconMenuDown, IconMenuUp } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import { shouldHideSelfView } from '../../../base/settings/functions.any';
-import { CHAT_SIZE } from '../../../chat';
 import { showToolbox } from '../../../toolbox/actions.web';
 import { isButtonEnabled, isToolboxVisible } from '../../../toolbox/functions.web';
 import { LAYOUTS } from '../../../video-layout';
@@ -58,11 +57,6 @@ type Props = {
      */
     _className: string,
 
-    /**
-     * Whether or not the chat is open.
-     */
-    _chatOpen: boolean,
-
     /**
      * The current layout of the filmstrip.
      */
@@ -305,7 +299,6 @@ class Filmstrip extends PureComponent <Props, State> {
     render() {
         const filmstripStyle = { };
         const {
-            _chatOpen,
             _currentLayout,
             _disableSelfView,
             _resizableFilmstrip,
@@ -329,7 +322,7 @@ class Filmstrip extends PureComponent <Props, State> {
         }
         case LAYOUTS.TILE_VIEW: {
             if (_stageFilmstrip && _visible) {
-                filmstripStyle.maxWidth = `calc(100% - ${_verticalViewMaxWidth}px - ${_chatOpen ? CHAT_SIZE : 0}px)`;
+                filmstripStyle.maxWidth = `calc(100% - ${_verticalViewMaxWidth}px)`;
             }
             break;
         }

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

@@ -6,7 +6,6 @@ import { useSelector } from 'react-redux';
 
 import { IconPinParticipant } from '../../../base/icons';
 import { BaseIndicator } from '../../../base/react';
-import { getActiveParticipantsIds } from '../../functions.web';
 
 /**
  * The type of the React {@code Component} props of {@link PinnedIndicator}.
@@ -53,7 +52,8 @@ const PinnedIndicator = ({
     participantId,
     tooltipPosition
 }: Props) => {
-    const isPinned = useSelector(getActiveParticipantsIds).find(id => id === participantId);
+    const isPinned = useSelector(state => state['features/filmstrip'].activeParticipants)
+        .find(p => p.id === participantId && p.pinned);
     const styles = useStyles();
 
     if (!isPinned) {