Move files to more correct location

src/app/features/call/CallView.tsx

@@ -0,0 +1,157 @@
+/* eslint-disable no-nested-ternary */
+import { Room } from 'matrix-js-sdk';
+import React, { useContext, useMemo, useCallback, useEffect, useRef } from 'react';
+import { Box } from 'folds';
+import { RoomViewHeader } from '../room/RoomViewHeader';
+import { useCallState } from '../../pages/client/call/CallProvider';
+import {
+  PrimaryRefContext,
+  BackupRefContext,
+} from '../../pages/client/call/PersistentCallContainer';
+import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+
+function debounce<F extends (...args: any[]) => any>(func: F, waitFor: number) {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  return (...args: Parameters<F>): void => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => func(...args), waitFor);
+  };
+}
+
+type OriginalStyles = {
+  position?: string;
+  top?: string;
+  left?: string;
+  width?: string;
+  height?: string;
+  zIndex?: string;
+  display?: string;
+  visibility?: string;
+  pointerEvents?: string;
+  border?: string;
+};
+
+export function CallView({ room, eventId }: { room: Room; eventId?: string }) {
+  const primaryIframeRef = useContext(PrimaryRefContext);
+  const backupIframeRef = useContext(BackupRefContext);
+  const iframeHostRef = useRef<HTMLDivElement>(null);
+
+  const originalIframeStylesRef = useRef<OriginalStyles | null>(null);
+  const { activeCallRoomId, isPrimaryIframe, isChatOpen } = useCallState();
+  const isViewingActiveCall = useMemo(
+    () => activeCallRoomId !== null && activeCallRoomId === room.roomId,
+    [activeCallRoomId, room.roomId]
+  );
+
+  const screenSize = useScreenSizeContext();
+  const isMobile = screenSize === ScreenSize.Mobile;
+  const activeIframeDisplayRef = isPrimaryIframe
+    ? isViewingActiveCall
+      ? primaryIframeRef
+      : backupIframeRef
+    : isViewingActiveCall
+    ? backupIframeRef
+    : primaryIframeRef;
+
+  const applyFixedPositioningToIframe = useCallback(() => {
+    const iframeElement = activeIframeDisplayRef?.current;
+    const hostElement = iframeHostRef?.current;
+
+    if (iframeElement && hostElement) {
+      if (!originalIframeStylesRef.current) {
+        const computed = window.getComputedStyle(iframeElement);
+        originalIframeStylesRef.current = {
+          position: iframeElement.style.position || computed.position,
+          top: iframeElement.style.top || computed.top,
+          left: iframeElement.style.left || computed.left,
+          width: iframeElement.style.width || computed.width,
+          height: iframeElement.style.height || computed.height,
+          zIndex: iframeElement.style.zIndex || computed.zIndex,
+          display: iframeElement.style.display || computed.display,
+          visibility: iframeElement.style.visibility || computed.visibility,
+          pointerEvents: iframeElement.style.pointerEvents || computed.pointerEvents,
+          border: iframeElement.style.border || computed.border,
+        };
+      }
+
+      const hostRect = hostElement.getBoundingClientRect();
+
+      iframeElement.style.position = 'fixed';
+      iframeElement.style.top = `${hostRect.top}px`;
+      iframeElement.style.left = `${hostRect.left}px`;
+      iframeElement.style.width = `${hostRect.width}px`;
+      iframeElement.style.height = `${hostRect.height}px`;
+      iframeElement.style.border = 'none';
+      iframeElement.style.zIndex = '1000';
+      iframeElement.style.display = room.isCallRoom() ? 'block' : 'none';
+      iframeElement.style.visibility = 'visible';
+      iframeElement.style.pointerEvents = 'auto';
+    }
+  }, [activeIframeDisplayRef, room]);
+
+  const debouncedApplyFixedPositioning = useCallback(debounce(applyFixedPositioningToIframe, 50), [
+    applyFixedPositioningToIframe,
+    primaryIframeRef,
+    backupIframeRef,
+  ]);
+  useEffect(() => {
+    const iframeElement = activeIframeDisplayRef?.current;
+    const hostElement = iframeHostRef?.current;
+
+    if (room.isCallRoom() || (isViewingActiveCall && iframeElement && hostElement)) {
+      applyFixedPositioningToIframe();
+
+      const resizeObserver = new ResizeObserver(debouncedApplyFixedPositioning);
+      resizeObserver.observe(hostElement);
+      window.addEventListener('scroll', debouncedApplyFixedPositioning, true);
+
+      return () => {
+        resizeObserver.disconnect();
+        window.removeEventListener('scroll', debouncedApplyFixedPositioning, true);
+
+        if (iframeElement && originalIframeStylesRef.current) {
+          const originalStyles = originalIframeStylesRef.current;
+          (Object.keys(originalStyles) as Array<keyof OriginalStyles>).forEach((key) => {
+            if (key in iframeElement.style) {
+              iframeElement.style[key as any] = originalStyles[key] || '';
+            }
+          });
+        }
+        originalIframeStylesRef.current = null;
+      };
+    }
+  }, [
+    activeIframeDisplayRef,
+    applyFixedPositioningToIframe,
+    debouncedApplyFixedPositioning,
+    isPrimaryIframe,
+    isViewingActiveCall,
+    room,
+  ]);
+
+  const isCallViewVisible = room.isCallRoom();
+
+  return (
+    <Box
+      direction="Column"
+      style={{
+        width: isChatOpen ? (isMobile ? '50%' : '100%') : '100%',
+        display: isCallViewVisible ? (isMobile && isChatOpen ? 'none' : 'flex') : 'none',
+      }}
+    >
+      <RoomViewHeader />
+      <div
+        ref={iframeHostRef}
+        style={{
+          width: '100%',
+          height: '100%',
+          position: 'relative',
+          pointerEvents: 'none',
+          display: isCallViewVisible ? 'flex' : 'none',
+        }}
+      />
+    </Box>
+  );
+}

src/app/features/call/CinnyWidget.ts

@@ -0,0 +1,9 @@
+import { Widget } from 'matrix-widget-api';
+import { IApp } from './SmallWidget';
+
+// Wrapper class for the widget definition
+export class CinnyWidget extends Widget {
+  public constructor(private rawDefinition: IApp) {
+    super(rawDefinition);
+  }
+}

src/app/features/call/SmallWidget.ts

@@ -0,0 +1,408 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2020-2023 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import EventEmitter from 'events';
+import {
+  ClientEvent,
+  Direction,
+  IEvent,
+  KnownMembership,
+  MatrixClient,
+  MatrixEvent,
+  MatrixEventEvent,
+} from 'matrix-js-sdk';
+import {
+  ClientWidgetApi,
+  IRoomEvent,
+  IStickyActionRequest,
+  IWidget,
+  IWidgetData,
+  MatrixCapabilities,
+  WidgetApiFromWidgetAction,
+  WidgetKind,
+} from 'matrix-widget-api';
+import { logger } from 'matrix-js-sdk/lib/logger';
+import { CinnyWidget } from './CinnyWidget';
+import { SmallWidgetDriver } from './SmallWidgetDriver';
+
+/**
+ * Generates the URL for the Element Call widget.
+ * @param mx - The MatrixClient instance.
+ * @param roomId - The ID of the room.
+ * @returns The generated URL object.
+ */
+export const getWidgetUrl = (
+  mx: MatrixClient,
+  roomId: string,
+  elementCallUrl: string,
+  widgetId: string,
+  setParams: any
+): URL => {
+  const baseUrl = window.location.origin;
+  const url = elementCallUrl
+    ? new URL(`${elementCallUrl}/room`)
+    : new URL('/public/element-call/index.html#', baseUrl);
+
+  const params = new URLSearchParams({
+    embed: 'true',
+    widgetId,
+    appPrompt: 'false',
+    preload: 'false',
+    skipLobby: setParams.skipLobby ?? 'true',
+    returnToLobby: setParams.returnToLobby ?? 'true',
+    perParticipantE2EE: setParams.perParticipantE2EE ?? 'true',
+    hideHeader: 'true',
+    userId: mx.getUserId()!,
+    deviceId: mx.getDeviceId()!,
+    roomId,
+    baseUrl: mx.baseUrl!,
+    parentUrl: window.location.origin,
+  });
+
+  const replacedParams = params.toString().replace(/%24/g, '$');
+  url.search = `?${replacedParams}`;
+
+  logger.info('Generated Element Call Widget URL:', url.toString());
+  return url;
+};
+
+export interface IApp extends IWidget {
+  client: MatrixClient;
+  roomId: string;
+  eventId?: string;
+  avatar_url?: string;
+  'io.element.managed_hybrid'?: boolean;
+}
+
+export class SmallWidget extends EventEmitter {
+  private client: MatrixClient;
+
+  private messaging: ClientWidgetApi | null = null;
+
+  private mockWidget: CinnyWidget;
+
+  public roomId?: string;
+
+  public url?: string;
+
+  private type: string; // Type of the widget (e.g., 'm.call')
+
+  private readUpToMap: { [roomId: string]: string } = {}; // room ID to event ID
+
+  private readonly eventsToFeed = new WeakSet<MatrixEvent>();
+
+  private stickyPromise?: () => Promise<void>;
+
+  constructor(private iapp: IApp) {
+    super();
+    this.client = iapp.client;
+    this.roomId = iapp.roomId;
+    this.url = iapp.url;
+    this.type = iapp.type;
+    this.mockWidget = new CinnyWidget(iapp);
+  }
+
+  /**
+   * Initializes the widget messaging API.
+   * @param iframe - The HTMLIFrameElement to bind to.
+   * @returns The initialized ClientWidgetApi instance.
+   */
+  startMessaging(iframe: HTMLIFrameElement): ClientWidgetApi {
+    // Ensure the driver is correctly instantiated
+    // The capabilities array might need adjustment based on required permissions
+    const driver = new SmallWidgetDriver(
+      this.client,
+      [],
+      this.mockWidget,
+      WidgetKind.Room,
+      true,
+      this.roomId
+    );
+
+    this.messaging = new ClientWidgetApi(this.mockWidget, iframe, driver);
+
+    // Emit events during the widget lifecycle
+    this.messaging.on('preparing', () => this.emit('preparing'));
+    this.messaging.on('error:preparing', (err: unknown) => this.emit('error:preparing', err));
+    this.messaging.once('ready', () => this.emit('ready'));
+    // this.messaging.on("capabilitiesNotified", () => this.emit("capabilitiesNotified")); // Uncomment if needed
+
+    // Populate the map of "read up to" events for this widget with the current event in every room.
+    // This is a bit inefficient, but should be okay. We do this for all rooms in case the widget
+    // requests timeline capabilities in other rooms down the road. It's just easier to manage here.
+    for (const room of this.client.getRooms()) {
+      // Timelines are most recent last
+      const events = room.getLiveTimeline()?.getEvents() || [];
+      const roomEvent = events[events.length - 1];
+      if (!roomEvent) continue; // force later code to think the room is fresh
+      this.readUpToMap[room.roomId] = roomEvent.getId()!;
+    }
+
+    this.messaging.on('action:org.matrix.msc2876.read_events', (ev: CustomEvent) => {
+      const room = this.client.getRoom(this.roomId);
+      const events: Partial<IEvent>[] = [];
+      const { type } = ev.detail.data;
+
+      ev.preventDefault();
+      if (room === null) {
+        return this.messaging?.transport.reply(ev.detail, { events });
+      }
+      const state = room.getLiveTimeline().getState(Direction.Forward);
+      if (state === undefined) {
+        return this.messaging?.transport.reply(ev.detail, { events });
+      }
+
+      const stateEvents = state.events?.get(type);
+
+      for (const [key, eventObject] of stateEvents?.entries() ?? []) {
+        events.push(eventObject.event);
+      }
+
+      return this.messaging?.transport.reply(ev.detail, { events });
+    });
+
+    /*
+    this.messaging?.on('action:content_loaded', () => {
+      this.messaging?.transport?.send('io.element.join', {
+        audioInput: 'true',
+        videoInput: 'true',
+      });
+    });
+    */
+
+    this.client.on(ClientEvent.Event, this.onEvent);
+    this.client.on(MatrixEventEvent.Decrypted, this.onEventDecrypted);
+    //this.client.on(RoomStateEvent.Events, this.onStateUpdate);
+    this.client.on(ClientEvent.ToDeviceEvent, this.onToDeviceEvent);
+    //this.client.on(RoomStateEvent.Events, this.onReadEvent);
+    // this.messaging.setViewedRoomId(this.roomId ?? null);
+    this.messaging.on(
+      `action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`,
+      async (ev: CustomEvent<IStickyActionRequest>) => {
+        if (this.messaging?.hasCapability(MatrixCapabilities.AlwaysOnScreen)) {
+          ev.preventDefault();
+          if (ev.detail.data.value) {
+            // If the widget wants to become sticky we wait for the stickyPromise to resolve
+            if (this.stickyPromise) await this.stickyPromise();
+            this.messaging.transport.reply(ev.detail, {});
+          }
+          // Stop being persistent can be done instantly
+          //MAKE PERSISTENT HERE
+          // Send the ack after the widget actually has become sticky.
+        }
+      }
+    );
+
+    logger.info(`Widget messaging started for widgetId: ${this.mockWidget.id}`);
+    return this.messaging;
+  }
+
+  private onEvent = (ev: MatrixEvent): void => {
+    this.client.decryptEventIfNeeded(ev);
+    this.feedEvent(ev);
+  };
+
+  private onEventDecrypted = (ev: MatrixEvent): void => {
+    this.feedEvent(ev);
+  };
+
+  private onReadEvent = (ev: MatrixEvent): void => {
+    this.feedEvent(ev);
+  };
+
+  private onToDeviceEvent = async (ev: MatrixEvent): Promise<void> => {
+    await this.client.decryptEventIfNeeded(ev);
+    if (ev.isDecryptionFailure()) return;
+    await this.messaging?.feedToDevice(ev.getEffectiveEvent() as IRoomEvent, ev.isEncrypted());
+  };
+
+  /**
+   * Determines whether the event comes from a room that we've been invited to
+   * (in which case we likely don't have the full timeline).
+   */
+  private isFromInvite(ev: MatrixEvent): boolean {
+    const room = this.client.getRoom(ev.getRoomId());
+    return room?.getMyMembership() === KnownMembership.Invite;
+  }
+
+  /**
+   * Determines whether the event has a relation to an unknown parent.
+   */
+  private relatesToUnknown(ev: MatrixEvent): boolean {
+    // Replies to unknown events don't count
+    if (!ev.relationEventId || ev.replyEventId) return false;
+    const room = this.client.getRoom(ev.getRoomId());
+    return room === null || !room.findEventById(ev.relationEventId);
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  private arrayFastClone<T>(a: T[]): T[] {
+    return a.slice(0, a.length);
+  }
+
+  private advanceReadUpToMarker(ev: MatrixEvent): boolean {
+    const evId = ev.getId();
+    if (evId === undefined) return false;
+    const roomId = ev.getRoomId();
+    if (roomId === undefined) return false;
+    const room = this.client.getRoom(roomId);
+    if (room === null) return false;
+
+    const upToEventId = this.readUpToMap[ev.getRoomId()!];
+    if (!upToEventId) {
+      // There's no marker yet; start it at this event
+      this.readUpToMap[roomId] = evId;
+      return true;
+    }
+
+    // Small optimization for exact match (skip the search)
+    if (upToEventId === evId) return false;
+
+    // Timelines are most recent last, so reverse the order and limit ourselves to 100 events
+    // to avoid overusing the CPU.
+    const timeline = room.getLiveTimeline();
+    const events = this.arrayFastClone(timeline.getEvents()).reverse().slice(0, 100);
+
+    for (const timelineEvent of events) {
+      if (timelineEvent.getId() === upToEventId) {
+        // The event must be somewhere before the "read up to" marker
+        return false;
+      }
+      if (timelineEvent.getId() === ev.getId()) {
+        // The event is after the marker; advance it
+        this.readUpToMap[roomId] = evId;
+        return true;
+      }
+    }
+
+    // We can't say for sure whether the widget has seen the event; let's
+    // just assume that it has
+    return false;
+  }
+
+  private feedEvent(ev: MatrixEvent): void {
+    if (this.messaging === null) return;
+
+    if (
+      // If we had decided earlier to feed this event to the widget, but
+      // it just wasn't ready, give it another try
+      this.eventsToFeed.delete(ev) ||
+      // Skip marker timeline check for events with relations to unknown parent because these
+      // events are not added to the timeline here and will be ignored otherwise:
+      // https://github.com/matrix-org/matrix-js-sdk/blob/d3dfcd924201d71b434af3d77343b5229b6ed75e/src/models/room.ts#L2207-L2213
+      this.relatesToUnknown(ev) ||
+      // Skip marker timeline check for rooms where membership is
+      // 'invite', otherwise the membership event from the invitation room
+      // will advance the marker and new state events will not be
+      // forwarded to the widget.
+      this.isFromInvite(ev) ||
+      // Check whether this event would be before or after our "read up to" marker. If it's
+      // before, or we can't decide, then we assume the widget will have already seen the event.
+      // If the event is after, or we don't have a marker for the room, then the marker will advance and we'll
+      // send it through.
+      // This approach of "read up to" prevents widgets receiving decryption spam from startup or
+      // receiving ancient events from backfill and such.
+      this.advanceReadUpToMarker(ev)
+    ) {
+      // If the event is still being decrypted, remember that we want to
+      // feed it to the widget (even if not strictly in the order given by
+      // the timeline) and get back to it later
+      if (ev.isBeingDecrypted() || ev.isDecryptionFailure()) {
+        this.eventsToFeed.add(ev);
+      } else {
+        const raw = ev.getEffectiveEvent();
+        this.messaging.feedEvent(raw as IRoomEvent, this.roomId ?? '').catch((e) => {
+          logger.error('Error sending event to widget: ', e);
+        });
+      }
+    }
+  }
+
+  /**
+   * Stops the widget messaging and cleans up resources.
+   */
+  stopMessaging() {
+    if (this.messaging) {
+      this.messaging.stop(); // Example if a stop method exists
+      this.messaging.removeAllListeners(); // Remove listeners attached by SmallWidget
+      logger.info(`Widget messaging stopped for widgetId: ${this.mockWidget.id}`);
+      this.messaging = null;
+    }
+  }
+}
+
+/**
+ * Creates the data object for the widget.
+ * @param client - The MatrixClient instance.
+ * @param roomId - The ID of the room.
+ * @param currentData - Existing widget data.
+ * @param overwriteData - Data to merge or overwrite.
+ * @returns The final widget data object.
+ */
+export const getWidgetData = (
+  client: MatrixClient,
+  roomId: string,
+  currentData: object,
+  overwriteData: object
+): IWidgetData => {
+  // Example: Determine E2EE based on room state if needed
+  const perParticipantE2EE = true; // Default or based on logic
+  // const roomEncryption = client.getRoom(roomId)?.currentState.getStateEvents(EventType.RoomEncryption, "");
+  // if (roomEncryption) perParticipantE2EE = true; // Simplified example
+
+  return {
+    ...currentData,
+    ...overwriteData,
+    perParticipantE2EE,
+  };
+};
+
+/**
+ * Creates a virtual widget definition (IApp).
+ * @param client - MatrixClient instance.
+ * @param id - Widget ID.
+ * @param creatorUserId - User ID of the creator.
+ * @param name - Widget display name.
+ * @param type - Widget type (e.g., 'm.call').
+ * @param url - Widget URL.
+ * @param waitForIframeLoad - Whether to wait for iframe load signal.
+ * @param data - Widget data.
+ * @param roomId - Room ID.
+ * @returns The IApp widget definition.
+ */
+export const createVirtualWidget = (
+  client: MatrixClient,
+  id: string,
+  creatorUserId: string,
+  name: string,
+  type: string,
+  url: URL,
+  waitForIframeLoad: boolean,
+  data: IWidgetData,
+  roomId: string
+): IApp => ({
+  client,
+  id,
+  creatorUserId,
+  name,
+  type,
+  url: url.toString(), // Store URL as string in the definition
+  waitForIframeLoad,
+  data,
+  roomId,
+  // Add other required fields from IWidget if necessary
+  sender: creatorUserId, // Example: Assuming sender is the creator
+  content: {
+    // Example content structure
+    type,
+    url: url.toString(),
+    name,
+    data,
+    creatorUserId,
+  },
+});

src/app/features/call/SmallWidgetDriver.ts

@@ -0,0 +1,551 @@
+/* eslint-disable no-return-await */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-continue */
+/* eslint-disable class-methods-use-this */
+/* eslint-disable no-dupe-class-members */
+/*
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2020-2023 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+import {
+  type Capability,
+  EventDirection,
+  type ISendDelayedEventDetails,
+  type ISendEventDetails,
+  type IReadEventRelationsResult,
+  type IRoomEvent,
+  MatrixCapabilities,
+  type Widget,
+  WidgetDriver,
+  WidgetEventCapability,
+  WidgetKind,
+  type IWidgetApiErrorResponseDataDetails,
+  type ISearchUserDirectoryResult,
+  type IGetMediaConfigResult,
+  type UpdateDelayedEventAction,
+  OpenIDRequestState,
+  SimpleObservable,
+  IOpenIDUpdate,
+} from 'matrix-widget-api';
+import {
+  EventType,
+  type IContent,
+  MatrixError,
+  type MatrixEvent,
+  Direction,
+  type SendDelayedEventResponse,
+  type StateEvents,
+  type TimelineEvents,
+  MatrixClient,
+} from 'matrix-js-sdk';
+
+export class SmallWidgetDriver extends WidgetDriver {
+  private allowedCapabilities: Set<Capability>;
+
+  private readonly mxClient: MatrixClient; // Store the client instance
+
+  public constructor(
+    mx: MatrixClient,
+    allowedCapabilities: Capability[],
+    private forWidget: Widget,
+    private forWidgetKind: WidgetKind,
+    virtual: boolean, // Assuming 'virtual' might be needed later, kept for consistency
+    private inRoomId?: string
+  ) {
+    super();
+    this.mxClient = mx; // Store the passed instance
+
+    this.allowedCapabilities = new Set([
+      ...allowedCapabilities,
+      MatrixCapabilities.Screenshots,
+      // Add other base capabilities as needed, e.g., ElementWidgetCapabilities.RequiresClient
+    ]);
+
+    // --- Capabilities specific to Element Call (or similar trusted widgets) ---
+    // This is a trusted Element Call widget that we control (adjust if not Element Call)
+    this.allowedCapabilities.add(MatrixCapabilities.AlwaysOnScreen);
+    this.allowedCapabilities.add(MatrixCapabilities.MSC3846TurnServers);
+    this.allowedCapabilities.add(MatrixCapabilities.MSC4157SendDelayedEvent);
+    this.allowedCapabilities.add(MatrixCapabilities.MSC4157UpdateDelayedEvent);
+    // Capability to access the room timeline (MSC2762)
+    this.allowedCapabilities.add(`org.matrix.msc2762.timeline:${inRoomId}`);
+    // Capability to read room state (MSC2762)
+    this.allowedCapabilities.add(`org.matrix.msc2762.state:${inRoomId}`);
+    this.allowedCapabilities.add(
+      WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomMember).raw
+    );
+    this.allowedCapabilities.add(
+      WidgetEventCapability.forStateEvent(EventDirection.Receive, 'org.matrix.msc3401.call').raw
+    );
+    this.allowedCapabilities.add(
+      WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomEncryption).raw
+    );
+    const clientUserId = this.mxClient.getSafeUserId();
+    // For the legacy membership type
+    this.allowedCapabilities.add(
+      WidgetEventCapability.forStateEvent(
+        EventDirection.Send,
+        'org.matrix.msc3401.call.member',
+        clientUserId
+      ).raw
+    );
+    const clientDeviceId = this.mxClient.getDeviceId();
+    if (clientDeviceId !== null) {
+      // For the session membership type compliant with MSC4143
+      this.allowedCapabilities.add(
+        WidgetEventCapability.forStateEvent(
+          EventDirection.Send,
+          'org.matrix.msc3401.call.member',
+          `_${clientUserId}_${clientDeviceId}`
+        ).raw
+      );
+      // Version with no leading underscore, for room versions whose auth rules allow it
+      this.allowedCapabilities.add(
+        WidgetEventCapability.forStateEvent(
+          EventDirection.Send,
+          'org.matrix.msc3401.call.member',
+          `${clientUserId}_${clientDeviceId}`
+        ).raw
+      );
+    }
+    this.allowedCapabilities.add(
+      WidgetEventCapability.forStateEvent(EventDirection.Receive, 'org.matrix.msc3401.call.member')
+        .raw
+    );
+    // for determining auth rules specific to the room version
+    this.allowedCapabilities.add(
+      WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomCreate).raw
+    );
+
+    const sendRecvRoomEvents = [
+      'io.element.call.encryption_keys',
+      'org.matrix.rageshake_request',
+      EventType.Reaction,
+      EventType.RoomRedaction,
+      'io.element.call.reaction',
+    ];
+    // eslint-disable-next-line no-restricted-syntax
+    for (const eventType of sendRecvRoomEvents) {
+      this.allowedCapabilities.add(
+        WidgetEventCapability.forRoomEvent(EventDirection.Send, eventType).raw
+      );
+      this.allowedCapabilities.add(
+        WidgetEventCapability.forRoomEvent(EventDirection.Receive, eventType).raw
+      );
+    }
+
+    const sendRecvToDevice = [
+      EventType.CallInvite,
+      EventType.CallCandidates,
+      EventType.CallAnswer,
+      EventType.CallHangup,
+      EventType.CallReject,
+      EventType.CallSelectAnswer,
+      EventType.CallNegotiate,
+      EventType.CallSDPStreamMetadataChanged,
+      EventType.CallSDPStreamMetadataChangedPrefix,
+      EventType.CallReplaces,
+      EventType.CallEncryptionKeysPrefix,
+    ];
+    // eslint-disable-next-line no-restricted-syntax
+    for (const eventType of sendRecvToDevice) {
+      this.allowedCapabilities.add(
+        WidgetEventCapability.forToDeviceEvent(EventDirection.Send, eventType).raw
+      );
+      this.allowedCapabilities.add(
+        WidgetEventCapability.forToDeviceEvent(EventDirection.Receive, eventType).raw
+      );
+    }
+  }
+
+  public async validateCapabilities(requested: Set<Capability>): Promise<Set<Capability>> {
+    // Stubbed under the assumption voice calls will be valid thru element-call
+    return requested;
+  }
+
+  public async sendEvent<K extends keyof StateEvents>(
+    eventType: K,
+    content: StateEvents[K],
+    stateKey: string | null,
+    targetRoomId: string | null
+  ): Promise<ISendEventDetails>;
+
+  public async sendEvent<K extends keyof TimelineEvents>(
+    eventType: K,
+    content: TimelineEvents[K],
+    stateKey: null,
+    targetRoomId: string | null
+  ): Promise<ISendEventDetails>;
+
+  public async sendEvent(
+    eventType: string,
+    content: IContent,
+    stateKey: string | null = null,
+    targetRoomId: string | null = null
+  ): Promise<ISendEventDetails> {
+    const client = this.mxClient;
+    const roomId = targetRoomId || this.inRoomId;
+
+    if (!client || !roomId) throw new Error('Not in a room or not attached to a client');
+
+    let r: { event_id: string } | null;
+    if (stateKey !== null) {
+      // state event
+      r = await client.sendStateEvent(
+        roomId,
+        eventType as keyof StateEvents,
+        content as StateEvents[keyof StateEvents],
+        stateKey
+      );
+    } else if (eventType === EventType.RoomRedaction) {
+      // special case: extract the `redacts` property and call redact
+      r = await client.redactEvent(roomId, content.redacts);
+    } else {
+      // message event
+      r = await client.sendEvent(
+        roomId,
+        eventType as keyof TimelineEvents,
+        content as TimelineEvents[keyof TimelineEvents]
+      );
+    }
+
+    return { roomId, eventId: r.event_id };
+  }
+
+  /**
+   * @experimental Part of MSC4140 & MSC4157
+   * @see {@link WidgetDriver#sendDelayedEvent}
+   */
+  public async sendDelayedEvent<K extends keyof StateEvents>(
+    delay: number | null,
+    parentDelayId: string | null,
+    eventType: K,
+    content: StateEvents[K],
+    stateKey: string | null,
+    targetRoomId: string | null
+  ): Promise<ISendDelayedEventDetails>;
+
+  /**
+   * @experimental Part of MSC4140 & MSC4157
+   */
+  public async sendDelayedEvent<K extends keyof TimelineEvents>(
+    delay: number | null,
+    parentDelayId: string | null,
+    eventType: K,
+    content: TimelineEvents[K],
+    stateKey: null,
+    targetRoomId: string | null
+  ): Promise<ISendDelayedEventDetails>;
+
+  public async sendDelayedEvent(
+    delay: number | null,
+    parentDelayId: string | null,
+    eventType: string,
+    content: IContent,
+    stateKey: string | null = null,
+    targetRoomId: string | null = null
+  ): Promise<ISendDelayedEventDetails> {
+    const client = this.mxClient;
+    const roomId = targetRoomId || this.inRoomId;
+
+    if (!client || !roomId) throw new Error('Not in a room or not attached to a client');
+
+    let delayOpts;
+    if (delay !== null) {
+      delayOpts = {
+        delay,
+        ...(parentDelayId !== null && { parent_delay_id: parentDelayId }),
+      };
+    } else if (parentDelayId !== null) {
+      delayOpts = {
+        parent_delay_id: parentDelayId,
+      };
+    } else {
+      throw new Error('Must provide at least one of delay or parentDelayId');
+    }
+
+    let r: SendDelayedEventResponse | null;
+    if (stateKey !== null) {
+      // state event
+      r = await client._unstable_sendDelayedStateEvent(
+        roomId,
+        delayOpts,
+        eventType as keyof StateEvents,
+        content as StateEvents[keyof StateEvents],
+        stateKey
+      );
+    } else {
+      // message event
+      r = await client._unstable_sendDelayedEvent(
+        roomId,
+        delayOpts,
+        null,
+        eventType as keyof TimelineEvents,
+        content as TimelineEvents[keyof TimelineEvents]
+      );
+    }
+
+    return {
+      roomId,
+      delayId: r.delay_id,
+    };
+  }
+
+  /**
+   * @experimental Part of MSC4140 & MSC4157
+   */
+  public async updateDelayedEvent(
+    delayId: string,
+    action: UpdateDelayedEventAction
+  ): Promise<void> {
+    const client = this.mxClient;
+
+    if (!client) throw new Error('Not in a room or not attached to a client');
+
+    await client._unstable_updateDelayedEvent(delayId, action);
+  }
+
+  /**
+   * Implements {@link WidgetDriver#sendToDevice}
+   */
+  public async sendToDevice(
+    eventType: string,
+    encrypted: boolean,
+    contentMap: { [userId: string]: { [deviceId: string]: object } }
+  ): Promise<void> {
+    const client = this.mxClient;
+
+    if (encrypted) {
+      const crypto = client.getCrypto();
+      if (!crypto) throw new Error('E2EE not enabled');
+
+      // attempt to re-batch these up into a single request
+      const invertedContentMap: { [content: string]: { userId: string; deviceId: string }[] } = {};
+
+      // eslint-disable-next-line no-restricted-syntax
+      for (const userId of Object.keys(contentMap)) {
+        const userContentMap = contentMap[userId];
+        // eslint-disable-next-line no-restricted-syntax
+        for (const deviceId of Object.keys(userContentMap)) {
+          const content = userContentMap[deviceId];
+          const stringifiedContent = JSON.stringify(content);
+          invertedContentMap[stringifiedContent] = invertedContentMap[stringifiedContent] || [];
+          invertedContentMap[stringifiedContent].push({ userId, deviceId });
+        }
+      }
+
+      await Promise.all(
+        Object.entries(invertedContentMap).map(async ([stringifiedContent, recipients]) => {
+          const batch = await crypto.encryptToDeviceMessages(
+            eventType,
+            recipients,
+            JSON.parse(stringifiedContent)
+          );
+
+          await client.queueToDevice(batch);
+        })
+      );
+    } else {
+      await client.queueToDevice({
+        eventType,
+        batch: Object.entries(contentMap).flatMap(([userId, userContentMap]) =>
+          Object.entries(userContentMap).map(([deviceId, content]) => ({
+            userId,
+            deviceId,
+            payload: content,
+          }))
+        ),
+      });
+    }
+  }
+
+  /**
+   * Reads all events of the given type, and optionally `msgtype` (if applicable/defined),
+   * the user has access to. The widget API will have already verified that the widget is
+   * capable of receiving the events. Less events than the limit are allowed to be returned,
+   * but not more.
+   * @param roomId The ID of the room to look within.
+   * @param eventType The event type to be read.
+   * @param msgtype The msgtype of the events to be read, if applicable/defined.
+   * @param stateKey The state key of the events to be read, if applicable/defined.
+   * @param limit The maximum number of events to retrieve. Will be zero to denote "as many as
+   * possible".
+   * @param since When null, retrieves the number of events specified by the "limit" parameter.
+   * Otherwise, the event ID at which only subsequent events will be returned, as many as specified
+   * in "limit".
+   * @returns {Promise<IRoomEvent[]>} Resolves to the room events, or an empty array.
+   */
+  public async readRoomTimeline(
+    roomId: string,
+    eventType: string,
+    msgtype: string | undefined,
+    stateKey: string | undefined,
+    limit: number,
+    since: string | undefined
+  ): Promise<IRoomEvent[]> {
+    limit = limit > 0 ? Math.min(limit, Number.MAX_SAFE_INTEGER) : Number.MAX_SAFE_INTEGER; // relatively arbitrary
+
+    const room = this.mxClient.getRoom(roomId);
+    if (room === null) return [];
+    const results: MatrixEvent[] = [];
+    const events = room.getLiveTimeline().getEvents(); // timelines are most recent last
+    for (let i = events.length - 1; i >= 0; i--) {
+      const ev = events[i];
+      if (results.length >= limit) break;
+      if (since !== undefined && ev.getId() === since) break;
+
+      if (ev.getType() !== eventType || ev.isState()) continue;
+      if (eventType === EventType.RoomMessage && msgtype && msgtype !== ev.getContent().msgtype)
+        continue;
+      if (ev.getStateKey() !== undefined && stateKey !== undefined && ev.getStateKey() !== stateKey)
+        continue;
+      results.push(ev);
+    }
+
+    return results.map((e) => e.getEffectiveEvent() as IRoomEvent);
+  }
+
+  public async askOpenID(observer: SimpleObservable<IOpenIDUpdate>): Promise<void> {
+    return observer.update({
+      state: OpenIDRequestState.Allowed,
+      token: await this.mxClient.getOpenIdToken(),
+    });
+  }
+
+  /**
+   * Reads the current values of all matching room state entries.
+   * @param roomId The ID of the room.
+   * @param eventType The event type of the entries to be read.
+   * @param stateKey The state key of the entry to be read. If undefined,
+   * all room state entries with a matching event type should be returned.
+   * @returns {Promise<IRoomEvent[]>} Resolves to the events representing the
+   * current values of the room state entries.
+   */
+  public async readRoomState(
+    roomId: string,
+    eventType: string,
+    stateKey: string | undefined
+  ): Promise<IRoomEvent[]> {
+    const room = this.mxClient.getRoom(roomId);
+    if (room === null) return [];
+    const state = room.getLiveTimeline().getState(Direction.Forward);
+    if (state === undefined) return [];
+
+    if (stateKey === undefined)
+      return state.getStateEvents(eventType).map((e) => e.getEffectiveEvent() as IRoomEvent);
+    const event = state.getStateEvents(eventType, stateKey);
+    return event === null ? [] : [event.getEffectiveEvent() as IRoomEvent];
+  }
+
+  /*
+    public async navigate(uri: string): Promise<void> {
+        navigateToPermalink(uri);
+    }
+    */
+
+  public async readEventRelations(
+    eventId: string,
+    roomId?: string,
+    relationType?: string,
+    eventType?: string,
+    from?: string,
+    to?: string,
+    limit?: number,
+    direction?: 'f' | 'b'
+  ): Promise<IReadEventRelationsResult> {
+    const client = this.mxClient;
+    const dir = direction as Direction;
+    roomId = roomId ?? this.inRoomId ?? undefined;
+
+    if (typeof roomId !== 'string') {
+      throw new Error('Error while reading the current room');
+    }
+
+    const { events, nextBatch, prevBatch } = await client.relations(
+      roomId,
+      eventId,
+      relationType ?? null,
+      eventType ?? null,
+      { from, to, limit, dir }
+    );
+
+    return {
+      chunk: events.map((e) => e.getEffectiveEvent() as IRoomEvent),
+      nextBatch: nextBatch ?? undefined,
+      prevBatch: prevBatch ?? undefined,
+    };
+  }
+
+  public async searchUserDirectory(
+    searchTerm: string,
+    limit?: number
+  ): Promise<ISearchUserDirectoryResult> {
+    const client = this.mxClient;
+
+    const { limited, results } = await client.searchUserDirectory({ term: searchTerm, limit });
+
+    return {
+      limited,
+      results: results.map((r) => ({
+        userId: r.user_id,
+        displayName: r.display_name,
+        avatarUrl: r.avatar_url,
+      })),
+    };
+  }
+
+  public async getMediaConfig(): Promise<IGetMediaConfigResult> {
+    const client = this.mxClient;
+
+    return await client.getMediaConfig();
+  }
+
+  public async uploadFile(file: XMLHttpRequestBodyInit): Promise<{ contentUri: string }> {
+    const client = this.mxClient;
+
+    const uploadResult = await client.uploadContent(file);
+
+    return { contentUri: uploadResult.content_uri };
+  }
+
+  /**
+   * Download a file from the media repository on the homeserver.
+   *
+   * @param contentUri - the MXC URI of the file to download
+   * @returns an object with: file - response contents as Blob
+   */
+  /*
+    public async downloadFile(contentUri: string): Promise<{ file: XMLHttpRequestBodyInit }> {
+        const client = this.mxClient;
+        const media = mediaFromMxc(contentUri, client);
+        const response = await media.downloadSource();
+        const blob = await response.blob();
+        return { file: blob };
+    }
+    */
+
+  /**
+   * Gets the IDs of all joined or invited rooms currently known to the
+   * client.
+   * @returns The room IDs.
+   */
+  public getKnownRooms(): string[] {
+    return this.mxClient.getVisibleRooms().map((r) => r.roomId);
+  }
+
+  /**
+   * Expresses a {@link MatrixError} as a JSON payload
+   * for use by Widget API error responses.
+   * @param error The error to handle.
+   * @returns The error expressed as a JSON payload,
+   * or undefined if it is not a {@link MatrixError}.
+   */
+  public processError(error: unknown): IWidgetApiErrorResponseDataDetails | undefined {
+    return error instanceof MatrixError
+      ? { matrix_api_error: error.asWidgetApiErrorData() }
+      : undefined;
+  }
+}