fix(invite): decode the meeting name (#4411)

* fix(invite): decode the meeting name

* squash: try to make mobile join same encoded meeting name as web

* Decodes and generated texts for share and copy meeting info.

Decodes in all cases except when it contains a space, as it will generate wrong links when pasted/shared in external applications.

react/features/base/conference/functions.js

     const { callDisplayName } = state['features/base/config'];
     const { pendingSubjectChange, room, subject } = state['features/base/conference'];
 
-    return pendingSubjectChange || subject || callDisplayName || (callee && callee.name) || _.startCase(room);
+    return pendingSubjectChange
+        || subject
+        || callDisplayName
+        || (callee && callee.name)
+        || _.startCase(decodeURIComponent(room));
 }
 
 /**

react/features/deep-linking/components/DeepLinkingMobilePage.web.js

  */
 function _mapStateToProps(state) {
     return {
-        _room: state['features/base/conference'].room
+        _room: decodeURIComponent(state['features/base/conference'].room)
     };
 }
 

react/features/invite/components/dial-in-info-page/DialInInfoApp.web.js

                 ? <DialInSummary
                     className = 'dial-in-page'
                     clickableNumbers = { isUsingMobileBrowser }
-                    room = { room } />
+                    room = { decodeURIComponent(room) } />
                 : <NoRoomError className = 'dial-in-page' /> }
         </I18nextProvider>,
         document.getElementById('react')

react/features/invite/components/info-dialog/web/InfoDialog.js

     getLocalParticipant
 } from '../../../../base/participants';
 
-import { _getDefaultPhoneNumber, getDialInfoPageURL } from '../../../functions';
+import {
+    _decodeRoomURI,
+    _getDefaultPhoneNumber,
+    getDialInfoPageURL
+} from '../../../functions';
 import DialInNumber from './DialInNumber';
 import PasswordForm from './PasswordForm';
 
                                 className = 'info-dialog-url-text'
                                 href = { this.props._inviteURL }
                                 onClick = { this._onClickURLText } >
-                                { this._getURLToDisplay() }
+                                { decodeURI(this._getURLToDisplay()) }
                             </a>
                         </span>
                     </div>
         );
     }
 
-    /**
-     * Generates the URL for the static dial in info page.
-     *
-     * @private
-     * @returns {string}
-     */
-    _getDialInfoPageURL() {
-        return getDialInfoPageURL(
-            encodeURIComponent(this.props._conferenceName),
-            this.props._locationURL);
-    }
-
     /**
      * Creates a message describing how to dial in to the conference.
      *
     _getTextToCopy() {
         const { _localParticipant, liveStreamViewURL, t } = this.props;
         const shouldDisplayDialIn = this._shouldDisplayDialIn();
+        const _inviteURL = _decodeRoomURI(this.props._inviteURL);
 
         let invite = _localParticipant && _localParticipant.name
             ? t('info.inviteURLFirstPartPersonal', { name: _localParticipant.name })
             : t('info.inviteURLFirstPartGeneral');
 
         invite += t('info.inviteURLSecondPart', {
-            url: this.props._inviteURL
+            url: _inviteURL
         });
 
         if (liveStreamViewURL) {
                 conferenceID: this.props.dialIn.conferenceID
             });
             const moreNumbers = t('info.invitePhoneAlternatives', {
-                url: this._getDialInfoPageURL(),
-                silentUrl: `${this.props._inviteURL}#config.startSilent=true`
+                url: getDialInfoPageURL(
+                    this.props._conferenceName,
+                    this.props._locationURL
+                ),
+                silentUrl: `${_inviteURL}#config.startSilent=true`
             });
 
             invite = `${invite}\n${dial}\n${moreNumbers}`;
                     phoneNumber = { this.state.phoneNumber } />
                 <a
                     className = 'more-numbers'
-                    href = { this._getDialInfoPageURL() }
+                    href = {
+                        getDialInfoPageURL(
+                            this.props._conferenceName,
+                            this.props._locationURL
+                        )
+                    }
                     rel = 'noopener noreferrer'
                     target = '_blank'>
                     { this.props.t('info.moreNumbers') }

react/features/invite/functions.js

  */
 export function getShareInfoText(
         state: Object, inviteUrl: string, useHtml: ?boolean): Promise<string> {
-    let roomUrl = inviteUrl;
+    let roomUrl = _decodeRoomURI(inviteUrl);
     const includeDialInfo = state['features/base/config'] !== undefined;
 
     if (useHtml) {
         return accumulator;
     }, '');
 
-    return `${origin}${newPath}/static/dialInInfo.html?room=${conferenceName}`;
+    return `${origin}${newPath}/static/dialInInfo.html?room=${_decodeRoomURI(conferenceName)}`;
 }
 
 /**
 
     return null;
 }
+
+/**
+ * Decodes URI only if doesn't contain a space(' ').
+ *
+ * @param {string} url - The string to decode.
+ * @returns {string} - It the string contains space, encoded value is '%20' returns
+ * same string, otherwise decoded one.
+ * @private
+ */
+export function _decodeRoomURI(url: string) {
+    let roomUrl = url;
+
+    // we want to decode urls when the do not contain space, ' ', which url encoded is %20
+    if (roomUrl && !roomUrl.includes('%20')) {
+        roomUrl = decodeURI(roomUrl);
+    }
+
+    return roomUrl;
+}

react/features/recent-list/functions.native.js

             _toDurationString(item.duration),
             serverName
         ],
-        title: location.room,
+        title: decodeURIComponent(location.room),
         url: item.conference
     };
 }

react/features/recent-list/functions.web.js

                     date: item.date,
                     duration: item.duration,
                     time: [ item.date ],
-                    title: parseURIString(item.conference).room,
+                    title: decodeURIComponent(parseURIString(item.conference).room),
                     url: item.conference
                 };
             }));

react/features/welcome/components/AbstractWelcomePage.js

             const onAppNavigateSettled
                 = () => this._mounted && this.setState({ joining: false });
 
-            this.props.dispatch(appNavigate(room))
+            this.props.dispatch(appNavigate(encodeURI(room)))
                 .then(onAppNavigateSettled, onAppNavigateSettled);
         }
     }