fix(rn,recording) use the same icon as web

lang/main.json

@@ -998,7 +998,6 @@
         "limitNotificationDescriptionNative": "Due to high demand your recording will be limited to {{limit}} min. For unlimited recordings try <3>{{app}}</3>.",
         "limitNotificationDescriptionWeb": "Due to high demand your recording will be limited to {{limit}} min. For unlimited recordings try <a href={{url}} rel='noopener noreferrer' target='_blank'>{{app}}</a>.",
         "linkGenerated": "We have generated a link to your recording.",
-        "live": "LIVE",
         "localRecordingNoNotificationWarning": "The recording will not be announced to other participants. You will need to let them know that the meeting is recorded.",
         "localRecordingNoVideo": "Video is not being recorded",
         "localRecordingStartWarning": "Please make sure you stop the recording before exiting the meeting in order to save it.",
@@ -1015,7 +1014,6 @@
         "onBy": "{{name}} started the recording",
         "onlyRecordSelf": "Record only my audio and video streams",
         "pending": "Preparing to record the meeting...",
-        "rec": "REC",
         "recordAudioAndVideo": "Record audio and video",
         "recordTranscription": "Record transcription",
         "saveLocalRecording": "Save recording file locally (Beta)",

react/features/recording/components/AbstractRecordingLabel.ts

@@ -21,7 +21,7 @@ interface IProps extends WithTranslation {
     _iAmRecorder: boolean;
 
     /**
-     * The status of the highermost priority session.
+     * The status of the higher priority session.
      */
     _status?: string;
 
@@ -56,8 +56,7 @@ const STALE_TIMEOUT = 10 * 1000;
 /**
  * Abstract class for the {@code RecordingLabel} component.
  */
-export default class AbstractRecordingLabel
-    extends Component<IProps, IState> {
+export default class AbstractRecordingLabel extends Component<IProps, IState> {
     _mounted: boolean;
 
     /**
@@ -124,24 +123,6 @@ export default class AbstractRecordingLabel
             ? this._renderLabel() : null;
     }
 
-    /**
-     * Returns the label key that this indicator should render.
-     *
-     * @protected
-     * @returns {?string}
-     */
-    _getLabelKey() {
-        switch (this.props.mode) {
-        case JitsiRecordingConstants.mode.STREAM:
-            return 'recording.live';
-        case JitsiRecordingConstants.mode.FILE:
-            return 'recording.rec';
-        default:
-            // Invalid mode is passed to the component.
-            return undefined;
-        }
-    }
-
     /**
      * Renders the platform specific label component.
      *
@@ -169,8 +150,7 @@ export default class AbstractRecordingLabel
                     }
 
                     // Only if it's still OFF.
-                    if (this.props._status
-                            === JitsiRecordingConstants.status.OFF) {
+                    if (this.props._status === JitsiRecordingConstants.status.OFF) {
                         this.setState({
                             staleLabel: true
                         });

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n/functions';
+import { IconRecord, IconSites } from '../../../base/icons/svg';
 import Label from '../../../base/label/components/native/Label';
 import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
 import { StyleType } from '../../../base/styles/functions.any';
@@ -26,6 +27,8 @@ class RecordingLabel extends AbstractRecordingLabel {
      */
     _renderLabel() {
         let status: 'on' | 'in_progress' | 'off' = 'on';
+        const isRecording = this.props.mode === JitsiRecordingConstants.mode.FILE;
+        const icon = isRecording ? IconRecord : IconSites;
 
         switch (this.props._status) {
         case JitsiRecordingConstants.status.PENDING:
@@ -38,9 +41,9 @@ class RecordingLabel extends AbstractRecordingLabel {
 
         return (
             <Label
+                icon = { icon }
                 status = { status }
-                style = { styles.indicatorStyle as StyleType }
-                text = { this.props.t(this._getLabelKey() ?? '') } />
+                style = { styles.indicatorStyle as StyleType } />
         );
     }
 }