snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/invite/components/add-people-dialog/web/AddPeopleDialog.tsx

@@ -0,0 +1,239 @@
+import React, { useEffect } from 'react';
+import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+
+import { createInviteDialogEvent } from '../../../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../../../analytics/functions';
+import { IReduxState } from '../../../../app/types';
+import { getInviteURL } from '../../../../base/connection/functions';
+import { translate } from '../../../../base/i18n/functions';
+import { JitsiRecordingConstants } from '../../../../base/lib-jitsi-meet';
+import Dialog from '../../../../base/ui/components/web/Dialog';
+import { StatusCode } from '../../../../base/util/uri';
+import { isDynamicBrandingDataLoaded } from '../../../../dynamic-branding/functions.any';
+import { getActiveSession } from '../../../../recording/functions';
+import { updateDialInNumbers } from '../../../actions.web';
+import {
+    _getDefaultPhoneNumber,
+    getInviteText,
+    getInviteTextiOS,
+    isAddPeopleEnabled,
+    isDialInEnabled,
+    isDialOutEnabled,
+    isSharingEnabled,
+    sharingFeatures
+} from '../../../functions';
+
+import CopyMeetingLinkSection from './CopyMeetingLinkSection';
+import DialInLimit from './DialInLimit';
+import DialInSection from './DialInSection';
+import InviteByEmailSection from './InviteByEmailSection';
+import InviteContactsSection from './InviteContactsSection';
+import LiveStreamSection from './LiveStreamSection';
+
+interface IProps extends WithTranslation {
+
+    /**
+     * The object representing the dialIn feature.
+     */
+    _dialIn: any;
+
+    /**
+     * Whether or not dial in number should be visible.
+     */
+    _dialInVisible: boolean;
+
+    /**
+     * Whether or not email sharing features should be visible.
+     */
+    _emailSharingVisible: boolean;
+
+    /**
+     * The meeting invitation text.
+     */
+    _invitationText: string;
+
+    /**
+     * The custom no new-lines meeting invitation text for iOS default email.
+     * Needed because of this mailto: iOS issue: https://developer.apple.com/forums/thread/681023.
+     */
+    _invitationTextiOS: string;
+
+    /**
+     * An alternate app name to be displayed in the email subject.
+     */
+    _inviteAppName?: string | null;
+
+    /**
+     * Whether or not invite contacts should be visible.
+     */
+    _inviteContactsVisible: boolean;
+
+    /**
+     * The current url of the conference to be copied onto the clipboard.
+     */
+    _inviteUrl: string;
+
+    /**
+     * Whether the dial in limit has been exceeded.
+     */
+    _isDialInOverLimit?: boolean;
+
+    /**
+     * The current known URL for a live stream in progress.
+     */
+    _liveStreamViewURL?: string;
+
+    /**
+     * The default phone number.
+     */
+    _phoneNumber?: string | null;
+
+    /**
+     * Whether or not url sharing button should be visible.
+     */
+    _urlSharingVisible: boolean;
+
+    /**
+     * Method to update the dial in numbers.
+     */
+    updateNumbers: Function;
+}
+
+/**
+ * Invite More component.
+ *
+ * @returns {React$Element<any>}
+ */
+function AddPeopleDialog({
+    _dialIn,
+    _dialInVisible,
+    _urlSharingVisible,
+    _emailSharingVisible,
+    _invitationText,
+    _invitationTextiOS,
+    _inviteAppName,
+    _inviteContactsVisible,
+    _inviteUrl,
+    _isDialInOverLimit,
+    _liveStreamViewURL,
+    _phoneNumber,
+    t,
+    updateNumbers
+}: IProps) {
+
+    /**
+     * Updates the dial-in numbers.
+     */
+    useEffect(() => {
+        if (!_dialIn.numbers) {
+            updateNumbers();
+        }
+    }, []);
+
+    /**
+     * Sends analytics events when the dialog opens/closes.
+     *
+     * @returns {void}
+     */
+    useEffect(() => {
+        sendAnalytics(createInviteDialogEvent(
+            'opened', 'dialog'));
+
+        return () => {
+            sendAnalytics(createInviteDialogEvent(
+                'closed', 'dialog'));
+        };
+    }, []);
+
+    const inviteSubject = t('addPeople.inviteMoreMailSubject', {
+        appName: _inviteAppName ?? interfaceConfig.APP_NAME
+    });
+
+    return (
+        <Dialog
+            cancel = {{ hidden: true }}
+            ok = {{ hidden: true }}
+            titleKey = 'addPeople.inviteMorePrompt'>
+            <div className = 'invite-more-dialog'>
+                { _inviteContactsVisible && <InviteContactsSection /> }
+                {_urlSharingVisible ? <CopyMeetingLinkSection url = { _inviteUrl } /> : null}
+                {
+                    _emailSharingVisible
+                        ? <InviteByEmailSection
+                            inviteSubject = { inviteSubject }
+                            inviteText = { _invitationText }
+                            inviteTextiOS = { _invitationTextiOS } />
+                        : null
+                }
+                <div className = 'invite-more-dialog separator' />
+                {
+                    _liveStreamViewURL
+                        && <LiveStreamSection liveStreamViewURL = { _liveStreamViewURL } />
+                }
+                {
+                    _phoneNumber
+                        && _dialInVisible
+                        && <DialInSection phoneNumber = { _phoneNumber } />
+                }
+                {
+                    !_phoneNumber && _dialInVisible && _isDialInOverLimit && <DialInLimit />
+                }
+            </div>
+        </Dialog>
+    );
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated props for the
+ * {@code AddPeopleDialog} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Object} ownProps - The properties explicitly passed to the component.
+ * @private
+ * @returns {IProps}
+ */
+function mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) {
+    const currentLiveStreamingSession
+        = getActiveSession(state, JitsiRecordingConstants.mode.STREAM);
+    const { iAmRecorder, inviteAppName } = state['features/base/config'];
+    const addPeopleEnabled = isAddPeopleEnabled(state);
+    const dialOutEnabled = isDialOutEnabled(state);
+    const hideInviteContacts = iAmRecorder || (!addPeopleEnabled && !dialOutEnabled);
+    const dialIn = state['features/invite']; // @ts-ignore
+    const phoneNumber = dialIn?.numbers ? _getDefaultPhoneNumber(dialIn.numbers) : undefined;
+    const isDialInOverLimit = dialIn?.error?.status === StatusCode.PaymentRequired;
+
+    return {
+        _dialIn: dialIn,
+        _dialInVisible: isSharingEnabled(sharingFeatures.dialIn) && isDialInEnabled(state),
+        _urlSharingVisible: isDynamicBrandingDataLoaded(state) && isSharingEnabled(sharingFeatures.url),
+        _emailSharingVisible: isSharingEnabled(sharingFeatures.email),
+        _invitationText: getInviteText({ state,
+            phoneNumber,
+            t: ownProps.t }),
+        _invitationTextiOS: getInviteTextiOS({ state,
+            phoneNumber,
+            t: ownProps.t }),
+        _inviteAppName: inviteAppName,
+        _inviteContactsVisible: interfaceConfig.ENABLE_DIAL_OUT && !hideInviteContacts,
+        _inviteUrl: getInviteURL(state),
+        _isDialInOverLimit: isDialInOverLimit,
+        _liveStreamViewURL: currentLiveStreamingSession?.liveStreamViewURL,
+        _phoneNumber: phoneNumber
+    };
+}
+
+/**
+ * Maps dispatching of some action to React component props.
+ *
+ * @param {Function} dispatch - Redux action dispatcher.
+ * @returns {IProps}
+ */
+const mapDispatchToProps = {
+    updateNumbers: () => updateDialInNumbers()
+};
+
+export default translate(
+    connect(mapStateToProps, mapDispatchToProps)(AddPeopleDialog)
+);