From e5caca9cfdb26672dbe097c2736a9c7a8f734fc9 Mon Sep 17 00:00:00 2001 From: Bettenbuk Zoltan Date: Thu, 11 Apr 2019 12:04:50 +0200 Subject: [PATCH] [RN] Add display name label to tile view --- .../components/native/Conference.js | 15 +++++++++-- react/features/conference/index.js | 2 ++ .../components/native/DisplayNameLabel.js | 25 +++++++++++-------- .../components/web/DisplayNameLabel.js | 0 .../display-name/components/web/index.js | 1 + .../features/filmstrip/components/_.native.js | 2 ++ react/features/filmstrip/components/_.web.js | 2 ++ react/features/filmstrip/components/index.js | 2 ++ .../filmstrip/components/native/Thumbnail.js | 12 +++++++-- .../filmstrip/components/native/TileView.js | 1 + .../filmstrip/components/native/index.js | 2 ++ .../filmstrip/components/web/index.js | 2 ++ 12 files changed, 52 insertions(+), 14 deletions(-) create mode 100644 react/features/display-name/components/web/DisplayNameLabel.js diff --git a/react/features/conference/components/native/Conference.js b/react/features/conference/components/native/Conference.js index b0f4885de..f06578267 100644 --- a/react/features/conference/components/native/Conference.js +++ b/react/features/conference/components/native/Conference.js @@ -17,7 +17,7 @@ import { TestConnectionInfo } from '../../../base/testing'; import { createDesiredLocalTracks } from '../../../base/tracks'; import { ConferenceNotification } from '../../../calendar-sync'; import { Chat } from '../../../chat'; -import { DisplayNameLabel } from '../../../display-name/components/native'; +import { DisplayNameLabel } from '../../../display-name'; import { FILMSTRIP_SIZE, Filmstrip, @@ -61,6 +61,11 @@ type Props = AbstractProps & { */ _filmstripVisible: boolean, + /** + * The ID of the participant currently on stage (if any) + */ + _largeVideoParticipantId: string, + /** * Current conference's full URL. * @@ -236,6 +241,7 @@ class Conference extends AbstractConference { render() { const { _connecting, + _largeVideoParticipantId, _reducedUI, _shouldDisplayTileView } = this.props; @@ -282,7 +288,7 @@ class Conference extends AbstractConference { - + { _shouldDisplayTileView || } {/* * The Toolbox is in a stacking layer bellow the Filmstrip. @@ -497,6 +503,11 @@ function _mapStateToProps(state) { */ _filmstripVisible: isFilmstripVisible(state), + /** + * The ID of the participant currently on stage. + */ + _largeVideoParticipantId: state['features/large-video'].participantId, + /** * Current conference's full URL. * diff --git a/react/features/conference/index.js b/react/features/conference/index.js index 7ce19e0e6..611f0c943 100644 --- a/react/features/conference/index.js +++ b/react/features/conference/index.js @@ -1,3 +1,5 @@ +// @flow + export * from './components'; import './middleware'; diff --git a/react/features/display-name/components/native/DisplayNameLabel.js b/react/features/display-name/components/native/DisplayNameLabel.js index be89d9c38..a875d7898 100644 --- a/react/features/display-name/components/native/DisplayNameLabel.js +++ b/react/features/display-name/components/native/DisplayNameLabel.js @@ -9,7 +9,6 @@ import { shouldRenderParticipantVideo } from '../../../base/participants'; import { connect } from '../../../base/redux'; -import { shouldDisplayTileView } from '../../../video-layout'; import styles from './styles'; @@ -23,7 +22,12 @@ type Props = { /** * True of the label needs to be rendered. False otherwise. */ - _render: boolean + _render: boolean, + + /** + * The ID of the participant to render the label for. + */ + participantId: string } /** @@ -54,23 +58,24 @@ class DisplayNameLabel extends Component { * Maps part of the Redux state to the props of this component. * * @param {Object} state - The Redux state. + * @param {Props} ownProps - The own props of the component. * @returns {{ * }} */ -function _mapStateToProps(state: Object) { - const largeVideoParticipantId = state['features/large-video'].participantId; +function _mapStateToProps(state: Object, ownProps: Props) { + const { participantId } = ownProps; const localParticipant = getLocalParticipant(state); // Currently we only render the display name if it's not the local - // participant, we're not in tile view and there is no video rendered for - // the on-stage participant. - const _render = localParticipant.id !== largeVideoParticipantId - && !shouldDisplayTileView(state) - && !shouldRenderParticipantVideo(state, largeVideoParticipantId); + // participant and there is no video rendered for + // them. + const _render = Boolean(participantId) + && localParticipant.id !== participantId + && !shouldRenderParticipantVideo(state, participantId); return { _participantName: - getParticipantDisplayName(state, largeVideoParticipantId), + getParticipantDisplayName(state, participantId), _render }; } diff --git a/react/features/display-name/components/web/DisplayNameLabel.js b/react/features/display-name/components/web/DisplayNameLabel.js new file mode 100644 index 000000000..e69de29bb diff --git a/react/features/display-name/components/web/index.js b/react/features/display-name/components/web/index.js index 93301ecee..7e2028022 100644 --- a/react/features/display-name/components/web/index.js +++ b/react/features/display-name/components/web/index.js @@ -1,4 +1,5 @@ // @flow export { default as DisplayName } from './DisplayName'; +export { default as DisplayNameLabel } from './DisplayNameLabel'; export { default as DisplayNamePrompt } from './DisplayNamePrompt'; diff --git a/react/features/filmstrip/components/_.native.js b/react/features/filmstrip/components/_.native.js index 738c4d2b8..a32ec6061 100644 --- a/react/features/filmstrip/components/_.native.js +++ b/react/features/filmstrip/components/_.native.js @@ -1 +1,3 @@ +// @flow + export * from './native'; diff --git a/react/features/filmstrip/components/_.web.js b/react/features/filmstrip/components/_.web.js index b80c83af3..40d5f4652 100644 --- a/react/features/filmstrip/components/_.web.js +++ b/react/features/filmstrip/components/_.web.js @@ -1 +1,3 @@ +// @flow + export * from './web'; diff --git a/react/features/filmstrip/components/index.js b/react/features/filmstrip/components/index.js index cda61441e..bf0c7deb0 100644 --- a/react/features/filmstrip/components/index.js +++ b/react/features/filmstrip/components/index.js @@ -1 +1,3 @@ +// @flow + export * from './_'; diff --git a/react/features/filmstrip/components/native/Thumbnail.js b/react/features/filmstrip/components/native/Thumbnail.js index 8295a99de..261971c65 100644 --- a/react/features/filmstrip/components/native/Thumbnail.js +++ b/react/features/filmstrip/components/native/Thumbnail.js @@ -17,7 +17,7 @@ import { Container } from '../../../base/react'; import { connect } from '../../../base/redux'; import { StyleType } from '../../../base/styles'; import { getTrackByMediaTypeAndParticipant } from '../../../base/tracks'; - +import { DisplayNameLabel } from '../../../display-name'; import { RemoteVideoMenu } from '../../../remote-video-menu'; import AudioMutedIndicator from './AudioMutedIndicator'; @@ -90,6 +90,11 @@ type Props = { */ participant: Object, + /** + * Whether to display or hide the display name of the participant in the thumbnail. + */ + renderDisplayName: ?boolean, + /** * Optional styling to add or override on the Thumbnail component root. */ @@ -119,7 +124,8 @@ class Thumbnail extends Component { _videoTrack: videoTrack, disablePin, disableTint, - participant + participant, + renderDisplayName } = this.props; // We don't render audio in any of the following: @@ -163,6 +169,8 @@ class Thumbnail extends Component { tintStyle = { _styles.activeThumbnailTint } zOrder = { 1 } /> + { renderDisplayName && } + { participant.role === PARTICIPANT_ROLE.MODERATOR && diff --git a/react/features/filmstrip/components/native/TileView.js b/react/features/filmstrip/components/native/TileView.js index 45ee2fb88..d7c1c2b6e 100644 --- a/react/features/filmstrip/components/native/TileView.js +++ b/react/features/filmstrip/components/native/TileView.js @@ -302,6 +302,7 @@ class TileView extends Component { disableTint = { true } key = { participant.id } participant = { participant } + renderDisplayName = { true } styleOverrides = { styleOverrides } />)); } diff --git a/react/features/filmstrip/components/native/index.js b/react/features/filmstrip/components/native/index.js index e0ae218a3..d0b5eb45d 100644 --- a/react/features/filmstrip/components/native/index.js +++ b/react/features/filmstrip/components/native/index.js @@ -1,3 +1,5 @@ +// @flow + export { default as Filmstrip } from './Filmstrip'; export { default as TileView } from './TileView'; export { default as styles } from './styles'; diff --git a/react/features/filmstrip/components/web/index.js b/react/features/filmstrip/components/web/index.js index bce3429b7..04b878cd6 100644 --- a/react/features/filmstrip/components/web/index.js +++ b/react/features/filmstrip/components/web/index.js @@ -1,3 +1,5 @@ +// @flow + export { default as AudioMutedIndicator } from './AudioMutedIndicator'; export { default as DominantSpeakerIndicator } from './DominantSpeakerIndicator';