diff --git a/react/features/large-video/components/AbstractLabels.js b/react/features/conference/components/AbstractLabels.js similarity index 100% rename from react/features/large-video/components/AbstractLabels.js rename to react/features/conference/components/AbstractLabels.js diff --git a/react/features/conference/components/native/Conference.js b/react/features/conference/components/native/Conference.js index 76df73d0b..eb8846efc 100644 --- a/react/features/conference/components/native/Conference.js +++ b/react/features/conference/components/native/Conference.js @@ -28,6 +28,7 @@ import { setToolboxVisible, Toolbox } from '../../../toolbox'; import { shouldDisplayTileView } from '../../../video-layout'; import DisplayNameLabel from './DisplayNameLabel'; +import Labels from './Labels'; import styles from './styles'; /** @@ -282,6 +283,8 @@ class Conference extends Component { pointerEvents = 'box-none' style = { styles.toolboxAndFilmstripContainer }> + + diff --git a/react/features/large-video/components/Labels.native.js b/react/features/conference/components/native/Labels.js similarity index 97% rename from react/features/large-video/components/Labels.native.js rename to react/features/conference/components/native/Labels.js index d0a2bdd58..62af73ef8 100644 --- a/react/features/large-video/components/Labels.native.js +++ b/react/features/conference/components/native/Labels.js @@ -4,21 +4,21 @@ import React from 'react'; import { TouchableOpacity, View } from 'react-native'; import { connect } from 'react-redux'; -import { JitsiRecordingConstants } from '../../base/lib-jitsi-meet'; -import { - RecordingExpandedLabel -} from '../../recording'; +import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet'; import { isNarrowAspectRatio, makeAspectRatioAware -} from '../../base/responsive-ui'; -import { TranscribingExpandedLabel } from '../../transcribing'; -import { VideoQualityExpandedLabel } from '../../video-quality'; +} from '../../../base/responsive-ui'; +import { + RecordingExpandedLabel +} from '../../../recording'; +import { TranscribingExpandedLabel } from '../../../transcribing'; +import { VideoQualityExpandedLabel } from '../../../video-quality'; import AbstractLabels, { _abstractMapStateToProps, type Props as AbstractLabelsProps -} from './AbstractLabels'; +} from '../AbstractLabels'; import styles from './styles'; /** diff --git a/react/features/conference/components/native/styles.js b/react/features/conference/components/native/styles.js index 1a9da1c0b..c055c7949 100644 --- a/react/features/conference/components/native/styles.js +++ b/react/features/conference/components/native/styles.js @@ -5,6 +5,8 @@ import { fixAndroidViewClipping } from '../../../base/styles'; +import { FILMSTRIP_SIZE } from '../../../filmstrip'; + /** * The styles of the feature conference. */ @@ -32,6 +34,30 @@ export default createStyleSheet({ fontSize: 14 }, + /** + * View that contains the indicators. + */ + indicatorContainer: { + flex: 1, + flexDirection: 'row', + justifyContent: 'flex-end', + margin: BoxModel.margin + }, + + /** + * Indicator container for wide aspect ratio. + */ + indicatorContainerWide: { + marginRight: FILMSTRIP_SIZE + BoxModel.margin + }, + + labelWrapper: { + flexDirection: 'column', + position: 'absolute', + right: 0, + top: 0 + }, + /** * The style of the {@link View} which expands over the whole * {@link Conference} area and splits it between the {@link Filmstrip} and diff --git a/react/features/conference/components/web/Conference.js b/react/features/conference/components/web/Conference.js index 8d6d1920d..82a5c146d 100644 --- a/react/features/conference/components/web/Conference.js +++ b/react/features/conference/components/web/Conference.js @@ -29,6 +29,7 @@ import { import { maybeShowSuboptimalExperienceNotification } from '../../functions'; +import Labels from './Labels'; import { default as Notice } from './Notice'; declare var APP: Object; @@ -217,8 +218,9 @@ class Conference extends Component { onMouseMove = { this._onShowToolbar }>
- + + { hideVideoQualityLabel + || }
diff --git a/react/features/large-video/components/Labels.web.js b/react/features/conference/components/web/Labels.js similarity index 96% rename from react/features/large-video/components/Labels.web.js rename to react/features/conference/components/web/Labels.js index 930337c61..5f0f436c9 100644 --- a/react/features/large-video/components/Labels.web.js +++ b/react/features/conference/components/web/Labels.js @@ -3,12 +3,12 @@ import React from 'react'; import { connect } from 'react-redux'; -import { JitsiRecordingConstants } from '../../base/lib-jitsi-meet'; +import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet'; import AbstractLabels, { _abstractMapStateToProps as _mapStateToProps, type Props -} from './AbstractLabels'; +} from '../AbstractLabels'; /** * The type of the React {@code Component} state of {@link Labels}. diff --git a/react/features/large-video/components/LargeVideo.native.js b/react/features/large-video/components/LargeVideo.native.js index a801adfd7..93893cff7 100644 --- a/react/features/large-video/components/LargeVideo.native.js +++ b/react/features/large-video/components/LargeVideo.native.js @@ -6,7 +6,6 @@ import { connect } from 'react-redux'; import { ParticipantView } from '../../base/participants'; import { DimensionsDetector } from '../../base/responsive-ui'; -import Labels from './Labels'; import styles, { AVATAR_SIZE } from './styles'; /** @@ -130,7 +129,6 @@ class LargeVideo extends Component { useConnectivityInfoLabel = { useConnectivityInfoLabel } zOrder = { 0 } zoomEnabled = { true } /> - ); } diff --git a/react/features/large-video/components/LargeVideo.web.js b/react/features/large-video/components/LargeVideo.web.js index d8acd6554..04253801a 100644 --- a/react/features/large-video/components/LargeVideo.web.js +++ b/react/features/large-video/components/LargeVideo.web.js @@ -5,28 +5,15 @@ import React, { Component } from 'react'; import { Watermarks } from '../../base/react'; import { Captions } from '../../subtitles/'; -import Labels from './Labels'; - declare var interfaceConfig: Object; -/** - * The type of the React {@code Component} props of {@link LargeVideo}. - */ -type Props = { - - /** - * True if the {@code VideoQualityLabel} should not be displayed. - */ - hideVideoQualityLabel: boolean -}; - /** * Implements a React {@link Component} which represents the large video (a.k.a. * the conference participant who is on the local stage) on Web/React. * * @extends Component */ -export default class LargeVideo extends Component { +export default class LargeVideo extends Component<{}> { /** * Implements React's {@link Component#render()}. * @@ -74,8 +61,6 @@ export default class LargeVideo extends Component { { interfaceConfig.DISABLE_TRANSCRIPTION_SUBTITLES || } - { this.props.hideVideoQualityLabel - || } ); } diff --git a/react/features/large-video/components/styles.js b/react/features/large-video/components/styles.js index 7f26a45b8..eaf040eb5 100644 --- a/react/features/large-video/components/styles.js +++ b/react/features/large-video/components/styles.js @@ -1,7 +1,6 @@ import { StyleSheet } from 'react-native'; -import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles'; -import { FILMSTRIP_SIZE } from '../../filmstrip'; +import { ColorPalette, createStyleSheet } from '../../base/styles'; /** * Size for the Avatar. @@ -10,34 +9,6 @@ export const AVATAR_SIZE = 200; export default createStyleSheet({ - /** - * View that contains the indicators. - */ - indicatorContainer: { - flex: 1, - flexDirection: 'row', - justifyContent: 'flex-end', - margin: BoxModel.margin - }, - - /** - * Indicator container for wide aspect ratio. - */ - indicatorContainerWide: { - marginRight: FILMSTRIP_SIZE + BoxModel.margin - }, - - labelWrapper: { - flexDirection: 'column', - position: 'absolute', - right: 0, - - // Both on Android and iOS there is the status bar which may be visible. - // On iPhone X there is the notch. In the two cases BoxModel.margin is - // not enough. - top: BoxModel.margin * 3 - }, - /** * Large video container style. */