From 4e78502c9e9573bf7041679f580950d6a149f726 Mon Sep 17 00:00:00 2001 From: Bettenbuk Zoltan Date: Fri, 29 Mar 2019 14:26:49 +0100 Subject: [PATCH] Generalize indicators --- .../components/AbstractRaisedHandIndicator.js | 22 ++++++- .../components/native/AudioMutedIndicator.js | 14 ++--- .../components/native/BaseIndicator.js | 51 ++++++++++++++++ .../native/DominantSpeakerIndicator.js | 15 ++--- .../components/native/ModeratorIndicator.js | 14 ++--- .../components/native/RaisedHandIndicator.js | 24 +++----- .../filmstrip/components/native/Thumbnail.js | 14 +++-- .../components/native/VideoMutedIndicator.js | 14 ++--- .../filmstrip/components/native/styles.js | 58 +++++++------------ .../components/web/RaisedHandIndicator.js | 10 +--- 10 files changed, 139 insertions(+), 97 deletions(-) create mode 100644 react/features/filmstrip/components/native/BaseIndicator.js diff --git a/react/features/filmstrip/components/AbstractRaisedHandIndicator.js b/react/features/filmstrip/components/AbstractRaisedHandIndicator.js index 33c39630e..2afbb8941 100644 --- a/react/features/filmstrip/components/AbstractRaisedHandIndicator.js +++ b/react/features/filmstrip/components/AbstractRaisedHandIndicator.js @@ -15,7 +15,7 @@ export type Props = { /** * True if the hand is raised for this participant. */ - _raisedHand: boolean + _raisedHand?: boolean } /** @@ -24,6 +24,26 @@ export type Props = { export default class AbstractRaisedHandIndicator extends Component

{ + /** + * Implements {@code Component#render}. + * + * @inheritdoc + */ + render() { + if (!this.props._raisedHand) { + return null; + } + + return this._renderIndicator(); + } + + /** + * Renders the platform specific indicator element. + * + * @returns {React$Element<*>} + */ + _renderIndicator: () => React$Element<*> + } /** diff --git a/react/features/filmstrip/components/native/AudioMutedIndicator.js b/react/features/filmstrip/components/native/AudioMutedIndicator.js index 1d7c2bdd2..9012ed26e 100644 --- a/react/features/filmstrip/components/native/AudioMutedIndicator.js +++ b/react/features/filmstrip/components/native/AudioMutedIndicator.js @@ -1,13 +1,13 @@ +// @flow + import React, { Component } from 'react'; -import { Icon } from '../../../base/font-icons'; - -import styles from './styles'; +import BaseIndicator from './BaseIndicator'; /** * Thumbnail badge for displaying the audio mute status of a participant. */ -export default class AudioMutedIndicator extends Component { +export default class AudioMutedIndicator extends Component<{}> { /** * Implements React's {@link Component#render()}. * @@ -15,9 +15,9 @@ export default class AudioMutedIndicator extends Component { */ render() { return ( - + ); } } diff --git a/react/features/filmstrip/components/native/BaseIndicator.js b/react/features/filmstrip/components/native/BaseIndicator.js new file mode 100644 index 000000000..8d16a24c6 --- /dev/null +++ b/react/features/filmstrip/components/native/BaseIndicator.js @@ -0,0 +1,51 @@ +// @flow + +import React, { Component } from 'react'; +import { View } from 'react-native'; + +import { Icon } from '../../../base/font-icons'; + +import styles from './styles'; + +type Props = { + + /** + * True if a highlighted background has to be applied. + */ + highlight: boolean, + + /** + * The name of the icon to be used as the indicator. + */ + icon: string +}; + +/** + * Implements a base indicator to be reused across all native indicators on + * the filmstrip. + */ +export default class BaseIndicator extends Component { + /** + * Implements React's {@link Component#render()}. + * + * @inheritdoc + */ + render() { + const { highlight, icon } = this.props; + + const iconElement = ( + ); + + if (highlight) { + return ( + + { iconElement } + + ); + } + + return iconElement; + } +} diff --git a/react/features/filmstrip/components/native/DominantSpeakerIndicator.js b/react/features/filmstrip/components/native/DominantSpeakerIndicator.js index 552cb221d..a2e4a13a5 100644 --- a/react/features/filmstrip/components/native/DominantSpeakerIndicator.js +++ b/react/features/filmstrip/components/native/DominantSpeakerIndicator.js @@ -1,11 +1,8 @@ // @flow import React, { Component } from 'react'; -import { View } from 'react-native'; -import { Icon } from '../../../base/font-icons'; - -import styles from './styles'; +import BaseIndicator from './BaseIndicator'; /** * Thumbnail badge showing that the participant is the dominant speaker in @@ -13,17 +10,15 @@ import styles from './styles'; */ export default class DominantSpeakerIndicator extends Component<{}> { /** - * Implements React's {@link Component#render()}. + * Implements {@code Component#render}. * * @inheritdoc */ render() { return ( - - - + ); } } diff --git a/react/features/filmstrip/components/native/ModeratorIndicator.js b/react/features/filmstrip/components/native/ModeratorIndicator.js index 6bf5962eb..ab7c6e1d0 100644 --- a/react/features/filmstrip/components/native/ModeratorIndicator.js +++ b/react/features/filmstrip/components/native/ModeratorIndicator.js @@ -1,13 +1,13 @@ +// @flow + import React, { Component } from 'react'; -import { Icon } from '../../../base/font-icons'; - -import styles from './styles'; +import BaseIndicator from './BaseIndicator'; /** * Thumbnail badge showing that the participant is a conference moderator. */ -export default class ModeratorIndicator extends Component { +export default class ModeratorIndicator extends Component<{}> { /** * Implements React's {@link Component#render()}. * @@ -15,9 +15,9 @@ export default class ModeratorIndicator extends Component { */ render() { return ( - + ); } } diff --git a/react/features/filmstrip/components/native/RaisedHandIndicator.js b/react/features/filmstrip/components/native/RaisedHandIndicator.js index a2faa8f8a..4054b43a1 100644 --- a/react/features/filmstrip/components/native/RaisedHandIndicator.js +++ b/react/features/filmstrip/components/native/RaisedHandIndicator.js @@ -1,9 +1,7 @@ -/* @flow */ +// @flow import React from 'react'; -import { View } from 'react-native'; -import { Icon } from '../../../base/font-icons'; import { connect } from '../../../base/redux'; import AbstractRaisedHandIndicator, { @@ -11,7 +9,7 @@ import AbstractRaisedHandIndicator, { _mapStateToProps } from '../AbstractRaisedHandIndicator'; -import styles from './styles'; +import BaseIndicator from './BaseIndicator'; /** * Thumbnail badge showing that the participant would like to speak. @@ -20,21 +18,15 @@ import styles from './styles'; */ class RaisedHandIndicator extends AbstractRaisedHandIndicator { /** - * Implements React's {@link Component#render()}. + * Renders the platform specific indicator element. * - * @inheritdoc + * @returns {React$Element<*>} */ - render() { - if (!this.props._raisedHand) { - return null; - } - + _renderIndicator() { return ( - - - + ); } } diff --git a/react/features/filmstrip/components/native/Thumbnail.js b/react/features/filmstrip/components/native/Thumbnail.js index 53f142d93..8295a99de 100644 --- a/react/features/filmstrip/components/native/Thumbnail.js +++ b/react/features/filmstrip/components/native/Thumbnail.js @@ -1,6 +1,7 @@ // @flow import React, { Component } from 'react'; +import { View } from 'react-native'; import type { Dispatch } from 'redux'; import { ColorSchemeRegistry } from '../../../base/color-scheme'; @@ -163,12 +164,15 @@ class Thumbnail extends Component { zOrder = { 1 } /> { participant.role === PARTICIPANT_ROLE.MODERATOR - && } + && + + } - { participant.dominantSpeaker - && } - - + + + { participant.dominantSpeaker + && } + { audioMuted diff --git a/react/features/filmstrip/components/native/VideoMutedIndicator.js b/react/features/filmstrip/components/native/VideoMutedIndicator.js index 5bfe0cd23..8c519bc0a 100644 --- a/react/features/filmstrip/components/native/VideoMutedIndicator.js +++ b/react/features/filmstrip/components/native/VideoMutedIndicator.js @@ -1,13 +1,13 @@ +// @flow + import React, { Component } from 'react'; -import { Icon } from '../../../base/font-icons'; - -import styles from './styles'; +import BaseIndicator from './BaseIndicator'; /** * Thumbnail badge for displaying the video mute status of a participant. */ -export default class VideoMutedIndicator extends Component { +export default class VideoMutedIndicator extends Component<{}> { /** * Implements React's {@link Component#render()}. * @@ -15,9 +15,9 @@ export default class VideoMutedIndicator extends Component { */ render() { return ( - + ); } } diff --git a/react/features/filmstrip/components/native/styles.js b/react/features/filmstrip/components/native/styles.js index 77eb8d26a..3f5c6b7b7 100644 --- a/react/features/filmstrip/components/native/styles.js +++ b/react/features/filmstrip/components/native/styles.js @@ -10,18 +10,6 @@ import { FILMSTRIP_SIZE } from '../../constants'; */ export const AVATAR_SIZE = 50; -/** - * The base/default style of indicators such as audioMutedIndicator, - * moderatorIndicator, and videoMutedIndicator. - */ -const indicator = { - textShadowColor: ColorPalette.black, - textShadowOffset: { - height: -1, - width: 0 - } -}; - /** * The styles of the feature filmstrip. */ @@ -30,20 +18,27 @@ export default { * Dominant speaker indicator style. */ indicator: { + backgroundColor: ColorPalette.transparent, color: ColorPalette.white, - fontSize: 12 + fontSize: 12, + textShadowColor: ColorPalette.black, + textShadowOffset: { + height: -1, + width: 0 + } }, /** * Dominant speaker indicator background style. */ indicatorBackground: { + alignItems: 'center', backgroundColor: ColorPalette.blue, borderRadius: 16, - left: 4, - padding: 4, - position: 'absolute', - top: 4 + flexDirection: 'row', + justifyContent: 'center', + height: 20, + width: 20 }, /** @@ -84,16 +79,10 @@ export default { flexDirection: 'row' }, - /** - * Moderator indicator style. - */ - moderatorIndicator: { - backgroundColor: 'transparent', + moderatorIndicatorContainer: { bottom: 4, - color: ColorPalette.white, position: 'absolute', - right: 4, - ...indicator + right: 4 }, /** @@ -123,18 +112,6 @@ export default { width: 80 }, - /** - * The thumbnail audio and video muted indicator style. - */ - thumbnailIndicator: { - backgroundColor: 'transparent', - color: ColorPalette.white, - paddingLeft: 1, - paddingRight: 1, - position: 'relative', - ...indicator - }, - /** * The thumbnails indicator container. */ @@ -147,6 +124,13 @@ export default { position: 'absolute' }, + thumbnailTopIndicatorContainer: { + left: 0, + padding: 4, + position: 'absolute', + top: 0 + }, + tileView: { alignSelf: 'center' }, diff --git a/react/features/filmstrip/components/web/RaisedHandIndicator.js b/react/features/filmstrip/components/web/RaisedHandIndicator.js index 9432184e1..d6dd6d122 100644 --- a/react/features/filmstrip/components/web/RaisedHandIndicator.js +++ b/react/features/filmstrip/components/web/RaisedHandIndicator.js @@ -34,15 +34,11 @@ type Props = AbstractProps & { */ class RaisedHandIndicator extends AbstractRaisedHandIndicator { /** - * Implements React's {@link Component#render()}. + * Renders the platform specific indicator element. * - * @inheritdoc + * @returns {React$Element<*>} */ - render() { - if (!this.props._raisedHand) { - return null; - } - + _renderIndicator() { return (