mirror of
https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git
synced 2025-12-30 11:22:31 +00:00
a01f4468a0
Fixes an issue where StageParticipantNameLabel is smaller. This is caused because the font size and line height props are calculated to an invalid (NaN) value after we started using rem instead of px for lineHeight and fontSize in theme. Reference: #15917
108 lines
3.5 KiB
TypeScript
108 lines
3.5 KiB
TypeScript
import { Theme } from '@mui/material';
|
|
import { remToPixels } from '../../../base/ui/functions.any';
|
|
|
|
/**
|
|
* The vertical padding for the display name.
|
|
*/
|
|
export const DISPLAY_NAME_VERTICAL_PADDING = 4;
|
|
|
|
/**
|
|
* Returns the typography for stage participant display name badge.
|
|
*
|
|
* @param {Theme} theme - The current theme.
|
|
* @returns {ITypographyType}
|
|
*/
|
|
export function getStageParticipantTypography(theme: Theme) {
|
|
return theme.typography.bodyShortRegularLarge;
|
|
}
|
|
|
|
/**
|
|
* Returns the range of possible values for the font size for the stage participant display name badge.
|
|
*
|
|
* @param {Theme} theme - The current theme.
|
|
* @returns {ILimits}
|
|
*/
|
|
export function getStageParticipantFontSizeRange(theme: Theme) {
|
|
return {
|
|
max: remToPixels(theme.typography.bodyShortRegularLarge.fontSize),
|
|
min: remToPixels(theme.typography.bodyShortRegularSmall.fontSize)
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Returns the range of possible values for the line height for the stage participant display name badge.
|
|
*
|
|
* @param {Theme} theme - The current theme.
|
|
* @returns {ILimits}
|
|
*/
|
|
export function getStageParticipantLineHeightRange(theme: Theme) {
|
|
return {
|
|
max: remToPixels(String(theme.typography.bodyShortRegularLarge.lineHeight)),
|
|
min: remToPixels(String(theme.typography.bodyShortRegularSmall.lineHeight))
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Returns the height + padding for stage participant display name badge.
|
|
*
|
|
* @param {Theme} theme - The current theme.
|
|
* @param {number} clientHeight - The height of the visible area.
|
|
* @returns {number}
|
|
*/
|
|
export function getStageParticipantNameLabelHeight(theme: Theme, clientHeight?: number) {
|
|
const lineHeight = getStageParticipantNameLabelLineHeight(theme, clientHeight);
|
|
|
|
return lineHeight + DISPLAY_NAME_VERTICAL_PADDING;
|
|
}
|
|
|
|
/**
|
|
* Returns the height + padding for stage participant display name badge.
|
|
*
|
|
* @param {Theme} theme - The current theme.
|
|
* @param {number} clientHeight - The height of the visible area.
|
|
* @returns {number}
|
|
*/
|
|
export function getStageParticipantNameLabelLineHeight(theme: Theme, clientHeight?: number) {
|
|
return scaleFontProperty(clientHeight, getStageParticipantLineHeightRange(theme));
|
|
}
|
|
|
|
interface ILimits {
|
|
max: number;
|
|
min: number;
|
|
}
|
|
|
|
/**
|
|
* The default clint height limits used by scaleFontProperty.
|
|
*/
|
|
const DEFAULT_CLIENT_HEIGHT_LIMITS = {
|
|
min: 300,
|
|
max: 960
|
|
};
|
|
|
|
/**
|
|
* Scales a css font property depending on the passed screen size.
|
|
* Note: The result will be in the range of the specified propValueLimits. Also if the current screen height is
|
|
* more/less than the values in screenLimits parameter the result will be the max/min of the propValuesLimits.
|
|
*
|
|
* @param {number|undefined} screenHeight - The current screen height.
|
|
* @param {ILimits} propValuesLimits - The max and min value for the font property that we are scaling.
|
|
* @param {ILimits} screenHeightLimits - The max and min value for screen height.
|
|
* @returns {number} - The scaled prop value.
|
|
*/
|
|
export function scaleFontProperty(
|
|
screenHeight: number | undefined,
|
|
propValuesLimits: ILimits,
|
|
screenHeightLimits: ILimits = DEFAULT_CLIENT_HEIGHT_LIMITS) {
|
|
if (typeof screenHeight !== 'number') {
|
|
return propValuesLimits.max;
|
|
}
|
|
|
|
const { max: maxPropSize, min: minPropSize } = propValuesLimits;
|
|
const { max: maxHeight, min: minHeight } = screenHeightLimits;
|
|
const propSizePerPxHeight = (maxPropSize - minPropSize) / (maxHeight - minHeight);
|
|
|
|
return Math.round(
|
|
(Math.max(Math.min(screenHeight, maxHeight), minHeight) - minHeight) * propSizePerPxHeight
|
|
) + minPropSize;
|
|
}
|