From 9eb9306e879a15088c2021ec6cfad88759c4e036 Mon Sep 17 00:00:00 2001
From: Bettenbuk Zoltan <zoltan.bettenbuk@gmail.com>
Date: Tue, 22 May 2018 21:44:40 +0200
Subject: [PATCH] [RN] Implement web's CircularLabel component for mobile

---
 .../label/components/AbstractCircularLabel.js | 17 +++++++
 .../label/components/CircularLabel.native.js  | 44 +++++++++++++++++++
 .../label/components/CircularLabel.web.js     | 19 ++++----
 .../features/base/label/components/styles.js  | 30 +++++++++++++
 .../components/RecordingLabel.web.js          |  6 +--
 .../components/VideoQualityLabel.web.js       |  5 +--
 6 files changed, 105 insertions(+), 16 deletions(-)
 create mode 100644 react/features/base/label/components/AbstractCircularLabel.js
 create mode 100644 react/features/base/label/components/styles.js

diff --git a/react/features/base/label/components/AbstractCircularLabel.js b/react/features/base/label/components/AbstractCircularLabel.js
new file mode 100644
index 000000000..3a69bfcf3
--- /dev/null
+++ b/react/features/base/label/components/AbstractCircularLabel.js
@@ -0,0 +1,17 @@
+// @flow
+import { Component } from 'react';
+
+export type Props = {
+
+    /**
+     * String that will be rendered as the label itself.
+     */
+    label: string
+};
+
+/**
+ * Abstract class for the {@code CircularLabel} component.
+ */
+export default class AbstractCircularLabel<P: Props> extends Component<P> {
+
+}
diff --git a/react/features/base/label/components/CircularLabel.native.js b/react/features/base/label/components/CircularLabel.native.js
index e69de29bb..224ece6f8 100644
--- a/react/features/base/label/components/CircularLabel.native.js
+++ b/react/features/base/label/components/CircularLabel.native.js
@@ -0,0 +1,44 @@
+// @flow
+import React from 'react';
+import { Text, View } from 'react-native';
+
+import { combineStyles, type StyleType } from '../../styles';
+
+import AbstractCircularLabel, {
+    type Props as AbstractProps
+} from './AbstractCircularLabel';
+import styles from './styles';
+
+type Props = AbstractProps & {
+
+    /**
+     * Style of the label.
+     */
+    style?: ?StyleType
+};
+
+/**
+ * Renders a circular indicator to be used for status icons, such as recording
+ * on, audio-only conference, video quality and similar.
+ */
+export default class CircularLabel extends AbstractCircularLabel<Props> {
+    /**
+     * Implements React {@link Component}'s render.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { label, style } = this.props;
+
+        return (
+            <View
+                style = {
+                    combineStyles(styles.indicatorContainer, style)
+                }>
+                <Text style = { styles.indicatorText }>
+                    { label }
+                </Text>
+            </View>
+        );
+    }
+}
diff --git a/react/features/base/label/components/CircularLabel.web.js b/react/features/base/label/components/CircularLabel.web.js
index 2bf72c4ca..cc5cba3b3 100644
--- a/react/features/base/label/components/CircularLabel.web.js
+++ b/react/features/base/label/components/CircularLabel.web.js
@@ -1,13 +1,12 @@
 // @flow
 
-import React, { Component } from 'react';
+import React from 'react';
 
-type Props = {
+import AbstractCircularLabel, {
+    type Props as AbstractProps
+} from './AbstractCircularLabel';
 
-    /**
-     * The children to be displayed within {@code CircularLabel}.
-     */
-    children: React$Node,
+type Props = AbstractProps & {
 
     /**
      * Additional CSS class names to add to the root of {@code CircularLabel}.
@@ -26,7 +25,7 @@ type Props = {
  *
  * @extends Component
  */
-export default class CircularLabel extends Component<Props> {
+export default class CircularLabel extends AbstractCircularLabel<Props> {
     /**
      * Default values for {@code CircularLabel} component's properties.
      *
@@ -44,16 +43,16 @@ export default class CircularLabel extends Component<Props> {
      */
     render() {
         const {
-            children,
             className,
-            id
+            id,
+            label
         } = this.props;
 
         return (
             <div
                 className = { `circular-label ${className}` }
                 id = { id }>
-                { children }
+                { label }
             </div>
         );
     }
diff --git a/react/features/base/label/components/styles.js b/react/features/base/label/components/styles.js
new file mode 100644
index 000000000..f51082e0f
--- /dev/null
+++ b/react/features/base/label/components/styles.js
@@ -0,0 +1,30 @@
+// @flow
+
+import { ColorPalette, createStyleSheet } from '../../styles';
+
+/**
+ * The styles of the native base/label feature.
+ */
+export default createStyleSheet({
+
+    /**
+     * The outermost view.
+     */
+    indicatorContainer: {
+        alignItems: 'center',
+        backgroundColor: '#808080',
+        borderRadius: 18,
+        borderWidth: 0,
+        flex: 0,
+        height: 36,
+        justifyContent: 'center',
+        margin: 5,
+        opacity: 0.6,
+        width: 36
+    },
+
+    indicatorText: {
+        color: ColorPalette.white,
+        fontSize: 12
+    }
+});
diff --git a/react/features/recording/components/RecordingLabel.web.js b/react/features/recording/components/RecordingLabel.web.js
index 99f0e147f..fa68f2c41 100644
--- a/react/features/recording/components/RecordingLabel.web.js
+++ b/react/features/recording/components/RecordingLabel.web.js
@@ -189,9 +189,9 @@ class RecordingLabel extends Component<Props, State> {
                     ? <div>
                         { this.props.t(messageKey) }
                     </div>
-                    : <CircularLabel className = { circularLabelClass }>
-                        { this.props.t(circularLabelKey) }
-                    </CircularLabel> }
+                    : <CircularLabel
+                        className = { circularLabelClass }
+                        label = { this.props.t(circularLabelKey) } /> }
             </div>
         );
     }
diff --git a/react/features/video-quality/components/VideoQualityLabel.web.js b/react/features/video-quality/components/VideoQualityLabel.web.js
index da063e683..dcd2aee99 100644
--- a/react/features/video-quality/components/VideoQualityLabel.web.js
+++ b/react/features/video-quality/components/VideoQualityLabel.web.js
@@ -109,9 +109,8 @@ export class VideoQualityLabel extends Component {
                 position = { 'left' }>
                 <CircularLabel
                     className = { className }
-                    id = 'videoResolutionLabel'>
-                    { labelContent }
-                </CircularLabel>
+                    id = 'videoResolutionLabel'
+                    label = { labelContent } />
             </Tooltip>
         );
     }