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

react/features/filmstrip/actions.web.ts

@@ -0,0 +1,591 @@
+import { IStore } from '../app/types';
+import { pinParticipant } from '../base/participants/actions';
+import {
+    getLocalParticipant,
+    getParticipantById,
+    getRemoteParticipantCountWithFake
+} from '../base/participants/functions';
+import { getHideSelfView } from '../base/settings/functions.any';
+import { getMaxColumnCount } from '../video-layout/functions.web';
+
+import {
+    ADD_STAGE_PARTICIPANT,
+    CLEAR_STAGE_PARTICIPANTS,
+    REMOVE_STAGE_PARTICIPANT,
+    RESIZE_FILMSTRIP,
+    SET_FILMSTRIP_HEIGHT,
+    SET_FILMSTRIP_WIDTH,
+    SET_HORIZONTAL_VIEW_DIMENSIONS,
+    SET_SCREENSHARE_FILMSTRIP_PARTICIPANT,
+    SET_SCREENSHARING_TILE_DIMENSIONS,
+    SET_STAGE_FILMSTRIP_DIMENSIONS,
+    SET_STAGE_PARTICIPANTS,
+    SET_TILE_VIEW_DIMENSIONS,
+    SET_TOP_PANEL_VISIBILITY,
+    SET_USER_FILMSTRIP_HEIGHT,
+    SET_USER_FILMSTRIP_WIDTH,
+    SET_USER_IS_RESIZING,
+    SET_VERTICAL_VIEW_DIMENSIONS,
+    SET_VOLUME,
+    TOGGLE_PIN_STAGE_PARTICIPANT
+} from './actionTypes';
+import {
+    HORIZONTAL_FILMSTRIP_MARGIN,
+    MAX_ACTIVE_PARTICIPANTS,
+    SCROLL_SIZE,
+    STAGE_VIEW_THUMBNAIL_VERTICAL_BORDER,
+    TILE_HORIZONTAL_MARGIN,
+    TILE_MIN_HEIGHT_SMALL,
+    TILE_VERTICAL_CONTAINER_HORIZONTAL_MARGIN,
+    TILE_VERTICAL_MARGIN,
+    TILE_VIEW_DEFAULT_NUMBER_OF_VISIBLE_TILES,
+    TILE_VIEW_GRID_HORIZONTAL_MARGIN,
+    TILE_VIEW_GRID_VERTICAL_MARGIN,
+    TOP_FILMSTRIP_HEIGHT,
+    VERTICAL_FILMSTRIP_VERTICAL_MARGIN
+} from './constants';
+import {
+    calculateNonResponsiveTileViewDimensions,
+    calculateResponsiveTileViewDimensions,
+    calculateThumbnailSizeForHorizontalView,
+    calculateThumbnailSizeForVerticalView,
+    getNumberOfPartipantsForTileView,
+    getVerticalViewMaxWidth,
+    isFilmstripResizable,
+    isStageFilmstripAvailable,
+    isStageFilmstripTopPanel
+    , showGridInVerticalView } from './functions.web';
+
+export * from './actions.any';
+
+/**
+ * Resize the filmstrip.
+ *
+ * @param {number} width - Width value for filmstrip.
+ *
+ * @returns {{
+ *  type: RESIZE_FILMSTRIP,
+ *  width: number,
+ * }}
+ */
+export function resizeFilmStrip(width: number) {
+    return {
+        type: RESIZE_FILMSTRIP,
+        width
+    };
+}
+
+/**
+ * Sets the dimensions of the tile view grid.
+ *
+ * @returns {Function}
+ */
+export function setTileViewDimensions() {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const state = getState();
+        const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
+        const {
+            disableResponsiveTiles,
+            disableTileEnlargement,
+            tileView = {}
+        } = state['features/base/config'];
+        const { numberOfVisibleTiles = TILE_VIEW_DEFAULT_NUMBER_OF_VISIBLE_TILES } = tileView;
+        const numberOfParticipants = getNumberOfPartipantsForTileView(state);
+        const maxColumns = getMaxColumnCount(state);
+
+        const {
+            height,
+            width,
+            columns,
+            rows
+        } = disableResponsiveTiles
+            ? calculateNonResponsiveTileViewDimensions(state)
+            : calculateResponsiveTileViewDimensions({
+                clientWidth: videoSpaceWidth,
+                clientHeight,
+                disableTileEnlargement,
+                maxColumns,
+                numberOfParticipants,
+                desiredNumberOfVisibleTiles: numberOfVisibleTiles
+            });
+        const thumbnailsTotalHeight = (rows ?? 1) * (TILE_VERTICAL_MARGIN + (height ?? 0));
+        const availableHeight = clientHeight - TILE_VIEW_GRID_VERTICAL_MARGIN;
+        const hasScroll = availableHeight < thumbnailsTotalHeight;
+        const filmstripWidth
+            = Math.min(videoSpaceWidth - TILE_VIEW_GRID_HORIZONTAL_MARGIN,
+                (columns ?? 1) * (TILE_HORIZONTAL_MARGIN + (width ?? 0)))
+                + (hasScroll ? SCROLL_SIZE : 0);
+        const filmstripHeight = Math.min(availableHeight, thumbnailsTotalHeight);
+
+        dispatch({
+            type: SET_TILE_VIEW_DIMENSIONS,
+            dimensions: {
+                gridDimensions: {
+                    columns,
+                    rows
+                },
+                thumbnailSize: {
+                    height,
+                    width
+                },
+                filmstripHeight,
+                filmstripWidth,
+                hasScroll
+            }
+        });
+    };
+}
+
+/**
+ * Sets the dimensions of the thumbnails in vertical view.
+ *
+ * @returns {Function}
+ */
+export function setVerticalViewDimensions() {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const state = getState();
+        const { clientHeight = 0, videoSpaceWidth = 0 } = state['features/base/responsive-ui'];
+        const { width: filmstripWidth } = state['features/filmstrip'];
+        const disableSelfView = getHideSelfView(state);
+        const resizableFilmstrip = isFilmstripResizable(state);
+        const _verticalViewGrid = showGridInVerticalView(state);
+        const numberOfRemoteParticipants = getRemoteParticipantCountWithFake(state);
+        const { localScreenShare } = state['features/base/participants'];
+
+        let gridView = {};
+        let thumbnails: any = {};
+        let filmstripDimensions = {};
+        let hasScroll = false;
+        let remoteVideosContainerWidth;
+        let remoteVideosContainerHeight;
+
+        // grid view in the vertical filmstrip
+        if (_verticalViewGrid) {
+            const { tileView = {} } = state['features/base/config'];
+            const { numberOfVisibleTiles = TILE_VIEW_DEFAULT_NUMBER_OF_VISIBLE_TILES } = tileView;
+            const numberOfParticipants = getNumberOfPartipantsForTileView(state);
+            const maxColumns = getMaxColumnCount(state, {
+                width: filmstripWidth.current,
+                disableResponsiveTiles: false,
+                disableTileEnlargement: false
+            });
+            const {
+                height,
+                width,
+                columns,
+                rows
+            } = calculateResponsiveTileViewDimensions({
+                clientWidth: filmstripWidth.current ?? 0,
+                clientHeight,
+                disableTileEnlargement: false,
+                maxColumns,
+                noHorizontalContainerMargin: true,
+                numberOfParticipants,
+                desiredNumberOfVisibleTiles: numberOfVisibleTiles
+            });
+            const thumbnailsTotalHeight = (rows ?? 1) * (TILE_VERTICAL_MARGIN + (height ?? 0));
+
+            hasScroll = clientHeight < thumbnailsTotalHeight;
+            const widthOfFilmstrip = ((columns ?? 1) * (TILE_HORIZONTAL_MARGIN + (width ?? 0)))
+                + (hasScroll ? SCROLL_SIZE : 0);
+            const filmstripHeight = Math.min(clientHeight - TILE_VIEW_GRID_VERTICAL_MARGIN, thumbnailsTotalHeight);
+
+            gridView = {
+                gridDimensions: {
+                    columns,
+                    rows
+                },
+                thumbnailSize: {
+                    height,
+                    width
+                },
+                hasScroll
+            };
+
+            filmstripDimensions = {
+                height: filmstripHeight,
+                width: widthOfFilmstrip
+            };
+        } else {
+            thumbnails = calculateThumbnailSizeForVerticalView(videoSpaceWidth, filmstripWidth.current ?? 0,
+                resizableFilmstrip);
+
+            remoteVideosContainerWidth
+                = thumbnails?.local?.width + TILE_VERTICAL_CONTAINER_HORIZONTAL_MARGIN + SCROLL_SIZE;
+            remoteVideosContainerHeight
+                = clientHeight - (disableSelfView ? 0 : thumbnails?.local?.height) - VERTICAL_FILMSTRIP_VERTICAL_MARGIN;
+
+            // Account for the height of the local screen share thumbnail when calculating the height of the remote
+            // videos container.
+            const localCameraThumbnailHeight = thumbnails?.local?.height;
+            const localScreenShareThumbnailHeight
+                = localScreenShare && !disableSelfView ? thumbnails?.local?.height : 0;
+
+            remoteVideosContainerHeight = clientHeight
+                - localCameraThumbnailHeight
+                - localScreenShareThumbnailHeight
+                - VERTICAL_FILMSTRIP_VERTICAL_MARGIN;
+
+            hasScroll
+                = remoteVideosContainerHeight
+                    < (thumbnails?.remote.height + TILE_VERTICAL_MARGIN) * numberOfRemoteParticipants;
+        }
+
+        dispatch({
+            type: SET_VERTICAL_VIEW_DIMENSIONS,
+            dimensions: {
+                ...thumbnails,
+                remoteVideosContainer: _verticalViewGrid ? filmstripDimensions : {
+                    width: remoteVideosContainerWidth,
+                    height: remoteVideosContainerHeight
+                },
+                gridView,
+                hasScroll
+            }
+        });
+    };
+}
+
+/**
+ * Sets the dimensions of the thumbnails in horizontal view.
+ *
+ * @returns {Function}
+ */
+export function setHorizontalViewDimensions() {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const state = getState();
+        const { clientHeight = 0, videoSpaceWidth = 0 } = state['features/base/responsive-ui'];
+        const disableSelfView = getHideSelfView(state);
+        const thumbnails = calculateThumbnailSizeForHorizontalView(clientHeight);
+        const remoteVideosContainerWidth
+            = videoSpaceWidth - (disableSelfView ? 0 : thumbnails?.local?.width) - HORIZONTAL_FILMSTRIP_MARGIN;
+        const remoteVideosContainerHeight
+            = thumbnails?.local?.height + TILE_VERTICAL_MARGIN + STAGE_VIEW_THUMBNAIL_VERTICAL_BORDER + SCROLL_SIZE;
+        const numberOfRemoteParticipants = getRemoteParticipantCountWithFake(state);
+        const hasScroll
+            = remoteVideosContainerHeight
+                < (thumbnails?.remote.width + TILE_HORIZONTAL_MARGIN) * numberOfRemoteParticipants;
+
+        dispatch({
+            type: SET_HORIZONTAL_VIEW_DIMENSIONS,
+            dimensions: {
+                ...thumbnails,
+                remoteVideosContainer: {
+                    width: remoteVideosContainerWidth,
+                    height: remoteVideosContainerHeight
+                },
+                hasScroll
+            }
+        });
+    };
+}
+
+/**
+ * Sets the dimensions of the stage filmstrip tile view grid.
+ *
+ * @returns {Function}
+ */
+export function setStageFilmstripViewDimensions() {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const state = getState();
+        const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
+        const {
+            tileView = {}
+        } = state['features/base/config'];
+        const { visible, topPanelHeight } = state['features/filmstrip'];
+        const verticalWidth = visible ? getVerticalViewMaxWidth(state) : 0;
+        const { numberOfVisibleTiles = MAX_ACTIVE_PARTICIPANTS } = tileView;
+        const numberOfParticipants = state['features/filmstrip'].activeParticipants.length;
+        const availableWidth = videoSpaceWidth - verticalWidth;
+        const maxColumns = getMaxColumnCount(state, {
+            width: availableWidth,
+            disableResponsiveTiles: false,
+            disableTileEnlargement: false
+        });
+        const topPanel = isStageFilmstripTopPanel(state);
+
+        const {
+            height,
+            width,
+            columns,
+            rows
+        } = calculateResponsiveTileViewDimensions({
+            clientWidth: availableWidth,
+            clientHeight: topPanel ? topPanelHeight?.current || TOP_FILMSTRIP_HEIGHT : clientHeight,
+            disableTileEnlargement: false,
+            maxColumns,
+            noHorizontalContainerMargin: verticalWidth > 0,
+            numberOfParticipants,
+            desiredNumberOfVisibleTiles: numberOfVisibleTiles,
+            minTileHeight: topPanel ? TILE_MIN_HEIGHT_SMALL : null
+        });
+        const thumbnailsTotalHeight = (rows ?? 1) * (TILE_VERTICAL_MARGIN + (height ?? 0));
+        const hasScroll = clientHeight < thumbnailsTotalHeight;
+        const filmstripWidth
+            = Math.min(videoSpaceWidth - TILE_VIEW_GRID_HORIZONTAL_MARGIN,
+                (columns ?? 1) * (TILE_HORIZONTAL_MARGIN + (width ?? 0)))
+            + (hasScroll ? SCROLL_SIZE : 0);
+        const filmstripHeight = Math.min(clientHeight - TILE_VIEW_GRID_VERTICAL_MARGIN, thumbnailsTotalHeight);
+
+        dispatch({
+            type: SET_STAGE_FILMSTRIP_DIMENSIONS,
+            dimensions: {
+                gridDimensions: {
+                    columns,
+                    rows
+                },
+                thumbnailSize: {
+                    height,
+                    width
+                },
+                filmstripHeight,
+                filmstripWidth,
+                hasScroll
+            }
+        });
+    };
+}
+
+/**
+ * Emulates a click on the n-th video.
+ *
+ * @param {number} n - Number that identifies the video.
+ * @returns {Function}
+ */
+export function clickOnVideo(n: number) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const state = getState();
+        const { id: localId } = getLocalParticipant(state) ?? {};
+
+        // Use the list that correctly represents the current order of the participants as visible in the UI.
+        const { remoteParticipants } = state['features/filmstrip'];
+        const participants = [ localId, ...remoteParticipants ];
+
+        if (participants.length - 1 < n) {
+            return;
+        }
+        const { id, pinned } = getParticipantById(state, participants[n] ?? '') ?? {};
+
+        if (isStageFilmstripAvailable(state)) {
+            dispatch(togglePinStageParticipant(id ?? ''));
+        } else {
+            dispatch(pinParticipant(pinned ? null : id));
+        }
+    };
+}
+
+/**
+ * Sets the volume for a thumbnail's audio.
+ *
+ * @param {string} participantId - The participant ID associated with the audio.
+ * @param {string} volume - The volume level.
+ * @returns {{
+ *     type: SET_VOLUME,
+ *     participantId: string,
+ *     volume: number
+ * }}
+ */
+export function setVolume(participantId: string, volume: number) {
+    return {
+        type: SET_VOLUME,
+        participantId,
+        volume
+    };
+}
+
+/**
+ * Sets the top filmstrip's height.
+ *
+ * @param {number} height - The new height of the filmstrip.
+ * @returns {{
+ *      type: SET_FILMSTRIP_HEIGHT,
+ *      height: number
+ * }}
+ */
+export function setFilmstripHeight(height: number) {
+    return {
+        type: SET_FILMSTRIP_HEIGHT,
+        height
+    };
+}
+
+/**
+ * Sets the filmstrip's width.
+ *
+ * @param {number} width - The new width of the filmstrip.
+ * @returns {{
+ *      type: SET_FILMSTRIP_WIDTH,
+ *      width: number
+ * }}
+ */
+export function setFilmstripWidth(width: number) {
+    return {
+        type: SET_FILMSTRIP_WIDTH,
+        width
+    };
+}
+
+/**
+ * Sets the filmstrip's height and the user preferred height.
+ *
+ * @param {number} height - The new height of the filmstrip.
+ * @returns {{
+ *      type: SET_USER_FILMSTRIP_WIDTH,
+ *      height: number
+ * }}
+ */
+export function setUserFilmstripHeight(height: number) {
+    return {
+        type: SET_USER_FILMSTRIP_HEIGHT,
+        height
+    };
+}
+
+/**
+ * Sets the filmstrip's width and the user preferred width.
+ *
+ * @param {number} width - The new width of the filmstrip.
+ * @returns {{
+ *      type: SET_USER_FILMSTRIP_WIDTH,
+ *      width: number
+ * }}
+ */
+export function setUserFilmstripWidth(width: number) {
+    return {
+        type: SET_USER_FILMSTRIP_WIDTH,
+        width
+    };
+}
+
+/**
+ * Sets whether the user is resizing or not.
+ *
+ * @param {boolean} resizing - Whether the user is resizing or not.
+ * @returns {Object}
+ */
+export function setUserIsResizing(resizing: boolean) {
+    return {
+        type: SET_USER_IS_RESIZING,
+        resizing
+    };
+}
+
+/**
+ * Add participant to the active participants list.
+ *
+ * @param {string} participantId - The Id of the participant to be added.
+ * @param {boolean?} pinned - Whether the participant is pinned or not.
+ * @returns {Object}
+ */
+export function addStageParticipant(participantId: string, pinned = false) {
+    return {
+        type: ADD_STAGE_PARTICIPANT,
+        participantId,
+        pinned
+    };
+}
+
+/**
+ * Remove participant from the active participants list.
+ *
+ * @param {string} participantId - The Id of the participant to be removed.
+ * @returns {Object}
+ */
+export function removeStageParticipant(participantId: string) {
+    return {
+        type: REMOVE_STAGE_PARTICIPANT,
+        participantId
+    };
+}
+
+/**
+ * Sets the active participants list.
+ *
+ * @param {Array<Object>} queue - The new list.
+ * @returns {Object}
+ */
+export function setStageParticipants(queue: Object[]) {
+    return {
+        type: SET_STAGE_PARTICIPANTS,
+        queue
+    };
+}
+
+/**
+ * Toggles the pin state of the given participant.
+ *
+ * @param {string} participantId - The id of the participant to be toggled.
+ * @returns {Object}
+ */
+export function togglePinStageParticipant(participantId: string) {
+    return {
+        type: TOGGLE_PIN_STAGE_PARTICIPANT,
+        participantId
+    };
+}
+
+/**
+ * Clears the stage participants list.
+ *
+ * @returns {Object}
+ */
+export function clearStageParticipants() {
+    return {
+        type: CLEAR_STAGE_PARTICIPANTS
+    };
+}
+
+/**
+ * Set the screensharing tile dimensions.
+ *
+ * @returns {Object}
+ */
+export function setScreensharingTileDimensions() {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const state = getState();
+        const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
+        const { visible, topPanelHeight, topPanelVisible } = state['features/filmstrip'];
+        const verticalWidth = visible ? getVerticalViewMaxWidth(state) : 0;
+        const availableWidth = videoSpaceWidth - verticalWidth;
+        const topPanel = isStageFilmstripTopPanel(state) && topPanelVisible;
+        const availableHeight = clientHeight - (topPanel ? topPanelHeight?.current || TOP_FILMSTRIP_HEIGHT : 0);
+
+        dispatch({
+            type: SET_SCREENSHARING_TILE_DIMENSIONS,
+            dimensions: {
+                filmstripHeight: availableHeight,
+                filmstripWidth: availableWidth,
+                thumbnailSize: {
+                    width: availableWidth - TILE_HORIZONTAL_MARGIN,
+                    height: availableHeight - TILE_VERTICAL_MARGIN
+                }
+            }
+        });
+    };
+}
+
+/**
+ * Sets the visibility of the top panel.
+ *
+ * @param {boolean} visible - Whether it should be visible or not.
+ * @returns {Object}
+ */
+export function setTopPanelVisible(visible: boolean) {
+    return {
+        type: SET_TOP_PANEL_VISIBILITY,
+        visible
+    };
+}
+
+/**
+ * Sets the participant whose screenshare to be displayed on the filmstrip.
+ *
+ * @param {string|undefined} participantId - The id of the participant to be set.
+ * @returns {Object}
+ */
+export function setScreenshareFilmstripParticipant(participantId?: string) {
+    return {
+        type: SET_SCREENSHARE_FILMSTRIP_PARTICIPANT,
+        participantId
+    };
+}