From 79bb98dab3261c53ccd13a5b1a3ebd95c72f0683 Mon Sep 17 00:00:00 2001 From: horymury <39557534+horymury@users.noreply.github.com> Date: Wed, 24 Feb 2021 11:37:14 +0200 Subject: [PATCH] (feature) - Add support for custom DID numbers page url --- react/features/dynamic-branding/reducer.js | 10 +++ .../add-people-dialog/web/AddPeopleDialog.js | 73 ++++++------------- .../add-people-dialog/web/DialInSection.js | 44 ++++++----- react/features/invite/functions.js | 72 +++++++++--------- .../no-audio-signal/components/DialInLink.js | 39 +++------- react/features/prejoin/actions.js | 6 +- 6 files changed, 101 insertions(+), 143 deletions(-) diff --git a/react/features/dynamic-branding/reducer.js b/react/features/dynamic-branding/reducer.js index a76e4aa06..77edf550b 100644 --- a/react/features/dynamic-branding/reducer.js +++ b/react/features/dynamic-branding/reducer.js @@ -58,6 +58,14 @@ const DEFAULT_STATE = { */ defaultBranding: true, + /** + * Url for a custom page for DID numbers list. + * + * @public + * @type {string} + */ + didPageUrl: '', + /** * The custom invite domain. * @@ -101,6 +109,7 @@ ReducerRegistry.register(STORE_NAME, (state = DEFAULT_STATE, action) => { backgroundColor, backgroundImageUrl, defaultBranding, + didPageUrl, inviteDomain, logoClickUrl, logoImageUrl @@ -110,6 +119,7 @@ ReducerRegistry.register(STORE_NAME, (state = DEFAULT_STATE, action) => { backgroundColor, backgroundImageUrl, defaultBranding, + didPageUrl, inviteDomain, logoClickUrl, logoImageUrl, diff --git a/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js b/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js index 6a9a44329..f0275ce80 100644 --- a/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js +++ b/react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js @@ -1,14 +1,12 @@ // @flow -import React, { useState, useEffect } from 'react'; +import React, { useEffect } from 'react'; import { createInviteDialogEvent, sendAnalytics } from '../../../../analytics'; -import { getRoomName } from '../../../../base/conference'; import { getInviteURL } from '../../../../base/connection'; import { Dialog } from '../../../../base/dialog'; import { translate } from '../../../../base/i18n'; import { JitsiRecordingConstants } from '../../../../base/lib-jitsi-meet'; -import { getLocalParticipant } from '../../../../base/participants'; import { connect } from '../../../../base/redux'; import { isVpaasMeeting } from '../../../../billing-counter/functions'; import EmbedMeetingTrigger from '../../../../embed-meeting/components/EmbedMeetingTrigger'; @@ -26,11 +24,6 @@ declare var interfaceConfig: Object; type Props = { - /** - * The name of the current conference. Used as part of inviting users. - */ - _conferenceName: string, - /** * The object representing the dialIn feature. */ @@ -41,6 +34,11 @@ type Props = { */ _embedMeetingVisible: boolean, + /** + * The meeting invitation text. + */ + _invitationText: string, + /** * Whether or not invite contacts should be visible. */ @@ -57,14 +55,9 @@ type Props = { _liveStreamViewURL: string, /** - * The redux representation of the local participant. + * The default phone number. */ - _localParticipantName: ?string, - - /** - * The current location url of the conference. - */ - _locationUrl: Object, + _phoneNumber: ?string, /** * Invoked to obtain translated strings. @@ -83,17 +76,15 @@ type Props = { * @returns {React$Element} */ function AddPeopleDialog({ - _conferenceName, _dialIn, _embedMeetingVisible, + _invitationText, _inviteContactsVisible, _inviteUrl, _liveStreamViewURL, - _localParticipantName, - _locationUrl, + _phoneNumber, t, updateNumbers }: Props) { - const [ phoneNumber, setPhoneNumber ] = useState(undefined); /** * Updates the dial-in numbers. @@ -119,27 +110,6 @@ function AddPeopleDialog({ }; }, []); - /** - * Updates the phone number in the state once the dial-in numbers are fetched. - * - * @returns {void} - */ - useEffect(() => { - if (!phoneNumber && _dialIn && _dialIn.numbers) { - setPhoneNumber(_getDefaultPhoneNumber(_dialIn.numbers)); - } - }, [ _dialIn ]); - - const invite = getInviteText({ - _conferenceName, - _localParticipantName, - _inviteUrl, - _locationUrl, - _dialIn, - _liveStreamViewURL, - phoneNumber, - t - }); const inviteSubject = t('addPeople.inviteMoreMailSubject', { appName: interfaceConfig.APP_NAME }); @@ -156,7 +126,7 @@ function AddPeopleDialog({ + inviteText = { _invitationText } /> { _embedMeetingVisible && }
{ @@ -165,11 +135,7 @@ function AddPeopleDialog({ } { _dialIn.numbers - && + && }
@@ -181,29 +147,32 @@ function AddPeopleDialog({ * {@code AddPeopleDialog} component. * * @param {Object} state - The Redux state. + * @param {Object} ownProps - The properties explicitly passed to the component. * @private * @returns {Props} */ -function mapStateToProps(state) { - const localParticipant = getLocalParticipant(state); +function mapStateToProps(state, ownProps) { const currentLiveStreamingSession = getActiveSession(state, JitsiRecordingConstants.mode.STREAM); const { iAmRecorder } = state['features/base/config']; const addPeopleEnabled = isAddPeopleEnabled(state); const dialOutEnabled = isDialOutEnabled(state); const hideInviteContacts = iAmRecorder || (!addPeopleEnabled && !dialOutEnabled); + const dialIn = state['features/invite']; + const phoneNumber = dialIn && dialIn.numbers ? _getDefaultPhoneNumber(dialIn.numbers) : undefined; return { - _conferenceName: getRoomName(state), - _dialIn: state['features/invite'], + _dialIn: dialIn, _embedMeetingVisible: !isVpaasMeeting(state), + _invitationText: getInviteText({ state, + phoneNumber, + t: ownProps.t }), _inviteContactsVisible: interfaceConfig.ENABLE_DIAL_OUT && !hideInviteContacts, _inviteUrl: getInviteURL(state), _liveStreamViewURL: currentLiveStreamingSession && currentLiveStreamingSession.liveStreamViewURL, - _localParticipantName: localParticipant?.name, - _locationUrl: state['features/base/connection'].locationURL + _phoneNumber: phoneNumber }; } diff --git a/react/features/invite/components/add-people-dialog/web/DialInSection.js b/react/features/invite/components/add-people-dialog/web/DialInSection.js index 8aee0afb5..61da04fd1 100644 --- a/react/features/invite/components/add-people-dialog/web/DialInSection.js +++ b/react/features/invite/components/add-people-dialog/web/DialInSection.js @@ -3,26 +3,22 @@ import React from 'react'; import { translate } from '../../../../base/i18n'; +import { connect } from '../../../../base/redux'; import { getDialInfoPageURL } from '../../../functions'; import DialInNumber from './DialInNumber'; type Props = { - /** - * The name of the current conference. Used as part of inviting users. - */ - conferenceName: string, - /** * The object representing the dialIn feature. */ - dialIn: Object, + _dialIn: Object, /** - * The current location url of the conference. + * The url of the page containing the dial-in numbers list. */ - locationUrl: Object, + _dialInfoPageUrl: string, /** * The phone number to dial to begin the process of dialing into a @@ -45,25 +41,19 @@ type Props = { * @returns {null|ReactElement} */ function DialInSection({ - conferenceName, - dialIn, - locationUrl, + _dialIn, + _dialInfoPageUrl, phoneNumber, t }: Props) { return (
{ t('info.moreNumbers') } @@ -72,4 +62,20 @@ function DialInSection({ ); } -export default translate(DialInSection); + +/** + * Maps (parts of) the Redux state to the associated props for the + * {@code DialInLink} component. + * + * @param {Object} state - The Redux state. + * @private + * @returns {Props} + */ +function _mapStateToProps(state) { + return { + _dialIn: state['features/invite'], + _dialInfoPageUrl: getDialInfoPageURL(state) + }; +} + +export default translate(connect(_mapStateToProps)(DialInSection)); diff --git a/react/features/invite/functions.js b/react/features/invite/functions.js index a154dea38..e9a39fe9e 100644 --- a/react/features/invite/functions.js +++ b/react/features/invite/functions.js @@ -1,7 +1,11 @@ // @flow +import { getActiveSession } from '../../features/recording/functions'; +import { getRoomName } from '../base/conference'; +import { getInviteURL } from '../base/connection'; import { i18next } from '../base/i18n'; -import { isLocalParticipantModerator } from '../base/participants'; +import { JitsiRecordingConstants } from '../base/lib-jitsi-meet'; +import { getLocalParticipant, isLocalParticipantModerator } from '../base/participants'; import { toState } from '../base/redux'; import { doGetJSON, parseURIString } from '../base/util'; import { isVpaasMeeting } from '../billing-counter/functions'; @@ -239,43 +243,44 @@ export function getInviteResultsForQuery( * @returns {string} */ export function getInviteText({ - _conferenceName, - _localParticipantName, - _inviteUrl, - _locationUrl, - _dialIn, - _liveStreamViewURL, + state, phoneNumber, t }: Object) { - const inviteURL = _decodeRoomURI(_inviteUrl); + const dialIn = state['features/invite']; + const inviteUrl = getInviteURL(state); + const currentLiveStreamingSession = getActiveSession(state, JitsiRecordingConstants.mode.STREAM); + const liveStreamViewURL + = currentLiveStreamingSession + && currentLiveStreamingSession.liveStreamViewURL; + const localParticipant = getLocalParticipant(state); + const localParticipantName = localParticipant?.name; - let invite = _localParticipantName - ? t('info.inviteURLFirstPartPersonal', { name: _localParticipantName }) + const inviteURL = _decodeRoomURI(inviteUrl); + + let invite = localParticipantName + ? t('info.inviteURLFirstPartPersonal', { name: localParticipantName }) : t('info.inviteURLFirstPartGeneral'); invite += t('info.inviteURLSecondPart', { url: inviteURL }); - if (_liveStreamViewURL) { + if (liveStreamViewURL) { const liveStream = t('info.inviteLiveStream', { - url: _liveStreamViewURL + url: liveStreamViewURL }); invite = `${invite}\n${liveStream}`; } - if (shouldDisplayDialIn(_dialIn)) { + if (shouldDisplayDialIn(dialIn)) { const dial = t('info.invitePhone', { number: phoneNumber, - conferenceID: _dialIn.conferenceID + conferenceID: dialIn.conferenceID }); const moreNumbers = t('info.invitePhoneAlternatives', { - url: getDialInfoPageURL( - _conferenceName, - _locationUrl - ), + url: getDialInfoPageURL(state), silentUrl: `${inviteURL}#config.startSilent=true` }); @@ -514,9 +519,7 @@ export function getShareInfoText( .catch(error => logger.error('Error fetching numbers or conferenceID', error)) .then(defaultDialInNumber => { - let dialInfoPageUrl = getDialInfoPageURL( - room, - state['features/base/connection'].locationURL); + let dialInfoPageUrl = getDialInfoPageURL(state); if (useHtml) { dialInfoPageUrl @@ -537,28 +540,19 @@ export function getShareInfoText( /** * Generates the URL for the static dial in info page. * - * @param {string} conferenceName - The conference name. - * @param {Object} locationURL - The current location URL, the object coming - * from state ['features/base/connection'].locationURL. + * @param {Object} state - The state from the Redux store. * @returns {string} */ -export function getDialInfoPageURL( - conferenceName: string, - locationURL: Object) { - const origin = locationURL.origin; - const pathParts = locationURL.pathname.split('/'); +export function getDialInfoPageURL(state: Object) { + const { didPageUrl } = state['features/dynamic-branding']; + const conferenceName = getRoomName(state); + const { locationURL } = state['features/base/connection']; + const { href } = locationURL; + const room = _decodeRoomURI(conferenceName); - pathParts.length = pathParts.length - 1; + const url = didPageUrl || `${href.substring(0, href.lastIndexOf('/'))}/static/dialInInfo.html`; - const newPath = pathParts.reduce((accumulator, currentValue) => { - if (currentValue) { - return `${accumulator}/${currentValue}`; - } - - return accumulator; - }, ''); - - return `${origin}${newPath}/static/dialInInfo.html?room=${_decodeRoomURI(conferenceName)}`; + return `${url}?room=${room}`; } /** diff --git a/react/features/no-audio-signal/components/DialInLink.js b/react/features/no-audio-signal/components/DialInLink.js index 9f12a6b8a..4b30652b6 100644 --- a/react/features/no-audio-signal/components/DialInLink.js +++ b/react/features/no-audio-signal/components/DialInLink.js @@ -11,22 +11,16 @@ import { getDialInfoPageURL, shouldDisplayDialIn } from '../../invite'; */ type Props = { - /** - * The name of the current conference. - */ - _room: string, - - /** - * The current location url of the conference. - */ - _locationURL: string, - - /** * The redux state representing the dial-in numbers feature. */ _dialIn: Object, + /** + * The url of the page containing the dial-in numbers list. + */ + _dialInfoPageUrl: string, + /** * Invoked to obtain translated strings. */ @@ -47,7 +41,7 @@ class DialInLink extends Component { * @returns {ReactElement} */ render() { - const { _room, _locationURL, _dialIn, t } = this.props; + const { _dialIn, _dialInfoPageUrl, t } = this.props; if (!shouldDisplayDialIn(_dialIn)) { return null; @@ -56,12 +50,7 @@ class DialInLink extends Component { return (
{t('toolbar.noAudioSignalDialInDesc')}  {t('toolbar.noAudioSignalDialInLinkDesc')} @@ -77,18 +66,12 @@ class DialInLink extends Component { * * @param {Object} state - The Redux state. * @private - * @returns {{ - * _room: string, - * _locationURL: string, - * _dialIn: Object, - * }} - */ + * @returns {Props} + */ function _mapStateToProps(state) { - return { - _room: state['features/base/conference'].room, - _locationURL: state['features/base/connection'].locationURL, - _dialIn: state['features/invite'] + _dialIn: state['features/invite'], + _dialInfoPageUrl: getDialInfoPageURL(state) }; } diff --git a/react/features/prejoin/actions.js b/react/features/prejoin/actions.js index df76f08db..b7d673dd2 100644 --- a/react/features/prejoin/actions.js +++ b/react/features/prejoin/actions.js @@ -4,7 +4,6 @@ declare var JitsiMeetJS: Object; import uuid from 'uuid'; -import { getRoomName } from '../base/conference'; import { getDialOutStatusUrl, getDialOutUrl } from '../base/config/functions'; import { createLocalTrack } from '../base/lib-jitsi-meet'; import { @@ -262,10 +261,7 @@ export function makePrecallTest(conferenceOptions: Object) { */ export function openDialInPage() { return function(dispatch: Function, getState: Function) { - const state = getState(); - const locationURL = state['features/base/connection'].locationURL; - const roomName = getRoomName(state); - const dialInPage = getDialInfoPageURL(roomName, locationURL); + const dialInPage = getDialInfoPageURL(getState()); openURLInBrowser(dialInPage, true); };