jiti-meet/react/features/filmstrip/actions.web.js

165 lines
5.3 KiB
JavaScript
Raw Normal View History

// @flow
2021-03-26 20:23:05 +00:00
import type { Dispatch } from 'redux';
import { getLocalParticipant, getParticipantById, pinParticipant } from '../base/participants';
2021-03-26 20:23:05 +00:00
import {
SET_HORIZONTAL_VIEW_DIMENSIONS,
SET_TILE_VIEW_DIMENSIONS,
SET_VERTICAL_VIEW_DIMENSIONS,
SET_VOLUME
} from './actionTypes';
import {
HORIZONTAL_FILMSTRIP_MARGIN,
SCROLL_SIZE,
STAGE_VIEW_THUMBNAIL_HORIZONTAL_BORDER,
STAGE_VIEW_THUMBNAIL_VERTICAL_BORDER,
TILE_HORIZONTAL_MARGIN,
TILE_VERTICAL_MARGIN,
VERTICAL_FILMSTRIP_VERTICAL_MARGIN
} from './constants';
import {
calculateThumbnailSizeForHorizontalView,
calculateThumbnailSizeForTileView,
calculateThumbnailSizeForVerticalView
} from './functions';
import { getDisableSelfView } from './functions.any';
export * from './actions.any';
/**
* Sets the dimensions of the tile view grid.
*
* @param {Object} dimensions - Whether the filmstrip is visible.
* @param {Object | Function} stateful - An object or function that can be
* resolved to Redux state using the {@code toState} function.
2021-03-26 20:23:05 +00:00
* @returns {Function}
*/
2021-03-26 20:23:05 +00:00
export function setTileViewDimensions(dimensions: Object) {
return (dispatch: Dispatch<any>, getState: Function) => {
const state = getState();
const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
const { disableResponsiveTiles } = state['features/base/config'];
const {
height,
width
} = calculateThumbnailSizeForTileView({
...dimensions,
clientWidth,
clientHeight,
disableResponsiveTiles
});
const { columns, rows } = dimensions;
const thumbnailsTotalHeight = rows * (TILE_VERTICAL_MARGIN + height);
const hasScroll = clientHeight < thumbnailsTotalHeight;
const filmstripWidth = (columns * (TILE_HORIZONTAL_MARGIN + width)) + (hasScroll ? SCROLL_SIZE : 0);
const filmstripHeight = Math.min(clientHeight, thumbnailsTotalHeight);
2021-03-26 20:23:05 +00:00
dispatch({
type: SET_TILE_VIEW_DIMENSIONS,
dimensions: {
gridDimensions: dimensions,
thumbnailSize: {
height,
width
},
filmstripHeight,
filmstripWidth
}
});
};
}
2021-03-26 20:23:05 +00:00
/**
* Sets the dimensions of the thumbnails in vertical view.
*
* @returns {Function}
*/
export function setVerticalViewDimensions() {
return (dispatch: Dispatch<any>, getState: Function) => {
const state = getState();
const { clientHeight = 0, clientWidth = 0 } = state['features/base/responsive-ui'];
const disableSelfView = getDisableSelfView(state);
2021-03-26 20:23:05 +00:00
const thumbnails = calculateThumbnailSizeForVerticalView(clientWidth);
dispatch({
type: SET_VERTICAL_VIEW_DIMENSIONS,
dimensions: {
...thumbnails,
remoteVideosContainer: {
width: thumbnails?.local?.width
+ TILE_HORIZONTAL_MARGIN + STAGE_VIEW_THUMBNAIL_HORIZONTAL_BORDER + SCROLL_SIZE,
height: clientHeight - (disableSelfView ? 0 : thumbnails?.local?.height)
- VERTICAL_FILMSTRIP_VERTICAL_MARGIN
2021-03-26 20:23:05 +00:00
}
}
});
};
}
/**
* Sets the dimensions of the thumbnails in horizontal view.
*
2021-03-26 20:23:05 +00:00
* @returns {Function}
*/
2021-03-26 20:23:05 +00:00
export function setHorizontalViewDimensions() {
return (dispatch: Dispatch<any>, getState: Function) => {
const state = getState();
const { clientHeight = 0, clientWidth = 0 } = state['features/base/responsive-ui'];
const disableSelfView = getDisableSelfView(state);
2021-03-26 20:23:05 +00:00
const thumbnails = calculateThumbnailSizeForHorizontalView(clientHeight);
dispatch({
type: SET_HORIZONTAL_VIEW_DIMENSIONS,
dimensions: {
...thumbnails,
remoteVideosContainer: {
width: clientWidth - (disableSelfView ? 0 : thumbnails?.local?.width) - HORIZONTAL_FILMSTRIP_MARGIN,
2021-03-26 20:23:05 +00:00
height: thumbnails?.local?.height
+ TILE_VERTICAL_MARGIN + STAGE_VIEW_THUMBNAIL_VERTICAL_BORDER + SCROLL_SIZE
}
}
});
};
}
/**
* 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: Function, getState: Function) => {
feat: Participants optimisations (#9515) * fix(participants): Change from array to Map * fix(unload): optimise * feat: Introduces new states for e2ee feature. Stores everyoneSupportsE2EE and everyoneEnabledE2EE to minimize looping through participants list. squash: Uses participants map and go over the elements only once. * feat: Optimizes isEveryoneModerator to do less frequent checks in all participants. * fix: Drops deep equal from participants pane and uses the map. * fix(SharedVideo): isVideoPlaying * fix(participants): Optimise isEveryoneModerator * fix(e2e): Optimise everyoneEnabledE2EE * fix: JS errors. * ref(participants): remove getParticipants * fix(participants): Prepare for PR. * fix: Changes participants pane to be component. The functional component was always rendered: `prev props: {} !== {} :next props`. * feat: Optimization to skip participants list on pane closed. * fix: The participants list shows and the local participant. * fix: Fix wrong action name for av-moderation. * fix: Minimizes the number of render calls of av moderation notification. * fix: Fix iterating over remote participants. * fix: Fixes lint error. * fix: Reflects participant updates for av-moderation. * fix(ParticipantPane): to work with IDs. * fix(av-moderation): on PARTCIPANT_UPDATE * fix(ParticipantPane): close delay. * fix: address code review comments * fix(API): mute-everyone * fix: bugs * fix(Thumbnail): on mobile. * fix(ParticipantPane): Close context menu on click. * fix: Handles few error when local participant is undefined. * feat: Hides AV moderation if not supported. * fix: Show mute all video. * fix: Fixes updating participant for av moderation. Co-authored-by: damencho <damencho@jitsi.org>
2021-07-09 12:36:19 +00:00
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 ];
const { id, pinned } = getParticipantById(state, participants[n]);
dispatch(pinParticipant(pinned ? null : id));
};
}
2021-03-26 20:23:05 +00:00
/**
* Sets the volume for a thumbnail's audio.
2021-03-26 20:23:05 +00:00
*
* @param {string} participantId - The participant ID asociated 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
};
}