Generalize indicators
This commit is contained in:
parent
6ff733dae0
commit
4e78502c9e
|
@ -15,7 +15,7 @@ export type Props = {
|
||||||
/**
|
/**
|
||||||
* True if the hand is raised for this participant.
|
* True if the hand is raised for this participant.
|
||||||
*/
|
*/
|
||||||
_raisedHand: boolean
|
_raisedHand?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -24,6 +24,26 @@ export type Props = {
|
||||||
export default class AbstractRaisedHandIndicator<P: Props>
|
export default class AbstractRaisedHandIndicator<P: Props>
|
||||||
extends Component<P> {
|
extends Component<P> {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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<*>
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
import { Icon } from '../../../base/font-icons';
|
import BaseIndicator from './BaseIndicator';
|
||||||
|
|
||||||
import styles from './styles';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Thumbnail badge for displaying the audio mute status of a participant.
|
* 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()}.
|
* Implements React's {@link Component#render()}.
|
||||||
*
|
*
|
||||||
|
@ -15,9 +15,9 @@ export default class AudioMutedIndicator extends Component {
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Icon
|
<BaseIndicator
|
||||||
name = 'mic-disabled'
|
highlight = { false }
|
||||||
style = { styles.thumbnailIndicator } />
|
icon = 'mic-disabled' />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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<Props> {
|
||||||
|
/**
|
||||||
|
* Implements React's {@link Component#render()}.
|
||||||
|
*
|
||||||
|
* @inheritdoc
|
||||||
|
*/
|
||||||
|
render() {
|
||||||
|
const { highlight, icon } = this.props;
|
||||||
|
|
||||||
|
const iconElement = (<Icon
|
||||||
|
name = { icon }
|
||||||
|
style = { styles.indicator } />
|
||||||
|
);
|
||||||
|
|
||||||
|
if (highlight) {
|
||||||
|
return (
|
||||||
|
<View style = { styles.indicatorBackground }>
|
||||||
|
{ iconElement }
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return iconElement;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,11 +1,8 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { View } from 'react-native';
|
|
||||||
|
|
||||||
import { Icon } from '../../../base/font-icons';
|
import BaseIndicator from './BaseIndicator';
|
||||||
|
|
||||||
import styles from './styles';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Thumbnail badge showing that the participant is the dominant speaker in
|
* 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<{}> {
|
export default class DominantSpeakerIndicator extends Component<{}> {
|
||||||
/**
|
/**
|
||||||
* Implements React's {@link Component#render()}.
|
* Implements {@code Component#render}.
|
||||||
*
|
*
|
||||||
* @inheritdoc
|
* @inheritdoc
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<View style = { styles.indicatorBackground }>
|
<BaseIndicator
|
||||||
<Icon
|
highlight = { true }
|
||||||
name = 'dominant-speaker'
|
icon = 'dominant-speaker' />
|
||||||
style = { styles.indicator } />
|
|
||||||
</View>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
import { Icon } from '../../../base/font-icons';
|
import BaseIndicator from './BaseIndicator';
|
||||||
|
|
||||||
import styles from './styles';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Thumbnail badge showing that the participant is a conference moderator.
|
* 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()}.
|
* Implements React's {@link Component#render()}.
|
||||||
*
|
*
|
||||||
|
@ -15,9 +15,9 @@ export default class ModeratorIndicator extends Component {
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Icon
|
<BaseIndicator
|
||||||
name = 'star'
|
highlight = { false }
|
||||||
style = { styles.moderatorIndicator } />
|
icon = 'star' />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
/* @flow */
|
// @flow
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { View } from 'react-native';
|
|
||||||
|
|
||||||
import { Icon } from '../../../base/font-icons';
|
|
||||||
import { connect } from '../../../base/redux';
|
import { connect } from '../../../base/redux';
|
||||||
|
|
||||||
import AbstractRaisedHandIndicator, {
|
import AbstractRaisedHandIndicator, {
|
||||||
|
@ -11,7 +9,7 @@ import AbstractRaisedHandIndicator, {
|
||||||
_mapStateToProps
|
_mapStateToProps
|
||||||
} from '../AbstractRaisedHandIndicator';
|
} from '../AbstractRaisedHandIndicator';
|
||||||
|
|
||||||
import styles from './styles';
|
import BaseIndicator from './BaseIndicator';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Thumbnail badge showing that the participant would like to speak.
|
* Thumbnail badge showing that the participant would like to speak.
|
||||||
|
@ -20,21 +18,15 @@ import styles from './styles';
|
||||||
*/
|
*/
|
||||||
class RaisedHandIndicator extends AbstractRaisedHandIndicator<Props> {
|
class RaisedHandIndicator extends AbstractRaisedHandIndicator<Props> {
|
||||||
/**
|
/**
|
||||||
* Implements React's {@link Component#render()}.
|
* Renders the platform specific indicator element.
|
||||||
*
|
*
|
||||||
* @inheritdoc
|
* @returns {React$Element<*>}
|
||||||
*/
|
*/
|
||||||
render() {
|
_renderIndicator() {
|
||||||
if (!this.props._raisedHand) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<View style = { styles.indicatorBackground }>
|
<BaseIndicator
|
||||||
<Icon
|
highlight = { true }
|
||||||
name = 'raised-hand'
|
icon = 'raised-hand' />
|
||||||
style = { styles.indicator } />
|
|
||||||
</View>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
import { View } from 'react-native';
|
||||||
import type { Dispatch } from 'redux';
|
import type { Dispatch } from 'redux';
|
||||||
|
|
||||||
import { ColorSchemeRegistry } from '../../../base/color-scheme';
|
import { ColorSchemeRegistry } from '../../../base/color-scheme';
|
||||||
|
@ -163,12 +164,15 @@ class Thumbnail extends Component<Props> {
|
||||||
zOrder = { 1 } />
|
zOrder = { 1 } />
|
||||||
|
|
||||||
{ participant.role === PARTICIPANT_ROLE.MODERATOR
|
{ participant.role === PARTICIPANT_ROLE.MODERATOR
|
||||||
&& <ModeratorIndicator /> }
|
&& <View style = { styles.moderatorIndicatorContainer }>
|
||||||
|
<ModeratorIndicator />
|
||||||
|
</View> }
|
||||||
|
|
||||||
|
<View style = { styles.thumbnailTopIndicatorContainer }>
|
||||||
|
<RaisedHandIndicator participantId = { participant.id } />
|
||||||
{ participant.dominantSpeaker
|
{ participant.dominantSpeaker
|
||||||
&& <DominantSpeakerIndicator /> }
|
&& <DominantSpeakerIndicator /> }
|
||||||
|
</View>
|
||||||
<RaisedHandIndicator participantId = { participant.id } />
|
|
||||||
|
|
||||||
<Container style = { styles.thumbnailIndicatorContainer }>
|
<Container style = { styles.thumbnailIndicatorContainer }>
|
||||||
{ audioMuted
|
{ audioMuted
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
|
|
||||||
import { Icon } from '../../../base/font-icons';
|
import BaseIndicator from './BaseIndicator';
|
||||||
|
|
||||||
import styles from './styles';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Thumbnail badge for displaying the video mute status of a participant.
|
* 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()}.
|
* Implements React's {@link Component#render()}.
|
||||||
*
|
*
|
||||||
|
@ -15,9 +15,9 @@ export default class VideoMutedIndicator extends Component {
|
||||||
*/
|
*/
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Icon
|
<BaseIndicator
|
||||||
name = 'camera-disabled'
|
highlight = { false }
|
||||||
style = { styles.thumbnailIndicator } />
|
icon = 'camera-disabled' />
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -10,18 +10,6 @@ import { FILMSTRIP_SIZE } from '../../constants';
|
||||||
*/
|
*/
|
||||||
export const AVATAR_SIZE = 50;
|
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.
|
* The styles of the feature filmstrip.
|
||||||
*/
|
*/
|
||||||
|
@ -30,20 +18,27 @@ export default {
|
||||||
* Dominant speaker indicator style.
|
* Dominant speaker indicator style.
|
||||||
*/
|
*/
|
||||||
indicator: {
|
indicator: {
|
||||||
|
backgroundColor: ColorPalette.transparent,
|
||||||
color: ColorPalette.white,
|
color: ColorPalette.white,
|
||||||
fontSize: 12
|
fontSize: 12,
|
||||||
|
textShadowColor: ColorPalette.black,
|
||||||
|
textShadowOffset: {
|
||||||
|
height: -1,
|
||||||
|
width: 0
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Dominant speaker indicator background style.
|
* Dominant speaker indicator background style.
|
||||||
*/
|
*/
|
||||||
indicatorBackground: {
|
indicatorBackground: {
|
||||||
|
alignItems: 'center',
|
||||||
backgroundColor: ColorPalette.blue,
|
backgroundColor: ColorPalette.blue,
|
||||||
borderRadius: 16,
|
borderRadius: 16,
|
||||||
left: 4,
|
flexDirection: 'row',
|
||||||
padding: 4,
|
justifyContent: 'center',
|
||||||
position: 'absolute',
|
height: 20,
|
||||||
top: 4
|
width: 20
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -84,16 +79,10 @@ export default {
|
||||||
flexDirection: 'row'
|
flexDirection: 'row'
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
moderatorIndicatorContainer: {
|
||||||
* Moderator indicator style.
|
|
||||||
*/
|
|
||||||
moderatorIndicator: {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
bottom: 4,
|
bottom: 4,
|
||||||
color: ColorPalette.white,
|
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
right: 4,
|
right: 4
|
||||||
...indicator
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -123,18 +112,6 @@ export default {
|
||||||
width: 80
|
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.
|
* The thumbnails indicator container.
|
||||||
*/
|
*/
|
||||||
|
@ -147,6 +124,13 @@ export default {
|
||||||
position: 'absolute'
|
position: 'absolute'
|
||||||
},
|
},
|
||||||
|
|
||||||
|
thumbnailTopIndicatorContainer: {
|
||||||
|
left: 0,
|
||||||
|
padding: 4,
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0
|
||||||
|
},
|
||||||
|
|
||||||
tileView: {
|
tileView: {
|
||||||
alignSelf: 'center'
|
alignSelf: 'center'
|
||||||
},
|
},
|
||||||
|
|
|
@ -34,15 +34,11 @@ type Props = AbstractProps & {
|
||||||
*/
|
*/
|
||||||
class RaisedHandIndicator extends AbstractRaisedHandIndicator<Props> {
|
class RaisedHandIndicator extends AbstractRaisedHandIndicator<Props> {
|
||||||
/**
|
/**
|
||||||
* Implements React's {@link Component#render()}.
|
* Renders the platform specific indicator element.
|
||||||
*
|
*
|
||||||
* @inheritdoc
|
* @returns {React$Element<*>}
|
||||||
*/
|
*/
|
||||||
render() {
|
_renderIndicator() {
|
||||||
if (!this.props._raisedHand) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BaseIndicator
|
<BaseIndicator
|
||||||
className = 'raisehandindicator indicator show-inline'
|
className = 'raisehandindicator indicator show-inline'
|
||||||
|
|
Loading…
Reference in New Issue