From 09e4696c60ce323036ed225e2126b8f2345a4d0b Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Fri, 3 Feb 2023 13:31:00 +0200 Subject: [PATCH] feat(title-bar) Update design (#12851) Convert some files to TS Move some styles from SCSS to JSS Update design --- css/_subject.scss | 38 ---- css/premeeting/_premeeting-screens.scss | 4 - .../base/label/components/web/Label.tsx | 4 +- ...l.js => AbstractInsecureRoomNameLabel.tsx} | 21 +- .../conference/components/ConferenceTimer.js | 180 ------------------ .../conference/components/ConferenceTimer.tsx | 106 +++++++++++ .../conference/components/constants.ts | 2 +- ...rDisplay.js => ConferenceTimerDisplay.tsx} | 9 +- .../conference/components/native/index.js | 2 +- .../components/web/ConferenceInfo.js | 8 +- .../components/web/ConferenceTimerDisplay.js | 19 -- .../components/web/ConferenceTimerDisplay.tsx | 37 ++++ ...NameLabel.js => InsecureRoomNameLabel.tsx} | 8 +- .../components/web/RaisedHandsCountLabel.tsx | 3 +- .../conference/components/web/SubjectText.js | 50 ----- .../conference/components/web/SubjectText.tsx | 57 ++++++ .../conference/components/web/index.js | 2 +- ...tractE2EELabel.js => AbstractE2EELabel.ts} | 20 +- react/features/e2ee/components/E2EELabel.js | 47 ----- react/features/e2ee/components/E2EELabel.tsx | 32 ++++ .../Recording/web/HighlightButton.tsx | 7 +- .../components/web/RecordingLabel.tsx | 11 +- ...Label.js => AbstractTranscribingLabel.tsx} | 8 +- .../components/TranscribingLabel.web.js | 44 ----- .../components/TranscribingLabel.web.tsx | 28 +++ 25 files changed, 307 insertions(+), 440 deletions(-) rename react/features/conference/components/{AbstractInsecureRoomNameLabel.js => AbstractInsecureRoomNameLabel.tsx} (73%) delete mode 100644 react/features/conference/components/ConferenceTimer.js create mode 100644 react/features/conference/components/ConferenceTimer.tsx rename react/features/conference/components/native/{ConferenceTimerDisplay.js => ConferenceTimerDisplay.tsx} (57%) delete mode 100644 react/features/conference/components/web/ConferenceTimerDisplay.js create mode 100644 react/features/conference/components/web/ConferenceTimerDisplay.tsx rename react/features/conference/components/web/{InsecureRoomNameLabel.js => InsecureRoomNameLabel.tsx} (85%) delete mode 100644 react/features/conference/components/web/SubjectText.js create mode 100644 react/features/conference/components/web/SubjectText.tsx rename react/features/e2ee/components/{AbstractE2EELabel.js => AbstractE2EELabel.ts} (62%) delete mode 100644 react/features/e2ee/components/E2EELabel.js create mode 100644 react/features/e2ee/components/E2EELabel.tsx rename react/features/transcribing/components/{AbstractTranscribingLabel.js => AbstractTranscribingLabel.tsx} (80%) delete mode 100644 react/features/transcribing/components/TranscribingLabel.web.js create mode 100644 react/features/transcribing/components/TranscribingLabel.web.tsx diff --git a/css/_subject.scss b/css/_subject.scss index f73fd7f4f9..8854bf8880 100644 --- a/css/_subject.scss +++ b/css/_subject.scss @@ -12,7 +12,6 @@ &#autoHide.with-always-on { overflow: hidden; animation: hideSubject forwards .6s ease-out; - margin-left: 4px; & > .subject-info-container { justify-content: flex-start; @@ -43,43 +42,6 @@ height: 28px; } -.subject-text { - background: rgba(0, 0, 0, 0.6); - border-radius: 3px 0px 0px 3px; - box-sizing: border-box; - font-size: 14px; - line-height: 28px; - padding: 0 16px; - height: 28px; - max-width: 324px; - - @media (max-width: 300px) { - display: none; - } - - &--content { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } -} - -.subject-timer { - background: rgba(0, 0, 0, 0.8); - border-radius: 0px 3px 3px 0px; - box-sizing: border-box; - font-size: 12px; - line-height: 28px; - min-width: 34px; - padding: 0 8px; - height: 28px; - font-variant-numeric: tabular-nums; - - @media (max-width: 300px) { - display: none; - } -} - .details-container { width: 100%; display: flex; diff --git a/css/premeeting/_premeeting-screens.scss b/css/premeeting/_premeeting-screens.scss index d7138ec22e..8fcbea00d6 100644 --- a/css/premeeting/_premeeting-screens.scss +++ b/css/premeeting/_premeeting-screens.scss @@ -103,10 +103,6 @@ padding: 11px 16px; } } - - input::placeholder { - color: #040404; - } } #preview { diff --git a/react/features/base/label/components/web/Label.tsx b/react/features/base/label/components/web/Label.tsx index ba5f470f83..f7c7af7f92 100644 --- a/react/features/base/label/components/web/Label.tsx +++ b/react/features/base/label/components/web/Label.tsx @@ -50,10 +50,10 @@ const useStyles = makeStyles()(theme => { ...withPixelLineHeight(theme.typography.labelRegular), alignItems: 'center', background: theme.palette.ui04, - borderRadius: Number(theme.shape.borderRadius) / 2, + borderRadius: '4px', color: theme.palette.text01, display: 'flex', - margin: '0 0 4px 4px', + margin: '0 2px', padding: '6px', height: 28, boxSizing: 'border-box' diff --git a/react/features/conference/components/AbstractInsecureRoomNameLabel.js b/react/features/conference/components/AbstractInsecureRoomNameLabel.tsx similarity index 73% rename from react/features/conference/components/AbstractInsecureRoomNameLabel.js rename to react/features/conference/components/AbstractInsecureRoomNameLabel.tsx index 6befc57684..e7564fc3b0 100644 --- a/react/features/conference/components/AbstractInsecureRoomNameLabel.js +++ b/react/features/conference/components/AbstractInsecureRoomNameLabel.tsx @@ -1,7 +1,6 @@ -// @flow - -import { PureComponent } from 'react'; +import React, { PureComponent } from 'react'; +import { IReduxState } from '../../app/types'; import isInsecureRoomName from '../../base/util/isInsecureRoomName'; type Props = { @@ -14,11 +13,11 @@ type Props = { /** * Function to be used to translate i18n labels. */ - t: Function -} + t: Function; +}; /** - * Abstrsact class for the {@Code InsecureRoomNameLabel} component. + * Abstract class for the {@Code InsecureRoomNameLabel} component. */ export default class AbstractInsecureRoomNameLabel extends PureComponent { /** @@ -39,7 +38,9 @@ export default class AbstractInsecureRoomNameLabel extends PureComponent * * @returns {ReactElement} */ - _render: () => Object; + _render() { + return <>; + } } /** @@ -48,14 +49,14 @@ export default class AbstractInsecureRoomNameLabel extends PureComponent * @param {Object} state - The Redux state. * @returns {Props} */ -export function _mapStateToProps(state: Object): $Shape { +export function _mapStateToProps(state: IReduxState) { const { locked, room } = state['features/base/conference']; const { lobbyEnabled } = state['features/lobby']; const { enableInsecureRoomNameWarning = false } = state['features/base/config']; return { - _visible: enableInsecureRoomNameWarning + _visible: Boolean(enableInsecureRoomNameWarning && room && isInsecureRoomName(room) - && !(lobbyEnabled || Boolean(locked)) + && !(lobbyEnabled || Boolean(locked))) }; } diff --git a/react/features/conference/components/ConferenceTimer.js b/react/features/conference/components/ConferenceTimer.js deleted file mode 100644 index 0c8583cea4..0000000000 --- a/react/features/conference/components/ConferenceTimer.js +++ /dev/null @@ -1,180 +0,0 @@ -// @flow - -import { Component } from 'react'; - -import { renderConferenceTimer } from '../'; -import { getConferenceTimestamp } from '../../base/conference/functions'; -import { getLocalizedDurationFormatter } from '../../base/i18n'; -import { connect } from '../../base/redux'; - -/** - * The type of the React {@code Component} props of {@link ConferenceTimer}. - */ -type Props = { - - /** - * The UTC timestamp representing the time when first participant joined. - */ - _startTimestamp: ?number, - - /** - * Style to be applied to the rendered text. - */ - textStyle: ?Object, - - /** - * The redux {@code dispatch} function. - */ - dispatch: Function -}; - -/** - * The type of the React {@code Component} state of {@link ConferenceTimer}. - */ -type State = { - - /** - * Value of current conference time. - */ - timerValue: string -}; - -/** - * ConferenceTimer react component. - * - * @class ConferenceTimer - * @augments Component - */ -class ConferenceTimer extends Component { - - /** - * Handle for setInterval timer. - */ - _interval; - - /** - * Initializes a new {@code ConferenceTimer} instance. - * - * @param {Props} props - The read-only properties with which the new - * instance is to be initialized. - */ - constructor(props: Props) { - super(props); - - this.state = { - timerValue: getLocalizedDurationFormatter(0) - }; - } - - /** - * Starts the conference timer when component will be - * mounted. - * - * @inheritdoc - */ - componentDidMount() { - this._startTimer(); - } - - /** - * Stops the conference timer when component will be - * unmounted. - * - * @inheritdoc - */ - componentWillUnmount() { - this._stopTimer(); - } - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - const { timerValue } = this.state; - const { _startTimestamp, textStyle } = this.props; - - if (!_startTimestamp) { - return null; - } - - return renderConferenceTimer(timerValue, textStyle); - } - - /** - * Sets the current state values that will be used to render the timer. - * - * @param {number} refValueUTC - The initial UTC timestamp value. - * @param {number} currentValueUTC - The current UTC timestamp value. - * - * @returns {void} - */ - _setStateFromUTC(refValueUTC, currentValueUTC) { - if (!refValueUTC || !currentValueUTC) { - return; - } - - if (currentValueUTC < refValueUTC) { - return; - } - - const timerMsValue = currentValueUTC - refValueUTC; - - const localizedTime = getLocalizedDurationFormatter(timerMsValue); - - this.setState({ - timerValue: localizedTime - }); - } - - /** - * Start conference timer. - * - * @returns {void} - */ - _startTimer() { - if (!this._interval) { - this._setStateFromUTC(this.props._startTimestamp, new Date().getTime()); - - this._interval = setInterval(() => { - this._setStateFromUTC(this.props._startTimestamp, new Date().getTime()); - }, 1000); - } - } - - /** - * Stop conference timer. - * - * @returns {void} - */ - _stopTimer() { - if (this._interval) { - clearInterval(this._interval); - } - - this.setState({ - timerValue: getLocalizedDurationFormatter(0) - }); - } -} - -/** - * Maps (parts of) the Redux state to the associated - * {@code ConferenceTimer}'s props. - * - * @param {Object} state - The Redux state. - * @private - * @returns {{ - * _startTimestamp: number - * }} - */ -export function _mapStateToProps(state: Object) { - - return { - _startTimestamp: getConferenceTimestamp(state) - }; -} - -export default connect(_mapStateToProps)(ConferenceTimer); diff --git a/react/features/conference/components/ConferenceTimer.tsx b/react/features/conference/components/ConferenceTimer.tsx new file mode 100644 index 0000000000..b200986eb4 --- /dev/null +++ b/react/features/conference/components/ConferenceTimer.tsx @@ -0,0 +1,106 @@ +import React, { useCallback, useEffect, useRef, useState } from 'react'; +import { useSelector } from 'react-redux'; + +// @ts-ignore +import { ConferenceTimerDisplay } from '..'; +import { getConferenceTimestamp } from '../../base/conference/functions'; +import { getLocalizedDurationFormatter } from '../../base/i18n/dateUtil'; + +/** + * The type of the React {@code Component} props of {@link ConferenceTimer}. + */ +interface IProps { + + /** + * Style to be applied to the rendered text. + */ + textStyle?: Object; +} + +export interface IDisplayProps { + + /** + * Style to be applied to text (native only). + */ + textStyle: Object; + + /** + * String to display as time. + */ + timerValue: string; +} + +const ConferenceTimer = ({ textStyle }: IProps) => { + const startTimestamp = useSelector(getConferenceTimestamp); + const [ timerValue, setTimerValue ] = useState(getLocalizedDurationFormatter(0)); + const interval = useRef(); + + /** + * Sets the current state values that will be used to render the timer. + * + * @param {number} refValueUTC - The initial UTC timestamp value. + * @param {number} currentValueUTC - The current UTC timestamp value. + * + * @returns {void} + */ + const setStateFromUTC = useCallback((refValueUTC, currentValueUTC) => { + if (!refValueUTC || !currentValueUTC) { + return; + } + + if (currentValueUTC < refValueUTC) { + return; + } + + const timerMsValue = currentValueUTC - refValueUTC; + + const localizedTime = getLocalizedDurationFormatter(timerMsValue); + + setTimerValue(localizedTime); + }, []); + + /** + * Start conference timer. + * + * @returns {void} + */ + const startTimer = useCallback(() => { + if (!interval.current && startTimestamp) { + setStateFromUTC(startTimestamp, new Date().getTime()); + + interval.current = window.setInterval(() => { + setStateFromUTC(startTimestamp, new Date().getTime()); + }, 1000); + } + }, [ startTimestamp, interval ]); + + /** + * Stop conference timer. + * + * @returns {void} + */ + const stopTimer = useCallback(() => { + if (interval.current) { + clearInterval(interval.current); + } + + setTimerValue(getLocalizedDurationFormatter(0)); + }, [ interval ]); + + useEffect(() => { + startTimer(); + + return () => stopTimer(); + }, [ startTimestamp ]); + + + if (!startTimestamp) { + return null; + } + + return (); +}; + +export default ConferenceTimer; diff --git a/react/features/conference/components/constants.ts b/react/features/conference/components/constants.ts index 914ba8a949..66f4f5b637 100644 --- a/react/features/conference/components/constants.ts +++ b/react/features/conference/components/constants.ts @@ -1,5 +1,5 @@ export const CONFERENCE_INFO = { - alwaysVisible: [ 'recording', 'raised-hands-count' ], + alwaysVisible: [ 'raised-hands-count', 'recording' ], autoHide: [ 'highlight-moment', 'subject', diff --git a/react/features/conference/components/native/ConferenceTimerDisplay.js b/react/features/conference/components/native/ConferenceTimerDisplay.tsx similarity index 57% rename from react/features/conference/components/native/ConferenceTimerDisplay.js rename to react/features/conference/components/native/ConferenceTimerDisplay.tsx index 17f1cdb953..a4545cd3f0 100644 --- a/react/features/conference/components/native/ConferenceTimerDisplay.js +++ b/react/features/conference/components/native/ConferenceTimerDisplay.tsx @@ -1,17 +1,16 @@ -// @flow - import React from 'react'; import { Text } from 'react-native'; +import { IDisplayProps } from '../ConferenceTimer'; + /** * Returns native element to be rendered. * - * @param {string} timerValue - String to display as time. - * @param {Object} textStyle - Style to be applied to the text. + * @param {Object} props - Component props. * * @returns {ReactElement} */ -export default function renderConferenceTimer(timerValue: string, textStyle: Object) { +export default function ConferenceTimerDisplay({ timerValue, textStyle }: IDisplayProps) { return ( { timerValue } - ); -} diff --git a/react/features/conference/components/web/ConferenceTimerDisplay.tsx b/react/features/conference/components/web/ConferenceTimerDisplay.tsx new file mode 100644 index 0000000000..056144a9f5 --- /dev/null +++ b/react/features/conference/components/web/ConferenceTimerDisplay.tsx @@ -0,0 +1,37 @@ +import React from 'react'; +import { makeStyles } from 'tss-react/mui'; + +import { withPixelLineHeight } from '../../../base/styles/functions.web'; +import { IDisplayProps } from '../ConferenceTimer'; + +const useStyles = makeStyles()(theme => { + return { + timer: { + ...withPixelLineHeight(theme.typography.labelRegular), + color: theme.palette.text01, + padding: '6px 8px', + backgroundColor: 'rgba(0, 0, 0, 0.8)', + boxSizing: 'border-box', + height: '28px', + borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`, + marginRight: '2px', + + '@media (max-width: 300px)': { + display: 'none' + } + } + }; +}); + +/** + * Returns web element to be rendered. + * + * @returns {ReactElement} + */ +export default function ConferenceTimerDisplay({ timerValue, textStyle: _textStyle }: IDisplayProps) { + const { classes } = useStyles(); + + return ( + { timerValue } + ); +} diff --git a/react/features/conference/components/web/InsecureRoomNameLabel.js b/react/features/conference/components/web/InsecureRoomNameLabel.tsx similarity index 85% rename from react/features/conference/components/web/InsecureRoomNameLabel.js rename to react/features/conference/components/web/InsecureRoomNameLabel.tsx index 4c41b14a79..4aabc73e7f 100644 --- a/react/features/conference/components/web/InsecureRoomNameLabel.js +++ b/react/features/conference/components/web/InsecureRoomNameLabel.tsx @@ -1,13 +1,11 @@ -// @flow - import Tooltip from '@atlaskit/tooltip'; import React from 'react'; +import { connect } from 'react-redux'; -import { translate } from '../../../base/i18n'; +import { translate } from '../../../base/i18n/functions'; import { IconExclamationTriangle } from '../../../base/icons/svg'; -import { Label } from '../../../base/label'; +import Label from '../../../base/label/components/web/Label'; import { COLORS } from '../../../base/label/constants'; -import { connect } from '../../../base/redux'; import AbstractInsecureRoomNameLabel, { _mapStateToProps } from '../AbstractInsecureRoomNameLabel'; /** diff --git a/react/features/conference/components/web/RaisedHandsCountLabel.tsx b/react/features/conference/components/web/RaisedHandsCountLabel.tsx index 3ba5911726..e4bb0d064d 100644 --- a/react/features/conference/components/web/RaisedHandsCountLabel.tsx +++ b/react/features/conference/components/web/RaisedHandsCountLabel.tsx @@ -15,8 +15,7 @@ const useStyles = makeStyles()(theme => { return { label: { backgroundColor: theme.palette.warning02, - color: theme.palette.uiBackground, - marginRight: theme.spacing(1) + color: theme.palette.uiBackground } }; }); diff --git a/react/features/conference/components/web/SubjectText.js b/react/features/conference/components/web/SubjectText.js deleted file mode 100644 index 6e44ec447e..0000000000 --- a/react/features/conference/components/web/SubjectText.js +++ /dev/null @@ -1,50 +0,0 @@ -/* @flow */ - -import React from 'react'; - -import { getConferenceName } from '../../../base/conference/functions'; -import { connect } from '../../../base/redux'; -import { Tooltip } from '../../../base/tooltip'; - -type Props = { - - /** - * The conference display name. - */ - _subject: string -} - -/** - * Label for the conference name. - * - * @param {Props} props - The props of the component. - * @returns {ReactElement} - */ -const SubjectText = ({ _subject }: Props) => ( -
- -
{ _subject }
- -
-); - - -/** - * Maps (parts of) the Redux state to the associated - * {@code Subject}'s props. - * - * @param {Object} state - The Redux state. - * @private - * @returns {{ - * _subject: string, - * }} - */ -function _mapStateToProps(state) { - return { - _subject: getConferenceName(state) - }; -} - -export default connect(_mapStateToProps)(SubjectText); diff --git a/react/features/conference/components/web/SubjectText.tsx b/react/features/conference/components/web/SubjectText.tsx new file mode 100644 index 0000000000..223cc2d4db --- /dev/null +++ b/react/features/conference/components/web/SubjectText.tsx @@ -0,0 +1,57 @@ +import clsx from 'clsx'; +import React from 'react'; +import { useSelector } from 'react-redux'; +import { makeStyles } from 'tss-react/mui'; + +import { getConferenceName } from '../../../base/conference/functions'; +import { withPixelLineHeight } from '../../../base/styles/functions.web'; +// eslint-disable-next-line lines-around-comment +// @ts-ignore +import { Tooltip } from '../../../base/tooltip'; + +const useStyles = makeStyles()(theme => { + return { + container: { + ...withPixelLineHeight(theme.typography.bodyLongRegular), + color: theme.palette.text01, + padding: '2px 16px', + backgroundColor: 'rgba(0, 0, 0, 0.6)', + maxWidth: '324px', + boxSizing: 'border-box', + height: '28px', + borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`, + marginLeft: '2px', + + '@media (max-width: 300px)': { + display: 'none' + } + }, + content: { + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap' + } + }; +}); + +/** + * Label for the conference name. + * + * @returns {ReactElement} + */ +const SubjectText = () => { + const subject = useSelector(getConferenceName); + const { classes } = useStyles(); + + return ( +
+ +
{subject}
+ +
+ ); +}; + +export default SubjectText; diff --git a/react/features/conference/components/web/index.js b/react/features/conference/components/web/index.js index bf1dc9621f..432b18b495 100644 --- a/react/features/conference/components/web/index.js +++ b/react/features/conference/components/web/index.js @@ -1,7 +1,7 @@ // @flow export { default as Conference } from './Conference'; -export { default as renderConferenceTimer } from './ConferenceTimerDisplay'; +export { default as ConferenceTimerDisplay } from './ConferenceTimerDisplay'; export { default as InsecureRoomNameLabel } from './InsecureRoomNameLabel'; export { default as ConferenceInfo } from './ConferenceInfo'; export { default as SubjectText } from './SubjectText'; diff --git a/react/features/e2ee/components/AbstractE2EELabel.js b/react/features/e2ee/components/AbstractE2EELabel.ts similarity index 62% rename from react/features/e2ee/components/AbstractE2EELabel.js rename to react/features/e2ee/components/AbstractE2EELabel.ts index af6418489c..baa1835b98 100644 --- a/react/features/e2ee/components/AbstractE2EELabel.js +++ b/react/features/e2ee/components/AbstractE2EELabel.ts @@ -1,32 +1,28 @@ -// @flow +import { WithTranslation } from 'react-i18next'; +import { IReduxState } from '../../app/types'; -export type Props = { +export interface IProps extends WithTranslation { /** * Custom e2ee labels. */ - _e2eeLabels?: Object; + _e2eeLabels?: any; /** * True if the label needs to be rendered, false otherwise. */ - _showLabel: boolean, - - /** - * Invoked to obtain translated strings. - */ - t: Function -}; + _showLabel?: boolean; +} /** * Maps (parts of) the redux state to the associated props of this {@code Component}. * * @param {Object} state - The redux state. * @private - * @returns {Props} + * @returns {IProps} */ -export function _mapStateToProps(state: Object) { +export function _mapStateToProps(state: IReduxState) { const { e2ee = {} } = state['features/base/config']; return { diff --git a/react/features/e2ee/components/E2EELabel.js b/react/features/e2ee/components/E2EELabel.js deleted file mode 100644 index f3c80e7eef..0000000000 --- a/react/features/e2ee/components/E2EELabel.js +++ /dev/null @@ -1,47 +0,0 @@ -// @flow - -import React, { Component } from 'react'; - -import { translate } from '../../base/i18n'; -import { IconE2EE } from '../../base/icons'; -import { Label } from '../../base/label'; -import { COLORS } from '../../base/label/constants'; -import { connect } from '../../base/redux'; -import { Tooltip } from '../../base/tooltip'; - -import { type Props, _mapStateToProps } from './AbstractE2EELabel'; - - -/** - * React {@code Component} for displaying a label when everyone has E2EE enabled in a conference. - * - * @augments Component - */ -class E2EELabel extends Component { - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - if (!this.props._showLabel) { - return null; - } - const { _e2eeLabels, t } = this.props; - const content = _e2eeLabels?.labelToolTip || t('e2ee.labelToolTip'); - - return ( - - - ); - } -} - -export default translate(connect(_mapStateToProps)(E2EELabel)); diff --git a/react/features/e2ee/components/E2EELabel.tsx b/react/features/e2ee/components/E2EELabel.tsx new file mode 100644 index 0000000000..82701581fa --- /dev/null +++ b/react/features/e2ee/components/E2EELabel.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { connect } from 'react-redux'; + +import { translate } from '../../base/i18n/functions'; +import { IconE2EE } from '../../base/icons/svg'; +import Label from '../../base/label/components/web/Label'; +import { COLORS } from '../../base/label/constants'; +// eslint-disable-next-line lines-around-comment +// @ts-ignore +import { Tooltip } from '../../base/tooltip'; + +import { IProps, _mapStateToProps } from './AbstractE2EELabel'; + + +const E2EELabel = ({ _e2eeLabels, _showLabel, t }: IProps) => { + if (!_showLabel) { + return null; + } + const content = _e2eeLabels?.labelToolTip || t('e2ee.labelToolTip'); + + return ( + + + ); +}; + +export default translate(connect(_mapStateToProps)(E2EELabel)); diff --git a/react/features/recording/components/Recording/web/HighlightButton.tsx b/react/features/recording/components/Recording/web/HighlightButton.tsx index 6a0f534e5b..6cbc10c35d 100644 --- a/react/features/recording/components/Recording/web/HighlightButton.tsx +++ b/react/features/recording/components/Recording/web/HighlightButton.tsx @@ -60,12 +60,10 @@ const styles = (theme: Theme) => { position: 'relative' }, disabled: { - background: theme.palette.text02, - margin: '0 4px 4px 4px' + background: theme.palette.text02 }, regular: { // @ts-ignore - background: theme.palette.field02, - margin: '0 4px 4px 4px' + background: theme.palette.field02 }, highlightNotification: { // @ts-ignore backgroundColor: theme.palette.field02, @@ -197,7 +195,6 @@ export class HighlightButton extends AbstractHighlightButton { // @ts-ignore } = this.props; - if (!_visible) { return null; } diff --git a/react/features/recording/components/web/RecordingLabel.tsx b/react/features/recording/components/web/RecordingLabel.tsx index 613e0c8f01..ba202051b1 100644 --- a/react/features/recording/components/web/RecordingLabel.tsx +++ b/react/features/recording/components/web/RecordingLabel.tsx @@ -3,6 +3,7 @@ import { withStyles } from '@mui/styles'; import React from 'react'; import { translate } from '../../../base/i18n/functions'; +import { IconRecord, IconSites } from '../../../base/icons/svg'; import Label from '../../../base/label/components/web/Label'; import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet'; import { connect } from '../../../base/redux/functions'; @@ -22,10 +23,10 @@ import AbstractRecordingLabel, { const styles = (theme: Theme) => { return { [JitsiRecordingConstants.mode.STREAM]: { - background: theme.palette.ui03 + background: theme.palette.support07 }, [JitsiRecordingConstants.mode.FILE]: { - background: theme.palette.iconError + background: theme.palette.actionDanger } }; }; @@ -51,15 +52,13 @@ class RecordingLabel extends AbstractRecordingLabel { } // @ts-ignore - const { classes, mode, t } = this.props; + const { classes, mode } = this.props; return (
); } diff --git a/react/features/transcribing/components/AbstractTranscribingLabel.js b/react/features/transcribing/components/AbstractTranscribingLabel.tsx similarity index 80% rename from react/features/transcribing/components/AbstractTranscribingLabel.js rename to react/features/transcribing/components/AbstractTranscribingLabel.tsx index f586167c46..9d0f7aca6c 100644 --- a/react/features/transcribing/components/AbstractTranscribingLabel.js +++ b/react/features/transcribing/components/AbstractTranscribingLabel.tsx @@ -1,4 +1,4 @@ -// @flow +import { IReduxState } from '../../app/types'; /** * The type of the React {@code Component} props of {@link TranscribingLabel}. @@ -8,12 +8,12 @@ export type Props = { /** * True if the label needs to be rendered, false otherwise. */ - _showLabel: boolean, + _showLabel: boolean; /** * Invoked to obtain translated strings. */ - t: Function + t: Function; }; /** @@ -26,7 +26,7 @@ export type Props = { * _showLabel: boolean * }} */ -export function _mapStateToProps(state: Object) { +export function _mapStateToProps(state: IReduxState) { return { _showLabel: state['features/transcribing'].isTranscribing }; diff --git a/react/features/transcribing/components/TranscribingLabel.web.js b/react/features/transcribing/components/TranscribingLabel.web.js deleted file mode 100644 index c31b48c10d..0000000000 --- a/react/features/transcribing/components/TranscribingLabel.web.js +++ /dev/null @@ -1,44 +0,0 @@ -// @flow - -import React, { Component } from 'react'; - -import { translate } from '../../base/i18n'; -import { Label } from '../../base/label'; -import { connect } from '../../base/redux'; -import { Tooltip } from '../../base/tooltip'; - -import { type Props, _mapStateToProps } from './AbstractTranscribingLabel'; - -/** - * React {@code Component} for displaying a label when a transcriber is in the - * conference. - * - * @augments Component - */ -class TranscribingLabel extends Component { - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - if (!this.props._showLabel) { - return null; - } - - return ( - - - ); - } - -} - -export default translate(connect(_mapStateToProps)(TranscribingLabel)); diff --git a/react/features/transcribing/components/TranscribingLabel.web.tsx b/react/features/transcribing/components/TranscribingLabel.web.tsx new file mode 100644 index 0000000000..da6e84daab --- /dev/null +++ b/react/features/transcribing/components/TranscribingLabel.web.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { connect } from 'react-redux'; + +import { translate } from '../../base/i18n/functions'; +import Label from '../../base/label/components/web/Label'; +// eslint-disable-next-line lines-around-comment +// @ts-ignore +import { Tooltip } from '../../base/tooltip'; + +import { Props, _mapStateToProps } from './AbstractTranscribingLabel'; + +const TranscribingLabel = ({ _showLabel, t }: Props) => { + if (!_showLabel) { + return null; + } + + return ( + + + ); +}; + +export default translate(connect(_mapStateToProps)(TranscribingLabel));