Correctly template in Jitsi widget auth if such exists

Also add roomId to the widget data and URL template. It's needed by
the Element Web Jitsi code to produce auth for the Jitsi backend.

src/CallHandler.js

@@ -405,13 +405,12 @@ async function _startCallApp(roomId, type) {
         confId = `JitsiConference${generateHumanReadableId()}`;
     }
 
-    let widgetUrl = WidgetUtils.getLocalJitsiWrapperUrl();
+    let widgetUrl = WidgetUtils.getLocalJitsiWrapperUrl({auth: jitsiAuth});
 
     // TODO: Remove URL hacks when the mobile clients eventually support v2 widgets
     const parsedUrl = new URL(widgetUrl);
     parsedUrl.search = ''; // set to empty string to make the URL class use searchParams instead
     parsedUrl.searchParams.set('confId', confId);
-    parsedUrl.searchParams.set('auth', jitsiAuth);
     widgetUrl = parsedUrl.toString();
 
     const widgetData = {
@@ -419,6 +418,7 @@ async function _startCallApp(roomId, type) {
         isAudioOnly: type === 'voice',
         domain: jitsiDomain,
         auth: jitsiAuth,
+        roomId: roomId,
     };
 
     const widgetId = (

src/components/views/elements/AppTile.js

@@ -603,6 +603,7 @@ export default class AppTile extends React.Component {
             // TODO: Namespace themes through some standard
             'theme': SettingsStore.getValue("theme"),
         });
+        console.log("DEBUG TEMPLATEDURL APPTILE", vars);
 
         if (vars.conferenceId === undefined) {
             // we'll need to parse the conference ID out of the URL for v1 Jitsi widgets
@@ -626,7 +627,10 @@ export default class AppTile extends React.Component {
 
         if (WidgetType.JITSI.matches(this.props.app.type)) {
             console.log("Replacing Jitsi widget URL with local wrapper");
-            url = WidgetUtils.getLocalJitsiWrapperUrl({forLocalRender: true});
+            url = WidgetUtils.getLocalJitsiWrapperUrl({
+                forLocalRender: true,
+                auth: this.props.app.data ? this.props.app.data.auth : null,
+            });
             url = this._addWurlParams(url);
         } else {
             url = this._getSafeUrl(this.state.widgetUrl);
@@ -637,7 +641,10 @@ export default class AppTile extends React.Component {
     _getPopoutUrl() {
         if (WidgetType.JITSI.matches(this.props.app.type)) {
             return this._templatedUrl(
-                WidgetUtils.getLocalJitsiWrapperUrl({forLocalRender: false}),
+                WidgetUtils.getLocalJitsiWrapperUrl({
+                    forLocalRender: false,
+                    auth: this.props.app.data ? this.props.app.data.auth : null,
+                }),
                 this.props.app.type,
             );
         } else {

src/utils/WidgetUtils.js

@@ -448,16 +448,21 @@ export default class WidgetUtils {
         return encodeURIComponent(`${widgetLocation}::${widgetUrl}`);
     }
 
-    static getLocalJitsiWrapperUrl(opts: {forLocalRender?: boolean}={}) {
+    static getLocalJitsiWrapperUrl(opts: {forLocalRender?: boolean, auth?: string}={}) {
         // NB. we can't just encodeURIComponent all of these because the $ signs need to be there
-        const queryString = [
+        const queryParts = [
             'conferenceDomain=$domain',
             'conferenceId=$conferenceId',
             'isAudioOnly=$isAudioOnly',
             'displayName=$matrix_display_name',
             'avatarUrl=$matrix_avatar_url',
             'userId=$matrix_user_id',
-        ].join('&');
+            'roomId=$matrix_room_id',
+        ];
+        if (opts.auth) {
+            queryParts.push(`auth=${opts.auth}`);
+        }
+        const queryString = queryParts.join('&');
 
         let baseUrl = window.location;
         if (window.location.protocol !== "https:" && !opts.forLocalRender) {