init

react/features/presence-status/components/PresenceLabel.tsx

@@ -0,0 +1,129 @@
+import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../app/types';
+import { translate } from '../../base/i18n/functions';
+import { getParticipantById } from '../../base/participants/functions';
+import { Text } from '../../base/react/components/index';
+import { STATUS_TO_I18N_KEY } from '../constants';
+import { presenceStatusDisabled } from '../functions';
+
+/**
+ * The type of the React {@code Component} props of {@link PresenceLabel}.
+ */
+interface IProps extends WithTranslation {
+
+    /**
+     * The current present status associated with the passed in participantID
+     * prop.
+     */
+    _presence: string;
+
+    /**
+     * Class name for the presence label.
+     */
+    className: string;
+
+    /**
+     * Default presence status that will be displayed if user's presence status
+     * is not available.
+     */
+    defaultPresence: string;
+
+    /**
+     * The ID of the participant whose presence status should display.
+     */
+    participantID: string;
+
+    /**
+     * Styles for the presence label.
+     */
+    style: Object;
+}
+
+/**
+ * React {@code Component} for displaying the current presence status of a
+ * participant.
+ *
+ * @augments Component
+ */
+class PresenceLabel extends Component<IProps> {
+    /**
+     * The default values for {@code PresenceLabel} component's property types.
+     *
+     * @static
+     */
+    static defaultProps = {
+        _presence: ''
+    };
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const text = this._getPresenceText();
+
+        if (text === null) {
+            return null;
+        }
+
+        const { style, className } = this.props;
+
+        return (
+            <Text // @ts-ignore
+                className = { className }
+                { ...style }>
+                { text }
+            </Text>
+        );
+    }
+
+    /**
+     * Returns the text associated with the current presence status.
+     *
+     * @returns {string}
+     */
+    _getPresenceText() {
+        const { _presence, t } = this.props;
+
+        if (!_presence) {
+            return null;
+        }
+
+        const i18nKey = STATUS_TO_I18N_KEY[_presence as keyof typeof STATUS_TO_I18N_KEY];
+
+        if (!i18nKey) { // fallback to status value
+            return _presence;
+        }
+
+        return t(i18nKey);
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated {@code PresenceLabel}'s
+ * props.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Object} ownProps - The React Component props passed to the associated
+ * instance of {@code PresenceLabel}.
+ * @private
+ * @returns {{
+ *     _presence: (string|undefined)
+ * }}
+ */
+function _mapStateToProps(state: IReduxState, ownProps: any) {
+    const participant = getParticipantById(state, ownProps.participantID);
+
+    return {
+        _presence: presenceStatusDisabled() ? ''
+            : participant?.presence || ownProps.defaultPresence
+
+    };
+}
+
+export default translate(connect(_mapStateToProps)(PresenceLabel));

react/features/presence-status/constants.ts

@@ -0,0 +1,127 @@
+// User invite statuses
+
+/**
+ * Тhe status for a participant when it's invited to a conference.
+ *
+ * @type {string}
+ */
+export const INVITED = 'Invited';
+
+/**
+ * Тhe status for a participant when a call has been initiated.
+ *
+ * @type {string}
+ */
+export const CALLING = 'calling';
+
+/**
+ * Тhe status for a participant when the invite is received and its device(s)
+ * are ringing.
+ *
+ * @type {string}
+ */
+export const RINGING = 'ringing';
+
+/**
+ * A status for a participant that indicates the call is connected.
+ *
+ * @type {string}
+ */
+export const CONNECTED_USER = 'connected';
+
+/**
+ * The status for a participant when the invitation is received but the user
+ * has responded with busy message.
+ *
+ * @type {string}
+ */
+export const BUSY = 'busy';
+
+/**
+ * The status for a participant when the invitation is rejected.
+ *
+ * @type {string}
+ */
+export const REJECTED = 'rejected';
+
+/**
+ * The status for a participant when the invitation is ignored.
+ *
+ * @type {string}
+ */
+export const IGNORED = 'ignored';
+
+/**
+  * The status for a participant when the invitation is expired.
+ *
+ * @type {string}
+ */
+export const EXPIRED = 'expired';
+
+// Phone call statuses
+
+/**
+ * A status for a participant that indicates the call is in process of
+ * initialization.
+ * NOTE: Currently used for phone numbers only.
+ *
+ * @type {string}
+ */
+export const INITIALIZING_CALL = 'Initializing Call';
+
+/**
+ * A status for a participant that indicates the call is in process of
+ * connecting.
+ * NOTE: Currently used for phone numbers only.
+ *
+ * @type {string}
+ */
+export const CONNECTING = 'Connecting';
+
+/**
+ * A status for a participant that indicates the call is in process of
+ * connecting.
+ * NOTE: Currently used for phone numbers only.
+ *
+ * @type {string}
+ */
+export const CONNECTING2 = 'Connecting*';
+
+
+/**
+ * A status for a phone number participant that indicates the call is connected.
+ *
+ * @type {string}
+ */
+export const CONNECTED_PHONE_NUMBER = 'Connected';
+
+
+/**
+ * A status for a participant that indicates the call is disconnected.
+ * NOTE: Currently used for phone numbers only.
+ *
+ * @type {string}
+ */
+export const DISCONNECTED = 'Disconnected';
+
+/**
+ * Maps the presence status values to i18n translation keys.
+ *
+ * @type {Object<String, String>}
+ */
+export const STATUS_TO_I18N_KEY = {
+    [INVITED]: 'presenceStatus.invited',
+    [RINGING]: 'presenceStatus.ringing',
+    [CALLING]: 'presenceStatus.calling',
+    [BUSY]: 'presenceStatus.busy',
+    [REJECTED]: 'presenceStatus.rejected',
+    [IGNORED]: 'presenceStatus.ignored',
+    [EXPIRED]: 'presenceStatus.expired',
+
+    [INITIALIZING_CALL]: 'presenceStatus.initializingCall',
+    [CONNECTING]: 'presenceStatus.connecting',
+    [CONNECTING2]: 'presenceStatus.connecting2',
+    [CONNECTED_PHONE_NUMBER]: 'presenceStatus.connected',
+    [CONNECTED_USER]: 'presenceStatus.connected',
+    [DISCONNECTED]: 'presenceStatus.disconnected'
+};

react/features/presence-status/functions.ts

@@ -0,0 +1,8 @@
+/**
+ * Tells whether presence status should be displayed.
+ *
+ * @returns {boolean}
+ */
+export function presenceStatusDisabled() {
+    return Boolean(typeof interfaceConfig !== 'undefined' && interfaceConfig?.DISABLE_PRESENCE_STATUS);
+}