fix(screenshare-filmstrip) Fix pin screenshare (#11892)

On click on a screenshare pin that to stage (allows users to choose between multiple screenshares)

react/features/filmstrip/actionTypes.ts

@@ -206,6 +206,16 @@ export const TOGGLE_PIN_STAGE_PARTICIPANT = 'TOGGLE_PIN_STAGE_PARTICIPANT';
  */
 export const CLEAR_STAGE_PARTICIPANTS = 'CLEAR_STAGE_PARTICIPANTS';
 
+/**
+ * The type of Redux action which sets the participant to be displayed
+ * on the screenshare filmstrip.
+ * {
+ *     type: SET_SCREENSHARE_FILMSTRIP_PARTICIPANT,
+ *     participantId: string|undefined
+ * }
+ */
+export const SET_SCREENSHARE_FILMSTRIP_PARTICIPANT = 'SET_SCREENSHARE_FILMSTRIP_PARTICIPANT';
+
 /**
  * The type of Redux action which sets the dimensions of the screenshare tile.
  * {

react/features/filmstrip/actions.web.js

@@ -29,7 +29,8 @@ import {
     SET_SCREENSHARING_TILE_DIMENSIONS,
     SET_USER_FILMSTRIP_HEIGHT,
     SET_FILMSTRIP_HEIGHT,
-    SET_TOP_PANEL_VISIBILITY
+    SET_TOP_PANEL_VISIBILITY,
+    SET_SCREENSHARE_FILMSTRIP_PARTICIPANT
 } from './actionTypes';
 import {
     HORIZONTAL_FILMSTRIP_MARGIN,
@@ -573,3 +574,16 @@ export function setTopPanelVisible(visible) {
         visible
     };
 }
+
+/**
+ * Sets the participant whose screenshare to be displayed on the filmstrip.
+ *
+ * @param {string|undefined} participantId - The id of the participant to be set.
+ * @returns {Object}
+ */
+export function setScreenshareFilmstripParticipant(participantId) {
+    return {
+        type: SET_SCREENSHARE_FILMSTRIP_PARTICIPANT,
+        participantId
+    };
+}

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

@@ -101,18 +101,26 @@ const ScreenshareFilmstrip = (props: Props) => props._currentLayout === LAYOUTS.
  */
 function _mapStateToProps(state) {
     const {
-        filmstripHeight,
+        screenshareFilmstripDimensions: {
-        filmstripWidth,
+            filmstripHeight,
-        thumbnailSize
+            filmstripWidth,
-    } = state['features/filmstrip'].screenshareFilmstripDimensions;
+            thumbnailSize
+        },
+        screenshareFilmstripParticipantId
+    } = state['features/filmstrip'];
     const screenshares = state['features/video-layout'].remoteScreenShares;
+    let id = screenshares.find(sId => sId === screenshareFilmstripParticipantId);
+
+    if (!id && screenshares.length) {
+        id = screenshares[0];
+    }
 
     return {
         _columns: 1,
         _currentLayout: getCurrentLayout(state),
         _filmstripHeight: filmstripHeight,
         _filmstripWidth: filmstripWidth,
-        _remoteParticipants: screenshares.length ? [ screenshares[0] ] : [],
+        _remoteParticipants: id ? [ id ] : [],
         _resizableFilmstrip: false,
         _rows: 1,
         _thumbnailWidth: thumbnailSize?.width,

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

@@ -288,11 +288,17 @@ function _mapStateToProps(state, ownProps) {
     }
 
     if (_currentLayout === LAYOUTS.STAGE_FILMSTRIP_VIEW && filmstripType === FILMSTRIP_TYPE.SCREENSHARE) {
-        const { remoteScreenShares } = state['features/video-layout'];
+        const { screenshareFilmstripParticipantId } = state['features/filmstrip'];
+        const screenshares = state['features/video-layout'].remoteScreenShares;
+        let id = screenshares.find(sId => sId === screenshareFilmstripParticipantId);
+
+        if (!id && screenshares.length) {
+            id = screenshares[screenshares.length - 1];
+        }
 
         return {
             _filmstripType: filmstripType,
-            _participantID: remoteScreenShares[remoteScreenShares.length - 1]
+            _participantID: id
         };
     }
 

react/features/filmstrip/middleware.web.js

@@ -33,8 +33,9 @@ import {
     removeStageParticipant,
     setFilmstripHeight,
     setFilmstripWidth,
+    setScreenshareFilmstripParticipant,
     setStageParticipants
-} from './actions';
+} from './actions.web';
 import {
     ACTIVE_PARTICIPANT_TIMEOUT,
     DEFAULT_FILMSTRIP_WIDTH,
@@ -45,12 +46,13 @@ import {
 } from './constants';
 import {
     isFilmstripResizable,
+    isTopPanelEnabled,
+    isStageFilmstripAvailable,
     updateRemoteParticipants,
     updateRemoteParticipantsOnLeave,
     getActiveParticipantsIds,
-    getPinnedActiveParticipants,
+    getPinnedActiveParticipants
-    isStageFilmstripAvailable
+} from './functions.web';
-} from './functions';
 import './subscriber';
 
 /**
@@ -276,6 +278,15 @@ MiddlewareRegistry.register(store => next => action => {
         const pinnedParticipants = getPinnedActiveParticipants(state);
         const dominant = getDominantSpeakerParticipant(state);
 
+        if (isTopPanelEnabled(state)) {
+            const screenshares = state['features/video-layout'].remoteScreenShares;
+
+            if (screenshares.find(sId => sId === participantId)) {
+                dispatch(setScreenshareFilmstripParticipant(participantId));
+                break;
+            }
+        }
+
         if (pinnedParticipants.find(p => p.participantId === participantId)) {
             if (dominant?.id === participantId) {
                 const { activeParticipants } = state['features/filmstrip'];

react/features/filmstrip/reducer.js

@@ -23,7 +23,8 @@ import {
     SET_SCREENSHARING_TILE_DIMENSIONS,
     SET_USER_FILMSTRIP_HEIGHT,
     SET_FILMSTRIP_HEIGHT,
-    SET_TOP_PANEL_VISIBILITY
+    SET_TOP_PANEL_VISIBILITY,
+    SET_SCREENSHARE_FILMSTRIP_PARTICIPANT
 } from './actionTypes';
 
 const DEFAULT_STATE = {
@@ -85,6 +86,12 @@ const DEFAULT_STATE = {
      */
     screenshareFilmstripDimensions: {},
 
+    /**
+     * The id of the participant whose screenshare to
+     * display on the screenshare filmstrip.
+     */
+    screenshareFilmstripParticipantId: null,
+
     /**
      * The stage filmstrip view dimensions.
      *
@@ -345,6 +352,12 @@ ReducerRegistry.register(
                 topPanelVisible: action.visible
             };
         }
+        case SET_SCREENSHARE_FILMSTRIP_PARTICIPANT: {
+            return {
+                ...state,
+                screenshareFilmstripParticipantId: action.participantId
+            };
+        }
         }
 
         return state;

react/features/filmstrip/subscriber.web.js

@@ -16,9 +16,10 @@ import {
     setHorizontalViewDimensions,
     setScreensharingTileDimensions,
     setStageFilmstripViewDimensions,
+    setScreenshareFilmstripParticipant,
     setTileViewDimensions,
     setVerticalViewDimensions
-} from './actions';
+} from './actions.web';
 import {
     ASPECT_RATIO_BREAKPOINT,
     DISPLAY_DRAWER_THRESHOLD
@@ -26,7 +27,7 @@ import {
 import {
     isFilmstripResizable,
     isTopPanelEnabled
-} from './functions';
+} from './functions.web';
 
 import './subscriber.any';
 
@@ -227,3 +228,16 @@ StateListenerRegistry.register(
         deepEquals: true
     });
 
+/**
+ * Listens for changes to clear invalid data.
+ */
+StateListenerRegistry.register(
+    /* selector */ state => state['features/video-layout'].remoteScreenShares.length,
+    /* listener */(length, store) => {
+        if (length === 0) {
+            store.dispatch(setScreenshareFilmstripParticipant());
+        }
+    }, {
+        deepEquals: true
+    });
+