From b135e2a06afb0a941e40409e57491376156ac3c0 Mon Sep 17 00:00:00 2001 From: Vlad Piersec Date: Thu, 8 Apr 2021 11:35:26 +0300 Subject: [PATCH] feat(Labels): Redesign labels on mobile & web --- css/_labels.scss | 85 ++--- css/_participants-count.scss | 26 -- css/_subject.scss | 69 ++-- css/main.scss | 1 - react/features/base/icons/svg/index.js | 1 + .../features/base/icons/svg}/user-groups.svg | 4 +- ...tractCircularLabel.js => AbstractLabel.js} | 7 +- .../label/components/CircularLabel.web.js | 68 ---- .../label/components/ExpandedLabel.native.js | 51 +-- ...ircularLabel.native.js => Label.native.js} | 30 +- .../base/label/components/Label.web.js | 57 ++++ react/features/base/label/components/index.js | 2 +- .../features/base/label/components/styles.js | 57 ++-- .../conference/components/AbstractLabels.js | 130 ------- .../native/InsecureRoomNameLabel.js | 4 +- .../conference/components/native/Labels.js | 319 ++++-------------- .../components/native/NavigationBar.js | 18 +- .../conference/components/native/styles.js | 42 +-- .../conference/components/web/Conference.js | 12 +- .../components/web/ConferenceInfo.js | 125 +++++++ .../components/web/ConferenceTimerDisplay.js | 2 +- .../components/web/InsecureRoomNameLabel.js | 8 +- .../conference/components/web/Labels.js | 119 ------- .../components/web/ParticipantsCount.js | 11 +- .../conference/components/web/Subject.js | 103 ------ .../conference/components/web/index.js | 2 +- react/features/e2ee/components/E2EELabel.js | 8 +- .../large-video/components/LargeVideo.web.js | 2 - .../components/LocalRecordingLabel.web.js | 8 +- .../components/native/RecordingLabel.js | 8 +- .../components/web/RecordingLabel.js | 6 +- .../components/TranscribingLabel.native.js | 7 +- .../components/TranscribingLabel.web.js | 6 +- .../components/VideoQualityLabel.native.js | 10 +- .../components/VideoQualityLabel.web.js | 31 +- 35 files changed, 457 insertions(+), 982 deletions(-) rename {images => react/features/base/icons/svg}/user-groups.svg (93%) rename react/features/base/label/components/{AbstractCircularLabel.js => AbstractLabel.js} (69%) delete mode 100644 react/features/base/label/components/CircularLabel.web.js rename react/features/base/label/components/{CircularLabel.native.js => Label.native.js} (84%) create mode 100644 react/features/base/label/components/Label.web.js delete mode 100644 react/features/conference/components/AbstractLabels.js create mode 100644 react/features/conference/components/web/ConferenceInfo.js delete mode 100644 react/features/conference/components/web/Labels.js delete mode 100644 react/features/conference/components/web/Subject.js diff --git a/css/_labels.scss b/css/_labels.scss index ae1d35d09..b43caffa6 100644 --- a/css/_labels.scss +++ b/css/_labels.scss @@ -1,68 +1,37 @@ -.large-video-labels { +.label { + align-items: center; + background: #36383C; + border-radius: 3px; + color: #fff; display: flex; - position: absolute; - top: 30px; - right: 30px; - transition: right 0.5s; - z-index: $labelsZ; + font-size: 12px; + font-weight: 600; + height: 28px; + margin: 0 0 4px 4px; + padding: 0 8px; - .circular-label { - align-items: center; - color: white; - display: flex; - font-weight: bold; - justify-content: center; - margin-left: 8px; - opacity: 0.8; + &--green { + background: #31B76A; } - .circular-label { - background: #B8C7E0; + &--red { + background: #E34F56 } - .circular-label.e2ee { - align-items: center; - background: #76CF9C; - display: flex; - justify-content: center; - } + &--white { + background: #fff; + color: #5e6d7a; - .circular-label.file { - background: #FF5630; - } - - .circular-label.local-rec { - background: #FF5630; - } - - .circular-label.stream { - background: #0065FF; - } - - .circular-label.insecure { - background: $defaultWarningColor; - } - - .recording-label.center-message { - background: $videoStateIndicatorBackground; - bottom: 50%; - display: block; - left: 50%; - padding: 10px; - position: fixed; - transform: translate(-50%, -50%); - z-index: $centeredVideoLabelZ; + svg { + fill: #5e6d7a; + } } } -.circular-label { - background: $videoStateIndicatorBackground; - border-radius: 50%; - box-sizing: border-box; - cursor: default; - font-size: 13px; - height: $videoStateIndicatorSize; - line-height: $videoStateIndicatorSize; - text-align: center; - min-width: $videoStateIndicatorSize; -} \ No newline at end of file +.label-text-with-icon { + margin-left: 8px; +} + +.participants-count { + cursor: pointer; +} diff --git a/css/_participants-count.scss b/css/_participants-count.scss index 6039375af..e69de29bb 100644 --- a/css/_participants-count.scss +++ b/css/_participants-count.scss @@ -1,26 +0,0 @@ -.participants-count { - background: #fff; - border-radius: 4px; - color: #5e6d7a; - cursor: pointer; - display: inline-block; - font-size: 13px; - line-height: 20px; - margin-left: 16px; - padding: 4px 8px; - pointer-events: auto; - - &-number { - margin-right: 8px; - vertical-align: middle; - } - - &-icon { - background: url('../images/user-groups.svg'); - background-repeat: no-repeat; - display: inline-block; - height: 16px; - width: 16px; - vertical-align: middle; - } -} diff --git a/css/_subject.scss b/css/_subject.scss index c8ebd557a..e39a08b7d 100644 --- a/css/_subject.scss +++ b/css/_subject.scss @@ -1,35 +1,60 @@ .subject { + box-sizing: border-box; + color: #fff; + margin-top: 20px; + position: absolute; top: -120px; transition: top .3s ease-in; - height: 95px; width: 100%; - pointer-events: none; - position: absolute; - padding: 25px 140px 0 140px; - text-align: center; - font-size: 17px; - color: #fff; - z-index: $zindex10; - overflow: hidden; - text-overflow: ellipsis; - box-sizing: border-box; - white-space: nowrap; + z-index: $zindex3; &.visible { top: 0px; } +} - &.gradient { - background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); +.subject-info-container { + display: flex; + justify-content: center; + max-width: calc(100% - 280px); + margin: 0 auto; + + &--full-width { + max-width: 100%; } - &-text { - vertical-align: middle; - } - - &-conference-timer { - display: block; - font-size: 15px; - opacity: 0.6; + @media (max-width: 500px) { + flex-wrap: wrap; + max-width: 100%; } } + +.subject-info { + align-items: center; + display: flex; + margin-bottom: 4px; + max-width: 80%; + height: 28px; +} + +.subject-text { + background: rgba(0, 0, 0, 0.6); + border-radius: 3px 0px 0px 3px; + font-size: 14px; + line-height: 24px; + padding: 2px 16px; + height: 24px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.subject-timer { + background: rgba(0, 0, 0, 0.8); + border-radius: 0px 3px 3px 0px; + display: inline-block; + font-size: 12px; + line-height: 16px; + min-width: 34px; + padding: 6px 8px; +} diff --git a/css/main.scss b/css/main.scss index 37d90d5ac..b0e6f64ec 100644 --- a/css/main.scss +++ b/css/main.scss @@ -48,7 +48,6 @@ $flagsImagePath: "../images/"; @import 'videolayout_default'; @import 'notice'; @import 'subject'; -@import 'participants-count'; @import 'popup_menu'; @import 'recording'; @import 'login_menu'; diff --git a/react/features/base/icons/svg/index.js b/react/features/base/icons/svg/index.js index 4b27fd468..1befe06dc 100644 --- a/react/features/base/icons/svg/index.js +++ b/react/features/base/icons/svg/index.js @@ -111,6 +111,7 @@ export { default as IconVideoQualityAudioOnly } from './AUD.svg'; export { default as IconVideoQualityHD } from './HD.svg'; export { default as IconVideoQualityLD } from './LD.svg'; export { default as IconVideoQualitySD } from './SD.svg'; +export { default as IconUserGroups } from './user-groups.svg'; export { default as IconVirtualBackground } from './virtual-background.svg'; export { default as IconVolume } from './volume.svg'; export { default as IconVolumeEmpty } from './volume-empty.svg'; diff --git a/images/user-groups.svg b/react/features/base/icons/svg/user-groups.svg similarity index 93% rename from images/user-groups.svg rename to react/features/base/icons/svg/user-groups.svg index 689707f31..4ce3cd216 100644 --- a/images/user-groups.svg +++ b/react/features/base/icons/svg/user-groups.svg @@ -1,3 +1,3 @@ - - + + diff --git a/react/features/base/label/components/AbstractCircularLabel.js b/react/features/base/label/components/AbstractLabel.js similarity index 69% rename from react/features/base/label/components/AbstractCircularLabel.js rename to react/features/base/label/components/AbstractLabel.js index 21fcd171d..685343ec5 100644 --- a/react/features/base/label/components/AbstractCircularLabel.js +++ b/react/features/base/label/components/AbstractLabel.js @@ -12,13 +12,12 @@ export type Props = { /** * String or component that will be rendered as the label itself. */ - label: string + text: string }; /** - * Abstract class for the {@code CircularLabel} component. + * Abstract class for the {@code Label} component. */ -export default class AbstractCircularLabel +export default class Label extends Component { - } diff --git a/react/features/base/label/components/CircularLabel.web.js b/react/features/base/label/components/CircularLabel.web.js deleted file mode 100644 index 71981dd6d..000000000 --- a/react/features/base/label/components/CircularLabel.web.js +++ /dev/null @@ -1,68 +0,0 @@ -// @flow - -import React from 'react'; - -import Icon from '../../icons/components/Icon'; - -import AbstractCircularLabel, { - type Props as AbstractProps -} from './AbstractCircularLabel'; - -type Props = AbstractProps & { - - /** - * Additional CSS class names to add to the root of {@code CircularLabel}. - */ - className: string, - - /** - * HTML ID attribute to add to the root of {@code CircularLabel}. - */ - id: string - -}; - -/** - * React Component for showing short text in a circle. - * - * @extends Component - */ -export default class CircularLabel extends AbstractCircularLabel { - /** - * Default values for {@code CircularLabel} component's properties. - * - * @static - */ - static defaultProps = { - className: '' - }; - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - const { - className, - icon, - id, - label - } = this.props; - - const labelComponent = icon - ? ( - - ) : label; - - return ( -
- { labelComponent } -
- ); - } -} diff --git a/react/features/base/label/components/ExpandedLabel.native.js b/react/features/base/label/components/ExpandedLabel.native.js index 9a17bdaad..f822ce8e2 100644 --- a/react/features/base/label/components/ExpandedLabel.native.js +++ b/react/features/base/label/components/ExpandedLabel.native.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import { Animated, Text, View } from 'react-native'; -import styles, { DEFAULT_COLOR, LABEL_MARGIN, LABEL_SIZE } from './styles'; +import styles, { DEFAULT_COLOR } from './styles'; export type Props = { @@ -19,21 +19,9 @@ type State = { /** * The opacity animation Object. */ - opacityAnimation: Object, - - /** - * A boolean to decide to show or not show the arrow. This is required as - * we can't easily animate this transformed Component so we render it once - * the animation is done. - */ - showArrow: boolean + opacityAnimation: Object }; -/** - * Offset to the arrow to be rendered in the right position. - */ -const ARROW_OFFSET = 0; - /** * A react {@code Component} that implements an expanded label as tooltip-like * component to explain the meaning of the {@code Label}. @@ -48,8 +36,7 @@ export default class ExpandedLabel extends Component { super(props); this.state = { - opacityAnimation: new Animated.Value(0), - showArrow: false + opacityAnimation: new Animated.Value(0) }; } @@ -63,11 +50,7 @@ export default class ExpandedLabel extends Component { toValue: 1, velocity: 1, useNativeDriver: true - }).start(({ finished }) => { - finished && this.setState({ - showArrow: true - }); - }); + }).start(); } /** @@ -76,32 +59,12 @@ export default class ExpandedLabel extends Component { * @inheritdoc */ render() { - const arrowPosition - = this.props.parentPosition - LABEL_MARGIN - (LABEL_SIZE / 2); - return ( + style = { [ styles.expandedLabelContainer, { opacity: this.state.opacityAnimation } ] }> - + style = { [ styles.expandedLabelTextContainer, + { backgroundColor: this._getColor() || DEFAULT_COLOR } ] }> { this._getLabel() } diff --git a/react/features/base/label/components/CircularLabel.native.js b/react/features/base/label/components/Label.native.js similarity index 84% rename from react/features/base/label/components/CircularLabel.native.js rename to react/features/base/label/components/Label.native.js index 5e13b040f..ce2fe1519 100644 --- a/react/features/base/label/components/CircularLabel.native.js +++ b/react/features/base/label/components/Label.native.js @@ -5,9 +5,9 @@ import { Animated, Text } from 'react-native'; import Icon from '../../icons/components/Icon'; import { combineStyles, type StyleType } from '../../styles'; -import AbstractCircularLabel, { +import AbstractLabel, { type Props as AbstractProps -} from './AbstractCircularLabel'; +} from './AbstractLabel'; import styles from './styles'; /** @@ -48,14 +48,14 @@ type State = { * Renders a circular indicator to be used for status icons, such as recording * on, audio-only conference, video quality and similar. */ -export default class CircularLabel extends AbstractCircularLabel { +export default class Label extends AbstractLabel { /** * A reference to the started animation of this label. */ animationReference: Object; /** - * Instantiates a new instance of {@code CircularLabel}. + * Instantiates a new instance of {@code Label}. * * @inheritdoc */ @@ -91,7 +91,7 @@ export default class CircularLabel extends AbstractCircularLabel { * @inheritdoc */ render() { - const { icon, label, status, style } = this.props; + const { icon, text, status, style } = this.props; let extraStyle = null; @@ -106,24 +106,18 @@ export default class CircularLabel extends AbstractCircularLabel { break; } - const labelComponent = icon - ? ( - - ) : ( - - { label } - - ); - return ( - { labelComponent } + { icon && } + { text && + { text } + } ); } diff --git a/react/features/base/label/components/Label.web.js b/react/features/base/label/components/Label.web.js new file mode 100644 index 000000000..f7377778e --- /dev/null +++ b/react/features/base/label/components/Label.web.js @@ -0,0 +1,57 @@ +// @flow + +import React from 'react'; + +import Icon from '../../icons/components/Icon'; + +import AbstractLabel, { + type Props as AbstractProps +} from './AbstractLabel'; + +type Props = AbstractProps & { + + /** + * Additional CSS class names to add to the root of {@code Label}. + */ + className: string, + + /** + * HTML ID attribute to add to the root of {@code Label}. + */ + id: string + +}; + +/** + * React Component for showing short text in a circle. + * + * @extends Component + */ +export default class Label extends AbstractLabel { + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + */ + render() { + const { + className, + icon, + id, + text + } = this.props; + + const labelClassName = icon ? 'label-text-with-icon' : ''; + + return ( +
+ { icon && } + { text && {text} } +
+ ); + } +} diff --git a/react/features/base/label/components/index.js b/react/features/base/label/components/index.js index d80c17eb2..387c352cb 100644 --- a/react/features/base/label/components/index.js +++ b/react/features/base/label/components/index.js @@ -1,2 +1,2 @@ -export { default as CircularLabel } from './CircularLabel'; +export { default as Label } from './Label'; export { default as ExpandedLabel } from './ExpandedLabel'; diff --git a/react/features/base/label/components/styles.js b/react/features/base/label/components/styles.js index 7d2a8b950..30504c0f8 100644 --- a/react/features/base/label/components/styles.js +++ b/react/features/base/label/components/styles.js @@ -1,76 +1,65 @@ // @flow -import { BoxModel, ColorPalette } from '../../styles'; +import { ColorPalette } from '../../styles'; /** * The default color of the {@code Label} and {@code ExpandedLabel}. */ -export const DEFAULT_COLOR = '#808080'; +export const DEFAULT_COLOR = '#36383C'; /** * Margin of the {@Label} - to be reused when rendering the * {@code ExpandedLabel}. */ -export const LABEL_MARGIN = 5; +export const LABEL_MARGIN = 8; /** * Size of the {@Label} - to be reused when rendering the * {@code ExpandedLabel}. */ -export const LABEL_SIZE = 36; +export const LABEL_SIZE = 28; /** * The styles of the native base/label feature. */ export default { - - expandedLabelArrow: { - backgroundColor: ColorPalette.blue, - height: 15, - transform: [ { rotate: '45deg' }, { translateX: 10 } ], - width: 15 + expandedLabelContainer: { + position: 'absolute', + left: 0, + right: 0, + top: 36, + flexDirection: 'row', + justifyContent: 'center' }, - expandedLabelContainer: { - backgroundColor: ColorPalette.blue, - borderColor: ColorPalette.blue, - borderRadius: 6, - marginHorizontal: BoxModel.margin, - padding: BoxModel.padding + expandedLabelTextContainer: { + borderRadius: 3, + paddingHorizontal: LABEL_MARGIN, + paddingVertical: LABEL_MARGIN / 2 }, expandedLabelText: { color: ColorPalette.white }, - expandedLabelWrapper: { - alignItems: 'flex-end', - flexDirection: 'column' - }, - /** * The outermost view. */ - indicatorContainer: { - alignItems: 'center', + labelContainer: { + alignItems: 'space-between', backgroundColor: DEFAULT_COLOR, - borderRadius: LABEL_SIZE / 2, - borderWidth: 0, + borderRadius: 3, flex: 0, height: LABEL_SIZE, justifyContent: 'center', - marginHorizontal: LABEL_MARGIN, - opacity: 0.6, - width: LABEL_SIZE + marginLeft: LABEL_MARGIN, + marginBottom: LABEL_MARGIN, + paddingHorizontal: 8 }, - indicatorIcon: { - fontSize: 24 - }, - - indicatorText: { + labelText: { color: ColorPalette.white, - fontSize: 10 + fontSize: 12 }, labelOff: { diff --git a/react/features/conference/components/AbstractLabels.js b/react/features/conference/components/AbstractLabels.js deleted file mode 100644 index e3da0193c..000000000 --- a/react/features/conference/components/AbstractLabels.js +++ /dev/null @@ -1,130 +0,0 @@ -// @flow - -import React, { Component } from 'react'; - -import { E2EELabel } from '../../e2ee'; -import { isFilmstripVisible } from '../../filmstrip'; -import { LocalRecordingLabel } from '../../local-recording'; -import { RecordingLabel } from '../../recording'; -import { TranscribingLabel } from '../../transcribing'; -import { shouldDisplayTileView } from '../../video-layout'; -import { VideoQualityLabel } from '../../video-quality'; - -import { InsecureRoomNameLabel } from '.'; - -/** - * The type of the React {@code Component} props of {@link AbstractLabels}. - */ -export type Props = { - - /** - * Whether the filmstrip is displayed with remote videos. Used to determine - * display classes to set. - */ - _filmstripVisible: boolean, - - /** - * Whether the video quality label should be displayed. - */ - _showVideoQualityLabel: boolean -}; - -/** - * A container to hold video status labels, including recording status and - * current large video quality. - * - * @extends Component - */ -export default class AbstractLabels extends Component { - /** - * Renders the {@code E2EELabel}. - * - * @protected - * @returns {React$Element} - */ - _renderE2EELabel() { - return ( - - ); - } - - /** - * Renders the {@code LocalRecordingLabel}. - * - * @protected - * @returns {React$Element} - */ - _renderLocalRecordingLabel() { - return ( - - ); - } - - /** - * Renders the {@code RecordingLabel} that is platform independent. - * - * @param {string} mode - The recording mode that this label is rendered - * for. - * @protected - * @returns {React$Element} - */ - _renderRecordingLabel(mode: string) { - return ( - - ); - } - - /** - * Renders the {@code TranscribingLabel}. - * - * @protected - * @returns {React$Element} - */ - _renderTranscribingLabel() { - return ( - - ); - } - - /** - * Renders the {@code InsecureRoomNameLabel}. - * - * @protected - * @returns {React$Element} - */ - _renderInsecureRoomNameLabel() { - return ( - - ); - } - - /** - * Renders the {@code VideoQualityLabel} that is platform independent. - * - * @protected - * @returns {React$Element} - */ - _renderVideoQualityLabel() { - return ( - - ); - } -} - -/** - * Maps (parts of) the redux state to the associated props of the {@link Labels} - * {@code Component}. - * - * @param {Object} state - The redux state. - * @private - * @returns {{ - * _filmstripVisible: boolean, - * _showVideoQualityLabel: boolean - * }} - */ -export function _abstractMapStateToProps(state: Object) { - return { - _filmstripVisible: isFilmstripVisible(state), - _showVideoQualityLabel: !shouldDisplayTileView(state) - }; -} diff --git a/react/features/conference/components/native/InsecureRoomNameLabel.js b/react/features/conference/components/native/InsecureRoomNameLabel.js index da1915e5e..ad4061059 100644 --- a/react/features/conference/components/native/InsecureRoomNameLabel.js +++ b/react/features/conference/components/native/InsecureRoomNameLabel.js @@ -3,7 +3,7 @@ import React from 'react'; import { IconWarning } from '../../../base/icons'; -import { CircularLabel } from '../../../base/label'; +import { Label } from '../../../base/label'; import { connect } from '../../../base/redux'; import AbstractInsecureRoomNameLabel, { _mapStateToProps } from '../AbstractInsecureRoomNameLabel'; @@ -20,7 +20,7 @@ class InsecureRoomNameLabel extends AbstractInsecureRoomNameLabel { */ _render() { return ( - ); diff --git a/react/features/conference/components/native/Labels.js b/react/features/conference/components/native/Labels.js index 6020836d6..abe49c532 100644 --- a/react/features/conference/components/native/Labels.js +++ b/react/features/conference/components/native/Labels.js @@ -1,80 +1,22 @@ // @flow -import React from 'react'; +import React, { Component } from 'react'; import { TouchableOpacity, View } from 'react-native'; import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet'; -import { connect } from '../../../base/redux'; -import { ASPECT_RATIO_WIDE } from '../../../base/responsive-ui/constants'; -import { - RecordingExpandedLabel -} from '../../../recording'; -import { TranscribingExpandedLabel } from '../../../transcribing'; -import { shouldDisplayTileView } from '../../../video-layout'; -import { VideoQualityExpandedLabel } from '../../../video-quality'; -import { shouldDisplayNotifications } from '../../functions'; -import AbstractLabels, { - _abstractMapStateToProps, - type Props as AbstractLabelsProps -} from '../AbstractLabels'; +import { RecordingLabel, RecordingExpandedLabel } from '../../../recording'; +import { TranscribingExpandedLabel, TranscribingLabel } from '../../../transcribing'; +import { VideoQualityExpandedLabel, VideoQualityLabel } from '../../../video-quality'; import InsecureRoomNameExpandedLabel from './InsecureRoomNameExpandedLabel'; import styles from './styles'; -/** - * The type of the React {@code Component} props of {@link Labels}. - */ -type Props = AbstractLabelsProps & { +import { InsecureRoomNameLabel } from '.'; - /** - * Application's aspect ratio. - */ - _aspectRatio: Symbol, - - /** - * True if tile view is being diaplyed, false otherwise. - */ - _shouldDisplayTileView: boolean, - - /** - * True if the labels should be visible, false otherwise. - */ - _visible: boolean, - - /** - * Function to translate i18n labels. - */ - t: Function -}; +type Props = {} type State = { - /** - * Layout object of the outermost container. For structure please see: - * https://facebook.github.io/react-native/docs/view#onlayout - */ - containerLayout: ?Object, - - /** - * Layout objects of the individual labels. This data type contains the same - * structure as the layout is defined here: - * https://facebook.github.io/react-native/docs/view#onlayout - * but keyed with the ID of the label its layout it contains. E.g. - * - * { - * transcribing: { - * { layout: { x, y, width, height } } - * }, - * ... - * } - */ - labelLayouts: Object, - - /** - * Position of the label to render the {@code ExpandedLabel} to. - */ - parentPosition: ?number, - /** * String to show which {@code ExpandedLabel} to be shown. (Equals to the * label IDs below.) @@ -88,26 +30,33 @@ const LABEL_ID_STREAMING = 'streaming'; const LABEL_ID_TRANSCRIBING = 'transcribing'; const LABEL_ID_INSECURE_ROOM_NAME = 'insecure-room-name'; +const LabelHitSlop = { + top: 10, + bottom: 10, + left: 0, + right: 0 +}; + /** * The {@code ExpandedLabel} components to be rendered for the individual * {@code Label}s. */ const EXPANDED_LABELS = { - quality: VideoQualityExpandedLabel, - recording: { + [LABEL_ID_QUALITY]: VideoQualityExpandedLabel, + [LABEL_ID_RECORDING]: { component: RecordingExpandedLabel, props: { mode: JitsiRecordingConstants.mode.FILE } }, - streaming: { + [LABEL_ID_STREAMING]: { component: RecordingExpandedLabel, props: { mode: JitsiRecordingConstants.mode.STREAM } }, - transcribing: TranscribingExpandedLabel, - 'insecure-room-name': InsecureRoomNameExpandedLabel + [LABEL_ID_TRANSCRIBING]: TranscribingExpandedLabel, + [LABEL_ID_INSECURE_ROOM_NAME]: InsecureRoomNameExpandedLabel }; /** @@ -118,7 +67,7 @@ const EXPANDED_LABEL_TIMEOUT = 5000; /** * A container that renders the conference indicators, if any. */ -class Labels extends AbstractLabels { +class Labels extends Component { /** * Timeout for the expanded labels to disappear. */ @@ -131,15 +80,9 @@ class Labels extends AbstractLabels { */ constructor(props: Props) { super(props); - this.state = { - containerLayout: undefined, - labelLayouts: {}, - parentPosition: undefined, visibleExpandedLabel: undefined }; - - this._onTopViewLayout = this._onTopViewLayout.bind(this); } /** @@ -157,110 +100,49 @@ class Labels extends AbstractLabels { * @inheritdoc */ render() { - const { _aspectRatio, _filmstripVisible, _shouldDisplayTileView, _visible } = this.props; - - if (!_visible) { - return null; - } - - const wide = _aspectRatio === ASPECT_RATIO_WIDE; - return ( - - - - { - this._renderRecordingLabel( - JitsiRecordingConstants.mode.FILE) - } - - - { - this._renderRecordingLabel( - JitsiRecordingConstants.mode.STREAM) - } - - - { - this._renderTranscribingLabel() - } - - - { - this._renderInsecureRoomNameLabel() - } - - - { this._renderVideoQualityLabel() } - + <> + + + + + + + + + + + + + + + + + + - - { - this._renderExpandedLabel() - } - - + { this._renderExpandedLabel() } + ); } - /** - * Creates a function to be invoked when the onLayout of the touchables are - * triggered. - * - * @param {string} label - The identifier of the label that's onLayout is - * triggered. - * @returns {Function} - */ - _createOnLayout(label) { - return ({ nativeEvent: { layout } }) => { - const { labelLayouts } = this.state; - const updatedLayout = {}; - - updatedLayout[label] = layout; - - this.setState({ - labelLayouts: { - ...labelLayouts, - ...updatedLayout - } - }); - }; - } - /** * Creates a function to be invoked when the onPress of the touchables are * triggered. @@ -271,102 +153,47 @@ class Labels extends AbstractLabels { */ _createOnPress(label) { return () => { - const { - containerLayout, - labelLayouts - } = this.state; let { visibleExpandedLabel } = this.state; - if (containerLayout) { - const labelLayout = labelLayouts[label]; - - // This calculation has to be changed if the labels are not - // positioned right anymore. - const right = containerLayout.width - labelLayout.x; + visibleExpandedLabel + = visibleExpandedLabel === label ? undefined : label; + clearTimeout(this.expandedLabelTimeout); + this.setState({ visibleExpandedLabel - = visibleExpandedLabel === label ? undefined : label; + }); - clearTimeout(this.expandedLabelTimeout); - this.setState({ - parentPosition: right, - visibleExpandedLabel - }); - - if (visibleExpandedLabel) { - this.expandedLabelTimeout = setTimeout(() => { - this.setState({ - visibleExpandedLabel: undefined - }); - }, EXPANDED_LABEL_TIMEOUT); - } + if (visibleExpandedLabel) { + this.expandedLabelTimeout = setTimeout(() => { + this.setState({ + visibleExpandedLabel: undefined + }); + }, EXPANDED_LABEL_TIMEOUT); } }; } - _onTopViewLayout: Object => void - - /** - * Invoked when the View containing the {@code Label}s is laid out. - * - * @param {Object} layout - The native layout object. - * @returns {void} - */ - _onTopViewLayout({ nativeEvent: { layout } }) { - this.setState({ - containerLayout: layout - }); - } - /** * Rendes the expanded (explaining) label for the label that was touched. * * @returns {React$Element} */ _renderExpandedLabel() { - const { parentPosition, visibleExpandedLabel } = this.state; + const { visibleExpandedLabel } = this.state; if (visibleExpandedLabel) { const expandedLabel = EXPANDED_LABELS[visibleExpandedLabel]; if (expandedLabel) { - const component = expandedLabel.component || expandedLabel; - const expandedLabelProps = expandedLabel.props || {}; + const LabelComponent = expandedLabel.component || expandedLabel; + const { props } = expandedLabel || {}; - return React.createElement(component, { - ...expandedLabelProps, - parentPosition - }); + return ; } } return null; } - - _renderRecordingLabel: string => React$Element; - - _renderTranscribingLabel: () => React$Element; - - _renderInsecureRoomNameLabel: () => React$Element; - - _renderVideoQualityLabel: () => React$Element; } -/** - * Maps (parts of) the redux state to the associated - * {@code Labels}'s props. - * - * @param {Object} state - The redux state. - * @private - * @returns {Props} - */ -function _mapStateToProps(state) { - return { - ..._abstractMapStateToProps(state), - _aspectRatio: state['features/base/responsive-ui'].aspectRatio, - _shouldDisplayTileView: shouldDisplayTileView(state), - _visible: !shouldDisplayNotifications(state) - }; -} - -export default connect(_mapStateToProps)(Labels); +export default Labels; diff --git a/react/features/conference/components/native/NavigationBar.js b/react/features/conference/components/native/NavigationBar.js index 0ac5d5886..e8329566e 100644 --- a/react/features/conference/components/native/NavigationBar.js +++ b/react/features/conference/components/native/NavigationBar.js @@ -57,12 +57,9 @@ const NavigationBar = (props: Props) => { styles = { styles.navBarButton } /> - - { - props._meetingNameEnabled + style = { styles.roomNameWrapper }> + { + props._meetingNameEnabled && { { props._meetingName } - } - { - props._conferenceTimerEnabled + } + { + props._conferenceTimerEnabled && - } - + } diff --git a/react/features/conference/components/native/styles.js b/react/features/conference/components/native/styles.js index afe4a7152..5a90489db 100644 --- a/react/features/conference/components/native/styles.js +++ b/react/features/conference/components/native/styles.js @@ -1,6 +1,5 @@ import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme'; import { BoxModel, ColorPalette, fixAndroidViewClipping } from '../../../base/styles'; -import { FILMSTRIP_SIZE } from '../../../filmstrip'; export const INSECURE_ROOM_NAME_LABEL_COLOR = ColorPalette.warning; @@ -27,23 +26,9 @@ export default { */ indicatorContainer: { flex: 1, - flexDirection: 'row', - justifyContent: 'flex-end' + flexDirection: 'row' }, - /** - * Indicator container for wide aspect ratio. - */ - indicatorContainerWide: { - marginRight: FILMSTRIP_SIZE + BoxModel.margin - }, - - labelWrapper: { - flexDirection: 'column', - position: 'absolute', - right: 0, - top: 0 - }, lonelyButton: { alignItems: 'center', @@ -77,14 +62,6 @@ export default { underlayColor: 'transparent' }, - navBarContainer: { - flexDirection: 'column', - left: 0, - position: 'absolute', - right: 0, - top: 0 - }, - navBarSafeView: { left: 0, position: 'absolute', @@ -97,14 +74,15 @@ export default { flex: 1, flexDirection: 'row', height: 44, - justifyContent: 'space-between', + justifyContent: 'center', paddingHorizontal: 14 }, roomTimer: { color: ColorPalette.white, fontSize: 12, - fontWeight: '400' + fontWeight: '400', + paddingHorizontal: 8 }, roomTimerView: { @@ -113,7 +91,7 @@ export default { borderTopRightRadius: 3, height: 28, justifyContent: 'center', - paddingHorizontal: 10 + minWidth: 50 }, roomName: { @@ -126,21 +104,13 @@ export default { backgroundColor: 'rgba(0,0,0,0.6)', borderBottomLeftRadius: 3, borderTopLeftRadius: 3, + flexShrink: 1, height: 28, justifyContent: 'center', paddingHorizontal: 10 }, - roomNameContainer: { - alignItems: 'center', - left: 0, - paddingHorizontal: 48, - position: 'absolute', - right: 0 - }, - roomNameWrapper: { - alignItems: 'center', flexDirection: 'row' }, diff --git a/react/features/conference/components/web/Conference.js b/react/features/conference/components/web/Conference.js index c01561fbb..8aaba811c 100644 --- a/react/features/conference/components/web/Conference.js +++ b/react/features/conference/components/web/Conference.js @@ -25,7 +25,7 @@ import { } from '../AbstractConference'; import type { AbstractProps } from '../AbstractConference'; -import Labels from './Labels'; +import ConferenceInfo from './ConferenceInfo'; import { default as Notice } from './Notice'; declare var APP: Object; @@ -67,11 +67,6 @@ type Props = AbstractProps & { */ _backgroundAlpha: number, - /** - * Whether the local participant is recording the conference. - */ - _iAmRecorder: boolean, - /** * Returns true if the 'lobby screen' is visible. */ @@ -183,12 +178,10 @@ class Conference extends AbstractConference { */ render() { const { - _iAmRecorder, _isLobbyScreenVisible, _layoutClassName, _showPrejoin } = this.props; - const hideLabels = _iAmRecorder; return (
{ id = 'videoconference_page' onMouseMove = { this._onShowToolbar } ref = { this._setBackground }> +
- { hideLabels || }
{ _showPrejoin || _isLobbyScreenVisible || } @@ -302,7 +295,6 @@ class Conference extends AbstractConference { function _mapStateToProps(state) { return { ...abstractMapStateToProps(state), - _iAmRecorder: state['features/base/config'].iAmRecorder, _backgroundAlpha: state['features/base/config'].backgroundAlpha, _isLobbyScreenVisible: state['features/base/dialog']?.component === LobbyScreen, _layoutClassName: LAYOUT_CLASSNAMES[getCurrentLayout(state)], diff --git a/react/features/conference/components/web/ConferenceInfo.js b/react/features/conference/components/web/ConferenceInfo.js new file mode 100644 index 000000000..78a617559 --- /dev/null +++ b/react/features/conference/components/web/ConferenceInfo.js @@ -0,0 +1,125 @@ +/* @flow */ + +import React from 'react'; + +import { getConferenceName } from '../../../base/conference/functions'; +import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet'; +import { getParticipantCount } from '../../../base/participants/functions'; +import { connect } from '../../../base/redux'; +import { E2EELabel } from '../../../e2ee'; +import { LocalRecordingLabel } from '../../../local-recording'; +import { RecordingLabel } from '../../../recording'; +import { isToolboxVisible } from '../../../toolbox/functions.web'; +import { TranscribingLabel } from '../../../transcribing'; +import { VideoQualityLabel } from '../../../video-quality'; +import ConferenceTimer from '../ConferenceTimer'; + +import ParticipantsCount from './ParticipantsCount'; + +import { InsecureRoomNameLabel } from '.'; + +/** + * The type of the React {@code Component} props of {@link Subject}. + */ +type Props = { + + /** + * Whether the info should span across the full width. + */ + _fullWidth: boolean, + + /** + * Whether the conference name and timer should be displayed or not. + */ + _hideConferenceNameAndTimer: boolean, + + /** + * Whether the conference timer should be shown or not. + */ + _hideConferenceTimer: boolean, + + /** + * Whether the participant count should be shown or not. + */ + _showParticipantCount: boolean, + + /** + * The subject or the of the conference. + * Falls back to conference name. + */ + _subject: string, + + /** + * Indicates whether the component should be visible or not. + */ + _visible: boolean +}; + +/** + * The upper band of the meeing containing the conference name, timer and labels. + * + * @param {Object} props - The props of the component. + * @returns {React$None} + */ +function ConferenceInfo(props: Props) { + const { + _hideConferenceNameAndTimer, + _hideConferenceTimer, + _showParticipantCount, + _subject, + _fullWidth, + _visible + } = props; + + return ( +
+
+ { + !_hideConferenceNameAndTimer + &&
+ { _subject && { _subject }} + { !_hideConferenceTimer && } +
+ } + { _showParticipantCount && } + + + + + + + +
+
+ ); +} + +/** + * Maps (parts of) the Redux state to the associated + * {@code Subject}'s props. + * + * @param {Object} state - The Redux state. + * @private + * @returns {{ + * _hideConferenceTimer: boolean, + * _showParticipantCount: boolean, + * _subject: string, + * _visible: boolean + * }} + */ +function _mapStateToProps(state) { + const participantCount = getParticipantCount(state); + const { hideConferenceTimer, hideConferenceSubject, hideParticipantsStats } = state['features/base/config']; + const { clientWidth } = state['features/base/responsive-ui']; + + return { + _hideConferenceNameAndTimer: clientWidth < 300, + _hideConferenceTimer: Boolean(hideConferenceTimer), + _fullWidth: state['features/video-layout'].tileViewEnabled, + _showParticipantCount: participantCount > 2 && !hideParticipantsStats, + _subject: hideConferenceSubject ? '' : getConferenceName(state), + _visible: isToolboxVisible(state) + }; +} + +export default connect(_mapStateToProps)(ConferenceInfo); diff --git a/react/features/conference/components/web/ConferenceTimerDisplay.js b/react/features/conference/components/web/ConferenceTimerDisplay.js index c4d8e85e5..86965c112 100644 --- a/react/features/conference/components/web/ConferenceTimerDisplay.js +++ b/react/features/conference/components/web/ConferenceTimerDisplay.js @@ -14,6 +14,6 @@ import React from 'react'; */ export default function renderConferenceTimer(timerValue: string, textStyle: Object) { return ( - { timerValue } + { timerValue } ); } diff --git a/react/features/conference/components/web/InsecureRoomNameLabel.js b/react/features/conference/components/web/InsecureRoomNameLabel.js index 59a83cfc9..136d1fefe 100644 --- a/react/features/conference/components/web/InsecureRoomNameLabel.js +++ b/react/features/conference/components/web/InsecureRoomNameLabel.js @@ -5,7 +5,7 @@ import React from 'react'; import { translate } from '../../../base/i18n'; import { IconWarning } from '../../../base/icons'; -import { CircularLabel } from '../../../base/label'; +import { Label } from '../../../base/label'; import { connect } from '../../../base/redux'; import AbstractInsecureRoomNameLabel, { _mapStateToProps } from '../AbstractInsecureRoomNameLabel'; @@ -22,9 +22,9 @@ class InsecureRoomNameLabel extends AbstractInsecureRoomNameLabel { return ( - + ); diff --git a/react/features/conference/components/web/Labels.js b/react/features/conference/components/web/Labels.js deleted file mode 100644 index 6cb6dc5db..000000000 --- a/react/features/conference/components/web/Labels.js +++ /dev/null @@ -1,119 +0,0 @@ -// @flow - -import React from 'react'; - -import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet'; -import { connect } from '../../../base/redux'; -import AbstractLabels, { - _abstractMapStateToProps as _mapStateToProps, - type Props -} from '../AbstractLabels'; - -declare var interfaceConfig: Object; - -/** - * The type of the React {@code Component} state of {@link Labels}. - */ -type State = { - - /** - * Whether or not the filmstrip was not visible but has transitioned in the - * latest component update to visible. This boolean is used to set a class - * for position animations. - * - * @type {boolean} - */ - filmstripBecomingVisible: boolean -}; - -/** - * A container to hold video status labels, including recording status and - * current large video quality. - * - * @extends Component - */ -class Labels extends AbstractLabels { - /** - * Updates the state for whether or not the filmstrip is transitioning to - * a displayed state. - * - * @inheritdoc - */ - static getDerivedStateFromProps(props: Props, prevState: State) { - return { - filmstripBecomingVisible: !prevState.filmstripBecomingVisible && props._filmstripVisible - }; - } - - /** - * Initializes a new {@code Labels} instance. - * - * @param {Object} props - The read-only properties with which the new - * instance is to be initialized. - */ - constructor(props: Props) { - super(props); - - this.state = { - filmstripBecomingVisible: false - }; - } - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - const { _filmstripVisible } = this.props; - const { filmstripBecomingVisible } = this.state; - const { VIDEO_QUALITY_LABEL_DISABLED } = interfaceConfig; - const className = `large-video-labels ${ - filmstripBecomingVisible ? 'opening' : ''} ${ - _filmstripVisible ? 'with-filmstrip' : 'without-filmstrip'}`; - - return ( -
- { - this._renderE2EELabel() - } - { - this._renderRecordingLabel( - JitsiRecordingConstants.mode.FILE) - } - { - this._renderRecordingLabel( - JitsiRecordingConstants.mode.STREAM) - } - { - this._renderLocalRecordingLabel() - } - { - this._renderTranscribingLabel() - } - { - this.props._showVideoQualityLabel && !VIDEO_QUALITY_LABEL_DISABLED - && this._renderVideoQualityLabel() - } - { - this._renderInsecureRoomNameLabel() - } -
- ); - } - - _renderE2EELabel: () => React$Element<*>; - - _renderLocalRecordingLabel: () => React$Element<*>; - - _renderRecordingLabel: string => React$Element<*>; - - _renderTranscribingLabel: () => React$Element<*>; - - _renderInsecureRoomNameLabel: () => React$Element; - - _renderVideoQualityLabel: () => React$Element<*>; -} - -export default connect(_mapStateToProps)(Labels); diff --git a/react/features/conference/components/web/ParticipantsCount.js b/react/features/conference/components/web/ParticipantsCount.js index 3b5464cb5..bc4aaf424 100644 --- a/react/features/conference/components/web/ParticipantsCount.js +++ b/react/features/conference/components/web/ParticipantsCount.js @@ -4,10 +4,13 @@ import React, { PureComponent } from 'react'; import type { Dispatch } from 'redux'; import { openDialog } from '../../../base/dialog'; +import { IconUserGroups } from '../../../base/icons'; +import { Label } from '../../../base/label'; import { getParticipantCount } from '../../../base/participants'; import { connect } from '../../../base/redux'; import { SpeakerStats } from '../../../speaker-stats'; + /** * The type of the React {@code Component} props of {@link ParticipantsCount}. */ @@ -73,10 +76,10 @@ class ParticipantsCount extends PureComponent {
- - {this.props.count} - - +
); } diff --git a/react/features/conference/components/web/Subject.js b/react/features/conference/components/web/Subject.js deleted file mode 100644 index 62ad2db3f..000000000 --- a/react/features/conference/components/web/Subject.js +++ /dev/null @@ -1,103 +0,0 @@ -/* @flow */ - -import React, { Component } from 'react'; - -import { getConferenceName } from '../../../base/conference/functions'; -import { getParticipantCount } from '../../../base/participants/functions'; -import { connect } from '../../../base/redux'; -import { isToolboxVisible } from '../../../toolbox/functions.web'; -import ConferenceTimer from '../ConferenceTimer'; - -import ParticipantsCount from './ParticipantsCount'; - -/** - * The type of the React {@code Component} props of {@link Subject}. - */ -type Props = { - - /** - * Whether the conference timer should be shown or not. - */ - _hideConferenceTimer: Boolean, - - /** - * Whether the participant count should be shown or not. - */ - _showParticipantCount: boolean, - - /** - * Whether the conference subject should be shown or not. - */ - _showSubject: boolean, - - /** - * The subject or the of the conference. - * Falls back to conference name. - */ - _subject: string, - - /** - * Indicates whether the component should be visible or not. - */ - _visible: boolean -}; - -/** - * Subject react component. - * - * @class Subject - */ -class Subject extends Component { - - /** - * Implements React's {@link Component#render()}. - * - * @inheritdoc - * @returns {ReactElement} - */ - render() { - const { _hideConferenceTimer, _showParticipantCount, _showSubject, _subject, _visible } = this.props; - let className = `subject ${_visible ? 'visible' : ''}`; - - if (!_hideConferenceTimer || _showParticipantCount || _showSubject) { - className += ' gradient'; - } - - return ( -
- { _showSubject && { _subject }} - { _showParticipantCount && } - { !_hideConferenceTimer && } -
- ); - } -} - -/** - * Maps (parts of) the Redux state to the associated - * {@code Subject}'s props. - * - * @param {Object} state - The Redux state. - * @private - * @returns {{ - * _hideConferenceTimer: boolean, - * _showParticipantCount: boolean, - * _showSubject: boolean, - * _subject: string, - * _visible: boolean - * }} - */ -function _mapStateToProps(state) { - const participantCount = getParticipantCount(state); - const { hideConferenceTimer, hideConferenceSubject, hideParticipantsStats } = state['features/base/config']; - - return { - _hideConferenceTimer: Boolean(hideConferenceTimer), - _showParticipantCount: participantCount > 2 && !hideParticipantsStats, - _showSubject: !hideConferenceSubject, - _subject: getConferenceName(state), - _visible: isToolboxVisible(state) - }; -} - -export default connect(_mapStateToProps)(Subject); diff --git a/react/features/conference/components/web/index.js b/react/features/conference/components/web/index.js index 360e48e5d..94b05b487 100644 --- a/react/features/conference/components/web/index.js +++ b/react/features/conference/components/web/index.js @@ -4,4 +4,4 @@ export { default as Conference } from './Conference'; export { default as renderConferenceTimer } from './ConferenceTimerDisplay'; export { default as InsecureRoomNameLabel } from './InsecureRoomNameLabel'; export { default as InviteMore } from './InviteMore'; -export { default as Subject } from './Subject'; +export { default as ConferenceInfo } from './ConferenceInfo'; diff --git a/react/features/e2ee/components/E2EELabel.js b/react/features/e2ee/components/E2EELabel.js index 077a90e65..ba61c60fa 100644 --- a/react/features/e2ee/components/E2EELabel.js +++ b/react/features/e2ee/components/E2EELabel.js @@ -4,7 +4,7 @@ import React, { Component } from 'react'; import { translate } from '../../base/i18n'; import { IconE2EE } from '../../base/icons'; -import { CircularLabel } from '../../base/label'; +import { Label } from '../../base/label'; import { connect } from '../../base/redux'; import { Tooltip } from '../../base/tooltip'; @@ -32,9 +32,9 @@ class E2EELabel extends Component { return ( - + ); diff --git a/react/features/large-video/components/LargeVideo.web.js b/react/features/large-video/components/LargeVideo.web.js index 85d1d1d0e..a50cf72a6 100644 --- a/react/features/large-video/components/LargeVideo.web.js +++ b/react/features/large-video/components/LargeVideo.web.js @@ -5,7 +5,6 @@ import React, { Component } from 'react'; import { Watermarks } from '../../base/react'; import { connect } from '../../base/redux'; import { setColorAlpha } from '../../base/util'; -import { Subject } from '../../conference'; import { fetchCustomBrandingData } from '../../dynamic-branding'; import { Captions } from '../../subtitles/'; @@ -76,7 +75,6 @@ class LargeVideo extends Component { className = { className } id = 'largeVideoContainer' style = { style }> -
diff --git a/react/features/local-recording/components/LocalRecordingLabel.web.js b/react/features/local-recording/components/LocalRecordingLabel.web.js index 0cd7cc7b7..0316481c4 100644 --- a/react/features/local-recording/components/LocalRecordingLabel.web.js +++ b/react/features/local-recording/components/LocalRecordingLabel.web.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import { translate } from '../../base/i18n/index'; -import { CircularLabel } from '../../base/label/index'; +import { Label } from '../../base/label/index'; import { connect } from '../../base/redux'; import { Tooltip } from '../../base/tooltip'; @@ -45,10 +45,10 @@ class LocalRecordingLabel extends Component { return ( - + ); } diff --git a/react/features/recording/components/native/RecordingLabel.js b/react/features/recording/components/native/RecordingLabel.js index 68672ad0e..1c9f38a5f 100644 --- a/react/features/recording/components/native/RecordingLabel.js +++ b/react/features/recording/components/native/RecordingLabel.js @@ -3,7 +3,7 @@ import React from 'react'; import { translate } from '../../../base/i18n'; -import { CircularLabel } from '../../../base/label'; +import { Label } from '../../../base/label'; import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet'; import { connect } from '../../../base/redux'; import AbstractRecordingLabel, { @@ -52,10 +52,10 @@ class RecordingLabel extends AbstractRecordingLabel { } return ( - + style = { indicatorStyle } + text = { this.props.t(this._getLabelKey()) } /> ); } diff --git a/react/features/recording/components/web/RecordingLabel.js b/react/features/recording/components/web/RecordingLabel.js index 362da391c..eb7c9ecbb 100644 --- a/react/features/recording/components/web/RecordingLabel.js +++ b/react/features/recording/components/web/RecordingLabel.js @@ -3,7 +3,7 @@ import React from 'react'; import { translate } from '../../../base/i18n'; -import { CircularLabel } from '../../../base/label'; +import { Label } from '../../../base/label'; import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet'; import { connect } from '../../../base/redux'; import AbstractRecordingLabel, { @@ -31,9 +31,9 @@ class RecordingLabel extends AbstractRecordingLabel { return (
- + text = { this.props.t(this._getLabelKey()) } />
); } diff --git a/react/features/transcribing/components/TranscribingLabel.native.js b/react/features/transcribing/components/TranscribingLabel.native.js index 73cd73735..33cffd98f 100644 --- a/react/features/transcribing/components/TranscribingLabel.native.js +++ b/react/features/transcribing/components/TranscribingLabel.native.js @@ -3,7 +3,7 @@ import React, { Component } from 'react'; import { translate } from '../../base/i18n'; -import { CircularLabel } from '../../base/label'; +import { Label } from '../../base/label'; import { connect } from '../../base/redux'; import { _mapStateToProps, type Props } from './AbstractTranscribingLabel'; @@ -26,10 +26,7 @@ class TranscribingLabel extends Component { return null; } - return ( - - ); + return