haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Generalize indicators

This commit is contained in:
Bettenbuk Zoltan 2019-03-29 14:26:49 +01:00 committed by Saúl Ibarra Corretgé
parent 6ff733dae0
commit 4e78502c9e
10 changed files with 139 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
react/features/filmstrip/components/AbstractRaisedHandIndicator.js
View File

@ -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<P: Props>
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<*>
}
/**

14
react/features/filmstrip/components/native/AudioMutedIndicator.js
View File

@ -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 (
<Icon
name = 'mic-disabled'
style = { styles.thumbnailIndicator } />
<BaseIndicator
highlight = { false }
icon = 'mic-disabled' />
);
}
}

51
react/features/filmstrip/components/native/BaseIndicator.js Normal file
View File

@ -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;
}
}

15
react/features/filmstrip/components/native/DominantSpeakerIndicator.js
View File

@ -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 (
<View style = { styles.indicatorBackground }>
<Icon
name = 'dominant-speaker'
style = { styles.indicator } />
</View>
<BaseIndicator
highlight = { true }
icon = 'dominant-speaker' />
);
}
}

14
react/features/filmstrip/components/native/ModeratorIndicator.js
View File

@ -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 (
<Icon
name = 'star'
style = { styles.moderatorIndicator } />
<BaseIndicator
highlight = { false }
icon = 'star' />
);
}
}

24
react/features/filmstrip/components/native/RaisedHandIndicator.js
View File

@ -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<Props> {
/**
* 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 (
<View style = { styles.indicatorBackground }>
<Icon
name = 'raised-hand'
style = { styles.indicator } />
</View>
<BaseIndicator
highlight = { true }
icon = 'raised-hand' />
);
}
}

14
react/features/filmstrip/components/native/Thumbnail.js
View File

@ -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<Props> {
zOrder = { 1 } />
{ participant.role === PARTICIPANT_ROLE.MODERATOR
&& <ModeratorIndicator /> }
&& <View style = { styles.moderatorIndicatorContainer }>
<ModeratorIndicator />
</View> }
{ participant.dominantSpeaker
&& <DominantSpeakerIndicator /> }
<RaisedHandIndicator participantId = { participant.id } />
<View style = { styles.thumbnailTopIndicatorContainer }>
<RaisedHandIndicator participantId = { participant.id } />
{ participant.dominantSpeaker
&& <DominantSpeakerIndicator /> }
</View>
<Container style = { styles.thumbnailIndicatorContainer }>
{ audioMuted

14
react/features/filmstrip/components/native/VideoMutedIndicator.js
View File

@ -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 (
<Icon
name = 'camera-disabled'
style = { styles.thumbnailIndicator } />
<BaseIndicator
highlight = { false }
icon = 'camera-disabled' />
);
}
}

58
react/features/filmstrip/components/native/styles.js
View File

@ -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'
},

10
react/features/filmstrip/components/web/RaisedHandIndicator.js
View File

@ -34,15 +34,11 @@ type Props = AbstractProps & {
*/
class RaisedHandIndicator extends AbstractRaisedHandIndicator<Props> {
/**
* 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 (
<BaseIndicator
className = 'raisehandindicator indicator show-inline'