rn: fix rendering unnecessary stuff when in PiP mode
This commit is contained in:
parent
245eb89b85
commit
f7a526f488
|
@ -162,108 +162,13 @@ class Conference extends AbstractConference<Props, *> {
|
||||||
* @returns {ReactElement}
|
* @returns {ReactElement}
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
const {
|
|
||||||
_connecting,
|
|
||||||
_filmstripVisible,
|
|
||||||
_largeVideoParticipantId,
|
|
||||||
_reducedUI,
|
|
||||||
_shouldDisplayTileView,
|
|
||||||
_toolboxVisible
|
|
||||||
} = this.props;
|
|
||||||
const showGradient = _toolboxVisible;
|
|
||||||
const applyGradientStretching = _filmstripVisible && isNarrowAspectRatio(this) && !_shouldDisplayTileView;
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container style = { styles.conference }>
|
<Container style = { styles.conference }>
|
||||||
<StatusBar
|
<StatusBar
|
||||||
barStyle = 'light-content'
|
barStyle = 'light-content'
|
||||||
hidden = { true }
|
hidden = { true }
|
||||||
translucent = { true } />
|
translucent = { true } />
|
||||||
|
{ this._renderContent() }
|
||||||
<AddPeopleDialog />
|
|
||||||
<Chat />
|
|
||||||
<SharedDocument />
|
|
||||||
|
|
||||||
{/*
|
|
||||||
* The LargeVideo is the lowermost stacking layer.
|
|
||||||
*/
|
|
||||||
_shouldDisplayTileView
|
|
||||||
? <TileView onClick = { this._onClick } />
|
|
||||||
: <LargeVideo onClick = { this._onClick } />
|
|
||||||
}
|
|
||||||
|
|
||||||
{/*
|
|
||||||
* If there is a ringing call, show the callee's info.
|
|
||||||
*/
|
|
||||||
_reducedUI || <CalleeInfoContainer />
|
|
||||||
}
|
|
||||||
|
|
||||||
{/*
|
|
||||||
* The activity/loading indicator goes above everything, except
|
|
||||||
* the toolbox/toolbars and the dialogs.
|
|
||||||
*/
|
|
||||||
_connecting
|
|
||||||
&& <TintedView>
|
|
||||||
<LoadingIndicator />
|
|
||||||
</TintedView>
|
|
||||||
}
|
|
||||||
|
|
||||||
<View
|
|
||||||
pointerEvents = 'box-none'
|
|
||||||
style = { styles.toolboxAndFilmstripContainer }>
|
|
||||||
|
|
||||||
{ showGradient && <LinearGradient
|
|
||||||
colors = { NAVBAR_GRADIENT_COLORS }
|
|
||||||
end = {{
|
|
||||||
x: 0.0,
|
|
||||||
y: 0.0
|
|
||||||
}}
|
|
||||||
pointerEvents = 'none'
|
|
||||||
start = {{
|
|
||||||
x: 0.0,
|
|
||||||
y: 1.0
|
|
||||||
}}
|
|
||||||
style = { [
|
|
||||||
styles.bottomGradient,
|
|
||||||
applyGradientStretching ? styles.gradientStretchBottom : undefined
|
|
||||||
] } />}
|
|
||||||
|
|
||||||
<Labels />
|
|
||||||
|
|
||||||
<Captions onPress = { this._onClick } />
|
|
||||||
|
|
||||||
{ _shouldDisplayTileView || <DisplayNameLabel participantId = { _largeVideoParticipantId } /> }
|
|
||||||
|
|
||||||
{/*
|
|
||||||
* The Toolbox is in a stacking layer below the Filmstrip.
|
|
||||||
*/}
|
|
||||||
<Toolbox />
|
|
||||||
|
|
||||||
{/*
|
|
||||||
* The Filmstrip is in a stacking layer above the
|
|
||||||
* LargeVideo. The LargeVideo and the Filmstrip form what
|
|
||||||
* the Web/React app calls "videospace". Presumably, the
|
|
||||||
* name and grouping stem from the fact that these two
|
|
||||||
* React Components depict the videos of the conference's
|
|
||||||
* participants.
|
|
||||||
*/
|
|
||||||
_shouldDisplayTileView ? undefined : <Filmstrip />
|
|
||||||
}
|
|
||||||
</View>
|
|
||||||
|
|
||||||
<SafeAreaView
|
|
||||||
pointerEvents = 'box-none'
|
|
||||||
style = { styles.navBarSafeView }>
|
|
||||||
<NavigationBar />
|
|
||||||
{ this.renderNotificationsContainer() }
|
|
||||||
</SafeAreaView>
|
|
||||||
|
|
||||||
<TestConnectionInfo />
|
|
||||||
|
|
||||||
{
|
|
||||||
this._renderConferenceNotification()
|
|
||||||
}
|
|
||||||
|
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -322,6 +227,138 @@ class Conference extends AbstractConference<Props, *> {
|
||||||
: undefined);
|
: undefined);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders the content for the Conference container.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @returns {React$Element}
|
||||||
|
*/
|
||||||
|
_renderContent() {
|
||||||
|
const {
|
||||||
|
_connecting,
|
||||||
|
_filmstripVisible,
|
||||||
|
_largeVideoParticipantId,
|
||||||
|
_reducedUI,
|
||||||
|
_shouldDisplayTileView,
|
||||||
|
_toolboxVisible
|
||||||
|
} = this.props;
|
||||||
|
const showGradient = _toolboxVisible;
|
||||||
|
const applyGradientStretching = _filmstripVisible && isNarrowAspectRatio(this) && !_shouldDisplayTileView;
|
||||||
|
|
||||||
|
if (_reducedUI) {
|
||||||
|
return this._renderContentForReducedUi();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<AddPeopleDialog />
|
||||||
|
<Chat />
|
||||||
|
<SharedDocument />
|
||||||
|
|
||||||
|
{/*
|
||||||
|
* The LargeVideo is the lowermost stacking layer.
|
||||||
|
*/
|
||||||
|
_shouldDisplayTileView
|
||||||
|
? <TileView onClick = { this._onClick } />
|
||||||
|
: <LargeVideo onClick = { this._onClick } />
|
||||||
|
}
|
||||||
|
|
||||||
|
{/*
|
||||||
|
* If there is a ringing call, show the callee's info.
|
||||||
|
*/
|
||||||
|
<CalleeInfoContainer />
|
||||||
|
}
|
||||||
|
|
||||||
|
{/*
|
||||||
|
* The activity/loading indicator goes above everything, except
|
||||||
|
* the toolbox/toolbars and the dialogs.
|
||||||
|
*/
|
||||||
|
_connecting
|
||||||
|
&& <TintedView>
|
||||||
|
<LoadingIndicator />
|
||||||
|
</TintedView>
|
||||||
|
}
|
||||||
|
|
||||||
|
<View
|
||||||
|
pointerEvents = 'box-none'
|
||||||
|
style = { styles.toolboxAndFilmstripContainer }>
|
||||||
|
|
||||||
|
{ showGradient && <LinearGradient
|
||||||
|
colors = { NAVBAR_GRADIENT_COLORS }
|
||||||
|
end = {{
|
||||||
|
x: 0.0,
|
||||||
|
y: 0.0
|
||||||
|
}}
|
||||||
|
pointerEvents = 'none'
|
||||||
|
start = {{
|
||||||
|
x: 0.0,
|
||||||
|
y: 1.0
|
||||||
|
}}
|
||||||
|
style = { [
|
||||||
|
styles.bottomGradient,
|
||||||
|
applyGradientStretching ? styles.gradientStretchBottom : undefined
|
||||||
|
] } />}
|
||||||
|
|
||||||
|
<Labels />
|
||||||
|
|
||||||
|
<Captions onPress = { this._onClick } />
|
||||||
|
|
||||||
|
{ _shouldDisplayTileView || <DisplayNameLabel participantId = { _largeVideoParticipantId } /> }
|
||||||
|
|
||||||
|
{/*
|
||||||
|
* The Toolbox is in a stacking layer below the Filmstrip.
|
||||||
|
*/}
|
||||||
|
<Toolbox />
|
||||||
|
|
||||||
|
{/*
|
||||||
|
* The Filmstrip is in a stacking layer above the
|
||||||
|
* LargeVideo. The LargeVideo and the Filmstrip form what
|
||||||
|
* the Web/React app calls "videospace". Presumably, the
|
||||||
|
* name and grouping stem from the fact that these two
|
||||||
|
* React Components depict the videos of the conference's
|
||||||
|
* participants.
|
||||||
|
*/
|
||||||
|
_shouldDisplayTileView ? undefined : <Filmstrip />
|
||||||
|
}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<SafeAreaView
|
||||||
|
pointerEvents = 'box-none'
|
||||||
|
style = { styles.navBarSafeView }>
|
||||||
|
<NavigationBar />
|
||||||
|
{ this._renderNotificationsContainer() }
|
||||||
|
</SafeAreaView>
|
||||||
|
|
||||||
|
<TestConnectionInfo />
|
||||||
|
|
||||||
|
{ this._renderConferenceNotification() }
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders the content for the Conference container when in "reduced UI" mode.
|
||||||
|
*
|
||||||
|
* @private
|
||||||
|
* @returns {React$Element}
|
||||||
|
*/
|
||||||
|
_renderContentForReducedUi() {
|
||||||
|
const { _connecting } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<LargeVideo onClick = { this._onClick } />
|
||||||
|
|
||||||
|
{
|
||||||
|
_connecting
|
||||||
|
&& <TintedView>
|
||||||
|
<LoadingIndicator />
|
||||||
|
</TintedView>
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Renders a container for notifications to be displayed by the
|
* Renders a container for notifications to be displayed by the
|
||||||
* base/notifications feature.
|
* base/notifications feature.
|
||||||
|
@ -329,7 +366,7 @@ class Conference extends AbstractConference<Props, *> {
|
||||||
* @private
|
* @private
|
||||||
* @returns {React$Element}
|
* @returns {React$Element}
|
||||||
*/
|
*/
|
||||||
renderNotificationsContainer() {
|
_renderNotificationsContainer() {
|
||||||
const notificationsStyle = {};
|
const notificationsStyle = {};
|
||||||
|
|
||||||
// In the landscape mode (wide) there's problem with notifications being
|
// In the landscape mode (wide) there's problem with notifications being
|
||||||
|
|
Loading…
Reference in New Issue