Merge branch 'livekit-experiment' into livekit-load-test

src/App.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2021 New Vector Ltd
+Copyright 2021 - 2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

src/ClientContext.tsx

@@ -36,7 +36,10 @@ import {
   fallbackICEServerAllowed,
 } from "./matrix-utils";
 import { widget } from "./widget";
-import { PosthogAnalytics, RegistrationType } from "./PosthogAnalytics";
+import {
+  PosthogAnalytics,
+  RegistrationType,
+} from "./analytics/PosthogAnalytics";
 import { translatedError } from "./TranslatedError";
 import { useEventTarget } from "./useEvents";
 import { Config } from "./config/Config";
@@ -339,6 +342,9 @@ export const ClientProvider: FC<Props> = ({ children }) => {
   useEffect(() => {
     window.matrixclient = client;
     window.isPasswordlessUser = isPasswordlessUser;
+
+    if (PosthogAnalytics.hasInstance())
+      PosthogAnalytics.instance.onLoginStatusChanged();
   }, [client, isPasswordlessUser]);
 
   if (error) {

src/Header.tsx

@@ -131,7 +131,9 @@ export function RoomHeaderInfo({ roomName, avatarUrl }: RoomHeaderInfo) {
         />
         <VideoIcon width={16} height={16} />
       </div>
-      <Subtitle fontWeight="semiBold">{roomName}</Subtitle>
+      <Subtitle data-testid="roomHeader_roomName" fontWeight="semiBold">
+        {roomName}
+      </Subtitle>
     </>
   );
 }

src/Modal.module.css

@@ -40,7 +40,7 @@ limitations under the License.
 .modalHeader {
   display: flex;
   justify-content: space-between;
-  padding: 34px 34px 0 34px;
+  padding: 34px 32px 0 32px;
 }
 
 .modalHeader h3 {
@@ -72,7 +72,7 @@ limitations under the License.
   .modalHeader {
     display: flex;
     justify-content: space-between;
-    padding: 24px 24px 0 24px;
+    padding: 32px 20px 0 20px;
   }
 
   .modal.mobileFullScreen {

src/Modal.tsx

@@ -92,6 +92,7 @@ export function Modal({
                 {...closeButtonProps}
                 ref={closeButtonRef}
                 className={styles.closeButton}
+                data-testid="modal_close"
                 title={t("Close")}
               >
                 <CloseIcon />

src/UrlParams.ts

@@ -79,6 +79,11 @@ interface UrlParams {
    * The Posthog analytics ID. It is only available if the user has given consent for sharing telemetry in element web.
    */
   analyticsID: string | null;
+  /**
+   * Whether the app is allowed to use fallback STUN servers for ICE in case the
+   * user's homeserver doesn't provide any.
+   */
+  allowIceFallback: boolean;
 }
 
 /**
@@ -135,6 +140,7 @@ export const getUrlParams = (
     fonts: getAllParams("font"),
     fontScale: Number.isNaN(fontScale) ? null : fontScale,
     analyticsID: getParam("analyticsID"),
+    allowIceFallback: hasParam("allowIceFallback"),
   };
 };
 

src/UserMenu.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -25,6 +25,7 @@ import { Menu } from "./Menu";
 import { TooltipTrigger } from "./Tooltip";
 import { Avatar, Size } from "./Avatar";
 import { ReactComponent as UserIcon } from "./icons/User.svg";
+import { ReactComponent as SettingsIcon } from "./icons/Settings.svg";
 import { ReactComponent as LoginIcon } from "./icons/Login.svg";
 import { ReactComponent as LogoutIcon } from "./icons/Logout.svg";
 import { Body } from "./typography/Typography";
@@ -58,6 +59,12 @@ export function UserMenu({
         key: "user",
         icon: UserIcon,
         label: displayName,
+        dataTestid: "usermenu_user",
+      });
+      arr.push({
+        key: "settings",
+        icon: SettingsIcon,
+        label: t("Settings"),
       });
 
       if (isPasswordlessUser && !preventNavigation) {
@@ -65,6 +72,7 @@ export function UserMenu({
           key: "login",
           label: t("Sign in"),
           icon: LoginIcon,
+          dataTestid: "usermenu_login",
         });
       }
 
@@ -73,6 +81,7 @@ export function UserMenu({
           key: "logout",
           label: t("Sign out"),
           icon: LogoutIcon,
+          dataTestid: "usermenu_logout",
         });
       }
     }
@@ -93,7 +102,11 @@ export function UserMenu({
   return (
     <PopoverMenuTrigger placement="bottom right">
       <TooltipTrigger tooltip={tooltip} placement="bottom left">
-        <Button variant="icon" className={styles.userButton}>
+        <Button
+          variant="icon"
+          className={styles.userButton}
+          data-testid="usermenu_open"
+        >
           {isAuthenticated && (!isPasswordlessUser || avatarUrl) ? (
             <Avatar
               size={Size.SM}
@@ -108,9 +121,14 @@ export function UserMenu({
       </TooltipTrigger>
       {(props) => (
         <Menu {...props} label={t("User menu")} onAction={onAction}>
-          {items.map(({ key, icon: Icon, label }) => (
+          {items.map(({ key, icon: Icon, label, dataTestid }) => (
             <Item key={key} textValue={label}>
-              <Icon width={24} height={24} className={styles.menuIcon} />
+              <Icon
+                width={24}
+                height={24}
+                className={styles.menuIcon}
+                data-testid={dataTestid}
+              />
               <Body overflowEllipsis>{label}</Body>
             </Item>
           ))}

src/UserMenuContainer.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,19 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 import { useHistory, useLocation } from "react-router-dom";
 
 import { useClient } from "./ClientContext";
 import { useProfile } from "./profile/useProfile";
 import { useModalTriggerState } from "./Modal";
-import { ProfileModal } from "./profile/ProfileModal";
+import { SettingsModal } from "./settings/SettingsModal";
 import { UserMenu } from "./UserMenu";
+import { MediaDevicesState } from "./settings/mediaDevices";
 
 interface Props {
   preventNavigation?: boolean;
 }
 
+const mediaDevicesStub: MediaDevicesState = {
+  state: new Map(),
+  selectActiveDevice: () => Promise.resolve(),
+};
+
 export function UserMenuContainer({ preventNavigation = false }: Props) {
   const location = useLocation();
   const history = useHistory();
@@ -35,10 +41,17 @@ export function UserMenuContainer({ preventNavigation = false }: Props) {
   const { displayName, avatarUrl } = useProfile(client);
   const { modalState, modalProps } = useModalTriggerState();
 
+  const [defaultSettingsTab, setDefaultSettingsTab] = useState<string>();
+
   const onAction = useCallback(
-    (value: string) => {
+    async (value: string) => {
       switch (value) {
         case "user":
+          setDefaultSettingsTab("profile");
+          modalState.open();
+          break;
+        case "settings":
+          setDefaultSettingsTab("audio");
           modalState.open();
           break;
         case "logout":
@@ -64,7 +77,16 @@ export function UserMenuContainer({ preventNavigation = false }: Props) {
           displayName || (userName ? userName.replace("@", "") : undefined)
         }
       />
-      {modalState.isOpen && <ProfileModal client={client} {...modalProps} />}
+      {modalState.isOpen && (
+        <SettingsModal
+          client={client}
+          defaultTab={defaultSettingsTab}
+          // TODO Replace this with real media devices, while making sure this
+          // doesn't cause unnecessary device permission pop-ups
+          mediaDevices={mediaDevicesStub}
+          {...modalProps}
+        />
+      )}
     </>
   );
 }

src/analytics/AnalyticsNotice.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from "react";
+import { Trans } from "react-i18next";
+
+import { Link } from "../typography/Typography";
+
+export const AnalyticsNotice: FC = () => (
+  <Trans>
+    By participating in this beta, you consent to the collection of anonymous
+    data, which we use to improve the product. You can find more information
+    about which data we track in our{" "}
+    <Link href="https://element.io/privacy">Privacy Policy</Link> and our{" "}
+    <Link href="https://element.io/cookie-policy">Cookie Policy</Link>.
+  </Trans>
+);

src/analytics/PosthogAnalytics.ts

@@ -19,8 +19,8 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { MatrixClient } from "matrix-js-sdk";
 import { Buffer } from "buffer";
 
-import { widget } from "./widget";
-import { getSetting, setSetting, settingsBus } from "./settings/useSetting";
+import { widget } from "../widget";
+import { getSetting, setSetting, settingsBus } from "../settings/useSetting";
 import {
   CallEndedTracker,
   CallStartedTracker,
@@ -29,9 +29,10 @@ import {
   MuteCameraTracker,
   MuteMicrophoneTracker,
   UndecryptableToDeviceEventTracker,
+  QualitySurveyEventTracker,
 } from "./PosthogEvents";
-import { Config } from "./config/Config";
-import { getUrlParams } from "./UrlParams";
+import { Config } from "../config/Config";
+import { getUrlParams } from "../UrlParams";
 
 /* Posthog analytics tracking.
  *
@@ -55,7 +56,7 @@ export interface IPosthogEvent {
   $set_once?: void;
 }
 
-enum Anonymity {
+export enum Anonymity {
   Disabled,
   Anonymous,
   Pseudonymous,
@@ -94,7 +95,7 @@ export class PosthogAnalytics {
   private static ANALYTICS_EVENT_TYPE = "im.vector.analytics";
 
   // set true during the constructor if posthog config is present, otherwise false
-  private static internalInstance = null;
+  private static internalInstance: PosthogAnalytics | null = null;
 
   private identificationPromise: Promise<void>;
   private readonly enabled: boolean = false;
@@ -102,6 +103,10 @@ export class PosthogAnalytics {
   private platformSuperProperties = {};
   private registrationType: RegistrationType = RegistrationType.Guest;
 
+  public static hasInstance(): boolean {
+    return Boolean(this.internalInstance);
+  }
+
   public static get instance(): PosthogAnalytics {
     if (!this.internalInstance) {
       this.internalInstance = new PosthogAnalytics(posthog);
@@ -137,6 +142,9 @@ export class PosthogAnalytics {
       });
       this.enabled = true;
     } else {
+      logger.info(
+        "Posthog is not enabled because there is no api key or no host given in the config"
+      );
       this.enabled = false;
     }
     this.startListeningToSettingsChanges();
@@ -224,10 +232,8 @@ export class PosthogAnalytics {
       .join("");
   }
 
-  public async identifyUser(analyticsIdGenerator: () => string) {
-    // There might be a better way to get the client here.
-
-    if (this.anonymity == Anonymity.Pseudonymous) {
+  private async identifyUser(analyticsIdGenerator: () => string) {
+    if (this.anonymity == Anonymity.Pseudonymous && this.enabled) {
       // Check the user's account_data for an analytics ID to use. Storing the ID in account_data allows
       // different devices to send the same ID.
       let analyticsID = await this.getAnalyticsId();
@@ -318,7 +324,12 @@ export class PosthogAnalytics {
     this.setAnonymity(Anonymity.Disabled);
   }
 
-  public updateSuperProperties() {
+  public onLoginStatusChanged(): void {
+    const optInAnalytics = getSetting("opt-in-analytics", false);
+    this.updateAnonymityAndIdentifyUser(optInAnalytics);
+  }
+
+  private updateSuperProperties() {
     // Update super properties in posthog with our platform (app version, platform).
     // These properties will be subsequently passed in every event.
     //
@@ -338,7 +349,7 @@ export class PosthogAnalytics {
     return this.eventSignup.getSignupEndTime() > new Date(0);
   }
 
-  public async updateAnonymityAndIdentifyUser(
+  private async updateAnonymityAndIdentifyUser(
     pseudonymousOptIn: boolean
   ): Promise<void> {
     // Update this.anonymity based on the user's analytics opt-in settings
@@ -347,6 +358,10 @@ export class PosthogAnalytics {
       : Anonymity.Disabled;
     this.setAnonymity(anonymity);
 
+    // We may not yet have a Matrix client at this point, if not, bail. This should get
+    // triggered again by onLoginStatusChanged once we do have a client.
+    if (!window.matrixclient) return;
+
     if (anonymity === Anonymity.Pseudonymous) {
       this.setRegistrationType(
         window.matrixclient.isGuest() || window.isPasswordlessUser
@@ -384,7 +399,7 @@ export class PosthogAnalytics {
     this.capture(eventName, properties, options);
   }
 
-  public startListeningToSettingsChanges(): void {
+  private startListeningToSettingsChanges(): void {
     // Listen to account data changes from sync so we can observe changes to relevant flags and update.
     // This is called -
     //  * On page load, when the account data is first received by sync
@@ -417,4 +432,5 @@ export class PosthogAnalytics {
   public eventMuteMicrophone = new MuteMicrophoneTracker();
   public eventMuteCamera = new MuteCameraTracker();
   public eventUndecryptableToDevice = new UndecryptableToDeviceEventTracker();
+  public eventQualitySurvey = new QualitySurveyEventTracker();
 }

src/analytics/PosthogEvents.ts

@@ -163,3 +163,21 @@ export class UndecryptableToDeviceEventTracker {
     });
   }
 }
+
+interface QualitySurveyEvent {
+  eventName: "QualitySurvey";
+  callId: string;
+  feedbackText: string;
+  stars: number;
+}
+
+export class QualitySurveyEventTracker {
+  track(callId: string, feedbackText: string, stars: number) {
+    PosthogAnalytics.instance.trackEvent<QualitySurveyEvent>({
+      eventName: "QualitySurvey",
+      callId,
+      feedbackText,
+      stars,
+    });
+  }
+}

src/analytics/PosthogSpanProcessor.ts

@@ -0,0 +1,163 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+  SpanProcessor,
+  ReadableSpan,
+  Span,
+} from "@opentelemetry/sdk-trace-base";
+import { hrTimeToMilliseconds } from "@opentelemetry/core";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import { PosthogAnalytics } from "./PosthogAnalytics";
+
+interface PrevCall {
+  callId: string;
+  hangupTs: number;
+}
+
+/**
+ * The maximum time between hanging up and joining the same call that we would
+ * consider a 'rejoin' on the user's part.
+ */
+const maxRejoinMs = 2 * 60 * 1000; // 2 minutes
+
+/**
+ * Span processor that extracts certain metrics from spans to send to PostHog
+ */
+export class PosthogSpanProcessor implements SpanProcessor {
+  async forceFlush(): Promise<void> {}
+
+  onStart(span: Span): void {
+    // Hack: Yield to allow attributes to be set before processing
+    Promise.resolve().then(() => {
+      switch (span.name) {
+        case "matrix.groupCallMembership":
+          this.onGroupCallMembershipStart(span);
+          return;
+        case "matrix.groupCallMembership.summaryReport":
+          this.onSummaryReportStart(span);
+          return;
+      }
+    });
+  }
+
+  onEnd(span: ReadableSpan): void {
+    switch (span.name) {
+      case "matrix.groupCallMembership":
+        this.onGroupCallMembershipEnd(span);
+        return;
+    }
+  }
+
+  private get prevCall(): PrevCall | null {
+    // This is stored in localStorage so we can remember the previous call
+    // across app restarts
+    const data = localStorage.getItem("matrix-prev-call");
+    if (data === null) return null;
+
+    try {
+      return JSON.parse(data);
+    } catch (e) {
+      logger.warn("Invalid prev call data", data);
+      return null;
+    }
+  }
+
+  private set prevCall(data: PrevCall | null) {
+    localStorage.setItem("matrix-prev-call", JSON.stringify(data));
+  }
+
+  private onGroupCallMembershipStart(span: ReadableSpan): void {
+    const prevCall = this.prevCall;
+    const newCallId = span.attributes["matrix.confId"] as string;
+
+    // If the user joined the same call within a short time frame, log this as a
+    // rejoin. This is interesting as a call quality metric, since rejoins may
+    // indicate that users had to intervene to make the product work.
+    if (prevCall !== null && newCallId === prevCall.callId) {
+      const duration = hrTimeToMilliseconds(span.startTime) - prevCall.hangupTs;
+      if (duration <= maxRejoinMs) {
+        PosthogAnalytics.instance.trackEvent({
+          eventName: "Rejoin",
+          callId: prevCall.callId,
+          rejoinDuration: duration,
+        });
+      }
+    }
+  }
+
+  private onGroupCallMembershipEnd(span: ReadableSpan): void {
+    this.prevCall = {
+      callId: span.attributes["matrix.confId"] as string,
+      hangupTs: hrTimeToMilliseconds(span.endTime),
+    };
+  }
+
+  private onSummaryReportStart(span: ReadableSpan): void {
+    // Searching for an event like this:
+    //    matrix.stats.summary
+    //    matrix.stats.summary.percentageReceivedAudioMedia: 0.75
+    //    matrix.stats.summary.percentageReceivedMedia: 1
+    //    matrix.stats.summary.percentageReceivedVideoMedia: 0.75
+    //    matrix.stats.summary.maxJitter: 100
+    //    matrix.stats.summary.maxPacketLoss: 20
+    const event = span.events.find((e) => e.name === "matrix.stats.summary");
+    if (event !== undefined) {
+      const attributes = event.attributes;
+      if (attributes) {
+        const mediaReceived = `${attributes["matrix.stats.summary.percentageReceivedMedia"]}`;
+        const videoReceived = `${attributes["matrix.stats.summary.percentageReceivedVideoMedia"]}`;
+        const audioReceived = `${attributes["matrix.stats.summary.percentageReceivedAudioMedia"]}`;
+        const maxJitter = `${attributes["matrix.stats.summary.maxJitter"]}`;
+        const maxPacketLoss = `${attributes["matrix.stats.summary.maxPacketLoss"]}`;
+        const peerConnections = `${attributes["matrix.stats.summary.peerConnections"]}`;
+        const percentageConcealedAudio = `${attributes["matrix.stats.summary.percentageConcealedAudio"]}`;
+        const opponentUsersInCall = `${attributes["matrix.stats.summary.opponentUsersInCall"]}`;
+        const opponentDevicesInCall = `${attributes["matrix.stats.summary.opponentDevicesInCall"]}`;
+        const diffDevicesToPeerConnections = `${attributes["matrix.stats.summary.diffDevicesToPeerConnections"]}`;
+        const ratioPeerConnectionToDevices = `${attributes["matrix.stats.summary.ratioPeerConnectionToDevices"]}`;
+
+        PosthogAnalytics.instance.trackEvent(
+          {
+            eventName: "MediaReceived",
+            callId: span.attributes["matrix.confId"] as string,
+            mediaReceived: mediaReceived,
+            audioReceived: audioReceived,
+            videoReceived: videoReceived,
+            maxJitter: maxJitter,
+            maxPacketLoss: maxPacketLoss,
+            peerConnections: peerConnections,
+            percentageConcealedAudio: percentageConcealedAudio,
+            opponentUsersInCall: opponentUsersInCall,
+            opponentDevicesInCall: opponentDevicesInCall,
+            diffDevicesToPeerConnections: diffDevicesToPeerConnections,
+            ratioPeerConnectionToDevices: ratioPeerConnectionToDevices,
+          },
+          // Send instantly because the window might be closing
+          { send_instantly: true }
+        );
+      }
+    }
+  }
+
+  /**
+   * Shutdown the processor.
+   */
+  shutdown(): Promise<void> {
+    return Promise.resolve();
+  }
+}

src/analytics/RageshakeSpanProcessor.ts

@@ -0,0 +1,114 @@
+import { Attributes } from "@opentelemetry/api";
+import { hrTimeToMicroseconds } from "@opentelemetry/core";
+import {
+  SpanProcessor,
+  ReadableSpan,
+  Span,
+} from "@opentelemetry/sdk-trace-base";
+
+const dumpAttributes = (attr: Attributes) =>
+  Object.entries(attr).map(([key, value]) => ({
+    key,
+    type: typeof value,
+    value,
+  }));
+
+/**
+ * Exports spans on demand to the Jaeger JSON format, which can be attached to
+ * rageshakes and loaded into analysis tools like Jaeger and Stalk.
+ */
+export class RageshakeSpanProcessor implements SpanProcessor {
+  private readonly spans: ReadableSpan[] = [];
+
+  async forceFlush(): Promise<void> {}
+
+  onStart(span: Span): void {
+    this.spans.push(span);
+  }
+
+  onEnd(): void {}
+
+  /**
+   * Dumps the spans collected so far as Jaeger-compatible JSON.
+   */
+  public dump(): string {
+    const now = Date.now() * 1000; // Jaeger works in microseconds
+    const traces = new Map<string, ReadableSpan[]>();
+
+    // Organize spans by their trace IDs
+    for (const span of this.spans) {
+      const traceId = span.spanContext().traceId;
+      let trace = traces.get(traceId);
+
+      if (trace === undefined) {
+        trace = [];
+        traces.set(traceId, trace);
+      }
+
+      trace.push(span);
+    }
+
+    const processId = "p1";
+    const processes = {
+      [processId]: {
+        serviceName: "element-call",
+        tags: [],
+      },
+      warnings: null,
+    };
+
+    return JSON.stringify({
+      // Honestly not sure what some of these fields mean, I just know that
+      // they're present in Jaeger JSON exports
+      total: 0,
+      limit: 0,
+      offset: 0,
+      errors: null,
+      data: [...traces.entries()].map(([traceId, spans]) => ({
+        traceID: traceId,
+        warnings: null,
+        processes,
+        spans: spans.map((span) => {
+          const ctx = span.spanContext();
+          const startTime = hrTimeToMicroseconds(span.startTime);
+          // If the span has not yet ended, pretend that it ends now
+          const duration =
+            span.duration[0] === -1
+              ? now - startTime
+              : hrTimeToMicroseconds(span.duration);
+
+          return {
+            traceID: traceId,
+            spanID: ctx.spanId,
+            operationName: span.name,
+            processID: processId,
+            warnings: null,
+            startTime,
+            duration,
+            references:
+              span.parentSpanId === undefined
+                ? []
+                : [
+                    {
+                      refType: "CHILD_OF",
+                      traceID: traceId,
+                      spanID: span.parentSpanId,
+                    },
+                  ],
+            tags: dumpAttributes(span.attributes),
+            logs: span.events.map((event) => ({
+              timestamp: hrTimeToMicroseconds(event.time),
+              // The name of the event is in the "event" field, aparently.
+              fields: [
+                ...dumpAttributes(event.attributes ?? {}),
+                { key: "event", type: "string", value: event.name },
+              ],
+            })),
+          };
+        }),
+      })),
+    });
+  }
+
+  async shutdown(): Promise<void> {}
+}

src/auth/LoginPage.tsx

@@ -25,7 +25,7 @@ import { Button } from "../button";
 import styles from "./LoginPage.module.css";
 import { useInteractiveLogin } from "./useInteractiveLogin";
 import { usePageTitle } from "../usePageTitle";
-import { PosthogAnalytics } from "../PosthogAnalytics";
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { Config } from "../config/Config";
 
 export const LoginPage: FC = () => {
@@ -88,6 +88,7 @@ export const LoginPage: FC = () => {
                   autoCapitalize="none"
                   prefix="@"
                   suffix={`:${Config.defaultServerName()}`}
+                  data-testid="login_username"
                 />
               </FieldRow>
               <FieldRow>
@@ -96,6 +97,7 @@ export const LoginPage: FC = () => {
                   ref={passwordRef}
                   placeholder={t("Password")}
                   label={t("Password")}
+                  data-testid="login_password"
                 />
               </FieldRow>
               {error && (
@@ -104,7 +106,11 @@ export const LoginPage: FC = () => {
                 </FieldRow>
               )}
               <FieldRow>
-                <Button type="submit" disabled={loading}>
+                <Button
+                  type="submit"
+                  disabled={loading}
+                  data-testid="login_login"
+                >
                   {loading ? t("Logging in…") : t("Login")}
                 </Button>
               </FieldRow>

src/auth/RegisterPage.tsx

@@ -38,7 +38,7 @@ import { LoadingView } from "../FullScreenView";
 import { useRecaptcha } from "./useRecaptcha";
 import { Caption, Link } from "../typography/Typography";
 import { usePageTitle } from "../usePageTitle";
-import { PosthogAnalytics } from "../PosthogAnalytics";
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { Config } from "../config/Config";
 
 export const RegisterPage: FC = () => {
@@ -166,6 +166,7 @@ export const RegisterPage: FC = () => {
                   autoCapitalize="none"
                   prefix="@"
                   suffix={`:${Config.defaultServerName()}`}
+                  data-testid="register_username"
                 />
               </FieldRow>
               <FieldRow>
@@ -179,6 +180,7 @@ export const RegisterPage: FC = () => {
                   value={password}
                   placeholder={t("Password")}
                   label={t("Password")}
+                  data-testid="register_password"
                 />
               </FieldRow>
               <FieldRow>
@@ -193,6 +195,7 @@ export const RegisterPage: FC = () => {
                   placeholder={t("Confirm password")}
                   label={t("Confirm password")}
                   ref={confirmPasswordRef}
+                  data-testid="register_confirm_password"
                 />
               </FieldRow>
               <Caption>
@@ -217,7 +220,11 @@ export const RegisterPage: FC = () => {
                 </FieldRow>
               )}
               <FieldRow>
-                <Button type="submit" disabled={registering}>
+                <Button
+                  type="submit"
+                  disabled={registering}
+                  data-testid="register_register"
+                >
                   {registering ? t("Registering…") : t("Register")}
                 </Button>
               </FieldRow>

src/button/Button.module.css

@@ -39,10 +39,10 @@ limitations under the License.
 .secondaryHangup,
 .button,
 .copyButton {
-  padding: 7px 15px;
+  padding: 8px 20px;
   border-radius: 8px;
   font-size: var(--font-size-body);
-  font-weight: 700;
+  font-weight: 600;
 }
 
 .button {

src/button/Button.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -27,8 +27,13 @@ import { ReactComponent as VideoIcon } from "../icons/Video.svg";
 import { ReactComponent as DisableVideoIcon } from "../icons/DisableVideo.svg";
 import { ReactComponent as HangupIcon } from "../icons/Hangup.svg";
 import { ReactComponent as ScreenshareIcon } from "../icons/Screenshare.svg";
+import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
+import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
 import { ReactComponent as ArrowDownIcon } from "../icons/ArrowDown.svg";
+import { ReactComponent as Fullscreen } from "../icons/Fullscreen.svg";
+import { ReactComponent as FullscreenExit } from "../icons/FullscreenExit.svg";
 import { TooltipTrigger } from "../Tooltip";
+import { VolumeIcon } from "./VolumeIcon";
 
 export type ButtonVariant =
   | "default"
@@ -218,3 +223,87 @@ export function HangupButton({
     </TooltipTrigger>
   );
 }
+
+export function SettingsButton({
+  className,
+  ...rest
+}: {
+  className?: string;
+  // TODO: add all props for <Button>
+  [index: string]: unknown;
+}) {
+  const { t } = useTranslation();
+  const tooltip = useCallback(() => t("Settings"), [t]);
+
+  return (
+    <TooltipTrigger tooltip={tooltip}>
+      <Button variant="toolbar" {...rest}>
+        <SettingsIcon width={20} height={20} />
+      </Button>
+    </TooltipTrigger>
+  );
+}
+
+export function InviteButton({
+  className,
+  variant = "toolbar",
+  ...rest
+}: {
+  className?: string;
+  variant?: string;
+  // TODO: add all props for <Button>
+  [index: string]: unknown;
+}) {
+  const { t } = useTranslation();
+  const tooltip = useCallback(() => t("Invite"), [t]);
+
+  return (
+    <TooltipTrigger tooltip={tooltip}>
+      <Button variant={variant} {...rest}>
+        <AddUserIcon />
+      </Button>
+    </TooltipTrigger>
+  );
+}
+
+interface AudioButtonProps extends Omit<Props, "variant"> {
+  /**
+   * A number between 0 and 1
+   */
+  volume: number;
+}
+
+export function AudioButton({ volume, ...rest }: AudioButtonProps) {
+  const { t } = useTranslation();
+  const tooltip = useCallback(() => t("Local volume"), [t]);
+
+  return (
+    <TooltipTrigger tooltip={tooltip}>
+      <Button variant="icon" {...rest}>
+        <VolumeIcon volume={volume} />
+      </Button>
+    </TooltipTrigger>
+  );
+}
+
+interface FullscreenButtonProps extends Omit<Props, "variant"> {
+  fullscreen?: boolean;
+}
+
+export function FullscreenButton({
+  fullscreen,
+  ...rest
+}: FullscreenButtonProps) {
+  const { t } = useTranslation();
+  const tooltip = useCallback(() => {
+    return fullscreen ? t("Exit full screen") : t("Full screen");
+  }, [fullscreen, t]);
+
+  return (
+    <TooltipTrigger tooltip={tooltip}>
+      <Button variant="icon" {...rest}>
+        {fullscreen ? <FullscreenExit /> : <Fullscreen />}
+      </Button>
+    </TooltipTrigger>
+  );
+}

src/button/VolumeIcon.tsx

@@ -0,0 +1,35 @@
+/*
+Copyright 2022 New Vector Ltd
+
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import { ReactComponent as AudioMuted } from "../icons/AudioMuted.svg";
+import { ReactComponent as AudioLow } from "../icons/AudioLow.svg";
+import { ReactComponent as Audio } from "../icons/Audio.svg";
+
+interface Props {
+  /**
+   * Number between 0 and 1
+   */
+  volume: number;
+}
+
+export function VolumeIcon({ volume }: Props) {
+  if (volume <= 0) return <AudioMuted />;
+  if (volume <= 0.5) return <AudioLow />;
+  return <Audio />;
+}

src/config/ConfigOptions.ts

@@ -36,6 +36,14 @@ export interface ConfigOptions {
     submit_url: string;
   };
 
+  /**
+   * Sets the URL to send opentelemetry data to. If unset, opentelemetry will
+   * be disabled.
+   */
+  opentelemetry?: {
+    collector_url: string;
+  };
+
   // Describes the default homeserver to use. The same format as Element Web
   // (without identity servers as we don't use them).
   default_server_config?: {
@@ -52,6 +60,14 @@ export interface ConfigOptions {
     // The link to the service that generates JWT tokens to join LiveKit rooms.
     jwt_service_url: string;
   };
+
+  /**
+   * Allow to join a group calls without audio and video.
+   * TEMPORARY: Is a feature that's not proved and experimental
+   */
+  features?: {
+    feature_group_calls_without_video_and_audio: boolean;
+  };
 }
 
 // Overrides members from ConfigOptions that are always provided by the

src/form/Form.tsx

@@ -15,14 +15,14 @@ limitations under the License.
 */
 
 import classNames from "classnames";
-import React, { FormEventHandler, forwardRef } from "react";
+import React, { FormEventHandler, forwardRef, ReactNode } from "react";
 
 import styles from "./Form.module.css";
 
 interface FormProps {
   className: string;
   onSubmit: FormEventHandler<HTMLFormElement>;
-  children: JSX.Element[];
+  children: ReactNode[];
 }
 
 export const Form = forwardRef<HTMLFormElement, FormProps>(

src/home/JoinExistingCallModal.tsx

@@ -43,7 +43,9 @@ export function JoinExistingCallModal({ onJoin, onClose, ...rest }: Props) {
         <p>{t("This call already exists, would you like to join?")}</p>
         <FieldRow rightAlign className={styles.buttons}>
           <Button onPress={onClose}>{t("No")}</Button>
-          <Button onPress={onJoin}>{t("Yes, join call")}</Button>
+          <Button onPress={onJoin} data-testid="home_joinExistingRoom">
+            {t("Yes, join call")}
+          </Button>
         </FieldRow>
       </ModalContent>
     </Modal>

src/home/RegisteredView.module.css

@@ -37,3 +37,7 @@ limitations under the License.
 .recentCallsTitle {
   margin-bottom: 32px;
 }
+
+.notice {
+  color: var(--secondary-content);
+}

src/home/RegisteredView.tsx

@@ -24,7 +24,11 @@ import { useHistory } from "react-router-dom";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { useTranslation } from "react-i18next";
 
-import { createRoom, roomAliasLocalpartFromRoomName } from "../matrix-utils";
+import {
+  createRoom,
+  roomAliasLocalpartFromRoomName,
+  sanitiseRoomNameInput,
+} from "../matrix-utils";
 import { useGroupCallRooms } from "./useGroupCallRooms";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import commonStyles from "./common.module.css";
@@ -35,9 +39,11 @@ import { CallList } from "./CallList";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { useModalTriggerState } from "../Modal";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
-import { Title } from "../typography/Typography";
+import { Caption, Title } from "../typography/Typography";
 import { Form } from "../form/Form";
 import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
+import { useOptInAnalytics } from "../settings/useSetting";
+import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
 
 interface Props {
   client: MatrixClient;
@@ -48,6 +54,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
   const [callType, setCallType] = useState(CallType.Video);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
+  const [optInAnalytics] = useOptInAnalytics();
   const history = useHistory();
   const { t } = useTranslation();
   const { modalState, modalProps } = useModalTriggerState();
@@ -57,7 +64,10 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
       e.preventDefault();
       const data = new FormData(e.target as HTMLFormElement);
       const roomNameData = data.get("callName");
-      const roomName = typeof roomNameData === "string" ? roomNameData : "";
+      const roomName =
+        typeof roomNameData === "string"
+          ? sanitiseRoomNameInput(roomNameData)
+          : "";
       const ptt = callType === CallType.Radio;
 
       async function submit() {
@@ -123,6 +133,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
                 type="text"
                 required
                 autoComplete="off"
+                data-testid="home_callName"
               />
 
               <Button
@@ -130,10 +141,16 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
                 size="lg"
                 className={styles.button}
                 disabled={loading}
+                data-testid="home_go"
               >
                 {loading ? t("Loading…") : t("Go")}
               </Button>
             </FieldRow>
+            {optInAnalytics === null && (
+              <Caption className={styles.notice}>
+                <AnalyticsNotice />
+              </Caption>
+            )}
             {error && (
               <FieldRow className={styles.fieldRow}>
                 <ErrorMessage error={error} />

src/home/UnauthenticatedView.module.css

@@ -45,3 +45,7 @@ limitations under the License.
     display: none;
   }
 }
+
+.notice {
+  color: var(--secondary-content);
+}

src/home/UnauthenticatedView.tsx

@@ -24,7 +24,11 @@ import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
 import { UserMenuContainer } from "../UserMenuContainer";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
 import { Button } from "../button";
-import { createRoom, roomAliasLocalpartFromRoomName } from "../matrix-utils";
+import {
+  createRoom,
+  roomAliasLocalpartFromRoomName,
+  sanitiseRoomNameInput,
+} from "../matrix-utils";
 import { useInteractiveRegistration } from "../auth/useInteractiveRegistration";
 import { useModalTriggerState } from "../Modal";
 import { JoinExistingCallModal } from "./JoinExistingCallModal";
@@ -35,12 +39,15 @@ import { CallType, CallTypeDropdown } from "./CallTypeDropdown";
 import styles from "./UnauthenticatedView.module.css";
 import commonStyles from "./common.module.css";
 import { generateRandomName } from "../auth/generateRandomName";
+import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
+import { useOptInAnalytics } from "../settings/useSetting";
 
 export const UnauthenticatedView: FC = () => {
   const { setClient } = useClient();
   const [callType, setCallType] = useState(CallType.Video);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error>();
+  const [optInAnalytics] = useOptInAnalytics();
   const [privacyPolicyUrl, recaptchaKey, register] =
     useInteractiveRegistration();
   const { execute, reset, recaptchaId } = useRecaptcha(recaptchaKey);
@@ -54,7 +61,7 @@ export const UnauthenticatedView: FC = () => {
     (e) => {
       e.preventDefault();
       const data = new FormData(e.target as HTMLFormElement);
-      const roomName = data.get("callName") as string;
+      const roomName = sanitiseRoomNameInput(data.get("callName") as string);
       const displayName = data.get("displayName") as string;
       const ptt = callType === CallType.Radio;
 
@@ -135,6 +142,7 @@ export const UnauthenticatedView: FC = () => {
                 type="text"
                 required
                 autoComplete="off"
+                data-testid="home_callName"
               />
             </FieldRow>
             <FieldRow>
@@ -145,10 +153,16 @@ export const UnauthenticatedView: FC = () => {
                 placeholder={t("Display name")}
                 type="text"
                 required
+                data-testid="home_displayName"
                 autoComplete="off"
               />
             </FieldRow>
-            <Caption>
+            {optInAnalytics === null && (
+              <Caption className={styles.notice}>
+                <AnalyticsNotice />
+              </Caption>
+            )}
+            <Caption className={styles.notice}>
               <Trans>
                 By clicking "Go", you agree to our{" "}
                 <Link href={privacyPolicyUrl}>Terms and conditions</Link>
@@ -159,7 +173,12 @@ export const UnauthenticatedView: FC = () => {
                 <ErrorMessage error={error} />
               </FieldRow>
             )}
-            <Button type="submit" size="lg" disabled={loading}>
+            <Button
+              type="submit"
+              size="lg"
+              disabled={loading}
+              data-testid="home_go"
+            >
               {loading ? t("Loading…") : t("Go")}
             </Button>
             <div id={recaptchaId} />
@@ -167,14 +186,14 @@ export const UnauthenticatedView: FC = () => {
         </main>
         <footer className={styles.footer}>
           <Body className={styles.mobileLoginLink}>
-            <Link color="primary" to="/login">
+            <Link color="primary" to="/login" data-testid="home_login">
               {t("Login to your account")}
             </Link>
           </Body>
           <Body>
             <Trans>
               Not registered yet?{" "}
-              <Link color="primary" to="/register">
+              <Link color="primary" to="/register" data-testid="home_register">
                 Create an account
               </Link>
             </Trans>

src/icons/StarSelected.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="26" viewBox="0 0 28 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 21.0267L22.24 26.0001L20.0533 16.6267L27.3333 10.3201L17.7466 9.50675L14 0.666748L10.2533 9.50675L0.666626 10.3201L7.94663 16.6267L5.75996 26.0001L14 21.0267Z" fill="white"/>
+</svg>

src/icons/StarUnselected.svg

@@ -0,0 +1,4 @@
+<svg width="28" height="26" viewBox="0 0 28 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path id="Vector" d="M14 7.50675L15.2933 10.5601L15.92 12.0401L17.52 12.1734L20.8133 12.4534L18.3066 14.6267L17.0933 15.6801L17.4533 17.2534L18.2 20.4667L15.3733 18.7601L14 17.9067L12.6266 18.7334L9.79996 20.4401L10.5466 17.2267L10.9066 15.6534L9.69329 14.6001L7.18663 12.4267L10.48 12.1467L12.08 12.0134L12.7066 10.5334L14 7.50675M14 0.666748L10.2533 9.50675L0.666626 10.3201L7.94663 16.6267L5.75996 26.0001L14 21.0267L22.24 26.0001L20.0533 16.6267L27.3333 10.3201L17.7466 9.50675L14 0.666748Z" fill="white"/>
+  </svg>
+  

src/icons/VideoMuted.svg

@@ -1,4 +1,4 @@
-<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg data-testid="videoTile_muted" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M0.20333 0.963373C0.474437 0.690007 0.913989 0.690007 1.1851 0.963373L11.5983 11.4633C11.8694 11.7367 11.8694 12.1799 11.5983 12.4533C11.3272 12.7267 10.8876 12.7267 10.6165 12.4533L0.20333 1.95332C-0.0677768 1.67995 -0.0677768 1.23674 0.20333 0.963373Z" fill="white"/>
 <path d="M0.418261 3.63429C0.226267 3.95219 0.115674 4.32557 0.115674 4.725V9.85832C0.115674 11.0181 1.0481 11.9583 2.19831 11.9583H8.65411L0.447396 3.66596C0.437225 3.65568 0.427513 3.64511 0.418261 3.63429Z" fill="white"/>
 <path d="M9.95036 4.725V8.33212L4.30219 2.625H7.86772C9.01793 2.625 9.95036 3.5652 9.95036 4.725Z" fill="white"/>

src/index.css

@@ -180,10 +180,16 @@ h2 {
 
 /* Subtitle */
 h3 {
-  font-weight: 400;
+  font-weight: 600;
   font-size: var(--font-size-subtitle);
 }
 
+/* Body Semi Bold */
+h4 {
+  font-weight: 600;
+  font-size: var(--font-size-body);
+}
+
 h1,
 h2,
 h3 {

src/initializer.tsx

@@ -23,6 +23,7 @@ import * as Sentry from "@sentry/react";
 
 import { getUrlParams } from "./UrlParams";
 import { Config } from "./config/Config";
+import { ElementCallOpenTelemetry } from "./otel/otel";
 
 enum LoadState {
   None,
@@ -35,6 +36,7 @@ class DependencyLoadStates {
   // olm: LoadState = LoadState.None;
   config: LoadState = LoadState.None;
   sentry: LoadState = LoadState.None;
+  openTelemetry: LoadState = LoadState.None;
 
   allDepsAreLoaded() {
     return !Object.values(this).some((s) => s !== LoadState.Loaded);
@@ -209,10 +211,19 @@ export class Initializer {
       this.loadStates.sentry = LoadState.Loaded;
     }
 
+    // OpenTelemetry (also only after config loaded)
+    if (
+      this.loadStates.openTelemetry === LoadState.None &&
+      this.loadStates.config === LoadState.Loaded
+    ) {
+      ElementCallOpenTelemetry.globalInit();
+      this.loadStates.openTelemetry = LoadState.Loaded;
+    }
+
     if (this.loadStates.allDepsAreLoaded()) {
       // resolve if there is no dependency that is not loaded
       resolve();
     }
   }
-  private initPromise: Promise<void>;
+  private initPromise: Promise<void> | null;
 }

src/input/AvatarInputField.module.css

@@ -54,4 +54,6 @@ limitations under the License.
 
 .removeButton {
   color: var(--accent);
+  font-size: var(--font-size-caption);
+  padding: 6px 0;
 }

src/input/FeedbackInput.module.css

@@ -0,0 +1,23 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.feedback textarea {
+  height: 75px;
+  border-radius: 8px;
+}
+.feedback {
+  border-radius: 8px;
+}

src/input/Input.module.css

@@ -209,3 +209,7 @@ limitations under the License.
   margin-left: 26px;
   width: 100%; /* Ensure that it breaks onto the next row */
 }
+
+.description.noLabel {
+  margin-top: -20px; /* Ensures that there is no weired spacing if the checkbox doesn't have a label */
+}

src/input/Input.tsx

@@ -55,14 +55,14 @@ function Field({ children, className }: FieldProps): JSX.Element {
 }
 
 interface InputFieldProps {
-  label: string;
+  label?: string;
   type: string;
   prefix?: string;
   suffix?: string;
   id?: string;
   checked?: boolean;
   className?: string;
-  description?: string;
+  description?: string | ReactNode;
   disabled?: boolean;
   required?: boolean;
   // this is a hack. Those variables should be part of `HTMLAttributes<HTMLInputElement> | HTMLAttributes<HTMLTextAreaElement>`
@@ -72,6 +72,7 @@ interface InputFieldProps {
   autoCorrect?: string;
   autoCapitalize?: string;
   value?: string;
+  defaultValue?: string;
   placeholder?: string;
   defaultChecked?: boolean;
   onChange?: (event: ChangeEvent) => void;
@@ -140,7 +141,14 @@ export const InputField = forwardRef<
         </label>
         {suffix && <span>{suffix}</span>}
         {description && (
-          <p id={descriptionId} className={styles.description}>
+          <p
+            id={descriptionId}
+            className={
+              label
+                ? styles.description
+                : classNames(styles.description, styles.noLabel)
+            }
+          >
             {description}
           </p>
         )}

src/input/SelectInput.module.css

@@ -22,8 +22,6 @@ limitations under the License.
 }
 
 .label {
-  font-weight: 600;
-  font-size: var(--font-size-subtitle);
   margin-top: 0;
   margin-bottom: 12px;
 }

src/input/StarRatingInput.module.css

@@ -14,40 +14,28 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-element {
-  --table-header: #1976d2;
-  --table-header-border: #1565c0;
-  --table-border: #d9d9d9;
-  --row-bg: #ffffff;
+.starIcon {
+  cursor: pointer;
 }
 
-.scrollContainer {
-  height: 100%;
-  overflow-y: auto;
-}
-
-.voIPInspectorViewer {
+.starRating {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 20px;
+  justify-content: center;
+  flex: 1;
 }
 
-.voIPInspectorViewer :global(.messageText) {
-  font-size: var(--font-size-caption);
-  fill: var(--primary-content) !important;
-  stroke: var(--primary-content) !important;
+.inputContainer {
+  display: inline-block;
 }
 
-.section {
-  display: table;
-  width: 100%;
-}
-
-.section > * {
-  display: table-row;
-}
-
-.section .col {
-  display: table-cell;
+.hideElement {
+  border: 0;
+  clip-path: content-box;
+  height: 0px;
+  width: 0px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  width: 1px;
+  display: inline-block;
 }

src/input/StarRatingInput.tsx

@@ -0,0 +1,85 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import styles from "./StarRatingInput.module.css";
+import { ReactComponent as StarSelected } from "../icons/StarSelected.svg";
+import { ReactComponent as StarUnselected } from "../icons/StarUnselected.svg";
+
+interface Props {
+  starCount: number;
+  onChange: (stars: number) => void;
+  required?: boolean;
+}
+
+export function StarRatingInput({
+  starCount,
+  onChange,
+  required,
+}: Props): JSX.Element {
+  const [rating, setRating] = useState(0);
+  const [hover, setHover] = useState(0);
+  const { t } = useTranslation();
+  return (
+    <div className={styles.starRating}>
+      {[...Array(starCount)].map((_star, index) => {
+        index += 1;
+        return (
+          <div
+            className={styles.inputContainer}
+            onMouseEnter={() => setHover(index)}
+            onMouseLeave={() => setHover(rating)}
+            key={index}
+          >
+            <input
+              className={styles.hideElement}
+              type="radio"
+              id={"starInput" + String(index)}
+              value={String(index) + "Star"}
+              name="star rating"
+              onChange={(_ev) => {
+                setRating(index);
+                onChange(index);
+              }}
+              required
+            />
+            <label
+              className={styles.hideElement}
+              id={"starInvisibleLabel" + String(index)}
+              htmlFor={"starInput" + String(index)}
+            >
+              {t("{{count}} stars", {
+                count: index,
+              })}
+            </label>
+            <label
+              className={styles.starIcon}
+              id={"starIcon" + String(index)}
+              htmlFor={"starInput" + String(index)}
+            >
+              {index <= (hover || rating) ? (
+                <StarSelected />
+              ) : (
+                <StarUnselected />
+              )}
+            </label>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/inspectors/MediaInspector.tsx

@@ -1,134 +0,0 @@
-/*
-Copyright 2023 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
-import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
-import React from "react";
-import { t } from "i18next";
-
-import styles from "./MediaInspector.module.css";
-
-interface MediaViewerProps {
-  client: MatrixClient;
-  groupCall: GroupCall;
-  userMediaFeeds: CallFeed[];
-  screenshareFeeds: CallFeed[];
-}
-
-export function MediaViewer({
-  client,
-  groupCall,
-  userMediaFeeds,
-  screenshareFeeds,
-}: MediaViewerProps) {
-  return (
-    <div className={styles.scrollContainer}>
-      <div className={styles.voIPInspectorViewer}>
-        <Table name={t("Media Feeds")} feeds={userMediaFeeds} />
-        <Table name={t("Screen Share Feeds")} feeds={screenshareFeeds} />
-      </div>
-    </div>
-  );
-}
-
-// View Items ##########################################################################################################
-
-interface TableProp {
-  name: string;
-  feeds: CallFeed[];
-}
-
-function Table({ name, feeds }: TableProp): JSX.Element {
-  // Catch case if feeds is empty
-  if (feeds.length === 0) {
-    const noFeed = t("No Feeds…");
-    return (
-      <div className={styles.section}>
-        <p className={styles.sectionTitle}>{name}</p>
-
-        <div className={styles.centerMessage}>
-          <p>{noFeed}</p>
-        </div>
-      </div>
-    );
-  }
-
-  // Render Table
-  return (
-    <div className={styles.section}>
-      <p className={styles.sectionTitle}>{name}</p>
-      <header>
-        <div className={styles.col}>Feed</div>
-        <div className={styles.col}>User</div>
-        <div className={styles.col}>StreamID</div>
-        <div className={styles.col}>Tracks</div>
-      </header>
-      {feeds.map((feed, i) => {
-        const user = feed.isLocal
-          ? "local"
-          : feed.getMember() !== null
-          ? feed.getMember()?.name
-          : feed.userId;
-        return (
-          <TableRow
-            key={feed.id}
-            index={i}
-            user={user ? user : feed.userId}
-            stream={feed.stream}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
-interface TableRowProp {
-  index: number;
-  user: string;
-  stream: MediaStream | undefined;
-}
-
-function TableRow({ index, user, stream }: TableRowProp): JSX.Element {
-  return (
-    <div className={styles.row}>
-      <div className={styles.col}>{index}</div>
-      <div className={styles.col}>{user}</div>
-      <div className={styles.col}>{stream?.id}</div>
-      <div className={styles.col}>
-        {stream?.getTracks().map(
-          (track): JSX.Element => (
-            <TrackColumn key={track.id} kind={track.kind} trackId={track.id} />
-          )
-        )}
-      </div>
-    </div>
-  );
-}
-
-interface TrackColumnProp {
-  kind: string;
-  trackId: string;
-}
-
-function TrackColumn({ kind, trackId }: TrackColumnProp): JSX.Element {
-  return (
-    <div className={styles.row}>
-      <div className={styles.col}>{kind} &nbsp;</div>
-      <div className={styles.col}>{trackId}</div>
-    </div>
-  );
-}

src/matrix-utils.ts

@@ -95,6 +95,8 @@ export async function initClient(
   // options we always pass to the client (stuff that we need in order to work)
   const baseOpts = {
     fallbackICEServerAllowed: fallbackICEServerAllowed,
+    isVoipWithNoMediaAllowed:
+      Config.get().features?.feature_group_calls_without_video_and_audio,
   } as ICreateClientOpts;
 
   if (indexedDB && localStorage) {
@@ -211,6 +213,31 @@ function fullAliasFromRoomName(roomName: string, client: MatrixClient): string {
   return `#${roomAliasLocalpartFromRoomName(roomName)}:${client.getDomain()}`;
 }
 
+/**
+ * Applies some basic sanitisation to a room name that the user
+ * has given us
+ * @param input The room name from the user
+ * @param client A matrix client object
+ */
+export function sanitiseRoomNameInput(input: string): string {
+  // check to see if the user has enetered a fully qualified room
+  // alias. If so, turn it into just the localpart because that's what
+  // we use
+  const parts = input.split(":", 2);
+  if (parts.length === 2 && parts[0][0] === "#") {
+    // looks like a room alias
+    if (parts[1] === Config.defaultServerName()) {
+      // it's local to our own homeserver
+      return parts[0];
+    } else {
+      throw new Error("Unsupported remote room alias");
+    }
+  }
+
+  // that's all we do here right now
+  return input;
+}
+
 /**
  * XXX: What is this trying to do? It looks like it's getting the localpart from
  * a room alias, but why is it splitting on hyphens and then putting spaces in??

src/otel/OTelCall.ts

@@ -0,0 +1,197 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { Span } from "@opentelemetry/api";
+import { MatrixCall } from "matrix-js-sdk";
+import { CallEvent } from "matrix-js-sdk/src/webrtc/call";
+import {
+  TransceiverStats,
+  CallFeedStats,
+} from "matrix-js-sdk/src/webrtc/stats/statsReport";
+
+import { ObjectFlattener } from "./ObjectFlattener";
+import { ElementCallOpenTelemetry } from "./otel";
+import { OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSpan";
+import { OTelCallTransceiverMediaStreamSpan } from "./OTelCallTransceiverMediaStreamSpan";
+import { OTelCallFeedMediaStreamSpan } from "./OTelCallFeedMediaStreamSpan";
+
+type StreamId = string;
+type MID = string;
+
+/**
+ * Tracks an individual call within a group call, either to a full-mesh peer or a focus
+ */
+export class OTelCall {
+  private readonly trackFeedSpan = new Map<
+    StreamId,
+    OTelCallAbstractMediaStreamSpan
+  >();
+  private readonly trackTransceiverSpan = new Map<
+    MID,
+    OTelCallAbstractMediaStreamSpan
+  >();
+
+  constructor(
+    public userId: string,
+    public deviceId: string,
+    public call: MatrixCall,
+    public span: Span
+  ) {
+    if (call.peerConn) {
+      this.addCallPeerConnListeners();
+    } else {
+      this.call.once(
+        CallEvent.PeerConnectionCreated,
+        this.addCallPeerConnListeners
+      );
+    }
+  }
+
+  public dispose() {
+    this.call.peerConn.removeEventListener(
+      "connectionstatechange",
+      this.onCallConnectionStateChanged
+    );
+    this.call.peerConn.removeEventListener(
+      "signalingstatechange",
+      this.onCallSignalingStateChanged
+    );
+    this.call.peerConn.removeEventListener(
+      "iceconnectionstatechange",
+      this.onIceConnectionStateChanged
+    );
+    this.call.peerConn.removeEventListener(
+      "icegatheringstatechange",
+      this.onIceGatheringStateChanged
+    );
+    this.call.peerConn.removeEventListener(
+      "icecandidateerror",
+      this.onIceCandidateError
+    );
+  }
+
+  private addCallPeerConnListeners = (): void => {
+    this.call.peerConn.addEventListener(
+      "connectionstatechange",
+      this.onCallConnectionStateChanged
+    );
+    this.call.peerConn.addEventListener(
+      "signalingstatechange",
+      this.onCallSignalingStateChanged
+    );
+    this.call.peerConn.addEventListener(
+      "iceconnectionstatechange",
+      this.onIceConnectionStateChanged
+    );
+    this.call.peerConn.addEventListener(
+      "icegatheringstatechange",
+      this.onIceGatheringStateChanged
+    );
+    this.call.peerConn.addEventListener(
+      "icecandidateerror",
+      this.onIceCandidateError
+    );
+  };
+
+  public onCallConnectionStateChanged = (): void => {
+    this.span.addEvent("matrix.call.callConnectionStateChange", {
+      callConnectionState: this.call.peerConn.connectionState,
+    });
+  };
+
+  public onCallSignalingStateChanged = (): void => {
+    this.span.addEvent("matrix.call.callSignalingStateChange", {
+      callSignalingState: this.call.peerConn.signalingState,
+    });
+  };
+
+  public onIceConnectionStateChanged = (): void => {
+    this.span.addEvent("matrix.call.iceConnectionStateChange", {
+      iceConnectionState: this.call.peerConn.iceConnectionState,
+    });
+  };
+
+  public onIceGatheringStateChanged = (): void => {
+    this.span.addEvent("matrix.call.iceGatheringStateChange", {
+      iceGatheringState: this.call.peerConn.iceGatheringState,
+    });
+  };
+
+  public onIceCandidateError = (ev: Event): void => {
+    const flatObject = {};
+    ObjectFlattener.flattenObjectRecursive(ev, flatObject, "error.", 0);
+
+    this.span.addEvent("matrix.call.iceCandidateError", flatObject);
+  };
+
+  public onCallFeedStats(callFeeds: CallFeedStats[]): void {
+    let prvFeeds: StreamId[] = [...this.trackFeedSpan.keys()];
+
+    callFeeds.forEach((feed) => {
+      if (!this.trackFeedSpan.has(feed.stream)) {
+        this.trackFeedSpan.set(
+          feed.stream,
+          new OTelCallFeedMediaStreamSpan(
+            ElementCallOpenTelemetry.instance,
+            this.span,
+            feed
+          )
+        );
+      }
+      this.trackFeedSpan.get(feed.stream)?.update(feed);
+      prvFeeds = prvFeeds.filter((prvStreamId) => prvStreamId !== feed.stream);
+    });
+
+    prvFeeds.forEach((prvStreamId) => {
+      this.trackFeedSpan.get(prvStreamId)?.end();
+      this.trackFeedSpan.delete(prvStreamId);
+    });
+  }
+
+  public onTransceiverStats(transceiverStats: TransceiverStats[]): void {
+    let prvTransSpan: MID[] = [...this.trackTransceiverSpan.keys()];
+
+    transceiverStats.forEach((transStats) => {
+      if (!this.trackTransceiverSpan.has(transStats.mid)) {
+        this.trackTransceiverSpan.set(
+          transStats.mid,
+          new OTelCallTransceiverMediaStreamSpan(
+            ElementCallOpenTelemetry.instance,
+            this.span,
+            transStats
+          )
+        );
+      }
+      this.trackTransceiverSpan.get(transStats.mid)?.update(transStats);
+      prvTransSpan = prvTransSpan.filter(
+        (prvStreamId) => prvStreamId !== transStats.mid
+      );
+    });
+
+    prvTransSpan.forEach((prvMID) => {
+      this.trackTransceiverSpan.get(prvMID)?.end();
+      this.trackTransceiverSpan.delete(prvMID);
+    });
+  }
+
+  public end(): void {
+    this.trackFeedSpan.forEach((feedSpan) => feedSpan.end());
+    this.trackTransceiverSpan.forEach((transceiverSpan) =>
+      transceiverSpan.end()
+    );
+    this.span.end();
+  }
+}

src/otel/OTelCallAbstractMediaStreamSpan.ts

@@ -0,0 +1,62 @@
+import opentelemetry, { Span } from "@opentelemetry/api";
+import { TrackStats } from "matrix-js-sdk/src/webrtc/stats/statsReport";
+
+import { ElementCallOpenTelemetry } from "./otel";
+import { OTelCallMediaStreamTrackSpan } from "./OTelCallMediaStreamTrackSpan";
+
+type TrackId = string;
+
+export abstract class OTelCallAbstractMediaStreamSpan {
+  protected readonly trackSpans = new Map<
+    TrackId,
+    OTelCallMediaStreamTrackSpan
+  >();
+  public readonly span;
+
+  public constructor(
+    readonly oTel: ElementCallOpenTelemetry,
+    readonly callSpan: Span,
+    protected readonly type: string
+  ) {
+    const ctx = opentelemetry.trace.setSpan(
+      opentelemetry.context.active(),
+      callSpan
+    );
+    const options = {
+      links: [
+        {
+          context: callSpan.spanContext(),
+        },
+      ],
+    };
+    this.span = oTel.tracer.startSpan(this.type, options, ctx);
+  }
+
+  protected upsertTrackSpans(tracks: TrackStats[]) {
+    let prvTracks: TrackId[] = [...this.trackSpans.keys()];
+    tracks.forEach((t) => {
+      if (!this.trackSpans.has(t.id)) {
+        this.trackSpans.set(
+          t.id,
+          new OTelCallMediaStreamTrackSpan(this.oTel, this.span, t)
+        );
+      }
+      this.trackSpans.get(t.id)?.update(t);
+      prvTracks = prvTracks.filter((prvTrackId) => prvTrackId !== t.id);
+    });
+
+    prvTracks.forEach((prvTrackId) => {
+      this.trackSpans.get(prvTrackId)?.end();
+      this.trackSpans.delete(prvTrackId);
+    });
+  }
+
+  public abstract update(data: Object): void;
+
+  public end(): void {
+    this.trackSpans.forEach((tSpan) => {
+      tSpan.end();
+    });
+    this.span.end();
+  }
+}

src/otel/OTelCallFeedMediaStreamSpan.ts

@@ -0,0 +1,57 @@
+import { Span } from "@opentelemetry/api";
+import {
+  CallFeedStats,
+  TrackStats,
+} from "matrix-js-sdk/src/webrtc/stats/statsReport";
+
+import { ElementCallOpenTelemetry } from "./otel";
+import { OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSpan";
+
+export class OTelCallFeedMediaStreamSpan extends OTelCallAbstractMediaStreamSpan {
+  private readonly prev: { isAudioMuted: boolean; isVideoMuted: boolean };
+
+  constructor(
+    readonly oTel: ElementCallOpenTelemetry,
+    readonly callSpan: Span,
+    callFeed: CallFeedStats
+  ) {
+    const postFix =
+      callFeed.type === "local" && callFeed.prefix === "from-call-feed"
+        ? "(clone)"
+        : "";
+    super(oTel, callSpan, `matrix.call.feed.${callFeed.type}${postFix}`);
+    this.span.setAttribute("feed.streamId", callFeed.stream);
+    this.span.setAttribute("feed.type", callFeed.type);
+    this.span.setAttribute("feed.readFrom", callFeed.prefix);
+    this.span.setAttribute("feed.purpose", callFeed.purpose);
+    this.prev = {
+      isAudioMuted: callFeed.isAudioMuted,
+      isVideoMuted: callFeed.isVideoMuted,
+    };
+    this.span.addEvent("matrix.call.feed.initState", this.prev);
+  }
+
+  public update(callFeed: CallFeedStats): void {
+    if (this.prev.isAudioMuted !== callFeed.isAudioMuted) {
+      this.span.addEvent("matrix.call.feed.audioMuted", {
+        isAudioMuted: callFeed.isAudioMuted,
+      });
+      this.prev.isAudioMuted = callFeed.isAudioMuted;
+    }
+    if (this.prev.isVideoMuted !== callFeed.isVideoMuted) {
+      this.span.addEvent("matrix.call.feed.isVideoMuted", {
+        isVideoMuted: callFeed.isVideoMuted,
+      });
+      this.prev.isVideoMuted = callFeed.isVideoMuted;
+    }
+
+    const trackStats: TrackStats[] = [];
+    if (callFeed.video) {
+      trackStats.push(callFeed.video);
+    }
+    if (callFeed.audio) {
+      trackStats.push(callFeed.audio);
+    }
+    this.upsertTrackSpans(trackStats);
+  }
+}

src/otel/OTelCallMediaStreamTrackSpan.ts

@@ -0,0 +1,62 @@
+import { TrackStats } from "matrix-js-sdk/src/webrtc/stats/statsReport";
+import opentelemetry, { Span } from "@opentelemetry/api";
+
+import { ElementCallOpenTelemetry } from "./otel";
+
+export class OTelCallMediaStreamTrackSpan {
+  private readonly span: Span;
+  private prev: TrackStats;
+
+  public constructor(
+    readonly oTel: ElementCallOpenTelemetry,
+    readonly streamSpan: Span,
+    data: TrackStats
+  ) {
+    const ctx = opentelemetry.trace.setSpan(
+      opentelemetry.context.active(),
+      streamSpan
+    );
+    const options = {
+      links: [
+        {
+          context: streamSpan.spanContext(),
+        },
+      ],
+    };
+    const type = `matrix.call.track.${data.label}.${data.kind}`;
+    this.span = oTel.tracer.startSpan(type, options, ctx);
+    this.span.setAttribute("track.trackId", data.id);
+    this.span.setAttribute("track.kind", data.kind);
+    this.span.setAttribute("track.constrainDeviceId", data.constrainDeviceId);
+    this.span.setAttribute("track.settingDeviceId", data.settingDeviceId);
+    this.span.setAttribute("track.label", data.label);
+
+    this.span.addEvent("matrix.call.track.initState", {
+      readyState: data.readyState,
+      muted: data.muted,
+      enabled: data.enabled,
+    });
+    this.prev = data;
+  }
+
+  public update(data: TrackStats): void {
+    if (this.prev.muted !== data.muted) {
+      this.span.addEvent("matrix.call.track.muted", { muted: data.muted });
+    }
+    if (this.prev.enabled !== data.enabled) {
+      this.span.addEvent("matrix.call.track.enabled", {
+        enabled: data.enabled,
+      });
+    }
+    if (this.prev.readyState !== data.readyState) {
+      this.span.addEvent("matrix.call.track.readyState", {
+        readyState: data.readyState,
+      });
+    }
+    this.prev = data;
+  }
+
+  public end(): void {
+    this.span.end();
+  }
+}

src/otel/OTelCallTransceiverMediaStreamSpan.ts

@@ -0,0 +1,54 @@
+import { Span } from "@opentelemetry/api";
+import {
+  TrackStats,
+  TransceiverStats,
+} from "matrix-js-sdk/src/webrtc/stats/statsReport";
+
+import { ElementCallOpenTelemetry } from "./otel";
+import { OTelCallAbstractMediaStreamSpan } from "./OTelCallAbstractMediaStreamSpan";
+
+export class OTelCallTransceiverMediaStreamSpan extends OTelCallAbstractMediaStreamSpan {
+  private readonly prev: {
+    direction: string;
+    currentDirection: string;
+  };
+
+  constructor(
+    readonly oTel: ElementCallOpenTelemetry,
+    readonly callSpan: Span,
+    stats: TransceiverStats
+  ) {
+    super(oTel, callSpan, `matrix.call.transceiver.${stats.mid}`);
+    this.span.setAttribute("transceiver.mid", stats.mid);
+
+    this.prev = {
+      direction: stats.direction,
+      currentDirection: stats.currentDirection,
+    };
+    this.span.addEvent("matrix.call.transceiver.initState", this.prev);
+  }
+
+  public update(stats: TransceiverStats): void {
+    if (this.prev.currentDirection !== stats.currentDirection) {
+      this.span.addEvent("matrix.call.transceiver.currentDirection", {
+        currentDirection: stats.currentDirection,
+      });
+      this.prev.currentDirection = stats.currentDirection;
+    }
+    if (this.prev.direction !== stats.direction) {
+      this.span.addEvent("matrix.call.transceiver.direction", {
+        direction: stats.direction,
+      });
+      this.prev.direction = stats.direction;
+    }
+
+    const trackStats: TrackStats[] = [];
+    if (stats.sender) {
+      trackStats.push(stats.sender);
+    }
+    if (stats.receiver) {
+      trackStats.push(stats.receiver);
+    }
+    this.upsertTrackSpans(trackStats);
+  }
+}

src/otel/OTelGroupCallMembership.ts

@@ -0,0 +1,474 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import opentelemetry, { Span, Attributes, Context } from "@opentelemetry/api";
+import {
+  GroupCall,
+  MatrixClient,
+  MatrixEvent,
+  RoomMember,
+} from "matrix-js-sdk";
+import { logger } from "matrix-js-sdk/src/logger";
+import {
+  CallError,
+  CallState,
+  MatrixCall,
+  VoipEvent,
+} from "matrix-js-sdk/src/webrtc/call";
+import {
+  CallsByUserAndDevice,
+  GroupCallError,
+  GroupCallEvent,
+  GroupCallStatsReport,
+} from "matrix-js-sdk/src/webrtc/groupCall";
+import {
+  ConnectionStatsReport,
+  ByteSentStatsReport,
+  SummaryStatsReport,
+  CallFeedReport,
+} from "matrix-js-sdk/src/webrtc/stats/statsReport";
+import { setSpan } from "@opentelemetry/api/build/esm/trace/context-utils";
+
+import { ElementCallOpenTelemetry } from "./otel";
+import { ObjectFlattener } from "./ObjectFlattener";
+import { OTelCall } from "./OTelCall";
+
+/**
+ * Represent the span of time which we intend to be joined to a group call
+ */
+export class OTelGroupCallMembership {
+  private callMembershipSpan?: Span;
+  private groupCallContext?: Context;
+  private myUserId = "unknown";
+  private myDeviceId: string;
+  private myMember?: RoomMember;
+  private callsByCallId = new Map<string, OTelCall>();
+  private statsReportSpan: {
+    span: Span | undefined;
+    stats: OTelStatsReportEvent[];
+  };
+  private readonly speakingSpans = new Map<RoomMember, Map<string, Span>>();
+
+  constructor(private groupCall: GroupCall, client: MatrixClient) {
+    const clientId = client.getUserId();
+    if (clientId) {
+      this.myUserId = clientId;
+      const myMember = groupCall.room.getMember(clientId);
+      if (myMember) {
+        this.myMember = myMember;
+      }
+    }
+    this.myDeviceId = client.getDeviceId() || "unknown";
+    this.statsReportSpan = { span: undefined, stats: [] };
+    this.groupCall.on(GroupCallEvent.CallsChanged, this.onCallsChanged);
+  }
+
+  dispose() {
+    this.groupCall.removeListener(
+      GroupCallEvent.CallsChanged,
+      this.onCallsChanged
+    );
+  }
+
+  public onJoinCall() {
+    if (!ElementCallOpenTelemetry.instance) return;
+    if (this.callMembershipSpan !== undefined) {
+      logger.warn("Call membership span is already started");
+      return;
+    }
+
+    // Create the main span that tracks the time we intend to be in the call
+    this.callMembershipSpan =
+      ElementCallOpenTelemetry.instance.tracer.startSpan(
+        "matrix.groupCallMembership"
+      );
+    this.callMembershipSpan.setAttribute(
+      "matrix.confId",
+      this.groupCall.groupCallId
+    );
+    this.callMembershipSpan.setAttribute("matrix.userId", this.myUserId);
+    this.callMembershipSpan.setAttribute("matrix.deviceId", this.myDeviceId);
+    this.callMembershipSpan.setAttribute(
+      "matrix.displayName",
+      this.myMember ? this.myMember.name : "unknown-name"
+    );
+
+    this.groupCallContext = opentelemetry.trace.setSpan(
+      opentelemetry.context.active(),
+      this.callMembershipSpan
+    );
+
+    this.callMembershipSpan?.addEvent("matrix.joinCall");
+  }
+
+  public onLeaveCall() {
+    if (this.callMembershipSpan === undefined) {
+      logger.warn("Call membership span is already ended");
+      return;
+    }
+
+    this.callMembershipSpan.addEvent("matrix.leaveCall");
+    // and end the span to indicate we've left
+    this.callMembershipSpan.end();
+    this.callMembershipSpan = undefined;
+    this.groupCallContext = undefined;
+  }
+
+  public onUpdateRoomState(event: MatrixEvent) {
+    if (
+      !event ||
+      (!event.getType().startsWith("m.call") &&
+        !event.getType().startsWith("org.matrix.msc3401.call"))
+    ) {
+      return;
+    }
+
+    this.callMembershipSpan?.addEvent(
+      `matrix.roomStateEvent_${event.getType()}`,
+      ObjectFlattener.flattenVoipEvent(event.getContent())
+    );
+  }
+
+  public onCallsChanged = (calls: CallsByUserAndDevice) => {
+    for (const [userId, userCalls] of calls.entries()) {
+      for (const [deviceId, call] of userCalls.entries()) {
+        if (!this.callsByCallId.has(call.callId)) {
+          if (ElementCallOpenTelemetry.instance) {
+            const span = ElementCallOpenTelemetry.instance.tracer.startSpan(
+              `matrix.call`,
+              undefined,
+              this.groupCallContext
+            );
+            // XXX: anonymity
+            span.setAttribute("matrix.call.target.userId", userId);
+            span.setAttribute("matrix.call.target.deviceId", deviceId);
+            const displayName =
+              this.groupCall.room.getMember(userId)?.name ?? "unknown";
+            span.setAttribute("matrix.call.target.displayName", displayName);
+            this.callsByCallId.set(
+              call.callId,
+              new OTelCall(userId, deviceId, call, span)
+            );
+          }
+        }
+      }
+    }
+
+    for (const callTrackingInfo of this.callsByCallId.values()) {
+      const userCalls = calls.get(callTrackingInfo.userId);
+      if (
+        !userCalls ||
+        !userCalls.has(callTrackingInfo.deviceId) ||
+        userCalls.get(callTrackingInfo.deviceId).callId !==
+          callTrackingInfo.call.callId
+      ) {
+        callTrackingInfo.end();
+        this.callsByCallId.delete(callTrackingInfo.call.callId);
+      }
+    }
+  };
+
+  public onCallStateChange(call: MatrixCall, newState: CallState) {
+    const callTrackingInfo = this.callsByCallId.get(call.callId);
+    if (!callTrackingInfo) {
+      logger.error(`Got call state change for unknown call ID ${call.callId}`);
+      return;
+    }
+
+    callTrackingInfo.span.addEvent("matrix.call.stateChange", {
+      state: newState,
+    });
+  }
+
+  public onSendEvent(call: MatrixCall, event: VoipEvent) {
+    const eventType = event.eventType as string;
+    if (
+      !eventType.startsWith("m.call") &&
+      !eventType.startsWith("org.matrix.call")
+    )
+      return;
+
+    const callTrackingInfo = this.callsByCallId.get(call.callId);
+    if (!callTrackingInfo) {
+      logger.error(`Got call send event for unknown call ID ${call.callId}`);
+      return;
+    }
+
+    if (event.type === "toDevice") {
+      callTrackingInfo.span.addEvent(
+        `matrix.sendToDeviceEvent_${event.eventType}`,
+        ObjectFlattener.flattenVoipEvent(event)
+      );
+    } else if (event.type === "sendEvent") {
+      callTrackingInfo.span.addEvent(
+        `matrix.sendToRoomEvent_${event.eventType}`,
+        ObjectFlattener.flattenVoipEvent(event)
+      );
+    }
+  }
+
+  public onReceivedVoipEvent(event: MatrixEvent) {
+    // These come straight from CallEventHandler so don't have
+    // a call already associated (in principle we could receive
+    // events for calls we don't know about).
+    const callId = event.getContent().call_id;
+    if (!callId) {
+      this.callMembershipSpan?.addEvent("matrix.receive_voip_event_no_callid", {
+        "sender.userId": event.getSender(),
+      });
+      logger.error("Received call event with no call ID!");
+      return;
+    }
+
+    const call = this.callsByCallId.get(callId);
+    if (!call) {
+      this.callMembershipSpan?.addEvent(
+        "matrix.receive_voip_event_unknown_callid",
+        {
+          "sender.userId": event.getSender(),
+        }
+      );
+      logger.error("Received call event for unknown call ID " + callId);
+      return;
+    }
+
+    call.span.addEvent("matrix.receive_voip_event", {
+      "sender.userId": event.getSender(),
+      ...ObjectFlattener.flattenVoipEvent(event.getContent()),
+    });
+  }
+
+  public onToggleMicrophoneMuted(newValue: boolean) {
+    this.callMembershipSpan?.addEvent("matrix.toggleMicMuted", {
+      "matrix.microphone.muted": newValue,
+    });
+  }
+
+  public onSetMicrophoneMuted(setMuted: boolean) {
+    this.callMembershipSpan?.addEvent("matrix.setMicMuted", {
+      "matrix.microphone.muted": setMuted,
+    });
+  }
+
+  public onToggleLocalVideoMuted(newValue: boolean) {
+    this.callMembershipSpan?.addEvent("matrix.toggleVidMuted", {
+      "matrix.video.muted": newValue,
+    });
+  }
+
+  public onSetLocalVideoMuted(setMuted: boolean) {
+    this.callMembershipSpan?.addEvent("matrix.setVidMuted", {
+      "matrix.video.muted": setMuted,
+    });
+  }
+
+  public onToggleScreensharing(newValue: boolean) {
+    this.callMembershipSpan?.addEvent("matrix.setVidMuted", {
+      "matrix.screensharing.enabled": newValue,
+    });
+  }
+
+  public onSpeaking(member: RoomMember, deviceId: string, speaking: boolean) {
+    if (speaking) {
+      // Ensure that there's an audio activity span for this speaker
+      let deviceMap = this.speakingSpans.get(member);
+      if (deviceMap === undefined) {
+        deviceMap = new Map();
+        this.speakingSpans.set(member, deviceMap);
+      }
+
+      if (!deviceMap.has(deviceId)) {
+        const span = ElementCallOpenTelemetry.instance.tracer.startSpan(
+          "matrix.audioActivity",
+          undefined,
+          this.groupCallContext
+        );
+        span.setAttribute("matrix.userId", member.userId);
+        span.setAttribute("matrix.displayName", member.rawDisplayName);
+
+        deviceMap.set(deviceId, span);
+      }
+    } else {
+      // End the audio activity span for this speaker, if any
+      const deviceMap = this.speakingSpans.get(member);
+      deviceMap?.get(deviceId)?.end();
+      deviceMap?.delete(deviceId);
+
+      if (deviceMap?.size === 0) this.speakingSpans.delete(member);
+    }
+  }
+
+  public onCallError(error: CallError, call: MatrixCall) {
+    const callTrackingInfo = this.callsByCallId.get(call.callId);
+    if (!callTrackingInfo) {
+      logger.error(`Got error for unknown call ID ${call.callId}`);
+      return;
+    }
+
+    callTrackingInfo.span.recordException(error);
+  }
+
+  public onGroupCallError(error: GroupCallError) {
+    this.callMembershipSpan?.recordException(error);
+  }
+
+  public onUndecryptableToDevice(event: MatrixEvent) {
+    this.callMembershipSpan?.addEvent("matrix.toDevice.undecryptable", {
+      "sender.userId": event.getSender(),
+    });
+  }
+
+  public onCallFeedStatsReport(report: GroupCallStatsReport<CallFeedReport>) {
+    if (!ElementCallOpenTelemetry.instance) return;
+    let call: OTelCall | undefined;
+    const callId = report.report?.callId;
+
+    if (callId) {
+      call = this.callsByCallId.get(callId);
+    }
+
+    if (!call) {
+      this.callMembershipSpan?.addEvent(
+        OTelStatsReportType.CallFeedReport + "_unknown_callId",
+        {
+          "call.callId": callId,
+          "call.opponentMemberId": report.report?.opponentMemberId
+            ? report.report?.opponentMemberId
+            : "unknown",
+        }
+      );
+      logger.error(
+        `Received ${OTelStatsReportType.CallFeedReport} with unknown call ID: ${callId}`
+      );
+      return;
+    } else {
+      call.onCallFeedStats(report.report.callFeeds);
+      call.onTransceiverStats(report.report.transceiver);
+    }
+  }
+
+  public onConnectionStatsReport(
+    statsReport: GroupCallStatsReport<ConnectionStatsReport>
+  ) {
+    this.buildCallStatsSpan(
+      OTelStatsReportType.ConnectionReport,
+      statsReport.report
+    );
+  }
+
+  public onByteSentStatsReport(
+    statsReport: GroupCallStatsReport<ByteSentStatsReport>
+  ) {
+    this.buildCallStatsSpan(
+      OTelStatsReportType.ByteSentReport,
+      statsReport.report
+    );
+  }
+
+  public buildCallStatsSpan(
+    type: OTelStatsReportType,
+    report: ByteSentStatsReport | ConnectionStatsReport
+  ): void {
+    if (!ElementCallOpenTelemetry.instance) return;
+    let call: OTelCall | undefined;
+    const callId = report?.callId;
+
+    if (callId) {
+      call = this.callsByCallId.get(callId);
+    }
+
+    if (!call) {
+      this.callMembershipSpan?.addEvent(type + "_unknown_callid", {
+        "call.callId": callId,
+        "call.opponentMemberId": report.opponentMemberId
+          ? report.opponentMemberId
+          : "unknown",
+      });
+      logger.error(`Received ${type} with unknown call ID: ${callId}`);
+      return;
+    }
+    const data = ObjectFlattener.flattenReportObject(type, report);
+    const ctx = opentelemetry.trace.setSpan(
+      opentelemetry.context.active(),
+      call.span
+    );
+
+    const options = {
+      links: [
+        {
+          context: call.span.spanContext(),
+        },
+      ],
+    };
+
+    const span = ElementCallOpenTelemetry.instance.tracer.startSpan(
+      type,
+      options,
+      ctx
+    );
+
+    span.setAttribute("matrix.callId", callId);
+    span.setAttribute(
+      "matrix.opponentMemberId",
+      report.opponentMemberId ? report.opponentMemberId : "unknown"
+    );
+    span.addEvent("matrix.call.connection_stats_event", data);
+    span.end();
+  }
+
+  public onSummaryStatsReport(
+    statsReport: GroupCallStatsReport<SummaryStatsReport>
+  ) {
+    if (!ElementCallOpenTelemetry.instance) return;
+
+    const type = OTelStatsReportType.SummaryReport;
+    const data = ObjectFlattener.flattenSummaryStatsReportObject(statsReport);
+    if (this.statsReportSpan.span === undefined && this.callMembershipSpan) {
+      const ctx = setSpan(
+        opentelemetry.context.active(),
+        this.callMembershipSpan
+      );
+      const span = ElementCallOpenTelemetry.instance?.tracer.startSpan(
+        "matrix.groupCallMembership.summaryReport",
+        undefined,
+        ctx
+      );
+      if (span === undefined) {
+        return;
+      }
+      span.setAttribute("matrix.confId", this.groupCall.groupCallId);
+      span.setAttribute("matrix.userId", this.myUserId);
+      span.setAttribute(
+        "matrix.displayName",
+        this.myMember ? this.myMember.name : "unknown-name"
+      );
+      span.addEvent(type, data);
+      span.end();
+    }
+  }
+}
+
+interface OTelStatsReportEvent {
+  type: OTelStatsReportType;
+  data: Attributes;
+}
+
+enum OTelStatsReportType {
+  ConnectionReport = "matrix.call.stats.connection",
+  ByteSentReport = "matrix.call.stats.byteSent",
+  SummaryReport = "matrix.stats.summary",
+  CallFeedReport = "matrix.stats.call_feed",
+}

src/otel/ObjectFlattener.ts

@@ -0,0 +1,109 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import { Attributes } from "@opentelemetry/api";
+import { VoipEvent } from "matrix-js-sdk/src/webrtc/call";
+import { GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall";
+import {
+  ByteSentStatsReport,
+  ConnectionStatsReport,
+  SummaryStatsReport,
+} from "matrix-js-sdk/src/webrtc/stats/statsReport";
+
+export class ObjectFlattener {
+  public static flattenReportObject(
+    prefix: string,
+    report: ConnectionStatsReport | ByteSentStatsReport
+  ): Attributes {
+    const flatObject = {};
+    ObjectFlattener.flattenObjectRecursive(report, flatObject, `${prefix}.`, 0);
+    return flatObject;
+  }
+
+  public static flattenByteSentStatsReportObject(
+    statsReport: GroupCallStatsReport<ByteSentStatsReport>
+  ): Attributes {
+    const flatObject = {};
+    ObjectFlattener.flattenObjectRecursive(
+      statsReport.report,
+      flatObject,
+      "matrix.stats.bytesSent.",
+      0
+    );
+    return flatObject;
+  }
+
+  static flattenSummaryStatsReportObject(
+    statsReport: GroupCallStatsReport<SummaryStatsReport>
+  ) {
+    const flatObject = {};
+    ObjectFlattener.flattenObjectRecursive(
+      statsReport.report,
+      flatObject,
+      "matrix.stats.summary.",
+      0
+    );
+    return flatObject;
+  }
+
+  /* Flattens out an object into a single layer with components
+   * of the key separated by dots
+   */
+  public static flattenVoipEvent(event: VoipEvent): Attributes {
+    const flatObject = {};
+    ObjectFlattener.flattenObjectRecursive(
+      event as unknown as Record<string, unknown>, // XXX Types
+      flatObject,
+      "matrix.event.",
+      0
+    );
+
+    return flatObject;
+  }
+
+  public static flattenObjectRecursive(
+    obj: Object,
+    flatObject: Attributes,
+    prefix: string,
+    depth: number
+  ): void {
+    if (depth > 10)
+      throw new Error(
+        "Depth limit exceeded: aborting VoipEvent recursion. Prefix is " +
+          prefix
+      );
+    let entries;
+    if (obj instanceof Map) {
+      entries = obj.entries();
+    } else {
+      entries = Object.entries(obj);
+    }
+    for (const [k, v] of entries) {
+      if (["string", "number", "boolean"].includes(typeof v) || v === null) {
+        let value;
+        value = v === null ? "null" : v;
+        value = typeof v === "number" && Number.isNaN(v) ? "NaN" : value;
+        flatObject[prefix + k] = value;
+      } else if (typeof v === "object") {
+        ObjectFlattener.flattenObjectRecursive(
+          v,
+          flatObject,
+          prefix + k + ".",
+          depth + 1
+        );
+      }
+    }
+  }
+}

src/otel/otel.ts

@@ -0,0 +1,122 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { SimpleSpanProcessor } from "@opentelemetry/sdk-trace-base";
+import { OTLPTraceExporter } from "@opentelemetry/exporter-trace-otlp-http";
+import { WebTracerProvider } from "@opentelemetry/sdk-trace-web";
+import opentelemetry, { Tracer } from "@opentelemetry/api";
+import { Resource } from "@opentelemetry/resources";
+import { SemanticResourceAttributes } from "@opentelemetry/semantic-conventions";
+import { logger } from "matrix-js-sdk/src/logger";
+
+import { PosthogSpanProcessor } from "../analytics/PosthogSpanProcessor";
+import { Anonymity } from "../analytics/PosthogAnalytics";
+import { Config } from "../config/Config";
+import { RageshakeSpanProcessor } from "../analytics/RageshakeSpanProcessor";
+
+const SERVICE_NAME = "element-call";
+
+let sharedInstance: ElementCallOpenTelemetry;
+
+export class ElementCallOpenTelemetry {
+  private _provider: WebTracerProvider;
+  private _tracer: Tracer;
+  private _anonymity: Anonymity;
+  private otlpExporter: OTLPTraceExporter;
+  public readonly rageshakeProcessor?: RageshakeSpanProcessor;
+
+  static globalInit(): void {
+    const config = Config.get();
+    // we always enable opentelemetry in general. We only enable the OTLP
+    // collector if a URL is defined (and in future if another setting is defined)
+    // Posthog reporting is enabled or disabled
+    // within the posthog code.
+    const shouldEnableOtlp = Boolean(config.opentelemetry?.collector_url);
+
+    if (!sharedInstance || sharedInstance.isOtlpEnabled !== shouldEnableOtlp) {
+      logger.info("(Re)starting OpenTelemetry debug reporting");
+      sharedInstance?.dispose();
+
+      sharedInstance = new ElementCallOpenTelemetry(
+        config.opentelemetry?.collector_url,
+        config.rageshake?.submit_url
+      );
+    }
+  }
+
+  static get instance(): ElementCallOpenTelemetry {
+    return sharedInstance;
+  }
+
+  constructor(
+    collectorUrl: string | undefined,
+    rageshakeUrl: string | undefined
+  ) {
+    // This is how we can make Jaeger show a reasonable service in the dropdown on the left.
+    const providerConfig = {
+      resource: new Resource({
+        [SemanticResourceAttributes.SERVICE_NAME]: SERVICE_NAME,
+      }),
+    };
+    this._provider = new WebTracerProvider(providerConfig);
+
+    if (collectorUrl) {
+      logger.info("Enabling OTLP collector with URL " + collectorUrl);
+      this.otlpExporter = new OTLPTraceExporter({
+        url: collectorUrl,
+      });
+      this._provider.addSpanProcessor(
+        new SimpleSpanProcessor(this.otlpExporter)
+      );
+    } else {
+      logger.info("OTLP collector disabled");
+    }
+
+    if (rageshakeUrl) {
+      this.rageshakeProcessor = new RageshakeSpanProcessor();
+      this._provider.addSpanProcessor(this.rageshakeProcessor);
+    }
+
+    this._provider.addSpanProcessor(new PosthogSpanProcessor());
+    opentelemetry.trace.setGlobalTracerProvider(this._provider);
+
+    this._tracer = opentelemetry.trace.getTracer(
+      // This is not the serviceName shown in jaeger
+      "my-element-call-otl-tracer"
+    );
+  }
+
+  public dispose(): void {
+    opentelemetry.trace.setGlobalTracerProvider(null);
+    this._provider?.shutdown();
+  }
+
+  public get isOtlpEnabled(): boolean {
+    return Boolean(this.otlpExporter);
+  }
+
+  public get tracer(): Tracer {
+    return this._tracer;
+  }
+
+  public get provider(): WebTracerProvider {
+    return this._provider;
+  }
+
+  public get anonymity(): Anonymity {
+    return this._anonymity;
+  }
+}

src/profile/ProfileModal.tsx

@@ -1,141 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, { ChangeEvent, useCallback, useEffect, useState } from "react";
-import { MatrixClient } from "matrix-js-sdk/src/client";
-import { useTranslation } from "react-i18next";
-
-import { Button } from "../button";
-import { useProfile } from "./useProfile";
-import { FieldRow, InputField, ErrorMessage } from "../input/Input";
-import { Modal, ModalContent } from "../Modal";
-import { AvatarInputField } from "../input/AvatarInputField";
-import styles from "./ProfileModal.module.css";
-
-interface Props {
-  client: MatrixClient;
-  onClose: () => void;
-  [rest: string]: unknown;
-}
-export function ProfileModal({ client, ...rest }: Props) {
-  const { onClose } = rest;
-  const { t } = useTranslation();
-  const {
-    success,
-    error,
-    loading,
-    displayName: initialDisplayName,
-    avatarUrl,
-    saveProfile,
-  } = useProfile(client);
-  const [displayName, setDisplayName] = useState(initialDisplayName || "");
-  const [removeAvatar, setRemoveAvatar] = useState(false);
-
-  const onRemoveAvatar = useCallback(() => {
-    setRemoveAvatar(true);
-  }, []);
-
-  const onChangeDisplayName = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => {
-      setDisplayName(e.target.value);
-    },
-    [setDisplayName]
-  );
-
-  const onSubmit = useCallback(
-    (e) => {
-      e.preventDefault();
-      const data = new FormData(e.target);
-      const displayNameDataEntry = data.get("displayName");
-      const avatar: File | string = data.get("avatar");
-
-      const avatarSize =
-        typeof avatar == "string" ? avatar.length : avatar.size;
-      const displayName =
-        typeof displayNameDataEntry == "string"
-          ? displayNameDataEntry
-          : displayNameDataEntry.name;
-
-      saveProfile({
-        displayName,
-        avatar: avatar && avatarSize > 0 ? avatar : undefined,
-        removeAvatar: removeAvatar && (!avatar || avatarSize === 0),
-      });
-    },
-    [saveProfile, removeAvatar]
-  );
-
-  useEffect(() => {
-    if (success) {
-      onClose();
-    }
-  }, [success, onClose]);
-
-  return (
-    <Modal title={t("Profile")} isDismissable {...rest}>
-      <ModalContent>
-        <form onSubmit={onSubmit}>
-          <FieldRow className={styles.avatarFieldRow}>
-            <AvatarInputField
-              id="avatar"
-              name="avatar"
-              label={t("Avatar")}
-              avatarUrl={avatarUrl}
-              displayName={displayName}
-              onRemoveAvatar={onRemoveAvatar}
-            />
-          </FieldRow>
-          <FieldRow>
-            <InputField
-              id="userId"
-              name="userId"
-              label={t("User ID")}
-              type="text"
-              disabled
-              value={client.getUserId()}
-            />
-          </FieldRow>
-          <FieldRow>
-            <InputField
-              id="displayName"
-              name="displayName"
-              label={t("Display name")}
-              type="text"
-              required
-              autoComplete="off"
-              placeholder={t("Display name")}
-              value={displayName}
-              onChange={onChangeDisplayName}
-            />
-          </FieldRow>
-          {error && (
-            <FieldRow>
-              <ErrorMessage error={error} />
-            </FieldRow>
-          )}
-          <FieldRow rightAlign>
-            <Button type="button" variant="secondary" onPress={onClose}>
-              Cancel
-            </Button>
-            <Button type="submit" disabled={loading}>
-              {loading ? t("Saving…") : t("Save")}
-            </Button>
-          </FieldRow>
-        </form>
-      </ModalContent>
-    </Modal>
-  );
-}

src/room/CallEndedView.module.css

@@ -17,20 +17,31 @@ limitations under the License.
 .headline {
   text-align: center;
   margin-bottom: 60px;
+  white-space: pre;
 }
 
 .callEndedContent {
   text-align: center;
-  max-width: 360px;
+  max-width: 450px;
+}
+.callEndedContent p {
+  font-size: var(--font-size-subtitle);
 }
-
 .callEndedContent h3 {
   margin-bottom: 32px;
 }
 
 .callEndedButton {
+  margin-top: 54px;
+  margin-left: 30px;
+  margin-right: 30px !important;
+}
+
+.submitButton {
   width: 100%;
   margin-top: 54px;
+  margin-left: 30px;
+  margin-right: 30px !important;
 }
 
 .container {

src/room/CallEndedView.tsx

@@ -14,19 +14,129 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { FormEventHandler, useCallback, useState } from "react";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { Trans, useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
 
 import styles from "./CallEndedView.module.css";
-import { LinkButton } from "../button";
+import feedbackStyle from "../input/FeedbackInput.module.css";
+import { Button, LinkButton } from "../button";
 import { useProfile } from "../profile/useProfile";
-import { Subtitle, Body, Link, Headline } from "../typography/Typography";
+import { Body, Link, Headline } from "../typography/Typography";
 import { Header, HeaderLogo, LeftNav, RightNav } from "../Header";
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+import { FieldRow, InputField } from "../input/Input";
+import { StarRatingInput } from "../input/StarRatingInput";
 
-export function CallEndedView({ client }: { client: MatrixClient }) {
+export function CallEndedView({
+  client,
+  isPasswordlessUser,
+  endedCallId,
+}: {
+  client: MatrixClient;
+  isPasswordlessUser: boolean;
+  endedCallId: string;
+}) {
   const { t } = useTranslation();
+  const history = useHistory();
+
   const { displayName } = useProfile(client);
+  const [surveySubmitted, setSurverySubmitted] = useState(false);
+  const [starRating, setStarRating] = useState(0);
+  const [submitting, setSubmitting] = useState(false);
+  const [submitDone, setSubmitDone] = useState(false);
+  const submitSurvery: FormEventHandler<HTMLFormElement> = useCallback(
+    (e) => {
+      e.preventDefault();
+      const data = new FormData(e.target as HTMLFormElement);
+      const feedbackText = data.get("feedbackText") as string;
+
+      PosthogAnalytics.instance.eventQualitySurvey.track(
+        endedCallId,
+        feedbackText,
+        starRating
+      );
+
+      setSubmitting(true);
+
+      setTimeout(() => {
+        setSubmitDone(true);
+
+        setTimeout(() => {
+          if (isPasswordlessUser) {
+            // setting this renders the callEndedView with the invitation to create an account
+            setSurverySubmitted(true);
+          } else {
+            // if the user already has an account immediately go back to the home screen
+            history.push("/");
+          }
+        }, 1000);
+      }, 1000);
+    },
+    [endedCallId, history, isPasswordlessUser, starRating]
+  );
+  const createAccountDialog = isPasswordlessUser && (
+    <div className={styles.callEndedContent}>
+      <Trans>
+        <p>Why not finish by setting up a password to keep your account?</p>
+        <p>
+          You'll be able to keep your name and set an avatar for use on future
+          calls
+        </p>
+      </Trans>
+      <LinkButton
+        className={styles.callEndedButton}
+        size="lg"
+        variant="default"
+        to="/register"
+      >
+        {t("Create account")}
+      </LinkButton>
+    </div>
+  );
+
+  const qualitySurveyDialog = (
+    <div className={styles.callEndedContent}>
+      <Trans>
+        <p>
+          We'd love to hear your feedback so we can improve your experience.
+        </p>
+      </Trans>
+      <form onSubmit={submitSurvery}>
+        <FieldRow>
+          <StarRatingInput starCount={5} onChange={setStarRating} required />
+        </FieldRow>
+        <FieldRow>
+          <InputField
+            className={feedbackStyle.feedback}
+            id="feedbackText"
+            name="feedbackText"
+            label={t("Your feedback")}
+            placeholder={t("Your feedback")}
+            type="textarea"
+          />
+        </FieldRow>{" "}
+        <FieldRow>
+          {submitDone ? (
+            <Trans>
+              <p>Thanks for your feedback!</p>
+            </Trans>
+          ) : (
+            <Button
+              type="submit"
+              className={styles.submitButton}
+              size="lg"
+              variant="default"
+              data-testid="home_go"
+            >
+              {submitting ? t("Submitting…") : t("Submit")}
+            </Button>
+          )}
+        </FieldRow>
+      </form>
+    </div>
+  );
 
   return (
     <>
@@ -39,27 +149,19 @@ export function CallEndedView({ client }: { client: MatrixClient }) {
       <div className={styles.container}>
         <main className={styles.main}>
           <Headline className={styles.headline}>
-            {t("{{displayName}}, your call is now ended", { displayName })}
+            {surveySubmitted
+              ? t("{{displayName}}, your call has ended.", {
+                  displayName,
+                })
+              : t("{{displayName}}, your call has ended.", {
+                  displayName,
+                }) +
+                "\n" +
+                t("How did it go?")}
           </Headline>
-          <div className={styles.callEndedContent}>
-            <Trans>
-              <Subtitle>
-                Why not finish by setting up a password to keep your account?
-              </Subtitle>
-              <Subtitle>
-                You'll be able to keep your name and set an avatar for use on
-                future calls
-              </Subtitle>
-            </Trans>
-            <LinkButton
-              className={styles.callEndedButton}
-              size="lg"
-              variant="default"
-              to="/register"
-            >
-              {t("Create account")}
-            </LinkButton>
-          </div>
+          {!surveySubmitted && PosthogAnalytics.instance.isEnabled()
+            ? qualitySurveyDialog
+            : createAccountDialog}
         </main>
         <Body className={styles.footer}>
           <Link color="primary" to="/">

src/room/GroupCallInspector.tsx

@@ -28,15 +28,25 @@ import ReactJson, { CollapsedFieldProps } from "react-json-view";
 import mermaid from "mermaid";
 import { Item } from "@react-stately/collections";
 import { MatrixEvent, IContent } from "matrix-js-sdk/src/models/event";
-import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
+import {
+  GroupCall,
+  GroupCallError,
+  GroupCallEvent,
+} from "matrix-js-sdk/src/webrtc/groupCall";
 import { ClientEvent, MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
-import { CallEvent } from "matrix-js-sdk/src/webrtc/call";
+import {
+  CallEvent,
+  CallState,
+  CallError,
+  MatrixCall,
+  VoipEvent,
+} from "matrix-js-sdk/src/webrtc/call";
 
 import styles from "./GroupCallInspector.module.css";
 import { SelectInput } from "../input/SelectInput";
-import { PosthogAnalytics } from "../PosthogAnalytics";
-import { MediaViewer } from "../inspectors/MediaInspector";
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
 
 interface InspectorContextState {
   eventsByUserId?: { [userId: string]: SequenceDiagramMatrixEvent[] };
@@ -236,7 +246,7 @@ function reducer(
   action: {
     type?: CallEvent | ClientEvent | RoomStateEvent;
     event?: MatrixEvent;
-    rawEvent?: Record<string, unknown>;
+    rawEvent?: VoipEvent;
     callStateEvent?: MatrixEvent;
     memberStateEvents?: MatrixEvent[];
   }
@@ -354,7 +364,7 @@ function reducer(
 function useGroupCallState(
   client: MatrixClient,
   groupCall: GroupCall,
-  showPollCallStats: boolean
+  otelGroupCallMembership: OTelGroupCallMembership
 ): InspectorContextState {
   const [state, dispatch] = useReducer(reducer, {
     localUserId: client.getUserId(),
@@ -382,28 +392,55 @@ function useGroupCallState(
         callStateEvent,
         memberStateEvents,
       });
+
+      otelGroupCallMembership?.onUpdateRoomState(event);
     }
 
     function onReceivedVoipEvent(event: MatrixEvent) {
       dispatch({ type: ClientEvent.ReceivedVoipEvent, event });
+
+      otelGroupCallMembership?.onReceivedVoipEvent(event);
     }
 
-    function onSendVoipEvent(event: Record<string, unknown>) {
+    function onSendVoipEvent(event: VoipEvent, call: MatrixCall) {
       dispatch({ type: CallEvent.SendVoipEvent, rawEvent: event });
+
+      otelGroupCallMembership?.onSendEvent(call, event);
+    }
+
+    function onCallStateChange(
+      newState: CallState,
+      _: CallState,
+      call: MatrixCall
+    ) {
+      otelGroupCallMembership?.onCallStateChange(call, newState);
+    }
+
+    function onCallError(error: CallError, call: MatrixCall) {
+      otelGroupCallMembership.onCallError(error, call);
+    }
+
+    function onGroupCallError(error: GroupCallError) {
+      otelGroupCallMembership.onGroupCallError(error);
     }
 
     function onUndecryptableToDevice(event: MatrixEvent) {
       dispatch({ type: ClientEvent.ReceivedVoipEvent, event });
 
       Sentry.captureMessage("Undecryptable to-device Event");
+      // probably unnecessary if it's now captured via otel?
       PosthogAnalytics.instance.eventUndecryptableToDevice.track(
         groupCall.groupCallId
       );
+
+      otelGroupCallMembership.onUndecryptableToDevice(event);
     }
 
     client.on(RoomStateEvent.Events, onUpdateRoomState);
-    //groupCall.on("calls_changed", onCallsChanged);
     groupCall.on(CallEvent.SendVoipEvent, onSendVoipEvent);
+    groupCall.on(CallEvent.State, onCallStateChange);
+    groupCall.on(CallEvent.Error, onCallError);
+    groupCall.on(GroupCallEvent.Error, onGroupCallError);
     //client.on("state", onCallsChanged);
     //client.on("hangup", onCallHangup);
     client.on(ClientEvent.ReceivedVoipEvent, onReceivedVoipEvent);
@@ -413,8 +450,10 @@ function useGroupCallState(
 
     return () => {
       client.removeListener(RoomStateEvent.Events, onUpdateRoomState);
-      //groupCall.removeListener("calls_changed", onCallsChanged);
       groupCall.removeListener(CallEvent.SendVoipEvent, onSendVoipEvent);
+      groupCall.removeListener(CallEvent.State, onCallStateChange);
+      groupCall.removeListener(CallEvent.Error, onCallError);
+      groupCall.removeListener(GroupCallEvent.Error, onGroupCallError);
       //client.removeListener("state", onCallsChanged);
       //client.removeListener("hangup", onCallHangup);
       client.removeListener(ClientEvent.ReceivedVoipEvent, onReceivedVoipEvent);
@@ -423,7 +462,7 @@ function useGroupCallState(
         onUndecryptableToDevice
       );
     };
-  }, [client, groupCall]);
+  }, [client, groupCall, otelGroupCallMembership]);
 
   return state;
 }
@@ -431,17 +470,19 @@ function useGroupCallState(
 interface GroupCallInspectorProps {
   client: MatrixClient;
   groupCall: GroupCall;
+  otelGroupCallMembership: OTelGroupCallMembership;
   show: boolean;
 }
 
 export function GroupCallInspector({
   client,
   groupCall,
+  otelGroupCallMembership,
   show,
 }: GroupCallInspectorProps) {
   const [currentTab, setCurrentTab] = useState("sequence-diagrams");
   const [selectedUserId, setSelectedUserId] = useState<string>();
-  const state = useGroupCallState(client, groupCall, show);
+  const state = useGroupCallState(client, groupCall, otelGroupCallMembership);
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [_, setState] = useContext(InspectorContext);
@@ -465,7 +506,6 @@ export function GroupCallInspector({
           Sequence Diagrams
         </button>
         <button onClick={() => setCurrentTab("inspector")}>Inspector</button>
-        <button onClick={() => setCurrentTab("voip")}>Media</button>
       </div>
       {currentTab === "sequence-diagrams" && (
         <SequenceDiagramViewer
@@ -489,14 +529,6 @@ export function GroupCallInspector({
           style={{ height: "100%", overflowY: "scroll" }}
         />
       )}
-      {currentTab === "voip" && (
-        <MediaViewer
-          client={client}
-          groupCall={groupCall}
-          userMediaFeeds={groupCall.userMediaFeeds}
-          screenshareFeeds={groupCall.screenshareFeeds}
-        />
-      )}
     </Resizable>
   );
 }

src/room/GroupCallLoader.tsx

@@ -51,7 +51,7 @@ export function GroupCallLoader({
   if (loading) {
     return (
       <FullScreenView>
-        <h1>{t("Loading room…")}</h1>
+        <h1>{t("Loading…")}</h1>
       </FullScreenView>
     );
   }

src/room/GroupCallView.tsx

@@ -29,7 +29,7 @@ import { MatrixInfo } from "./VideoPreview";
 import { InCallView } from "./InCallView";
 import { CallEndedView } from "./CallEndedView";
 import { useSentryGroupCallHandler } from "./useSentryGroupCallHandler";
-import { PosthogAnalytics } from "../PosthogAnalytics";
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { useProfile } from "../profile/useProfile";
 import { useLiveKit } from "../livekit/useLiveKit";
 
@@ -65,7 +65,8 @@ export function GroupCallView({
     leave,
     participants,
     unencryptedEventsFromUsers,
-  } = useGroupCall(groupCall);
+    otelGroupCallMembership,
+  } = useGroupCall(groupCall, client);
 
   const { t } = useTranslation();
 
@@ -82,7 +83,7 @@ export function GroupCallView({
     userName: displayName,
     avatarUrl,
     roomName: groupCall.room.name,
-    roomId: roomIdOrAlias,
+    roomIdOrAlias,
   };
 
   const lkState = useLiveKit();
@@ -91,7 +92,7 @@ export function GroupCallView({
     if (widget && preload) {
       // In preload mode, wait for a join action before entering
       const onJoin = async (ev: CustomEvent<IWidgetApiRequest>) => {
-        await groupCall.enter();
+        await enter();
 
         PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
         PosthogAnalytics.instance.eventCallStarted.track(groupCall.groupCallId);
@@ -107,17 +108,17 @@ export function GroupCallView({
         widget.lazyActions.off(ElementWidgetActions.JoinCall, onJoin);
       };
     }
-  }, [groupCall, preload]);
+  }, [groupCall, preload, enter]);
 
   useEffect(() => {
     if (isEmbedded && !preload) {
       // In embedded mode, bypass the lobby and just enter the call straight away
-      groupCall.enter();
+      enter();
 
       PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
       PosthogAnalytics.instance.eventCallStarted.track(groupCall.groupCallId);
     }
-  }, [groupCall, isEmbedded, preload]);
+  }, [groupCall, isEmbedded, preload, enter]);
 
   useSentryGroupCallHandler(groupCall);
 
@@ -150,7 +151,11 @@ export function GroupCallView({
       widget.api.transport.send(ElementWidgetActions.HangupCall, {});
     }
 
-    if (!isPasswordlessUser && !isEmbedded) {
+    if (
+      !isPasswordlessUser &&
+      !isEmbedded &&
+      !PosthogAnalytics.instance.isEnabled()
+    ) {
       history.push("/");
     }
   }, [groupCall, leave, isPasswordlessUser, isEmbedded, history]);
@@ -183,11 +188,31 @@ export function GroupCallView({
         matrixInfo={matrixInfo}
         mediaDevices={lkState.mediaDevices}
         livekitRoom={lkState.room}
+        userChoices={{
+          videoMuted: lkState.localMedia.video.muted,
+          audioMuted: lkState.localMedia.audio.muted,
+        }}
+        otelGroupCallMembership={otelGroupCallMembership}
       />
     );
   } else if (left) {
-    if (isPasswordlessUser) {
-      return <CallEndedView client={client} />;
+    // The call ended view is shown for two reasons: prompting guests to create
+    // an account, and prompting users that have opted into analytics to provide
+    // feedback. We don't show a feedback prompt to widget users however (at
+    // least for now), because we don't yet have designs that would allow widget
+    // users to dismiss the feedback prompt and close the call window without
+    // submitting anything.
+    if (
+      isPasswordlessUser ||
+      (PosthogAnalytics.instance.isEnabled() && !isEmbedded)
+    ) {
+      return (
+        <CallEndedView
+          endedCallId={groupCall.groupCallId}
+          client={client}
+          isPasswordlessUser={isPasswordlessUser}
+        />
+      );
     } else {
       // If the user is a regular user, we'll have sent them back to the homepage,
       // so just sit here & do nothing: otherwise we would (briefly) mount the
@@ -199,7 +224,7 @@ export function GroupCallView({
   } else if (isEmbedded) {
     return (
       <FullScreenView>
-        <h1>{t("Loading room…")}</h1>
+        <h1>{t("Loading…")}</h1>
       </FullScreenView>
     );
   } else if (lkState) {

src/room/InCallView.module.css

@@ -15,14 +15,20 @@ limitations under the License.
 */
 
 .inRoom {
-  position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   min-height: 100%;
-  position: fixed;
   height: 100%;
   width: 100%;
+  --footerPadding: 8px;
+  --footerHeight: calc(50px + 2 * var(--footerPadding));
+}
+
+.controlsOverlay {
+  position: relative;
+  flex: 1;
+  display: flex;
 }
 
 .centerMessage {
@@ -39,11 +45,27 @@ limitations under the License.
 }
 
 .footer {
-  position: relative;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
-  height: calc(50px + 2 * 8px);
+  padding: var(--footerPadding) 0;
+  /* TODO: Un-hardcode these colors */
+  background: linear-gradient(
+    360deg,
+    #15191e 0%,
+    rgba(21, 25, 30, 0.9) 37%,
+    rgba(21, 25, 30, 0.8) 49.68%,
+    rgba(21, 25, 30, 0.7) 56.68%,
+    rgba(21, 25, 30, 0.427397) 72.92%,
+    rgba(21, 25, 30, 0.257534) 81.06%,
+    rgba(21, 25, 30, 0.136986) 87.29%,
+    rgba(21, 25, 30, 0.0658079) 92.4%,
+    rgba(21, 25, 30, 0) 100%
+  );
 }
 
 .footer > * {
@@ -65,16 +87,22 @@ limitations under the License.
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  /* To make avatars scale smoothly with their tiles during animations, we
+  override the styles set on the element */
+  --avatarSize: calc(min(var(--tileWidth), var(--tileHeight)) / 2);
+  width: var(--avatarSize) !important;
+  height: var(--avatarSize) !important;
+  border-radius: 10000px !important;
 }
 
 @media (min-height: 300px) {
-  .footer {
-    height: calc(50px + 2 * 24px);
+  .inRoom {
+    --footerPadding: 24px;
   }
 }
 
 @media (min-width: 800px) {
-  .footer {
-    height: calc(50px + 2 * 32px);
+  .inRoom {
+    --footerPadding: 32px;
   }
 }

src/room/InCallView.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -25,15 +25,24 @@ import {
 import { usePreventScroll } from "@react-aria/overlays";
 import classNames from "classnames";
 import { Room, Track } from "livekit-client";
-import { JoinRule } from "matrix-js-sdk/src/@types/partials";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { GroupCall } from "matrix-js-sdk/src/webrtc/groupCall";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useTranslation } from "react-i18next";
 import useMeasure from "react-use-measure";
+import { OverlayTriggerState } from "@react-stately/overlays";
+import { JoinRule } from "matrix-js-sdk/src/@types/partials";
 
 import type { IWidgetApiRequest } from "matrix-widget-api";
+import {
+  HangupButton,
+  MicButton,
+  VideoButton,
+  ScreenshareButton,
+  SettingsButton,
+  InviteButton,
+} from "../button";
 import {
   Header,
   LeftNav,
@@ -41,38 +50,34 @@ import {
   RoomHeaderInfo,
   VersionMismatchWarning,
 } from "../Header";
-import { useModalTriggerState } from "../Modal";
-import { PosthogAnalytics } from "../PosthogAnalytics";
-import { useUrlParams } from "../UrlParams";
-import { UserMenuContainer } from "../UserMenuContainer";
 import {
-  HangupButton,
-  MicButton,
-  ScreenshareButton,
-  VideoButton,
-} from "../button";
-import { MediaDevicesState } from "../settings/mediaDevices";
-import { useRageshakeRequestModal } from "../settings/submit-rageshake";
-import { useShowInspector } from "../settings/useSetting";
-import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
-import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
-import {
-  TileDescriptor,
   VideoGrid,
   useVideoGridLayout,
+  TileDescriptor,
 } from "../video-grid/VideoGrid";
+import { useNewGrid, useShowInspector } from "../settings/useSetting";
+import { useModalTriggerState } from "../Modal";
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+import { useUrlParams } from "../UrlParams";
+import { MediaDevicesState } from "../settings/mediaDevices";
+import { useRageshakeRequestModal } from "../settings/submit-rageshake";
+import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
+import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
 import { ItemData, VideoTileContainer } from "../video-grid/VideoTileContainer";
 import { ElementWidgetActions, widget } from "../widget";
 import { GridLayoutMenu } from "./GridLayoutMenu";
 import { GroupCallInspector } from "./GroupCallInspector";
 import styles from "./InCallView.module.css";
-import { OverflowMenu } from "./OverflowMenu";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
 import { MatrixInfo } from "./VideoPreview";
 import { useJoinRule } from "./useJoinRule";
 import { ParticipantInfo } from "./useGroupCall";
 import { TileContent } from "../video-grid/VideoTile";
 import { Config } from "../config/Config";
+import { NewVideoGrid } from "../video-grid/NewVideoGrid";
+import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
+import { SettingsModal } from "../settings/SettingsModal";
+import { InviteModal } from "./InviteModal";
 
 const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // There is currently a bug in Safari our our code with cloning and sending MediaStreams
@@ -80,6 +85,11 @@ const canScreenshare = "getDisplayMedia" in (navigator.mediaDevices ?? {});
 // For now we can disable screensharing in Safari.
 const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 
+interface LocalUserChoices {
+  videoMuted: boolean;
+  audioMuted: boolean;
+}
+
 interface Props {
   client: MatrixClient;
   groupCall: GroupCall;
@@ -87,10 +97,11 @@ interface Props {
   onLeave: () => void;
   unencryptedEventsFromUsers: Set<string>;
   hideHeader: boolean;
-
   matrixInfo: MatrixInfo;
   mediaDevices: MediaDevicesState;
   livekitRoom: Room;
+  userChoices: LocalUserChoices;
+  otelGroupCallMembership: OTelGroupCallMembership;
 }
 
 export function InCallView({
@@ -103,10 +114,11 @@ export function InCallView({
   matrixInfo,
   mediaDevices,
   livekitRoom,
+  userChoices,
+  otelGroupCallMembership,
 }: Props) {
   const { t } = useTranslation();
   usePreventScroll();
-  const joinRule = useJoinRule(groupCall.room);
 
   const containerRef1 = useRef<HTMLDivElement | null>(null);
   const [containerRef2, bounds] = useMeasure({ polyfill: ResizeObserver });
@@ -142,8 +154,8 @@ export function InCallView({
     token,
     serverUrl: Config.get().livekit.server_url,
     room: livekitRoom,
-    audio: true,
-    video: true,
+    audio: !userChoices.audioMuted,
+    video: !userChoices.videoMuted,
     onConnected: () => {
       console.log("connected to LiveKit room");
     },
@@ -167,9 +179,6 @@ export function InCallView({
 
   const [showInspector] = useShowInspector();
 
-  const { modalState: feedbackModalState, modalProps: feedbackModalProps } =
-    useModalTriggerState();
-
   const { hideScreensharing } = useUrlParams();
 
   const {
@@ -185,12 +194,14 @@ export function InCallView({
   const toggleCamera = useCallback(async () => {
     await localParticipant.setCameraEnabled(!isCameraEnabled);
   }, [localParticipant, isCameraEnabled]);
-  const toggleScreenSharing = useCallback(async () => {
+  const toggleScreensharing = useCallback(async () => {
     await localParticipant.setScreenShareEnabled(!isScreenShareEnabled);
   }, [localParticipant, isScreenShareEnabled]);
 
+  const joinRule = useJoinRule(groupCall.room);
+
   useCallViewKeyboardShortcuts(
-    !feedbackModalState.isOpen,
+    containerRef1,
     toggleMicrophone,
     toggleCamera,
     async (muted) => await localParticipant.setMicrophoneEnabled(!muted)
@@ -235,10 +246,22 @@ export function InCallView({
   const reducedControls = boundsValid && bounds.width <= 400;
   const noControls = reducedControls && bounds.height <= 400;
 
-  const prefersReducedMotion = usePrefersReducedMotion();
-
   const items = useParticipantTiles(livekitRoom, participants);
 
+  // The maximised participant is the focused (active) participant, given the
+  // window is too small to show everyone
+  const maximisedParticipant = useMemo(
+    () =>
+      noControls
+        ? items.find((item) => item.focused) ?? items.at(0) ?? null
+        : null,
+    [noControls, items]
+  );
+
+  const [newGrid] = useNewGrid();
+  const Grid = newGrid ? NewVideoGrid : VideoGrid;
+  const prefersReducedMotion = usePrefersReducedMotion();
+
   const renderContent = (): JSX.Element => {
     if (items.length === 0) {
       return (
@@ -247,15 +270,26 @@ export function InCallView({
         </div>
       );
     }
+    if (maximisedParticipant) {
+      return (
+        <VideoTileContainer
+          targetHeight={bounds.height}
+          targetWidth={bounds.width}
+          id={maximisedParticipant.id}
+          key={maximisedParticipant.id}
+          item={maximisedParticipant.data}
+        />
+      );
+    }
 
     return (
-      <VideoGrid
+      <Grid
         items={items}
         layout={layout}
         disableAnimations={prefersReducedMotion || isSafari}
       >
         {(child) => <VideoTileContainer item={child.data} {...child} />}
-      </VideoGrid>
+      </Grid>
     );
   };
 
@@ -264,6 +298,36 @@ export function InCallView({
     modalProps: rageshakeRequestModalProps,
   } = useRageshakeRequestModal(groupCall.room.roomId);
 
+  const {
+    modalState: settingsModalState,
+    modalProps: settingsModalProps,
+  }: {
+    modalState: OverlayTriggerState;
+    modalProps: {
+      isOpen: boolean;
+      onClose: () => void;
+    };
+  } = useModalTriggerState();
+
+  const openSettings = useCallback(() => {
+    settingsModalState.open();
+  }, [settingsModalState]);
+
+  const {
+    modalState: inviteModalState,
+    modalProps: inviteModalProps,
+  }: {
+    modalState: OverlayTriggerState;
+    modalProps: {
+      isOpen: boolean;
+      onClose: () => void;
+    };
+  } = useModalTriggerState();
+
+  const openInvite = useCallback(() => {
+    inviteModalState.open();
+  }, [inviteModalState]);
+
   const containerClasses = classNames(styles.inRoom, {
     [styles.maximised]: undefined,
   });
@@ -272,36 +336,44 @@ export function InCallView({
 
   if (noControls) {
     footer = null;
-  } else if (reducedControls) {
-    footer = (
-      <div className={styles.footer}>
-        <MicButton muted={!isMicrophoneEnabled} onPress={toggleMicrophone} />
-        <VideoButton muted={!isCameraEnabled} onPress={toggleCamera} />
-        <HangupButton onPress={onLeave} />
-      </div>
-    );
   } else {
-    footer = (
-      <div className={styles.footer}>
-        <MicButton muted={!isMicrophoneEnabled} onPress={toggleMicrophone} />
-        <VideoButton muted={!isCameraEnabled} onPress={toggleCamera} />
-        {canScreenshare && !hideScreensharing && !isSafari && (
-          <ScreenshareButton
-            enabled={isScreenShareEnabled}
-            onPress={toggleScreenSharing}
-          />
-        )}
-        <OverflowMenu
-          roomId={matrixInfo.roomId}
-          mediaDevices={mediaDevices}
-          inCall
-          showInvite={joinRule === JoinRule.Public}
-          feedbackModalState={feedbackModalState}
-          feedbackModalProps={feedbackModalProps}
-        />
-        <HangupButton onPress={onLeave} />
-      </div>
+    const buttons: JSX.Element[] = [];
+
+    buttons.push(
+      <MicButton
+        key="1"
+        muted={!isMicrophoneEnabled}
+        onPress={toggleMicrophone}
+        data-testid="incall_mute"
+      />,
+      <VideoButton
+        key="2"
+        muted={!isCameraEnabled}
+        onPress={toggleCamera}
+        data-testid="incall_videomute"
+      />
     );
+
+    if (!reducedControls) {
+      if (canScreenshare && !hideScreensharing && !isSafari) {
+        buttons.push(
+          <ScreenshareButton
+            key="3"
+            enabled={isScreenShareEnabled}
+            onPress={toggleScreensharing}
+            data-testid="incall_screenshare"
+          />
+        );
+      }
+      if (!maximisedParticipant) {
+        buttons.push(<SettingsButton key="4" onPress={openSettings} />);
+      }
+    }
+
+    buttons.push(
+      <HangupButton key="6" onPress={onLeave} data-testid="incall_leave" />
+    );
+    footer = <div className={styles.footer}>{buttons}</div>;
   }
 
   return (
@@ -320,21 +392,40 @@ export function InCallView({
           </LeftNav>
           <RightNav>
             <GridLayoutMenu layout={layout} setLayout={setLayout} />
-            <UserMenuContainer preventNavigation />
+            {joinRule === JoinRule.Public && (
+              <InviteButton variant="icon" onClick={openInvite} />
+            )}
           </RightNav>
         </Header>
       )}
-      {renderContent()}
-      {footer}
+      <div className={styles.controlsOverlay}>
+        {renderContent()}
+        {footer}
+      </div>
       <GroupCallInspector
         client={client}
         groupCall={groupCall}
+        otelGroupCallMembership={otelGroupCallMembership}
         show={showInspector}
       />
-      {rageshakeRequestModalState.isOpen && (
+      {rageshakeRequestModalState.isOpen && !noControls && (
         <RageshakeRequestModal
           {...rageshakeRequestModalProps}
-          roomIdOrAlias={matrixInfo.roomId}
+          roomIdOrAlias={matrixInfo.roomIdOrAlias}
+        />
+      )}
+      {settingsModalState.isOpen && (
+        <SettingsModal
+          client={client}
+          roomId={groupCall.room.roomId}
+          mediaDevices={mediaDevices}
+          {...settingsModalProps}
+        />
+      )}
+      {inviteModalState.isOpen && (
+        <InviteModal
+          roomIdOrAlias={matrixInfo.roomIdOrAlias}
+          {...inviteModalProps}
         />
       )}
     </div>
@@ -371,6 +462,7 @@ function useParticipantTiles(
           focused: false,
           local: sfuParticipant.isLocal,
           data: {
+            id,
             member,
             sfuParticipant,
             content: TileContent.UserMedia,

src/room/InviteModal.tsx

@@ -41,6 +41,7 @@ export const InviteModal: FC<Props> = ({ roomIdOrAlias, ...rest }) => {
         <CopyButton
           className={styles.copyButton}
           value={getRoomUrl(roomIdOrAlias)}
+          data-testid="modal_inviteLink"
         />
       </ModalContent>
     </Modal>

src/room/LobbyView.tsx

@@ -77,6 +77,7 @@ export function LobbyView(props: Props) {
               className={styles.copyButton}
               size="lg"
               onPress={props.onEnter}
+              data-testid="lobby_joinCall"
             >
               Join call now
             </Button>
@@ -86,6 +87,7 @@ export function LobbyView(props: Props) {
               value={getRoomUrl(props.matrixInfo.roomName)}
               className={styles.copyButton}
               copiedMessage={t("Call link copied")}
+              data-testid="lobby_inviteLink"
             >
               Copy call link and join later
             </CopyButton>

src/room/OverflowMenu.tsx

@@ -1,141 +0,0 @@
-/*
-Copyright 2022 New Vector Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React, { useCallback } from "react";
-import { Item } from "@react-stately/collections";
-import { OverlayTriggerState } from "@react-stately/overlays";
-import { useTranslation } from "react-i18next";
-
-import { Button } from "../button";
-import { Menu } from "../Menu";
-import { PopoverMenuTrigger } from "../popover/PopoverMenu";
-import { ReactComponent as SettingsIcon } from "../icons/Settings.svg";
-import { ReactComponent as AddUserIcon } from "../icons/AddUser.svg";
-import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg";
-import { ReactComponent as FeedbackIcon } from "../icons/Feedback.svg";
-import { useModalTriggerState } from "../Modal";
-import { SettingsModal } from "../settings/SettingsModal";
-import { InviteModal } from "./InviteModal";
-import { TooltipTrigger } from "../Tooltip";
-import { FeedbackModal } from "./FeedbackModal";
-import { Config } from "../config/Config";
-import { MediaDevicesState } from "../settings/mediaDevices";
-
-interface Props {
-  roomId: string;
-  mediaDevices: MediaDevicesState;
-
-  inCall: boolean;
-  showInvite: boolean;
-  feedbackModalState: OverlayTriggerState;
-  feedbackModalProps: {
-    isOpen: boolean;
-    onClose: () => void;
-  };
-}
-
-export function OverflowMenu(props: Props) {
-  const { t } = useTranslation();
-  const {
-    modalState: inviteModalState,
-    modalProps: inviteModalProps,
-  }: {
-    modalState: OverlayTriggerState;
-    modalProps: {
-      isOpen: boolean;
-      onClose: () => void;
-    };
-  } = useModalTriggerState();
-  const {
-    modalState: settingsModalState,
-    modalProps: settingsModalProps,
-  }: {
-    modalState: OverlayTriggerState;
-    modalProps: {
-      isOpen: boolean;
-      onClose: () => void;
-    };
-  } = useModalTriggerState();
-
-  // TODO: On closing modal, focus should be restored to the trigger button
-  // https://github.com/adobe/react-spectrum/issues/2444
-  const onAction = useCallback(
-    (key) => {
-      switch (key) {
-        case "invite":
-          inviteModalState.open();
-          break;
-        case "settings":
-          settingsModalState.open();
-          break;
-        case "feedback":
-          props.feedbackModalState.open();
-          break;
-      }
-    },
-    [props.feedbackModalState, inviteModalState, settingsModalState]
-  );
-
-  const tooltip = useCallback(() => t("More"), [t]);
-
-  return (
-    <>
-      <PopoverMenuTrigger disableOnState>
-        <TooltipTrigger tooltip={tooltip} placement="top">
-          <Button variant="toolbar">
-            <OverflowIcon />
-          </Button>
-        </TooltipTrigger>
-        {(attr: JSX.IntrinsicAttributes) => (
-          <Menu {...attr} label={t("More menu")} onAction={onAction}>
-            {props.showInvite && (
-              <Item key="invite" textValue={t("Invite people")}>
-                <AddUserIcon />
-                <span>{t("Invite people")}</span>
-              </Item>
-            )}
-            <Item key="settings" textValue={t("Settings")}>
-              <SettingsIcon />
-              <span>{t("Settings")}</span>
-            </Item>
-            {Config.get().rageshake?.submit_url && (
-              <Item key="feedback" textValue={t("Submit feedback")}>
-                <FeedbackIcon />
-                <span>{t("Submit feedback")}</span>
-              </Item>
-            )}
-          </Menu>
-        )}
-      </PopoverMenuTrigger>
-      {settingsModalState.isOpen && (
-        <SettingsModal
-          mediaDevices={props.mediaDevices}
-          {...settingsModalProps}
-        />
-      )}
-      {inviteModalState.isOpen && (
-        <InviteModal roomIdOrAlias={props.roomId} {...inviteModalProps} />
-      )}
-      {props.feedbackModalState.isOpen && (
-        <FeedbackModal
-          roomId={props.roomId}
-          inCall={props.inCall}
-          {...props.feedbackModalProps}
-        />
-      )}
-    </>
-  );
-}

src/room/RoomAuthView.tsx

@@ -74,6 +74,7 @@ export function RoomAuthView() {
                 name="displayName"
                 label={t("Display name")}
                 placeholder={t("Display name")}
+                data-testid="joincall_displayName"
                 type="text"
                 required
                 autoComplete="off"
@@ -90,7 +91,12 @@ export function RoomAuthView() {
                 <ErrorMessage error={error} />
               </FieldRow>
             )}
-            <Button type="submit" size="lg" disabled={loading}>
+            <Button
+              type="submit"
+              size="lg"
+              disabled={loading}
+              data-testid="joincall_joincall"
+            >
               {loading ? t("Loading…") : t("Join call now")}
             </Button>
             <div id={recaptchaId} />

src/room/RoomPage.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2021-2022 New Vector Ltd
+Copyright 2021-2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -26,6 +26,7 @@ import { GroupCallView } from "./GroupCallView";
 import { useUrlParams } from "../UrlParams";
 import { useRegisterPasswordlessUser } from "../auth/useRegisterPasswordlessUser";
 import { translatedError } from "../TranslatedError";
+import { useOptInAnalytics } from "../settings/useSetting";
 
 export const RoomPage: FC = () => {
   const { t } = useTranslation();
@@ -45,9 +46,15 @@ export const RoomPage: FC = () => {
   const roomIdOrAlias = roomId ?? roomAlias;
   if (!roomIdOrAlias) throw translatedError("No room specified", t);
 
+  const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
   const { registerPasswordlessUser } = useRegisterPasswordlessUser();
   const [isRegistering, setIsRegistering] = useState(false);
 
+  useEffect(() => {
+    // During the beta, opt into analytics by default
+    if (optInAnalytics === null) setOptInAnalytics(true);
+  }, [optInAnalytics, setOptInAnalytics]);
+
   useEffect(() => {
     // If we've finished loading, are not already authed and we've been given a display name as
     // a URL param, automatically register a passwordless user

src/room/VideoPreview.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,23 +14,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { useCallback } from "react";
 import useMeasure from "react-use-measure";
 import { ResizeObserver } from "@juggle/resize-observer";
 import { Track } from "livekit-client";
+import { OverlayTriggerState } from "@react-stately/overlays";
 
-import { MicButton, VideoButton } from "../button";
-import { OverflowMenu } from "./OverflowMenu";
+import { MicButton, SettingsButton, VideoButton } from "../button";
 import { Avatar } from "../Avatar";
 import styles from "./VideoPreview.module.css";
 import { useModalTriggerState } from "../Modal";
+import { SettingsModal } from "../settings/SettingsModal";
 import { MediaDevicesState } from "../settings/mediaDevices";
+import { useClient } from "../ClientContext";
 
 export type MatrixInfo = {
   userName: string;
   avatarUrl: string;
   roomName: string;
-  roomId: string;
+  roomIdOrAlias: string;
 };
 
 export type MediaInfo = {
@@ -55,9 +57,23 @@ export function VideoPreview({
   mediaDevices,
   localMediaInfo,
 }: Props) {
+  const { client } = useClient();
   const [previewRef, previewBounds] = useMeasure({ polyfill: ResizeObserver });
-  const { modalState: feedbackModalState, modalProps: feedbackModalProps } =
-    useModalTriggerState();
+
+  const {
+    modalState: settingsModalState,
+    modalProps: settingsModalProps,
+  }: {
+    modalState: OverlayTriggerState;
+    modalProps: {
+      isOpen: boolean;
+      onClose: () => void;
+    };
+  } = useModalTriggerState();
+
+  const openSettings = useCallback(() => {
+    settingsModalState.open();
+  }, [settingsModalState]);
 
   const mediaElement = React.useRef(null);
   React.useEffect(() => {
@@ -95,16 +111,16 @@ export function VideoPreview({
               onPress={localMediaInfo.video?.toggle}
             />
           )}
-          <OverflowMenu
-            roomId={matrixInfo.roomId}
-            mediaDevices={mediaDevices}
-            feedbackModalState={feedbackModalState}
-            feedbackModalProps={feedbackModalProps}
-            inCall={false}
-            showInvite={false}
-          />
+          <SettingsButton onPress={openSettings} />
         </div>
       </>
+      {settingsModalState.isOpen && (
+        <SettingsModal
+          client={client}
+          mediaDevices={mediaDevices}
+          {...settingsModalProps}
+        />
+      )}
     </div>
   );
 }

src/room/checkForParallelCalls.ts

@@ -0,0 +1,65 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { EventType } from "matrix-js-sdk/src/@types/event";
+import { RoomState } from "matrix-js-sdk/src/models/room-state";
+
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+
+function isObject(x: unknown): x is Record<string, unknown> {
+  return typeof x === "object" && x !== null;
+}
+
+/**
+ * Checks the state of a room for multiple calls happening in parallel, sending
+ * the details to PostHog if that is indeed what's happening. (This is unwanted
+ * as it indicates a split-brain scenario.)
+ */
+export function checkForParallelCalls(state: RoomState): void {
+  const now = Date.now();
+  const participantsPerCall = new Map<string, number>();
+
+  // For each participant in each call, increment the participant count
+  for (const e of state.getStateEvents(EventType.GroupCallMemberPrefix)) {
+    const content = e.getContent<Record<string, unknown>>();
+    const calls: unknown[] = Array.isArray(content["m.calls"])
+      ? content["m.calls"]
+      : [];
+
+    for (const call of calls) {
+      if (isObject(call) && typeof call["m.call_id"] === "string") {
+        const devices: unknown[] = Array.isArray(call["m.devices"])
+          ? call["m.devices"]
+          : [];
+
+        for (const device of devices) {
+          if (isObject(device) && (device["expires_ts"] as number) > now) {
+            const participantCount =
+              participantsPerCall.get(call["m.call_id"]) ?? 0;
+            participantsPerCall.set(call["m.call_id"], participantCount + 1);
+          }
+        }
+      }
+    }
+  }
+
+  if (participantsPerCall.size > 1) {
+    PosthogAnalytics.instance.trackEvent({
+      eventName: "ParallelCalls",
+      participantsPerCall: Object.fromEntries(participantsPerCall),
+    });
+  }
+}

src/room/useGroupCall.ts

@@ -22,16 +22,28 @@ import {
   GroupCallErrorCode,
   GroupCallUnknownDeviceError,
   GroupCallError,
+  GroupCallStatsReportEvent,
+  GroupCallStatsReport,
 } from "matrix-js-sdk/src/webrtc/groupCall";
 import { CallFeed, CallFeedEvent } from "matrix-js-sdk/src/webrtc/callFeed";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { useTranslation } from "react-i18next";
 import { IWidgetApiRequest } from "matrix-widget-api";
+import { MatrixClient, RoomStateEvent } from "matrix-js-sdk";
+import {
+  ByteSentStatsReport,
+  ConnectionStatsReport,
+  SummaryStatsReport,
+  CallFeedReport,
+} from "matrix-js-sdk/src/webrtc/stats/statsReport";
 
 import { usePageUnload } from "./usePageUnload";
-import { PosthogAnalytics } from "../PosthogAnalytics";
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { TranslatedError, translatedError } from "../TranslatedError";
 import { ElementWidgetActions, ScreenshareStartData, widget } from "../widget";
+import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
+import { ElementCallOpenTelemetry } from "../otel/otel";
+import { checkForParallelCalls } from "./checkForParallelCalls";
 
 enum ConnectionState {
   EstablishingCall = "establishing call", // call hasn't been established yet
@@ -53,7 +65,7 @@ interface UseGroupCallReturnType {
   localVideoMuted: boolean;
   error: TranslatedError | null;
   initLocalCallFeed: () => void;
-  enter: () => void;
+  enter: () => Promise<void>;
   leave: () => void;
   toggleLocalVideoMuted: () => void;
   toggleMicrophoneMuted: () => void;
@@ -66,6 +78,7 @@ interface UseGroupCallReturnType {
   participants: Map<RoomMember, Map<string, ParticipantInfo>>;
   hasLocalParticipant: boolean;
   unencryptedEventsFromUsers: Set<string>;
+  otelGroupCallMembership: OTelGroupCallMembership;
 }
 
 interface State {
@@ -84,6 +97,13 @@ interface State {
   hasLocalParticipant: boolean;
 }
 
+// This is a bit of a hack, but we keep the opentelemetry tracker object at the file
+// level so that it doesn't pop in & out of existence as react mounts & unmounts
+// components. The right solution is probably for this to live in the js-sdk and have
+// the same lifetime as groupcalls themselves.
+let groupCallOTelMembership: OTelGroupCallMembership;
+let groupCallOTelMembershipGroupCallId: string;
+
 function getParticipants(
   groupCall: GroupCall
 ): Map<RoomMember, Map<string, ParticipantInfo>> {
@@ -98,12 +118,24 @@ function getParticipants(
         (f) => f.userId === member.userId && f.deviceId === deviceId
       );
 
-      participantInfoMap.set(deviceId, {
-        connectionState: feed
+      let connectionState: ConnectionState;
+      // If we allow calls without media, we have no feeds and cannot read the connection status from them.
+      // @TODO: The connection state should generally not be determined by the feed.
+      if (
+        groupCall.allowCallWithoutVideoAndAudio &&
+        !feed &&
+        !participant.screensharing
+      ) {
+        connectionState = ConnectionState.Connected;
+      } else {
+        connectionState = feed
           ? feed.connected
             ? ConnectionState.Connected
             : ConnectionState.WaitMedia
-          : ConnectionState.EstablishingCall,
+          : ConnectionState.EstablishingCall;
+      }
+      participantInfoMap.set(deviceId, {
+        connectionState,
         presenter: participant.screensharing,
       });
     }
@@ -112,7 +144,10 @@ function getParticipants(
   return participants;
 }
 
-export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
+export function useGroupCall(
+  groupCall: GroupCall,
+  client: MatrixClient
+): UseGroupCallReturnType {
   const [
     {
       state,
@@ -146,6 +181,19 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
     hasLocalParticipant: false,
   });
 
+  if (groupCallOTelMembershipGroupCallId !== groupCall.groupCallId) {
+    if (groupCallOTelMembership) groupCallOTelMembership.dispose();
+
+    // If the user disables analytics, this will stay around until they leave the call
+    // so analytics will be disabled once they leave.
+    if (ElementCallOpenTelemetry.instance) {
+      groupCallOTelMembership = new OTelGroupCallMembership(groupCall, client);
+      groupCallOTelMembershipGroupCallId = groupCall.groupCallId;
+    } else {
+      groupCallOTelMembership = undefined;
+    }
+  }
+
   const [unencryptedEventsFromUsers, addUnencryptedEventUser] = useReducer(
     (state: Set<string>, newVal: string) => {
       return new Set(state).add(newVal);
@@ -158,6 +206,43 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
     [setState]
   );
 
+  const doNothingMediaActionCallback = useCallback(
+    (details: MediaSessionActionDetails) => {},
+    []
+  );
+
+  const leaveCall = useCallback(() => {
+    groupCallOTelMembership?.onLeaveCall();
+    groupCall.leave();
+  }, [groupCall]);
+
+  useEffect(() => {
+    // disable the media action keys, otherwise audio elements get paused when
+    // the user presses media keys or unplugs headphones, etc.
+    // Note there are actions for muting / unmuting a microphone & hanging up
+    // which we could wire up.
+    const mediaActions: MediaSessionAction[] = [
+      "play",
+      "pause",
+      "stop",
+      "nexttrack",
+      "previoustrack",
+    ];
+
+    for (const mediaAction of mediaActions) {
+      navigator.mediaSession?.setActionHandler(
+        mediaAction,
+        doNothingMediaActionCallback
+      );
+    }
+
+    return () => {
+      for (const mediaAction of mediaActions) {
+        navigator.mediaSession?.setActionHandler(mediaAction, null);
+      }
+    };
+  }, [doNothingMediaActionCallback]);
+
   useEffect(() => {
     function onGroupCallStateChanged() {
       updateState({
@@ -261,6 +346,30 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
       }
     }
 
+    function onConnectionStatsReport(
+      report: GroupCallStatsReport<ConnectionStatsReport>
+    ): void {
+      groupCallOTelMembership?.onConnectionStatsReport(report);
+    }
+
+    function onByteSentStatsReport(
+      report: GroupCallStatsReport<ByteSentStatsReport>
+    ): void {
+      groupCallOTelMembership?.onByteSentStatsReport(report);
+    }
+
+    function onSummaryStatsReport(
+      report: GroupCallStatsReport<SummaryStatsReport>
+    ): void {
+      groupCallOTelMembership?.onSummaryStatsReport(report);
+    }
+
+    function onCallFeedStatsReport(
+      report: GroupCallStatsReport<CallFeedReport>
+    ): void {
+      groupCallOTelMembership?.onCallFeedStatsReport(report);
+    }
+
     groupCall.on(GroupCallEvent.GroupCallStateChanged, onGroupCallStateChanged);
     groupCall.on(GroupCallEvent.UserMediaFeedsChanged, onUserMediaFeedsChanged);
     groupCall.on(
@@ -276,6 +385,24 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
     groupCall.on(GroupCallEvent.CallsChanged, onCallsChanged);
     groupCall.on(GroupCallEvent.ParticipantsChanged, onParticipantsChanged);
     groupCall.on(GroupCallEvent.Error, onError);
+    groupCall.on(
+      GroupCallStatsReportEvent.ConnectionStats,
+      onConnectionStatsReport
+    );
+    groupCall.on(
+      GroupCallStatsReportEvent.ByteSentStats,
+      onByteSentStatsReport
+    );
+    groupCall.on(GroupCallStatsReportEvent.SummaryStats, onSummaryStatsReport);
+    groupCall.on(
+      GroupCallStatsReportEvent.CallFeedStats,
+      onCallFeedStatsReport
+    );
+
+    groupCall.room.currentState.on(
+      RoomStateEvent.Update,
+      checkForParallelCalls
+    );
 
     updateState({
       error: null,
@@ -323,12 +450,32 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
         onParticipantsChanged
       );
       groupCall.removeListener(GroupCallEvent.Error, onError);
-      groupCall.leave();
+      groupCall.removeListener(
+        GroupCallStatsReportEvent.ConnectionStats,
+        onConnectionStatsReport
+      );
+      groupCall.removeListener(
+        GroupCallStatsReportEvent.ByteSentStats,
+        onByteSentStatsReport
+      );
+      groupCall.removeListener(
+        GroupCallStatsReportEvent.SummaryStats,
+        onSummaryStatsReport
+      );
+      groupCall.removeListener(
+        GroupCallStatsReportEvent.CallFeedStats,
+        onCallFeedStatsReport
+      );
+      groupCall.room.currentState.off(
+        RoomStateEvent.Update,
+        checkForParallelCalls
+      );
+      leaveCall();
     };
-  }, [groupCall, updateState]);
+  }, [groupCall, updateState, leaveCall]);
 
   usePageUnload(() => {
-    groupCall.leave();
+    leaveCall();
   });
 
   const initLocalCallFeed = useCallback(
@@ -336,7 +483,7 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
     [groupCall]
   );
 
-  const enter = useCallback(() => {
+  const enter = useCallback(async () => {
     if (
       groupCall.state !== GroupCallState.LocalCallFeedUninitialized &&
       groupCall.state !== GroupCallState.LocalCallFeedInitialized
@@ -347,17 +494,21 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
     PosthogAnalytics.instance.eventCallEnded.cacheStartCall(new Date());
     PosthogAnalytics.instance.eventCallStarted.track(groupCall.groupCallId);
 
-    groupCall.enter().catch((error) => {
+    // This must be called before we start trying to join the call, as we need to
+    // have started tracking by the time calls start getting created.
+    groupCallOTelMembership?.onJoinCall();
+
+    await groupCall.enter().catch((error) => {
       console.error(error);
       updateState({ error });
     });
   }, [groupCall, updateState]);
 
-  const leave = useCallback(() => groupCall.leave(), [groupCall]);
-
   const toggleLocalVideoMuted = useCallback(() => {
     const toggleToMute = !groupCall.isLocalVideoMuted();
     groupCall.setLocalVideoMuted(toggleToMute);
+    groupCallOTelMembership?.onToggleLocalVideoMuted(toggleToMute);
+    // TODO: These explict posthog calls should be unnecessary now with the posthog otel exporter?
     PosthogAnalytics.instance.eventMuteCamera.track(
       toggleToMute,
       groupCall.groupCallId
@@ -367,6 +518,7 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
   const setMicrophoneMuted = useCallback(
     (setMuted) => {
       groupCall.setMicrophoneMuted(setMuted);
+      groupCallOTelMembership?.onSetMicrophoneMuted(setMuted);
       PosthogAnalytics.instance.eventMuteMicrophone.track(
         setMuted,
         groupCall.groupCallId
@@ -377,10 +529,13 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
 
   const toggleMicrophoneMuted = useCallback(() => {
     const toggleToMute = !groupCall.isMicrophoneMuted();
+    groupCallOTelMembership?.onToggleMicrophoneMuted(toggleToMute);
     setMicrophoneMuted(toggleToMute);
   }, [groupCall, setMicrophoneMuted]);
 
   const toggleScreensharing = useCallback(async () => {
+    groupCallOTelMembership?.onToggleScreensharing(!groupCall.isScreensharing);
+
     if (!groupCall.isScreensharing()) {
       // toggling on
       updateState({ requestingScreenshare: true });
@@ -481,7 +636,7 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
     error,
     initLocalCallFeed,
     enter,
-    leave,
+    leave: leaveCall,
     toggleLocalVideoMuted,
     toggleMicrophoneMuted,
     toggleScreensharing,
@@ -493,5 +648,6 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
     participants,
     hasLocalParticipant,
     unencryptedEventsFromUsers,
+    otelGroupCallMembership: groupCallOTelMembership,
   };
 }

src/room/useLoadGroupCall.ts

@@ -32,7 +32,9 @@ import { isLocalRoomId, createRoom, roomNameFromRoomId } from "../matrix-utils";
 import { translatedError } from "../TranslatedError";
 import { widget } from "../widget";
 
-interface GroupCallLoadState {
+const STATS_COLLECT_INTERVAL_TIME_MS = 10000;
+
+export interface GroupCallLoadState {
   loading: boolean;
   error?: Error;
   groupCall?: GroupCall;
@@ -94,10 +96,13 @@ export const useLoadGroupCall = (
     const fetchOrCreateGroupCall = async (): Promise<GroupCall> => {
       const room = await fetchOrCreateRoom();
       logger.debug(`Fetched / joined room ${roomIdOrAlias}`);
-      const groupCall = client.getGroupCallForRoom(room.roomId);
+      let groupCall = client.getGroupCallForRoom(room.roomId);
       logger.debug("Got group call", groupCall?.groupCallId);
 
-      if (groupCall) return groupCall;
+      if (groupCall) {
+        groupCall.setGroupCallStatsInterval(STATS_COLLECT_INTERVAL_TIME_MS);
+        return groupCall;
+      }
 
       if (
         !widget &&
@@ -112,12 +117,14 @@ export const useLoadGroupCall = (
             createPtt ? "PTT" : "video"
           } call`
         );
-        return await client.createGroupCall(
+        groupCall = await client.createGroupCall(
           room.roomId,
           createPtt ? GroupCallType.Voice : GroupCallType.Video,
           createPtt,
           GroupCallIntent.Room
         );
+        groupCall.setGroupCallStatsInterval(STATS_COLLECT_INTERVAL_TIME_MS);
+        return groupCall;
       }
 
       // We don't have permission to create the call, so all we can do is wait
@@ -126,6 +133,7 @@ export const useLoadGroupCall = (
         const onGroupCallIncoming = (groupCall: GroupCall) => {
           if (groupCall?.room.roomId === room.roomId) {
             clearTimeout(timeout);
+            groupCall.setGroupCallStatsInterval(STATS_COLLECT_INTERVAL_TIME_MS);
             client.off(
               GroupCallEventHandlerEvent.Incoming,
               onGroupCallIncoming

src/settings/FeedbackSettingsTab.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,28 +14,22 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useEffect } from "react";
+import React, { useCallback } from "react";
 import { randomString } from "matrix-js-sdk/src/randomstring";
 import { useTranslation } from "react-i18next";
 
-import { Modal, ModalContent } from "../Modal";
 import { Button } from "../button";
 import { FieldRow, InputField, ErrorMessage } from "../input/Input";
-import {
-  useSubmitRageshake,
-  useRageshakeRequest,
-} from "../settings/submit-rageshake";
+import { useSubmitRageshake, useRageshakeRequest } from "./submit-rageshake";
 import { Body } from "../typography/Typography";
+import styles from "../input/SelectInput.module.css";
+import feedbackStyles from "../input/FeedbackInput.module.css";
 
 interface Props {
-  inCall: boolean;
-  roomId: string;
-  onClose?: () => void;
-  // TODO: add all props for for <Modal>
-  [index: string]: unknown;
+  roomId?: string;
 }
 
-export function FeedbackModal({ inCall, roomId, onClose, ...rest }: Props) {
+export function FeedbackSettingsTab({ roomId }: Props) {
   const { t } = useTranslation();
   const { submitRageshake, sending, sent, error } = useSubmitRageshake();
   const sendRageshakeRequest = useRageshakeRequest();
@@ -57,37 +51,36 @@ export function FeedbackModal({ inCall, roomId, onClose, ...rest }: Props) {
         roomId,
       });
 
-      if (inCall && sendLogs) {
+      if (roomId && sendLogs) {
         sendRageshakeRequest(roomId, rageshakeRequestId);
       }
     },
-    [inCall, submitRageshake, roomId, sendRageshakeRequest]
+    [submitRageshake, roomId, sendRageshakeRequest]
   );
 
-  useEffect(() => {
-    if (sent) {
-      onClose();
-    }
-  }, [sent, onClose]);
-
   return (
-    <Modal
-      title={t("Submit feedback")}
-      isDismissable
-      onClose={onClose}
-      {...rest}
-    >
-      <ModalContent>
-        <Body>{t("Having trouble? Help us fix it.")}</Body>
-        <form onSubmit={onSubmitFeedback}>
-          <FieldRow>
-            <InputField
-              id="description"
-              name="description"
-              label={t("Description (optional)")}
-              type="textarea"
-            />
-          </FieldRow>
+    <div>
+      <h4 className={styles.label}>{t("Submit feedback")}</h4>
+      <Body>
+        {t(
+          "If you are experiencing issues or simply would like to provide some feedback, please send us a short description below."
+        )}
+      </Body>
+      <form onSubmit={onSubmitFeedback}>
+        <FieldRow>
+          <InputField
+            className={feedbackStyles.feedback}
+            id="description"
+            name="description"
+            label={t("Your feedback")}
+            placeholder={t("Your feedback")}
+            type="textarea"
+            disabled={sending || sent}
+          />
+        </FieldRow>
+        {sent ? (
+          <Body> {t("Thanks, we received your feedback!")}</Body>
+        ) : (
           <FieldRow>
             <InputField
               id="sendLogs"
@@ -96,19 +89,17 @@ export function FeedbackModal({ inCall, roomId, onClose, ...rest }: Props) {
               type="checkbox"
               defaultChecked
             />
-          </FieldRow>
-          {error && (
-            <FieldRow>
-              <ErrorMessage error={error} />
-            </FieldRow>
-          )}
-          <FieldRow>
+            {error && (
+              <FieldRow>
+                <ErrorMessage error={error} />
+              </FieldRow>
+            )}
             <Button type="submit" disabled={sending}>
-              {sending ? t("Submitting feedback…") : t("Submit feedback")}
+              {sending ? t("Submitting…") : t("Submit")}
             </Button>
           </FieldRow>
-        </form>
-      </ModalContent>
-    </Modal>
+        )}
+      </form>
+    </div>
   );
 }

src/settings/ProfileSettingsTab.module.css

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,6 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.content {
+  width: 100%;
+  max-width: 350px;
+  align-self: center;
+}
+
 .avatarFieldRow {
   justify-content: center;
 }

src/settings/ProfileSettingsTab.tsx

@@ -0,0 +1,113 @@
+/*
+Copyright 2022 - 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React, { useCallback, useEffect, useRef } from "react";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { useTranslation } from "react-i18next";
+
+import { useProfile } from "../profile/useProfile";
+import { FieldRow, InputField, ErrorMessage } from "../input/Input";
+import { AvatarInputField } from "../input/AvatarInputField";
+import styles from "./ProfileSettingsTab.module.css";
+
+interface Props {
+  client: MatrixClient;
+}
+export function ProfileSettingsTab({ client }: Props) {
+  const { t } = useTranslation();
+  const { error, displayName, avatarUrl, saveProfile } = useProfile(client);
+
+  const formRef = useRef<HTMLFormElement | null>(null);
+
+  const formChanged = useRef(false);
+  const onFormChange = useCallback(() => {
+    formChanged.current = true;
+  }, []);
+
+  const removeAvatar = useRef(false);
+  const onRemoveAvatar = useCallback(() => {
+    removeAvatar.current = true;
+    formChanged.current = true;
+  }, []);
+
+  useEffect(() => {
+    const form = formRef.current!;
+    // Auto-save when the user dismisses this component
+    return () => {
+      if (formChanged.current) {
+        const data = new FormData(form);
+        const displayNameDataEntry = data.get("displayName");
+        const avatar = data.get("avatar");
+
+        const avatarSize =
+          typeof avatar == "string" ? avatar.length : avatar?.size ?? 0;
+        const displayName =
+          typeof displayNameDataEntry == "string"
+            ? displayNameDataEntry
+            : displayNameDataEntry?.name ?? null;
+
+        saveProfile({
+          displayName,
+          avatar: avatar && avatarSize > 0 ? avatar : undefined,
+          removeAvatar: removeAvatar.current && (!avatar || avatarSize === 0),
+        });
+      }
+    };
+  }, [saveProfile]);
+
+  return (
+    <form onChange={onFormChange} ref={formRef} className={styles.content}>
+      <FieldRow className={styles.avatarFieldRow}>
+        <AvatarInputField
+          id="avatar"
+          name="avatar"
+          label={t("Avatar")}
+          avatarUrl={avatarUrl}
+          displayName={displayName}
+          onRemoveAvatar={onRemoveAvatar}
+        />
+      </FieldRow>
+      <FieldRow>
+        <InputField
+          id="userId"
+          name="userId"
+          label={t("Username")}
+          type="text"
+          disabled
+          value={client.getUserId()!}
+        />
+      </FieldRow>
+      <FieldRow>
+        <InputField
+          id="displayName"
+          name="displayName"
+          label={t("Display name")}
+          type="text"
+          required
+          autoComplete="off"
+          placeholder={t("Display name")}
+          defaultValue={displayName}
+          data-testid="profile_displayname"
+        />
+      </FieldRow>
+      {error && (
+        <FieldRow>
+          <ErrorMessage error={error} />
+        </FieldRow>
+      )}
+    </form>
+  );
+}

src/settings/SettingsModal.module.css

@@ -19,8 +19,12 @@ limitations under the License.
   height: 480px;
 }
 
+.settingsModal p {
+  color: var(--secondary-content);
+}
+
 .tabContainer {
-  margin: 27px 16px;
+  padding: 27px 20px;
 }
 
 .fieldRowText {

src/settings/SettingsModal.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 New Vector Ltd
+Copyright 2022 - 2023 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,9 +14,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from "react";
+import React, { useCallback, useState } from "react";
 import { Item } from "@react-stately/collections";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
+import { MatrixClient } from "matrix-js-sdk";
 
 import { Modal } from "../Modal";
 import styles from "./SettingsModal.module.css";
@@ -25,33 +26,41 @@ import { ReactComponent as AudioIcon } from "../icons/Audio.svg";
 import { ReactComponent as VideoIcon } from "../icons/Video.svg";
 import { ReactComponent as DeveloperIcon } from "../icons/Developer.svg";
 import { ReactComponent as OverflowIcon } from "../icons/Overflow.svg";
+import { ReactComponent as UserIcon } from "../icons/User.svg";
+import { ReactComponent as FeedbackIcon } from "../icons/Feedback.svg";
 import { SelectInput } from "../input/SelectInput";
 import { MediaDevicesState } from "./mediaDevices";
 import {
-  useKeyboardShortcuts,
-  useSpatialAudio,
   useShowInspector,
   useOptInAnalytics,
-  canEnableSpatialAudio,
+  useNewGrid,
+  useDeveloperSettingsTab,
 } from "./useSetting";
 import { FieldRow, InputField } from "../input/Input";
 import { Button } from "../button";
 import { useDownloadDebugLog } from "./submit-rageshake";
-import { Body } from "../typography/Typography";
+import { Body, Caption } from "../typography/Typography";
+import { AnalyticsNotice } from "../analytics/AnalyticsNotice";
+import { ProfileSettingsTab } from "./ProfileSettingsTab";
+import { FeedbackSettingsTab } from "./FeedbackSettingsTab";
 
 interface Props {
   mediaDevices: MediaDevicesState;
   isOpen: boolean;
+  client: MatrixClient;
+  roomId?: string;
+  defaultTab?: string;
   onClose: () => void;
 }
 
 export const SettingsModal = (props: Props) => {
   const { t } = useTranslation();
 
-  const [spatialAudio, setSpatialAudio] = useSpatialAudio();
   const [showInspector, setShowInspector] = useShowInspector();
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
-  const [keyboardShortcuts, setKeyboardShortcuts] = useKeyboardShortcuts();
+  const [developerSettingsTab, setDeveloperSettingsTab] =
+    useDeveloperSettingsTab();
+  const [newGrid, setNewGrid] = useNewGrid();
 
   const downloadDebugLog = useDownloadDebugLog();
 
@@ -79,6 +88,26 @@ export const SettingsModal = (props: Props) => {
     );
   };
 
+  const [selectedTab, setSelectedTab] = useState<string | undefined>();
+
+  const onSelectedTabChanged = useCallback(
+    (tab) => {
+      setSelectedTab(tab);
+    },
+    [setSelectedTab]
+  );
+
+  const optInDescription = (
+    <Caption>
+      <Trans>
+        <AnalyticsNotice />
+        <br />
+        You may withdraw consent by unchecking this box. If you are currently in
+        a call, this setting will take effect at the end of the call.
+      </Trans>
+    </Caption>
+  );
+
   return (
     <Modal
       title={t("Settings")}
@@ -87,38 +116,25 @@ export const SettingsModal = (props: Props) => {
       className={styles.settingsModal}
       {...props}
     >
-      <TabContainer className={styles.tabContainer}>
+      <TabContainer
+        onSelectionChange={onSelectedTabChanged}
+        selectedKey={selectedTab ?? props.defaultTab ?? "audio"}
+        className={styles.tabContainer}
+      >
         <TabItem
+          key="audio"
           title={
             <>
               <AudioIcon width={16} height={16} />
-              <span>{t("Audio")}</span>
+              <span className={styles.tabLabel}>{t("Audio")}</span>
             </>
           }
         >
           {generateDeviceSelection("audioinput", t("Microphone"))}
           {generateDeviceSelection("audiooutput", t("Speaker"))}
-          <FieldRow>
-            <InputField
-              id="spatialAudio"
-              label={t("Spatial audio")}
-              type="checkbox"
-              checked={spatialAudio}
-              disabled={!canEnableSpatialAudio()}
-              description={
-                canEnableSpatialAudio()
-                  ? t(
-                      "This will make a speaker's audio seem as if it is coming from where their tile is positioned on screen. (Experimental feature: this may impact the stability of audio.)"
-                    )
-                  : t("This feature is only supported on Firefox.")
-              }
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                setSpatialAudio(event.target.checked)
-              }
-            />
-          </FieldRow>
         </TabItem>
         <TabItem
+          key="video"
           title={
             <>
               <VideoIcon width={16} height={16} />
@@ -129,75 +145,114 @@ export const SettingsModal = (props: Props) => {
           {generateDeviceSelection("videoinput", t("Camera"))}
         </TabItem>
         <TabItem
+          key="profile"
           title={
             <>
-              <OverflowIcon width={16} height={16} />
-              <span>{t("Advanced")}</span>
+              <UserIcon width={15} height={15} />
+              <span>{t("Profile")}</span>
             </>
           }
         >
+          <ProfileSettingsTab client={props.client} />
+        </TabItem>
+        <TabItem
+          key="feedback"
+          title={
+            <>
+              <FeedbackIcon width={16} height={16} />
+              <span>{t("Feedback")}</span>
+            </>
+          }
+        >
+          <FeedbackSettingsTab roomId={props.roomId} />
+        </TabItem>
+        <TabItem
+          key="more"
+          title={
+            <>
+              <OverflowIcon width={16} height={16} />
+              <span>{t("More")}</span>
+            </>
+          }
+        >
+          <h4>Developer</h4>
+          <p>
+            Version: {(import.meta.env.VITE_APP_VERSION as string) || "dev"}
+          </p>
+          <FieldRow>
+            <InputField
+              id="developerSettingsTab"
+              type="checkbox"
+              checked={developerSettingsTab}
+              label={t("Developer Settings")}
+              description={t(
+                "Expose developer settings in the settings window."
+              )}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setDeveloperSettingsTab(event.target.checked)
+              }
+            />
+          </FieldRow>
+          <h4>Analytics</h4>
           <FieldRow>
             <InputField
               id="optInAnalytics"
-              label={t("Allow analytics")}
               type="checkbox"
               checked={optInAnalytics}
-              description={t(
-                "This will send anonymised data (such as the duration of a call and the number of participants) to the Element Call team to help us optimise the application based on how it is used."
-              )}
+              description={optInDescription}
               onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
                 setOptInAnalytics(event.target.checked)
               }
             />
           </FieldRow>
-          <FieldRow>
-            <InputField
-              id="keyboardShortcuts"
-              label={t("Single-key keyboard shortcuts")}
-              type="checkbox"
-              checked={keyboardShortcuts}
-              description={t(
-                "Whether to enable single-key keyboard shortcuts, e.g. 'm' to mute/unmute the mic."
-              )}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                setKeyboardShortcuts(event.target.checked)
-              }
-            />
-          </FieldRow>
-        </TabItem>
-        <TabItem
-          title={
-            <>
-              <DeveloperIcon width={16} height={16} />
-              <span>{t("Developer")}</span>
-            </>
-          }
-        >
-          <FieldRow>
-            <Body className={styles.fieldRowText}>
-              {t("Version: {{version}}", {
-                version: import.meta.env.VITE_APP_VERSION || "dev",
-              })}
-            </Body>
-          </FieldRow>
-          <FieldRow>
-            <InputField
-              id="showInspector"
-              name="inspector"
-              label={t("Show call inspector")}
-              type="checkbox"
-              checked={showInspector}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                setShowInspector(e.target.checked)
-              }
-            />
-          </FieldRow>
-          <FieldRow>
-            <Button onPress={downloadDebugLog}>
-              {t("Download debug logs")}
-            </Button>
-          </FieldRow>
         </TabItem>
+        {developerSettingsTab && (
+          <TabItem
+            key="developer"
+            title={
+              <>
+                <DeveloperIcon width={16} height={16} />
+                <span>{t("Developer")}</span>
+              </>
+            }
+          >
+            <FieldRow>
+              <Body className={styles.fieldRowText}>
+                {t("Version: {{version}}", {
+                  version: import.meta.env.VITE_APP_VERSION || "dev",
+                })}
+              </Body>
+            </FieldRow>
+            <FieldRow>
+              <InputField
+                id="showInspector"
+                name="inspector"
+                label={t("Show call inspector")}
+                type="checkbox"
+                checked={showInspector}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setShowInspector(e.target.checked)
+                }
+              />
+            </FieldRow>
+            <FieldRow>
+              <InputField
+                id="newGrid"
+                label={t("Use the upcoming grid system")}
+                type="checkbox"
+                checked={newGrid}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                  setNewGrid(e.target.checked)
+                }
+              />
+            </FieldRow>
+            <FieldRow>
+              <Button onPress={downloadDebugLog}>
+                {t("Download debug logs")}
+              </Button>
+            </FieldRow>
+          </TabItem>
+        )}
       </TabContainer>
     </Modal>
   );

src/settings/submit-rageshake.ts

@@ -25,6 +25,14 @@ import { useClient } from "../ClientContext";
 import { InspectorContext } from "../room/GroupCallInspector";
 import { useModalTriggerState } from "../Modal";
 import { Config } from "../config/Config";
+import { ElementCallOpenTelemetry } from "../otel/otel";
+
+const gzip = (text: string): Blob => {
+  // encode as UTF-8
+  const buf = new TextEncoder().encode(text);
+  // compress
+  return new Blob([pako.gzip(buf)]);
+};
 
 interface RageShakeSubmitOptions {
   sendLogs: boolean;
@@ -235,14 +243,15 @@ export function useSubmitRageshake(): {
           const logs = await getLogsForReport();
 
           for (const entry of logs) {
-            // encode as UTF-8
-            let buf = new TextEncoder().encode(entry.lines);
-            // compress
-            buf = pako.gzip(buf);
-
-            body.append("compressed-log", new Blob([buf]), entry.id);
+            body.append("compressed-log", gzip(entry.lines), entry.id);
           }
 
+          body.append(
+            "file",
+            gzip(ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump()),
+            "traces.json.gz"
+          );
+
           if (inspectorState) {
             body.append(
               "file",

src/settings/useSetting.ts

@@ -17,6 +17,11 @@ limitations under the License.
 import { EventEmitter } from "events";
 import { useMemo, useState, useEffect, useCallback } from "react";
 
+import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
+
+type Setting<T> = [T, (value: T) => void];
+type DisableableSetting<T> = [T, ((value: T) => void) | null];
+
 // Bus to notify other useSetting consumers when a setting is changed
 export const settingsBus = new EventEmitter();
 
@@ -24,10 +29,7 @@ const getSettingKey = (name: string): string => {
   return `matrix-setting-${name}`;
 };
 // Like useState, but reads from and persists the value to localStorage
-const useSetting = <T>(
-  name: string,
-  defaultValue: T
-): [T, (value: T) => void] => {
+const useSetting = <T>(name: string, defaultValue: T): Setting<T> => {
   const key = useMemo(() => getSettingKey(name), [name]);
 
   const [value, setValue] = useState<T>(() => {
@@ -65,7 +67,7 @@ export const setSetting = <T>(name: string, newValue: T) => {
   settingsBus.emit(name, newValue);
 };
 
-export const canEnableSpatialAudio = () => {
+const canEnableSpatialAudio = () => {
   const { userAgent } = navigator;
   // Spatial audio means routing audio through audio contexts. On Chrome,
   // this bypasses the AEC processor and so breaks echo cancellation.
@@ -79,14 +81,24 @@ export const canEnableSpatialAudio = () => {
   return userAgent.includes("Firefox");
 };
 
-export const useSpatialAudio = (): [boolean, (val: boolean) => void] => {
+export const useSpatialAudio = (): DisableableSetting<boolean> => {
   const settingVal = useSetting("spatial-audio", false);
   if (canEnableSpatialAudio()) return settingVal;
 
-  return [false, (_: boolean) => {}];
+  return [false, null];
 };
 
 export const useShowInspector = () => useSetting("show-inspector", false);
-export const useOptInAnalytics = () => useSetting("opt-in-analytics", false);
-export const useKeyboardShortcuts = () =>
-  useSetting("keyboard-shortcuts", true);
+
+// null = undecided
+export const useOptInAnalytics = (): DisableableSetting<boolean | null> => {
+  const settingVal = useSetting<boolean | null>("opt-in-analytics", null);
+  if (PosthogAnalytics.instance.isEnabled()) return settingVal;
+
+  return [false, null];
+};
+
+export const useNewGrid = () => useSetting("new-grid", false);
+
+export const useDeveloperSettingsTab = () =>
+  useSetting("developer-settings-tab", false);

src/tabs/Tabs.module.css

@@ -25,12 +25,14 @@ limitations under the License.
   list-style: none;
   padding: 0;
   margin: 0 auto 24px auto;
+  gap: 16px;
+  overflow: scroll;
+  max-width: 100%;
 }
 
 .tab {
-  max-width: 190px;
-  min-width: fit-content;
   height: 32px;
+  box-sizing: border-box;
   border-radius: 8px;
   background-color: transparent;
   display: flex;
@@ -38,6 +40,7 @@ limitations under the License.
   padding: 0 8px;
   border: none;
   cursor: pointer;
+  font-size: var(--font-size-body);
 }
 
 .tab > * {
@@ -78,22 +81,26 @@ limitations under the License.
 
 @media (min-width: 800px) {
   .tab {
+    width: 200px;
     padding: 0 16px;
   }
 
   .tab > * {
-    margin: 0 16px 0 0;
+    margin: 0 12px 0 0;
   }
 
   .tabContainer {
     width: 100%;
     flex-direction: row;
-    margin: 27px 16px;
+    padding: 20px 18px;
+    box-sizing: border-box;
+    overflow: hidden;
   }
 
   .tabList {
     flex-direction: column;
     margin-bottom: 0;
+    gap: 0;
   }
 
   .tabPanel {

src/useCallViewKeyboardShortcuts.ts

@@ -14,47 +14,55 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useCallback, useState } from "react";
+import { RefObject, useCallback, useRef } from "react";
 
-import { getSetting } from "./settings/useSetting";
 import { useEventTarget } from "./useEvents";
 
+/**
+ * Determines whether focus is in the same part of the tree as the given
+ * element (specifically, if an ancestor or descendant of it is focused).
+ */
+const mayReceiveKeyEvents = (e: HTMLElement): boolean => {
+  const focusedElement = document.activeElement;
+  return (
+    focusedElement !== null &&
+    (focusedElement.contains(e) || e.contains(focusedElement))
+  );
+};
+
 export function useCallViewKeyboardShortcuts(
-  enabled: boolean,
+  focusElement: RefObject<HTMLElement | null>,
   toggleMicrophoneMuted: () => void,
   toggleLocalVideoMuted: () => void,
   setMicrophoneMuted: (muted: boolean) => void
 ) {
-  const [spacebarHeld, setSpacebarHeld] = useState(false);
+  const spacebarHeld = useRef(false);
+
+  // These event handlers are set on the window because we want users to be able
+  // to trigger them without going to the trouble of focusing something
 
   useEventTarget(
     window,
     "keydown",
     useCallback(
       (event: KeyboardEvent) => {
-        if (!enabled) return;
-        // Check if keyboard shortcuts are enabled
-        const keyboardShortcuts = getSetting("keyboard-shortcuts", true);
-        if (!keyboardShortcuts) {
-          return;
-        }
+        if (focusElement.current === null) return;
+        if (!mayReceiveKeyEvents(focusElement.current)) return;
 
         if (event.key === "m") {
           toggleMicrophoneMuted();
         } else if (event.key == "v") {
           toggleLocalVideoMuted();
-        } else if (event.key === " " && !spacebarHeld) {
-          setSpacebarHeld(true);
+        } else if (event.key === " " && !spacebarHeld.current) {
+          spacebarHeld.current = true;
           setMicrophoneMuted(false);
         }
       },
       [
-        enabled,
-        spacebarHeld,
+        focusElement,
         toggleLocalVideoMuted,
         toggleMicrophoneMuted,
         setMicrophoneMuted,
-        setSpacebarHeld,
       ]
     )
   );
@@ -64,19 +72,15 @@ export function useCallViewKeyboardShortcuts(
     "keyup",
     useCallback(
       (event: KeyboardEvent) => {
-        if (!enabled) return;
-        // Check if keyboard shortcuts are enabled
-        const keyboardShortcuts = getSetting("keyboard-shortcuts", true);
-        if (!keyboardShortcuts) {
-          return;
-        }
+        if (focusElement.current === null) return;
+        if (!mayReceiveKeyEvents(focusElement.current)) return;
 
         if (event.key === " ") {
-          setSpacebarHeld(false);
+          spacebarHeld.current = false;
           setMicrophoneMuted(true);
         }
       },
-      [enabled, setMicrophoneMuted, setSpacebarHeld]
+      [focusElement, setMicrophoneMuted]
     )
   );
 
@@ -84,10 +88,10 @@ export function useCallViewKeyboardShortcuts(
     window,
     "blur",
     useCallback(() => {
-      if (spacebarHeld) {
-        setSpacebarHeld(false);
+      if (spacebarHeld.current) {
+        spacebarHeld.current = false;
         setMicrophoneMuted(true);
       }
-    }, [setMicrophoneMuted, setSpacebarHeld, spacebarHeld])
+    }, [setMicrophoneMuted, spacebarHeld])
   );
 }

src/useMergedRefs.ts

@@ -0,0 +1,39 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { MutableRefObject, RefCallback, useCallback } from "react";
+
+/**
+ * Combines multiple refs into one, useful for attaching multiple refs to the
+ * same DOM node.
+ */
+export const useMergedRefs = <T>(
+  ...refs: (MutableRefObject<T | null> | RefCallback<T | null>)[]
+): RefCallback<T | null> =>
+  useCallback(
+    (value) =>
+      refs.forEach((ref) => {
+        if (typeof ref === "function") {
+          ref(value);
+        } else {
+          ref.current = value;
+        }
+      }),
+    // Since this isn't an array literal, we can't use the static dependency
+    // checker, but that's okay
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    refs
+  );

src/useReactiveState.ts

@@ -0,0 +1,67 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import {
+  DependencyList,
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useRef,
+  useState,
+} from "react";
+
+/**
+ * Hook creating a stateful value that updates automatically whenever the
+ * dependencies change. Or equivalently, a version of useMemo that takes its own
+ * previous value as an input, and can be updated manually.
+ */
+export const useReactiveState = <T>(
+  updateFn: (prevState?: T) => T,
+  deps: DependencyList
+): [T, Dispatch<SetStateAction<T>>] => {
+  const state = useRef<T>();
+  if (state.current === undefined) state.current = updateFn();
+  const prevDeps = useRef<DependencyList>();
+
+  // Since we store the state in a ref, we use this counter to force an update
+  // when someone calls setState
+  const [, setNumUpdates] = useState(0);
+
+  // If this is the first render or the deps have changed, recalculate the state
+  if (
+    prevDeps.current === undefined ||
+    deps.length !== prevDeps.current.length ||
+    deps.some((d, i) => d !== prevDeps.current![i])
+  ) {
+    state.current = updateFn(state.current);
+  }
+  prevDeps.current = deps;
+
+  return [
+    state.current,
+    useCallback(
+      (action) => {
+        if (typeof action === "function") {
+          state.current = (action as (prevValue: T) => T)(state.current!);
+        } else {
+          state.current = action;
+        }
+        setNumUpdates((n) => n + 1); // Force an update
+      },
+      [setNumUpdates]
+    ),
+  ];
+};

src/video-grid/NewVideoGrid.module.css

@@ -0,0 +1,48 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.grid {
+  contain: strict;
+  position: relative;
+  flex-grow: 1;
+  padding: 0 20px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.slotGrid {
+  position: relative;
+  display: grid;
+  grid-auto-rows: 163px;
+  gap: 8px;
+  padding-bottom: var(--footerHeight);
+}
+
+.slot {
+  contain: strict;
+}
+
+@media (min-width: 800px) {
+  .grid {
+    padding: 0 22px;
+  }
+
+  .slotGrid {
+    grid-auto-rows: 183px;
+    column-gap: 18px;
+    row-gap: 21px;
+  }
+}

src/video-grid/NewVideoGrid.tsx

@@ -0,0 +1,470 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { SpringRef, TransitionFn, useTransition } from "@react-spring/web";
+import { EventTypes, Handler, useScroll } from "@use-gesture/react";
+import React, {
+  Dispatch,
+  FC,
+  ReactNode,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import useMeasure from "react-use-measure";
+import { zipWith } from "lodash";
+
+import styles from "./NewVideoGrid.module.css";
+import {
+  VideoGridProps as Props,
+  TileSpring,
+  TileDescriptor,
+} from "./VideoGrid";
+import { useReactiveState } from "../useReactiveState";
+import { useMergedRefs } from "../useMergedRefs";
+import {
+  Grid,
+  Cell,
+  row,
+  column,
+  fillGaps,
+  forEachCellInArea,
+  cycleTileSize,
+  appendItems,
+} from "./model";
+
+interface GridState extends Grid {
+  /**
+   * The ID of the current state of the grid.
+   */
+  generation: number;
+}
+
+const useGridState = (
+  columns: number | null,
+  items: TileDescriptor<unknown>[]
+): [GridState | null, Dispatch<SetStateAction<Grid>>] => {
+  const [grid, setGrid_] = useReactiveState<GridState | null>(
+    (prevGrid = null) => {
+      if (prevGrid === null) {
+        // We can't do anything if the column count isn't known yet
+        if (columns === null) {
+          return null;
+        } else {
+          prevGrid = { generation: 0, columns, cells: [] };
+        }
+      }
+
+      // Step 1: Update tiles that still exist, and remove tiles that have left
+      // the grid
+      const itemsById = new Map(items.map((i) => [i.id, i]));
+      const grid1: Grid = {
+        ...prevGrid,
+        cells: prevGrid.cells.map((c) => {
+          if (c === undefined) return undefined;
+          const item = itemsById.get(c.item.id);
+          return item === undefined ? undefined : { ...c, item };
+        }),
+      };
+
+      // Step 2: Backfill gaps left behind by removed tiles
+      const grid2 = fillGaps(grid1);
+
+      // Step 3: Add new tiles to the end of the grid
+      const existingItemIds = new Set(
+        grid2.cells.filter((c) => c !== undefined).map((c) => c!.item.id)
+      );
+      const newItems = items.filter((i) => !existingItemIds.has(i.id));
+      const grid3 = appendItems(newItems, grid2);
+
+      return { ...grid3, generation: prevGrid.generation + 1 };
+    },
+    [columns, items]
+  );
+
+  const setGrid: Dispatch<SetStateAction<Grid>> = useCallback(
+    (action) => {
+      if (typeof action === "function") {
+        setGrid_((prevGrid) =>
+          prevGrid === null
+            ? null
+            : {
+                ...(action as (prev: Grid) => Grid)(prevGrid),
+                generation: prevGrid.generation + 1,
+              }
+        );
+      } else {
+        setGrid_((prevGrid) => ({
+          ...action,
+          generation: prevGrid?.generation ?? 1,
+        }));
+      }
+    },
+    [setGrid_]
+  );
+
+  return [grid, setGrid];
+};
+
+interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+interface Tile extends Rect {
+  item: TileDescriptor<unknown>;
+}
+
+interface DragState {
+  tileId: string;
+  tileX: number;
+  tileY: number;
+  cursorX: number;
+  cursorY: number;
+}
+
+/**
+ * An interactive, animated grid of video tiles.
+ */
+export const NewVideoGrid: FC<Props<unknown>> = ({
+  items,
+  disableAnimations,
+  children,
+}) => {
+  // Overview: This component lays out tiles by rendering an invisible template
+  // grid of "slots" for tiles to go in. Once rendered, it uses the DOM API to
+  // get the dimensions of each slot, feeding these numbers back into
+  // react-spring to let the actual tiles move freely atop the template.
+
+  // To know when the rendered grid becomes consistent with the layout we've
+  // requested, we give it a data-generation attribute which holds the ID of the
+  // most recently rendered generation of the grid, and watch it with a
+  // MutationObserver.
+
+  const [slotGrid, setSlotGrid] = useState<HTMLDivElement | null>(null);
+  const [slotGridGeneration, setSlotGridGeneration] = useState(0);
+
+  useEffect(() => {
+    if (slotGrid !== null) {
+      setSlotGridGeneration(
+        parseInt(slotGrid.getAttribute("data-generation")!)
+      );
+
+      const observer = new MutationObserver((mutations) => {
+        if (mutations.some((m) => m.type === "attributes")) {
+          setSlotGridGeneration(
+            parseInt(slotGrid.getAttribute("data-generation")!)
+          );
+        }
+      });
+
+      observer.observe(slotGrid, { attributes: true });
+      return () => observer.disconnect();
+    }
+  }, [slotGrid, setSlotGridGeneration]);
+
+  const [gridRef1, gridBounds] = useMeasure();
+  const gridRef2 = useRef<HTMLDivElement | null>(null);
+  const gridRef = useMergedRefs(gridRef1, gridRef2);
+
+  const slotRects = useMemo(() => {
+    if (slotGrid === null) return [];
+
+    const slots = slotGrid.getElementsByClassName(styles.slot);
+    const rects = new Array<Rect>(slots.length);
+    for (let i = 0; i < slots.length; i++) {
+      const slot = slots[i] as HTMLElement;
+      rects[i] = {
+        x: slot.offsetLeft,
+        y: slot.offsetTop,
+        width: slot.offsetWidth,
+        height: slot.offsetHeight,
+      };
+    }
+
+    return rects;
+    // The rects may change due to the grid being resized or rerendered, but
+    // eslint can't statically verify this
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [slotGrid, slotGridGeneration, gridBounds]);
+
+  const [columns] = useReactiveState<number | null>(
+    // Since grid resizing isn't implemented yet, pick a column count on mount
+    // and stick to it
+    (prevColumns) =>
+      prevColumns !== undefined && prevColumns !== null
+        ? prevColumns
+        : // The grid bounds might not be known yet
+        gridBounds.width === 0
+        ? null
+        : Math.max(2, Math.floor(gridBounds.width * 0.0045)),
+    [gridBounds]
+  );
+
+  const [grid, setGrid] = useGridState(columns, items);
+
+  const [tiles] = useReactiveState<Tile[]>(
+    (prevTiles) => {
+      // If React hasn't yet rendered the current generation of the grid, skip
+      // the update, because grid and slotRects will be out of sync
+      if (slotGridGeneration !== grid?.generation) return prevTiles ?? [];
+
+      const tileCells = grid.cells.filter((c) => c?.origin) as Cell[];
+      const tileRects = new Map<TileDescriptor<unknown>, Rect>(
+        zipWith(tileCells, slotRects, (cell, rect) => [cell.item, rect])
+      );
+      return items.map((item) => ({ ...tileRects.get(item)!, item }));
+    },
+    [slotRects, grid, slotGridGeneration]
+  );
+
+  // Drag state is stored in a ref rather than component state, because we use
+  // react-spring's imperative API during gestures to improve responsiveness
+  const dragState = useRef<DragState | null>(null);
+
+  const [tileTransitions, springRef] = useTransition(
+    tiles,
+    () => ({
+      key: ({ item }: Tile) => item.id,
+      from: ({ x, y, width, height }: Tile) => ({
+        opacity: 0,
+        scale: 0,
+        shadow: 1,
+        shadowSpread: 0,
+        zIndex: 1,
+        x,
+        y,
+        width,
+        height,
+        immediate: disableAnimations,
+      }),
+      enter: { opacity: 1, scale: 1, immediate: disableAnimations },
+      update: ({ item, x, y, width, height }: Tile) =>
+        item.id === dragState.current?.tileId
+          ? {}
+          : {
+              x,
+              y,
+              width,
+              height,
+              immediate: disableAnimations,
+            },
+      leave: { opacity: 0, scale: 0, immediate: disableAnimations },
+      config: { mass: 0.7, tension: 252, friction: 25 },
+    })
+    // react-spring's types are bugged and can't infer the spring type
+  ) as unknown as [TransitionFn<Tile, TileSpring>, SpringRef<TileSpring>];
+
+  // Because we're using react-spring in imperative mode, we're responsible for
+  // firing animations manually whenever the tiles array updates
+  useEffect(() => {
+    springRef.start();
+  }, [tiles, springRef]);
+
+  const animateDraggedTile = (endOfGesture: boolean) => {
+    const { tileId, tileX, tileY, cursorX, cursorY } = dragState.current!;
+    const tile = tiles.find((t) => t.item.id === tileId)!;
+
+    springRef.start((_i, controller) => {
+      if ((controller.item as Tile).item.id === tileId) {
+        if (endOfGesture) {
+          return {
+            scale: 1,
+            zIndex: 1,
+            shadow: 1,
+            x: tile.x,
+            y: tile.y,
+            width: tile.width,
+            height: tile.height,
+            immediate: disableAnimations || ((key) => key === "zIndex"),
+            // Allow the tile's position to settle before pushing its
+            // z-index back down
+            delay: (key) => (key === "zIndex" ? 500 : 0),
+          };
+        } else {
+          return {
+            scale: 1.1,
+            zIndex: 2,
+            shadow: 15,
+            x: tileX,
+            y: tileY,
+            immediate:
+              disableAnimations ||
+              ((key) => key === "zIndex" || key === "x" || key === "y"),
+          };
+        }
+      } else {
+        return {};
+      }
+    });
+
+    const overTile = tiles.find(
+      (t) =>
+        cursorX >= t.x &&
+        cursorX < t.x + t.width &&
+        cursorY >= t.y &&
+        cursorY < t.y + t.height
+    );
+    if (overTile !== undefined && overTile.item.id !== tileId) {
+      setGrid((g) => ({
+        ...g!,
+        cells: g!.cells.map((c) => {
+          if (c?.item === overTile.item) return { ...c, item: tile.item };
+          if (c?.item === tile.item) return { ...c, item: overTile.item };
+          return c;
+        }),
+      }));
+    }
+  };
+
+  // Callback for useDrag. We could call useDrag here, but the default
+  // pattern of spreading {...bind()} across the children to bind the gesture
+  // ends up breaking memoization and ruining this component's performance.
+  // Instead, we pass this callback to each tile via a ref, to let them bind the
+  // gesture using the much more sensible ref-based method.
+  const onTileDrag = (
+    tileId: string,
+    {
+      tap,
+      initial: [initialX, initialY],
+      delta: [dx, dy],
+      last,
+    }: Parameters<Handler<"drag", EventTypes["drag"]>>[0]
+  ) => {
+    if (tap) {
+      setGrid((g) => cycleTileSize(tileId, g!));
+    } else {
+      const tileSpring = springRef.current
+        .find((c) => (c.item as Tile).item.id === tileId)!
+        .get();
+
+      if (dragState.current === null) {
+        dragState.current = {
+          tileId,
+          tileX: tileSpring.x,
+          tileY: tileSpring.y,
+          cursorX: initialX - gridBounds.x,
+          cursorY: initialY - gridBounds.y + scrollOffset.current,
+        };
+      }
+      dragState.current.tileX += dx;
+      dragState.current.tileY += dy;
+      dragState.current.cursorX += dx;
+      dragState.current.cursorY += dy;
+
+      animateDraggedTile(last);
+
+      if (last) dragState.current = null;
+    }
+  };
+
+  const onTileDragRef = useRef(onTileDrag);
+  onTileDragRef.current = onTileDrag;
+
+  const scrollOffset = useRef(0);
+
+  useScroll(
+    ({ xy: [, y], delta: [, dy] }) => {
+      scrollOffset.current = y;
+
+      if (dragState.current !== null) {
+        dragState.current.tileY += dy;
+        dragState.current.cursorY += dy;
+        animateDraggedTile(false);
+      }
+    },
+    { target: gridRef2 }
+  );
+
+  const slotGridStyle = useMemo(() => {
+    if (grid === null) return {};
+
+    const areas = new Array<(number | null)[]>(
+      Math.ceil(grid.cells.length / grid.columns)
+    );
+    for (let i = 0; i < areas.length; i++)
+      areas[i] = new Array<number | null>(grid.columns).fill(null);
+
+    let slotId = 0;
+    for (let i = 0; i < grid.cells.length; i++) {
+      const cell = grid.cells[i];
+      if (cell?.origin) {
+        const slotEnd = i + cell.columns - 1 + grid.columns * (cell.rows - 1);
+        forEachCellInArea(
+          i,
+          slotEnd,
+          grid,
+          (_c, j) => (areas[row(j, grid)][column(j, grid)] = slotId)
+        );
+        slotId++;
+      }
+    }
+
+    return {
+      gridTemplateAreas: areas
+        .map(
+          (row) =>
+            `'${row
+              .map((slotId) => (slotId === null ? "." : `s${slotId}`))
+              .join(" ")}'`
+        )
+        .join(" "),
+      gridTemplateColumns: `repeat(${columns}, 1fr)`,
+    };
+  }, [grid, columns]);
+
+  const slots = useMemo(() => {
+    const slots = new Array<ReactNode>(items.length);
+    for (let i = 0; i < items.length; i++)
+      slots[i] = (
+        <div className={styles.slot} key={i} style={{ gridArea: `s${i}` }} />
+      );
+    return slots;
+  }, [items.length]);
+
+  // Render nothing if the grid has yet to be generated
+  if (grid === null) {
+    return <div ref={gridRef} className={styles.grid} />;
+  }
+
+  return (
+    <div ref={gridRef} className={styles.grid}>
+      <div
+        style={slotGridStyle}
+        ref={setSlotGrid}
+        className={styles.slotGrid}
+        data-generation={grid.generation}
+      >
+        {slots}
+      </div>
+      {tileTransitions((style, tile) =>
+        children({
+          ...style,
+          key: tile.item.id,
+          targetWidth: tile.width,
+          targetHeight: tile.height,
+          data: tile.item.data,
+          onDragRef: onTileDragRef,
+        })
+      )}
+    </div>
+  );
+};

src/video-grid/VideoGrid.module.css

@@ -19,4 +19,5 @@ limitations under the License.
   overflow: hidden;
   flex: 1;
   touch-action: none;
+  margin-bottom: var(--footerHeight);
 }

src/video-grid/VideoGrid.tsx

@@ -14,11 +14,29 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { Key, useCallback, useEffect, useRef, useState } from "react";
-import { FullGestureState, useDrag, useGesture } from "@use-gesture/react";
-import { Interpolation, SpringValue, useSprings } from "@react-spring/web";
+import React, {
+  Key,
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import {
+  EventTypes,
+  FullGestureState,
+  Handler,
+  useDrag,
+  useGesture,
+} from "@use-gesture/react";
+import {
+  SpringRef,
+  SpringValue,
+  SpringValues,
+  useSprings,
+} from "@react-spring/web";
 import useMeasure from "react-use-measure";
-import { ResizeObserver } from "@juggle/resize-observer";
+import { ResizeObserver as JuggleResizeObserver } from "@juggle/resize-observer";
 import { ReactDOMAttributes } from "@use-gesture/react/dist/declarations/src/types";
 
 import styles from "./VideoGrid.module.css";
@@ -40,6 +58,18 @@ interface Tile<T> {
   focused: boolean;
 }
 
+export interface TileSpring {
+  opacity: number;
+  scale: number;
+  shadow: number;
+  shadowSpread: number;
+  zIndex: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
 type LayoutDirection = "vertical" | "horizontal";
 
 export function useVideoGridLayout(hasScreenshareFeeds: boolean): {
@@ -153,8 +183,16 @@ function getOneOnOneLayoutTilePositions(
   const gridAspectRatio = gridWidth / gridHeight;
 
   const smallPip = gridAspectRatio < 1 || gridWidth < 700;
-  const pipWidth = smallPip ? 114 : 230;
-  const pipHeight = smallPip ? 163 : 155;
+  const maxPipWidth = smallPip ? 114 : 230;
+  const maxPipHeight = smallPip ? 163 : 155;
+  // Cap the PiP size at 1/3 the remote tile size, preserving aspect ratio
+  const pipScaleFactor = Math.min(
+    1,
+    remotePosition.width / 3 / maxPipWidth,
+    remotePosition.height / 3 / maxPipHeight
+  );
+  const pipWidth = maxPipWidth * pipScaleFactor;
+  const pipHeight = maxPipHeight * pipScaleFactor;
   const pipGap = getPipGap(gridAspectRatio, gridWidth);
 
   const pipMinX = remotePosition.x + pipGap;
@@ -689,19 +727,28 @@ interface DragTileData {
   y: number;
 }
 
-interface ChildrenProperties<T> extends ReactDOMAttributes {
+export interface ChildrenProperties<T> extends ReactDOMAttributes {
   key: Key;
   data: T;
-  style: {
-    scale: SpringValue<number>;
-    opacity: SpringValue<number>;
-    boxShadow: Interpolation<number, string>;
-  };
-  width: number;
-  height: number;
+  targetWidth: number;
+  targetHeight: number;
+  opacity: SpringValue<number>;
+  scale: SpringValue<number>;
+  shadow: SpringValue<number>;
+  zIndex: SpringValue<number>;
+  x: SpringValue<number>;
+  y: SpringValue<number>;
+  width: SpringValue<number>;
+  height: SpringValue<number>;
+  onDragRef?: RefObject<
+    (
+      tileId: string,
+      state: Parameters<Handler<"drag", EventTypes["drag"]>>[0]
+    ) => void
+  >;
 }
 
-interface VideoGridProps<T> {
+export interface VideoGridProps<T> {
   items: TileDescriptor<T>[];
   layout: Layout;
   disableAnimations: boolean;
@@ -740,7 +787,13 @@ export function VideoGrid<T>({
   const lastLayoutRef = useRef<Layout>(layout);
   const isMounted = useIsMounted();
 
-  const [gridRef, gridBounds] = useMeasure({ polyfill: ResizeObserver });
+  // The 'polyfill' argument to useMeasure is not a polyfill at all but is the impl that is always used
+  // if passed, whether the browser has native support or not, so pass in either the browser native
+  // version or the ponyfill (yes, pony) because Juggle's resizeobserver ponyfill is being weirdly
+  // buggy for me on my dev env my never updating the size until the window resizes.
+  const [gridRef, gridBounds] = useMeasure({
+    polyfill: window.ResizeObserver ?? JuggleResizeObserver,
+  });
 
   useEffect(() => {
     setTileState(({ tiles, ...rest }) => {
@@ -868,6 +921,8 @@ export function VideoGrid<T>({
       // Whether the tile positions were valid at the time of the previous
       // animation
       const tilePositionsWereValid = tilePositionsValid.current;
+      const oneOnOneLayout =
+        tiles.length === 2 && !tiles.some((t) => t.focused);
 
       return (tileIndex: number) => {
         const tile = tiles[tileIndex];
@@ -887,16 +942,19 @@ export function VideoGrid<T>({
             opacity: 1,
             zIndex: 2,
             shadow: 15,
+            shadowSpread: 0,
             immediate: (key: string) =>
               disableAnimations ||
               key === "zIndex" ||
               key === "x" ||
               key === "y" ||
-              key === "shadow",
+              key === "shadow" ||
+              key === "shadowSpread",
             from: {
               shadow: 0,
               scale: 0,
               opacity: 0,
+              zIndex: 0,
             },
             reset: false,
           };
@@ -920,6 +978,7 @@ export function VideoGrid<T>({
             shadow: number;
             scale: number;
             opacity: number;
+            zIndex?: number;
             x?: number;
             y?: number;
             width?: number;
@@ -948,10 +1007,14 @@ export function VideoGrid<T>({
             opacity: remove ? 0 : 1,
             zIndex: tilePosition.zIndex,
             shadow: 1,
+            shadowSpread: oneOnOneLayout && tile.item.local ? 1 : 0,
             from,
             reset,
             immediate: (key: string) =>
-              disableAnimations || key === "zIndex" || key === "shadow",
+              disableAnimations ||
+              key === "zIndex" ||
+              key === "shadow" ||
+              key === "shadowSpread",
             // If we just stopped dragging a tile, give it time for the
             // animation to settle before pushing its z-index back down
             delay: (key: string) => (key === "zIndex" ? 500 : 0),
@@ -966,7 +1029,8 @@ export function VideoGrid<T>({
     tilePositions,
     tiles,
     scrollPosition,
-  ]);
+    // react-spring's types are bugged and can't infer the spring type
+  ]) as unknown as [SpringValues<TileSpring>[], SpringRef<TileSpring>];
 
   const onTap = useCallback(
     (tileKey: Key) => {
@@ -1175,22 +1239,17 @@ export function VideoGrid<T>({
 
   return (
     <div className={styles.videoGrid} ref={gridRef} {...bindGrid()}>
-      {springs.map(({ shadow, ...style }, i) => {
+      {springs.map((style, i) => {
         const tile = tiles[i];
         const tilePosition = tilePositions[tile.order];
 
         return createChild({
           ...bindTile(tile.key),
+          ...style,
           key: tile.key,
           data: tile.item.data,
-          style: {
-            boxShadow: shadow.to(
-              (s) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px 0px`
-            ),
-            ...style,
-          },
-          width: tilePosition.width,
-          height: tilePosition.height,
+          targetWidth: tilePosition.width,
+          targetHeight: tilePosition.height,
         });
       })}
     </div>

src/video-grid/VideoTile.module.css

@@ -16,11 +16,16 @@ limitations under the License.
 
 .videoTile {
   position: absolute;
-  will-change: transform, width, height, opacity, box-shadow;
-  border-radius: 20px;
+  contain: strict;
+  top: 0;
+  width: var(--tileWidth);
+  height: var(--tileHeight);
+  --tileRadius: 8px;
+  border-radius: var(--tileRadius);
+  box-shadow: rgba(0, 0, 0, 0.5) 0px var(--tileShadow)
+    calc(2 * var(--tileShadow)) var(--tileShadowSpread);
   overflow: hidden;
   cursor: pointer;
-  touch-action: none;
 
   /* HACK: This has no visual effect due to the short duration, but allows the
   JS to detect movement via the transform property for audio spatialization */
@@ -28,9 +33,6 @@ limitations under the License.
 }
 
 .videoTile * {
-  touch-action: none;
-  -moz-user-select: none;
-  -webkit-user-drag: none;
   user-select: none;
 }
 
@@ -45,15 +47,21 @@ limitations under the License.
   transform: scaleX(-1);
 }
 
-.videoTile.speaking::after {
+.videoTile::after {
   position: absolute;
   top: -1px;
   left: -1px;
   right: -1px;
   bottom: -1px;
   content: "";
-  border-radius: 20px;
+  border-radius: var(--tileRadius);
   box-shadow: inset 0 0 0 4px var(--accent) !important;
+  opacity: 0;
+  transition: opacity ease 0.15s;
+}
+
+.videoTile.speaking::after {
+  opacity: 1;
 }
 
 .videoTile.maximised {
@@ -83,6 +91,12 @@ limitations under the License.
   z-index: 1;
 }
 
+.infoBubble > svg {
+  height: 16px;
+  width: 16px;
+  margin-right: 4px;
+}
+
 .toolbar {
   position: absolute;
   top: 0;
@@ -126,10 +140,6 @@ limitations under the License.
   bottom: 16px;
 }
 
-.memberName > * {
-  margin-right: 6px;
-}
-
 .memberName > :last-child {
   margin-right: 0px;
 }
@@ -143,13 +153,6 @@ limitations under the License.
   white-space: nowrap;
 }
 
-.videoMutedAvatar {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-
 .videoMutedOverlay {
   width: 100%;
   height: 100%;
@@ -186,3 +189,9 @@ limitations under the License.
   left: 16px;
   background-color: rgba(0, 0, 0, 0.5);
 }
+
+@media (min-width: 800px) {
+  .videoTile {
+    --tileRadius: 20px;
+  }
+}

src/video-grid/VideoTile.tsx

@@ -14,8 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { forwardRef } from "react";
-import { animated } from "@react-spring/web";
+import React, { ForwardedRef, forwardRef } from "react";
+import { animated, SpringValue } from "@react-spring/web";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import { LocalParticipant, RemoteParticipant, Track } from "livekit-client";
@@ -26,8 +26,8 @@ import {
 } from "@livekit/components-react";
 
 import styles from "./VideoTile.module.css";
+import { ReactComponent as MicIcon } from "../icons/Mic.svg";
 import { ReactComponent as MicMutedIcon } from "../icons/MicMuted.svg";
-import { ReactComponent as VideoMutedIcon } from "../icons/VideoMuted.svg";
 
 export enum TileContent {
   UserMedia = "user-media",
@@ -35,16 +35,46 @@ export enum TileContent {
 }
 
 interface Props {
-  avatar?: JSX.Element;
-  className?: string;
-
   name: string;
   sfuParticipant: LocalParticipant | RemoteParticipant;
   content: TileContent;
+
+  // TODO: Refactor this set of props.
+  // See https://github.com/vector-im/element-call/pull/1099#discussion_r1226863404
+  avatar?: JSX.Element;
+  className?: string;
+  opacity?: SpringValue<number>;
+  scale?: SpringValue<number>;
+  shadow?: SpringValue<number>;
+  shadowSpread?: SpringValue<number>;
+  zIndex?: SpringValue<number>;
+  x?: SpringValue<number>;
+  y?: SpringValue<number>;
+  width?: SpringValue<number>;
+  height?: SpringValue<number>;
 }
 
-export const VideoTile = forwardRef<HTMLDivElement, Props>(
-  ({ name, avatar, className, sfuParticipant, content, ...rest }, ref) => {
+export const VideoTile = forwardRef<HTMLElement, Props>(
+  (
+    {
+      name,
+      sfuParticipant,
+      content,
+      avatar,
+      className,
+      opacity,
+      scale,
+      shadow,
+      shadowSpread,
+      zIndex,
+      x,
+      y,
+      width,
+      height,
+      ...rest
+    },
+    ref
+  ) => {
     const { t } = useTranslation();
 
     const audioEl = React.useRef<HTMLAudioElement>(null);
@@ -66,7 +96,22 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
           [styles.muted]: microphoneMuted,
           [styles.screenshare]: false,
         })}
-        ref={ref}
+        style={{
+          opacity,
+          scale,
+          zIndex,
+          x,
+          y,
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore React does in fact support assigning custom properties,
+          // but React's types say no
+          "--tileWidth": width?.to((w) => `${w}px`),
+          "--tileHeight": height?.to((h) => `${h}px`),
+          "--tileShadow": shadow?.to((s) => `${s}px`),
+          "--tileShadowSpread": shadowSpread?.to((s) => `${s}px`),
+        }}
+        ref={ref as ForwardedRef<HTMLDivElement>}
+        data-testid="videoTile"
         {...rest}
       >
         {!sfuParticipant.isCameraEnabled && (
@@ -75,19 +120,17 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
             {avatar}
           </>
         )}
-        {!false &&
-          (sfuParticipant.isScreenShareEnabled ? (
-            <div className={styles.presenterLabel}>
-              <span>{t("{{name}} is presenting", { name })}</span>
-            </div>
-          ) : (
-            <div className={classNames(styles.infoBubble, styles.memberName)}>
-              {microphoneMuted && <MicMutedIcon />}
-              {!sfuParticipant.isCameraEnabled && <VideoMutedIcon />}
-              <span title={name}>{name}</span>
-              <ConnectionQualityIndicator participant={sfuParticipant} />
-            </div>
-          ))}
+        {sfuParticipant.isScreenShareEnabled ? (
+          <div className={styles.presenterLabel}>
+            <span>{t("{{name}} is presenting", { name })}</span>
+          </div>
+        ) : (
+          <div className={classNames(styles.infoBubble, styles.memberName)}>
+            {microphoneMuted ? <MicMutedIcon /> : <MicIcon />}
+            <span title={name}>{name}</span>
+            <ConnectionQualityIndicator participant={sfuParticipant} />
+          </div>
+        )}
         <VideoTrack
           participant={sfuParticipant}
           source={

src/video-grid/VideoTileContainer.tsx

@@ -20,6 +20,8 @@ import {
   RoomMemberEvent,
 } from "matrix-js-sdk/src/models/room-member";
 import { LocalParticipant, RemoteParticipant } from "livekit-client";
+import { SpringValue } from "@react-spring/web";
+import { EventTypes, Handler, useDrag } from "@use-gesture/react";
 
 import { TileContent, VideoTile } from "./VideoTile";
 import { Avatar } from "../Avatar";
@@ -33,49 +35,81 @@ export interface ItemData {
 
 interface Props {
   item: ItemData;
-  width?: number;
-  height?: number;
+
+  // TODO: Refactor this set of props.
+  // See https://github.com/vector-im/element-call/pull/1099#discussion_r1226863404
+  id: string;
+  targetWidth: number;
+  targetHeight: number;
+  opacity?: SpringValue<number>;
+  scale?: SpringValue<number>;
+  shadow?: SpringValue<number>;
+  shadowSpread?: SpringValue<number>;
+  zIndex?: SpringValue<number>;
+  x?: SpringValue<number>;
+  y?: SpringValue<number>;
+  width?: SpringValue<number>;
+  height?: SpringValue<number>;
+  onDragRef?: React.RefObject<
+    (
+      tileId: string,
+      state: Parameters<Handler<"drag", EventTypes["drag"]>>[0]
+    ) => void
+  >;
 }
 
-export function VideoTileContainer({ item, width, height, ...rest }: Props) {
-  const [displayName, setDisplayName] = React.useState<string>("[👻]");
+export const VideoTileContainer: React.FC<Props> = React.memo(
+  ({ item, id, targetWidth, targetHeight, onDragRef, ...rest }) => {
+    // Handle display name changes.
+    const [displayName, setDisplayName] = React.useState<string>("[👻]");
+    React.useEffect(() => {
+      const member = item.member;
 
-  React.useEffect(() => {
-    const member = item.member;
-
-    if (member) {
-      setDisplayName(member.rawDisplayName);
-
-      const updateName = () => {
+      if (member) {
         setDisplayName(member.rawDisplayName);
-      };
 
-      member!.on(RoomMemberEvent.Name, updateName);
-      return () => {
-        member!.removeListener(RoomMemberEvent.Name, updateName);
-      };
-    }
-  }, [item.member]);
+        const updateName = () => {
+          setDisplayName(member.rawDisplayName);
+        };
 
-  const avatar = (
-    <Avatar
-      key={item.member?.userId}
-      size={Math.round(Math.min(width ?? 0, height ?? 0) / 2)}
-      src={item.member?.getMxcAvatarUrl()}
-      fallback={displayName.slice(0, 1).toUpperCase()}
-      className={Styles.avatar}
-    />
-  );
+        member!.on(RoomMemberEvent.Name, updateName);
+        return () => {
+          member!.removeListener(RoomMemberEvent.Name, updateName);
+        };
+      }
+    }, [item.member]);
 
-  return (
-    <>
+    // Create an avatar.
+    const avatar = (
+      <Avatar
+        key={item.member?.userId}
+        size={Math.round(Math.min(targetWidth, targetHeight) / 2)}
+        src={item.member?.getMxcAvatarUrl()}
+        fallback={displayName.slice(0, 1).toUpperCase()}
+        className={Styles.avatar}
+      />
+    );
+
+    // Make sure that the tile is draggable and work well within video grid layout.
+    //
+    // Firefox doesn't respect the disablePictureInPicture attribute
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1611831
+    const tileRef = React.useRef<HTMLElement | null>(null);
+    useDrag((state) => onDragRef?.current!(id, state), {
+      target: tileRef,
+      filterTaps: true,
+      preventScroll: true,
+    });
+
+    return (
       <VideoTile
+        ref={tileRef}
         sfuParticipant={item.sfuParticipant}
         content={item.content}
         name={displayName}
         avatar={avatar}
         {...rest}
       />
-    </>
-  );
-}
+    );
+  }
+);

src/video-grid/model.ts

@@ -0,0 +1,416 @@
+/*
+Copyright 2023 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import TinyQueue from "tinyqueue";
+
+import { TileDescriptor } from "./VideoGrid";
+
+/**
+ * A 1×1 cell in a grid which belongs to a tile.
+ */
+export interface Cell {
+  /**
+   * The item displayed on the tile.
+   */
+  item: TileDescriptor<unknown>;
+  /**
+   * Whether this cell is the origin (top left corner) of the tile.
+   */
+  origin: boolean;
+  /**
+   * The width, in columns, of the tile.
+   */
+  columns: number;
+  /**
+   * The height, in rows, of the tile.
+   */
+  rows: number;
+}
+
+export interface Grid {
+  columns: number;
+  /**
+   * The cells of the grid, in left-to-right top-to-bottom order.
+   * undefined = empty.
+   */
+  cells: (Cell | undefined)[];
+}
+
+/**
+ * Gets the paths that tiles should travel along in the grid to reach a
+ * particular destination.
+ * @param dest The destination index.
+ * @param g The grid.
+ * @returns An array in which each cell holds the index of the next cell to move
+ *   to to reach the destination, or null if it is the destination.
+ */
+export function getPaths(dest: number, g: Grid): (number | null)[] {
+  const destRow = row(dest, g);
+  const destColumn = column(dest, g);
+
+  // This is Dijkstra's algorithm
+
+  const distances = new Array<number>(dest + 1).fill(Infinity);
+  distances[dest] = 0;
+  const edges = new Array<number | null | undefined>(dest).fill(undefined);
+  edges[dest] = null;
+  const heap = new TinyQueue([dest], (i) => distances[i]);
+
+  const visit = (curr: number, via: number) => {
+    const viaCell = g.cells[via];
+    const viaLargeTile =
+      viaCell !== undefined && (viaCell.rows > 1 || viaCell.columns > 1);
+    // Since it looks nicer to have paths go around large tiles, we impose an
+    // increased cost for moving through them
+    const distanceVia = distances[via] + (viaLargeTile ? 8 : 1);
+
+    if (distanceVia < distances[curr]) {
+      distances[curr] = distanceVia;
+      edges[curr] = via;
+      heap.push(curr);
+    }
+  };
+
+  while (heap.length > 0) {
+    const via = heap.pop()!;
+    const viaRow = row(via, g);
+    const viaColumn = column(via, g);
+
+    // Visit each neighbor
+    if (viaRow > 0) visit(via - g.columns, via);
+    if (viaColumn > 0) visit(via - 1, via);
+    if (viaColumn < (viaRow === destRow ? destColumn : g.columns - 1))
+      visit(via + 1, via);
+    if (
+      viaRow < destRow - 1 ||
+      (viaRow === destRow - 1 && viaColumn <= destColumn)
+    )
+      visit(via + g.columns, via);
+  }
+
+  // The heap is empty, so we've generated all paths
+  return edges as (number | null)[];
+}
+
+function findLastIndex<T>(
+  array: T[],
+  predicate: (item: T) => boolean
+): number | null {
+  for (let i = array.length - 1; i >= 0; i--) {
+    if (predicate(array[i])) return i;
+  }
+
+  return null;
+}
+
+const findLast1By1Index = (g: Grid): number | null =>
+  findLastIndex(g.cells, (c) => c?.rows === 1 && c?.columns === 1);
+
+export function row(index: number, g: Grid): number {
+  return Math.floor(index / g.columns);
+}
+
+export function column(index: number, g: Grid): number {
+  return ((index % g.columns) + g.columns) % g.columns;
+}
+
+function inArea(index: number, start: number, end: number, g: Grid): boolean {
+  const indexColumn = column(index, g);
+  const indexRow = row(index, g);
+  return (
+    indexRow >= row(start, g) &&
+    indexRow <= row(end, g) &&
+    indexColumn >= column(start, g) &&
+    indexColumn <= column(end, g)
+  );
+}
+
+function* cellsInArea(
+  start: number,
+  end: number,
+  g: Grid
+): Generator<number, void, unknown> {
+  const startColumn = column(start, g);
+  const endColumn = column(end, g);
+  for (
+    let i = start;
+    i <= end;
+    i =
+      column(i, g) === endColumn
+        ? i + g.columns + startColumn - endColumn
+        : i + 1
+  )
+    yield i;
+}
+
+export function forEachCellInArea(
+  start: number,
+  end: number,
+  g: Grid,
+  fn: (c: Cell | undefined, i: number) => void
+): void {
+  for (const i of cellsInArea(start, end, g)) fn(g.cells[i], i);
+}
+
+function allCellsInArea(
+  start: number,
+  end: number,
+  g: Grid,
+  fn: (c: Cell | undefined, i: number) => boolean
+): boolean {
+  for (const i of cellsInArea(start, end, g)) {
+    if (!fn(g.cells[i], i)) return false;
+  }
+
+  return true;
+}
+
+const areaEnd = (
+  start: number,
+  columns: number,
+  rows: number,
+  g: Grid
+): number => start + columns - 1 + g.columns * (rows - 1);
+
+/**
+ * Gets the index of the next gap in the grid that should be backfilled by 1×1
+ * tiles.
+ */
+function getNextGap(g: Grid): number | null {
+  const last1By1Index = findLast1By1Index(g);
+  if (last1By1Index === null) return null;
+
+  for (let i = 0; i < last1By1Index; i++) {
+    // To make the backfilling process look natural when there are multiple
+    // gaps, we actually scan each row from right to left
+    const j =
+      (row(i, g) === row(last1By1Index, g)
+        ? last1By1Index
+        : (row(i, g) + 1) * g.columns) -
+      1 -
+      column(i, g);
+
+    if (g.cells[j] === undefined) return j;
+  }
+
+  return null;
+}
+
+/**
+ * Backfill any gaps in the grid.
+ */
+export function fillGaps(g: Grid): Grid {
+  const result: Grid = { ...g, cells: [...g.cells] };
+  let gap = getNextGap(result);
+
+  if (gap !== null) {
+    const pathsToEnd = getPaths(findLast1By1Index(result)!, result);
+
+    do {
+      let filled = false;
+      let to = gap;
+      let from = pathsToEnd[gap];
+
+      // First, attempt to fill the gap by moving 1×1 tiles backwards from the
+      // end of the grid along a set path
+      while (from !== null) {
+        const toCell = result.cells[to];
+        const fromCell = result.cells[from];
+
+        // Skip over slots that are already full
+        if (toCell !== undefined) {
+          to = pathsToEnd[to]!;
+          // Skip over large tiles. Also, we might run into gaps along the path
+          // created during the filling of previous gaps. Skip over those too;
+          // they'll be picked up on the next iteration of the outer loop.
+        } else if (
+          fromCell === undefined ||
+          fromCell.rows > 1 ||
+          fromCell.columns > 1
+        ) {
+          from = pathsToEnd[from];
+        } else {
+          result.cells[to] = result.cells[from];
+          result.cells[from] = undefined;
+          filled = true;
+          to = pathsToEnd[to]!;
+          from = pathsToEnd[from];
+        }
+      }
+
+      // In case the path approach failed, fall back to taking the very last 1×1
+      // tile, and just dropping it into place
+      if (!filled) {
+        const last1By1Index = findLast1By1Index(result)!;
+        result.cells[gap] = result.cells[last1By1Index];
+        result.cells[last1By1Index] = undefined;
+      }
+
+      gap = getNextGap(result);
+    } while (gap !== null);
+  }
+
+  // TODO: If there are any large tiles on the last row, shuffle them back
+  // upwards into a full row
+
+  // Shrink the array to remove trailing gaps
+  const finalLength =
+    (findLastIndex(result.cells, (c) => c !== undefined) ?? -1) + 1;
+  if (finalLength < result.cells.length)
+    result.cells = result.cells.slice(0, finalLength);
+
+  return result;
+}
+
+export function appendItems(items: TileDescriptor<unknown>[], g: Grid): Grid {
+  return {
+    ...g,
+    cells: [
+      ...g.cells,
+      ...items.map((i) => ({
+        item: i,
+        origin: true,
+        columns: 1,
+        rows: 1,
+      })),
+    ],
+  };
+}
+
+/**
+ * Changes the size of a tile, rearranging the grid to make space.
+ * @param tileId The ID of the tile to modify.
+ * @param g The grid.
+ * @returns The updated grid.
+ */
+export function cycleTileSize(tileId: string, g: Grid): Grid {
+  const from = g.cells.findIndex((c) => c?.item.id === tileId);
+  if (from === -1) return g; // Tile removed, no change
+  const fromWidth = g.cells[from]!.columns;
+  const fromHeight = g.cells[from]!.rows;
+  const fromEnd = areaEnd(from, fromWidth, fromHeight, g);
+
+  // The target dimensions, which toggle between 1×1 and larger than 1×1
+  const [toWidth, toHeight] =
+    fromWidth === 1 && fromHeight === 1
+      ? [Math.min(3, Math.max(2, g.columns - 1)), 2]
+      : [1, 1];
+
+  // If we're expanding the tile, we want to create enough new rows at the
+  // tile's target position such that every new unit of grid area created during
+  // the expansion can fit within the new rows.
+  // We do it this way, since it's easier to backfill gaps in the grid than it
+  // is to push colliding tiles outwards.
+  const newRows = Math.max(
+    0,
+    Math.ceil((toWidth * toHeight - fromWidth * fromHeight) / g.columns)
+  );
+
+  // This is the grid with the new rows added
+  const gappyGrid: Grid = {
+    ...g,
+    cells: new Array(g.cells.length + newRows * g.columns),
+  };
+
+  // The next task is to scan for a spot to place the modified tile. Since we
+  // might be creating new rows at the target position, this spot can be shorter
+  // than the target height.
+  const candidateWidth = toWidth;
+  const candidateHeight = toHeight - newRows;
+
+  // To make the tile appear to expand outwards from its center, we're actually
+  // scanning for locations to put the *center* of the tile. These numbers are
+  // the offsets between the tile's origin and its center.
+  const scanColumnOffset = Math.floor((toWidth - 1) / 2);
+  const scanRowOffset = Math.floor((toHeight - 1) / 2);
+
+  const nextScanLocations = new Set<number>([from]);
+  const rows = row(g.cells.length - 1, g) + 1;
+  let to: number | null = null;
+
+  // The contents of a given cell are 'displaceable' if it's empty, holds a 1×1
+  // tile, or is part of the original tile we're trying to reposition
+  const displaceable = (c: Cell | undefined, i: number): boolean =>
+    c === undefined ||
+    (c.columns === 1 && c.rows === 1) ||
+    inArea(i, from, fromEnd, g);
+
+  // Do the scanning
+  for (const scanLocation of nextScanLocations) {
+    const start = scanLocation - scanColumnOffset - g.columns * scanRowOffset;
+    const end = areaEnd(start, candidateWidth, candidateHeight, g);
+    const startColumn = column(start, g);
+    const startRow = row(start, g);
+    const endColumn = column(end, g);
+    const endRow = row(end, g);
+
+    if (
+      start >= 0 &&
+      endColumn - startColumn + 1 === candidateWidth &&
+      allCellsInArea(start, end, g, displaceable)
+    ) {
+      // This location works!
+      to = start;
+      break;
+    }
+
+    // Scan outwards in all directions
+    if (startColumn > 0) nextScanLocations.add(scanLocation - 1);
+    if (endColumn < g.columns - 1) nextScanLocations.add(scanLocation + 1);
+    if (startRow > 0) nextScanLocations.add(scanLocation - g.columns);
+    if (endRow < rows - 1) nextScanLocations.add(scanLocation + g.columns);
+  }
+
+  // If there is no space in the grid, give up
+  if (to === null) return g;
+
+  const toRow = row(to, g);
+
+  // Copy tiles from the original grid to the new one, with the new rows
+  // inserted at the target location
+  g.cells.forEach((c, src) => {
+    if (c?.origin && c.item.id !== tileId) {
+      const offset =
+        row(src, g) > toRow + candidateHeight - 1 ? g.columns * newRows : 0;
+      forEachCellInArea(src, areaEnd(src, c.columns, c.rows, g), g, (c, i) => {
+        gappyGrid.cells[i + offset] = c;
+      });
+    }
+  });
+
+  // Place the tile in its target position, making a note of the tiles being
+  // overwritten
+  const displacedTiles: Cell[] = [];
+  const toEnd = areaEnd(to, toWidth, toHeight, g);
+  forEachCellInArea(to, toEnd, gappyGrid, (c, i) => {
+    if (c !== undefined) displacedTiles.push(c);
+    gappyGrid.cells[i] = {
+      item: g.cells[from]!.item,
+      origin: i === to,
+      columns: toWidth,
+      rows: toHeight,
+    };
+  });
+
+  // Place the displaced tiles in the remaining space
+  for (let i = 0; displacedTiles.length > 0; i++) {
+    if (gappyGrid.cells[i] === undefined)
+      gappyGrid.cells[i] = displacedTiles.shift();
+  }
+
+  // Fill any gaps that remain
+  return fillGaps(gappyGrid);
+}

src/widget.ts

@@ -96,7 +96,14 @@ export const widget: WidgetHelpers | null = (() => {
       // We need to do this now rather than later because it has capabilities to
       // request, and is responsible for starting the transport (should it be?)
 
-      const { roomId, userId, deviceId, baseUrl } = getUrlParams();
+      const {
+        roomId,
+        userId,
+        deviceId,
+        baseUrl,
+        e2eEnabled,
+        allowIceFallback,
+      } = getUrlParams();
       if (!roomId) throw new Error("Room ID must be supplied");
       if (!userId) throw new Error("User ID must be supplied");
       if (!deviceId) throw new Error("Device ID must be supplied");
@@ -142,6 +149,8 @@ export const widget: WidgetHelpers | null = (() => {
           userId,
           deviceId,
           timelineSupport: true,
+          useE2eForGroupCall: e2eEnabled,
+          fallbackICEServerAllowed: allowIceFallback,
         }
       );
       const clientPromise = client.startClient().then(() => client);