init

react/features/video-layout/actionTypes.ts

@@ -0,0 +1,30 @@
+/**
+ * The type of the action which tells whether we are in carmode.
+ *
+ * @returns {{
+ *     type: SET_CAR_MODE,
+ *     enabled: boolean
+ * }}
+ */
+export const SET_CAR_MODE = ' SET_CAR_MODE';
+
+/**
+ * The type of the action which enables or disables the feature for showing
+ * video thumbnails in a two-axis tile view.
+ *
+ * @returns {{
+ *     type: SET_TILE_VIEW,
+ *     enabled: boolean
+ * }}
+ */
+export const SET_TILE_VIEW = 'SET_TILE_VIEW';
+
+/**
+ * The type of the action which sets the list of known remote virtual screen share participant IDs.
+ *
+ * @returns {{
+ *     type: VIRTUAL_SCREENSHARE_REMOTE_PARTICIPANTS_UPDATED,
+ *     participantIds: Array<string>
+ * }}
+ */
+export const VIRTUAL_SCREENSHARE_REMOTE_PARTICIPANTS_UPDATED = 'VIRTUAL_SCREENSHARE_REMOTE_PARTICIPANTS_UPDATED';

react/features/video-layout/actions.any.ts

@@ -0,0 +1,60 @@
+import { IStore } from '../app/types';
+import { isTileViewModeDisabled } from '../filmstrip/functions.any';
+
+import {
+    SET_TILE_VIEW,
+    VIRTUAL_SCREENSHARE_REMOTE_PARTICIPANTS_UPDATED
+} from './actionTypes';
+import { shouldDisplayTileView } from './functions';
+
+/**
+ * Creates a (redux) action which signals that the list of known remote virtual screen share participant ids has
+ * changed.
+ *
+ * @param {string} participantIds - The remote virtual screen share participants.
+ * @returns {{
+ *     type: VIRTUAL_SCREENSHARE_REMOTE_PARTICIPANTS_UPDATED,
+ *     participantIds: Array<string>
+ * }}
+ */
+export function virtualScreenshareParticipantsUpdated(participantIds: Array<string>) {
+    return {
+        type: VIRTUAL_SCREENSHARE_REMOTE_PARTICIPANTS_UPDATED,
+        participantIds
+    };
+}
+
+/**
+ * Creates a (redux) action which signals to set the UI layout to be tiled view
+ * or not.
+ *
+ * @param {boolean} enabled - Whether or not tile view should be shown.
+ * @returns {{
+ *     type: SET_TILE_VIEW,
+ *     enabled: ?boolean
+ * }}
+ */
+export function setTileView(enabled?: boolean) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const tileViewDisabled = isTileViewModeDisabled(getState());
+
+        !tileViewDisabled && dispatch({
+            type: SET_TILE_VIEW,
+            enabled
+        });
+    };
+}
+
+/**
+ * Creates a (redux) action which signals either to exit tile view if currently
+ * enabled or enter tile view if currently disabled.
+ *
+ * @returns {Function}
+ */
+export function toggleTileView() {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const tileViewActive = shouldDisplayTileView(getState());
+
+        dispatch(setTileView(!tileViewActive));
+    };
+}

react/features/video-layout/actions.native.ts

@@ -0,0 +1,19 @@
+import { SET_CAR_MODE } from './actionTypes';
+
+export * from './actions.any';
+
+/**
+ * Creates a (redux) action which tells whether we are in carmode.
+ *
+ * @param {boolean} enabled - Whether we are in carmode.
+ * @returns {{
+ *     type: SET_CAR_MODE,
+ *    enabled: boolean
+ * }}
+ */
+export function setIsCarmode(enabled: boolean) {
+    return {
+        type: SET_CAR_MODE,
+        enabled
+    };
+}

react/features/video-layout/actions.web.ts

@@ -0,0 +1 @@
+export * from './actions.any';

react/features/video-layout/components/TileViewButton.ts

@@ -0,0 +1,96 @@
+import { batch, connect } from 'react-redux';
+
+import { createToolbarEvent } from '../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../analytics/functions';
+import { IReduxState } from '../../app/types';
+import { TILE_VIEW_ENABLED } from '../../base/flags/constants';
+import { getFeatureFlag } from '../../base/flags/functions';
+import { translate } from '../../base/i18n/functions';
+import { IconTileView } from '../../base/icons/svg';
+import AbstractButton, { IProps as AbstractButtonProps } from '../../base/toolbox/components/AbstractButton';
+import { setOverflowMenuVisible } from '../../toolbox/actions';
+import { setTileView } from '../actions';
+import { shouldDisplayTileView } from '../functions';
+import logger from '../logger';
+
+/**
+ * The type of the React {@code Component} props of {@link TileViewButton}.
+ */
+interface IProps extends AbstractButtonProps {
+
+    /**
+     * Whether or not tile view layout has been enabled as the user preference.
+     */
+    _tileViewEnabled: boolean;
+}
+
+/**
+ * Component that renders a toolbar button for toggling the tile layout view.
+ *
+ * @augments AbstractButton
+ */
+class TileViewButton<P extends IProps> extends AbstractButton<P> {
+    override accessibilityLabel = 'toolbar.accessibilityLabel.enterTileView';
+    override toggledAccessibilityLabel = 'toolbar.accessibilityLabel.exitTileView';
+    override icon = IconTileView;
+    override label = 'toolbar.enterTileView';
+    override toggledLabel = 'toolbar.exitTileView';
+    override tooltip = 'toolbar.tileViewToggle';
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @override
+     * @protected
+     * @returns {void}
+     */
+    override _handleClick() {
+        const { _tileViewEnabled, dispatch } = this.props;
+
+        const value = !_tileViewEnabled;
+
+        sendAnalytics(createToolbarEvent(
+            'tileview.button',
+            {
+                'is_enabled': value
+            }));
+
+        logger.debug(`Tile view ${value ? 'enable' : 'disable'}`);
+        batch(() => {
+            dispatch(setTileView(value));
+            navigator.product !== 'ReactNative' && dispatch(setOverflowMenuVisible(false));
+        });
+
+    }
+
+    /**
+     * Indicates whether this button is in toggled state or not.
+     *
+     * @override
+     * @protected
+     * @returns {boolean}
+     */
+    override _isToggled() {
+        return this.props._tileViewEnabled;
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated props for the
+ * {@code TileViewButton} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Object} ownProps - The properties explicitly passed to the component instance.
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState, ownProps: any) {
+    const enabled = getFeatureFlag(state, TILE_VIEW_ENABLED, true);
+    const { visible = enabled } = ownProps;
+
+    return {
+        _tileViewEnabled: shouldDisplayTileView(state),
+        visible
+    };
+}
+
+export default translate(connect(_mapStateToProps)(TileViewButton));

react/features/video-layout/constants.ts

@@ -0,0 +1,29 @@
+/**
+ * An enumeration of the different display layouts supported by the application.
+ *
+ * @type {Object}
+ */
+export const LAYOUTS = {
+    HORIZONTAL_FILMSTRIP_VIEW: 'horizontal-filmstrip-view',
+    TILE_VIEW: 'tile-view',
+    VERTICAL_FILMSTRIP_VIEW: 'vertical-filmstrip-view',
+    STAGE_FILMSTRIP_VIEW: 'stage-filmstrip-view'
+};
+
+
+/**
+ * The CSS class to apply so CSS can modify the app layout.
+ *
+ * @private
+ */
+export const LAYOUT_CLASSNAMES = {
+    [LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW]: 'horizontal-filmstrip',
+    [LAYOUTS.TILE_VIEW]: 'tile-view',
+    [LAYOUTS.VERTICAL_FILMSTRIP_VIEW]: 'vertical-filmstrip',
+    [LAYOUTS.STAGE_FILMSTRIP_VIEW]: 'stage-filmstrip'
+};
+
+/**
+ * The minimum width of the video space. Used for calculating the maximum chat size.
+ */
+export const VIDEO_SPACE_MIN_SIZE = 500;

react/features/video-layout/functions.any.ts

@@ -0,0 +1,238 @@
+import { IReduxState, IStore } from '../app/types';
+import { TILE_VIEW_ENABLED } from '../base/flags/constants';
+import { getFeatureFlag } from '../base/flags/functions';
+import { pinParticipant } from '../base/participants/actions';
+import { getParticipantCount, getPinnedParticipant } from '../base/participants/functions';
+import { FakeParticipant } from '../base/participants/types';
+import { isStageFilmstripAvailable, isTileViewModeDisabled } from '../filmstrip/functions';
+import { isVideoPlaying } from '../shared-video/functions';
+import { VIDEO_QUALITY_LEVELS } from '../video-quality/constants';
+import { getReceiverVideoQualityLevel } from '../video-quality/functions';
+import { getMinHeightForQualityLvlMap } from '../video-quality/selector';
+
+import { LAYOUTS } from './constants';
+
+/**
+ * A selector for retrieving the current automatic pinning setting.
+ *
+ * @private
+ * @returns {string|undefined} The string "remote-only" is returned if only
+ * remote screen sharing should be automatically pinned, any other truthy value
+ * means automatically pin all screen shares. Falsy means do not automatically
+ * pin any screen shares.
+ */
+export function getAutoPinSetting() {
+    return typeof interfaceConfig === 'object'
+        ? interfaceConfig.AUTO_PIN_LATEST_SCREEN_SHARE
+        : 'remote-only';
+}
+
+/**
+ * Returns the {@code LAYOUTS} constant associated with the layout
+ * the application should currently be in.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {string}
+ */
+export function getCurrentLayout(state: IReduxState) {
+    if (navigator.product === 'ReactNative') {
+        // FIXME: what should this return?
+        return undefined;
+    } else if (shouldDisplayTileView(state)) {
+        return LAYOUTS.TILE_VIEW;
+    } else if (interfaceConfig.VERTICAL_FILMSTRIP) {
+        if (isStageFilmstripAvailable(state, 2)) {
+            return LAYOUTS.STAGE_FILMSTRIP_VIEW;
+        }
+
+        return LAYOUTS.VERTICAL_FILMSTRIP_VIEW;
+    }
+
+    return LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW;
+}
+
+/**
+ * Selector for determining if the UI layout should be in tile view. Tile view
+ * is determined by more than just having the tile view setting enabled, as
+ * one-on-one calls should not be in tile view, as well as etherpad editing.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {boolean} True if tile view should be displayed.
+ */
+export function shouldDisplayTileView(state: IReduxState) {
+    const tileViewDisabled = isTileViewModeDisabled(state);
+
+    if (tileViewDisabled) {
+        return false;
+    }
+
+    const { tileViewEnabled } = state['features/video-layout'] ?? {};
+
+    if (tileViewEnabled !== undefined) {
+        // If the user explicitly requested a view mode, we
+        // do that.
+        return tileViewEnabled;
+    }
+
+    const tileViewEnabledFeatureFlag = getFeatureFlag(state, TILE_VIEW_ENABLED, true);
+    const { disableTileView } = state['features/base/config'];
+
+    if (disableTileView || !tileViewEnabledFeatureFlag) {
+        return false;
+    }
+
+    const participantCount = getParticipantCount(state);
+    const { iAmRecorder } = state['features/base/config'];
+
+    // None tile view mode is easier to calculate (no need for many negations), so we do
+    // that and negate it only once.
+    const shouldDisplayNormalMode = Boolean(
+
+        // Reasons for normal mode:
+
+        // Editing etherpad
+        state['features/etherpad']?.editing
+
+        // We pinned a participant
+        || getPinnedParticipant(state)
+
+        // It's a 1-on-1 meeting
+        || participantCount < 3
+
+        // There is a shared YouTube video in the meeting
+        || isVideoPlaying(state)
+
+        // We want jibri to use stage view by default
+        || iAmRecorder
+    );
+
+    return !shouldDisplayNormalMode;
+}
+
+/**
+ * Private helper to automatically pin the latest screen share stream or unpin
+ * if there are no more screen share streams.
+ *
+ * @param {Array<string>} screenShares - Array containing the list of all the screen sharing endpoints
+ * before the update was triggered (including the ones that have been removed from redux because of the update).
+ * @param {Store} store - The redux store.
+ * @returns {void}
+ */
+export function updateAutoPinnedParticipant(
+        screenShares: Array<string>, { dispatch, getState }: IStore) {
+    const state = getState();
+    const remoteScreenShares = state['features/video-layout'].remoteScreenShares;
+    const pinned = getPinnedParticipant(getState);
+
+    // if the pinned participant is shared video or some other fake participant we want to skip auto-pinning
+    if (pinned?.fakeParticipant && pinned.fakeParticipant !== FakeParticipant.RemoteScreenShare) {
+        return;
+    }
+
+    // Unpin the screen share when the screen sharing participant leaves. Switch to tile view if no other
+    // participant was pinned before screen share was auto-pinned, pin the previously pinned participant otherwise.
+    if (!remoteScreenShares?.length) {
+        let participantId = null;
+
+        if (pinned && !screenShares.find(share => share === pinned.id)) {
+            participantId = pinned.id;
+        }
+        dispatch(pinParticipant(participantId));
+
+        return;
+    }
+
+    const latestScreenShareParticipantId = remoteScreenShares[remoteScreenShares.length - 1];
+
+    if (latestScreenShareParticipantId) {
+        dispatch(pinParticipant(latestScreenShareParticipantId));
+    }
+}
+
+/**
+ * Selector for whether we are currently in tile view.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {boolean}
+ */
+export function isLayoutTileView(state: IReduxState) {
+    return getCurrentLayout(state) === LAYOUTS.TILE_VIEW;
+}
+
+/**
+ * Returns the video quality for the given height.
+ *
+ * @param {number|undefined} height - Height of the video container.
+ * @returns {number}
+ */
+function getVideoQualityForHeight(height: number) {
+    if (!height) {
+        return VIDEO_QUALITY_LEVELS.LOW;
+    }
+    const levels = Object.values(VIDEO_QUALITY_LEVELS)
+        .map(Number)
+        .sort((a, b) => a - b);
+
+    for (const level of levels) {
+        if (height <= level) {
+            return level;
+        }
+    }
+
+    return VIDEO_QUALITY_LEVELS.ULTRA;
+}
+
+/**
+ * Returns the video quality level for the resizable filmstrip thumbnail height.
+ *
+ * @param {number} height - The height of the thumbnail.
+ * @param {Object} state - Redux state.
+ * @returns {number}
+ */
+export function getVideoQualityForResizableFilmstripThumbnails(height: number, state: IReduxState) {
+    if (!height) {
+        return VIDEO_QUALITY_LEVELS.LOW;
+    }
+
+    return getReceiverVideoQualityLevel(height, getMinHeightForQualityLvlMap(state));
+}
+
+/**
+ * Returns the video quality level for the screen sharing filmstrip thumbnail height.
+ *
+ * @param {number} height - The height of the thumbnail.
+ * @param {Object} state - Redux state.
+ * @returns {number}
+ */
+export function getVideoQualityForScreenSharingFilmstrip(height: number, state: IReduxState) {
+    if (!height) {
+        return VIDEO_QUALITY_LEVELS.LOW;
+    }
+
+    return getReceiverVideoQualityLevel(height, getMinHeightForQualityLvlMap(state));
+}
+
+/**
+ * Returns the video quality for the large video.
+ *
+ * @param {number} largeVideoHeight - The height of the large video.
+ * @returns {number} - The video quality for the large video.
+ */
+export function getVideoQualityForLargeVideo(largeVideoHeight: number) {
+    return getVideoQualityForHeight(largeVideoHeight);
+}
+
+/**
+ * Returns the video quality level for the thumbnails in the stage filmstrip.
+ *
+ * @param {number} height - The height of the thumbnails.
+ * @param {Object} state - Redux state.
+ * @returns {number}
+ */
+export function getVideoQualityForStageThumbnails(height: number, state: IReduxState) {
+    if (!height) {
+        return VIDEO_QUALITY_LEVELS.LOW;
+    }
+
+    return getReceiverVideoQualityLevel(height, getMinHeightForQualityLvlMap(state));
+}

react/features/video-layout/functions.native.ts

@@ -0,0 +1 @@
+export * from './functions.any';

react/features/video-layout/functions.web.ts

@@ -0,0 +1,86 @@
+import { IReduxState } from '../app/types';
+import {
+    ABSOLUTE_MAX_COLUMNS,
+    DEFAULT_MAX_COLUMNS,
+    TILE_PORTRAIT_ASPECT_RATIO
+} from '../filmstrip/constants';
+import {
+    getNumberOfPartipantsForTileView,
+    getThumbnailMinHeight,
+    getTileDefaultAspectRatio
+} from '../filmstrip/functions.web';
+
+export * from './functions.any';
+
+/**
+ * Returns how many columns should be displayed in tile view. The number
+ * returned will be between 1 and 7, inclusive.
+ *
+ * @param {Object} state - The redux store state.
+ * @param {Object} options - Object with custom values used to override the values that we get from redux by default.
+ * @param {number} options.width - Custom width to be used.
+ * @param {boolean} options.disableResponsiveTiles - Custom value to be used instead of config.disableResponsiveTiles.
+ * @param {boolean} options.disableTileEnlargement - Custom value to be used instead of config.disableTileEnlargement.
+ * @returns {number}
+ */
+export function getMaxColumnCount(state: IReduxState, options: {
+    disableResponsiveTiles?: boolean; disableTileEnlargement?: boolean; width?: number | null; } = {}) {
+    if (typeof interfaceConfig === 'undefined') {
+        return DEFAULT_MAX_COLUMNS;
+    }
+
+    const {
+        disableResponsiveTiles: configDisableResponsiveTiles,
+        disableTileEnlargement: configDisableTileEnlargement
+    } = state['features/base/config'];
+    const {
+        width,
+        disableResponsiveTiles = configDisableResponsiveTiles,
+        disableTileEnlargement = configDisableTileEnlargement
+    } = options;
+    const { videoSpaceWidth } = state['features/base/responsive-ui'];
+    const widthToUse = width || videoSpaceWidth;
+    const configuredMax = interfaceConfig.TILE_VIEW_MAX_COLUMNS;
+
+    if (disableResponsiveTiles) {
+        return Math.min(Math.max(configuredMax || DEFAULT_MAX_COLUMNS, 1), ABSOLUTE_MAX_COLUMNS);
+    }
+
+    if (typeof interfaceConfig.TILE_VIEW_MAX_COLUMNS !== 'undefined' && interfaceConfig.TILE_VIEW_MAX_COLUMNS > 0) {
+        return Math.max(configuredMax, 1);
+    }
+
+    const aspectRatio = disableTileEnlargement
+        ? getTileDefaultAspectRatio(true, disableTileEnlargement, widthToUse)
+        : TILE_PORTRAIT_ASPECT_RATIO;
+    const minHeight = getThumbnailMinHeight(widthToUse);
+    const minWidth = aspectRatio * minHeight;
+
+    return Math.floor(widthToUse / minWidth);
+}
+
+/**
+ * Returns the cell count dimensions for tile view. Tile view tries to uphold
+ * equal count of tiles for height and width, until maxColumn is reached in
+ * which rows will be added but no more columns.
+ *
+ * @param {Object} state - The redux store state.
+ * @param {boolean} stageFilmstrip - Whether the dimensions should be calculated for the stage filmstrip.
+ * @returns {Object} An object is return with the desired number of columns,
+ * rows, and visible rows (the rest should overflow) for the tile view layout.
+ */
+export function getNotResponsiveTileViewGridDimensions(state: IReduxState, stageFilmstrip = false) {
+    const maxColumns = getMaxColumnCount(state);
+    const { activeParticipants } = state['features/filmstrip'];
+    const numberOfParticipants = stageFilmstrip ? activeParticipants.length : getNumberOfPartipantsForTileView(state);
+    const columnsToMaintainASquare = Math.ceil(Math.sqrt(numberOfParticipants));
+    const columns = Math.min(columnsToMaintainASquare, maxColumns);
+    const rows = Math.ceil(numberOfParticipants / columns);
+    const minVisibleRows = Math.min(maxColumns, rows);
+
+    return {
+        columns,
+        minVisibleRows,
+        rows
+    };
+}

react/features/video-layout/hooks.ts

@@ -0,0 +1,26 @@
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../app/types';
+import { TILE_VIEW_ENABLED } from '../base/flags/constants';
+import { getFeatureFlag } from '../base/flags/functions';
+
+import TileViewButton from './components/TileViewButton';
+
+const tileview = {
+    key: 'tileview',
+    Content: TileViewButton,
+    group: 2
+};
+
+/**
+ * A hook that returns the tile view button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useTileViewButton() {
+    const tileViewEnabled = useSelector((state: IReduxState) => getFeatureFlag(state, TILE_VIEW_ENABLED, true));
+
+    if (tileViewEnabled) {
+        return tileview;
+    }
+}

react/features/video-layout/logger.ts

@@ -0,0 +1,3 @@
+import { getLogger } from '../base/logging/functions';
+
+export default getLogger('features/video-layout');

react/features/video-layout/middleware.any.ts

@@ -0,0 +1,129 @@
+import { IStore } from '../app/types';
+import { getCurrentConference } from '../base/conference/functions';
+import { PARTICIPANT_LEFT, PIN_PARTICIPANT } from '../base/participants/actionTypes';
+import { pinParticipant } from '../base/participants/actions';
+import { getParticipantById, getPinnedParticipant } from '../base/participants/functions';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import StateListenerRegistry from '../base/redux/StateListenerRegistry';
+import { SET_DOCUMENT_EDITING_STATUS } from '../etherpad/actionTypes';
+import { isStageFilmstripEnabled } from '../filmstrip/functions';
+import { isFollowMeActive } from '../follow-me/functions';
+
+import { SET_TILE_VIEW } from './actionTypes';
+import { setTileView } from './actions';
+import { getAutoPinSetting, updateAutoPinnedParticipant } from './functions';
+
+import './subscriber';
+
+let previousTileViewEnabled: boolean | undefined;
+
+/**
+ * Middleware which intercepts actions and updates tile view related state.
+ *
+ * @param {Store} store - The redux store.
+ * @returns {Function}
+ */
+MiddlewareRegistry.register(store => next => action => {
+
+    // we want to extract the leaving participant and check its type before actually the participant being removed.
+    let shouldUpdateAutoPin = false;
+
+    switch (action.type) {
+    case PARTICIPANT_LEFT: {
+        if (!getAutoPinSetting() || isFollowMeActive(store)) {
+            break;
+        }
+        shouldUpdateAutoPin = Boolean(getParticipantById(store.getState(), action.participant.id)?.fakeParticipant);
+        break;
+    }
+    }
+
+    const result = next(action);
+
+    switch (action.type) {
+
+    // Actions that temporarily clear the user preferred state of tile view,
+    // then re-set it when needed.
+    case PIN_PARTICIPANT: {
+        const pinnedParticipant = action.participant?.id;
+
+        if (pinnedParticipant) {
+            _storeTileViewStateAndClear(store);
+        } else {
+            _restoreTileViewState(store);
+        }
+        break;
+    }
+    case SET_DOCUMENT_EDITING_STATUS:
+        if (action.editing) {
+            _storeTileViewStateAndClear(store);
+        } else {
+            _restoreTileViewState(store);
+        }
+        break;
+
+    // Things to update when tile view state changes
+    case SET_TILE_VIEW: {
+        const state = store.getState();
+        const stageFilmstrip = isStageFilmstripEnabled(state);
+
+        if (action.enabled && !stageFilmstrip && getPinnedParticipant(state)) {
+            store.dispatch(pinParticipant(null));
+        }
+        break;
+    }
+    }
+
+    if (shouldUpdateAutoPin) {
+        const screenShares = store.getState()['features/video-layout'].remoteScreenShares || [];
+
+        updateAutoPinnedParticipant(screenShares, store);
+    }
+
+    return result;
+});
+
+/**
+ * Set up state change listener to perform maintenance tasks when the conference
+ * is left or failed.
+ */
+StateListenerRegistry.register(
+    state => getCurrentConference(state),
+    (conference, { dispatch }, previousConference) => {
+        if (conference !== previousConference) {
+            // conference changed, left or failed...
+            // Clear tile view state.
+            dispatch(setTileView());
+        }
+    });
+
+/**
+ * Restores tile view state, if it wasn't updated since then.
+ *
+ * @param {Object} store - The Redux Store.
+ * @returns {void}
+ */
+function _restoreTileViewState({ dispatch, getState }: IStore) {
+    const { tileViewEnabled } = getState()['features/video-layout'];
+
+    if (tileViewEnabled === undefined && previousTileViewEnabled !== undefined) {
+        dispatch(setTileView(previousTileViewEnabled));
+    }
+
+    previousTileViewEnabled = undefined;
+}
+
+/**
+ * Stores the current tile view state and clears it.
+ *
+ * @param {Object} store - The Redux Store.
+ * @returns {void}
+ */
+function _storeTileViewStateAndClear({ dispatch, getState }: IStore) {
+    const { tileViewEnabled } = getState()['features/video-layout'];
+
+    if (tileViewEnabled !== undefined) {
+        previousTileViewEnabled = tileViewEnabled;
+        dispatch(setTileView(undefined));
+    }
+}

react/features/video-layout/middleware.native.ts

@@ -0,0 +1,34 @@
+import { setVideoMuted } from '../base/media/actions';
+import { VIDEO_MUTISM_AUTHORITY } from '../base/media/constants';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import { CLIENT_RESIZED } from '../base/responsive-ui/actionTypes';
+import { setLargeVideoDimensions } from '../large-video/actions.any';
+
+import { SET_CAR_MODE } from './actionTypes';
+import './middleware.any';
+
+/**
+ * Middleware which intercepts actions and updates the legacy component.
+ *
+ * @param {Store} store - The redux store.
+ * @returns {Function}
+ */
+MiddlewareRegistry.register(store => next => action => {
+    const result = next(action);
+    const { dispatch } = store;
+
+    switch (action.type) {
+    case SET_CAR_MODE:
+        dispatch(setVideoMuted(action.enabled, VIDEO_MUTISM_AUTHORITY.CAR_MODE));
+        break;
+    case CLIENT_RESIZED: {
+        const { clientHeight, clientWidth } = store.getState()['features/base/responsive-ui'];
+
+        // On mobile the large video should always fill the screen.
+        dispatch(setLargeVideoDimensions(clientHeight, clientWidth));
+        break;
+    }
+    }
+
+    return result;
+});

react/features/video-layout/middleware.web.ts

@@ -0,0 +1,72 @@
+// @ts-expect-error
+import VideoLayout from '../../../modules/UI/videolayout/VideoLayout.js';
+import { CONFERENCE_WILL_INIT, CONFERENCE_WILL_LEAVE } from '../base/conference/actionTypes';
+import { MEDIA_TYPE } from '../base/media/constants';
+import { PARTICIPANT_JOINED } from '../base/participants/actionTypes';
+import { getLocalParticipant } from '../base/participants/functions';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import { TRACK_ADDED, TRACK_REMOVED, TRACK_STOPPED } from '../base/tracks/actionTypes';
+import { PARTICIPANTS_PANE_CLOSE, PARTICIPANTS_PANE_OPEN } from '../participants-pane/actionTypes';
+
+import './middleware.any';
+
+/**
+ * Middleware which intercepts actions and updates the legacy component
+ * {@code VideoLayout} as needed. The purpose of this middleware is to redux-ify
+ * {@code VideoLayout} without having to simultaneously react-ifying it.
+ *
+ * @param {Store} store - The redux store.
+ * @returns {Function}
+ */
+// eslint-disable-next-line no-unused-vars
+MiddlewareRegistry.register(store => next => action => {
+    // Purposefully perform additional actions after state update to mimic
+    // being connected to the store for updates.
+    const result = next(action);
+
+    switch (action.type) {
+    case CONFERENCE_WILL_INIT:
+        // Reset VideoLayout. It's destroyed on CONFERENCE_WILL_LEAVE so re-initialize it.
+        VideoLayout.initLargeVideo();
+        VideoLayout.resizeVideoArea();
+        break;
+    case CONFERENCE_WILL_LEAVE:
+        VideoLayout.reset();
+        break;
+
+    case PARTICIPANT_JOINED:
+        if (!action.participant.local) {
+            VideoLayout.updateVideoMutedForNoTracks(action.participant.id);
+        }
+        break;
+
+    case PARTICIPANTS_PANE_CLOSE:
+    case PARTICIPANTS_PANE_OPEN:
+        VideoLayout.resizeVideoArea();
+        break;
+
+    case TRACK_ADDED:
+        if (action.track.mediaType !== MEDIA_TYPE.AUDIO) {
+            VideoLayout._updateLargeVideoIfDisplayed(action.track.participantId, true);
+        }
+
+        break;
+
+    case TRACK_STOPPED: {
+        if (action.track.jitsiTrack.isLocal()) {
+            const participant = getLocalParticipant(store.getState);
+
+            VideoLayout._updateLargeVideoIfDisplayed(participant?.id);
+        }
+        break;
+    }
+    case TRACK_REMOVED:
+        if (!action.track.local && action.track.mediaType !== MEDIA_TYPE.AUDIO) {
+            VideoLayout.updateVideoMutedForNoTracks(action.track.jitsiTrack.getParticipantId());
+        }
+
+        break;
+    }
+
+    return result;
+});

react/features/video-layout/reducer.ts

@@ -0,0 +1,63 @@
+import ReducerRegistry from '../base/redux/ReducerRegistry';
+
+import {
+    SET_CAR_MODE,
+    SET_TILE_VIEW,
+    VIRTUAL_SCREENSHARE_REMOTE_PARTICIPANTS_UPDATED
+} from './actionTypes';
+
+const DEFAULT_STATE = {
+    /**
+     * Whether we are in carmode.
+     *
+     * @public
+     * @type {boolean}
+     */
+    carMode: false,
+
+    remoteScreenShares: [],
+
+    /**
+     * The indicator which determines whether the video layout should display
+     * video thumbnails in a tiled layout.
+     *
+     * Note: undefined means that the user hasn't requested anything in particular yet, so
+     * we use our auto switching rules.
+     *
+     * @public
+     * @type {boolean}
+     */
+    tileViewEnabled: undefined
+};
+
+export interface IVideoLayoutState {
+    carMode: boolean;
+    remoteScreenShares: string[];
+    tileViewEnabled?: boolean;
+}
+
+const STORE_NAME = 'features/video-layout';
+
+ReducerRegistry.register<IVideoLayoutState>(STORE_NAME, (state = DEFAULT_STATE, action): IVideoLayoutState => {
+    switch (action.type) {
+    case VIRTUAL_SCREENSHARE_REMOTE_PARTICIPANTS_UPDATED:
+        return {
+            ...state,
+            remoteScreenShares: action.participantIds
+        };
+
+    case SET_CAR_MODE:
+        return {
+            ...state,
+            carMode: action.enabled
+        };
+
+    case SET_TILE_VIEW:
+        return {
+            ...state,
+            tileViewEnabled: action.enabled
+        };
+    }
+
+    return state;
+});

react/features/video-layout/subscriber.ts

@@ -0,0 +1,35 @@
+import StateListenerRegistry from '../base/redux/StateListenerRegistry';
+import { equals } from '../base/redux/functions';
+import { isFollowMeActive } from '../follow-me/functions';
+
+import { virtualScreenshareParticipantsUpdated } from './actions';
+import { getAutoPinSetting, updateAutoPinnedParticipant } from './functions';
+
+StateListenerRegistry.register(
+    /* selector */ state => state['features/base/participants'].sortedRemoteVirtualScreenshareParticipants,
+    /* listener */ (sortedRemoteVirtualScreenshareParticipants, store) => {
+        const oldScreenSharesOrder = store.getState()['features/video-layout'].remoteScreenShares || [];
+        const knownSharingParticipantIds = [ ...sortedRemoteVirtualScreenshareParticipants.keys() ];
+
+        // Filter out any participants which are no longer screen sharing
+        // by looping through the known sharing participants and removing any
+        // participant IDs which are no longer sharing.
+        const newScreenSharesOrder = oldScreenSharesOrder.filter(
+            participantId => knownSharingParticipantIds.includes(participantId));
+
+        // Make sure all new sharing participant get added to the end of the
+        // known screen shares.
+        knownSharingParticipantIds.forEach(participantId => {
+            if (!newScreenSharesOrder.includes(participantId)) {
+                newScreenSharesOrder.push(participantId);
+            }
+        });
+
+        if (!equals(oldScreenSharesOrder, newScreenSharesOrder)) {
+            store.dispatch(virtualScreenshareParticipantsUpdated(newScreenSharesOrder));
+
+            if (getAutoPinSetting() && !isFollowMeActive(store)) {
+                updateAutoPinnedParticipant(oldScreenSharesOrder, store);
+            }
+        }
+    });