mirror of
https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git
synced 2026-05-19 04:17:47 +00:00
6deb0a6385
Large video was being updated through scheduleLargeVideoUpdate even when the large video container was hidden via CSS. This occurred in multiple layout modes: tile view, stage filmstrip (with 2+ participants), and etherpad editing. These updates caused expensive operations including setting video streams, managing track listeners, updating avatars, and running show/hide animations - all wasted CPU cycles since the container wasn't visible. The fix introduces a centralized shouldHideLargeVideo() function that checks all cases where the large video container is hidden. This function is used in selectParticipantInLargeVideo() to guard to not update the participant id. A state listener monitors transitions from hidden to visible states and ensures the large video participant id is properly updated when the container becomes visible again and set to undefined when large video is hidden. This improves performance by eliminating unnecessary video element manipulation and handler execution across all layout modes where large video is not displayed.
31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import { IReduxState } from '../app/types';
|
|
import { getParticipantById } from '../base/participants/functions';
|
|
import { isStageFilmstripAvailable } from '../filmstrip/functions';
|
|
import { shouldDisplayTileView } from '../video-layout/functions.any';
|
|
|
|
/**
|
|
* Selector for the participant currently displaying on the large video.
|
|
*
|
|
* @param {Object} state - The redux state.
|
|
* @returns {Object}
|
|
*/
|
|
export function getLargeVideoParticipant(state: IReduxState) {
|
|
const { participantId } = state['features/large-video'];
|
|
|
|
return getParticipantById(state, participantId ?? '');
|
|
}
|
|
|
|
/**
|
|
* Determines whether the large video container should be hidden.
|
|
* Large video is hidden in tile view, stage filmstrip mode (with multiple participants),
|
|
* or when editing etherpad.
|
|
*
|
|
* @param {IReduxState} state - The Redux state.
|
|
* @returns {boolean} True if large video should be hidden, false otherwise.
|
|
*/
|
|
export function shouldHideLargeVideo(state: IReduxState): boolean {
|
|
return shouldDisplayTileView(state)
|
|
|| isStageFilmstripAvailable(state, 2)
|
|
|| Boolean(state['features/etherpad']?.editing);
|
|
}
|