snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/filmstrip/functions.web.ts

@@ -0,0 +1,852 @@
+import { Theme } from '@mui/material/styles';
+
+import { IReduxState } from '../app/types';
+import { IStateful } from '../base/app/types';
+import { isMobileBrowser, isTouchDevice, shouldEnableResize } from '../base/environment/utils';
+import { MEDIA_TYPE } from '../base/media/constants';
+import {
+    getLocalParticipant,
+    getParticipantById,
+    getParticipantCount,
+    getParticipantCountWithFake,
+    getPinnedParticipant,
+    isScreenShareParticipant
+} from '../base/participants/functions';
+import { toState } from '../base/redux/functions';
+import { getHideSelfView } from '../base/settings/functions.any';
+import {
+    getVideoTrackByParticipant,
+    isLocalTrackMuted,
+    isRemoteTrackMuted
+} from '../base/tracks/functions';
+import { isTrackStreamingStatusActive } from '../connection-indicator/functions';
+import { isSharingStatus } from '../shared-video/functions';
+import { LAYOUTS } from '../video-layout/constants';
+import { getCurrentLayout, getNotResponsiveTileViewGridDimensions } from '../video-layout/functions.web';
+
+import {
+    ASPECT_RATIO_BREAKPOINT,
+    DEFAULT_FILMSTRIP_WIDTH,
+    DEFAULT_LOCAL_TILE_ASPECT_RATIO,
+    DISPLAY_AVATAR,
+    DISPLAY_VIDEO,
+    DRAG_HANDLE_WIDTH,
+    FILMSTRIP_GRID_BREAKPOINT,
+    FILMSTRIP_TYPE,
+    INDICATORS_TOOLTIP_POSITION,
+    SCROLL_SIZE,
+    SQUARE_TILE_ASPECT_RATIO,
+    THUMBNAIL_TYPE,
+    TILE_ASPECT_RATIO,
+    TILE_HORIZONTAL_MARGIN,
+    TILE_MIN_HEIGHT_LARGE,
+    TILE_MIN_HEIGHT_SMALL,
+    TILE_PORTRAIT_ASPECT_RATIO,
+    TILE_VERTICAL_MARGIN,
+    TILE_VIEW_DEFAULT_NUMBER_OF_VISIBLE_TILES,
+    TILE_VIEW_GRID_HORIZONTAL_MARGIN,
+    TILE_VIEW_GRID_VERTICAL_MARGIN,
+    TOUCH_DRAG_HANDLE_PADDING,
+    VERTICAL_VIEW_HORIZONTAL_MARGIN
+} from './constants';
+
+export * from './functions.any';
+
+/**
+ * Returns true if the filmstrip on mobile is visible, false otherwise.
+ *
+ * NOTE: Filmstrip on web behaves differently to mobile, much simpler, but so
+ * function lies here only for the sake of consistency and to avoid flow errors
+ * on import.
+ *
+ * @param {IStateful} stateful - The Object or Function that can be
+ * resolved to a Redux state object with the toState function.
+ * @returns {boolean}
+ */
+export function isFilmstripVisible(stateful: IStateful) {
+    return toState(stateful)['features/filmstrip'].visible;
+}
+
+/**
+ * Determines whether the remote video thumbnails should be displayed/visible in
+ * the filmstrip.
+ *
+ * @param {IReduxState} state - The full redux state.
+ * @returns {boolean} - If remote video thumbnails should be displayed/visible
+ * in the filmstrip, then {@code true}; otherwise, {@code false}.
+ */
+export function shouldRemoteVideosBeVisible(state: IReduxState) {
+    if (state['features/invite'].calleeInfoVisible) {
+        return false;
+    }
+
+    // Include fake participants to derive how many thumbnails are displayed,
+    // as it is assumed all participants, including fake, will be displayed
+    // in the filmstrip.
+    const participantCount = getParticipantCountWithFake(state);
+    let pinnedParticipant;
+    const { disable1On1Mode, filmstrip: { alwaysShowResizeBar } = {} } = state['features/base/config'];
+    const { contextMenuOpened } = state['features/base/responsive-ui'];
+
+    return Boolean(
+        contextMenuOpened
+            || participantCount > 2
+            || alwaysShowResizeBar
+            // Always show the filmstrip when there is another participant to
+            // show and the  local video is pinned, or the toolbar is displayed.
+            || (participantCount > 1
+                && disable1On1Mode !== null
+                && ((!isMobileBrowser() && state['features/toolbox'].visible)
+                    || ((pinnedParticipant = getPinnedParticipant(state))
+                        && pinnedParticipant.local)))
+
+            || disable1On1Mode);
+}
+
+/**
+ * Checks whether there is a playable video stream available for the user associated with the passed ID.
+ *
+ * @param {IStateful} stateful - The Object or Function that can be
+ * resolved to a Redux state object with the toState function.
+ * @param {string} id - The id of the participant.
+ * @returns {boolean} <tt>true</tt> if there is a playable video stream available
+ * or <tt>false</tt> otherwise.
+ */
+export function isVideoPlayable(stateful: IStateful, id: string) {
+    const state = toState(stateful);
+    const tracks = state['features/base/tracks'];
+    const participant = id ? getParticipantById(state, id) : getLocalParticipant(state);
+    const isLocal = participant?.local ?? true;
+    const videoTrack = getVideoTrackByParticipant(state, participant);
+    const isLowBandwidthMode = Boolean(state['features/base/low-bandwidth-mode'].enabled);
+    let isPlayable = false;
+
+    if (isLocal) {
+        const isVideoMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.VIDEO);
+
+        isPlayable = Boolean(videoTrack) && !isVideoMuted && !isLowBandwidthMode;
+    } else if (!participant?.fakeParticipant || isScreenShareParticipant(participant)) {
+        // remote participants excluding shared video
+        const isVideoMuted = isRemoteTrackMuted(tracks, MEDIA_TYPE.VIDEO, id);
+
+        isPlayable = Boolean(videoTrack) && !isVideoMuted && !isLowBandwidthMode && isTrackStreamingStatusActive(videoTrack);
+    }
+
+    return isPlayable;
+}
+
+/**
+ * Calculates the size for thumbnails when in horizontal view layout.
+ *
+ * @param {number} clientHeight - The height of the app window.
+ * @returns {{local: {height, width}, remote: {height, width}}}
+ */
+export function calculateThumbnailSizeForHorizontalView(clientHeight = 0) {
+    const topBottomMargin = 15;
+    const availableHeight = Math.min(clientHeight,
+        (interfaceConfig.FILM_STRIP_MAX_HEIGHT || DEFAULT_FILMSTRIP_WIDTH) + topBottomMargin);
+    const height = availableHeight - topBottomMargin;
+
+    return {
+        local: {
+            height,
+            width: Math.floor(interfaceConfig.LOCAL_THUMBNAIL_RATIO * height)
+        },
+        remote: {
+            height,
+            width: Math.floor(interfaceConfig.REMOTE_THUMBNAIL_RATIO * height)
+        }
+    };
+}
+
+/**
+ * Calculates the size for thumbnails when in vertical view layout.
+ *
+ * @param {number} clientWidth - The available video space width.
+ * @param {number} filmstripWidth - The width of the filmstrip.
+ * @param {boolean} isResizable - Whether the filmstrip is resizable or not.
+ * @returns {{local: {height, width}, remote: {height, width}}}
+ */
+export function calculateThumbnailSizeForVerticalView(clientWidth = 0, filmstripWidth = 0, isResizable = false) {
+    const availableWidth = Math.min(
+        Math.max(clientWidth - VERTICAL_VIEW_HORIZONTAL_MARGIN, 0),
+        (isResizable ? filmstripWidth : interfaceConfig.FILM_STRIP_MAX_HEIGHT) || DEFAULT_FILMSTRIP_WIDTH);
+
+    return {
+        local: {
+            height: Math.floor(availableWidth
+                / (interfaceConfig.LOCAL_THUMBNAIL_RATIO || DEFAULT_LOCAL_TILE_ASPECT_RATIO)),
+            width: availableWidth
+        },
+        remote: {
+            height: isResizable
+                ? DEFAULT_FILMSTRIP_WIDTH
+                : Math.floor(availableWidth / interfaceConfig.REMOTE_THUMBNAIL_RATIO),
+            width: availableWidth
+        }
+    };
+}
+
+/**
+ * Returns the minimum height of a thumbnail.
+ *
+ * @param {number} clientWidth - The available width for rendering thumbnails.
+ * @returns {number} The minimum height of a thumbnail.
+ */
+export function getThumbnailMinHeight(clientWidth: number) {
+    return clientWidth < ASPECT_RATIO_BREAKPOINT ? TILE_MIN_HEIGHT_SMALL : TILE_MIN_HEIGHT_LARGE;
+}
+
+/**
+ * Returns the default aspect ratio for a tile.
+ *
+ * @param {boolean} disableResponsiveTiles - Indicates whether the responsive tiles functionality is disabled.
+ * @param {boolean} disableTileEnlargement - Indicates whether the tiles enlargement functionality is disabled.
+ * @param {number} clientWidth - The available video space width.
+ * @returns {number} The default aspect ratio for a tile.
+ */
+export function getTileDefaultAspectRatio(disableResponsiveTiles: boolean,
+        disableTileEnlargement: boolean, clientWidth: number) {
+    if (!disableResponsiveTiles && disableTileEnlargement && clientWidth < ASPECT_RATIO_BREAKPOINT) {
+        return SQUARE_TILE_ASPECT_RATIO;
+    }
+
+    return TILE_ASPECT_RATIO;
+}
+
+/**
+ * Returns the number of participants that will be displayed in tile view.
+ *
+ * @param {Object} state - The redux store state.
+ * @returns {number} The number of participants that will be displayed in tile view.
+ */
+export function getNumberOfPartipantsForTileView(state: IReduxState) {
+    const { iAmRecorder } = state['features/base/config'];
+    const disableSelfView = getHideSelfView(state);
+    const { localScreenShare } = state['features/base/participants'];
+    const localParticipantsCount = localScreenShare ? 2 : 1;
+    const numberOfParticipants = getParticipantCountWithFake(state)
+        - (iAmRecorder ? 1 : 0)
+        - (disableSelfView ? localParticipantsCount : 0);
+
+    return numberOfParticipants;
+}
+
+/**
+ * Calculates the dimensions (thumbnail width/height and columns/row) for tile view when the responsive tiles are
+ * disabled.
+ *
+ * @param {Object} state - The redux store state.
+ * @returns {Object} - The dimensions.
+ */
+export function calculateNonResponsiveTileViewDimensions(state: IReduxState) {
+    const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
+    const { disableTileEnlargement } = state['features/base/config'];
+    const { columns: c, minVisibleRows, rows: r } = getNotResponsiveTileViewGridDimensions(state);
+    const size = calculateThumbnailSizeForTileView({
+        columns: c,
+        minVisibleRows,
+        clientWidth: videoSpaceWidth,
+        clientHeight,
+        disableTileEnlargement,
+        disableResponsiveTiles: true
+    });
+
+    if (typeof size === 'undefined') { // The columns don't fit into the screen. We will have horizontal scroll.
+        const aspectRatio = disableTileEnlargement
+            ? getTileDefaultAspectRatio(true, disableTileEnlargement, videoSpaceWidth)
+            : TILE_PORTRAIT_ASPECT_RATIO;
+
+        const height = getThumbnailMinHeight(videoSpaceWidth);
+
+        return {
+            height,
+            width: aspectRatio * height,
+            columns: c,
+            rows: r
+        };
+    }
+
+    return {
+        height: size.height,
+        width: size.width,
+        columns: c,
+        rows: r
+    };
+}
+
+/**
+ * Calculates the dimensions (thumbnail width/height and columns/row) for tile view when the responsive tiles are
+ * enabled.
+ *
+ * @param {Object} state - The redux store state.
+ * @returns {Object} - The dimensions.
+ */
+export function calculateResponsiveTileViewDimensions({
+    clientWidth,
+    clientHeight,
+    disableTileEnlargement = false,
+    noHorizontalContainerMargin = false,
+    maxColumns,
+    numberOfParticipants,
+    desiredNumberOfVisibleTiles = TILE_VIEW_DEFAULT_NUMBER_OF_VISIBLE_TILES,
+    minTileHeight
+}: {
+    clientHeight: number;
+    clientWidth: number;
+    desiredNumberOfVisibleTiles: number;
+    disableTileEnlargement?: boolean;
+    maxColumns: number;
+    minTileHeight?: number | null;
+    noHorizontalContainerMargin?: boolean;
+    numberOfParticipants: number;
+}) {
+    let height, width;
+    let columns, rows;
+
+    interface IDimensions {
+        columns?: number;
+        height?: number;
+        maxArea: number;
+        numberOfVisibleParticipants?: number;
+        rows?: number;
+        width?: number;
+    }
+
+    let dimensions: IDimensions = {
+        maxArea: 0
+    };
+    let minHeightEnforcedDimensions: IDimensions = {
+        maxArea: 0
+    };
+    let zeroVisibleRowsDimensions: IDimensions = {
+        maxArea: 0
+    };
+
+    for (let c = 1; c <= Math.min(maxColumns, numberOfParticipants, desiredNumberOfVisibleTiles); c++) {
+        const r = Math.ceil(numberOfParticipants / c);
+
+        // we want to display as much as possible thumbnails up to desiredNumberOfVisibleTiles
+        const visibleRows
+            = numberOfParticipants <= desiredNumberOfVisibleTiles ? r : Math.floor(desiredNumberOfVisibleTiles / c);
+
+        const size = calculateThumbnailSizeForTileView({
+            columns: c,
+            minVisibleRows: visibleRows,
+            clientWidth,
+            clientHeight,
+            disableTileEnlargement,
+            disableResponsiveTiles: false,
+            noHorizontalContainerMargin,
+            minTileHeight
+        });
+
+        if (size) {
+            const { height: currentHeight, width: currentWidth, minHeightEnforced, maxVisibleRows } = size;
+            const numberOfVisibleParticipants = Math.min(c * maxVisibleRows, numberOfParticipants);
+
+            let area = Math.round(
+                (currentHeight + TILE_VERTICAL_MARGIN)
+                * (currentWidth + TILE_HORIZONTAL_MARGIN)
+                * numberOfVisibleParticipants);
+
+            const currentDimensions = {
+                maxArea: area,
+                height: currentHeight,
+                width: currentWidth,
+                columns: c,
+                rows: r,
+                numberOfVisibleParticipants
+            };
+            const { numberOfVisibleParticipants: oldNumberOfVisibleParticipants = 0 } = dimensions;
+
+            if (!minHeightEnforced) {
+                if (area > dimensions.maxArea) {
+                    dimensions = currentDimensions;
+                } else if ((area === dimensions.maxArea)
+                    && ((oldNumberOfVisibleParticipants > desiredNumberOfVisibleTiles
+                            && oldNumberOfVisibleParticipants >= numberOfParticipants)
+                        || (oldNumberOfVisibleParticipants < numberOfParticipants
+                            && numberOfVisibleParticipants <= desiredNumberOfVisibleTiles))
+                ) { // If the area of the new candidates and the old ones are equal we prefer the one that will have
+                    // closer number of visible participants to desiredNumberOfVisibleTiles config.
+                    dimensions = currentDimensions;
+                }
+            } else if (minHeightEnforced && area >= minHeightEnforcedDimensions.maxArea) {
+                // If we choose configuration with minHeightEnforced there will be less than desiredNumberOfVisibleTiles
+                // visible tiles, that's why we prefer more columns when the area is the same.
+                minHeightEnforcedDimensions = currentDimensions;
+            } else if (minHeightEnforced && maxVisibleRows === 0) {
+                area = currentHeight * currentWidth * Math.min(c, numberOfParticipants);
+
+                if (area > zeroVisibleRowsDimensions.maxArea) {
+                    zeroVisibleRowsDimensions = {
+                        ...currentDimensions,
+                        maxArea: area
+                    };
+                }
+            }
+        }
+    }
+
+    if (dimensions.maxArea > 0) {
+        ({ height, width, columns, rows } = dimensions);
+    } else if (minHeightEnforcedDimensions.maxArea > 0) {
+        ({ height, width, columns, rows } = minHeightEnforcedDimensions);
+    } else if (zeroVisibleRowsDimensions.maxArea > 0) {
+        ({ height, width, columns, rows } = zeroVisibleRowsDimensions);
+    } else { // This would mean that we can't fit even one thumbnail with minimal size.
+        const aspectRatio = disableTileEnlargement
+            ? getTileDefaultAspectRatio(false, disableTileEnlargement, clientWidth)
+            : TILE_PORTRAIT_ASPECT_RATIO;
+
+        height = getThumbnailMinHeight(clientWidth);
+        width = aspectRatio * height;
+        columns = 1;
+        rows = numberOfParticipants;
+    }
+
+    return {
+        height,
+        width,
+        columns,
+        rows
+    };
+}
+
+/**
+ * Calculates the size for thumbnails when in tile view layout.
+ *
+ * @param {Object} dimensions - The desired dimensions of the tile view grid.
+ * @returns {{hasScroll, height, width}}
+ */
+export function calculateThumbnailSizeForTileView({
+    columns,
+    minVisibleRows,
+    clientWidth,
+    clientHeight,
+    disableResponsiveTiles = false,
+    disableTileEnlargement = false,
+    noHorizontalContainerMargin = false,
+    minTileHeight
+}: {
+    clientHeight: number;
+    clientWidth: number;
+    columns: number;
+    disableResponsiveTiles: boolean;
+    disableTileEnlargement?: boolean;
+    minTileHeight?: number | null;
+    minVisibleRows: number;
+    noHorizontalContainerMargin?: boolean;
+}) {
+    const aspectRatio = getTileDefaultAspectRatio(disableResponsiveTiles, disableTileEnlargement, clientWidth);
+    const minHeight = minTileHeight || getThumbnailMinHeight(clientWidth);
+    const viewWidth = clientWidth - (columns * TILE_HORIZONTAL_MARGIN)
+        - (noHorizontalContainerMargin ? SCROLL_SIZE : TILE_VIEW_GRID_HORIZONTAL_MARGIN);
+    const availableHeight = clientHeight - TILE_VIEW_GRID_VERTICAL_MARGIN;
+    const viewHeight = availableHeight - (minVisibleRows * TILE_VERTICAL_MARGIN);
+    const initialWidth = viewWidth / columns;
+    let initialHeight = viewHeight / minVisibleRows;
+    let minHeightEnforced = false;
+
+    if (initialHeight < minHeight) {
+        minHeightEnforced = true;
+        initialHeight = minHeight;
+    }
+
+    if (disableTileEnlargement) {
+        const aspectRatioHeight = initialWidth / aspectRatio;
+
+        if (aspectRatioHeight < minHeight) { // we can't fit the required number of columns.
+            return;
+        }
+
+        const height = Math.min(aspectRatioHeight, initialHeight);
+
+        return {
+            height,
+            width: aspectRatio * height,
+            minHeightEnforced,
+            maxVisibleRows: Math.floor(availableHeight / (height + TILE_VERTICAL_MARGIN))
+        };
+    }
+
+    const initialRatio = initialWidth / initialHeight;
+    let height = initialHeight;
+    let width;
+
+    // The biggest area of the grid will be when the grid's height is equal to clientHeight or when the grid's width is
+    // equal to clientWidth.
+
+    if (initialRatio > aspectRatio) {
+        width = initialHeight * aspectRatio;
+    } else if (initialRatio >= TILE_PORTRAIT_ASPECT_RATIO) {
+        width = initialWidth;
+    // eslint-disable-next-line no-negated-condition
+    } else if (!minHeightEnforced) {
+        height = initialWidth / TILE_PORTRAIT_ASPECT_RATIO;
+
+        if (height >= minHeight) {
+            width = initialWidth;
+        } else { // The width is so small that we can't reach the minimum height with portrait aspect ratio.
+            return;
+        }
+    } else {
+        // We can't fit that number of columns with the desired min height and aspect ratio.
+        return;
+    }
+
+    return {
+        height,
+        width,
+        minHeightEnforced,
+        maxVisibleRows: Math.floor(availableHeight / (height + TILE_VERTICAL_MARGIN))
+    };
+}
+
+/**
+ * Returns the width of the visible area (doesn't include the left margin/padding) of the the vertical filmstrip.
+ *
+ * @returns {number} - The width of the vertical filmstrip.
+ */
+export function getVerticalFilmstripVisibleAreaWidth() {
+    // Adding 11px for the 2px right margin, 2px borders on the left and right and 5px right padding.
+    // Also adding 7px for the scrollbar. Note that we are not counting the left margins and paddings because this
+    // function is used for calculating the available space and they are invisible.
+    // TODO: Check if we can remove the left margins and paddings from the CSS.
+    // FIXME: This function is used to calculate the size of the large video, etherpad or shared video. Once everything
+    // is reactified this calculation will need to move to the corresponding components.
+    const filmstripMaxWidth = (interfaceConfig.FILM_STRIP_MAX_HEIGHT || DEFAULT_FILMSTRIP_WIDTH) + 18;
+
+    return Math.min(filmstripMaxWidth, window.innerWidth);
+}
+
+/**
+ * Computes information that determine the display mode.
+ *
+ * @param {Object} input - Object containing all necessary information for determining the display mode for
+ * the thumbnail.
+ * @returns {number} - One of <tt>DISPLAY_VIDEO</tt> or <tt>DISPLAY_AVATAR</tt>.
+*/
+export function computeDisplayModeFromInput(input: any) {
+    const {
+        filmstripType,
+        isActiveParticipant,
+        isLowBandwidthMode,
+        isCurrentlyOnLargeVideo,
+        isVirtualScreenshareParticipant,
+        isScreenSharing,
+        canPlayEventReceived,
+        isRemoteParticipant,
+        stageParticipantsVisible,
+        tileViewActive
+    } = input;
+    const adjustedIsVideoPlayable = input.isVideoPlayable && (!isRemoteParticipant || canPlayEventReceived);
+
+    // Display video for virtual screen share participants in all layouts.
+    if (isVirtualScreenshareParticipant) {
+        return DISPLAY_VIDEO;
+    }
+
+    // Multi-stream is not supported on plan-b endpoints even if its is enabled via config.js. A virtual
+    // screenshare tile is still created when a remote endpoint starts screenshare to keep the behavior consistent
+    // and an avatar is displayed on the original participant thumbnail as long as screenshare is in progress.
+    if (isScreenSharing) {
+        return DISPLAY_AVATAR;
+    }
+
+    if (!tileViewActive && filmstripType === FILMSTRIP_TYPE.MAIN && ((isScreenSharing && isRemoteParticipant)
+        || (stageParticipantsVisible && isActiveParticipant))) {
+        return DISPLAY_AVATAR;
+    } else if (isCurrentlyOnLargeVideo && !tileViewActive) {
+        // Display name is always and only displayed when user is on the stage
+        return adjustedIsVideoPlayable && !isLowBandwidthMode ? DISPLAY_VIDEO : DISPLAY_AVATAR;
+    } else if (adjustedIsVideoPlayable && !isLowBandwidthMode) {
+        // check hovering and change state to video with name
+        return DISPLAY_VIDEO;
+    }
+
+    // check hovering and change state to avatar with name
+    return DISPLAY_AVATAR;
+}
+
+/**
+ * Extracts information for props and state needed to compute the display mode.
+ *
+ * @param {Object} props - The Thumbnail component's props.
+ * @param {Object} state - The Thumbnail component's state.
+ * @returns {Object}
+*/
+export function getDisplayModeInput(props: any, state: { canPlayEventReceived: boolean; }) {
+    const {
+        _currentLayout,
+        _isActiveParticipant,
+        _isLowBandwidthMode,
+        _isCurrentlyOnLargeVideo,
+        _isVirtualScreenshareParticipant,
+        _isScreenSharing,
+        _isVideoPlayable,
+        _participant,
+        _stageParticipantsVisible,
+        _videoTrack,
+        filmstripType = FILMSTRIP_TYPE.MAIN
+    } = props;
+    const tileViewActive = _currentLayout === LAYOUTS.TILE_VIEW;
+    const { canPlayEventReceived } = state;
+
+    return {
+        filmstripType,
+        isActiveParticipant: _isActiveParticipant,
+        isCurrentlyOnLargeVideo: _isCurrentlyOnLargeVideo,
+        isLowBandwidthMode: _isLowBandwidthMode,
+        tileViewActive,
+        isVideoPlayable: _isVideoPlayable,
+        canPlayEventReceived,
+        videoStream: Boolean(_videoTrack),
+        isRemoteParticipant: !_participant?.fakeParticipant && !_participant?.local,
+        isScreenSharing: _isScreenSharing,
+        isVirtualScreenshareParticipant: _isVirtualScreenshareParticipant,
+        stageParticipantsVisible: _stageParticipantsVisible,
+        videoStreamMuted: _videoTrack ? _videoTrack.muted : 'no stream'
+    };
+}
+
+/**
+ * Gets the tooltip position for the thumbnail indicators.
+ *
+ * @param {string} thumbnailType - The current thumbnail type.
+ * @returns {string}
+ */
+export function getIndicatorsTooltipPosition(thumbnailType?: string) {
+    return INDICATORS_TOOLTIP_POSITION[thumbnailType ?? ''] || 'top';
+}
+
+/**
+ * Returns whether or not the filmstrip is resizable.
+ * On touch devices, resize is only enabled for larger screens (tablets, not phones).
+ *
+ * @param {Object} state - Redux state.
+ * @returns {boolean}
+ */
+export function isFilmstripResizable(state: IReduxState) {
+    const { filmstrip } = state['features/base/config'];
+    const _currentLayout = getCurrentLayout(state);
+
+    return !filmstrip?.disableResizable && shouldEnableResize()
+        && (_currentLayout === LAYOUTS.VERTICAL_FILMSTRIP_VIEW || _currentLayout === LAYOUTS.STAGE_FILMSTRIP_VIEW);
+}
+
+/**
+ * Whether or not grid should be displayed in the vertical filmstrip.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {boolean}
+ */
+export function showGridInVerticalView(state: IReduxState) {
+    const resizableFilmstrip = isFilmstripResizable(state);
+    const { width } = state['features/filmstrip'];
+
+    return resizableFilmstrip && ((width.current ?? 0) > FILMSTRIP_GRID_BREAKPOINT);
+}
+
+/**
+ * Gets the vertical filmstrip max width.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {number}
+ */
+export function getVerticalViewMaxWidth(state: IReduxState) {
+    const { width } = state['features/filmstrip'];
+    const _resizableFilmstrip = isFilmstripResizable(state);
+    const _verticalViewGrid = showGridInVerticalView(state);
+    let maxWidth = _resizableFilmstrip
+        ? width.current || DEFAULT_FILMSTRIP_WIDTH
+        : interfaceConfig.FILM_STRIP_MAX_HEIGHT || DEFAULT_FILMSTRIP_WIDTH;
+
+    // Adding 4px for the border-right and margin-right.
+    // On non-resizable filmstrip add 4px for the left margin and border.
+    // Also adding 7px for the scrollbar.
+    // Drag handle: DRAG_HANDLE_WIDTH + padding (TOUCH_DRAG_HANDLE_PADDING on each side for touch)
+    const dragHandleWidth = isTouchDevice()
+        ? DRAG_HANDLE_WIDTH + (TOUCH_DRAG_HANDLE_PADDING * 2)
+        : DRAG_HANDLE_WIDTH;
+
+    maxWidth += (_verticalViewGrid ? 0 : 11) + (_resizableFilmstrip ? dragHandleWidth : 4);
+
+    return maxWidth;
+}
+
+/**
+ * Returns true if the scroll is displayed and false otherwise.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {boolean} - True if the scroll is displayed and false otherwise.
+ */
+export function isFilmstripScrollVisible(state: IReduxState) {
+    const _currentLayout = getCurrentLayout(state);
+    let hasScroll = false;
+
+    switch (_currentLayout) {
+    case LAYOUTS.TILE_VIEW:
+        ({ hasScroll = false } = state['features/filmstrip'].tileViewDimensions ?? {});
+        break;
+    case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
+    case LAYOUTS.STAGE_FILMSTRIP_VIEW: {
+        ({ hasScroll = false } = state['features/filmstrip'].verticalViewDimensions);
+        break;
+    }
+    case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW: {
+        ({ hasScroll = false } = state['features/filmstrip'].horizontalViewDimensions);
+        break;
+    }
+    }
+
+    return hasScroll;
+}
+
+/**
+ * Gets the ids of the active participants.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {Array<string>}
+ */
+export function getActiveParticipantsIds(state: IReduxState) {
+    const { activeParticipants } = state['features/filmstrip'];
+
+    return activeParticipants.map(p => p.participantId);
+}
+
+/**
+ * Gets the ids of the active participants.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {Array<Object>}
+ */
+export function getPinnedActiveParticipants(state: IReduxState) {
+    const { activeParticipants } = state['features/filmstrip'];
+
+    return activeParticipants.filter(p => p.pinned);
+}
+
+/**
+ * Get whether or not the stage filmstrip is available (enabled & can be used).
+ *
+ * @param {Object} state - Redux state.
+ * @param {number} minParticipantCount - The min number of participants for the stage filmstrip
+ * to be displayed.
+ * @returns {boolean}
+ */
+export function isStageFilmstripAvailable(state: IReduxState, minParticipantCount = 0) {
+    const { activeParticipants } = state['features/filmstrip'];
+    const { remoteScreenShares } = state['features/video-layout'];
+    const sharedVideo = isSharingStatus(state['features/shared-video']?.status ?? '');
+
+    return isStageFilmstripEnabled(state) && !sharedVideo
+        && activeParticipants.length >= minParticipantCount
+        && (isTopPanelEnabled(state) || remoteScreenShares.length === 0);
+}
+
+/**
+ * Whether the stage filmstrip should be displayed on the top.
+ *
+ * @param {Object} state - Redux state.
+ * @param {number} minParticipantCount - The min number of participants for the stage filmstrip
+ * to be displayed.
+ * @returns {boolean}
+ */
+export function isStageFilmstripTopPanel(state: IReduxState, minParticipantCount = 0) {
+    const { remoteScreenShares } = state['features/video-layout'];
+
+    return isTopPanelEnabled(state)
+        && isStageFilmstripAvailable(state, minParticipantCount) && remoteScreenShares.length > 0;
+}
+
+/**
+ * Whether the stage filmstrip is disabled or not.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {boolean}
+ */
+export function isStageFilmstripEnabled(state: IReduxState) {
+    const { filmstrip } = state['features/base/config'];
+
+    return Boolean(!filmstrip?.disableStageFilmstrip && interfaceConfig.VERTICAL_FILMSTRIP);
+}
+
+/**
+ * Whether the vertical/horizontal filmstrip is disabled.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {boolean}
+ */
+export function isFilmstripDisabled(state: IReduxState) {
+    const { filmstrip } = state['features/base/config'];
+
+    return Boolean(filmstrip?.disabled);
+}
+
+/**
+ * Gets the thumbnail type by filmstrip type.
+ *
+ * @param {string} currentLayout - Current app layout.
+ * @param {string} filmstripType - The current filmstrip type.
+ * @returns {string}
+ */
+export function getThumbnailTypeFromLayout(currentLayout: string, filmstripType: string) {
+    switch (currentLayout) {
+    case LAYOUTS.TILE_VIEW:
+        return THUMBNAIL_TYPE.TILE;
+    case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
+        return THUMBNAIL_TYPE.VERTICAL;
+    case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW:
+        return THUMBNAIL_TYPE.HORIZONTAL;
+    case LAYOUTS.STAGE_FILMSTRIP_VIEW:
+        if (filmstripType !== FILMSTRIP_TYPE.MAIN) {
+            return THUMBNAIL_TYPE.TILE;
+        }
+
+        return THUMBNAIL_TYPE.VERTICAL;
+    }
+}
+
+/**
+ * Returns the id of the participant displayed on the screen share filmstrip.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {string} - The participant id.
+ */
+export function getScreenshareFilmstripParticipantId(state: IReduxState) {
+    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[0];
+    }
+
+    return id;
+}
+
+/**
+ * Whether or not the top panel is enabled.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {boolean}
+ */
+export function isTopPanelEnabled(state: IReduxState) {
+    const { filmstrip } = state['features/base/config'];
+    const participantsCount = getParticipantCount(state);
+
+    return !filmstrip?.disableTopPanel && participantsCount >= (filmstrip?.minParticipantCountForTopPanel ?? 50);
+
+}
+
+/**
+ * Returns the thumbnail background color from the theme.
+ *
+ * @param {Theme} theme - The MUI theme.
+ * @returns {string} The background color.
+ */
+export function getThumbnailBackgroundColor(theme: Theme): string {
+    return theme.palette.thumbnailVideoBackground;
+}