Merge branch 'main' into matryoshka-rageshake

.github/workflows/lint.yaml

@@ -16,6 +16,8 @@ jobs:
         run: "yarn install"
       - name: Prettier
         run: "yarn run prettier:check"
+      - name: i18n
+        run: "yarn run i18n:check"
       - name: ESLint
         run: "yarn run lint:js"
       - name: Type check

package.json

@@ -12,7 +12,8 @@
     "lint": "yarn lint:types && yarn lint:js",
     "lint:js": "eslint --max-warnings 0 src",
     "lint:types": "tsc",
-    "i18n": "node_modules/i18next-parser/bin/cli.js"
+    "i18n": "node_modules/i18next-parser/bin/cli.js",
+    "i18n:check": "node_modules/i18next-parser/bin/cli.js --fail-on-warnings --fail-on-update"
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",

public/locales/en-GB/app.json

@@ -8,6 +8,7 @@
   "{{roomName}} - Walkie-talkie call": "{{roomName}} - Walkie-talkie call",
   "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>": "<0>Already have an account?</0><1><0>Log in</0> Or <2>Access as a guest</2></1>",
   "<0>Create an account</0> Or <2>Access as a guest</2>": "<0>Create an account</0> Or <2>Access as a guest</2>",
+  "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>": "<0>Join call now</0><1>Or</1><2>Copy call link and join later</2>",
   "<0>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</1>": "<0>Oops, something's gone wrong.</0><1>Submitting debug logs will help us track down the problem.</1>",
   "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>": "<0>Why not finish by setting up a password to keep your account?</0><1>You'll be able to keep your name and set an avatar for use on future calls</1>",
   "Accept camera/microphone permissions to join the call.": "Accept camera/microphone permissions to join the call.",
@@ -28,7 +29,6 @@
   "Connection lost": "Connection lost",
   "Copied!": "Copied!",
   "Copy and share this call link": "Copy and share this call link",
-  "Copy call link and join later": "Copy call link and join later",
   "Create account": "Create account",
   "Debug log": "Debug log",
   "Debug log request": "Debug log request",

src/Facepile.tsx

@@ -72,12 +72,12 @@ export function Facepile({
       {...rest}
     >
       {participants.slice(0, max).map((member, i) => {
-        const avatarUrl = member.user?.avatarUrl;
+        const avatarUrl = member.getMxcAvatarUrl();
         return (
           <Avatar
             key={member.userId}
             size={size}
-            src={avatarUrl}
+            src={avatarUrl ?? undefined}
             fallback={member.name.slice(0, 1).toUpperCase()}
             className={styles.avatar}
             style={{ left: i * (_size - _overlap) }}

src/room/InCallView.tsx

@@ -237,14 +237,14 @@ export function InCallView({
 
   const renderAvatar = useCallback(
     (roomMember: RoomMember, width: number, height: number) => {
-      const avatarUrl = roomMember.user?.avatarUrl;
+      const avatarUrl = roomMember.getMxcAvatarUrl();
       const size = Math.round(Math.min(width, height) / 2);
 
       return (
         <Avatar
           key={roomMember.userId}
           size={size}
-          src={avatarUrl}
+          src={avatarUrl ?? undefined}
           fallback={roomMember.name.slice(0, 1).toUpperCase()}
           className={styles.avatar}
         />

src/room/LobbyView.tsx

@@ -19,7 +19,7 @@ import { GroupCall, GroupCallState } from "matrix-js-sdk/src/webrtc/groupCall";
 import { MatrixClient } from "matrix-js-sdk/src/client";
 import { PressEvent } from "@react-types/shared";
 import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 
 import styles from "./LobbyView.module.css";
 import { Button, CopyButton } from "../button";
@@ -130,24 +130,26 @@ export function LobbyView({
               audioOutput={audioOutput}
             />
           )}
-          <Button
+          <Trans>
-            ref={joinCallButtonRef}
+            <Button
-            className={styles.copyButton}
+              ref={joinCallButtonRef}
-            size="lg"
+              className={styles.copyButton}
-            disabled={state !== GroupCallState.LocalCallFeedInitialized}
+              size="lg"
-            onPress={onEnter}
+              disabled={state !== GroupCallState.LocalCallFeedInitialized}
-          >
+              onPress={onEnter}
-            Join call now
+            >
-          </Button>
+              Join call now
-          <Body>Or</Body>
+            </Button>
-          <CopyButton
+            <Body>Or</Body>
-            variant="secondaryCopy"
+            <CopyButton
-            value={getRoomUrl(roomIdOrAlias)}
+              variant="secondaryCopy"
-            className={styles.copyButton}
+              value={getRoomUrl(roomIdOrAlias)}
-            copiedMessage={t("Call link copied")}
+              className={styles.copyButton}
-          >
+              copiedMessage={t("Call link copied")}
-            {t("Copy call link and join later")}
+            >
-          </CopyButton>
+              Copy call link and join later
+            </CopyButton>
+          </Trans>
         </div>
         {!isEmbedded && (
           <Body className={styles.joinRoomFooter}>

src/video-grid/VideoGrid.tsx

@@ -120,7 +120,7 @@ function getTilePositions(
   layout: Layout
 ): TilePosition[] {
   if (layout === "freedom") {
-    if (tileCount === 2 && !hasPresenter) {
+    if (tileCount === 2 && !hasPresenter && focusedTileCount === 0) {
       return getOneOnOneLayoutTilePositions(
         gridWidth,
         gridHeight,
@@ -657,7 +657,7 @@ function reorderTiles(tiles: Tile[], layout: Layout) {
   if (
     layout === "freedom" &&
     tiles.length === 2 &&
-    !tiles.some((t) => t.presenter)
+    !tiles.some((t) => t.presenter || t.focused)
   ) {
     // 1:1 layout
     tiles.forEach((tile) => (tile.order = tile.item.isLocal ? 0 : 1));
@@ -999,7 +999,7 @@ export function VideoGrid({
 
       let newTiles = tiles;
 
-      if (tiles.length === 2 && !tiles.some((t) => t.presenter)) {
+      if (tiles.length === 2 && !tiles.some((t) => t.presenter || t.focused)) {
         // We're in 1:1 mode, so only the local tile should be draggable
         if (!dragTile.item.isLocal) return;