init

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

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+
+import { IconMicSlash } from '../../../base/icons/svg';
+import BaseIndicator from '../../../base/react/components/native/BaseIndicator';
+
+/**
+ * Thumbnail badge for displaying the audio mute status of a participant.
+ */
+export default class AudioMutedIndicator extends Component<{}> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        return (
+            <BaseIndicator icon = { IconMicSlash } />
+        );
+    }
+}

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

@@ -0,0 +1,337 @@
+import React, { PureComponent } from 'react';
+import { FlatList, ViewStyle, ViewToken } from 'react-native';
+import { SafeAreaView, withSafeAreaInsets } from 'react-native-safe-area-context';
+import { connect } from 'react-redux';
+
+import { IReduxState, IStore } from '../../../app/types';
+import { getLocalParticipant } from '../../../base/participants/functions';
+import Platform from '../../../base/react/Platform.native';
+import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
+import { getHideSelfView } from '../../../base/settings/functions.any';
+import { isToolboxVisible } from '../../../toolbox/functions.native';
+import { setVisibleRemoteParticipants } from '../../actions.native';
+import {
+    getFilmstripDimensions,
+    isFilmstripVisible,
+    shouldDisplayLocalThumbnailSeparately,
+    shouldRemoteVideosBeVisible
+} from '../../functions.native';
+
+import LocalThumbnail from './LocalThumbnail';
+import Thumbnail from './Thumbnail';
+import styles from './styles';
+
+
+// Immutable reference to avoid re-renders.
+const NO_REMOTE_VIDEOS: any[] = [];
+
+/**
+ * Filmstrip component's property types.
+ */
+interface IProps {
+
+    /**
+     * Application's aspect ratio.
+     */
+    _aspectRatio: Symbol;
+
+    _clientHeight: number;
+
+    _clientWidth: number;
+
+    /**
+     * Whether or not to hide the self view.
+     */
+    _disableSelfView: boolean;
+
+    _localParticipantId: string;
+
+    /**
+     * The participants in the conference.
+     */
+    _participants: Array<any>;
+
+    /**
+     * Whether or not the toolbox is displayed.
+     */
+    _toolboxVisible: Boolean;
+
+    /**
+     * The indicator which determines whether the filmstrip is visible.
+     */
+    _visible: boolean;
+
+    /**
+     * Invoked to trigger state changes in Redux.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * Object containing the safe area insets.
+     */
+    insets?: Object;
+}
+
+/**
+ * Implements a React {@link Component} which represents the filmstrip on
+ * mobile/React Native.
+ *
+ * @augments Component
+ */
+class Filmstrip extends PureComponent<IProps> {
+    /**
+     * Whether the local participant should be rendered separately from the
+     * remote participants i.e. outside of their {@link ScrollView}.
+     */
+    _separateLocalThumbnail: boolean;
+
+    /**
+     * The FlatList's viewabilityConfig.
+     */
+    _viewabilityConfig: Object;
+
+    /**
+     * Constructor of the component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // XXX Our current design is to have the local participant separate from
+        // the remote participants. Unfortunately, Android's Video
+        // implementation cannot accommodate that because remote participants'
+        // videos appear on top of the local participant's video at times.
+        // That's because Android's Video utilizes EGL and EGL gives us only two
+        // practical layers in which we can place our participants' videos:
+        // layer #0 sits behind the window, creates a hole in the window, and
+        // there we render the LargeVideo; layer #1 is known as media overlay in
+        // EGL terms, renders on top of layer #0, and, consequently, is for the
+        // Filmstrip. With the separate LocalThumbnail, we should have left the
+        // remote participants' Thumbnails in layer #1 and utilized layer #2 for
+        // LocalThumbnail. Unfortunately, layer #2 is not practical (that's why
+        // I said we had two practical layers only) because it renders on top of
+        // everything which in our case means on top of participant-related
+        // indicators such as moderator, audio and video muted, etc. For now we
+        // do not have much of a choice but to continue rendering LocalThumbnail
+        // as any other remote Thumbnail on Android.
+        this._separateLocalThumbnail = shouldDisplayLocalThumbnailSeparately();
+
+        this._viewabilityConfig = {
+            itemVisiblePercentThreshold: 30,
+            minimumViewTime: 500
+        };
+
+        this._keyExtractor = this._keyExtractor.bind(this);
+        this._getItemLayout = this._getItemLayout.bind(this);
+        this._onViewableItemsChanged = this._onViewableItemsChanged.bind(this);
+        this._renderThumbnail = this._renderThumbnail.bind(this);
+    }
+
+    /**
+     * Returns a key for a passed item of the list.
+     *
+     * @param {string} item - The user ID.
+     * @returns {string} - The user ID.
+     */
+    _keyExtractor(item: string) {
+        return item;
+    }
+
+    /**
+     * Calculates the width and height of the filmstrip based on the screen size and aspect ratio.
+     *
+     * @returns {Object} - The width and the height.
+     */
+    _getDimensions() {
+        const {
+            _aspectRatio,
+            _clientWidth,
+            _clientHeight,
+            _disableSelfView,
+            _localParticipantId,
+            insets
+        } = this.props;
+        const localParticipantVisible = Boolean(_localParticipantId) && !_disableSelfView;
+
+        return getFilmstripDimensions({
+            aspectRatio: _aspectRatio,
+            clientHeight: _clientHeight,
+            clientWidth: _clientWidth,
+            insets,
+            localParticipantVisible
+        });
+    }
+
+    /**
+     * Optimization for FlatList. Returns the length, offset and index for an item.
+     *
+     * @param {Array<string>} _data - The data array with user IDs.
+     * @param {number} index - The index number of the item.
+     * @returns {Object}
+     */
+    _getItemLayout(_data: string[] | null | undefined, index: number) {
+        const { _aspectRatio } = this.props;
+        const isNarrowAspectRatio = _aspectRatio === ASPECT_RATIO_NARROW;
+        const length = isNarrowAspectRatio ? styles.thumbnail.width : styles.thumbnail.height;
+
+        return {
+            length,
+            offset: length * index,
+            index
+        };
+    }
+
+    /**
+     * A handler for visible items changes.
+     *
+     * @param {Object} data - The visible items data.
+     * @param {Array<Object>} data.viewableItems - The visible items array.
+     * @returns {void}
+     */
+    _onViewableItemsChanged({ viewableItems = [] }: { viewableItems: ViewToken[]; }) {
+        const { _disableSelfView } = this.props;
+
+        if (!this._separateLocalThumbnail && !_disableSelfView && viewableItems[0]?.index === 0) {
+            // Skip the local thumbnail.
+            viewableItems.shift();
+        }
+
+        if (viewableItems.length === 0) {
+            // User might be fast-scrolling, it will stabilize.
+            return;
+        }
+
+        let startIndex = Number(viewableItems[0].index);
+        let endIndex = Number(viewableItems[viewableItems.length - 1].index);
+
+        if (!this._separateLocalThumbnail && !_disableSelfView) {
+            // We are off by one in the remote participants array.
+            startIndex -= 1;
+            endIndex -= 1;
+        }
+
+        this.props.dispatch(setVisibleRemoteParticipants(startIndex, endIndex));
+    }
+
+    /**
+     * Creates React Element to display each participant in a thumbnail.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderThumbnail({ item }: { item: string; }) {
+        return (
+            <Thumbnail
+                key = { item }
+                participantID = { item } />)
+        ;
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const {
+            _aspectRatio,
+            _disableSelfView,
+            _toolboxVisible,
+            _localParticipantId,
+            _participants,
+            _visible
+        } = this.props;
+
+        if (!_visible) {
+            return null;
+        }
+
+        const bottomEdge = Platform.OS === 'ios' && !_toolboxVisible;
+        const isNarrowAspectRatio = _aspectRatio === ASPECT_RATIO_NARROW;
+        const filmstripStyle = isNarrowAspectRatio ? styles.filmstripNarrow : styles.filmstripWide;
+        const { height, width } = this._getDimensions();
+        const { height: thumbnailHeight, width: thumbnailWidth, margin } = styles.thumbnail;
+        const initialNumToRender = Math.max(
+            0,
+            Math.ceil(
+                isNarrowAspectRatio
+                    ? width / (thumbnailWidth + (2 * margin))
+                    : height / (thumbnailHeight + (2 * margin))
+            )
+        );
+        let participants;
+
+        if (this._separateLocalThumbnail || _disableSelfView) {
+            participants = _participants;
+        } else if (isNarrowAspectRatio) {
+            participants = [ ..._participants, _localParticipantId ];
+        } else {
+            participants = [ _localParticipantId, ..._participants ];
+        }
+
+        return (
+            <SafeAreaView // @ts-ignore
+                edges = { [ bottomEdge && 'bottom', 'left', 'right' ].filter(Boolean) }
+                style = { filmstripStyle as ViewStyle }>
+                {
+                    this._separateLocalThumbnail
+                        && !isNarrowAspectRatio
+                        && !_disableSelfView
+                        && <LocalThumbnail />
+                }
+                <FlatList
+                    bounces = { false }
+                    data = { participants }
+
+                    /* @ts-ignore */
+                    getItemLayout = { this._getItemLayout }
+                    horizontal = { isNarrowAspectRatio }
+                    initialNumToRender = { initialNumToRender }
+                    key = { isNarrowAspectRatio ? 'narrow' : 'wide' }
+                    keyExtractor = { this._keyExtractor }
+                    onViewableItemsChanged = { this._onViewableItemsChanged }
+                    renderItem = { this._renderThumbnail }
+                    showsHorizontalScrollIndicator = { false }
+                    showsVerticalScrollIndicator = { false }
+                    style = { styles.flatListStageView }
+                    viewabilityConfig = { this._viewabilityConfig }
+                    windowSize = { 2 } />
+                {
+                    this._separateLocalThumbnail
+                        && isNarrowAspectRatio
+                        && !_disableSelfView
+                        && <LocalThumbnail />
+                }
+            </SafeAreaView>
+        );
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated {@code Filmstrip}'s props.
+ *
+ * @param {Object} state - The redux state.
+ * @private
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState) {
+    const { enabled, remoteParticipants } = state['features/filmstrip'];
+    const disableSelfView = getHideSelfView(state);
+    const showRemoteVideos = shouldRemoteVideosBeVisible(state);
+    const responsiveUI = state['features/base/responsive-ui'];
+
+    return {
+        _aspectRatio: responsiveUI.aspectRatio,
+        _clientHeight: responsiveUI.clientHeight,
+        _clientWidth: responsiveUI.clientWidth,
+        _disableSelfView: disableSelfView,
+        _localParticipantId: getLocalParticipant(state)?.id ?? '',
+        _participants: showRemoteVideos ? remoteParticipants : NO_REMOTE_VIDEOS,
+        _toolboxVisible: isToolboxVisible(state),
+        _visible: enabled && isFilmstripVisible(state)
+    };
+}
+
+export default withSafeAreaInsets(connect(_mapStateToProps)(Filmstrip));

react/features/filmstrip/components/native/LocalThumbnail.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View, ViewStyle } from 'react-native';
+
+import Thumbnail from './Thumbnail';
+import styles from './styles';
+
+/**
+ * Component to render a local thumbnail that can be separated from the
+ * remote thumbnails later.
+ *
+ * @returns {ReactElement}
+ */
+export default function LocalThumbnail() {
+    return (
+        <View style = { styles.localThumbnail as ViewStyle }>
+            <Thumbnail />
+        </View>
+    );
+}

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

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { IconModerator } from '../../../base/icons/svg';
+import BaseIndicator from '../../../base/react/components/native/BaseIndicator';
+
+/**
+ * Thumbnail badge showing that the participant is a conference moderator.
+ *
+ * @returns {JSX.Element}
+ */
+const ModeratorIndicator = (): JSX.Element => <BaseIndicator icon = { IconModerator } />;
+
+export default ModeratorIndicator;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { IconPin } from '../../../base/icons/svg';
+import BaseIndicator from '../../../base/react/components/native/BaseIndicator';
+
+/**
+ * Thumbnail badge for displaying if a participant is pinned.
+ *
+ * @returns {React$Element<any>}
+ */
+export default function PinnedIndicator() {
+    return (
+        <BaseIndicator icon = { IconPin } />
+    );
+}

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

@@ -0,0 +1,78 @@
+import React, { Component } from 'react';
+import { View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { IconRaiseHand } from '../../../base/icons/svg';
+import { getParticipantById, hasRaisedHand } from '../../../base/participants/functions';
+import BaseIndicator from '../../../base/react/components/native/BaseIndicator';
+
+import styles from './styles';
+
+export interface IProps {
+
+    /**
+     * True if the hand is raised for this participant.
+     */
+    _raisedHand?: boolean;
+
+    /**
+     * The participant id who we want to render the raised hand indicator
+     * for.
+     */
+    participantId: string;
+}
+
+
+/**
+ * Thumbnail badge showing that the participant would like to speak.
+ *
+ * @augments Component
+ */
+class RaisedHandIndicator extends Component<IProps> {
+
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        if (!this.props._raisedHand) {
+            return null;
+        }
+
+        return this._renderIndicator();
+    }
+
+    /**
+     * Renders the platform specific indicator element.
+     *
+     * @returns {React$Element<*>}
+     */
+    _renderIndicator() {
+        return (
+            <View style = { styles.raisedHandIndicator as ViewStyle }>
+                <BaseIndicator
+                    icon = { IconRaiseHand }
+                    iconStyle = { styles.raisedHandIcon } />
+            </View>
+        );
+    }
+}
+
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {IProps} ownProps - The own props of the component.
+ * @returns {Object}
+ */
+function _mapStateToProps(state: IReduxState, ownProps: IProps) {
+    const participant = getParticipantById(state, ownProps.participantId);
+
+    return {
+        _raisedHand: hasRaisedHand(participant)
+    };
+}
+
+export default connect(_mapStateToProps)(RaisedHandIndicator);

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

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { IconScreenshare } from '../../../base/icons/svg';
+import BaseIndicator from '../../../base/react/components/native/BaseIndicator';
+
+/**
+ * Thumbnail badge for displaying if a participant is sharing their screen.
+ *
+ * @returns {React$Element<any>}
+ */
+export default function ScreenShareIndicator() {
+    return (
+        <BaseIndicator icon = { IconScreenshare } />
+    );
+}

react/features/filmstrip/components/native/Thumbnail.tsx

@@ -0,0 +1,444 @@
+import React, { PureComponent } from 'react';
+import { Image, ImageStyle, View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
+
+import { IReduxState, IStore } from '../../../app/types';
+import { JitsiTrackEvents } from '../../../base/lib-jitsi-meet';
+import { MEDIA_TYPE, VIDEO_TYPE } from '../../../base/media/constants';
+import { pinParticipant } from '../../../base/participants/actions';
+import ParticipantView from '../../../base/participants/components/ParticipantView.native';
+import { PARTICIPANT_ROLE } from '../../../base/participants/constants';
+import {
+    getLocalParticipant,
+    getParticipantByIdOrUndefined,
+    getParticipantCount,
+    hasRaisedHand,
+    isEveryoneModerator,
+    isScreenShareParticipant
+} from '../../../base/participants/functions';
+import { FakeParticipant } from '../../../base/participants/types';
+import Container from '../../../base/react/components/native/Container';
+import { StyleType } from '../../../base/styles/functions.any';
+import { trackStreamingStatusChanged } from '../../../base/tracks/actions.native';
+import {
+    getTrackByMediaTypeAndParticipant,
+    getVideoTrackByParticipant
+} from '../../../base/tracks/functions.native';
+import { ITrack } from '../../../base/tracks/types';
+import ConnectionIndicator from '../../../connection-indicator/components/native/ConnectionIndicator';
+import DisplayNameLabel from '../../../display-name/components/native/DisplayNameLabel';
+import { getGifDisplayMode, getGifForParticipant } from '../../../gifs/functions.native';
+import {
+    showConnectionStatus,
+    showContextMenuDetails,
+    showSharedVideoMenu
+} from '../../../participants-pane/actions.native';
+import { toggleToolboxVisible } from '../../../toolbox/actions.native';
+import { shouldDisplayTileView } from '../../../video-layout/functions.native';
+import { SQUARE_TILE_ASPECT_RATIO } from '../../constants';
+
+import AudioMutedIndicator from './AudioMutedIndicator';
+import ModeratorIndicator from './ModeratorIndicator';
+import PinnedIndicator from './PinnedIndicator';
+import RaisedHandIndicator from './RaisedHandIndicator';
+import ScreenShareIndicator from './ScreenShareIndicator';
+import styles, { AVATAR_SIZE } from './styles';
+
+
+/**
+ * Thumbnail component's property types.
+ */
+interface IProps {
+
+    /**
+     * Whether local audio (microphone) is muted or not.
+     */
+    _audioMuted: boolean;
+
+    /**
+     * The type of participant if the participant is fake.
+     */
+    _fakeParticipant?: FakeParticipant;
+
+    /**
+     * URL of GIF sent by this participant, null if there's none.
+     */
+    _gifSrc?: string;
+
+    /**
+     * Indicates whether the participant is screen sharing.
+     */
+    _isScreenShare: boolean;
+
+    /**
+     * Indicates whether the thumbnail is for a virtual screenshare participant.
+     */
+    _isVirtualScreenshare: boolean;
+
+    /**
+     * Indicates whether the participant is local.
+     */
+    _local?: boolean;
+
+    /**
+     * Shared video local participant owner.
+     */
+    _localVideoOwner: boolean;
+
+    /**
+     * The ID of the participant obtain from the participant object in Redux.
+     *
+     * NOTE: Generally it should be the same as the participantID prop except the case where the passed
+     * participantID doesn't correspond to any of the existing participants.
+     */
+    _participantId: string;
+
+    /**
+     * Indicates whether the participant is pinned or not.
+     */
+    _pinned?: boolean;
+
+    /**
+     * Whether or not the participant has the hand raised.
+     */
+    _raisedHand: boolean;
+
+    /**
+     * Whether to show the dominant speaker indicator or not.
+     */
+    _renderDominantSpeakerIndicator?: boolean;
+
+    /**
+     * Whether to show the moderator indicator or not.
+     */
+    _renderModeratorIndicator: boolean;
+
+    _shouldDisplayTileView: boolean;
+
+    /**
+     * The video track that will be displayed in the thumbnail.
+     */
+    _videoTrack?: ITrack;
+
+    /**
+     * Invoked to trigger state changes in Redux.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * The height of the thumbnail.
+     */
+    height?: number;
+
+    /**
+     * The ID of the participant related to the thumbnail.
+     */
+    participantID?: string;
+
+    /**
+     * Whether to display or hide the display name of the participant in the thumbnail.
+     */
+    renderDisplayName?: boolean;
+
+    /**
+     * If true, it tells the thumbnail that it needs to behave differently. E.g. React differently to a single tap.
+     */
+    tileView?: boolean;
+}
+
+/**
+ * React component for video thumbnail.
+ */
+class Thumbnail extends PureComponent<IProps> {
+
+    /**
+     * Creates new Thumbnail component.
+     *
+     * @param {IProps} props - The props of the component.
+     * @returns {Thumbnail}
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._onClick = this._onClick.bind(this);
+        this._onThumbnailLongPress = this._onThumbnailLongPress.bind(this);
+        this.handleTrackStreamingStatusChanged = this.handleTrackStreamingStatusChanged.bind(this);
+    }
+
+    /**
+     * Thumbnail click handler.
+     *
+     * @returns {void}
+     */
+    _onClick() {
+        const { _participantId, _pinned, dispatch, tileView } = this.props;
+
+        if (tileView) {
+            dispatch(toggleToolboxVisible());
+        } else {
+            dispatch(pinParticipant(_pinned ? null : _participantId));
+        }
+    }
+
+    /**
+     * Thumbnail long press handler.
+     *
+     * @returns {void}
+     */
+    _onThumbnailLongPress() {
+        const { _fakeParticipant, _participantId, _local, _localVideoOwner, dispatch } = this.props;
+
+        if (_fakeParticipant && _localVideoOwner) {
+            dispatch(showSharedVideoMenu(_participantId));
+        } else if (!_fakeParticipant) {
+            if (_local) {
+                dispatch(showConnectionStatus(_participantId));
+            } else {
+                dispatch(showContextMenuDetails(_participantId));
+            }
+        } // else no-op
+    }
+
+    /**
+     * Renders the indicators for the thumbnail.
+     *
+     * @returns {ReactElement}
+     */
+    _renderIndicators() {
+        const {
+            _audioMuted: audioMuted,
+            _fakeParticipant,
+            _isScreenShare: isScreenShare,
+            _isVirtualScreenshare,
+            _participantId: participantId,
+            _pinned,
+            _renderModeratorIndicator: renderModeratorIndicator,
+            _shouldDisplayTileView,
+            renderDisplayName,
+            tileView
+        } = this.props;
+        const indicators = [];
+
+        let bottomIndicatorsContainerStyle;
+
+        if (_shouldDisplayTileView) {
+            bottomIndicatorsContainerStyle = styles.bottomIndicatorsContainer;
+        } else if (audioMuted || renderModeratorIndicator) {
+            bottomIndicatorsContainerStyle = styles.bottomIndicatorsContainer;
+        } else {
+            bottomIndicatorsContainerStyle = null;
+        }
+
+        if (!_fakeParticipant || _isVirtualScreenshare) {
+            indicators.push(<View
+                key = 'top-left-indicators'
+                style = { styles.thumbnailTopLeftIndicatorContainer as ViewStyle }>
+                { !_isVirtualScreenshare && <ConnectionIndicator participantId = { participantId } /> }
+                { !_isVirtualScreenshare && <RaisedHandIndicator participantId = { participantId } /> }
+                { tileView && (isScreenShare || _isVirtualScreenshare) && (
+                    <View style = { styles.screenShareIndicatorContainer as ViewStyle }>
+                        <ScreenShareIndicator />
+                    </View>
+                ) }
+            </View>);
+            indicators.push(<Container
+                key = 'bottom-indicators'
+                style = { styles.thumbnailIndicatorContainer as StyleType }>
+                <Container
+                    style = { bottomIndicatorsContainerStyle as StyleType }>
+                    { audioMuted && !_isVirtualScreenshare && <AudioMutedIndicator /> }
+                    { !tileView && _pinned && <PinnedIndicator />}
+                    { renderModeratorIndicator && !_isVirtualScreenshare && <ModeratorIndicator />}
+                    { !tileView && (isScreenShare || _isVirtualScreenshare) && <ScreenShareIndicator /> }
+                </Container>
+                {
+                    renderDisplayName && <DisplayNameLabel
+                        contained = { true }
+                        participantId = { participantId } />
+                }
+            </Container>);
+        }
+
+        return indicators;
+    }
+
+    /**
+     * Starts listening for track streaming status updates after the initial render.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentDidMount() {
+        // Listen to track streaming status changed event to keep it updated.
+        // TODO: after converting this component to a react function component,
+        // use a custom hook to update local track streaming status.
+        const { _videoTrack, dispatch } = this.props;
+
+        if (_videoTrack && !_videoTrack.local) {
+            _videoTrack.jitsiTrack.on(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
+                this.handleTrackStreamingStatusChanged);
+            dispatch(trackStreamingStatusChanged(_videoTrack.jitsiTrack,
+                _videoTrack.jitsiTrack.getTrackStreamingStatus()));
+        }
+    }
+
+    /**
+     * Stops listening for track streaming status updates on the old track and starts listening instead on the new
+     * track.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentDidUpdate(prevProps: IProps) {
+        // TODO: after converting this component to a react function component,
+        // use a custom hook to update local track streaming status.
+        const { _videoTrack, dispatch } = this.props;
+
+        if (prevProps._videoTrack?.jitsiTrack?.getSourceName() !== _videoTrack?.jitsiTrack?.getSourceName()) {
+            if (prevProps._videoTrack && !prevProps._videoTrack.local) {
+                prevProps._videoTrack.jitsiTrack.off(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
+                    this.handleTrackStreamingStatusChanged);
+                dispatch(trackStreamingStatusChanged(prevProps._videoTrack.jitsiTrack,
+                    prevProps._videoTrack.jitsiTrack.getTrackStreamingStatus()));
+            }
+            if (_videoTrack && !_videoTrack.local) {
+                _videoTrack.jitsiTrack.on(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
+                    this.handleTrackStreamingStatusChanged);
+                dispatch(trackStreamingStatusChanged(_videoTrack.jitsiTrack,
+                    _videoTrack.jitsiTrack.getTrackStreamingStatus()));
+            }
+        }
+    }
+
+    /**
+     * Remove listeners for track streaming status update.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentWillUnmount() {
+        // TODO: after converting this component to a react function component,
+        // use a custom hook to update local track streaming status.
+        const { _videoTrack, dispatch } = this.props;
+
+        if (_videoTrack && !_videoTrack.local) {
+            _videoTrack.jitsiTrack.off(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
+                this.handleTrackStreamingStatusChanged);
+            dispatch(trackStreamingStatusChanged(_videoTrack.jitsiTrack,
+                _videoTrack.jitsiTrack.getTrackStreamingStatus()));
+        }
+    }
+
+    /**
+     * Handle track streaming status change event by by dispatching an action to update track streaming status for the
+     * given track in app state.
+     *
+     * @param {JitsiTrack} jitsiTrack - The track with streaming status updated.
+     * @param {JitsiTrackStreamingStatus} streamingStatus - The updated track streaming status.
+     * @returns {void}
+     */
+    handleTrackStreamingStatusChanged(jitsiTrack: any, streamingStatus: string) {
+        this.props.dispatch(trackStreamingStatusChanged(jitsiTrack, streamingStatus));
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const {
+            _fakeParticipant,
+            _gifSrc,
+            _isScreenShare: isScreenShare,
+            _isVirtualScreenshare,
+            _participantId: participantId,
+            _raisedHand,
+            _renderDominantSpeakerIndicator,
+            height,
+            tileView
+        } = this.props;
+        const styleOverrides = tileView ? {
+            aspectRatio: SQUARE_TILE_ASPECT_RATIO,
+            flex: 0,
+            height,
+            maxHeight: null,
+            maxWidth: null,
+            width: null
+        } : null;
+
+        return (
+            <Container
+                onClick = { this._onClick }
+                onLongPress = { this._onThumbnailLongPress }
+                style = { [
+                    styles.thumbnail,
+                    styleOverrides,
+                    _raisedHand && !_isVirtualScreenshare ? styles.thumbnailRaisedHand : null,
+                    _renderDominantSpeakerIndicator && !_isVirtualScreenshare ? styles.thumbnailDominantSpeaker : null
+                ] as StyleType[] }
+                touchFeedback = { false }>
+                { _gifSrc ? <Image
+                    source = {{ uri: _gifSrc }}
+                    style = { styles.thumbnailGif as ImageStyle } />
+                    : <>
+                        <ParticipantView
+                            avatarSize = { tileView ? AVATAR_SIZE * 1.5 : AVATAR_SIZE }
+                            disableVideo = { !tileView && (isScreenShare || _fakeParticipant) }
+                            participantId = { participantId }
+                            zOrder = { 1 } />
+                        {
+                            this._renderIndicators()
+                        }
+                    </>
+                }
+            </Container>
+        );
+    }
+}
+
+/**
+ * Function that maps parts of Redux state tree into component props.
+ *
+ * @param {Object} state - Redux state.
+ * @param {IProps} ownProps - Properties of component.
+ * @returns {Object}
+ */
+function _mapStateToProps(state: IReduxState, ownProps: any) {
+    const { ownerId } = state['features/shared-video'];
+    const tracks = state['features/base/tracks'];
+    const { participantID, tileView } = ownProps;
+    const participant = getParticipantByIdOrUndefined(state, participantID);
+    const localParticipantId = getLocalParticipant(state)?.id;
+    const id = participant?.id;
+    const audioTrack = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.AUDIO, id);
+    const videoTrack = getVideoTrackByParticipant(state, participant);
+    const isScreenShare = videoTrack?.videoType === VIDEO_TYPE.DESKTOP;
+    const participantCount = getParticipantCount(state);
+    const renderDominantSpeakerIndicator = participant?.dominantSpeaker && participantCount > 2;
+    const _isEveryoneModerator = isEveryoneModerator(state);
+    const renderModeratorIndicator = tileView && !_isEveryoneModerator
+        && participant?.role === PARTICIPANT_ROLE.MODERATOR;
+    const { gifUrl: gifSrc } = getGifForParticipant(state, id ?? '');
+    const mode = getGifDisplayMode(state);
+
+    return {
+        _audioMuted: audioTrack?.muted ?? true,
+        _fakeParticipant: participant?.fakeParticipant,
+        _gifSrc: mode === 'chat' ? undefined : gifSrc,
+        _isScreenShare: isScreenShare,
+        _isVirtualScreenshare: isScreenShareParticipant(participant),
+        _local: participant?.local,
+        _localVideoOwner: Boolean(ownerId === localParticipantId),
+        _participantId: id ?? '',
+        _pinned: participant?.pinned,
+        _raisedHand: hasRaisedHand(participant),
+        _renderDominantSpeakerIndicator: renderDominantSpeakerIndicator,
+        _renderModeratorIndicator: renderModeratorIndicator,
+        _shouldDisplayTileView: shouldDisplayTileView(state),
+        _videoTrack: videoTrack
+    };
+}
+
+export default connect(_mapStateToProps)(Thumbnail);

react/features/filmstrip/components/native/TileView.tsx

@@ -0,0 +1,299 @@
+import React, { PureComponent } from 'react';
+import {
+    FlatList,
+    GestureResponderEvent,
+    SafeAreaView,
+    TouchableWithoutFeedback,
+    ViewToken
+} from 'react-native';
+import { EdgeInsets, withSafeAreaInsets } from 'react-native-safe-area-context';
+import { connect } from 'react-redux';
+
+import { IReduxState, IStore } from '../../../app/types';
+import { getLocalParticipant, getParticipantCountWithFake } from '../../../base/participants/functions';
+import { ILocalParticipant } from '../../../base/participants/types';
+import { getHideSelfView } from '../../../base/settings/functions.any';
+import { setVisibleRemoteParticipants } from '../../actions.web';
+
+import Thumbnail from './Thumbnail';
+import styles from './styles';
+
+/**
+ * The type of the React {@link Component} props of {@link TileView}.
+ */
+interface IProps {
+
+    /**
+     * Application's aspect ratio.
+     */
+    _aspectRatio: Symbol;
+
+    /**
+     * The number of columns.
+     */
+    _columns: number;
+
+    /**
+     * Whether or not to hide the self view.
+     */
+    _disableSelfView: boolean;
+
+    /**
+     * Application's viewport height.
+     */
+    _height: number;
+
+    /**
+     * The local participant.
+     */
+    _localParticipant?: ILocalParticipant;
+
+    /**
+     * The number of participants in the conference.
+     */
+    _participantCount: number;
+
+    /**
+     * An array with the IDs of the remote participants in the conference.
+     */
+    _remoteParticipants: Array<string>;
+
+    /**
+     * The thumbnail height.
+     */
+    _thumbnailHeight?: number;
+
+    /**
+     * Application's viewport height.
+     */
+    _width: number;
+
+    /**
+     * Invoked to update the receiver video quality.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * Object containing the safe area insets.
+     */
+    insets: EdgeInsets;
+
+    /**
+     * Callback to invoke when tile view is tapped.
+     */
+    onClick: (e?: GestureResponderEvent) => void;
+}
+
+/**
+ * An empty array. The purpose of the constant is to use the same reference every time we need an empty array.
+ * This will prevent unnecessary re-renders.
+ */
+const EMPTY_ARRAY: any[] = [];
+
+/**
+ * Implements a React {@link PureComponent} which displays thumbnails in a two
+ * dimensional grid.
+ *
+ * @augments PureComponent
+ */
+class TileView extends PureComponent<IProps> {
+
+    /**
+     * The styles for the content container of the FlatList.
+     */
+    _contentContainerStyles: any;
+
+    /**
+     * The styles for the FlatList.
+     */
+    _flatListStyles: any;
+
+    /**
+     * The FlatList's viewabilityConfig.
+     */
+    _viewabilityConfig: Object;
+
+    /**
+     * Creates new TileView component.
+     *
+     * @param {IProps} props - The props of the component.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._keyExtractor = this._keyExtractor.bind(this);
+        this._onViewableItemsChanged = this._onViewableItemsChanged.bind(this);
+        this._renderThumbnail = this._renderThumbnail.bind(this);
+
+        this._viewabilityConfig = {
+            itemVisiblePercentThreshold: 30,
+            minimumViewTime: 500
+        };
+        this._flatListStyles = {
+            ...styles.flatListTileView
+        };
+        this._contentContainerStyles = {
+            ...styles.contentContainer,
+            paddingBottom: this.props.insets?.bottom || 0
+        };
+    }
+
+    /**
+     * Returns a key for a passed item of the list.
+     *
+     * @param {string} item - The user ID.
+     * @returns {string} - The user ID.
+     */
+    _keyExtractor(item: string) {
+        return item;
+    }
+
+    /**
+     * A handler for visible items changes.
+     *
+     * @param {Object} data - The visible items data.
+     * @param {Array<Object>} data.viewableItems - The visible items array.
+     * @returns {void}
+     */
+    _onViewableItemsChanged({ viewableItems = [] }: { viewableItems: ViewToken[]; }) {
+        const { _disableSelfView } = this.props;
+
+        if (viewableItems[0]?.index === 0 && !_disableSelfView) {
+            // Skip the local thumbnail.
+            viewableItems.shift();
+        }
+
+        if (viewableItems.length === 0) {
+            // User might be fast-scrolling, it will stabilize.
+            return;
+        }
+
+        // We are off by one in the remote participants array.
+        const startIndex = Number(viewableItems[0].index) - (_disableSelfView ? 0 : 1);
+        const endIndex = Number(viewableItems[viewableItems.length - 1].index) - (_disableSelfView ? 0 : 1);
+
+        this.props.dispatch(setVisibleRemoteParticipants(startIndex, endIndex));
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const { _columns, _height, _thumbnailHeight, _width, onClick } = this.props;
+        const participants = this._getSortedParticipants();
+        const initialRowsToRender = Math.ceil(_height / (Number(_thumbnailHeight) + (2 * styles.thumbnail.margin)));
+
+        if (this._flatListStyles.minHeight !== _height || this._flatListStyles.minWidth !== _width) {
+            this._flatListStyles = {
+                ...styles.flatListTileView,
+                minHeight: _height,
+                minWidth: _width
+            };
+        }
+
+        if (this._contentContainerStyles.minHeight !== _height || this._contentContainerStyles.minWidth !== _width) {
+            this._contentContainerStyles = {
+                ...styles.contentContainer,
+                minHeight: _height,
+                minWidth: _width,
+                paddingBottom: this.props.insets?.bottom || 0
+            };
+        }
+
+        return (
+            <TouchableWithoutFeedback onPress = { onClick }>
+                <SafeAreaView style = { styles.flatListContainer }>
+                    <FlatList
+                        bounces = { false }
+                        contentContainerStyle = { this._contentContainerStyles }
+                        data = { participants }
+                        horizontal = { false }
+                        initialNumToRender = { initialRowsToRender }
+                        key = { _columns }
+                        keyExtractor = { this._keyExtractor }
+                        numColumns = { _columns }
+                        onViewableItemsChanged = { this._onViewableItemsChanged }
+                        renderItem = { this._renderThumbnail }
+                        showsHorizontalScrollIndicator = { false }
+                        showsVerticalScrollIndicator = { false }
+                        style = { this._flatListStyles }
+                        viewabilityConfig = { this._viewabilityConfig }
+                        windowSize = { 2 } />
+                </SafeAreaView>
+            </TouchableWithoutFeedback>
+        );
+    }
+
+    /**
+     * Returns all participants with the local participant at the end.
+     *
+     * @private
+     * @returns {Participant[]}
+     */
+    _getSortedParticipants() {
+        const { _localParticipant, _remoteParticipants, _disableSelfView } = this.props;
+
+        if (!_localParticipant) {
+            return EMPTY_ARRAY;
+        }
+
+        if (_disableSelfView) {
+            return _remoteParticipants;
+        }
+
+        return [ _localParticipant?.id, ..._remoteParticipants ];
+    }
+
+    /**
+     * Creates React Element to display each participant in a thumbnail.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderThumbnail({ item }: { item: string; }) {
+        const { _thumbnailHeight } = this.props;
+
+        return (
+            <Thumbnail
+                height = { _thumbnailHeight }
+                key = { item }
+                participantID = { item }
+                renderDisplayName = { true }
+                tileView = { true } />)
+        ;
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated {@code TileView}'s props.
+ *
+ * @param {Object} state - The redux state.
+ * @param {Object} ownProps - Component props.
+ * @private
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState, ownProps: any) {
+    const responsiveUi = state['features/base/responsive-ui'];
+    const { remoteParticipants, tileViewDimensions } = state['features/filmstrip'];
+    const disableSelfView = getHideSelfView(state);
+    const { height } = tileViewDimensions?.thumbnailSize ?? {};
+    const { columns } = tileViewDimensions ?? {};
+
+    return {
+        _aspectRatio: responsiveUi.aspectRatio,
+        _columns: columns ?? 1,
+        _disableSelfView: disableSelfView,
+        _height: responsiveUi.clientHeight - (ownProps.insets?.top || 0),
+        _insets: ownProps.insets,
+        _localParticipant: getLocalParticipant(state),
+        _participantCount: getParticipantCountWithFake(state),
+        _remoteParticipants: remoteParticipants,
+        _thumbnailHeight: height,
+        _width: responsiveUi.clientWidth - (ownProps.insets?.right || 0) - (ownProps.insets?.left || 0)
+    };
+}
+
+export default withSafeAreaInsets(connect(_mapStateToProps)(TileView));

react/features/filmstrip/components/native/styles.ts

@@ -0,0 +1,182 @@
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+import { SMALL_THUMBNAIL_SIZE } from '../../constants';
+
+/**
+ * Size for the Avatar.
+ */
+export const AVATAR_SIZE = 50;
+
+const indicatorContainer = {
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+    borderRadius: BaseTheme.shape.borderRadius,
+    height: 24,
+    margin: 2,
+    padding: 2
+};
+
+
+/**
+ * The styles of the feature filmstrip.
+ */
+export default {
+
+    /**
+     * The FlatList content container styles.
+     */
+    contentContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 0
+    },
+
+    /**
+     * The display name container.
+     */
+    displayNameContainer: {
+        padding: 2
+    },
+
+    /**
+     * The style of the narrow {@link Filmstrip} version which displays
+     * thumbnails in a row at the bottom of the screen.
+     */
+    filmstripNarrow: {
+        flexDirection: 'row',
+        flexGrow: 0,
+        justifyContent: 'flex-end',
+        margin: 6
+    },
+
+    /**
+     * The style of the wide {@link Filmstrip} version which displays thumbnails
+     * in a column on the short size of the screen.
+     *
+     * NOTE: width is calculated based on the children, but it should also align
+     * to {@code FILMSTRIP_SIZE}.
+     */
+    filmstripWide: {
+        bottom: BaseTheme.spacing[0],
+        flexDirection: 'column',
+        flexGrow: 0,
+        position: 'absolute',
+        right: BaseTheme.spacing[0],
+        top: BaseTheme.spacing[0]
+    },
+
+    /**
+     * The styles for the FlatList container.
+     */
+    flatListContainer: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flex: 0
+    },
+
+    /**
+     * The styles for the FlatList component in stage view.
+     */
+    flatListStageView: {
+        flexGrow: 0
+    },
+
+    /**
+     * The styles for the FlatList component in tile view.
+     */
+    flatListTileView: {
+        flex: 0
+    },
+
+    /**
+     * Container of the {@link LocalThumbnail}.
+     */
+    localThumbnail: {
+        alignContent: 'stretch',
+        alignSelf: 'stretch',
+        aspectRatio: 1,
+        flexShrink: 0,
+        flexDirection: 'row'
+    },
+
+    /**
+     * The style of a participant's Thumbnail which renders either the video or
+     * the avatar of the associated participant.
+     */
+    thumbnail: {
+        alignItems: 'stretch',
+        backgroundColor: BaseTheme.palette.ui02,
+        borderColor: BaseTheme.palette.ui03,
+        borderRadius: BaseTheme.shape.borderRadius,
+        borderStyle: 'solid',
+        borderWidth: 1,
+        flex: 1,
+        height: SMALL_THUMBNAIL_SIZE,
+        justifyContent: 'center',
+        margin: 2,
+        maxHeight: SMALL_THUMBNAIL_SIZE,
+        maxWidth: SMALL_THUMBNAIL_SIZE,
+        overflow: 'hidden',
+        position: 'relative',
+        width: SMALL_THUMBNAIL_SIZE
+    },
+
+    indicatorContainer: {
+        ...indicatorContainer
+    },
+
+    screenShareIndicatorContainer: {
+        ...indicatorContainer
+    },
+
+    /**
+     * The thumbnail indicator container.
+     */
+    thumbnailIndicatorContainer: {
+        ...indicatorContainer,
+        bottom: 3,
+        flex: 1,
+        flexDirection: 'row',
+        left: 3,
+        position: 'absolute',
+        maxWidth: '95%',
+        overflow: 'hidden',
+        padding: BaseTheme.spacing[0]
+    },
+
+    bottomIndicatorsContainer: {
+        flexDirection: 'row',
+        padding: BaseTheme.spacing[1]
+    },
+
+    thumbnailTopLeftIndicatorContainer: {
+        ...indicatorContainer,
+        backgroundColor: 'unset',
+        flexDirection: 'row',
+        position: 'absolute',
+        top: BaseTheme.spacing[1]
+    },
+
+    raisedHandIndicator: {
+        ...indicatorContainer,
+        backgroundColor: BaseTheme.palette.warning02
+    },
+
+    raisedHandIcon: {
+        color: BaseTheme.palette.uiBackground
+    },
+
+    thumbnailRaisedHand: {
+        borderWidth: 2,
+        borderColor: BaseTheme.palette.warning02
+    },
+
+    thumbnailDominantSpeaker: {
+        borderWidth: 2,
+        borderColor: BaseTheme.palette.action01Hover
+    },
+
+    thumbnailGif: {
+        flexGrow: 1,
+        resizeMode: 'contain'
+    }
+};

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;