Refactor/redesign video tiles

src/room/InCallView.module.css

@@ -28,9 +28,7 @@ limitations under the License.
   flex-direction: column;
   overflow: auto;
   overflow-inline: hidden;
-  /* There used to be a contain: strict here, but due to some bugs in Firefox,
-  this was causing the Z-ordering of modals to glitch out. It can be added back
-  if those issues appear to be resolved. */
+  contain: strict;
 }
 
 .centerMessage {

src/room/InCallView.tsx

@@ -52,7 +52,6 @@ import {
 } from "../button";
 import { Header, LeftNav, RightNav, RoomHeaderInfo } from "../Header";
 import { useVideoGridLayout, VideoGrid } from "../video-grid/VideoGrid";
-import { useShowConnectionStats } from "../settings/useSetting";
 import { useUrlParams } from "../UrlParams";
 import { useCallViewKeyboardShortcuts } from "../useCallViewKeyboardShortcuts";
 import { usePrefersReducedMotion } from "../usePrefersReducedMotion";
@@ -61,7 +60,7 @@ import styles from "./InCallView.module.css";
 import { VideoTile } from "../video-grid/VideoTile";
 import { NewVideoGrid } from "../video-grid/NewVideoGrid";
 import { OTelGroupCallMembership } from "../otel/OTelGroupCallMembership";
-import { SettingsModal } from "../settings/SettingsModal";
+import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useRageshakeRequestModal } from "../settings/submit-rageshake";
 import { RageshakeRequestModal } from "./RageshakeRequestModal";
 import { E2EEConfig, useLiveKit } from "../livekit/useLiveKit";
@@ -167,8 +166,6 @@ export const InCallView: FC<InCallViewProps> = subscribe(
       screenSharingTracks.length > 0,
     );
 
-    const [showConnectionStats] = useShowConnectionStats();
-
     const { hideScreensharing, showControls } = useUrlParams();
 
     const { isScreenShareEnabled, localParticipant } = useLocalParticipant({
@@ -238,7 +235,12 @@ export const InCallView: FC<InCallViewProps> = subscribe(
     const reducedControls = boundsValid && bounds.width <= 340;
     const noControls = reducedControls && bounds.height <= 400;
 
-    const vm = useCallViewModel(rtcSession.room, livekitRoom, connState);
+    const vm = useCallViewModel(
+      rtcSession.room,
+      livekitRoom,
+      matrixInfo.roomEncrypted,
+      connState,
+    );
     const items = useStateObservable(vm.tiles);
     const { fullscreenItem, toggleFullscreen, exitFullscreen } =
       useFullscreen(items);
@@ -283,8 +285,7 @@ export const InCallView: FC<InCallViewProps> = subscribe(
             targetWidth={bounds.width}
             key={maximisedParticipant.id}
             showSpeakingIndicator={false}
-            showConnectionStats={showConnectionStats}
-            matrixInfo={matrixInfo}
+            onOpenProfile={openProfile}
           />
         );
       }
@@ -303,8 +304,7 @@ export const InCallView: FC<InCallViewProps> = subscribe(
               fullscreen={false}
               onToggleFullscreen={toggleFullscreen}
               showSpeakingIndicator={items.length > 2}
-              showConnectionStats={showConnectionStats}
-              matrixInfo={matrixInfo}
+              onOpenProfile={openProfile}
               {...props}
               ref={props.ref as Ref<HTMLDivElement>}
             />
@@ -318,6 +318,7 @@ export const InCallView: FC<InCallViewProps> = subscribe(
     );
 
     const [settingsModalOpen, setSettingsModalOpen] = useState(false);
+    const [settingsTab, setSettingsTab] = useState(defaultSettingsTab);
 
     const openSettings = useCallback(
       () => setSettingsModalOpen(true),
@@ -328,6 +329,11 @@ export const InCallView: FC<InCallViewProps> = subscribe(
       [setSettingsModalOpen],
     );
 
+    const openProfile = useCallback(() => {
+      setSettingsTab("profile");
+      setSettingsModalOpen(true);
+    }, [setSettingsTab, setSettingsModalOpen]);
+
     const toggleScreensharing = useCallback(async () => {
       exitFullscreen();
       await localParticipant.setScreenShareEnabled(!isScreenShareEnabled, {
@@ -450,6 +456,8 @@ export const InCallView: FC<InCallViewProps> = subscribe(
           roomId={rtcSession.room.roomId}
           open={settingsModalOpen}
           onDismiss={closeSettings}
+          tab={settingsTab}
+          onTabChange={setSettingsTab}
         />
       </div>
     );

src/room/LobbyView.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.
@@ -34,7 +34,7 @@ import {
   SettingsButton,
   VideoButton,
 } from "../button/Button";
-import { SettingsModal } from "../settings/SettingsModal";
+import { SettingsModal, defaultSettingsTab } from "../settings/SettingsModal";
 import { useMediaQuery } from "../useMediaQuery";
 
 interface Props {
@@ -71,6 +71,7 @@ export const LobbyView: FC<Props> = ({
   );
 
   const [settingsModalOpen, setSettingsModalOpen] = useState(false);
+  const [settingsTab, setSettingsTab] = useState(defaultSettingsTab);
 
   const openSettings = useCallback(
     () => setSettingsModalOpen(true),
@@ -148,6 +149,8 @@ export const LobbyView: FC<Props> = ({
           client={client}
           open={settingsModalOpen}
           onDismiss={closeSettings}
+          tab={settingsTab}
+          onTabChange={setSettingsTab}
         />
       )}
     </>