Clear requiresClient and show pop-out if widget-api fails to ready (matrix-org#11321)

* Clear requiresClient and show pop-out if widget-api fails to ready * Upgrade matrix-widget-api

Author: t3chguy

package.json

@@ -99,7 +99,7 @@
  "matrix-encrypt-attachment": "^1.0.3",
  "matrix-events-sdk": "0.0.1",
  "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
- "matrix-widget-api": "^1.4.0",
+ "matrix-widget-api": "^1.5.0",
  "memoize-one": "^6.0.0",
  "minimist": "^1.2.5",
  "oidc-client-ts": "^2.2.4",

src/components/views/elements/AppTile.tsx

@@ -346,14 +346,16 @@ export default class AppTile extends React.Component<IProps, IState> {
 
  private setupSgListeners(): void {
  this.sgWidget?.on("preparing", this.onWidgetPreparing);
+ this.sgWidget?.on("error:preparing", this.updateRequiresClient);
  // emits when the capabilities have been set up or changed
- this.sgWidget?.on("capabilitiesNotified", this.onWidgetCapabilitiesNotified);
+ this.sgWidget?.on("capabilitiesNotified", this.updateRequiresClient);
  }
 
  private stopSgListeners(): void {
  if (!this.sgWidget) return;
  this.sgWidget.off("preparing", this.onWidgetPreparing);
- this.sgWidget.off("capabilitiesNotified", this.onWidgetCapabilitiesNotified);
+ this.sgWidget.off("error:preparing", this.updateRequiresClient);
+ this.sgWidget.off("capabilitiesNotified", this.updateRequiresClient);
  }
 
  private resetWidget(newProps: IProps): void {
@@ -442,7 +444,7 @@ export default class AppTile extends React.Component<IProps, IState> {
  this.setState({ loading: false });
  };
 
- private onWidgetCapabilitiesNotified = (): void => {
+ private updateRequiresClient = (): void => {
  this.setState({
  requiresClient: !!this.sgWidget?.widgetApi?.hasCapability(ElementWidgetCapabilities.RequiresClient),
  });

src/stores/widgets/StopGapWidget.ts

@@ -285,6 +285,7 @@ export class StopGapWidget extends EventEmitter {
 
  this.messaging = new ClientWidgetApi(this.mockWidget, iframe, driver);
  this.messaging.on("preparing", () => this.emit("preparing"));
+ this.messaging.on("error:preparing", (err: unknown) => this.emit("error:preparing", err));
  this.messaging.on("ready", () => {
  WidgetMessagingStore.instance.storeMessaging(this.mockWidget, this.roomId, this.messaging!);
  this.emit("ready");

yarn.lock

@@ -7019,14 +7019,6 @@ matrix-web-i18n@^1.4.0:
  "@babel/traverse" "^7.18.5"
  walk "^2.3.15"
 
-matrix-widget-api@^1.4.0:
- version "1.4.0"
- resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.4.0.tgz#e426ec16a013897f3a4a9c2bff423f54ab0ba745"
- integrity sha512-dw0dRylGQzDUoiaY/g5xx1tBbS7aoov31PRtFMAvG58/4uerYllV9Gfou7w+I1aglwB6hihTREzKltVjARWV6A==
- dependencies:
- "@types/events" "^3.0.0"
- events "^3.2.0"
-
 matrix-widget-api@^1.5.0:
  version "1.5.0"
  resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.5.0.tgz#4ae3e46a7f2854f944ddaf8a5af63d72fba76c45"