Merge pull request #1064 from robintown/update-js-sdk

Update matrix-js-sdk

.github/workflows/build.yaml

@@ -23,9 +23,6 @@ jobs:
           SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
           SENTRY_URL: ${{ secrets.SENTRY_URL }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-          # This appears to be necessary to stop Vite from OOMing
-          # https://github.com/vitejs/vite/issues/2433
-          NODE_OPTIONS: "--max-old-space-size=16384"
       - name: Upload Artifact
         uses: actions/upload-artifact@v2
         with:

.github/workflows/publish.yaml

@@ -40,9 +40,6 @@ jobs:
           SENTRY_URL: ${{ secrets.SENTRY_URL }}
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           VITE_APP_VERSION: ${{ github.event.release.tag_name }}
-          # This appears to be necessary to stop Vite from OOMing
-          # https://github.com/vitejs/vite/issues/2433
-          NODE_OPTIONS: "--max-old-space-size=16384"
 
       - name: Create Tarball
         env:

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "NODE_OPTIONS=--max-old-space-size=16384 vite build",
     "serve": "vite preview",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
@@ -53,7 +53,7 @@
     "i18next-browser-languagedetector": "^6.1.8",
     "i18next-http-backend": "^1.4.4",
     "lodash": "^4.17.21",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#261bc81554580b442769a65ceed2b154178fbe1c",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#fcbc195fbe4170251b87f03a69c8dc5bfccfd5ac",
     "matrix-widget-api": "^1.3.1",
     "mermaid": "^8.13.8",
     "normalize.css": "^8.0.1",

public/locales/bg/app.json

@@ -46,7 +46,6 @@
   "Join call now": "Влез в разговора сега",
   "Join existing call?": "Присъединяване към съществуващ разговор?",
   "Leave": "Напусни",
-  "Loading room…": "Напускане на стаята…",
   "Loading…": "Зареждане…",
   "Local volume": "Локална сила на звука",
   "Logging in…": "Влизане…",

public/locales/cs/app.json

@@ -71,7 +71,6 @@
   "Logging in…": "Přihlašování se…",
   "Local volume": "Lokální hlasitost",
   "Loading…": "Načítání…",
-  "Loading room…": "Načítání místnosti…",
   "Leave": "Opustit hovor",
   "Join call now": "Připojit se k hovoru",
   "Join call": "Připojit se k hovoru",
@@ -134,5 +133,8 @@
   "{{name}} (Waiting for video...)": "{{name}} (Čekání na video...)",
   "This feature is only supported on Firefox.": "Tato funkce je podporována jen ve Firefoxu.",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Odeslání ladících záznamů nám pomůže diagnostikovat problém.</0>",
-  "<0>Oops, something's gone wrong.</0>": "<0>Oops, něco se pokazilo.</0>"
+  "<0>Oops, something's gone wrong.</0>": "<0>Oops, něco se pokazilo.</0>",
+  "Use the upcoming grid system": "Používat nový systém pro zobrazení videí",
+  "Expose developer settings in the settings window.": "Zobrazit vývojářské nastavení.",
+  "Developer Settings": "Vývojářské nastavení"
 }

public/locales/de/app.json

@@ -45,7 +45,6 @@
   "Join call now": "Anruf beitreten",
   "Join existing call?": "An bestehendem Anruf teilnehmen?",
   "Leave": "Verlassen",
-  "Loading room…": "Lade Raum …",
   "Loading…": "Lade …",
   "Local volume": "Lokale Lautstärke",
   "Logging in…": "Anmelden …",

public/locales/el/app.json

@@ -69,7 +69,6 @@
   "Microphone": "Μικρόφωνο",
   "Login": "Σύνδεση",
   "Loading…": "Φόρτωση…",
-  "Loading room…": "Φόρτωση δωματίου…",
   "Leave": "Αποχώρηση",
   "Join existing call?": "Συμμετοχή στην υπάρχουσα κλήση;",
   "Join call now": "Συμμετοχή στην κλήση τώρα",

public/locales/en-GB/app.json

@@ -64,7 +64,6 @@
   "Join call now": "Join call now",
   "Join existing call?": "Join existing call?",
   "Leave": "Leave",
-  "Loading room…": "Loading room…",
   "Loading…": "Loading…",
   "Local volume": "Local volume",
   "Logging in…": "Logging in…",

public/locales/es/app.json

@@ -77,7 +77,6 @@
   "Logging in…": "Iniciando sesión…",
   "Local volume": "Volumen local",
   "Loading…": "Cargando…",
-  "Loading room…": "Cargando sala…",
   "Leave": "Abandonar",
   "Join existing call?": "¿Unirse a llamada existente?",
   "Join call now": "Unirse a la llamada ahora",

public/locales/et/app.json

@@ -70,7 +70,6 @@
   "Logging in…": "Sisselogimine …",
   "Local volume": "Kohalik helitugevus",
   "Loading…": "Laadimine …",
-  "Loading room…": "Ruumi laadimine …",
   "Leave": "Lahku",
   "Join existing call?": "Liitu juba käimasoleva kõnega?",
   "Join call now": "Kõnega liitumine",

public/locales/fa/app.json

@@ -21,7 +21,6 @@
   "Login to your account": "به حساب کاربری خود وارد شوید",
   "Login": "ورود",
   "Loading…": "بارگزاری…",
-  "Loading room…": "بارگزاری اتاق…",
   "Leave": "خروج",
   "Join existing call?": "پیوست به تماس؟",
   "Join call now": "الان به تماس بپیوند",

public/locales/fr/app.json

@@ -43,7 +43,6 @@
   "Join call now": "Rejoindre l’appel maintenant",
   "Join existing call?": "Rejoindre un appel existant ?",
   "Leave": "Partir",
-  "Loading room…": "Chargement du salon…",
   "Loading…": "Chargement…",
   "Local volume": "Volume local",
   "Logging in…": "Connexion…",

public/locales/id/app.json

@@ -46,7 +46,6 @@
   "Join call now": "Bergabung ke panggilan sekarang",
   "Join existing call?": "Bergabung ke panggilan yang sudah ada?",
   "Leave": "Keluar",
-  "Loading room…": "Memuat ruangan…",
   "Loading…": "Memuat…",
   "Local volume": "Volume lokal",
   "Logging in…": "Memasuki…",

public/locales/ja/app.json

@@ -53,7 +53,6 @@
   "Login": "ログイン",
   "Logging in…": "ログインしています…",
   "Loading…": "読み込んでいます…",
-  "Loading room…": "ルームを読み込んでいます…",
   "Leave": "退出",
   "Version: {{version}}": "バージョン：{{version}}",
   "Username": "ユーザー名",

public/locales/pl/app.json

@@ -3,7 +3,7 @@
   "Login": "Zaloguj się",
   "Go": "Kontynuuj",
   "By clicking \"Go\", you agree to our <2>Terms and conditions</2>": "Klikając \"Kontynuuj\", wyrażasz zgodę na nasze <2>Warunki</2>",
-  "{{count}} people connected|other": "{{count}} ludzi połączono",
+  "{{count}} people connected|other": "{{count}} osób połączonych",
   "Your recent calls": "Twoje ostatnie połączenia",
   "You can't talk at the same time": "Nie możesz mówić w tym samym czasie",
   "Yes, join call": "Tak, dołącz do połączenia",
@@ -73,7 +73,6 @@
   "Logging in…": "Logowanie…",
   "Local volume": "Lokalna głośność",
   "Loading…": "Ładowanie…",
-  "Loading room…": "Ładowanie pokoju…",
   "Leave": "Opuść",
   "Join existing call?": "Dołączyć do istniejącego połączenia?",
   "Join call now": "Dołącz do połączenia teraz",
@@ -99,7 +98,7 @@
   "Debug log request": "Prośba o dzienniki debugowania",
   "Debug log": "Dzienniki debugowania",
   "Create account": "Utwórz konto",
-  "Copy and share this call link": "Skopiuj i podziel się linkiem do połączenia",
+  "Copy and share this call link": "Skopiuj i udostępnij link do rozmowy",
   "Copied!": "Skopiowano!",
   "Connection lost": "Połączenie utracone",
   "Confirm password": "Potwierdź hasło",
@@ -129,10 +128,15 @@
   "Copy": "Kopiuj",
   "<0>Submitting debug logs will help us track down the problem.</0>": "<0>Wysłanie logów debuggowania pomoże nam ustalić przyczynę problemu.</0>",
   "<0>Oops, something's gone wrong.</0>": "<0>Ojej, coś poszło nie tak.</0>",
-  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Dołącz do rozmowy teraz</0><1>Or</1><2>Skopiuj link do rozmowy i dołącz później</2>",
+  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Dołącz do rozmowy już teraz</0><1>Or</1><2>Skopiuj link do rozmowy i dołącz później</2>",
   "{{name}} (Waiting for video...)": "{{name}} (Oczekiwanie na wideo...)",
   "{{name}} (Connecting...)": "{{name}} (Łączenie...)",
   "Expose developer settings in the settings window.": "Wyświetlaj opcje programisty w oknie ustawień.",
   "Element Call Home": "Strona główna Element Call",
-  "Developer Settings": "Opcje programisty"
+  "Developer Settings": "Opcje programisty",
+  "Talk over speaker": "Rozmowa przez głośnik",
+  "Use the upcoming grid system": "Użyj nadchodzącego systemu siatek",
+  "This site is protected by ReCAPTCHA and the Google <2>Privacy Policy</2> and <6>Terms of Service</6> apply.<9></9>By clicking \"Register\", you agree to our <12>Terms and conditions</12>": "Ta strona jest chroniona przez ReCAPTCHA, więc obowiązują na niej <2>Polityka prywatności</2> i <6>Warunki świadczenia usług</6> Google.<9></9>Klikając \"Zarejestruj się\", zgadzasz się na nasze <12>Warunki świadczenia usług</12>",
+  "<0></0><1></1>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.": "<0></0><1></1>Możesz wycofać swoją zgodę poprzez odznaczenie tego pola. Jeśli już jesteś w trakcie rozmowy, opcja zostanie zastosowana po jej zakończeniu.",
+  "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 <2>Privacy Policy</2> and our <5>Cookie Policy</5>.": "Uczestnicząc w tej becie, upoważniasz nas do zbierania anonimowych danych, które wykorzystamy do ulepszenia produktu. Dowiedz się więcej na temat danych, które zbieramy w naszej <2>Polityce prywatności</2> i <5>Polityce ciasteczek</5>."
 }

public/locales/ru/app.json

@@ -86,7 +86,6 @@
   "Login to your account": "Войдите в свой аккаунт",
   "Login": "Вход",
   "Loading…": "Загрузка…",
-  "Loading room…": "Загрузка комнаты…",
   "Leave": "Покинуть",
   "Join existing call?": "Присоединиться к существующему звонку?",
   "Join call now": "Присоединиться сейчас",

public/locales/sk/app.json

@@ -52,7 +52,6 @@
   "Login": "Prihlásiť sa",
   "Logging in…": "Prihlasovanie…",
   "Loading…": "Načítanie…",
-  "Loading room…": "Načítanie miestnosti…",
   "Leave": "Opustiť",
   "Join existing call?": "Pripojiť sa k existujúcemu hovoru?",
   "Join call now": "Pripojiť sa k hovoru teraz",

public/locales/tr/app.json

@@ -43,7 +43,6 @@
   "Join call now": "Aramaya katıl",
   "Join existing call?": "Mevcut aramaya katıl?",
   "Leave": "Çık",
-  "Loading room…": "Oda yükleniyor…",
   "Loading…": "Yükleniyor…",
   "Local volume": "Yerel ses seviyesi",
   "Logging in…": "Giriliyor…",

public/locales/uk/app.json

@@ -72,7 +72,6 @@
   "Login": "Увійти",
   "Logging in…": "Вхід…",
   "Local volume": "Локальна гучність",
-  "Loading room…": "Завантаження кімнати…",
   "Leave": "Вийти",
   "Join existing call?": "Приєднатися до наявного виклику?",
   "Join call now": "Приєднатися до виклику зараз",

public/locales/zh-Hans/app.json

@@ -90,7 +90,6 @@
   "Logging in…": "登录中……",
   "Local volume": "本地音量",
   "Loading…": "加载中……",
-  "Loading room…": "加载房间中……",
   "Leave": "离开",
   "Join existing call?": "加入现有的通话？",
   "Join call now": "现在加入通话",

public/locales/zh-Hant/app.json

@@ -90,7 +90,6 @@
   "Logging in…": "登入中…",
   "Local volume": "您的音量",
   "Loading…": "載入中…",
-  "Loading room…": "載入聊天室…",
   "Leave": "離開",
   "Join existing call?": "加入已開始的通話嗎？",
   "Join call now": "現在加入通話",

src/Header.tsx

@@ -134,7 +134,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.tsx

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

src/UserMenu.tsx

@@ -58,6 +58,7 @@ export function UserMenu({
         key: "user",
         icon: UserIcon,
         label: displayName,
+        dataTestid: "usermenu_user",
       });
 
       if (isPasswordlessUser && !preventNavigation) {
@@ -65,6 +66,7 @@ export function UserMenu({
           key: "login",
           label: t("Sign in"),
           icon: LoginIcon,
+          dataTestid: "usermenu_login",
         });
       }
 
@@ -73,6 +75,7 @@ export function UserMenu({
           key: "logout",
           label: t("Sign out"),
           icon: LogoutIcon,
+          dataTestid: "usermenu_logout",
         });
       }
     }
@@ -93,7 +96,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 +115,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/analytics/PosthogSpanProcessor.ts

@@ -124,6 +124,8 @@ export class PosthogSpanProcessor implements SpanProcessor {
         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"]}`;
         PosthogAnalytics.instance.trackEvent(
           {
             eventName: "MediaReceived",
@@ -133,6 +135,8 @@ export class PosthogSpanProcessor implements SpanProcessor {
             videoReceived: videoReceived,
             maxJitter: maxJitter,
             maxPacketLoss: maxPacketLoss,
+            peerConnections: peerConnections,
+            percentageConcealedAudio: percentageConcealedAudio,
           },
           // Send instantly because the window might be closing
           { send_instantly: true }

src/auth/LoginPage.tsx

@@ -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

@@ -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/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.tsx

@@ -133,6 +133,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
                 type="text"
                 required
                 autoComplete="off"
+                data-testid="home_callName"
               />
 
               <Button
@@ -140,6 +141,7 @@ export function RegisteredView({ client, isPasswordlessUser }: Props) {
                 size="lg"
                 className={styles.button}
                 disabled={loading}
+                data-testid="home_go"
               >
                 {loading ? t("Loading…") : t("Go")}
               </Button>

src/home/UnauthenticatedView.tsx

@@ -142,6 +142,7 @@ export const UnauthenticatedView: FC = () => {
                 type="text"
                 required
                 autoComplete="off"
+                data-testid="home_callName"
               />
             </FieldRow>
             <FieldRow>
@@ -152,6 +153,7 @@ export const UnauthenticatedView: FC = () => {
                 placeholder={t("Display name")}
                 type="text"
                 required
+                data-testid="home_displayName"
                 autoComplete="off"
               />
             </FieldRow>
@@ -171,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} />
@@ -179,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/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/otel/otel.ts

@@ -42,7 +42,7 @@ export class ElementCallOpenTelemetry {
     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)
-    // The posthog exporter is always enabled, posthog reporting is enabled or disabled
+    // Posthog reporting is enabled or disabled
     // within the posthog code.
     const shouldEnableOtlp = Boolean(config.opentelemetry?.collector_url);
 

src/profile/ProfileModal.tsx

@@ -119,6 +119,7 @@ export function ProfileModal({ client, ...rest }: Props) {
               placeholder={t("Display name")}
               value={displayName}
               onChange={onChangeDisplayName}
+              data-testid="profile_displayname"
             />
           </FieldRow>
           {error && (
@@ -130,7 +131,11 @@ export function ProfileModal({ client, ...rest }: Props) {
             <Button type="button" variant="secondary" onPress={onClose}>
               Cancel
             </Button>
-            <Button type="submit" disabled={loading}>
+            <Button
+              type="submit"
+              disabled={loading}
+              data-testid="profile_submit"
+            >
               {loading ? t("Saving…") : t("Save")}
             </Button>
           </FieldRow>

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

@@ -281,7 +281,7 @@ export function GroupCallView({
   } else if (isEmbedded) {
     return (
       <FullScreenView>
-        <h1>{t("Loading room…")}</h1>
+        <h1>{t("Loading…")}</h1>
       </FullScreenView>
     );
   } else {

src/room/InCallView.tsx

@@ -383,11 +383,13 @@ export function InCallView({
         key="1"
         muted={microphoneMuted}
         onPress={toggleMicrophoneMuted}
+        data-testid="incall_mute"
       />,
       <VideoButton
         key="2"
         muted={localVideoMuted}
         onPress={toggleLocalVideoMuted}
+        data-testid="incall_videomute"
       />
     );
 
@@ -398,6 +400,7 @@ export function InCallView({
             key="3"
             enabled={isScreensharing}
             onPress={toggleScreensharing}
+            data-testid="incall_screenshare"
           />
         );
       }

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

@@ -137,6 +137,7 @@ export function LobbyView({
               size="lg"
               disabled={state !== GroupCallState.LocalCallFeedInitialized}
               onPress={onEnter}
+              data-testid="lobby_joinCall"
             >
               Join call now
             </Button>
@@ -146,6 +147,7 @@ export function LobbyView({
               value={getRoomUrl(roomIdOrAlias)}
               className={styles.copyButton}
               copiedMessage={t("Call link copied")}
+              data-testid="lobby_inviteLink"
             >
               Copy call link and join later
             </CopyButton>

src/room/OverflowMenu.tsx

@@ -102,7 +102,7 @@ export function OverflowMenu({
     <>
       <PopoverMenuTrigger disableOnState>
         <TooltipTrigger tooltip={tooltip} placement="top">
-          <Button variant="toolbar">
+          <Button variant="toolbar" data-testid="call_more">
             <OverflowIcon />
           </Button>
         </TooltipTrigger>
@@ -111,7 +111,7 @@ export function OverflowMenu({
             {showInvite && (
               <Item key="invite" textValue={t("Invite people")}>
                 <AddUserIcon />
-                <span>{t("Invite people")}</span>
+                <span data-testid="call_moreInvite">{t("Invite people")}</span>
               </Item>
             )}
             <Item key="settings" textValue={t("Settings")}>

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/VideoPreview.tsx

@@ -64,7 +64,13 @@ export function VideoPreview({
 
   return (
     <div className={styles.preview} ref={previewRef}>
-      <video ref={videoRef} muted playsInline disablePictureInPicture />
+      <video
+        ref={videoRef}
+        muted
+        playsInline
+        disablePictureInPicture
+        data-testid="preview_video"
+      />
       {state === GroupCallState.LocalCallFeedUninitialized && (
         <Body fontWeight="semiBold" className={styles.cameraPermissions}>
           {t("Camera/microphone permissions needed to join the call.")}

src/room/useLoadGroupCall.ts

@@ -32,7 +32,7 @@ import { isLocalRoomId, createRoom, roomNameFromRoomId } from "../matrix-utils";
 import { translatedError } from "../TranslatedError";
 import { widget } from "../widget";
 
-const STATS_COLLECT_INTERVAL_TIME_MS = 30000;
+const STATS_COLLECT_INTERVAL_TIME_MS = 10000;
 
 export interface GroupCallLoadState {
   loading: boolean;

src/settings/submit-rageshake.ts

@@ -249,7 +249,7 @@ export function useSubmitRageshake(): {
           body.append(
             "file",
             gzip(ElementCallOpenTelemetry.instance.rageshakeProcessor!.dump()),
-            "traces.json"
+            "traces.json.gz"
           );
 
           if (inspectorState) {

src/video-grid/NewVideoGrid.tsx

@@ -245,6 +245,7 @@ export const NewVideoGrid: FC<Props> = ({
         opacity: 0,
         scale: 0,
         shadow: 1,
+        shadowSpread: 0,
         zIndex: 1,
         x,
         y,

src/video-grid/VideoGrid.tsx

@@ -51,6 +51,7 @@ export interface TileSpring {
   opacity: number;
   scale: number;
   shadow: number;
+  shadowSpread: number;
   zIndex: number;
   x: number;
   y: number;
@@ -172,8 +173,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;
@@ -892,6 +901,8 @@ export function VideoGrid({
       // 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.presenter || t.focused);
 
       return (tileIndex: number) => {
         const tile = tiles[tileIndex];
@@ -911,12 +922,14 @@ export function VideoGrid({
             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,
@@ -974,10 +987,14 @@ export function VideoGrid({
             opacity: remove ? 0 : 1,
             zIndex: tilePosition.zIndex,
             shadow: 1,
+            shadowSpread: oneOnOneLayout && tile.item.isLocal ? 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),

src/video-grid/VideoTile.module.css

@@ -22,6 +22,8 @@ limitations under the License.
   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;
 
@@ -45,7 +47,7 @@ limitations under the License.
   transform: scaleX(-1);
 }
 
-.videoTile.speaking::after {
+.videoTile::after {
   position: absolute;
   top: -1px;
   left: -1px;
@@ -54,6 +56,12 @@ limitations under the License.
   content: "";
   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;
 }

src/video-grid/VideoTile.tsx

@@ -20,8 +20,8 @@ import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 
 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";
 import { AudioButton, FullscreenButton } from "../button/Button";
 import { ConnectionState } from "../room/useGroupCall";
 
@@ -47,6 +47,7 @@ interface Props {
   opacity?: SpringValue<number>;
   scale?: SpringValue<number>;
   shadow?: SpringValue<number>;
+  shadowSpread?: SpringValue<number>;
   zIndex?: SpringValue<number>;
   x?: SpringValue<number>;
   y?: SpringValue<number>;
@@ -79,6 +80,7 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
       opacity,
       scale,
       shadow,
+      shadowSpread,
       zIndex,
       x,
       y,
@@ -141,9 +143,6 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
         style={{
           opacity,
           scale,
-          boxShadow: shadow?.to(
-            (s) => `rgba(0, 0, 0, 0.5) 0px ${s}px ${2 * s}px 0px`
-          ),
           zIndex,
           x,
           y,
@@ -152,8 +151,11 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
           // 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}
       >
         {toolbarButtons.length > 0 && !maximised && (
@@ -177,13 +179,19 @@ export const VideoTile = forwardRef<HTMLElement, Props>(
                 Mute state is currently sent over to-device messages, which
                 aren't quite real-time, so this is an important kludge to make
                 sure no one appears muted when they've clearly begun talking. */
-                audioMuted && !videoMuted && !speaking && <MicMutedIcon />
+                speaking || !audioMuted ? <MicIcon /> : <MicMutedIcon />
               }
-              {videoMuted && <VideoMutedIcon />}
-              <span title={caption}>{caption}</span>
+              <span data-testid="videoTile_caption" title={caption}>
+                {caption}
+              </span>
             </div>
           ))}
-        <video ref={mediaRef} playsInline disablePictureInPicture />
+        <video
+          data-testid="videoTile_video"
+          ref={mediaRef}
+          playsInline
+          disablePictureInPicture
+        />
       </animated.div>
     );
   }

src/video-grid/VideoTileContainer.tsx

@@ -47,6 +47,7 @@ interface Props {
   opacity?: SpringValue<number>;
   scale?: SpringValue<number>;
   shadow?: SpringValue<number>;
+  shadowSpread?: SpringValue<number>;
   zIndex?: SpringValue<number>;
   x?: SpringValue<number>;
   y?: SpringValue<number>;

test/otel/ObjectFlattener-test.ts

@@ -1,3 +1,8 @@
+import { GroupCallStatsReport } from "matrix-js-sdk/src/webrtc/groupCall";
+import {
+  AudioConcealment,
+  ConnectionStatsReport,
+} from "matrix-js-sdk/src/webrtc/stats/statsReport";
 import { ObjectFlattener } from "../../src/otel/ObjectFlattener";
 
 /*
@@ -16,7 +21,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 describe("ObjectFlattener", () => {
-  const statsReport = {
+  const noConcealment: AudioConcealment = {
+    concealedAudio: 0,
+    totalAudioDuration: 0,
+  };
+
+  const statsReport: GroupCallStatsReport<ConnectionStatsReport> = {
     report: {
       bandwidth: { upload: 426, download: 0 },
       bitrate: {
@@ -92,8 +102,14 @@ describe("ObjectFlattener", () => {
           rtt: null,
         },
       ],
+      audioConcealment: new Map([
+        ["REMOTE_AUDIO_TRACK_ID", noConcealment],
+        ["REMOTE_VIDEO_TRACK_ID", noConcealment],
+      ]),
+      totalAudioConcealment: noConcealment,
     },
   };
+
   describe("on flattenObjectRecursive", () => {
     it("should flatter an Map object", () => {
       const flatObject = {};
@@ -198,6 +214,12 @@ describe("ObjectFlattener", () => {
         "matrix.stats.conn.transport.1.remoteCandidateType": "srfx",
         "matrix.stats.conn.transport.1.networkType": "ethernet",
         "matrix.stats.conn.transport.1.rtt": "null",
+        "matrix.stats.conn.audioConcealment.REMOTE_AUDIO_TRACK_ID.concealedAudio": 0,
+        "matrix.stats.conn.audioConcealment.REMOTE_AUDIO_TRACK_ID.totalAudioDuration": 0,
+        "matrix.stats.conn.audioConcealment.REMOTE_VIDEO_TRACK_ID.concealedAudio": 0,
+        "matrix.stats.conn.audioConcealment.REMOTE_VIDEO_TRACK_ID.totalAudioDuration": 0,
+        "matrix.stats.conn.totalAudioConcealment.concealedAudio": 0,
+        "matrix.stats.conn.totalAudioConcealment.totalAudioDuration": 0,
       });
     });
   });

yarn.lock

@@ -1209,13 +1209,20 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.18.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
   integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.12.5":
+  version "7.21.5"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.21.5.tgz#8492dddda9644ae3bda3b45eabe87382caee7200"
+  integrity sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==
+  dependencies:
+    regenerator-runtime "^0.13.11"
+
 "@babel/runtime@^7.13.9", "@babel/runtime@^7.9.2":
   version "7.19.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78"
@@ -1821,10 +1828,10 @@
   resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.3.1.tgz#b50a781709c81e10701004214340f25475a171a0"
   integrity sha512-zMM9Ds+SawiUkakS7y94Ymqx+S0ORzpG3frZirN3l+UlXUmSUR7hF4wxCVqW+ei94JzV5kt0uXBcoOEAuiydrw==
 
-"@matrix-org/matrix-sdk-crypto-js@^0.1.0-alpha.7":
-  version "0.1.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.7.tgz#136375b84fd8a7e698f70fc969f668e541a61313"
-  integrity sha512-sQEG9cSfNji5NYBf5h7j5IxYVO0dwtAKoetaVyR+LhIXz/Su7zyEE3EwlAWAeJOFdAV/vZ5LTNyh39xADuNlTg==
+"@matrix-org/matrix-sdk-crypto-js@^0.1.0-alpha.8":
+  version "0.1.0-alpha.8"
+  resolved "https://registry.yarnpkg.com/@matrix-org/matrix-sdk-crypto-js/-/matrix-sdk-crypto-js-0.1.0-alpha.8.tgz#18dd8e7fb56602d2999d8a502b49e902a2bb3782"
+  integrity sha512-hdmbbGXKrN6JNo3wdBaR5Zs3lXlzllT3U43ViNTlabB3nKkOZQnEAN/Isv+4EQSgz1+8897veI9Q8sqlQX22oA==
 
 "@matrix-org/olm@https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.14.tgz":
   version "3.2.14"
@@ -2264,51 +2271,51 @@
     "@react-aria/utils" "^3.13.1"
     clsx "^1.1.1"
 
-"@react-spring/animated@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.4.5.tgz#dd9921c716a4f4a3ed29491e0c0c9f8ca0eb1a54"
-  integrity sha512-KWqrtvJSMx6Fj9nMJkhTwM9r6LIriExDRV6YHZV9HKQsaolUFppgkOXpC+rsL1JEtEvKv6EkLLmSqHTnuYjiIA==
+"@react-spring/animated@~9.7.2":
+  version "9.7.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.7.2.tgz#0119db8075e91d693ec45c42575541e01b104a70"
+  integrity sha512-ipvleJ99ipqlnHkz5qhSsgf/ny5aW0ZG8Q+/2Oj9cI7LCc7COdnrSO6V/v8MAX3JOoQNzfz6dye2s5Pt5jGaIA==
   dependencies:
-    "@react-spring/shared" "~9.4.5"
-    "@react-spring/types" "~9.4.5"
+    "@react-spring/shared" "~9.7.2"
+    "@react-spring/types" "~9.7.2"
 
-"@react-spring/core@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.4.5.tgz#4616e1adc18dd10f5731f100ebdbe9518b89ba3c"
-  integrity sha512-83u3FzfQmGMJFwZLAJSwF24/ZJctwUkWtyPD7KYtNagrFeQKUH1I05ZuhmCmqW+2w1KDW1SFWQ43RawqfXKiiQ==
+"@react-spring/core@~9.7.2":
+  version "9.7.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.7.2.tgz#804ebadee45a6adff00886454d6f1c5d97ee219d"
+  integrity sha512-fF512edZT/gKVCA90ZRxfw1DmELeVwiL4OC2J6bMUlNr707C0h4QRoec6DjzG27uLX2MvS1CEatf9KRjwZR9/w==
   dependencies:
-    "@react-spring/animated" "~9.4.5"
-    "@react-spring/rafz" "~9.4.5"
-    "@react-spring/shared" "~9.4.5"
-    "@react-spring/types" "~9.4.5"
+    "@react-spring/animated" "~9.7.2"
+    "@react-spring/rafz" "~9.7.2"
+    "@react-spring/shared" "~9.7.2"
+    "@react-spring/types" "~9.7.2"
 
-"@react-spring/rafz@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.4.5.tgz#84f809f287f2a66bbfbc66195db340482f886bd7"
-  integrity sha512-swGsutMwvnoyTRxvqhfJBtGM8Ipx6ks0RkIpNX9F/U7XmyPvBMGd3GgX/mqxZUpdlsuI1zr/jiYw+GXZxAlLcQ==
+"@react-spring/rafz@~9.7.2":
+  version "9.7.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.7.2.tgz#77e7088c215e05cf893851cd87ceb40d89f2a7d7"
+  integrity sha512-kDWMYDQto3+flkrX3vy6DU/l9pxQ4TVW91DglQEc11iDc7shF4+WVDRJvOVLX+xoMP7zyag1dMvlIgvQ+dvA/A==
 
-"@react-spring/shared@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.4.5.tgz#4c3ad817bca547984fb1539204d752a412a6d829"
-  integrity sha512-JhMh3nFKsqyag0KM5IIM8BQANGscTdd0mMv3BXsUiMZrcjQTskyfnv5qxEeGWbJGGar52qr5kHuBHtCjQOzniA==
+"@react-spring/shared@~9.7.2":
+  version "9.7.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.7.2.tgz#b8485617bdcc9f6348b245922051fb534e07c566"
+  integrity sha512-6U9qkno+9DxlH5nSltnPs+kU6tYKf0bPLURX2te13aGel8YqgcpFYp5Av8DcN2x3sukinAsmzHUS/FRsdZMMBA==
   dependencies:
-    "@react-spring/rafz" "~9.4.5"
-    "@react-spring/types" "~9.4.5"
+    "@react-spring/rafz" "~9.7.2"
+    "@react-spring/types" "~9.7.2"
 
-"@react-spring/types@~9.4.5":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.4.5.tgz#9c71e5ff866b5484a7ef3db822bf6c10e77bdd8c"
-  integrity sha512-mpRIamoHwql0ogxEUh9yr4TP0xU5CWyZxVQeccGkHHF8kPMErtDXJlxyo0lj+telRF35XNihtPTWoflqtyARmg==
+"@react-spring/types@~9.7.2":
+  version "9.7.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.7.2.tgz#e04dd72755d88b0e3163ba143ecd8ba78b68a5b0"
+  integrity sha512-GEflx2Ex/TKVMHq5g5MxQDNNPNhqg+4Db9m7+vGTm8ttZiyga7YQUF24shgRNebKIjahqCuei16SZga8h1pe4g==
 
 "@react-spring/web@^9.4.4":
-  version "9.4.5"
-  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.4.5.tgz#b92f05b87cdc0963a59ee149e677dcaff09f680e"
-  integrity sha512-NGAkOtKmOzDEctL7MzRlQGv24sRce++0xAY7KlcxmeVkR7LRSGkoXHaIfm9ObzxPMcPHQYQhf3+X9jepIFNHQA==
+  version "9.7.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.7.2.tgz#76e53dd24033764c3062f9927f88b0f3194688d4"
+  integrity sha512-7qNc7/5KShu2D05x7o2Ols2nUE7mCKfKLaY2Ix70xPMfTle1sZisoQMBFgV9w/fSLZlHZHV9P0uWJqEXQnbV4Q==
   dependencies:
-    "@react-spring/animated" "~9.4.5"
-    "@react-spring/core" "~9.4.5"
-    "@react-spring/shared" "~9.4.5"
-    "@react-spring/types" "~9.4.5"
+    "@react-spring/animated" "~9.7.2"
+    "@react-spring/core" "~9.7.2"
+    "@react-spring/shared" "~9.7.2"
+    "@react-spring/types" "~9.7.2"
 
 "@react-stately/collections@^3.3.4", "@react-stately/collections@^3.4.1":
   version "3.4.1"
@@ -10550,12 +10557,12 @@ matrix-events-sdk@0.0.1:
   resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz#c8c38911e2cb29023b0bbac8d6f32e0de2c957dd"
   integrity sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==
 
-"matrix-js-sdk@github:matrix-org/matrix-js-sdk#261bc81554580b442769a65ceed2b154178fbe1c":
-  version "25.0.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/261bc81554580b442769a65ceed2b154178fbe1c"
+"matrix-js-sdk@github:matrix-org/matrix-js-sdk#fcbc195fbe4170251b87f03a69c8dc5bfccfd5ac":
+  version "25.1.0"
+  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/fcbc195fbe4170251b87f03a69c8dc5bfccfd5ac"
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@matrix-org/matrix-sdk-crypto-js" "^0.1.0-alpha.7"
+    "@matrix-org/matrix-sdk-crypto-js" "^0.1.0-alpha.8"
     another-json "^0.2.0"
     bs58 "^5.0.0"
     content-type "^1.0.4"
@@ -10568,9 +10575,9 @@ matrix-events-sdk@0.0.1:
     uuid "9"
 
 matrix-widget-api@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.3.1.tgz#e38f404c76bb15c113909505c1c1a5b4d781c2f5"
-  integrity sha512-+rN6vGvnXm+fn0uq9r2KWSL/aPtehD6ObC50jYmUcEfgo8CUpf9eUurmjbRlwZkWq3XHXFuKQBUCI9UzqWg37Q==
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/matrix-widget-api/-/matrix-widget-api-1.4.0.tgz#e426ec16a013897f3a4a9c2bff423f54ab0ba745"
+  integrity sha512-dw0dRylGQzDUoiaY/g5xx1tBbS7aoov31PRtFMAvG58/4uerYllV9Gfou7w+I1aglwB6hihTREzKltVjARWV6A==
   dependencies:
     "@types/events" "^3.0.0"
     events "^3.2.0"
@@ -12702,7 +12709,12 @@ regenerate@^1.4.2:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
   integrity sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==
 
-regenerator-runtime@^0.13.4, regenerator-runtime@^0.13.7:
+regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.4:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
+  integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+
+regenerator-runtime@^0.13.7:
   version "0.13.9"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
   integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==