Allow iframes and Jitsi URLs in /addwidget

Fixes https://github.com/vector-im/riot-web/issues/12784

src/SlashCommands.tsx

@@ -36,6 +36,8 @@ import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from './utils/I
 import {isPermalinkHost, parsePermalink} from "./utils/permalinks/Permalinks";
 import {inviteUsersToRoom} from "./RoomInvite";
 import { WidgetType } from "./widgets/WidgetType";
+import { Jitsi } from "./widgets/Jitsi";
+import { parseFragment as parseHtml } from "parse5";
 
 // XXX: workaround for https://github.com/microsoft/TypeScript/issues/31816
 interface HTMLInputEvent extends Event {
@@ -765,18 +767,50 @@ export const Commands = [
     }),
     new Command({
         command: 'addwidget',
-        args: '<url>',
+        args: '<url | embed code | jitsi url>',
         description: _td('Adds a custom widget by URL to the room'),
-        runFn: function(roomId, args) {
-            if (!args || (!args.startsWith("https://") && !args.startsWith("http://"))) {
+        runFn: function(roomId, widgetUrl) {
+            if (!widgetUrl) {
+                return reject(_t("Please supply a widget URL or embed code"));
+            }
+
+            // Try and parse out a widget URL from iframes
+            if (widgetUrl.toLowerCase().startsWith("<iframe ")) {
+                // We use parse5, which doesn't render/create a DOM node. It instead runs
+                // some superfast regex over the text so we don't have to.
+                const embed = parseHtml(widgetUrl);
+                if (embed && embed.childNodes && embed.childNodes.length === 1) {
+                    const iframe = embed.childNodes[0];
+                    if (iframe.tagName.toLowerCase() === 'iframe' && iframe.attrs) {
+                        const srcAttr = iframe.attrs.find(a => a.name === 'src');
+                        console.log("Pulling URL out of iframe (embed code)");
+                        widgetUrl = srcAttr.value;
+                    }
+                }
+            }
+
+            if (!widgetUrl.startsWith("https://") && !widgetUrl.startsWith("http://")) {
                 return reject(_t("Please supply a https:// or http:// widget URL"));
             }
             if (WidgetUtils.canUserModifyWidgets(roomId)) {
                 const userId = MatrixClientPeg.get().getUserId();
                 const nowMs = (new Date()).getTime();
                 const widgetId = encodeURIComponent(`${roomId}_${userId}_${nowMs}`);
-                return success(WidgetUtils.setRoomWidget(
-                    roomId, widgetId, WidgetType.CUSTOM, args, "Custom Widget", {}));
+                let type = WidgetType.CUSTOM;
+                let name = "Custom Widget";
+                let data = {};
+
+                // Make the widget a Jitsi widget if it looks like a Jitsi widget
+                const jitsiData = Jitsi.getInstance().parsePreferredConferenceUrl(widgetUrl);
+                if (jitsiData) {
+                    console.log("Making /addwidget widget a Jitsi conference");
+                    type = WidgetType.JITSI;
+                    name = "Jitsi Conference";
+                    data = jitsiData;
+                    widgetUrl = WidgetUtils.getLocalJitsiWrapperUrl();
+                }
+
+                return success(WidgetUtils.setRoomWidget(roomId, widgetId, type, widgetUrl, name, data));
             } else {
                 return reject(_t("You cannot modify widgets in this room."));
             }

src/widgets/Jitsi.ts

@@ -21,6 +21,12 @@ import {AutoDiscovery} from "matrix-js-sdk/src/autodiscovery";
 const JITSI_WK_PROPERTY = "im.vector.riot.jitsi";
 const JITSI_WK_CHECK_INTERVAL = 2 * 60 * 60 * 1000; // 2 hours, arbitrarily selected
 
+export interface JitsiWidgetData {
+    conferenceId: string;
+    isAudioOnly: boolean;
+    domain: string;
+}
+
 export class Jitsi {
     private static instance: Jitsi;
 
@@ -64,6 +70,22 @@ export class Jitsi {
         console.log("Jitsi conference domain:", this.preferredDomain);
     }
 
+    /**
+     * Parses the given URL into the data needed for a Jitsi widget, if the widget
+     * URL matches the preferredDomain for the app.
+     * @param {string} url The URL to parse.
+     * @returns {JitsiWidgetData} The widget data if eligible, otherwise null.
+     */
+    public parsePreferredConferenceUrl(url: string): JitsiWidgetData {
+        const parsed = new URL(url);
+        if (parsed.hostname !== this.preferredDomain) return null; // invalid
+        return {
+            conferenceId: parsed.pathname,
+            domain: parsed.hostname,
+            isAudioOnly: false,
+        };
+    }
+
     public static getInstance(): Jitsi {
         if (!Jitsi.instance) {
             Jitsi.instance = new Jitsi();