Fix widgets getting stuck in loading states

src/LegacyCallHandler.tsx

@@ -1055,9 +1055,9 @@ export default class LegacyCallHandler extends TypedEventEmitter<LegacyCallHandl
         const jitsiWidgets = roomInfo.widgets.filter((w) => WidgetType.JITSI.matches(w.type));
         jitsiWidgets.forEach((w) => {
             const messaging = WidgetMessagingStore.instance.getMessagingForUid(WidgetUtils.getWidgetUid(w));
-            if (!messaging) return; // more "should never happen" words
+            if (!messaging?.widgetApi) return; // more "should never happen" words
 
-            messaging.transport.send(ElementWidgetActions.HangupCall, {});
+            messaging.widgetApi.transport.send(ElementWidgetActions.HangupCall, {});
         });
     }
 

src/Livestream.ts

@@ -41,12 +41,12 @@ async function createLiveStream(matrixClient: MatrixClient, roomId: string): Pro
 
 export async function startJitsiAudioLivestream(
     matrixClient: MatrixClient,
-    widgetMessaging: ClientWidgetApi,
+    widgetApi: ClientWidgetApi,
     roomId: string,
 ): Promise<void> {
     const streamId = await createLiveStream(matrixClient, roomId);
 
-    await widgetMessaging.transport.send(ElementWidgetActions.StartLiveStream, {
+    await widgetApi.transport.send(ElementWidgetActions.StartLiveStream, {
         rtmpStreamKey: AUDIOSTREAM_DUMMY_URL + streamId,
     });
 }

src/components/views/context_menus/WidgetContextMenu.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type JSX, type ComponentProps, useContext } from "react";
-import { type ClientWidgetApi, type IWidget, MatrixCapabilities } from "matrix-widget-api";
+import { type IWidget, MatrixCapabilities } from "matrix-widget-api";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type ApprovalOpts, WidgetLifecycle } from "@matrix-org/react-sdk-module-api/lib/lifecycles/WidgetLifecycle";
 import { type MatrixClient, type Room } from "matrix-js-sdk/src/matrix";
@@ -28,7 +28,7 @@ import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import { getConfigLivestreamUrl, startJitsiAudioLivestream } from "../../../Livestream";
 import { ModuleRunner } from "../../../modules/ModuleRunner";
-import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
+import { ElementWidget, type WidgetMessaging } from "../../../stores/widgets/WidgetMessaging";
 import { useScopedRoomContext } from "../../../contexts/ScopedRoomContext.tsx";
 
 interface IProps extends Omit<ComponentProps<typeof IconizedContextMenu>, "children"> {
@@ -69,10 +69,10 @@ const showDeleteButton = (canModify: boolean, onDeleteClick: undefined | (() =>
     return !!onDeleteClick || canModify;
 };
 
-const showSnapshotButton = (widgetMessaging: ClientWidgetApi | undefined): boolean => {
+const showSnapshotButton = (widgetMessaging: WidgetMessaging | undefined): boolean => {
     return (
         SettingsStore.getValue("enableWidgetScreenshots") &&
-        !!widgetMessaging?.hasCapability(MatrixCapabilities.Screenshots)
+        !!widgetMessaging?.widgetApi?.hasCapability(MatrixCapabilities.Screenshots)
     );
 };
 
@@ -123,7 +123,7 @@ export const WidgetContextMenu: React.FC<IProps> = ({
     if (roomId && showStreamAudioStreamButton(app)) {
         const onStreamAudioClick = async (): Promise<void> => {
             try {
-                await startJitsiAudioLivestream(cli, widgetMessaging!, roomId);
+                await startJitsiAudioLivestream(cli, widgetMessaging!.widgetApi!, roomId);
             } catch (err) {
                 logger.error("Failed to start livestream", err);
                 // XXX: won't i18n well, but looks like widget api only support 'message'?
@@ -161,7 +161,7 @@ export const WidgetContextMenu: React.FC<IProps> = ({
     let snapshotButton: JSX.Element | undefined;
     if (showSnapshotButton(widgetMessaging)) {
         const onSnapshotClick = (): void => {
-            widgetMessaging
+            widgetMessaging?.widgetApi
                 ?.takeScreenshot()
                 .then((data) => {
                     dis.dispatch({

src/components/views/dialogs/ModalWidgetDialog.tsx

@@ -27,11 +27,11 @@ import { ErrorIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 import BaseDialog from "./BaseDialog";
 import { _t, getUserLanguage } from "../../../languageHandler";
 import AccessibleButton, { type AccessibleButtonKind } from "../elements/AccessibleButton";
-import { StopGapWidgetDriver } from "../../../stores/widgets/StopGapWidgetDriver";
+import { ElementWidgetDriver } from "../../../stores/widgets/ElementWidgetDriver";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import { OwnProfileStore } from "../../../stores/OwnProfileStore";
 import { arrayFastClone } from "../../../utils/arrays";
-import { ElementWidget } from "../../../stores/widgets/StopGapWidget";
+import { ElementWidget } from "../../../stores/widgets/WidgetMessaging";
 import { ELEMENT_CLIENT_ID } from "../../../identifiers";
 import ThemeWatcher, { ThemeWatcherEvent } from "../../../settings/watchers/ThemeWatcher";
 
@@ -72,7 +72,7 @@ export default class ModalWidgetDialog extends React.PureComponent<IProps, IStat
     }
 
     public componentDidMount(): void {
-        const driver = new StopGapWidgetDriver([], this.widget, WidgetKind.Modal, false);
+        const driver = new ElementWidgetDriver(this.widget, WidgetKind.Modal, false);
         const messaging = new ClientWidgetApi(this.widget, this.appFrame.current!, driver);
         this.setState({ messaging });
     }