Generalize indicators

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<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<*>
+
 }
 
 /**

react/features/filmstrip/components/native/AudioMutedIndicator.js

@@ -1,13 +1,13 @@
+// @flow
+
 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.
  */
-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
+            <BaseIndicator
-                name = 'mic-disabled'
+                highlight = { false }
-                style = { styles.thumbnailIndicator } />
+                icon = 'mic-disabled' />
         );
     }
 }

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

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

react/features/filmstrip/components/native/ModeratorIndicator.js

@@ -1,13 +1,13 @@
+// @flow
+
 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.
  */
-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
+            <BaseIndicator
-                name = 'star'
+                highlight = { false }
-                style = { styles.moderatorIndicator } />
+                icon = 'star' />
         );
     }
 }

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

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

react/features/filmstrip/components/native/VideoMutedIndicator.js

@@ -1,13 +1,13 @@
+// @flow
+
 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.
  */
-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
+            <BaseIndicator
-                name = 'camera-disabled'
+                highlight = { false }
-                style = { styles.thumbnailIndicator } />
+                icon = 'camera-disabled' />
         );
     }
 }

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,
+        flexDirection: 'row',
-        padding: 4,
+        justifyContent: 'center',
-        position: 'absolute',
+        height: 20,
-        top: 4
+        width: 20
     },
 
     /**
@@ -84,16 +79,10 @@ export default {
         flexDirection: 'row'
     },
 
-    /**
+    moderatorIndicatorContainer: {
-     * Moderator indicator style.
-     */
-    moderatorIndicator: {
-        backgroundColor: 'transparent',
         bottom: 4,
-        color: ColorPalette.white,
         position: 'absolute',
-        right: 4,
+        right: 4
-        ...indicator
     },
 
     /**
@@ -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'
     },

react/features/filmstrip/components/web/RaisedHandIndicator.js

@@ -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() {
+    _renderIndicator() {
-        if (!this.props._raisedHand) {
-            return null;
-        }
-
         return (
             <BaseIndicator
                 className = 'raisehandindicator indicator show-inline'