init

react/features/display-name/components/native/DisplayNameLabel.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { Text, TextStyle, View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import {
+    getParticipantById,
+    getParticipantDisplayName,
+    isScreenShareParticipant
+} from '../../../base/participants/functions';
+
+import styles from './styles';
+
+interface IProps {
+
+    /**
+     * The name of the participant to render.
+     */
+    _participantName: string;
+
+    /**
+     * True of the label needs to be rendered. False otherwise.
+     */
+    _render: boolean;
+
+    /**
+     * Whether or not the name is in a container.
+     */
+    contained?: boolean;
+
+    /**
+     * The ID of the participant to render the label for.
+     */
+    participantId: string;
+}
+
+/**
+ * Renders a label with the display name of the on-stage participant.
+ */
+class DisplayNameLabel extends React.Component<IProps> {
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        if (!this.props._render) {
+            return null;
+        }
+
+        return (
+            <View
+                style = { (this.props.contained ? styles.displayNamePadding : styles.displayNameBackdrop
+                ) as ViewStyle }>
+                <Text
+                    numberOfLines = { 1 }
+                    style = { styles.displayNameText as TextStyle }>
+                    { this.props._participantName }
+                </Text>
+            </View>
+        );
+    }
+}
+
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {any} state - The Redux state.
+ * @param {IProps} ownProps - The own props of the component.
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) {
+    const participant = getParticipantById(state, ownProps.participantId ?? '');
+
+    return {
+        _participantName: getParticipantDisplayName(state, ownProps.participantId ?? ''),
+        _render: Boolean(participant && (!participant?.local || ownProps.contained)
+            && (!participant?.fakeParticipant || isScreenShareParticipant(participant)))
+    };
+}
+
+export default connect(_mapStateToProps)(DisplayNameLabel);

react/features/display-name/components/native/DisplayNamePrompt.tsx

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import InputDialog from '../../../base/dialog/components/native/InputDialog';
+import { onSetDisplayName } from '../../functions';
+import { IProps } from '../../types';
+
+/**
+ * Implements a component to render a display name prompt.
+ */
+class DisplayNamePrompt extends Component<IProps> {
+    _onSetDisplayName: (displayName: string) => boolean;
+
+    /**
+     * Initializes a new {@code DisplayNamePrompt} instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handlers so they are only bound once for every instance.
+        this._onSetDisplayName = onSetDisplayName(props.dispatch, props.onPostSubmit);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        return (
+            <InputDialog
+                descriptionKey = 'dialog.enterDisplayName'
+                disableCancel = { true }
+                onSubmit = { this._onSetDisplayName }
+                titleKey = 'dialog.displayNameRequired'
+                validateInput = { this.props.validateInput } />
+        );
+    }
+}
+
+export default connect()(DisplayNamePrompt);

react/features/display-name/components/native/styles.ts

@@ -0,0 +1,20 @@
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+
+export default {
+    displayNameBackdrop: {
+        alignSelf: 'center',
+        backgroundColor: BaseTheme.palette.ui01,
+        borderRadius: BaseTheme.shape.borderRadius,
+        padding: 6
+    },
+
+    displayNamePadding: {
+        paddingRight: 6
+    },
+
+    displayNameText: {
+        color: BaseTheme.palette.text01,
+        fontSize: 14,
+        fontWeight: 'bold'
+    }
+};