/* Copyright 2024 New Vector Ltd. Copyright 2017-2020 The Matrix.org Foundation C.I.C. Copyright 2019 Travis Ralston SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only Please see LICENSE files in the repository root for full details. */ import { useCallback, useEffect, useState } from "react"; import { base32 } from "rfc4648"; import { IWidget, IWidgetData } from "matrix-widget-api"; import { Room, ClientEvent, MatrixClient, RoomStateEvent, MatrixEvent } from "matrix-js-sdk/src/matrix"; import { KnownMembership } from "matrix-js-sdk/src/types"; import { logger } from "matrix-js-sdk/src/logger"; import { CallType } from "matrix-js-sdk/src/webrtc/call"; import { randomString, randomLowercaseString, randomUppercaseString } from "matrix-js-sdk/src/randomstring"; import PlatformPeg from "../PlatformPeg"; import SdkConfig from "../SdkConfig"; import dis from "../dispatcher/dispatcher"; import WidgetEchoStore from "../stores/WidgetEchoStore"; import { IntegrationManagers } from "../integrations/IntegrationManagers"; import { WidgetType } from "../widgets/WidgetType"; import { Jitsi } from "../widgets/Jitsi"; import { objectClone } from "./objects"; import { _t } from "../languageHandler"; import WidgetStore, { IApp, isAppWidget } from "../stores/WidgetStore"; import { parseUrl } from "./UrlUtils"; import { useEventEmitter } from "../hooks/useEventEmitter"; import { WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore"; import { IWidgetEvent, UserWidget } from "./WidgetUtils-types"; // How long we wait for the state event echo to come back from the server // before waitFor[Room/User]Widget rejects its promise const WIDGET_WAIT_TIME = 20000; export type { IWidgetEvent, UserWidget }; export default class WidgetUtils { /** * Returns true if user is able to send state events to modify widgets in this room * (Does not apply to non-room-based / user widgets) * @param client The matrix client of the logged-in user * @param roomId -- The ID of the room to check * @return Boolean -- true if the user can modify widgets in this room * @throws Error -- specifies the error reason */ public static canUserModifyWidgets(client: MatrixClient, roomId?: string): boolean { if (!roomId) { logger.warn("No room ID specified"); return false; } if (!client) { logger.warn("User must be be logged in"); return false; } const room = client.getRoom(roomId); if (!room) { logger.warn(`Room ID ${roomId} is not recognised`); return false; } const me = client.getUserId(); if (!me) { logger.warn("Failed to get user ID"); return false; } if (room.getMyMembership() !== KnownMembership.Join) { logger.warn(`User ${me} is not in room ${roomId}`); return false; } // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111) return room.currentState.maySendStateEvent("im.vector.modular.widgets", me); } // TODO: Generify the name of this function. It's not just scalar. /** * Returns true if specified url is a scalar URL, typically https://scalar.vector.im/api * @param matrixClient The matrix client of the logged-in user * @param {[type]} testUrlString URL to check * @return {Boolean} True if specified URL is a scalar URL */ public static isScalarUrl(testUrlString?: string): boolean { if (!testUrlString) { logger.error("Scalar URL check failed. No URL specified"); return false; } const testUrl = parseUrl(testUrlString); let scalarUrls = SdkConfig.get().integrations_widgets_urls; if (!scalarUrls || scalarUrls.length === 0) { const defaultManager = IntegrationManagers.sharedInstance().getPrimaryManager(); if (defaultManager) { scalarUrls = [defaultManager.apiUrl]; } else { scalarUrls = []; } } for (let i = 0; i < scalarUrls.length; i++) { const scalarUrl = parseUrl(scalarUrls[i]); if (testUrl && scalarUrl) { if ( testUrl.protocol === scalarUrl.protocol && testUrl.host === scalarUrl.host && scalarUrl.pathname && testUrl.pathname?.startsWith(scalarUrl.pathname) ) { return true; } } } return false; } /** * Returns a promise that resolves when a widget with the given * ID has been added as a user widget (ie. the accountData event * arrives) or rejects after a timeout * * @param client The matrix client of the logged-in user * @param widgetId The ID of the widget to wait for * @param add True to wait for the widget to be added, * false to wait for it to be deleted. * @returns {Promise} that resolves when the widget is in the * requested state according to the `add` param */ public static waitForUserWidget(client: MatrixClient, widgetId: string, add: boolean): Promise { return new Promise((resolve, reject) => { // Tests an account data event, returning true if it's in the state // we're waiting for it to be in function eventInIntendedState(ev?: MatrixEvent): boolean { if (!ev) return false; if (add) { return ev.getContent()[widgetId] !== undefined; } else { return ev.getContent()[widgetId] === undefined; } } const startingAccountDataEvent = client.getAccountData("m.widgets"); if (eventInIntendedState(startingAccountDataEvent)) { resolve(); return; } function onAccountData(ev: MatrixEvent): void { const currentAccountDataEvent = client.getAccountData("m.widgets"); if (eventInIntendedState(currentAccountDataEvent)) { client.removeListener(ClientEvent.AccountData, onAccountData); clearTimeout(timerId); resolve(); } } const timerId = window.setTimeout(() => { client.removeListener(ClientEvent.AccountData, onAccountData); reject(new Error("Timed out waiting for widget ID " + widgetId + " to appear")); }, WIDGET_WAIT_TIME); client.on(ClientEvent.AccountData, onAccountData); }); } /** * Returns a promise that resolves when a widget with the given * ID has been added as a room widget in the given room (ie. the * room state event arrives) or rejects after a timeout * * @param client The matrix client of the logged-in user * @param {string} widgetId The ID of the widget to wait for * @param {string} roomId The ID of the room to wait for the widget in * @param {boolean} add True to wait for the widget to be added, * false to wait for it to be deleted. * @returns {Promise} that resolves when the widget is in the * requested state according to the `add` param */ public static waitForRoomWidget( client: MatrixClient, widgetId: string, roomId: string, add: boolean, ): Promise { return new Promise((resolve, reject) => { // Tests a list of state events, returning true if it's in the state // we're waiting for it to be in function eventsInIntendedState(evList?: MatrixEvent[]): boolean { const widgetPresent = evList?.some((ev) => { return ev.getContent() && ev.getContent()["id"] === widgetId; }); if (add) { return !!widgetPresent; } else { return !widgetPresent; } } const room = client.getRoom(roomId); // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111) const startingWidgetEvents = room?.currentState.getStateEvents("im.vector.modular.widgets"); if (eventsInIntendedState(startingWidgetEvents)) { resolve(); return; } function onRoomStateEvents(ev: MatrixEvent): void { if (ev.getRoomId() !== roomId || ev.getType() !== "im.vector.modular.widgets") return; // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111) const currentWidgetEvents = room?.currentState.getStateEvents("im.vector.modular.widgets"); if (eventsInIntendedState(currentWidgetEvents)) { client.removeListener(RoomStateEvent.Events, onRoomStateEvents); clearTimeout(timerId); resolve(); } } const timerId = window.setTimeout(() => { client.removeListener(RoomStateEvent.Events, onRoomStateEvents); reject(new Error("Timed out waiting for widget ID " + widgetId + " to appear")); }, WIDGET_WAIT_TIME); client.on(RoomStateEvent.Events, onRoomStateEvents); }); } public static setUserWidget( client: MatrixClient, widgetId: string, widgetType: WidgetType, widgetUrl: string, widgetName: string, widgetData: IWidgetData, ): Promise { // Get the current widgets and clone them before we modify them, otherwise // we'll modify the content of the old event. const userWidgets = objectClone(WidgetUtils.getUserWidgets(client)); // Delete existing widget with ID try { delete userWidgets[widgetId]; } catch { logger.error(`$widgetId is non-configurable`); } const addingWidget = Boolean(widgetUrl); const userId = client.getSafeUserId(); const content = { id: widgetId, type: widgetType.preferred, url: widgetUrl, name: widgetName, data: widgetData, creatorUserId: userId, }; // Add new widget / update if (addingWidget) { userWidgets[widgetId] = { content: content, sender: userId, state_key: widgetId, type: "m.widget", id: widgetId, }; } // This starts listening for when the echo comes back from the server // since the widget won't appear added until this happens. If we don't // wait for this, the action will complete but if the user is fast enough, // the widget still won't actually be there. return client .setAccountData("m.widgets", userWidgets) .then(() => { return WidgetUtils.waitForUserWidget(client, widgetId, addingWidget); }) .then(() => { dis.dispatch({ action: "user_widget_updated" }); }); } public static setRoomWidget( client: MatrixClient, roomId: string, widgetId: string, widgetType?: WidgetType, widgetUrl?: string, widgetName?: string, widgetData?: IWidgetData, widgetAvatarUrl?: string, ): Promise { let content: Partial & { avatar_url?: string }; const addingWidget = Boolean(widgetUrl); if (addingWidget) { content = { // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111) // For now we'll send the legacy event type for compatibility with older apps/elements type: widgetType?.legacy, url: widgetUrl, name: widgetName, data: widgetData, avatar_url: widgetAvatarUrl, }; } else { content = {}; } return WidgetUtils.setRoomWidgetContent(client, roomId, widgetId, content as IWidget); } public static setRoomWidgetContent( client: MatrixClient, roomId: string, widgetId: string, content: IWidget & Record, ): Promise { const addingWidget = !!content.url; WidgetEchoStore.setRoomWidgetEcho(roomId, widgetId, content); // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111) return client .sendStateEvent(roomId, "im.vector.modular.widgets", content, widgetId) .then(() => { return WidgetUtils.waitForRoomWidget(client, widgetId, roomId, addingWidget); }) .finally(() => { WidgetEchoStore.removeRoomWidgetEcho(roomId, widgetId); }); } /** * Get room specific widgets * @param {Room} room The room to get widgets force * @return {[object]} Array containing current / active room widgets */ public static getRoomWidgets(room: Room): MatrixEvent[] { // TODO: Enable support for m.widget event type (https://github.com/vector-im/element-web/issues/13111) const appsStateEvents = room.currentState.getStateEvents("im.vector.modular.widgets"); if (!appsStateEvents) { return []; } return appsStateEvents.filter((ev) => { return ev.getContent().type && ev.getContent().url; }); } /** * Get user specific widgets (not linked to a specific room) * @param client The matrix client of the logged-in user * @return {object} Event content object containing current / active user widgets */ public static getUserWidgets(client: MatrixClient | undefined): Record { if (!client) { throw new Error("User not logged in"); } const userWidgets = client.getAccountData("m.widgets"); if (userWidgets && userWidgets.getContent()) { return userWidgets.getContent(); } return {}; } /** * Get user specific widgets (not linked to a specific room) as an array * @param client The matrix client of the logged-in user * @return {[object]} Array containing current / active user widgets */ public static getUserWidgetsArray(client: MatrixClient | undefined): UserWidget[] { return Object.values(WidgetUtils.getUserWidgets(client)); } /** * Get active stickerpicker widgets (stickerpickers are user widgets by nature) * @param client The matrix client of the logged-in user * @return {[object]} Array containing current / active stickerpicker widgets */ public static getStickerpickerWidgets(client: MatrixClient | undefined): UserWidget[] { const widgets = WidgetUtils.getUserWidgetsArray(client); return widgets.filter((widget) => widget.content?.type === "m.stickerpicker"); } /** * Get all integration manager widgets for this user. * @param client The matrix client of the logged-in user * @returns {Object[]} An array of integration manager user widgets. */ public static getIntegrationManagerWidgets(client: MatrixClient | undefined): UserWidget[] { const widgets = WidgetUtils.getUserWidgetsArray(client); return widgets.filter((w) => w.content?.type === "m.integration_manager"); } /** * Remove all stickerpicker widgets (stickerpickers are user widgets by nature) * @param client The matrix client of the logged-in user * @return {Promise} Resolves on account data updated */ public static async removeStickerpickerWidgets(client: MatrixClient | undefined): Promise { if (!client) { throw new Error("User not logged in"); } const widgets = client.getAccountData("m.widgets"); if (!widgets) return; const userWidgets: Record = widgets.getContent() || {}; Object.entries(userWidgets).forEach(([key, widget]) => { if (widget.content && widget.content.type === "m.stickerpicker") { delete userWidgets[key]; } }); await client.setAccountData("m.widgets", userWidgets); } public static async addJitsiWidget( client: MatrixClient, roomId: string, type: CallType, name: string, isVideoChannel: boolean, oobRoomName?: string, ): Promise { const domain = Jitsi.getInstance().preferredDomain; const auth = (await Jitsi.getInstance().getJitsiAuth()) ?? undefined; const widgetId = randomString(24); // Must be globally unique let confId: string; if (auth === "openidtoken-jwt") { // Create conference ID from room ID // For compatibility with Jitsi, use base32 without padding. // More details here: // https://github.com/matrix-org/prosody-mod-auth-matrix-user-verification confId = base32.stringify(new TextEncoder().encode(roomId), { pad: false }); } else { // Create a random conference ID confId = `Jitsi${randomUppercaseString(1)}${randomLowercaseString(23)}`; } // TODO: Remove URL hacks when the mobile clients eventually support v2 widgets const widgetUrl = new URL(WidgetUtils.getLocalJitsiWrapperUrl({ auth })); widgetUrl.search = ""; // Causes the URL class use searchParams instead widgetUrl.searchParams.set("confId", confId); await WidgetUtils.setRoomWidget(client, roomId, widgetId, WidgetType.JITSI, widgetUrl.toString(), name, { conferenceId: confId, roomName: oobRoomName ?? client.getRoom(roomId)?.name, isAudioOnly: type === CallType.Voice, isVideoChannel, domain, auth, }); } public static makeAppConfig( appId: string, app: Partial, senderUserId: string, roomId: string | undefined, eventId: string | undefined, ): IApp { if (!senderUserId) { throw new Error("Widgets must be created by someone - provide a senderUserId"); } app.creatorUserId = senderUserId; app.id = appId; app.roomId = roomId; app.eventId = eventId; app.name = app.name || app.type; return app as IApp; } public static getLocalJitsiWrapperUrl(opts: { forLocalRender?: boolean; auth?: string } = {}): string { // NB. we can't just encodeURIComponent all of these because the $ signs need to be there const queryStringParts = [ "conferenceDomain=$domain", "conferenceId=$conferenceId", "isAudioOnly=$isAudioOnly", "startWithAudioMuted=$startWithAudioMuted", "startWithVideoMuted=$startWithVideoMuted", "isVideoChannel=$isVideoChannel", "displayName=$matrix_display_name", "avatarUrl=$matrix_avatar_url", "userId=$matrix_user_id", "roomId=$matrix_room_id", "theme=$theme", "roomName=$roomName", `supportsScreensharing=${PlatformPeg.get()?.supportsJitsiScreensharing()}`, "language=$org.matrix.msc2873.client_language", ]; if (opts.auth) { queryStringParts.push(`auth=${opts.auth}`); } const queryString = queryStringParts.join("&"); let baseUrl = window.location.href; if (window.location.protocol !== "https:" && !opts.forLocalRender) { // Use an external wrapper if we're not locally rendering the widget. This is usually // the URL that will end up in the widget event, so we want to make sure it's relatively // safe to send. // We'll end up using a local render URL when we see a Jitsi widget anyways, so this is // really just for backwards compatibility and to appease the spec. baseUrl = PlatformPeg.get()!.baseUrl; } const url = new URL("jitsi.html#" + queryString, baseUrl); // this strips hash fragment from baseUrl return url.href; } public static getWidgetName(app?: IWidget): string { return app?.name?.trim() || _t("widget|no_name"); } public static getWidgetDataTitle(app?: IWidget): string { return app?.data?.title?.trim() || ""; } public static getWidgetUid(app?: IApp | IWidget): string { return app ? WidgetUtils.calcWidgetUid(app.id, isAppWidget(app) ? app.roomId : undefined) : ""; } public static calcWidgetUid(widgetId: string, roomId?: string): string { return roomId ? `room_${roomId}_${widgetId}` : `user_${widgetId}`; } public static editWidget(room: Room, app: IWidget): void { // noinspection JSIgnoredPromiseFromCall IntegrationManagers.sharedInstance() .getPrimaryManager() ?.open(room, "type_" + app.type, app.id); } public static isManagedByManager(app: IWidget): boolean { if (WidgetUtils.isScalarUrl(app.url)) { const managers = IntegrationManagers.sharedInstance(); if (managers.hasManager()) { // TODO: Pick the right manager for the widget const defaultManager = managers.getPrimaryManager(); return WidgetUtils.isScalarUrl(defaultManager?.apiUrl); } } return false; } } /** * Hook to get the widgets for a room and update when they change * @param room the room to get widgets for */ export const useWidgets = (room: Room): IApp[] => { const [apps, setApps] = useState(() => WidgetStore.instance.getApps(room.roomId)); const updateApps = useCallback(() => { // Copy the array so that we always trigger a re-render, as some updates mutate the array of apps/settings setApps([...WidgetStore.instance.getApps(room.roomId)]); }, [room]); useEffect(updateApps, [room, updateApps]); useEventEmitter(WidgetStore.instance, room.roomId, updateApps); useEventEmitter(WidgetLayoutStore.instance, WidgetLayoutStore.emissionForRoom(room), updateApps); return apps; };