Separate local thumbnail in filmstrip (#2848)

* Separate local thumbnail in filmstrip

* style(Filmstrip.native): utilize full line length
This commit is contained in:
Zoltan Bettenbuk 2018-04-26 14:44:23 +02:00 committed by Paweł Domas
parent f14095ecfc
commit 4f8fd1019b
3 changed files with 96 additions and 11 deletions

View File

@ -10,6 +10,7 @@ import {
makeAspectRatioAware
} from '../../base/responsive-ui';
import LocalThumbnail from './LocalThumbnail';
import styles from './styles';
import Thumbnail from './Thumbnail';
@ -68,10 +69,14 @@ class Filmstrip extends Component<Props> {
<Container
style = { filmstripStyle }
visible = { this.props._visible }>
{
!isNarrowAspectRatio_ && <LocalThumbnail />
}
<ScrollView
horizontal = { isNarrowAspectRatio_ }
showsHorizontalScrollIndicator = { false }
showsVerticalScrollIndicator = { false }>
showsVerticalScrollIndicator = { false }
style = { styles.scrollView } >
{
/* eslint-disable react/jsx-wrap-multilines */
@ -86,6 +91,9 @@ class Filmstrip extends Component<Props> {
/* eslint-enable react/jsx-wrap-multilines */
}
</ScrollView>
{
isNarrowAspectRatio_ && <LocalThumbnail />
}
</Container>
);
}
@ -106,12 +114,7 @@ class Filmstrip extends Component<Props> {
// in place and (2) it is not necessarily stable.
const sortedParticipants = [
// First put the local participant.
...participants.filter(p => p.local),
// Then the remote participants, which are sorted by join order.
...participants.filter(p => !p.local)
...participants
];
if (isNarrowAspectRatio_) {
@ -149,12 +152,12 @@ function _mapStateToProps(state) {
_enabled: enabled,
/**
* The participants in the conference.
* The remote participants in the conference.
*
* @private
* @type {Participant[]}
*/
_participants: participants,
_participants: participants.filter(p => !p.local),
/**
* The indicator which determines whether the filmstrip is visible. The

View File

@ -0,0 +1,63 @@
// @flow
import React, { Component } from 'react';
import { View } from 'react-native';
import { connect } from 'react-redux';
import { getLocalParticipant } from '../../base/participants';
import styles from './styles';
import Thumbnail from './Thumbnail';
type Props = {
/**
* The local participant.
*/
_localParticipant: Object
};
/**
* Component to render a local thumbnail that can be separated from the
* remote thumbnails later.
*/
class LocalThumbnail extends Component<Props> {
/**
* Implements React Component's render.
*
* @inheritdoc
*/
render() {
const { _localParticipant } = this.props;
return (
<View style = { styles.localThumbnail }>
<Thumbnail participant = { _localParticipant } />
</View>
);
}
}
/**
* Maps (parts of) the redux state to the associated {@code LocalThumbnail}'s
* props.
*
* @param {Object} state - The redux state.
* @private
* @returns {{
* _localParticipant: Participant
* }}
*/
function _mapStateToProps(state) {
return {
/**
* The local participant.
*
* @private
* @type {Participant}
*/
_localParticipant: getLocalParticipant(state)
};
}
export default connect(_mapStateToProps)(LocalThumbnail);

View File

@ -9,7 +9,6 @@ export const AVATAR_SIZE = 50;
* The base style of {@link Filmstrip} shared between narrow and wide versions.
*/
const filmstrip = {
flexDirection: 'column',
flexGrow: 0
};
@ -43,7 +42,8 @@ export default {
*/
filmstripNarrow: {
...filmstrip,
alignItems: 'flex-end',
flexDirection: 'row',
justifyContent: 'flex-end',
height: 90
},
@ -54,11 +54,23 @@ export default {
filmstripWide: {
...filmstrip,
bottom: 0,
flexDirection: 'column',
left: 0,
position: 'absolute',
top: 0
},
/**
* Container of the {@link LocalThumbnail}.
*/
localThumbnail: {
alignContent: 'stretch',
alignSelf: 'stretch',
aspectRatio: 1,
flexShrink: 0,
flexDirection: 'row'
},
/**
* Moderator indicator style.
*/
@ -70,6 +82,13 @@ export default {
right: 4
},
/**
* The style of the scrollview containing the remote thumbnails.
*/
scrollView: {
flexGrow: 0
},
/**
* The style of a participant's Thumbnail which renders either the video or
* the avatar of the associated participant.