Use random widget IDs for video rooms (#8739)

Author: robintown

src/CallHandler.tsx

@@ -1035,8 +1035,7 @@ export default class CallHandler extends EventEmitter {
         }
 
         try {
-            const userId = client.credentials.userId;
-            await WidgetUtils.addJitsiWidget(roomId, type, 'Jitsi', `jitsi_${userId}_${Date.now()}`);
+            await WidgetUtils.addJitsiWidget(roomId, type, 'Jitsi', false);
             logger.log('Jitsi widget added');
         } catch (e) {
             if (e.errcode === 'M_FORBIDDEN') {

src/utils/VideoChannelUtils.ts

@@ -35,16 +35,15 @@ interface IVideoChannelMemberContent {
     devices: string[];
 }
 
-export const VIDEO_CHANNEL = "io.element.video";
 export const VIDEO_CHANNEL_MEMBER = "io.element.video.member";
 
 export const getVideoChannel = (roomId: string): IApp => {
     const apps = WidgetStore.instance.getApps(roomId);
-    return apps.find(app => WidgetType.JITSI.matches(app.type) && app.id === VIDEO_CHANNEL);
+    return apps.find(app => WidgetType.JITSI.matches(app.type) && app.data.isVideoChannel);
 };
 
 export const addVideoChannel = async (roomId: string, roomName: string) => {
-    await WidgetUtils.addJitsiWidget(roomId, CallType.Video, "Video channel", VIDEO_CHANNEL, roomName);
+    await WidgetUtils.addJitsiWidget(roomId, CallType.Video, "Video channel", true, roomName);
 };
 
 export const getConnectedMembers = (room: Room, connectedLocalEcho: boolean): Set<RoomMember> => {

src/utils/WidgetUtils.ts

@@ -23,7 +23,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 import { logger } from "matrix-js-sdk/src/logger";
 import { ClientEvent, RoomStateEvent } from "matrix-js-sdk/src/matrix";
 import { CallType } from "matrix-js-sdk/src/webrtc/call";
-import { randomLowercaseString, randomUppercaseString } from "matrix-js-sdk/src/randomstring";
+import { randomString, randomLowercaseString, randomUppercaseString } from "matrix-js-sdk/src/randomstring";
 
 import { MatrixClientPeg } from '../MatrixClientPeg';
 import SdkConfig from "../SdkConfig";
@@ -35,7 +35,6 @@ import { Jitsi } from "../widgets/Jitsi";
 import { objectClone } from "./objects";
 import { _t } from "../languageHandler";
 import { IApp } from "../stores/WidgetStore";
-import { VIDEO_CHANNEL } from "./VideoChannelUtils";
 
 // How long we wait for the state event echo to come back from the server
 // before waitFor[Room/User]Widget rejects its promise
@@ -444,11 +443,12 @@ export default class WidgetUtils {
         roomId: string,
         type: CallType,
         name: string,
-        widgetId: string,
+        isVideoChannel: boolean,
         oobRoomName?: string,
     ): Promise<void> {
         const domain = Jitsi.getInstance().preferredDomain;
         const auth = await Jitsi.getInstance().getJitsiAuth();
+        const widgetId = randomString(24); // Must be globally unique
 
         let confId;
         if (auth === 'openidtoken-jwt') {
@@ -471,7 +471,7 @@ export default class WidgetUtils {
             conferenceId: confId,
             roomName: oobRoomName ?? MatrixClientPeg.get().getRoom(roomId)?.name,
             isAudioOnly: type === CallType.Voice,
-            isVideoChannel: widgetId === VIDEO_CHANNEL,
+            isVideoChannel,
             domain,
             auth,
         });

test/components/structures/VideoRoomView-test.tsx

@@ -32,7 +32,7 @@ import {
     mkVideoChannelMember,
 } from "../../test-utils";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
-import { VIDEO_CHANNEL, VIDEO_CHANNEL_MEMBER } from "../../../src/utils/VideoChannelUtils";
+import { VIDEO_CHANNEL_MEMBER } from "../../../src/utils/VideoChannelUtils";
 import WidgetStore from "../../../src/stores/WidgetStore";
 import _VideoRoomView from "../../../src/components/structures/VideoRoomView";
 import VideoLobby from "../../../src/components/views/voip/VideoLobby";
@@ -42,14 +42,15 @@ const VideoRoomView = wrapInMatrixClientContext(_VideoRoomView);
 
 describe("VideoRoomView", () => {
     jest.spyOn(WidgetStore.instance, "getApps").mockReturnValue([{
-        id: VIDEO_CHANNEL,
+        id: "1",
         eventId: "$1:example.org",
         roomId: "!1:example.org",
         type: MatrixWidgetType.JitsiMeet,
         url: "https://example.org",
         name: "Video channel",
         creatorUserId: "@alice:example.org",
         avatar_url: null,
+        data: { isVideoChannel: true },
     }]);
     Object.defineProperty(navigator, "mediaDevices", {
         value: { enumerateDevices: () => [] },

test/createRoom-test.ts

@@ -23,7 +23,7 @@ import { stubClient, setupAsyncStoreWithClient } from "./test-utils";
 import { MatrixClientPeg } from "../src/MatrixClientPeg";
 import WidgetStore from "../src/stores/WidgetStore";
 import WidgetUtils from "../src/utils/WidgetUtils";
-import { VIDEO_CHANNEL, VIDEO_CHANNEL_MEMBER } from "../src/utils/VideoChannelUtils";
+import { VIDEO_CHANNEL_MEMBER } from "../src/utils/VideoChannelUtils";
 import createRoom, { canEncryptToAllUsers } from '../src/createRoom';
 
 describe("createRoom", () => {
@@ -43,12 +43,11 @@ describe("createRoom", () => {
                 events: { [VIDEO_CHANNEL_MEMBER]: videoMemberPower },
             },
         }]] = mocked(client.createRoom).mock.calls as any; // no good type
-        const [[widgetRoomId, widgetStateKey, , widgetId]] = mocked(client.sendStateEvent).mock.calls;
+        const [[widgetRoomId, widgetStateKey]] = mocked(client.sendStateEvent).mock.calls;
 
         // We should have set up the Jitsi widget
         expect(widgetRoomId).toEqual(roomId);
         expect(widgetStateKey).toEqual("im.vector.modular.widgets");
-        expect(widgetId).toEqual(VIDEO_CHANNEL);
 
         // All members should be able to update their connected devices
         expect(videoMemberPower).toEqual(0);

test/stores/VideoChannelStore-test.ts

@@ -23,21 +23,21 @@ import WidgetStore, { IApp } from "../../src/stores/WidgetStore";
 import { WidgetMessagingStore } from "../../src/stores/widgets/WidgetMessagingStore";
 import { ElementWidgetActions } from "../../src/stores/widgets/ElementWidgetActions";
 import VideoChannelStore, { VideoChannelEvent } from "../../src/stores/VideoChannelStore";
-import { VIDEO_CHANNEL } from "../../src/utils/VideoChannelUtils";
 
 describe("VideoChannelStore", () => {
     const store = VideoChannelStore.instance;
 
-    const widget = { id: VIDEO_CHANNEL } as unknown as Widget;
+    const widget = { id: "1" } as unknown as Widget;
     const app = {
-        id: VIDEO_CHANNEL,
+        id: "1",
         eventId: "$1:example.org",
         roomId: "!1:example.org",
         type: MatrixWidgetType.JitsiMeet,
         url: "",
         name: "Video channel",
         creatorUserId: "@alice:example.org",
         avatar_url: null,
+        data: { isVideoChannel: true },
     } as IApp;
 
     // Set up mocks to simulate the remote end of the widget API