fix(ui) change streaming icon background + add tooltip (#12973)

lang/main.json

@@ -1295,9 +1295,11 @@
         "ldTooltip": "Viewing low definition video",
         "lowDefinition": "Low definition",
         "performanceSettings": "Performance settings",
+        "recording": "Recording in progress",
         "sd": "SD",
         "sdTooltip": "Viewing standard definition video",
-        "standardDefinition": "Standard definition"
+        "standardDefinition": "Standard definition",
+        "streaming": "Streaming in progress"
     },
     "videothumbnail": {
         "connectionInfo": "Connection Info",

react/features/recording/components/native/RecordingLabel.js

@@ -26,26 +26,6 @@ class RecordingLabel extends AbstractRecordingLabel {
      * @inheritdoc
      */
     _renderLabel() {
-        let indicatorStyle = styles.indicatorStyle;
-
-        switch (this.props.mode) {
-        case JitsiRecordingConstants.mode.STREAM:
-            indicatorStyle = {
-                ...indicatorStyle,
-                ...styles.indicatorLive
-            };
-            break;
-        case JitsiRecordingConstants.mode.FILE:
-            indicatorStyle = {
-                ...indicatorStyle,
-                ...styles.indicatorRecording
-            };
-            break;
-        default:
-            // Invalid mode is passed to the component.
-            return null;
-        }
-
         let status = 'on';
 
         switch (this.props._status) {
@@ -60,7 +40,7 @@ class RecordingLabel extends AbstractRecordingLabel {
         return (
             <Label
                 status = { status }
-                style = { indicatorStyle }
+                style = { styles.indicatorStyle }
                 text = { this.props.t(this._getLabelKey()) } />
         );
     }

react/features/recording/components/native/styles.js

@@ -1,10 +1,8 @@
 // @flow
 
-import { ColorPalette, createStyleSheet } from '../../../base/styles';
+import { createStyleSheet } from '../../../base/styles';
 import BaseTheme from '../../../base/ui/components/BaseTheme';
 
-export const LIVE_LABEL_COLOR = ColorPalette.blue;
-
 /**
  * The styles of the React {@code Components} of the feature recording.
  */
@@ -16,20 +14,7 @@ export default createStyleSheet({
     indicatorStyle: {
         marginRight: 4,
         marginLeft: 0,
-        marginBottom: 0
-    },
-
-    /**
-     * Style for the recording indicator.
-     */
-    indicatorLive: {
-        backgroundColor: LIVE_LABEL_COLOR
-    },
-
-    /**
-     * Style for the recording indicator.
-     */
-    indicatorRecording: {
+        marginBottom: 0,
         backgroundColor: BaseTheme.palette.iconError
     }
 });

react/features/recording/components/web/RecordingLabel.tsx

@@ -7,6 +7,9 @@ import { IconRecord, IconSites } from '../../../base/icons/svg';
 import Label from '../../../base/label/components/web/Label';
 import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
 import { connect } from '../../../base/redux/functions';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
+import { Tooltip } from '../../../base/tooltip';
 import AbstractRecordingLabel, {
     _mapStateToProps
 
@@ -22,10 +25,7 @@ import AbstractRecordingLabel, {
  */
 const styles = (theme: Theme) => {
     return {
-        [JitsiRecordingConstants.mode.STREAM]: {
-            background: theme.palette.support07
-        },
-        [JitsiRecordingConstants.mode.FILE]: {
+        record: {
             background: theme.palette.actionDanger
         }
     };
@@ -52,14 +52,19 @@ class RecordingLabel extends AbstractRecordingLabel {
         }
 
         // @ts-ignore
-        const { classes, mode } = this.props;
+        const { classes, mode, t } = this.props;
+        const isRecording = mode === JitsiRecordingConstants.mode.FILE;
+        const icon = isRecording ? IconRecord : IconSites;
+        const content = t(isRecording ? 'videoStatus.recording' : 'videoStatus.streaming');
 
         return (
-            <div>
+            <Tooltip
+                content = { content }
+                position = { 'bottom' }>
                 <Label
-                    className = { classes?.[mode] }
-                    icon = { mode === JitsiRecordingConstants.mode.FILE ? IconRecord : IconSites } />
-            </div>
+                    className = { classes?.record }
+                    icon = { icon } />
+            </Tooltip>
         );
     }
 }