ref(filmstrip) Remove the option to disable thumbnail re-ordering.

config.js

@@ -65,10 +65,6 @@ var config = {
         // issues related to insertable streams.
         // disableE2EE: false,
 
-        // Enables/disables thumbnail reordering in the filmstrip. It is enabled by default unless explicitly
-        // disabled by the below option.
-        // enableThumbnailReordering: true,
-
         // Enables XMPP WebSocket (as opposed to BOSH) for the given amount of users.
         // mobileXmppWsThreshold: 10, // enable XMPP WebSockets on mobile for 10% of the users
 

react/features/base/config/configType.ts

@@ -448,7 +448,6 @@ export interface IConfig {
         callStatsThreshold?: number;
         capScreenshareBitrate?: number;
         disableE2EE?: boolean;
-        enableThumbnailReordering?: boolean;
         mobileXmppWsThreshold?: number;
         noAutoPlayVideo?: boolean;
         p2pTestMode?: boolean;

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

@@ -169,11 +169,6 @@ interface IProps extends WithTranslation {
      */
     _thumbnailWidth: number;
 
-    /**
-     * Flag that indicates whether the thumbnails will be reordered.
-     */
-    _thumbnailsReordered: Boolean;
-
     /**
      * Whether or not the filmstrip is top panel.
      */
@@ -551,11 +546,11 @@ class Filmstrip extends PureComponent <IProps, State> {
      * @returns {Object}
      */
     _calculateIndices(startIndex: number, stopIndex: number) {
-        const { _currentLayout, _iAmRecorder, _thumbnailsReordered, _disableSelfView } = this.props;
+        const { _currentLayout, _iAmRecorder, _disableSelfView } = this.props;
         let start = startIndex;
         let stop = stopIndex;
 
-        if (_thumbnailsReordered && !_disableSelfView) {
+        if (!_disableSelfView) {
             // In tile view, the indices needs to be offset by 1 because the first thumbnail is that of the local
             // endpoint. The remote participants start from index 1.
             if (!_iAmRecorder && _currentLayout === LAYOUTS.TILE_VIEW) {
@@ -609,14 +604,13 @@ class Filmstrip extends PureComponent <IProps, State> {
             _columns,
             _iAmRecorder,
             _remoteParticipants,
-            _remoteParticipantsLength,
+            _remoteParticipantsLength
-            _thumbnailsReordered
         } = this.props;
         const index = (rowIndex * _columns) + columnIndex;
 
         // When the thumbnails are reordered, local participant is inserted at index 0.
-        const localIndex = _thumbnailsReordered && !_disableSelfView ? 0 : _remoteParticipantsLength;
+        const localIndex = _disableSelfView ? _remoteParticipantsLength : 0;
-        const remoteIndex = _thumbnailsReordered && !_iAmRecorder && !_disableSelfView ? index - 1 : index;
+        const remoteIndex = !_iAmRecorder && !_disableSelfView ? index - 1 : index;
 
         if (index > _remoteParticipantsLength - (_iAmRecorder ? 1 : 0)) {
             return `empty-${index}`;
@@ -883,8 +877,7 @@ class Filmstrip extends PureComponent <IProps, State> {
 function _mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) {
     const { _hasScroll = false, filmstripType, _topPanelFilmstrip, _remoteParticipants } = ownProps;
     const toolbarButtons = getToolbarButtons(state);
-    const { testing = {}, iAmRecorder } = state['features/base/config'];
+    const { iAmRecorder } = state['features/base/config'];
-    const enableThumbnailReordering = testing.enableThumbnailReordering ?? true;
     const { topPanelHeight, topPanelVisible, visible, width: verticalFilmstripWidth } = state['features/filmstrip'];
     const { localScreenShare } = state['features/base/participants'];
     const reduceHeight = state['features/toolbox'].visible && toolbarButtons.length;
@@ -929,7 +922,6 @@ function _mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) {
         _maxFilmstripWidth: clientWidth - MIN_STAGE_VIEW_WIDTH,
         _maxTopPanelHeight: clientHeight - MIN_STAGE_VIEW_HEIGHT,
         _remoteParticipantsLength: _remoteParticipants?.length,
-        _thumbnailsReordered: enableThumbnailReordering,
         _topPanelHeight: topPanelHeight.current,
         _topPanelMaxHeight: topPanelHeight.current || TOP_FILMSTRIP_HEIGHT,
         _topPanelVisible,

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

@@ -153,9 +153,7 @@ function _mapStateToProps(state, ownProps) {
     const _currentLayout = getCurrentLayout(state);
     const { remoteParticipants: remote } = state['features/filmstrip'];
     const activeParticipants = getActiveParticipantsIds(state);
-    const { testing = {} } = state['features/base/config'];
     const disableSelfView = shouldHideSelfView(state);
-    const enableThumbnailReordering = testing.enableThumbnailReordering ?? true;
     const sourceNameSignalingEnabled = getSourceNameSignalingFeatureFlag(state);
     const _verticalViewGrid = showGridInVerticalView(state);
     const filmstripType = ownProps.data?.filmstripType;
@@ -244,18 +242,18 @@ function _mapStateToProps(state, ownProps) {
         }
 
         // When the thumbnails are reordered, local participant is inserted at index 0.
-        const localIndex = enableThumbnailReordering && !disableSelfView ? 0 : remoteParticipantsLength;
+        const localIndex = disableSelfView ? remoteParticipantsLength : 0;
 
         // Local screen share is inserted at index 1 after the local camera.
-        const localScreenShareIndex = enableThumbnailReordering && !disableSelfView ? 1 : remoteParticipantsLength;
+        const localScreenShareIndex = disableSelfView ? remoteParticipantsLength : 1;
 
         let remoteIndex;
 
         if (sourceNameSignalingEnabled) {
-            remoteIndex = enableThumbnailReordering && !iAmRecorder && !disableSelfView
+            remoteIndex = !iAmRecorder && !disableSelfView
                 ? index - localParticipantsLength : index;
         } else {
-            remoteIndex = enableThumbnailReordering && !iAmRecorder && !disableSelfView ? index - 1 : index;
+            remoteIndex = !iAmRecorder && !disableSelfView ? index - 1 : index;
         }
 
         if (!iAmRecorder && index === localIndex) {

react/features/filmstrip/functions.any.js

@@ -17,10 +17,9 @@ import { isFilmstripScrollVisible } from './functions';
 export function updateRemoteParticipants(store: Object, participantId: ?number) {
     const state = store.getState();
     let reorderedParticipants = [];
-
     const { sortedRemoteVirtualScreenshareParticipants } = state['features/base/participants'];
 
-    if (!isReorderingEnabled(state) && !sortedRemoteVirtualScreenshareParticipants.size) {
+    if (!isFilmstripScrollVisible(state) && !sortedRemoteVirtualScreenshareParticipants.size) {
         if (participantId) {
             const { remoteParticipants } = state['features/filmstrip'];
 
@@ -114,17 +113,3 @@ export function updateRemoteParticipantsOnLeave(store: Object, participantId: ?s
     reorderedParticipants.delete(participantId)
         && store.dispatch(setRemoteParticipants(Array.from(reorderedParticipants)));
 }
-
-/**
- * Returns true if thumbnail reordering is enabled and false otherwise.
- * Note: The function will return false if all participants are displayed on the screen.
- *
- * @param {Object} state - The redux state.
- * @returns {boolean} - True if thumbnail reordering is enabled and false otherwise.
- */
-export function isReorderingEnabled(state) {
-    const { testing = {} } = state['features/base/config'];
-    const enableThumbnailReordering = testing.enableThumbnailReordering ?? true;
-
-    return enableThumbnailReordering && isFilmstripScrollVisible(state);
-}