Handle ManagedHybrid widgets in useRoomCall and mark them in the widget state event

Signed-off-by: Michael Telatynski <[email protected]>

Author: t3chguy

src/hooks/room/useRoomCall.ts

@@ -31,6 +31,7 @@ import { placeCall } from "../../utils/room/placeCall";
 import { Container, WidgetLayoutStore } from "../../stores/widgets/WidgetLayoutStore";
 import { useRoomState } from "../useRoomState";
 import { _t } from "../../languageHandler";
+import { isManagedHybridWidget } from "../../widgets/ManagedHybrid";
 
 export type PlatformCallType = "element_call" | "jitsi_or_element_call" | "legacy_or_jitsi";
 
@@ -69,6 +70,8 @@ export const useRoomCall = (
     const widgets = useWidgets(room);
     const jitsiWidget = useMemo(() => widgets.find((widget) => WidgetType.JITSI.matches(widget.type)), [widgets]);
     const hasJitsiWidget = !!jitsiWidget;
+    const managedHybridWidget = useMemo(() => widgets.find(isManagedHybridWidget), [widgets]);
+    const hasManagedHybridWidget = !!managedHybridWidget;
 
     const groupCall = useCall(room.roomId);
     const hasGroupCall = groupCall !== null;
@@ -105,7 +108,7 @@ export const useRoomCall = (
         useElementCallExclusively,
         mayEditWidgets,
     ]);
-    const widget = callType === "element_call" ? groupCall?.widget : jitsiWidget;
+    const widget = callType === "element_call" ? groupCall?.widget : jitsiWidget ?? managedHybridWidget;
 
     const [canPinWidget, setCanPinWidget] = useState(false);
     const [widgetPinned, setWidgetPinned] = useState(false);
@@ -122,7 +125,7 @@ export const useRoomCall = (
     }, [room, jitsiWidget, groupCall, updateWidgetState]);
 
     const state = useMemo((): State => {
-        if (hasGroupCall || hasJitsiWidget) {
+        if (hasGroupCall || hasJitsiWidget || hasManagedHybridWidget) {
             return promptPinWidget ? State.Unpinned : State.Ongoing;
         }
         if (hasLegacyCall) {
@@ -142,6 +145,7 @@ export const useRoomCall = (
         hasGroupCall,
         hasJitsiWidget,
         hasLegacyCall,
+        hasManagedHybridWidget,
         mayCreateElementCalls,
         mayEditWidgets,
         memberCount,

src/stores/WidgetStore.ts

@@ -29,10 +29,12 @@ import { UPDATE_EVENT } from "./AsyncStore";
 interface IState {}
 
 export interface IApp extends IWidget {
-    roomId: string;
-    eventId?: string; // not present on virtual widgets
+    "roomId": string;
+    "eventId"?: string; // not present on virtual widgets
     // eslint-disable-next-line camelcase
-    avatar_url?: string; // MSC2765 https://github.com/matrix-org/matrix-doc/pull/2765
+    "avatar_url"?: string; // MSC2765 https://github.com/matrix-org/matrix-doc/pull/2765
+    // Whether the widget was created from `widget_build_url` and thus is a call widget of some kind
+    "io.element.managed_hybrid"?: boolean;
 }
 
 export function isAppWidget(widget: IWidget | IApp): widget is IApp {

src/utils/WidgetUtils.ts

@@ -332,7 +332,7 @@ export default class WidgetUtils {
         client: MatrixClient,
         roomId: string,
         widgetId: string,
-        content: IWidget,
+        content: IWidget & Record<string, any>,
     ): Promise<void> {
         const addingWidget = !!content.url;
 

src/widgets/ManagedHybrid.ts

@@ -22,7 +22,7 @@ import { getCallBehaviourWellKnown } from "../utils/WellKnownUtils";
 import WidgetUtils from "../utils/WidgetUtils";
 import { IStoredLayout, WidgetLayoutStore } from "../stores/widgets/WidgetLayoutStore";
 import WidgetEchoStore from "../stores/WidgetEchoStore";
-import WidgetStore from "../stores/WidgetStore";
+import WidgetStore, { IApp } from "../stores/WidgetStore";
 import SdkConfig from "../SdkConfig";
 import DMRoomMap from "../utils/DMRoomMap";
 
@@ -97,7 +97,10 @@ export async function addManagedHybridWidget(roomId: string): Promise<void> {
 
     // Add the widget
     try {
-        await WidgetUtils.setRoomWidgetContent(cli, roomId, widgetId, widgetContent);
+        await WidgetUtils.setRoomWidgetContent(cli, roomId, widgetId, {
+            ...widgetContent,
+            "io.element.managed_hybrid": true,
+        });
     } catch (e) {
         logger.error(`Unable to add managed hybrid widget in room ${roomId}`, e);
         return;
@@ -116,3 +119,7 @@ export async function addManagedHybridWidget(roomId: string): Promise<void> {
     WidgetLayoutStore.instance.setContainerHeight(room, layout.container, layout.height);
     WidgetLayoutStore.instance.copyLayoutToRoom(room);
 }
+
+export function isManagedHybridWidget(widget: IApp): boolean {
+    return !!widget["io.element.managed_hybrid"];
+}