init

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

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { IconMicSlash } from '../../../base/icons/svg';
+import BaseIndicator from '../../../base/react/components/web/BaseIndicator';
+import { TOOLTIP_POSITION } from '../../../base/ui/constants.any';
+
+/**
+ * The type of the React {@code Component} props of {@link AudioMutedIndicator}.
+ */
+interface IProps {
+
+    /**
+     * From which side of the indicator the tooltip should appear from.
+     */
+    tooltipPosition: TOOLTIP_POSITION;
+}
+
+/**
+ * React {@code Component} for showing an audio muted icon with a tooltip.
+ *
+ * @returns {Component}
+ */
+const AudioMutedIndicator = ({ tooltipPosition }: IProps) => (
+    <BaseIndicator
+        icon = { IconMicSlash }
+        iconId = 'mic-disabled'
+        iconSize = { 16 }
+        id = 'audioMuted'
+        tooltipKey = 'videothumbnail.mute'
+        tooltipPosition = { tooltipPosition } />
+);
+
+export default AudioMutedIndicator;

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import AudioTrack from '../../../base/media/components/web/AudioTrack';
+import { MEDIA_TYPE } from '../../../base/media/constants';
+import { ITrack } from '../../../base/tracks/types';
+
+/**
+ * The type of the React {@code Component} props of {@link AudioTracksContainer}.
+ */
+interface IProps {
+
+    /**
+     * All media tracks stored in redux.
+     */
+    _tracks: ITrack[];
+}
+
+/**
+ * A container for the remote tracks audio elements.
+ *
+ * @param {IProps} props - The props of the component.
+ * @returns {Array<ReactElement>}
+ */
+function AudioTracksContainer(props: IProps) {
+    const { _tracks } = props;
+    const remoteAudioTracks = _tracks.filter(t => !t.local && t.mediaType === MEDIA_TYPE.AUDIO);
+
+    return (
+        <div>
+            {
+                remoteAudioTracks.map(t => {
+                    const { jitsiTrack, participantId } = t;
+                    const audioTrackId = jitsiTrack?.getId();
+                    const id = `remoteAudio_${audioTrackId || ''}`;
+
+                    return (
+                        <AudioTrack
+                            audioTrack = { t }
+                            id = { id }
+                            key = { id }
+                            participantId = { participantId } />
+                    );
+                })
+            }
+        </div>
+    );
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated {@code AudioTracksContainer}'s props.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState) {
+    // NOTE: The disadvantage of this approach is that the component will re-render on any track change.
+    // One way to solve the problem would be to pass only the participant ID to the AudioTrack component and
+    // find the corresponding track inside the AudioTrack's mapStateToProps. But currently this will be very
+    // inefficient because features/base/tracks is an array and in order to find a track by participant ID
+    // we need to go through the array. Introducing a map participantID -> track could be beneficial in this case.
+    return {
+        _tracks: state['features/base/tracks']
+    };
+}
+
+export default connect(_mapStateToProps)(AudioTracksContainer);

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

@@ -0,0 +1,209 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { isMobileBrowser } from '../../../base/environment/utils';
+import { LAYOUTS } from '../../../video-layout/constants';
+import { getCurrentLayout } from '../../../video-layout/functions.web';
+import {
+    ASPECT_RATIO_BREAKPOINT,
+    FILMSTRIP_BREAKPOINT,
+    FILMSTRIP_BREAKPOINT_OFFSET,
+    FILMSTRIP_TYPE,
+    TOOLBAR_HEIGHT,
+    TOOLBAR_HEIGHT_MOBILE } from '../../constants';
+import { isFilmstripResizable, showGridInVerticalView } from '../../functions.web';
+
+import Filmstrip from './Filmstrip';
+
+interface IProps {
+
+    /**
+     * The number of columns in tile view.
+     */
+    _columns: number;
+
+    /**
+     * The height of the filmstrip.
+     */
+    _filmstripHeight?: number;
+
+    /**
+     * The width of the filmstrip.
+     */
+    _filmstripWidth?: number;
+
+    /**
+     * Whether the filmstrip has scroll or not.
+     */
+    _hasScroll: boolean;
+
+    /**
+     * Whether or not the current layout is vertical filmstrip.
+     */
+    _isVerticalFilmstrip: boolean;
+
+    /**
+     * The participants in the call.
+     */
+    _remoteParticipants: Array<Object>;
+
+    /**
+     * The length of the remote participants array.
+     */
+    _remoteParticipantsLength: number;
+
+    /**
+     * Whether or not the filmstrip should be user-resizable.
+     */
+    _resizableFilmstrip: boolean;
+
+    /**
+     * The number of rows in tile view.
+     */
+    _rows: number;
+
+    /**
+     * The height of the thumbnail.
+     */
+    _thumbnailHeight?: number;
+
+    /**
+     * The width of the thumbnail.
+     */
+    _thumbnailWidth?: number;
+
+    /**
+     * Whether or not the vertical filmstrip should have a background color.
+     */
+    _verticalViewBackground: boolean;
+
+    /**
+     * Whether or not the vertical filmstrip should be displayed as grid.
+     */
+    _verticalViewGrid: boolean;
+
+    /**
+     * Additional CSS class names to add to the container of all the thumbnails.
+     */
+    _videosClassName: string;
+}
+
+const MainFilmstrip = (props: IProps) => (
+    <span>
+        <Filmstrip
+            { ...props }
+            filmstripType = { FILMSTRIP_TYPE.MAIN } />
+    </span>
+);
+
+/**
+ * Maps (parts of) the Redux state to the associated {@code Filmstrip}'s props.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {any} _ownProps - Components' own props.
+ * @private
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState, _ownProps: any) {
+    const { toolbarButtons } = state['features/toolbox'];
+    const { remoteParticipants, width: verticalFilmstripWidth } = state['features/filmstrip'];
+    const reduceHeight = state['features/toolbox'].visible && toolbarButtons?.length;
+    const {
+        gridDimensions: dimensions = { columns: undefined,
+            rows: undefined },
+        filmstripHeight,
+        filmstripWidth,
+        hasScroll: tileViewHasScroll,
+        thumbnailSize: tileViewThumbnailSize
+    } = state['features/filmstrip'].tileViewDimensions ?? {};
+    const _currentLayout = getCurrentLayout(state);
+    const _resizableFilmstrip = isFilmstripResizable(state);
+    const _verticalViewGrid = showGridInVerticalView(state);
+    let gridDimensions = dimensions;
+    let _hasScroll = false;
+
+    const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
+    const availableSpace = clientHeight - Number(filmstripHeight);
+    let filmstripPadding = 0;
+
+    if (availableSpace > 0) {
+        const paddingValue = TOOLBAR_HEIGHT_MOBILE - availableSpace;
+
+        if (paddingValue > 0) {
+            filmstripPadding = paddingValue;
+        }
+    } else {
+        filmstripPadding = TOOLBAR_HEIGHT_MOBILE;
+    }
+
+    const collapseTileView = reduceHeight
+        && isMobileBrowser()
+        && videoSpaceWidth <= ASPECT_RATIO_BREAKPOINT;
+
+    const shouldReduceHeight = reduceHeight && (
+        isMobileBrowser() || (_currentLayout !== LAYOUTS.VERTICAL_FILMSTRIP_VIEW
+            && _currentLayout !== LAYOUTS.STAGE_FILMSTRIP_VIEW));
+
+    let _thumbnailSize, remoteFilmstripHeight, remoteFilmstripWidth;
+
+    switch (_currentLayout) {
+    case LAYOUTS.TILE_VIEW:
+        _hasScroll = Boolean(tileViewHasScroll);
+        _thumbnailSize = tileViewThumbnailSize;
+        remoteFilmstripHeight = Number(filmstripHeight) - (
+            collapseTileView && filmstripPadding > 0 ? filmstripPadding : 0);
+        remoteFilmstripWidth = filmstripWidth;
+        break;
+    case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
+    case LAYOUTS.STAGE_FILMSTRIP_VIEW: {
+        const {
+            remote,
+            remoteVideosContainer,
+            gridView,
+            hasScroll
+        } = state['features/filmstrip'].verticalViewDimensions;
+
+        _hasScroll = Boolean(hasScroll);
+        remoteFilmstripHeight = Number(remoteVideosContainer?.height) - (!_verticalViewGrid && shouldReduceHeight
+            ? TOOLBAR_HEIGHT : 0);
+        remoteFilmstripWidth = remoteVideosContainer?.width;
+
+        if (_verticalViewGrid) {
+            gridDimensions = gridView?.gridDimensions ?? { columns: undefined,
+                rows: undefined };
+            _thumbnailSize = gridView?.thumbnailSize;
+            _hasScroll = Boolean(gridView?.hasScroll);
+        } else {
+            _thumbnailSize = remote;
+        }
+        break;
+    }
+    case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW: {
+        const { remote, remoteVideosContainer, hasScroll } = state['features/filmstrip'].horizontalViewDimensions;
+
+        _hasScroll = Boolean(hasScroll);
+        _thumbnailSize = remote;
+        remoteFilmstripHeight = remoteVideosContainer?.height;
+        remoteFilmstripWidth = remoteVideosContainer?.width;
+        break;
+    }
+    }
+
+    return {
+        _columns: gridDimensions.columns ?? 1,
+        _filmstripHeight: remoteFilmstripHeight,
+        _filmstripWidth: remoteFilmstripWidth,
+        _hasScroll,
+        _remoteParticipants: remoteParticipants,
+        _resizableFilmstrip,
+        _rows: gridDimensions.rows ?? 1,
+        _thumbnailWidth: _thumbnailSize?.width,
+        _thumbnailHeight: _thumbnailSize?.height,
+        _verticalViewGrid,
+        _verticalViewBackground: Number(verticalFilmstripWidth.current)
+            + FILMSTRIP_BREAKPOINT_OFFSET >= FILMSTRIP_BREAKPOINT
+    };
+}
+
+export default connect(_mapStateToProps)(MainFilmstrip);

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

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { IconModerator } from '../../../base/icons/svg';
+import BaseIndicator from '../../../base/react/components/web/BaseIndicator';
+import { TOOLTIP_POSITION } from '../../../base/ui/constants.any';
+
+/**
+ * The type of the React {@code Component} props of {@link ModeratorIndicator}.
+ */
+interface IProps {
+
+    /**
+     * From which side of the indicator the tooltip should appear from.
+     */
+    tooltipPosition: TOOLTIP_POSITION;
+}
+
+/**
+ * React {@code Component} for showing a moderator icon with a tooltip.
+ *
+ * @returns {JSX.Element}
+ */
+const ModeratorIndicator = ({ tooltipPosition }: IProps): JSX.Element => (
+    <BaseIndicator
+        icon = { IconModerator }
+        iconSize = { 16 }
+        tooltipKey = 'videothumbnail.moderator'
+        tooltipPosition = { tooltipPosition } />
+);
+
+export default ModeratorIndicator;

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { IReduxState } from '../../../app/types';
+import { IconPin } from '../../../base/icons/svg';
+import { getParticipantById } from '../../../base/participants/functions';
+import BaseIndicator from '../../../base/react/components/web/BaseIndicator';
+import { TOOLTIP_POSITION } from '../../../base/ui/constants.any';
+import { getPinnedActiveParticipants, isStageFilmstripAvailable } from '../../functions.web';
+
+/**
+ * The type of the React {@code Component} props of {@link PinnedIndicator}.
+ */
+interface IProps {
+
+    /**
+     * The font-size for the icon.
+     */
+    iconSize: number;
+
+    /**
+     * The participant id who we want to render the raised hand indicator
+     * for.
+     */
+    participantId: string;
+
+    /**
+     * From which side of the indicator the tooltip should appear from.
+     */
+    tooltipPosition: TOOLTIP_POSITION;
+}
+
+const useStyles = makeStyles()(() => {
+    return {
+        pinnedIndicator: {
+            backgroundColor: 'rgba(0, 0, 0, .7)',
+            padding: '4px',
+            zIndex: 3,
+            display: 'inline-block',
+            borderRadius: '4px',
+            boxSizing: 'border-box'
+        }
+    };
+});
+
+/**
+ * Thumbnail badge showing that the participant would like to speak.
+ *
+ * @returns {ReactElement}
+ */
+const PinnedIndicator = ({
+    iconSize,
+    participantId,
+    tooltipPosition
+}: IProps) => {
+    const stageFilmstrip = useSelector(isStageFilmstripAvailable);
+    const pinned = useSelector((state: IReduxState) => getParticipantById(state, participantId))?.pinned;
+    const activePinnedParticipants: Array<{ participantId: string; pinned?: boolean; }>
+        = useSelector(getPinnedActiveParticipants);
+    const isPinned = activePinnedParticipants.find(p => p.participantId === participantId);
+    const { classes: styles } = useStyles();
+
+    if ((stageFilmstrip && !isPinned) || (!stageFilmstrip && !pinned)) {
+        return null;
+    }
+
+    return (
+        <div
+            className = { styles.pinnedIndicator }
+            id = { `pin-indicator-${participantId}` }>
+            <BaseIndicator
+                icon = { IconPin }
+                iconSize = { iconSize }
+                tooltipKey = 'pinnedParticipant'
+                tooltipPosition = { tooltipPosition } />
+        </div>
+    );
+};
+
+export default PinnedIndicator;

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { IReduxState } from '../../../app/types';
+import { IconRaiseHand } from '../../../base/icons/svg';
+import { getParticipantById, hasRaisedHand } from '../../../base/participants/functions';
+import { IParticipant } from '../../../base/participants/types';
+import BaseIndicator from '../../../base/react/components/web/BaseIndicator';
+import { TOOLTIP_POSITION } from '../../../base/ui/constants.any';
+
+/**
+ * The type of the React {@code Component} props of {@link RaisedHandIndicator}.
+ */
+interface IProps {
+
+    /**
+     * The font-size for the icon.
+     */
+    iconSize: number;
+
+    /**
+     * The participant id who we want to render the raised hand indicator
+     * for.
+     */
+    participantId: string;
+
+    /**
+     * From which side of the indicator the tooltip should appear from.
+     */
+    tooltipPosition: TOOLTIP_POSITION;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        raisedHandIndicator: {
+            backgroundColor: theme.palette.warning02,
+            padding: '4px',
+            zIndex: 3,
+            display: 'inline-block',
+            borderRadius: '4px',
+            boxSizing: 'border-box'
+        }
+    };
+});
+
+/**
+ * Thumbnail badge showing that the participant would like to speak.
+ *
+ * @returns {ReactElement}
+ */
+const RaisedHandIndicator = ({
+    iconSize,
+    participantId,
+    tooltipPosition
+}: IProps) => {
+    const participant: IParticipant | undefined = useSelector((state: IReduxState) =>
+        getParticipantById(state, participantId));
+    const _raisedHand = hasRaisedHand(participant);
+    const { classes: styles, theme } = useStyles();
+
+    if (!_raisedHand) {
+        return null;
+    }
+
+    return (
+        <div className = { styles.raisedHandIndicator }>
+            <BaseIndicator
+                icon = { IconRaiseHand }
+                iconColor = { theme.palette.uiBackground }
+                iconSize = { iconSize }
+                tooltipKey = 'raisedHand'
+                tooltipPosition = { tooltipPosition } />
+        </div>
+    );
+};
+
+export default RaisedHandIndicator;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { IconScreenshare } from '../../../base/icons/svg';
+import BaseIndicator from '../../../base/react/components/web/BaseIndicator';
+import { TOOLTIP_POSITION } from '../../../base/ui/constants.any';
+
+interface IProps {
+
+    /**
+     * From which side of the indicator the tooltip should appear from.
+     */
+    tooltipPosition: TOOLTIP_POSITION;
+}
+
+/**
+ * React {@code Component} for showing a screen-sharing icon with a tooltip.
+ *
+ * @param {IProps} props - React props passed to this component.
+ * @returns {React$Element<any>}
+ */
+export default function ScreenShareIndicator(props: IProps) {
+    return (
+        <BaseIndicator
+            icon = { IconScreenshare }
+            iconId = 'share-desktop'
+            iconSize = { 16 }
+            tooltipKey = 'videothumbnail.screenSharing'
+            tooltipPosition = { props.tooltipPosition } />
+    );
+}

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

@@ -0,0 +1,132 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { LAYOUTS, LAYOUT_CLASSNAMES } from '../../../video-layout/constants';
+import { getCurrentLayout } from '../../../video-layout/functions.web';
+import {
+    FILMSTRIP_TYPE
+} from '../../constants';
+import { getScreenshareFilmstripParticipantId } from '../../functions.web';
+
+import Filmstrip from './Filmstrip';
+
+interface IProps {
+
+    /**
+     * The number of columns in tile view.
+     */
+    _columns: number;
+
+    /**
+     * The current layout of the filmstrip.
+     */
+    _currentLayout?: string;
+
+    /**
+     * The height of the filmstrip.
+     */
+    _filmstripHeight?: number;
+
+    /**
+     * The width of the filmstrip.
+     */
+    _filmstripWidth?: number;
+
+    /**
+     * Whether or not the current layout is vertical filmstrip.
+     */
+    _isVerticalFilmstrip: boolean;
+
+    /**
+     * The participants in the call.
+     */
+    _remoteParticipants: Array<Object>;
+
+    /**
+     * The length of the remote participants array.
+     */
+    _remoteParticipantsLength: number;
+
+    /**
+     * Whether or not the filmstrip should be user-resizable.
+     */
+    _resizableFilmstrip: boolean;
+
+    /**
+     * The number of rows in tile view.
+     */
+    _rows: number;
+
+    /**
+     * The height of the thumbnail.
+     */
+    _thumbnailHeight?: number;
+
+    /**
+     * The width of the thumbnail.
+     */
+    _thumbnailWidth?: number;
+
+    /**
+     * Whether or not the vertical filmstrip should have a background color.
+     */
+    _verticalViewBackground: boolean;
+
+    /**
+     * Whether or not the vertical filmstrip should be displayed as grid.
+     */
+    _verticalViewGrid: boolean;
+
+    /**
+     * Additional CSS class names to add to the container of all the thumbnails.
+     */
+    _videosClassName: string;
+}
+
+// eslint-disable-next-line no-confusing-arrow
+const ScreenshareFilmstrip = (props: IProps) =>
+    props._currentLayout === LAYOUTS.STAGE_FILMSTRIP_VIEW
+        && props._remoteParticipants.length === 1 ? (
+            <span className = { LAYOUT_CLASSNAMES[LAYOUTS.TILE_VIEW] }>
+                <Filmstrip
+                    { ...props }
+                    filmstripType = { FILMSTRIP_TYPE.SCREENSHARE } />
+            </span>
+        ) : null
+;
+
+/**
+ * Maps (parts of) the Redux state to the associated {@code Filmstrip}'s props.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {any} _ownProps - Components' own props.
+ * @private
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState, _ownProps: any) {
+    const {
+        screenshareFilmstripDimensions: {
+            filmstripHeight,
+            filmstripWidth,
+            thumbnailSize
+        }
+    } = state['features/filmstrip'];
+    const id = getScreenshareFilmstripParticipantId(state);
+
+    return {
+        _columns: 1,
+        _currentLayout: getCurrentLayout(state),
+        _filmstripHeight: filmstripHeight,
+        _filmstripWidth: filmstripWidth,
+        _remoteParticipants: id ? [ id ] : [],
+        _resizableFilmstrip: false,
+        _rows: 1,
+        _thumbnailWidth: thumbnailSize?.width,
+        _thumbnailHeight: thumbnailSize?.height,
+        _verticalViewGrid: false,
+        _verticalViewBackground: false
+    };
+}
+
+export default connect(_mapStateToProps)(ScreenshareFilmstrip);

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

@@ -0,0 +1,160 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { isMobileBrowser } from '../../../base/environment/utils';
+import { LAYOUTS, LAYOUT_CLASSNAMES } from '../../../video-layout/constants';
+import { getCurrentLayout } from '../../../video-layout/functions.web';
+import {
+    ASPECT_RATIO_BREAKPOINT,
+    FILMSTRIP_TYPE,
+    TOOLBAR_HEIGHT_MOBILE
+} from '../../constants';
+import { getActiveParticipantsIds, isFilmstripResizable, isStageFilmstripTopPanel } from '../../functions.web';
+
+import Filmstrip from './Filmstrip';
+
+interface IProps {
+
+    /**
+     * The number of columns in tile view.
+     */
+    _columns: number;
+
+    /**
+     * The current layout of the filmstrip.
+     */
+    _currentLayout?: string;
+
+    /**
+     * The height of the filmstrip.
+     */
+    _filmstripHeight?: number;
+
+    /**
+     * The width of the filmstrip.
+     */
+    _filmstripWidth?: number;
+
+    /**
+     * Whether or not the current layout is vertical filmstrip.
+     */
+    _isVerticalFilmstrip: boolean;
+
+    /**
+     * The participants in the call.
+     */
+    _remoteParticipants: Array<Object>;
+
+    /**
+     * The length of the remote participants array.
+     */
+    _remoteParticipantsLength: number;
+
+    /**
+     * Whether or not the filmstrip should be user-resizable.
+     */
+    _resizableFilmstrip: boolean;
+
+    /**
+     * The number of rows in tile view.
+     */
+    _rows: number;
+
+    /**
+     * The height of the thumbnail.
+     */
+    _thumbnailHeight?: number;
+
+    /**
+     * The width of the thumbnail.
+     */
+    _thumbnailWidth?: number;
+
+    /**
+     * Whether or not the vertical filmstrip should have a background color.
+     */
+    _verticalViewBackground: boolean;
+
+    /**
+     * Whether or not the vertical filmstrip should be displayed as grid.
+     */
+    _verticalViewGrid: boolean;
+
+    /**
+     * Additional CSS class names to add to the container of all the thumbnails.
+     */
+    _videosClassName: string;
+}
+
+// eslint-disable-next-line no-confusing-arrow
+const StageFilmstrip = (props: IProps) =>
+    props._currentLayout === LAYOUTS.STAGE_FILMSTRIP_VIEW ? (
+        <span className = { LAYOUT_CLASSNAMES[LAYOUTS.TILE_VIEW] }>
+            <Filmstrip
+                { ...props }
+                filmstripType = { FILMSTRIP_TYPE.STAGE } />
+        </span>
+    ) : null
+;
+
+/**
+ * Maps (parts of) the Redux state to the associated {@code Filmstrip}'s props.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {any} _ownProps - Components' own props.
+ * @private
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState, _ownProps: any) {
+    const { toolbarButtons } = state['features/toolbox'];
+    const activeParticipants = getActiveParticipantsIds(state);
+    const reduceHeight = state['features/toolbox'].visible && toolbarButtons?.length;
+    const {
+        gridDimensions: dimensions = { columns: undefined,
+            rows: undefined },
+        filmstripHeight,
+        filmstripWidth,
+        thumbnailSize
+    } = state['features/filmstrip'].stageFilmstripDimensions;
+    const gridDimensions = dimensions;
+
+    const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
+    const availableSpace = clientHeight - Number(filmstripHeight);
+    let filmstripPadding = 0;
+
+    if (availableSpace > 0) {
+        const paddingValue = TOOLBAR_HEIGHT_MOBILE - availableSpace;
+
+        if (paddingValue > 0) {
+            filmstripPadding = paddingValue;
+        }
+    } else {
+        filmstripPadding = TOOLBAR_HEIGHT_MOBILE;
+    }
+
+    const collapseTileView = reduceHeight
+        && isMobileBrowser()
+        && videoSpaceWidth <= ASPECT_RATIO_BREAKPOINT;
+
+    const remoteFilmstripHeight = Number(filmstripHeight) - (
+        collapseTileView && filmstripPadding > 0 ? filmstripPadding : 0);
+    const _topPanelFilmstrip = isStageFilmstripTopPanel(state);
+
+    return {
+        _columns: gridDimensions.columns ?? 1,
+        _currentLayout: getCurrentLayout(state),
+        _filmstripHeight: remoteFilmstripHeight,
+        _filmstripWidth: filmstripWidth,
+        _remoteParticipants: activeParticipants,
+        _resizableFilmstrip: isFilmstripResizable(state) && _topPanelFilmstrip,
+        _rows: gridDimensions.rows ?? 1,
+        _thumbnailWidth: thumbnailSize?.width,
+        _thumbnailHeight: thumbnailSize?.height,
+        _topPanelFilmstrip,
+        _verticalViewGrid: false,
+        _verticalViewBackground: false
+    };
+}
+
+export default connect(_mapStateToProps)(StageFilmstrip);

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

@@ -0,0 +1,123 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { MEDIA_TYPE } from '../../../base/media/constants';
+import { PARTICIPANT_ROLE } from '../../../base/participants/constants';
+import { getParticipantByIdOrUndefined, isScreenShareParticipantById } from '../../../base/participants/functions';
+import {
+    getVideoTrackByParticipant,
+    isLocalTrackMuted,
+    isRemoteTrackMuted
+} from '../../../base/tracks/functions.web';
+import { getIndicatorsTooltipPosition } from '../../functions.web';
+
+import AudioMutedIndicator from './AudioMutedIndicator';
+import ModeratorIndicator from './ModeratorIndicator';
+import ScreenShareIndicator from './ScreenShareIndicator';
+
+/**
+ * The type of the React {@code Component} props of {@link StatusIndicators}.
+ */
+interface IProps {
+
+    /**
+     * Indicates if the audio muted indicator should be visible or not.
+     */
+    _showAudioMutedIndicator: Boolean;
+
+    /**
+     * Indicates if the moderator indicator should be visible or not.
+     */
+    _showModeratorIndicator: Boolean;
+
+    /**
+     * Indicates if the screen share indicator should be visible or not.
+     */
+    _showScreenShareIndicator: Boolean;
+
+    /**
+     * The ID of the participant for which the status bar is rendered.
+     */
+    participantID: String;
+
+    /**
+     * The type of thumbnail.
+     */
+    thumbnailType: string;
+}
+
+/**
+ * React {@code Component} for showing the status bar in a thumbnail.
+ *
+ * @augments Component
+ */
+class StatusIndicators extends Component<IProps> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const {
+            _showAudioMutedIndicator,
+            _showModeratorIndicator,
+            _showScreenShareIndicator,
+            thumbnailType
+        } = this.props;
+        const tooltipPosition = getIndicatorsTooltipPosition(thumbnailType);
+
+        return (
+            <>
+                { _showAudioMutedIndicator && <AudioMutedIndicator tooltipPosition = { tooltipPosition } /> }
+                { _showModeratorIndicator && <ModeratorIndicator tooltipPosition = { tooltipPosition } />}
+                { _showScreenShareIndicator && <ScreenShareIndicator tooltipPosition = { tooltipPosition } /> }
+            </>
+        );
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated {@code StatusIndicators}'s props.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Object} ownProps - The own props of the component.
+ * @private
+ * @returns {{
+ *     _showAudioMutedIndicator: boolean,
+ *     _showModeratorIndicator: boolean,
+ *     _showScreenShareIndicator: boolean
+ * }}
+*/
+function _mapStateToProps(state: IReduxState, ownProps: any) {
+    const { participantID, audio, moderator, screenshare } = ownProps;
+
+    // Only the local participant won't have id for the time when the conference is not yet joined.
+    const participant = getParticipantByIdOrUndefined(state, participantID);
+    const tracks = state['features/base/tracks'];
+
+    let isAudioMuted = true;
+    let isScreenSharing = false;
+
+    if (participant?.local) {
+        isAudioMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.AUDIO);
+    } else if (!participant?.fakeParticipant || isScreenShareParticipantById(state, participantID)) {
+        // remote participants excluding shared video
+        const track = getVideoTrackByParticipant(state, participant);
+
+        isScreenSharing = track?.videoType === 'desktop';
+        isAudioMuted = isRemoteTrackMuted(tracks, MEDIA_TYPE.AUDIO, participantID);
+    }
+
+    const { disableModeratorIndicator } = state['features/base/config'];
+
+    return {
+        _showAudioMutedIndicator: isAudioMuted && audio,
+        _showModeratorIndicator:
+            !disableModeratorIndicator && participant && participant.role === PARTICIPANT_ROLE.MODERATOR && moderator,
+        _showScreenShareIndicator: isScreenSharing && screenshare
+    };
+}
+
+export default connect(_mapStateToProps)(StatusIndicators);

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

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react';
+
+import AudioLevelIndicator from '../../../audio-level-indicator/components/AudioLevelIndicator';
+import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
+import { ITrack } from '../../../base/tracks/types';
+
+const JitsiTrackEvents = JitsiMeetJS.events.track;
+
+interface IProps {
+
+    /**
+     * The audio track related to the participant.
+     */
+    _audioTrack?: ITrack;
+}
+
+const ThumbnailAudioIndicator = ({
+    _audioTrack
+}: IProps) => {
+    const [ audioLevel, setAudioLevel ] = useState(0);
+
+    useEffect(() => {
+        setAudioLevel(0);
+        if (_audioTrack) {
+            const { jitsiTrack } = _audioTrack;
+
+            jitsiTrack?.on(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, setAudioLevel);
+        }
+
+        return () => {
+            if (_audioTrack) {
+                const { jitsiTrack } = _audioTrack;
+
+                jitsiTrack?.off(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, setAudioLevel);
+            }
+        };
+    }, [ _audioTrack ]);
+
+    return (
+        <span className = 'audioindicator-container'>
+            <AudioLevelIndicator audioLevel = { audioLevel } />
+        </span>
+    );
+};
+
+export default ThumbnailAudioIndicator;

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

@@ -0,0 +1,96 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { IReduxState } from '../../../app/types';
+import {
+    isDisplayNameVisible,
+    isNameReadOnly
+} from '../../../base/config/functions.any';
+import { isScreenShareParticipantById } from '../../../base/participants/functions';
+import DisplayName from '../../../display-name/components/web/DisplayName';
+
+import StatusIndicators from './StatusIndicators';
+
+interface IProps {
+
+    /**
+     * Class name for indicators container.
+     */
+    className?: string;
+
+    /**
+     * Whether or not the indicators are for the local participant.
+     */
+    local: boolean;
+
+    /**
+     * Id of the participant for which the component is displayed.
+     */
+    participantId: string;
+
+    /**
+     * Whether or not to show the status indicators.
+     */
+    showStatusIndicators?: boolean;
+
+    /**
+     * The type of thumbnail.
+     */
+    thumbnailType?: string;
+}
+
+const useStyles = makeStyles()(() => {
+    return {
+        nameContainer: {
+            display: 'flex',
+            overflow: 'hidden',
+
+            '&>div': {
+                display: 'flex',
+                overflow: 'hidden'
+            }
+        }
+    };
+});
+
+const ThumbnailBottomIndicators = ({
+    className,
+    local,
+    participantId,
+    showStatusIndicators = true,
+    thumbnailType
+}: IProps) => {
+    const { classes: styles, cx } = useStyles();
+    const _allowEditing = !useSelector(isNameReadOnly);
+    const _defaultLocalDisplayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME;
+    const _showDisplayName = useSelector(isDisplayNameVisible);
+    const isVirtualScreenshareParticipant = useSelector(
+        (state: IReduxState) => isScreenShareParticipantById(state, participantId)
+    );
+
+    return (<div className = { cx(className, 'bottom-indicators') }>
+        {
+            showStatusIndicators && <StatusIndicators
+                audio = { !isVirtualScreenshareParticipant }
+                moderator = { true }
+                participantID = { participantId }
+                screenshare = { isVirtualScreenshareParticipant }
+                thumbnailType = { thumbnailType } />
+        }
+        {
+            _showDisplayName && (
+                <span className = { styles.nameContainer }>
+                    <DisplayName
+                        allowEditing = { local ? _allowEditing : false }
+                        displayNameSuffix = { local ? _defaultLocalDisplayName : '' }
+                        elementID = { local ? 'localDisplayName' : `participant_${participantId}_name` }
+                        participantID = { participantId }
+                        thumbnailType = { thumbnailType } />
+                </span>
+            )
+        }
+    </div>);
+};
+
+export default ThumbnailBottomIndicators;

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

@@ -0,0 +1,158 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { IReduxState } from '../../../app/types';
+import { isMobileBrowser } from '../../../base/environment/utils';
+import { isScreenShareParticipantById } from '../../../base/participants/functions';
+import ConnectionIndicator from '../../../connection-indicator/components/web/ConnectionIndicator';
+import { STATS_POPOVER_POSITION, THUMBNAIL_TYPE } from '../../constants';
+import { getIndicatorsTooltipPosition } from '../../functions.web';
+
+import PinnedIndicator from './PinnedIndicator';
+import RaisedHandIndicator from './RaisedHandIndicator';
+import StatusIndicators from './StatusIndicators';
+import VideoMenuTriggerButton from './VideoMenuTriggerButton';
+
+interface IProps {
+
+    /**
+     * Whether to hide the connection indicator.
+     */
+    disableConnectionIndicator?: boolean;
+
+    /**
+     * Hide popover callback.
+     */
+    hidePopover?: Function;
+
+    /**
+     * Class name for the status indicators container.
+     */
+    indicatorsClassName?: string;
+
+    /**
+     * Whether or not the thumbnail is hovered.
+     */
+    isHovered: boolean;
+
+    /**
+     * Whether or not the indicators are for the local participant.
+     */
+    local?: boolean;
+
+    /**
+     * Id of the participant for which the component is displayed.
+     */
+    participantId: string;
+
+    /**
+     * Whether popover is visible or not.
+     */
+    popoverVisible?: boolean;
+
+    /**
+     * Show popover callback.
+     */
+    showPopover?: Function;
+
+    /**
+     * The type of thumbnail.
+     */
+    thumbnailType: string;
+}
+
+const useStyles = makeStyles()(() => {
+    return {
+        container: {
+            display: 'flex',
+
+            '& > *:not(:last-child)': {
+                marginRight: '4px'
+            }
+        }
+    };
+});
+
+const ThumbnailTopIndicators = ({
+    disableConnectionIndicator,
+    hidePopover,
+    indicatorsClassName,
+    isHovered,
+    local,
+    participantId,
+    popoverVisible,
+    showPopover,
+    thumbnailType
+}: IProps) => {
+    const { classes: styles, cx } = useStyles();
+
+    const _isMobile = isMobileBrowser();
+    const { NORMAL = 16 } = interfaceConfig.INDICATOR_FONT_SIZES || {};
+    const _indicatorIconSize = NORMAL;
+    const _connectionIndicatorAutoHideEnabled = Boolean(
+        useSelector((state: IReduxState) => state['features/base/config'].connectionIndicators?.autoHide) ?? true);
+    const _connectionIndicatorDisabled = _isMobile || disableConnectionIndicator
+        || Boolean(useSelector((state: IReduxState) => state['features/base/config'].connectionIndicators?.disabled));
+    const showConnectionIndicator = isHovered || !_connectionIndicatorAutoHideEnabled;
+    const isVirtualScreenshareParticipant = useSelector(
+        (state: IReduxState) => isScreenShareParticipantById(state, participantId)
+    );
+
+    if (isVirtualScreenshareParticipant) {
+        return (
+            <div className = { styles.container }>
+                {!_connectionIndicatorDisabled
+                    && <ConnectionIndicator
+                        alwaysVisible = { showConnectionIndicator }
+                        enableStatsDisplay = { true }
+                        iconSize = { _indicatorIconSize }
+                        participantId = { participantId }
+                        statsPopoverPosition = { STATS_POPOVER_POSITION[thumbnailType] } />
+                }
+            </div>
+        );
+    }
+
+    const tooltipPosition = getIndicatorsTooltipPosition(thumbnailType);
+
+    return (<>
+        <div className = { styles.container }>
+            <PinnedIndicator
+                iconSize = { _indicatorIconSize }
+                participantId = { participantId }
+                tooltipPosition = { tooltipPosition } />
+            {!_connectionIndicatorDisabled
+                && <ConnectionIndicator
+                    alwaysVisible = { showConnectionIndicator }
+                    enableStatsDisplay = { true }
+                    iconSize = { _indicatorIconSize }
+                    participantId = { participantId }
+                    statsPopoverPosition = { STATS_POPOVER_POSITION[thumbnailType] } />
+            }
+            <RaisedHandIndicator
+                iconSize = { _indicatorIconSize }
+                participantId = { participantId }
+                tooltipPosition = { tooltipPosition } />
+            {thumbnailType !== THUMBNAIL_TYPE.TILE && (
+                <div className = { cx(indicatorsClassName, 'top-indicators') }>
+                    <StatusIndicators
+                        participantID = { participantId }
+                        screenshare = { false } />
+                </div>
+            )}
+        </div>
+        <div className = { styles.container }>
+            <VideoMenuTriggerButton
+                hidePopover = { hidePopover }
+                local = { local }
+                participantId = { participantId }
+                popoverVisible = { popoverVisible }
+                showPopover = { showPopover }
+                thumbnailType = { thumbnailType }
+                visible = { isHovered } />
+        </div>
+    </>);
+};
+
+export default ThumbnailTopIndicators;

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

@@ -0,0 +1,292 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { getLocalParticipant } from '../../../base/participants/functions';
+import { getHideSelfView } from '../../../base/settings/functions.any';
+import { LAYOUTS } from '../../../video-layout/constants';
+import { getCurrentLayout } from '../../../video-layout/functions.web';
+import { FILMSTRIP_TYPE, TILE_ASPECT_RATIO, TILE_HORIZONTAL_MARGIN } from '../../constants';
+import { getActiveParticipantsIds, showGridInVerticalView } from '../../functions.web';
+
+import Thumbnail from './Thumbnail';
+
+/**
+ * The type of the React {@code Component} props of {@link ThumbnailWrapper}.
+ */
+interface IProps {
+
+    /**
+     * Whether or not to hide the self view.
+     */
+    _disableSelfView?: boolean;
+
+    /**
+     * The type of filmstrip this thumbnail is displayed in.
+     */
+    _filmstripType?: string;
+
+    /**
+     * The horizontal offset in px for the thumbnail. Used to center the thumbnails in the last row in tile view.
+     */
+    _horizontalOffset?: number;
+
+    /**
+     * Whether or not the thumbnail is a local screen share.
+     */
+    _isLocalScreenShare?: boolean;
+
+    /**
+     * The ID of the participant associated with the Thumbnail.
+     */
+    _participantID?: string;
+
+    /**
+     * The width of the thumbnail. Used for expanding the width of the thumbnails on last row in case
+     * there is empty space.
+     */
+    _thumbnailWidth?: number;
+
+    /**
+     * The index of the column in tile view.
+     */
+    columnIndex?: number;
+
+    /**
+     * The index of the ThumbnailWrapper in stage view.
+     */
+    index?: number;
+
+    /**
+     * The index of the row in tile view.
+     */
+    rowIndex?: number;
+
+    /**
+     * The styles coming from react-window.
+     */
+    style: Object;
+}
+
+/**
+ * A wrapper Component for the Thumbnail that translates the react-window specific props
+ * to the Thumbnail Component's props.
+ */
+class ThumbnailWrapper extends Component<IProps> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const {
+            _disableSelfView,
+            _filmstripType = FILMSTRIP_TYPE.MAIN,
+            _isLocalScreenShare = false,
+            _horizontalOffset = 0,
+            _participantID,
+            _thumbnailWidth,
+            style
+        } = this.props;
+
+        if (typeof _participantID !== 'string') {
+            return null;
+        }
+
+        if (_participantID === 'local') {
+            return _disableSelfView ? null : (
+                <Thumbnail
+                    filmstripType = { _filmstripType }
+                    horizontalOffset = { _horizontalOffset }
+                    key = 'local'
+                    style = { style }
+                    width = { _thumbnailWidth } />);
+        }
+
+        if (_isLocalScreenShare) {
+            return _disableSelfView ? null : (
+                <Thumbnail
+                    filmstripType = { _filmstripType }
+                    horizontalOffset = { _horizontalOffset }
+                    key = 'localScreenShare'
+                    participantID = { _participantID }
+                    style = { style }
+                    width = { _thumbnailWidth } />);
+        }
+
+        return (
+            <Thumbnail
+                filmstripType = { _filmstripType }
+                horizontalOffset = { _horizontalOffset }
+                key = { `remote_${_participantID}` }
+                participantID = { _participantID }
+                style = { style }
+                width = { _thumbnailWidth } />
+        );
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated {@code ThumbnailWrapper}'s props.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Object} ownProps - The props passed to the component.
+ * @private
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState, ownProps: { columnIndex: number;
+    data: { filmstripType: string; }; index?: number; rowIndex: number; }) {
+    const _currentLayout = getCurrentLayout(state);
+    const { remoteParticipants: remote } = state['features/filmstrip'];
+    const activeParticipants = getActiveParticipantsIds(state);
+    const disableSelfView = getHideSelfView(state);
+    const _verticalViewGrid = showGridInVerticalView(state);
+    const filmstripType = ownProps.data?.filmstripType;
+    const stageFilmstrip = filmstripType === FILMSTRIP_TYPE.STAGE;
+    const sortedActiveParticipants = activeParticipants.sort();
+    const remoteParticipants = stageFilmstrip ? sortedActiveParticipants : remote;
+    const remoteParticipantsLength = remoteParticipants.length;
+    const localId = getLocalParticipant(state)?.id;
+
+    if (_currentLayout === LAYOUTS.TILE_VIEW || _verticalViewGrid || stageFilmstrip) {
+        const { columnIndex, rowIndex } = ownProps;
+        const { tileViewDimensions, stageFilmstripDimensions, verticalViewDimensions } = state['features/filmstrip'];
+        const { gridView } = verticalViewDimensions;
+        let gridDimensions = tileViewDimensions?.gridDimensions,
+            thumbnailSize = tileViewDimensions?.thumbnailSize;
+
+        if (stageFilmstrip) {
+            gridDimensions = stageFilmstripDimensions.gridDimensions;
+            thumbnailSize = stageFilmstripDimensions.thumbnailSize;
+        } else if (_verticalViewGrid) {
+            gridDimensions = gridView?.gridDimensions;
+            thumbnailSize = gridView?.thumbnailSize;
+        }
+        const { columns = 1, rows = 1 } = gridDimensions ?? {};
+        const index = (rowIndex * columns) + columnIndex;
+        let horizontalOffset, thumbnailWidth;
+        const { iAmRecorder, disableTileEnlargement } = state['features/base/config'];
+        const { localScreenShare } = state['features/base/participants'];
+        const localParticipantsLength = localScreenShare ? 2 : 1;
+
+        let participantsLength;
+
+        if (stageFilmstrip) {
+            // We use the length of activeParticipants in stage filmstrip which includes local participants.
+            participantsLength = remoteParticipantsLength;
+        } else {
+            // We need to include the local screenshare participant in tile view.
+            participantsLength = remoteParticipantsLength
+
+            // Add local camera and screen share to total participant count when self view is not disabled.
+            + (disableSelfView ? 0 : localParticipantsLength)
+
+            // Removes iAmRecorder from the total participants count.
+            - (iAmRecorder ? 1 : 0);
+        }
+
+        if (rowIndex === rows - 1) { // center the last row
+            const partialLastRowParticipantsNumber = participantsLength % columns;
+
+            if (partialLastRowParticipantsNumber > 0) {
+                const { width = 1, height = 1 } = thumbnailSize ?? {};
+                const availableWidth = columns * (width + TILE_HORIZONTAL_MARGIN);
+                let widthDifference = 0;
+                let widthToUse = width;
+
+                if (!disableTileEnlargement) {
+                    thumbnailWidth = Math.min(
+                        (availableWidth / partialLastRowParticipantsNumber) - TILE_HORIZONTAL_MARGIN,
+                        height * TILE_ASPECT_RATIO);
+                    widthDifference = thumbnailWidth - width;
+                    widthToUse = thumbnailWidth;
+                }
+
+                horizontalOffset
+                    = Math.floor((availableWidth
+                        - (partialLastRowParticipantsNumber * (widthToUse + TILE_HORIZONTAL_MARGIN))) / 2
+                    )
+                    + (columnIndex * widthDifference);
+            }
+        }
+
+        if (index > participantsLength - 1) {
+            return {};
+        }
+
+        if (stageFilmstrip) {
+            return {
+                _disableSelfView: disableSelfView,
+                _filmstripType: filmstripType,
+                _participantID: remoteParticipants[index] === localId ? 'local' : remoteParticipants[index],
+                _horizontalOffset: horizontalOffset,
+                _thumbnailWidth: thumbnailWidth
+            };
+        }
+
+        // When the thumbnails are reordered, local participant is inserted at index 0.
+        const localIndex = disableSelfView ? remoteParticipantsLength : 0;
+
+        // Local screen share is inserted at index 1 after the local camera.
+        const localScreenShareIndex = disableSelfView ? remoteParticipantsLength : 1;
+        const remoteIndex = !iAmRecorder && !disableSelfView
+            ? index - localParticipantsLength
+            : index;
+
+        if (!iAmRecorder && index === localIndex) {
+            return {
+                _disableSelfView: disableSelfView,
+                _filmstripType: filmstripType,
+                _participantID: 'local',
+                _horizontalOffset: horizontalOffset,
+                _thumbnailWidth: thumbnailWidth
+            };
+        }
+
+        if (!iAmRecorder && localScreenShare && index === localScreenShareIndex) {
+            return {
+                _disableSelfView: disableSelfView,
+                _filmstripType: filmstripType,
+                _isLocalScreenShare: true,
+                _participantID: localScreenShare?.id,
+                _horizontalOffset: horizontalOffset,
+                _thumbnailWidth: thumbnailWidth
+            };
+        }
+
+        return {
+            _filmstripType: filmstripType,
+            _participantID: remoteParticipants[remoteIndex],
+            _horizontalOffset: horizontalOffset,
+            _thumbnailWidth: thumbnailWidth
+        };
+    }
+
+    if (_currentLayout === LAYOUTS.STAGE_FILMSTRIP_VIEW && filmstripType === FILMSTRIP_TYPE.SCREENSHARE) {
+        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: id
+        };
+    }
+
+    const { index } = ownProps;
+
+    if (typeof index !== 'number' || remoteParticipantsLength <= index) {
+        return {};
+    }
+
+    return {
+        _participantID: remoteParticipants[index]
+    };
+}
+
+export default connect(_mapStateToProps)(ThumbnailWrapper);

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

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import LocalVideoMenuTriggerButton from '../../../video-menu/components/web/LocalVideoMenuTriggerButton';
+import RemoteVideoMenuTriggerButton from '../../../video-menu/components/web/RemoteVideoMenuTriggerButton';
+
+interface IProps {
+
+    /**
+     * Hide popover callback.
+     */
+    hidePopover?: Function;
+
+    /**
+     * Whether or not the button is for the local participant.
+     */
+    local?: boolean;
+
+    /**
+     * The id of the participant for which the button is.
+     */
+    participantId?: string;
+
+    /**
+     * Whether popover is visible or not.
+     */
+    popoverVisible?: boolean;
+
+    /**
+     * Show popover callback.
+     */
+    showPopover?: Function;
+
+    /**
+     * The type of thumbnail.
+     */
+    thumbnailType: string;
+
+    /**
+     * Whether or not the component is visible.
+     */
+    visible: boolean;
+}
+
+// eslint-disable-next-line no-confusing-arrow
+const VideoMenuTriggerButton = ({
+    hidePopover,
+    local,
+    participantId = '',
+    popoverVisible,
+    showPopover,
+    thumbnailType,
+    visible
+}: IProps) => local
+    ? (
+        <span id = 'localvideomenu'>
+            <LocalVideoMenuTriggerButton
+                buttonVisible = { visible }
+                hidePopover = { hidePopover }
+                popoverVisible = { popoverVisible }
+                showPopover = { showPopover }
+                thumbnailType = { thumbnailType } />
+        </span>
+    )
+    : (
+        <span id = 'remotevideomenu'>
+            <RemoteVideoMenuTriggerButton
+                buttonVisible = { visible }
+                hidePopover = { hidePopover }
+                participantID = { participantId }
+                popoverVisible = { popoverVisible }
+                showPopover = { showPopover }
+                thumbnailType = { thumbnailType } />
+        </span>
+    );
+
+export default VideoMenuTriggerButton;

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

@@ -0,0 +1,183 @@
+import React, { TouchEventHandler } from 'react';
+import { useSelector } from 'react-redux';
+import { useStyles } from 'tss-react/mui';
+
+import VideoTrack from '../../../base/media/components/web/VideoTrack';
+import { ITrack } from '../../../base/tracks/types';
+import { LAYOUTS } from '../../../video-layout/constants';
+import { getCurrentLayout } from '../../../video-layout/functions.web';
+
+import ThumbnailBottomIndicators from './ThumbnailBottomIndicators';
+import ThumbnailTopIndicators from './ThumbnailTopIndicators';
+
+interface IProps {
+
+    /**
+     * An object containing the CSS classes.
+     */
+    classes?: Partial<Record<
+        'containerBackground' |
+        'indicatorsContainer' |
+        'indicatorsTopContainer' |
+        'tintBackground' |
+        'indicatorsBottomContainer' |
+        'indicatorsBackground',
+        string
+    >>;
+
+    /**
+     * The class name that will be used for the container.
+     */
+    containerClassName: string;
+
+    /**
+     * Indicates whether the thumbnail is hovered or not.
+     */
+    isHovered: boolean;
+
+    /**
+     * Indicates whether the thumbnail is for local screenshare or not.
+     */
+    isLocal: boolean;
+
+    /**
+     * Indicates whether we are currently running in a mobile browser.
+     */
+    isMobile: boolean;
+
+    /**
+     * Click handler.
+     */
+    onClick: (e?: React.MouseEvent) => void;
+
+    /**
+     * Mouse enter handler.
+     */
+    onMouseEnter: (e?: React.MouseEvent) => void;
+
+    /**
+     * Mouse leave handler.
+     */
+    onMouseLeave: (e?: React.MouseEvent) => void;
+
+    /**
+     * Mouse move handler.
+     */
+    onMouseMove: (e?: React.MouseEvent) => void;
+
+    /**
+     * Touch end handler.
+     */
+    onTouchEnd: TouchEventHandler;
+
+    /**
+     * Touch move handler.
+     */
+    onTouchMove: TouchEventHandler;
+
+    /**
+     * Touch start handler.
+     */
+    onTouchStart: TouchEventHandler;
+
+    /**
+     * The ID of the virtual screen share participant.
+     */
+    participantId: string;
+
+    /**
+     * Whether or not to display a tint background over tile.
+     */
+    shouldDisplayTintBackground: boolean;
+
+    /**
+     * An object with the styles for thumbnail.
+     */
+    styles: any;
+
+    /**
+     * The type of thumbnail.
+     */
+    thumbnailType: string;
+
+    /**
+     * JitsiTrack instance.
+     */
+    videoTrack: ITrack;
+}
+
+const VirtualScreenshareParticipant = ({
+    classes,
+    containerClassName,
+    isHovered,
+    isLocal,
+    isMobile,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseMove,
+    onTouchEnd,
+    onTouchMove,
+    onTouchStart,
+    participantId,
+    shouldDisplayTintBackground,
+    styles,
+    videoTrack,
+    thumbnailType
+}: IProps) => {
+    const currentLayout = useSelector(getCurrentLayout);
+    const videoTrackId = videoTrack?.jitsiTrack?.getId();
+    const video = videoTrack && <VideoTrack
+        id = { isLocal ? 'localScreenshare_container' : `remoteVideo_${videoTrackId || ''}` }
+        muted = { true }
+        style = { styles.video }
+        videoTrack = { videoTrack } />;
+
+    const { cx } = useStyles();
+
+    return (
+        <span
+            className = { containerClassName }
+            id = { `participant_${participantId}` }
+            { ...(isMobile
+                ? {
+                    onTouchEnd,
+                    onTouchMove,
+                    onTouchStart
+                }
+                : {
+                    onClick,
+                    onMouseEnter,
+                    onMouseMove,
+                    onMouseLeave
+                }
+            ) }
+            style = { styles.thumbnail }>
+            {video}
+            <div className = { classes?.containerBackground } />
+            <div
+                className = { cx(classes?.indicatorsContainer,
+                        classes?.indicatorsTopContainer,
+                        currentLayout === LAYOUTS.TILE_VIEW && 'tile-view-mode'
+                ) }>
+                <ThumbnailTopIndicators
+                    isHovered = { isHovered }
+                    participantId = { participantId }
+                    thumbnailType = { thumbnailType } />
+            </div>
+            {shouldDisplayTintBackground && <div className = { classes?.tintBackground } />}
+            <div
+                className = { cx(classes?.indicatorsContainer,
+                        classes?.indicatorsBottomContainer,
+                        currentLayout === LAYOUTS.TILE_VIEW && 'tile-view-mode'
+                ) }>
+                <ThumbnailBottomIndicators
+                    className = { classes?.indicatorsBackground }
+                    local = { false }
+                    participantId = { participantId }
+                    showStatusIndicators = { true } />
+            </div>
+        </span>);
+};
+
+export default VirtualScreenshareParticipant;