Refactor/redesign video tiles

package.json

@@ -29,6 +29,7 @@
     "@opentelemetry/instrumentation-user-interaction": "^0.34.0",
     "@opentelemetry/sdk-trace-web": "^1.9.1",
     "@radix-ui/react-dialog": "^1.0.4",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.0.3",
     "@react-aria/button": "^3.3.4",
     "@react-aria/focus": "^3.5.0",

public/locales/en-GB/app.json

@@ -49,6 +49,7 @@
     "home": "Home",
     "loading": "Loading…",
     "microphone": "Microphone",
+    "options": "Options",
     "password": "Password",
     "profile": "Profile",
     "settings": "Settings",
@@ -57,10 +58,8 @@
     "video": "Video"
   },
   "disconnected_banner": "Connectivity to the server has been lost.",
-  "exit_fullscreen_button_label": "Exit full screen",
   "full_screen_view_description": "<0>Submitting debug logs will help us track down the problem.</0>",
   "full_screen_view_h1": "<0>Oops, something's gone wrong.</0>",
-  "fullscreen_button_label": "Full screen",
   "group_call_loader_failed_heading": "Call not found",
   "group_call_loader_failed_text": "Calls are now end-to-end encrypted and need to be created from the home page. This helps make sure everyone's using the same encryption key.",
   "hangup_button_label": "End call",
@@ -81,7 +80,6 @@
     "join_button": "Join call",
     "leave_button": "Back to recents"
   },
-  "local_volume_label": "Local volume",
   "log_in": "Log In",
   "logging_in": "Logging in…",
   "login_auth_links": "<0>Create an account</0> Or <2>Access as a guest</2>",
@@ -145,8 +143,11 @@
   "unmute_microphone_button_label": "Unmute microphone",
   "version": "Version: {{version}}",
   "video_tile": {
-    "presenter_label": "{{displayName}} is presenting",
+    "exit_full_screen": "Exit full screen",
-    "sfu_participant_local": "You"
+    "full_screen": "Full screen",
+    "mute_for_me": "Mute for me",
+    "sfu_participant_local": "You",
+    "volume": "Volume"
   },
   "waiting_for_participants": "Waiting for other participants…"
 }

src/Overlay.module.css

@@ -16,7 +16,6 @@ limitations under the License.
 
 .bg {
   position: fixed;
-  z-index: 100;
   inset: 0;
   background: rgba(3, 12, 27, 0.528);
 }
@@ -49,7 +48,6 @@ limitations under the License.
 
 .overlay {
   position: fixed;
-  z-index: 101;
 }
 
 .overlay.animate {

src/Slider.module.css

@@ -0,0 +1,66 @@
+/*
+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.
+*/
+
+.slider {
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+
+.track {
+  flex-grow: 1;
+  border-radius: var(--cpd-radius-pill-effect);
+  background: var(--cpd-color-bg-subtle-primary);
+  height: var(--cpd-space-2x);
+  outline: var(--cpd-border-width-1) solid
+    var(--cpd-color-border-interactive-primary);
+  outline-offset: calc(-1 * var(--cpd-border-width-1));
+  cursor: pointer;
+  transition: outline-color ease 0.15s;
+}
+
+.track[data-disabled] {
+  cursor: initial;
+  outline-color: var(--cpd-color-border-disabled);
+}
+
+.highlight {
+  background: var(--cpd-color-bg-action-primary-rest);
+  position: absolute;
+  block-size: 100%;
+  border-radius: var(--cpd-radius-pill-effect);
+  transition: background-color ease 0.15s;
+}
+
+.highlight[data-disabled] {
+  background: var(--cpd-color-bg-action-primary-disabled);
+}
+
+.handle {
+  display: block;
+  block-size: var(--cpd-space-4x);
+  inline-size: var(--cpd-space-4x);
+  border-radius: var(--cpd-radius-pill-effect);
+  background: var(--cpd-color-bg-action-primary-rest);
+  box-shadow: 0 0 0 2px var(--cpd-color-bg-canvas-default);
+  cursor: pointer;
+  transition: background-color ease 0.15s;
+}
+
+.handle[data-disabled] {
+  cursor: initial;
+  background: var(--cpd-color-bg-action-primary-disabled);
+}

src/Slider.tsx

@@ -0,0 +1,68 @@
+/*
+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 { FC, useCallback } from "react";
+import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
+import classNames from "classnames";
+
+import styles from "./Slider.module.css";
+
+interface Props {
+  className?: string;
+  label: string;
+  value: number;
+  onValueChange: (value: number) => void;
+  min: number;
+  max: number;
+  step: number;
+  disabled?: boolean;
+}
+
+/**
+ * A slider control allowing a value to be selected from a range.
+ */
+export const Slider: FC<Props> = ({
+  className,
+  label,
+  value,
+  onValueChange: onValueChangeProp,
+  min,
+  max,
+  step,
+  disabled,
+}) => {
+  const onValueChange = useCallback(
+    ([v]: number[]) => onValueChangeProp(v),
+    [onValueChangeProp],
+  );
+
+  return (
+    <Root
+      className={classNames(className, styles.slider)}
+      value={[value]}
+      onValueChange={onValueChange}
+      min={min}
+      max={max}
+      step={step}
+      disabled={disabled}
+    >
+      <Track className={styles.track}>
+        <Range className={styles.highlight} />
+      </Track>
+      <Thumb className={styles.handle} aria-label={label} />
+    </Root>
+  );
+};

src/UserMenuContainer.tsx

@@ -19,7 +19,7 @@ import { useHistory, useLocation } from "react-router-dom";
 
 import { useClientLegacy } from "./ClientContext";
 import { useProfile } from "./profile/useProfile";
-import { SettingsModal } from "./settings/SettingsModal";
+import { defaultSettingsTab, SettingsModal } from "./settings/SettingsModal";
 import { UserMenu } from "./UserMenu";
 
 interface Props {
@@ -37,17 +37,17 @@ export const UserMenuContainer: FC<Props> = ({ preventNavigation = false }) => {
     [setSettingsModalOpen],
   );
 
-  const [defaultSettingsTab, setDefaultSettingsTab] = useState<string>();
+  const [settingsTab, setSettingsTab] = useState(defaultSettingsTab);
 
   const onAction = useCallback(
     async (value: string) => {
       switch (value) {
         case "user":
-          setDefaultSettingsTab("profile");
+          setSettingsTab("profile");
           setSettingsModalOpen(true);
           break;
         case "settings":
-          setDefaultSettingsTab("audio");
+          setSettingsTab("audio");
           setSettingsModalOpen(true);
           break;
         case "logout":
@@ -76,9 +76,10 @@ export const UserMenuContainer: FC<Props> = ({ preventNavigation = false }) => {
       {client && (
         <SettingsModal
           client={client}
-          defaultTab={defaultSettingsTab}
           open={settingsModalOpen}
           onDismiss={onDismissSettingsModal}
+          tab={settingsTab}
+          onTabChange={setSettingsTab}
         />
       )}
     </>

src/button/Button.tsx

@@ -30,9 +30,6 @@ import SettingsSolidIcon from "@vector-im/compound-design-tokens/icons/settings-
 import ChevronDownIcon from "@vector-im/compound-design-tokens/icons/chevron-down.svg?react";
 
 import styles from "./Button.module.css";
-import Fullscreen from "../icons/Fullscreen.svg?react";
-import FullscreenExit from "../icons/FullscreenExit.svg?react";
-import { VolumeIcon } from "./VolumeIcon";
 
 export type ButtonVariant =
   | "default"
@@ -230,45 +227,3 @@ export const SettingsButton: FC<{
     </Tooltip>
   );
 };
-
-interface AudioButtonProps extends Omit<Props, "variant"> {
-  /**
-   * A number between 0 and 1
-   */
-  volume: number;
-}
-
-export const AudioButton: FC<AudioButtonProps> = ({ volume, ...rest }) => {
-  const { t } = useTranslation();
-
-  return (
-    <Tooltip label={t("local_volume_label")}>
-      <Button variant="icon" {...rest}>
-        <VolumeIcon volume={volume} aria-label={t("local_volume_label")} />
-      </Button>
-    </Tooltip>
-  );
-};
-
-interface FullscreenButtonProps extends Omit<Props, "variant"> {
-  fullscreen?: boolean;
-}
-
-export const FullscreenButton: FC<FullscreenButtonProps> = ({
-  fullscreen,
-  ...rest
-}) => {
-  const { t } = useTranslation();
-  const Icon = fullscreen ? FullscreenExit : Fullscreen;
-  const label = fullscreen
-    ? t("exit_fullscreen_button_label")
-    : t("fullscreen_button_label");
-
-  return (
-    <Tooltip label={label}>
-      <Button variant="icon" {...rest}>
-        <Icon aria-label={label} />
-      </Button>
-    </Tooltip>
-  );
-};

src/button/VolumeIcon.tsx

@@ -1,35 +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 { ComponentPropsWithoutRef, FC } from "react";
-
-import AudioMuted from "../icons/AudioMuted.svg?react";
-import AudioLow from "../icons/AudioLow.svg?react";
-import Audio from "../icons/Audio.svg?react";
-
-interface Props extends ComponentPropsWithoutRef<"svg"> {
-  /**
-   * Number between 0 and 1
-   */
-  volume: number;
-}
-
-export const VolumeIcon: FC<Props> = ({ volume, ...rest }) => {
-  if (volume <= 0) return <AudioMuted {...rest} />;
-  if (volume <= 0.5) return <AudioLow {...rest} />;
-  return <Audio {...rest} />;
-};

src/icons/AudioLow.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.9699 2.22605L6 7.20093L1.5 7.20093C0.671573 7.20093 0 7.8725 0 8.70093V15.3009C0 16.1294 0.671571 16.8009 1.5 16.8009L6 16.8009L11.9699 21.7758C12.4584 22.1829 13.2 21.8355 13.2 21.1996V2.80221C13.2 2.16634 12.4584 1.81897 11.9699 2.22605Z" fill="white"/>
-<path d="M17.5896 7.78682C17.2506 7.35087 16.6223 7.27234 16.1864 7.61141C15.7515 7.94959 15.6723 8.57548 16.0083 9.01128L16.0117 9.01586C16.0162 9.02185 16.0246 9.03334 16.0365 9.05007C16.0603 9.08359 16.0977 9.13784 16.1441 9.21085C16.2374 9.3574 16.3654 9.57639 16.4941 9.85222C16.7544 10.4099 17.0003 11.1627 17.0003 12.0008C17.0003 12.8388 16.7544 13.5916 16.4941 14.1493C16.3654 14.4251 16.2374 14.6441 16.1441 14.7907C16.0977 14.8637 16.0603 14.9179 16.0365 14.9514C16.0246 14.9682 16.0162 14.9797 16.0117 14.9857L16.0083 14.9903C15.6723 15.4261 15.7515 16.0519 16.1864 16.3901C16.6223 16.7292 17.2506 16.6506 17.5896 16.2147L16.8003 15.6008C17.5896 16.2147 17.5896 16.2147 17.5896 16.2147L17.5914 16.2124L17.5936 16.2095L17.5994 16.2021L17.6158 16.1802C17.6289 16.1626 17.6463 16.1389 17.6672 16.1094C17.709 16.0505 17.7654 15.9682 17.8315 15.8644C17.9632 15.6574 18.1352 15.3621 18.3065 14.9951C18.6462 14.267 19.0003 13.2199 19.0003 12.0008C19.0003 10.7816 18.6462 9.73448 18.3065 9.00645C18.1352 8.63942 17.9632 8.34412 17.8315 8.1371C17.7654 8.03333 17.709 7.95097 17.6672 7.89207C17.6463 7.8626 17.6289 7.83893 17.6158 7.82132L17.5994 7.79946L17.5936 7.79198L17.5914 7.78911L17.5905 7.78789C17.5905 7.78789 17.5896 7.78682 16.8003 8.40076L17.5896 7.78682Z" fill="white"/>
-</svg>

src/icons/AudioMuted.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2.63174 0.583224C2.15798 0.109466 1.38987 0.109466 0.91611 0.583224C0.442351 1.05698 0.442351 1.8251 0.91611 2.29885L5.3958 6.77855H5.37083L15.3629 16.7706V16.7456L20.7144 22.0972C21.1882 22.5709 21.9563 22.5709 22.4301 22.0972C22.9038 21.6234 22.9038 20.8553 22.4301 20.3816L2.63174 0.583224ZM15.3629 3.23319V9.88521L10.2275 4.74987L13.2404 2.2391C14.0833 1.53675 15.3629 2.13608 15.3629 3.23319ZM4.07191 16.8718H7.7929V16.872L13.2404 21.4116C14.0833 22.114 15.3629 21.5146 15.3629 20.4175V20.2018L2.4839 7.32287C1.87536 7.79641 1.48389 8.53577 1.48389 9.36657V14.2838C1.48389 15.7131 2.64258 16.8718 4.07191 16.8718Z" fill="white"/>
-</svg>

src/icons/Fullscreen.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21 8.59V4C21 3.45 20.55 3 20 3H15.41C14.52 3 14.07 4.08 14.7 4.71L16.29 6.3L6.29 16.3L4.7 14.71C4.08 14.08 3 14.52 3 15.41V20C3 20.55 3.45 21 4 21H8.59C9.48 21 9.93 19.92 9.3 19.29L7.71 17.7L17.71 7.7L19.3 9.29C19.92 9.92 21 9.48 21 8.59Z" fill="white"/>
-</svg>

src/icons/FullscreenExit.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M21.29 4.12L16.7 8.71L18.29 10.3C18.92 10.93 18.47 12.01 17.58 12.01H13C12.45 12.01 12 11.56 12 11.01V6.41C12 5.52 13.08 5.07 13.71 5.7L15.3 7.29L19.89 2.7C20.28 2.31 20.91 2.31 21.3 2.7C21.68 3.1 21.68 3.73 21.29 4.12ZM4.11997 21.29L8.70997 16.7L10.3 18.29C10.93 18.92 12.01 18.47 12.01 17.58V13C12.01 12.45 11.56 12 11.01 12H6.40997C5.51997 12 5.06997 13.08 5.69997 13.71L7.28997 15.3L2.69997 19.89C2.30997 20.28 2.30997 20.91 2.69997 21.3C3.09997 21.68 3.72997 21.68 4.11997 21.29Z" fill="white"/>
-</svg>

src/index.css

@@ -170,6 +170,9 @@ body,
 #root {
   display: flex;
   flex-direction: column;
+  /* The root should be a separate stacking context so that portalled elements
+  like modals and menus always appear over top of it */
+  isolation: isolate;
 }
 
 /* On Android and iOS, prefer native system fonts. The global.css file of

src/observable-utils.ts

@@ -0,0 +1,37 @@
+/*
+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 { Observable, defer, finalize, tap } from "rxjs";
+
+const nothing = Symbol("nothing");
+
+/**
+ * RxJS operator that invokes a callback when the Observable is finalized,
+ * passing the most recently emitted value. If no value was emitted, the
+ * callback will not be invoked.
+ */
+export function finalizeValue<T>(callback: (finalValue: T) => void) {
+  return (source: Observable<T>): Observable<T> =>
+    defer(() => {
+      let finalValue: T | typeof nothing = nothing;
+      return source.pipe(
+        tap((value) => (finalValue = value)),
+        finalize(() => {
+          if (finalValue !== nothing) callback(finalValue);
+        }),
+      );
+    });
+}

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,
+  contain: strict;
-  this was causing the Z-ordering of modals to glitch out. It can be added back
-  if those issues appear to be resolved. */
 }
 
 .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}
+            onOpenProfile={openProfile}
-            matrixInfo={matrixInfo}
           />
         );
       }
@@ -303,8 +304,7 @@ export const InCallView: FC<InCallViewProps> = subscribe(
               fullscreen={false}
               onToggleFullscreen={toggleFullscreen}
               showSpeakingIndicator={items.length > 2}
-              showConnectionStats={showConnectionStats}
+              onOpenProfile={openProfile}
-              matrixInfo={matrixInfo}
               {...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}
         />
       )}
     </>

src/settings/SettingsModal.tsx

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { ChangeEvent, FC, Key, ReactNode, useCallback, useState } from "react";
+import { ChangeEvent, FC, Key, ReactNode } from "react";
 import { Item } from "@react-stately/collections";
 import { Trans, useTranslation } from "react-i18next";
 import { MatrixClient } from "matrix-js-sdk";
@@ -47,15 +47,33 @@ import {
 } from "../livekit/MediaDevicesContext";
 import { widget } from "../widget";
 
+type SettingsTab =
+  | "audio"
+  | "video"
+  | "profile"
+  | "feedback"
+  | "more"
+  | "developer";
+
 interface Props {
   open: boolean;
   onDismiss: () => void;
+  tab: SettingsTab;
+  onTabChange: (tab: SettingsTab) => void;
   client: MatrixClient;
   roomId?: string;
-  defaultTab?: string;
 }
 
-export const SettingsModal: FC<Props> = (props) => {
+export const defaultSettingsTab: SettingsTab = "audio";
+
+export const SettingsModal: FC<Props> = ({
+  open,
+  onDismiss,
+  tab,
+  onTabChange,
+  client,
+  roomId,
+}) => {
   const { t } = useTranslation();
 
   const [optInAnalytics, setOptInAnalytics] = useOptInAnalytics();
@@ -92,15 +110,6 @@ export const SettingsModal: FC<Props> = (props) => {
     );
   };
 
-  const [selectedTab, setSelectedTab] = useState<string | undefined>();
-
-  const onSelectedTabChanged = useCallback(
-    (tab: Key) => {
-      setSelectedTab(tab.toString());
-    },
-    [setSelectedTab],
-  );
-
   const optInDescription = (
     <Caption>
       <Trans i18nKey="settings.opt_in_description">
@@ -113,7 +122,7 @@ export const SettingsModal: FC<Props> = (props) => {
   );
 
   const devices = useMediaDevices();
-  useMediaDeviceNames(devices, props.open);
+  useMediaDeviceNames(devices, open);
 
   const audioTab = (
     <TabItem
@@ -158,7 +167,7 @@ export const SettingsModal: FC<Props> = (props) => {
         </>
       }
     >
-      <ProfileSettingsTab client={props.client} />
+      <ProfileSettingsTab client={client} />
     </TabItem>
   );
 
@@ -172,7 +181,7 @@ export const SettingsModal: FC<Props> = (props) => {
         </>
       }
     >
-      <FeedbackSettingsTab roomId={props.roomId} />
+      <FeedbackSettingsTab roomId={roomId} />
     </TabItem>
   );
 
@@ -260,12 +269,12 @@ export const SettingsModal: FC<Props> = (props) => {
     <Modal
       title={t("common.settings")}
       className={styles.settingsModal}
-      open={props.open}
+      open={open}
-      onDismiss={props.onDismiss}
+      onDismiss={onDismiss}
     >
       <TabContainer
-        onSelectionChange={onSelectedTabChanged}
+        onSelectionChange={onTabChange as (tab: Key) => void}
-        selectedKey={selectedTab ?? props.defaultTab ?? "audio"}
+        selectedKey={tab}
         className={styles.tabContainer}
       >
         {tabs}

src/state/CallViewModel.ts

@@ -49,6 +49,7 @@ import {
   UserMediaTileViewModel,
   ScreenShareTileViewModel,
 } from "./TileViewModel";
+import { finalizeValue } from "../observable-utils";
 
 // Represents something that should get a tile on the layout,
 // ie. a user's video feed or a screen share feed.
@@ -164,6 +165,9 @@ export class CallViewModel extends ViewModel {
     },
   );
 
+  /**
+   * The media tiles to be displayed in the call view.
+   */
   public readonly tiles = state(
     combineLatest([
       this.remoteParticipants,
@@ -176,8 +180,8 @@ export class CallViewModel extends ViewModel {
         let allGhosts = true;
 
         const newTiles = ps.flatMap((p) => {
-          const id = p.identity;
+          const userMediaId = p.identity;
-          const member = findMatrixMember(this.matrixRoom, id);
+          const member = findMatrixMember(this.matrixRoom, userMediaId);
           allGhosts &&= member === undefined;
           const spokeRecently =
             p.lastSpokeAt !== undefined && now - +p.lastSpokeAt <= 10000;
@@ -185,27 +189,40 @@ export class CallViewModel extends ViewModel {
           // We always start with a local participant with the empty string as
           // their ID before we're connected, this is fine and we'll be in
           // "all ghosts" mode.
-          if (id !== "" && member === undefined) {
+          if (userMediaId !== "" && member === undefined) {
             logger.warn(
-              `Ruh, roh! No matrix member found for SFU participant '${id}': creating g-g-g-ghost!`,
+              `Ruh, roh! No matrix member found for SFU participant '${userMediaId}': creating g-g-g-ghost!`,
             );
           }
 
+          const userMediaVm =
+            tilesById.get(userMediaId)?.data ??
+            new UserMediaTileViewModel(userMediaId, member, p, this.encrypted);
+          tilesById.delete(userMediaId);
+
           const userMediaTile: TileDescriptor<TileViewModel> = {
-            id,
+            id: userMediaId,
             focused: false,
             isPresenter: p.isScreenShareEnabled,
             isSpeaker: (p.isSpeaking || spokeRecently) && !p.isLocal,
             hasVideo: p.isCameraEnabled,
             local: p.isLocal,
             largeBaseSize: false,
-            data:
+            data: userMediaVm,
-              tilesById.get(id)?.data ??
-              new UserMediaTileViewModel(id, member, p),
           };
 
           if (p.isScreenShareEnabled) {
-            const screenShareId = `${id}:screen-share`;
+            const screenShareId = `${userMediaId}:screen-share`;
+            const screenShareVm =
+              tilesById.get(screenShareId)?.data ??
+              new ScreenShareTileViewModel(
+                screenShareId,
+                member,
+                p,
+                this.encrypted,
+              );
+            tilesById.delete(screenShareId);
+
             const screenShareTile: TileDescriptor<TileViewModel> = {
               id: screenShareId,
               focused: true,
@@ -214,10 +231,8 @@ export class CallViewModel extends ViewModel {
               hasVideo: true,
               local: p.isLocal,
               largeBaseSize: true,
-              placeNear: id,
+              placeNear: userMediaId,
-              data:
+              data: screenShareVm,
-                tilesById.get(screenShareId)?.data ??
-                new ScreenShareTileViewModel(screenShareId, member, p),
             };
             return [userMediaTile, screenShareTile];
           } else {
@@ -225,10 +240,16 @@ export class CallViewModel extends ViewModel {
           }
         });
 
+        // Any tiles left in the map are unused and should be destroyed
+        for (const t of tilesById.values()) t.data.destroy();
+
         // If every item is a ghost, that probably means we're still connecting
         // and shouldn't bother showing anything yet
         return allGhosts ? [] : newTiles;
       }, [] as TileDescriptor<TileViewModel>[]),
+      finalizeValue((ts) => {
+        for (const t of ts) t.data.destroy();
+      }),
     ),
   );
 
@@ -236,6 +257,7 @@ export class CallViewModel extends ViewModel {
     // A call is permanently tied to a single Matrix room and LiveKit room
     private readonly matrixRoom: MatrixRoom,
     private readonly livekitRoom: LivekitRoom,
+    private readonly encrypted: boolean,
     private readonly connectionState: Observable<ECConnectionState>,
   ) {
     super();
@@ -245,18 +267,25 @@ export class CallViewModel extends ViewModel {
 export function useCallViewModel(
   matrixRoom: MatrixRoom,
   livekitRoom: LivekitRoom,
+  encrypted: boolean,
   connectionState: ECConnectionState,
 ): CallViewModel {
   const prevMatrixRoom = usePrevious(matrixRoom);
   const prevLivekitRoom = usePrevious(livekitRoom);
+  const prevEncrypted = usePrevious(encrypted);
   const connectionStateObservable = useObservable(connectionState);
 
   const vm = useRef<CallViewModel>();
-  if (matrixRoom !== prevMatrixRoom || livekitRoom !== prevLivekitRoom) {
+  if (
+    matrixRoom !== prevMatrixRoom ||
+    livekitRoom !== prevLivekitRoom ||
+    encrypted !== prevEncrypted
+  ) {
     vm.current?.destroy();
     vm.current = new CallViewModel(
       matrixRoom,
       livekitRoom,
+      encrypted,
       connectionStateObservable,
     );
   }

src/state/TileViewModel.ts

@@ -14,40 +14,219 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { LocalParticipant, RemoteParticipant } from "livekit-client";
+import {
+  AudioSource,
+  TrackReferenceOrPlaceholder,
+  VideoSource,
+  observeParticipantEvents,
+  observeParticipantMedia,
+} from "@livekit/components-core";
+import { StateObservable, state } from "@react-rxjs/core";
+import {
+  LocalParticipant,
+  LocalTrack,
+  Participant,
+  ParticipantEvent,
+  RemoteParticipant,
+  Track,
+  TrackEvent,
+  facingModeFromLocalTrack,
+} from "livekit-client";
 import { RoomMember } from "matrix-js-sdk/src/matrix";
+import {
+  BehaviorSubject,
+  combineLatest,
+  distinctUntilChanged,
+  distinctUntilKeyChanged,
+  fromEvent,
+  map,
+  of,
+  startWith,
+  switchMap,
+  takeUntil,
+} from "rxjs";
 
-export abstract class TileViewModel {
+import { ViewModel } from "./ViewModel";
-  // TODO: Properly separate the data layer from the UI layer by keeping the
+
-  // member and LiveKit participant objects internal. The only LiveKit-specific
+function observeTrackReference(
-  // thing we need to expose here is a TrackReference for the video, everything
+  participant: Participant,
-  // else should be simple strings, flags, and callbacks.
+  source: Track.Source,
-  public abstract readonly id: string;
+): StateObservable<TrackReferenceOrPlaceholder> {
-  public abstract readonly member: RoomMember | undefined;
+  return state(
-  public abstract readonly sfuParticipant: LocalParticipant | RemoteParticipant;
+    observeParticipantMedia(participant).pipe(
+      map(() => ({
+        participant,
+        publication: participant.getTrack(source),
+        source,
+      })),
+      distinctUntilKeyChanged("publication"),
+    ),
+  );
 }
 
-// Right now it looks kind of pointless to have user media and screen share be
+abstract class BaseTileViewModel extends ViewModel {
-// represented by two classes rather than a single flag, but this will come in
+  /**
-// handy when we go to move more business logic out of VideoTile and into this
+   * Whether the tile belongs to the local user.
-// file
+   */
+  public readonly local = this.participant.isLocal;
+  /**
+   * The LiveKit video track to be shown on this tile.
+   */
+  public readonly video: StateObservable<TrackReferenceOrPlaceholder>;
+  /**
+   * Whether there should be a warning that this media is unencrypted.
+   */
+  public readonly unencryptedWarning: StateObservable<boolean>;
 
-export class UserMediaTileViewModel extends TileViewModel {
   public constructor(
+    // TODO: This is only needed for full screen toggling and can be removed as
+    // soon as that code is moved into the view models
     public readonly id: string,
+    /**
+     * The Matrix room member to which this tile belongs.
+     */
+    // TODO: Fully separate the data layer from the UI layer by keeping the
+    // member object internal
     public readonly member: RoomMember | undefined,
-    public readonly sfuParticipant: LocalParticipant | RemoteParticipant,
+    protected readonly participant: LocalParticipant | RemoteParticipant,
+    callEncrypted: boolean,
+    audioSource: AudioSource,
+    videoSource: VideoSource,
   ) {
     super();
+    const audio = observeTrackReference(participant, audioSource);
+    this.video = observeTrackReference(participant, videoSource);
+    this.unencryptedWarning = state(
+      combineLatest(
+        [audio, this.video],
+        (a, v) =>
+          callEncrypted &&
+          (a.publication?.isEncrypted === false ||
+            v.publication?.isEncrypted === false),
+      ).pipe(distinctUntilChanged()),
+    );
   }
 }
 
-export class ScreenShareTileViewModel extends TileViewModel {
+/**
+ * A tile displaying some media.
+ */
+export type TileViewModel = UserMediaTileViewModel | ScreenShareTileViewModel;
+
+/**
+ * A tile displaying some participant's user media.
+ */
+export class UserMediaTileViewModel extends BaseTileViewModel {
+  /**
+   * Whether the video should be mirrored.
+   */
+  public readonly mirror = state(
+    this.video.pipe(
+      switchMap((v) => {
+        const track = v.publication?.track;
+        if (!(track instanceof LocalTrack)) return of(false);
+        // Watch for track restarts, because they indicate a camera switch
+        return fromEvent(track, TrackEvent.Restarted).pipe(
+          startWith(null),
+          // Mirror only front-facing cameras (those that face the user)
+          map(() => facingModeFromLocalTrack(track).facingMode === "user"),
+        );
+      }),
+    ),
+  );
+
+  /**
+   * Whether the participant is speaking.
+   */
+  public readonly speaking = state(
+    observeParticipantEvents(
+      this.participant,
+      ParticipantEvent.IsSpeakingChanged,
+    ).pipe(map((p) => p.isSpeaking)),
+  );
+
+  private readonly _locallyMuted = new BehaviorSubject(false);
+  /**
+   * Whether we've disabled this participant's audio.
+   */
+  public readonly locallyMuted = state(this._locallyMuted);
+
+  private readonly _localVolume = new BehaviorSubject(1);
+  /**
+   * The volume to which we've set this participant's audio, as a scalar
+   * multiplier.
+   */
+  public readonly localVolume = state(this._localVolume);
+
+  /**
+   * Whether this participant is sending audio (i.e. is unmuted on their side).
+   */
+  public readonly audioEnabled: StateObservable<boolean>;
+  /**
+   * Whether this participant is sending video.
+   */
+  public readonly videoEnabled: StateObservable<boolean>;
+
   public constructor(
-    public readonly id: string,
+    id: string,
-    public readonly member: RoomMember | undefined,
+    member: RoomMember | undefined,
-    public readonly sfuParticipant: LocalParticipant | RemoteParticipant,
+    participant: LocalParticipant | RemoteParticipant,
+    callEncrypted: boolean,
   ) {
-    super();
+    super(
+      id,
+      member,
+      participant,
+      callEncrypted,
+      Track.Source.Microphone,
+      Track.Source.Camera,
+    );
+
+    const media = observeParticipantMedia(participant);
+    this.audioEnabled = state(
+      media.pipe(map((m) => m.microphoneTrack?.isMuted === false)),
+    );
+    this.videoEnabled = state(
+      media.pipe(map((m) => m.cameraTrack?.isMuted === false)),
+    );
+
+    // Sync the local mute state and volume with LiveKit
+    if (!this.local)
+      combineLatest([this._locallyMuted, this._localVolume], (muted, volume) =>
+        muted ? 0 : volume,
+      )
+        .pipe(takeUntil(this.destroyed))
+        .subscribe((volume) => {
+          (this.participant as RemoteParticipant).setVolume(volume);
+        });
+  }
+
+  public toggleLocallyMuted(): void {
+    this._locallyMuted.next(!this._locallyMuted.value);
+  }
+
+  public setLocalVolume(value: number): void {
+    this._localVolume.next(value);
+  }
+}
+
+/**
+ * A tile displaying some participant's screen share.
+ */
+export class ScreenShareTileViewModel extends BaseTileViewModel {
+  public constructor(
+    id: string,
+    member: RoomMember | undefined,
+    participant: LocalParticipant | RemoteParticipant,
+    callEncrypted: boolean,
+  ) {
+    super(
+      id,
+      member,
+      participant,
+      callEncrypted,
+      Track.Source.ScreenShareAudio,
+      Track.Source.ScreenShare,
+    );
   }
 }

src/state/subscribe.tsx

@@ -14,7 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { FC } from "react";
+import {
+  ForwardRefExoticComponent,
+  ForwardRefRenderFunction,
+  PropsWithoutRef,
+  RefAttributes,
+  forwardRef,
+} from "react";
 // eslint-disable-next-line no-restricted-imports
 import { Subscribe, RemoveSubscribe } from "@react-rxjs/core";
 
@@ -23,15 +29,17 @@ import { Subscribe, RemoveSubscribe } from "@react-rxjs/core";
  * that safely subscribes to its Observables before rendering. The component
  * will return null until the subscriptions are created.
  */
-export function subscribe<P>(render: FC<P>): FC<P> {
+export function subscribe<P, R>(
-  const InnerComponent: FC<{ p: P }> = ({ p }) => (
+  render: ForwardRefRenderFunction<R, P>,
-    <RemoveSubscribe>{render(p)}</RemoveSubscribe>
+): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<R>> {
-  );
+  const InnerComponent = forwardRef<R, { p: P }>(({ p }, ref) => (
-  const OuterComponent: FC<P> = (p) => (
+    <RemoveSubscribe>{render(p, ref)}</RemoveSubscribe>
+  ));
+  const OuterComponent = forwardRef<R, P>((p, ref) => (
     <Subscribe>
-      <InnerComponent p={p} />
+      <InnerComponent ref={ref} p={p} />
     </Subscribe>
-  );
+  ));
   // Copy over the component's display name, default props, etc.
   Object.assign(OuterComponent, render);
   return OuterComponent;

src/video-grid/VideoGrid.tsx

@@ -112,7 +112,7 @@ export function useVideoGridLayout(hasScreenshareFeeds: boolean): {
   return { layout: layoutRef.current, setLayout };
 }
 
-const GAP = 8;
+const GAP = 20;
 
 function useIsMounted(): MutableRefObject<boolean> {
   const isMountedRef = useRef<boolean>(false);

src/video-grid/VideoTile.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.
@@ -16,26 +16,63 @@ limitations under the License.
 
 .videoTile {
   position: absolute;
-  contain: strict;
   top: 0;
   container-name: videoTile;
   container-type: size;
   border-radius: var(--cpd-space-4x);
-  overflow: hidden;
+  transition: outline-color ease 0.15s;
-  cursor: pointer;
+  outline: var(--cpd-border-width-2) solid rgb(0 0 0 / 0);
-  outline: 2px solid rgba(0, 0, 0, 0);
-  transition:
-    outline-radius ease 0.15s,
-    outline-color ease 0.15s;
 }
 
-.videoTile * {
+/* Use a pseudo-element to create the expressive speaking border, since CSS
-  user-select: none;
+borders don't support gradients */
+.videoTile::before {
+  content: "";
+  position: absolute;
+  z-index: -1; /* Put it below the outline */
+  opacity: 0; /* Hidden unless speaking */
+  transition: opacity ease 0.15s;
+  inset: calc(-1 * var(--cpd-border-width-4));
+  border-radius: var(--cpd-space-5x);
+  background: linear-gradient(
+      119deg,
+      rgba(13, 92, 189, 0.7) 0%,
+      rgba(13, 189, 168, 0.7) 100%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(13, 92, 189, 0.9) 0%,
+      rgba(13, 189, 168, 0.9) 100%
+    );
+  background-blend-mode: overlay, normal;
+}
+
+.videoTile.speaking {
+  /* !important because speaking border should take priority over hover */
+  outline: var(--cpd-border-width-1) solid var(--cpd-color-bg-canvas-default) !important;
+}
+
+.videoTile.speaking::before {
+  opacity: 1;
+}
+
+@media (hover: hover) {
+  .videoTile:hover {
+    outline: var(--cpd-border-width-2) solid
+      var(--cpd-color-border-interactive-hovered);
+  }
+}
+
+.videoTile.maximised {
+  position: relative;
+  border-radius: 0;
+  inline-size: 100%;
+  block-size: 100%;
 }
 
 .videoTile video {
-  width: 100%;
+  inline-size: 100%;
-  height: 100%;
+  block-size: 100%;
   object-fit: cover;
   background-color: var(--cpd-color-bg-subtle-primary);
   /* This transform is a no-op, but it forces Firefox to use a different
@@ -44,36 +81,69 @@ limitations under the License.
   transform: translate(0);
 }
 
-.videoTile.isLocal:not(.screenshare) video {
+.videoTile.mirror video {
   transform: scaleX(-1);
 }
 
-.videoTile.speaking {
+.videoTile.screenshare video {
-  /* !important because speaking border should take priority over hover */
-  outline: 4px solid var(--cpd-color-border-accent) !important;
-}
-
-@media (hover: hover) {
-  .videoTile:hover {
-    outline: 2px solid var(--cpd-color-gray-1400);
-  }
-}
-
-.videoTile.maximised {
-  position: relative;
-  border-radius: 0;
-  height: 100%;
-  width: 100%;
-}
-
-.videoTile.screenshare > video {
   object-fit: contain;
 }
 
-.nameTag {
+.videoTile.videoMuted video {
+  display: none;
+}
+
+.bg {
+  background-color: var(--cpd-color-bg-subtle-secondary);
+  inline-size: 100%;
+  block-size: 100%;
+  border-radius: inherit;
+  contain: strict;
+}
+
+.avatar {
+  display: none;
   position: absolute;
-  inset-inline-start: var(--cpd-space-1x);
+  top: 50%;
-  inset-block-end: var(--cpd-space-1x);
+  left: 50%;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.videoTile.videoMuted .avatar {
+  display: initial;
+}
+
+/* CSS makes us put a condition here, even though all we want to do is
+unconditionally select the container so we can use cqmin units */
+@container videoTile (width > 0) {
+  .avatar {
+    /* Half of the smallest dimension of the tile */
+    inline-size: 50cqmin;
+    block-size: 50cqmin;
+  }
+}
+
+.avatar > img {
+  /* To make avatars scale smoothly with their tiles during animations, we
+  override the styles set on the element */
+  inline-size: 100% !important;
+  block-size: 100% !important;
+}
+
+.fg {
+  position: absolute;
+  inset: var(--cpd-space-1x);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: 1fr auto;
+  grid-template-areas: ". button2" "nameTag button1";
+  gap: var(--cpd-space-1x);
+  place-items: start;
+}
+
+.nameTag {
+  grid-area: nameTag;
   padding: var(--cpd-space-1x);
   padding-block: var(--cpd-space-1x);
   color: var(--cpd-color-text-primary);
@@ -82,10 +152,10 @@ limitations under the License.
   align-items: center;
   border-radius: var(--cpd-radius-pill-effect);
   user-select: none;
-  max-width: calc(100% - 48px);
   overflow: hidden;
-  z-index: 1;
   box-shadow: var(--small-drop-shadow);
+  box-sizing: border-box;
+  max-inline-size: 100%;
 }
 
 .nameTag > svg {
@@ -111,94 +181,56 @@ limitations under the License.
   color: var(--cpd-color-icon-critical-primary);
 }
 
-.toolbar {
+.fg > button {
-  position: absolute;
+  appearance: none;
-  top: 0;
+  border: none;
-  left: 0;
+  border-radius: var(--cpd-radius-pill-effect);
-
+  padding: var(--cpd-space-1x);
-  width: 100%;
+  background: var(--cpd-color-bg-action-primary-rest);
-  height: 42px;
+  box-shadow: var(--small-drop-shadow);
-
+  cursor: pointer;
-  color: var(--cpd-color-text-primary);
+  opacity: 0;
-  background-color: var(--stopgap-background-85);
-
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-
-  overflow: hidden;
-  z-index: 1;
-
   transition: opacity ease 0.15s;
 }
 
-.toolbar:not(:hover) {
+.fg > button:focus-visible,
-  opacity: 0;
+.fg > :focus-visible ~ button,
+.fg > button[data-enabled="true"],
+.fg > button[data-state="open"] {
+  opacity: 1;
 }
 
-.toolbar:hover + .presenterLabel {
+@media (hover) {
-  top: calc(42px + 20px); /* toolbar + margin */
+  .fg:hover > button {
-}
+    opacity: 1;
+  }
 
-.button {
+  .fg > button:hover {
-  margin-right: 16px;
+    background: var(--cpd-color-bg-action-primary-hovered);
-}
-
-.button svg {
-  width: 16px;
-  height: 16px;
-}
-
-.videoMutedOverlay {
-  width: 100%;
-  height: 100%;
-  background-color: var(--cpd-color-bg-subtle-secondary);
-}
-
-.presenterLabel {
-  position: absolute;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: var(--stopgap-background-85);
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 4px 8px;
-  font-weight: normal;
-  font-size: var(--font-size-caption);
-  line-height: var(--font-size-body);
-}
-
-.screensharePIP {
-  bottom: 8px;
-  right: 8px;
-  width: 25%;
-  max-width: 360px;
-  border-radius: 20px;
-}
-
-.debugInfo {
-  position: absolute;
-  top: 16px;
-  left: 16px;
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-/* CSS makes us put a condition here, even though all we want to do is
-unconditionally select the container so we can use cqmin units */
-@container videoTile (width > 0) {
-  .avatar {
-    position: absolute;
-    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: 50cqmin; /* Half of the smallest dimension of the tile */
-    width: var(--avatarSize) !important;
-    height: var(--avatarSize) !important;
-    border-radius: 10000px !important;
   }
 }
+
+.fg > button:active {
+  background: var(--cpd-color-bg-action-primary-pressed) !important;
+}
+
+.fg > button[data-state="open"] {
+  background: var(--cpd-color-bg-action-primary-pressed);
+}
+
+.fg > button > svg {
+  display: block;
+  color: var(--cpd-color-icon-on-solid-primary);
+}
+
+.fg > button:first-of-type {
+  grid-area: button1;
+}
+
+.fg > button:nth-of-type(2) {
+  grid-area: button2;
+}
+
+.volumeSlider {
+  width: 100%;
+}

src/video-grid/VideoTile.tsx

@@ -16,6 +16,8 @@ limitations under the License.
 
 import {
   ComponentProps,
+  ForwardedRef,
+  ReactNode,
   forwardRef,
   useCallback,
   useEffect,
@@ -24,11 +26,9 @@ import {
 import { animated } from "@react-spring/web";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
-import { LocalParticipant, RemoteParticipant, Track } from "livekit-client";
 import {
-  ConnectionQualityIndicator,
+  TrackReferenceOrPlaceholder,
   VideoTrack,
-  useMediaTrack,
 } from "@livekit/components-react";
 import {
   RoomMember,
@@ -37,196 +37,121 @@ import {
 import MicOnSolidIcon from "@vector-im/compound-design-tokens/icons/mic-on-solid.svg?react";
 import MicOffSolidIcon from "@vector-im/compound-design-tokens/icons/mic-off-solid.svg?react";
 import ErrorIcon from "@vector-im/compound-design-tokens/icons/error.svg?react";
-import { Text, Tooltip } from "@vector-im/compound-web";
+import MicOffOutlineIcon from "@vector-im/compound-design-tokens/icons/mic-off-outline.svg?react";
+import OverflowHorizontalIcon from "@vector-im/compound-design-tokens/icons/overflow-horizontal.svg?react";
+import VolumeOnIcon from "@vector-im/compound-design-tokens/icons/volume-on.svg?react";
+import VolumeOffIcon from "@vector-im/compound-design-tokens/icons/volume-off.svg?react";
+import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg?react";
+import ExpandIcon from "@vector-im/compound-design-tokens/icons/expand.svg?react";
+import CollapseIcon from "@vector-im/compound-design-tokens/icons/collapse.svg?react";
+import {
+  Text,
+  Tooltip,
+  ContextMenu,
+  MenuItem,
+  ToggleMenuItem,
+  Menu,
+} from "@vector-im/compound-web";
+import { useStateObservable } from "@react-rxjs/core";
 
 import { Avatar } from "../Avatar";
 import styles from "./VideoTile.module.css";
 import { useReactiveState } from "../useReactiveState";
-import { AudioButton, FullscreenButton } from "../button/Button";
-import { VideoTileSettingsModal } from "./VideoTileSettingsModal";
-import { MatrixInfo } from "../room/VideoPreview";
 import {
   ScreenShareTileViewModel,
   TileViewModel,
   UserMediaTileViewModel,
 } from "../state/TileViewModel";
+import { subscribe } from "../state/subscribe";
+import { useMergedRefs } from "../useMergedRefs";
+import { Slider } from "../Slider";
 
-export interface ItemData {
+interface TileProps {
-  id: string;
+  tileRef?: ForwardedRef<HTMLDivElement>;
-  member?: RoomMember;
-  sfuParticipant: LocalParticipant | RemoteParticipant;
-  content: TileContent;
-}
-
-export enum TileContent {
-  UserMedia = "user-media",
-  ScreenShare = "screen-share",
-}
-
-interface Props {
-  vm: TileViewModel;
-  maximised: boolean;
-  fullscreen: boolean;
-  onToggleFullscreen: (itemId: string) => void;
-  // TODO: Refactor these props.
-  targetWidth: number;
-  targetHeight: number;
   className?: string;
   style?: ComponentProps<typeof animated.div>["style"];
-  showSpeakingIndicator: boolean;
+  targetWidth: number;
-  showConnectionStats: boolean;
+  targetHeight: number;
-  // TODO: This dependency in particular should probably not be here. We can fix
+  video: TrackReferenceOrPlaceholder;
-  // this with a view model.
+  member: RoomMember | undefined;
-  matrixInfo: MatrixInfo;
+  videoEnabled: boolean;
+  maximised: boolean;
+  unencryptedWarning: boolean;
+  nameTagLeadingIcon?: ReactNode;
+  nameTag: string;
+  displayName: string;
+  primaryButton: ReactNode;
+  secondaryButton?: ReactNode;
+  [k: string]: unknown;
 }
 
-export const VideoTile = forwardRef<HTMLDivElement, Props>(
+const Tile = forwardRef<HTMLDivElement, TileProps>(
   (
     {
-      vm,
+      tileRef = null,
-      maximised,
-      fullscreen,
-      onToggleFullscreen,
       className,
       style,
       targetWidth,
       targetHeight,
-      showSpeakingIndicator,
+      video,
-      showConnectionStats,
+      member,
-      matrixInfo,
+      videoEnabled,
+      maximised,
+      unencryptedWarning,
+      nameTagLeadingIcon,
+      nameTag,
+      displayName,
+      primaryButton,
+      secondaryButton,
+      ...props
     },
-    tileRef,
+    ref,
   ) => {
     const { t } = useTranslation();
-
+    const mergedRef = useMergedRefs(tileRef, ref);
-    const { id, sfuParticipant, member } = vm;
-
-    // Handle display name changes.
-    const [displayName, setDisplayName] = useReactiveState(
-      () => member?.rawDisplayName ?? "[👻]",
-      [member],
-    );
-    useEffect(() => {
-      if (member) {
-        const updateName = (): void => {
-          setDisplayName(member.rawDisplayName);
-        };
-
-        member!.on(RoomMemberEvent.Name, updateName);
-        return (): void => {
-          member!.removeListener(RoomMemberEvent.Name, updateName);
-        };
-      }
-    }, [member, setDisplayName]);
-
-    const audioInfo = useMediaTrack(
-      vm instanceof UserMediaTileViewModel
-        ? Track.Source.Microphone
-        : Track.Source.ScreenShareAudio,
-      sfuParticipant,
-    );
-    const videoInfo = useMediaTrack(
-      vm instanceof UserMediaTileViewModel
-        ? Track.Source.Camera
-        : Track.Source.ScreenShare,
-      sfuParticipant,
-    );
-    const muted = audioInfo.isMuted !== false;
-    const encrypted =
-      audioInfo.publication?.isEncrypted !== false &&
-      videoInfo.publication?.isEncrypted !== false;
-
-    const MicIcon = muted ? MicOffSolidIcon : MicOnSolidIcon;
-
-    const onFullscreen = useCallback(() => {
-      onToggleFullscreen(id);
-    }, [id, onToggleFullscreen]);
-
-    const [videoTileSettingsModalOpen, setVideoTileSettingsModalOpen] =
-      useState(false);
-    const openVideoTileSettingsModal = useCallback(
-      () => setVideoTileSettingsModalOpen(true),
-      [setVideoTileSettingsModalOpen],
-    );
-    const closeVideoTileSettingsModal = useCallback(
-      () => setVideoTileSettingsModalOpen(false),
-      [setVideoTileSettingsModalOpen],
-    );
-
-    const toolbarButtons: JSX.Element[] = [];
-    if (!sfuParticipant.isLocal) {
-      toolbarButtons.push(
-        <AudioButton
-          key="localVolume"
-          className={styles.button}
-          volume={(sfuParticipant as RemoteParticipant).getVolume() ?? 0}
-          onPress={openVideoTileSettingsModal}
-        />,
-      );
-
-      if (vm instanceof ScreenShareTileViewModel) {
-        toolbarButtons.push(
-          <FullscreenButton
-            key="fullscreen"
-            className={styles.button}
-            fullscreen={fullscreen}
-            onPress={onFullscreen}
-          />,
-        );
-      }
-    }
 
     return (
       <animated.div
         className={classNames(styles.videoTile, className, {
-          [styles.isLocal]: sfuParticipant.isLocal,
-          [styles.speaking]:
-            sfuParticipant.isSpeaking &&
-            vm instanceof UserMediaTileViewModel &&
-            showSpeakingIndicator,
-          [styles.screenshare]: vm instanceof ScreenShareTileViewModel,
           [styles.maximised]: maximised,
+          [styles.videoMuted]: !videoEnabled,
         })}
         style={style}
-        ref={tileRef}
+        ref={mergedRef}
         data-testid="videoTile"
+        {...props}
       >
-        {toolbarButtons.length > 0 && (!maximised || fullscreen) && (
+        <div className={styles.bg}>
-          <div className={classNames(styles.toolbar)}>{toolbarButtons}</div>
+          <Avatar
-        )}
+            id={member?.userId ?? displayName}
-        {vm instanceof UserMediaTileViewModel &&
+            name={displayName}
-          !sfuParticipant.isCameraEnabled && (
+            size={Math.round(Math.min(targetWidth, targetHeight) / 2)}
-            <>
+            src={member?.getMxcAvatarUrl()}
-              <div className={styles.videoMutedOverlay} />
+            className={styles.avatar}
-              <Avatar
+          />
-                key={member?.userId}
+          {video.publication !== undefined && (
-                id={member?.userId ?? displayName}
+            <VideoTrack
-                name={displayName}
+              trackRef={video}
-                size={Math.round(Math.min(targetWidth, targetHeight) / 2)}
+              // There's no reason for this to be focusable
-                src={member?.getMxcAvatarUrl()}
+              tabIndex={-1}
-                className={styles.avatar}
+              // React supports the disablePictureInPicture attribute, but Firefox
-              />
+              // only recognizes a value of "true", whereas React sets it to the empty
-            </>
+              // string. So we need to bypass React and set it specifically to "true".
-          )}
+              // https://bugzilla.mozilla.org/show_bug.cgi?id=1865748
-        {vm instanceof ScreenShareTileViewModel ? (
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          <div className={styles.presenterLabel}>
+              // @ts-ignore
-            <span>{t("video_tile.presenter_label", { displayName })}</span>
+              // eslint-disable-next-line react/no-unknown-property
-          </div>
+              disablepictureinpicture="true"
-        ) : (
-          <div className={styles.nameTag}>
-            <MicIcon
-              width={20}
-              height={20}
-              aria-label={muted ? t("microphone_off") : t("microphone_on")}
-              data-muted={muted}
-              className={styles.muteIcon}
             />
+          )}
+        </div>
+        <div className={styles.fg}>
+          <div className={styles.nameTag}>
+            {nameTagLeadingIcon}
             <Text as="span" size="sm" weight="medium">
-              {sfuParticipant.isLocal
+              {nameTag}
-                ? t("video_tile.sfu_participant_local")
-                : displayName}
             </Text>
-            {matrixInfo.roomEncrypted && !encrypted && (
+            {unencryptedWarning && (
               <Tooltip label={t("common.unencrypted")} side="bottom">
                 <ErrorIcon
                   width={20}
@@ -242,42 +167,307 @@ export const VideoTile = forwardRef<HTMLDivElement, Props>(
                 />
               </Tooltip>
             )}
-            {showConnectionStats && (
-              <ConnectionQualityIndicator participant={sfuParticipant} />
-            )}
           </div>
-        )}
+          {primaryButton}
-        <VideoTrack
+          {secondaryButton}
-          participant={sfuParticipant}
+        </div>
-          source={
-            vm instanceof UserMediaTileViewModel
-              ? Track.Source.Camera
-              : Track.Source.ScreenShare
-          }
-          // There's no reason for this to be focusable
-          tabIndex={-1}
-          // React supports the disablePictureInPicture attribute, but Firefox
-          // only recognizes a value of "true", whereas React sets it to the empty
-          // string. So we need to bypass React and set it specifically to "true".
-          // https://bugzilla.mozilla.org/show_bug.cgi?id=1865748
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          // eslint-disable-next-line react/no-unknown-property
-          disablepictureinpicture="true"
-        />
-        {!maximised && sfuParticipant instanceof RemoteParticipant && (
-          <VideoTileSettingsModal
-            participant={sfuParticipant}
-            media={
-              vm instanceof UserMediaTileViewModel
-                ? "user media"
-                : "screen share"
-            }
-            open={videoTileSettingsModalOpen}
-            onDismiss={closeVideoTileSettingsModal}
-          />
-        )}
       </animated.div>
     );
   },
 );
+
+interface UserMediaTileProps {
+  vm: UserMediaTileViewModel;
+  className?: string;
+  style?: ComponentProps<typeof animated.div>["style"];
+  targetWidth: number;
+  targetHeight: number;
+  nameTag: string;
+  displayName: string;
+  maximised: boolean;
+  onOpenProfile: () => void;
+  showSpeakingIndicator: boolean;
+}
+
+const UserMediaTile = subscribe<UserMediaTileProps, HTMLDivElement>(
+  (
+    {
+      vm,
+      className,
+      style,
+      targetWidth,
+      targetHeight,
+      nameTag,
+      displayName,
+      maximised,
+      onOpenProfile,
+      showSpeakingIndicator,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+    const video = useStateObservable(vm.video);
+    const audioEnabled = useStateObservable(vm.audioEnabled);
+    const videoEnabled = useStateObservable(vm.videoEnabled);
+    const unencryptedWarning = useStateObservable(vm.unencryptedWarning);
+    const mirror = useStateObservable(vm.mirror);
+    const speaking = useStateObservable(vm.speaking);
+    const locallyMuted = useStateObservable(vm.locallyMuted);
+    const localVolume = useStateObservable(vm.localVolume);
+    const onChangeMute = useCallback(() => vm.toggleLocallyMuted(), [vm]);
+    const onSelectMute = useCallback((e: Event) => e.preventDefault(), []);
+    const onChangeLocalVolume = useCallback(
+      (v: number) => vm.setLocalVolume(v),
+      [vm],
+    );
+
+    const MicIcon = audioEnabled ? MicOnSolidIcon : MicOffSolidIcon;
+    const VolumeIcon = locallyMuted ? VolumeOffIcon : VolumeOnIcon;
+
+    const [menuOpen, setMenuOpen] = useState(false);
+    const menu = vm.local ? (
+      <>
+        <MenuItem
+          Icon={UserProfileIcon}
+          label={t("common.profile")}
+          onSelect={onOpenProfile}
+        />
+      </>
+    ) : (
+      <>
+        <ToggleMenuItem
+          Icon={MicOffOutlineIcon}
+          label={t("video_tile.mute_for_me")}
+          checked={locallyMuted}
+          onChange={onChangeMute}
+          onSelect={onSelectMute}
+        />
+        {/* TODO: Figure out how to make this slider keyboard accessible */}
+        <MenuItem as="div" Icon={VolumeIcon} label={null} onSelect={null}>
+          <Slider
+            className={styles.volumeSlider}
+            label={t("video_tile.volume")}
+            value={localVolume}
+            onValueChange={onChangeLocalVolume}
+            min={0.1}
+            max={1}
+            step={0.01}
+            disabled={locallyMuted}
+          />
+        </MenuItem>
+      </>
+    );
+
+    const tile = (
+      <Tile
+        tileRef={ref}
+        className={classNames(className, {
+          [styles.mirror]: mirror,
+          [styles.speaking]: showSpeakingIndicator && speaking,
+        })}
+        style={style}
+        targetWidth={targetWidth}
+        targetHeight={targetHeight}
+        video={video}
+        member={vm.member}
+        videoEnabled={videoEnabled}
+        maximised={maximised}
+        unencryptedWarning={unencryptedWarning}
+        nameTagLeadingIcon={
+          <MicIcon
+            width={20}
+            height={20}
+            aria-label={audioEnabled ? t("microphone_on") : t("microphone_off")}
+            data-muted={!audioEnabled}
+            className={styles.muteIcon}
+          />
+        }
+        nameTag={nameTag}
+        displayName={displayName}
+        primaryButton={
+          <Menu
+            open={menuOpen}
+            onOpenChange={setMenuOpen}
+            title={nameTag}
+            trigger={
+              <button aria-label={t("common.options")}>
+                <OverflowHorizontalIcon aria-hidden width={20} height={20} />
+              </button>
+            }
+            side="left"
+            align="start"
+          >
+            {menu}
+          </Menu>
+        }
+      />
+    );
+
+    return (
+      <ContextMenu title={nameTag} trigger={tile}>
+        {menu}
+      </ContextMenu>
+    );
+  },
+);
+
+interface ScreenShareTileProps {
+  vm: ScreenShareTileViewModel;
+  className?: string;
+  style?: ComponentProps<typeof animated.div>["style"];
+  targetWidth: number;
+  targetHeight: number;
+  nameTag: string;
+  displayName: string;
+  maximised: boolean;
+  fullscreen: boolean;
+  onToggleFullscreen: (itemId: string) => void;
+}
+
+const ScreenShareTile = subscribe<ScreenShareTileProps, HTMLDivElement>(
+  (
+    {
+      vm,
+      className,
+      style,
+      targetWidth,
+      targetHeight,
+      nameTag,
+      displayName,
+      maximised,
+      fullscreen,
+      onToggleFullscreen,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+    const video = useStateObservable(vm.video);
+    const unencryptedWarning = useStateObservable(vm.unencryptedWarning);
+    const onClickFullScreen = useCallback(
+      () => onToggleFullscreen(vm.id),
+      [onToggleFullscreen, vm],
+    );
+
+    const FullScreenIcon = fullscreen ? CollapseIcon : ExpandIcon;
+
+    return (
+      <Tile
+        ref={ref}
+        className={classNames(className, styles.screenshare)}
+        style={style}
+        targetWidth={targetWidth}
+        targetHeight={targetHeight}
+        video={video}
+        member={vm.member}
+        videoEnabled={true}
+        maximised={maximised}
+        unencryptedWarning={unencryptedWarning}
+        nameTag={nameTag}
+        displayName={displayName}
+        primaryButton={
+          !vm.local && (
+            <button
+              aria-label={
+                fullscreen
+                  ? t("video_tile.full_screen")
+                  : t("video_tile.exit_full_screen")
+              }
+              onClick={onClickFullScreen}
+            >
+              <FullScreenIcon aria-hidden width={20} height={20} />
+            </button>
+          )
+        }
+      />
+    );
+  },
+);
+
+interface Props {
+  vm: TileViewModel;
+  maximised: boolean;
+  fullscreen: boolean;
+  onToggleFullscreen: (itemId: string) => void;
+  onOpenProfile: () => void;
+  targetWidth: number;
+  targetHeight: number;
+  className?: string;
+  style?: ComponentProps<typeof animated.div>["style"];
+  showSpeakingIndicator: boolean;
+}
+
+export const VideoTile = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      vm,
+      maximised,
+      fullscreen,
+      onToggleFullscreen,
+      onOpenProfile,
+      className,
+      style,
+      targetWidth,
+      targetHeight,
+      showSpeakingIndicator,
+    },
+    ref,
+  ) => {
+    const { t } = useTranslation();
+
+    // Handle display name changes.
+    // TODO: Move this into the view model
+    const [displayName, setDisplayName] = useReactiveState(
+      () => vm.member?.rawDisplayName ?? "[👻]",
+      [vm.member],
+    );
+    useEffect(() => {
+      if (vm.member) {
+        const updateName = (): void => {
+          setDisplayName(vm.member!.rawDisplayName);
+        };
+
+        vm.member!.on(RoomMemberEvent.Name, updateName);
+        return (): void => {
+          vm.member!.removeListener(RoomMemberEvent.Name, updateName);
+        };
+      }
+    }, [vm.member, setDisplayName]);
+    const nameTag = vm.local
+      ? t("video_tile.sfu_participant_local")
+      : displayName;
+
+    if (vm instanceof UserMediaTileViewModel) {
+      return (
+        <UserMediaTile
+          ref={ref}
+          className={className}
+          style={style}
+          vm={vm}
+          targetWidth={targetWidth}
+          targetHeight={targetHeight}
+          nameTag={nameTag}
+          displayName={displayName}
+          maximised={maximised}
+          onOpenProfile={onOpenProfile}
+          showSpeakingIndicator={showSpeakingIndicator}
+        />
+      );
+    } else {
+      return (
+        <ScreenShareTile
+          ref={ref}
+          className={className}
+          style={style}
+          vm={vm}
+          targetWidth={targetWidth}
+          targetHeight={targetHeight}
+          nameTag={nameTag}
+          displayName={displayName}
+          maximised={maximised}
+          fullscreen={fullscreen}
+          onToggleFullscreen={onToggleFullscreen}
+        />
+      );
+    }
+  },
+);

src/video-grid/VideoTileSettingsModal.module.css

@@ -1,120 +0,0 @@
-/*
-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.
-*/
-
-.videoTileSettingsModal {
-  width: 700px;
-  height: 316px;
-  display: flex;
-}
-
-.content {
-  position: relative;
-  margin: 27px 34px;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.localVolumePercentage {
-  width: 3ch;
-}
-
-.localVolumeSlider[type="range"] {
-  -ms-appearance: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-
-  background-color: transparent;
-  --slider-color: var(--cpd-color-bg-subtle-primary);
-  --slider-height: 4px;
-  --thumb-color: var(--cpd-color-text-action-accent);
-  --thumb-radius: 100%;
-  --thumb-size: 16px;
-  --thumb-margin-top: -6px;
-
-  cursor: pointer;
-  width: 100%;
-}
-
-.localVolumeSlider[type="range"]::-moz-range-track {
-  -moz-appearance: none;
-  appearance: none;
-
-  background-color: var(--slider-color);
-  height: var(--slider-height);
-}
-.localVolumeSlider[type="range"]::-ms-track {
-  -ms-appearance: none;
-  appearance: none;
-
-  background-color: var(--slider-color);
-  height: var(--slider-height);
-}
-.localVolumeSlider[type="range"]::-webkit-slider-runnable-track {
-  -webkit-appearance: none;
-  appearance: none;
-
-  background-color: var(--slider-color);
-  height: var(--slider-height);
-}
-
-.localVolumeSlider[type="range"]::-moz-range-thumb {
-  -moz-appearance: none;
-  appearance: none;
-
-  height: var(--thumb-size);
-  width: var(--thumb-size);
-  margin-top: var(--thumb-margin-top);
-  border-radius: var(--thumb-radius);
-  background: var(--thumb-color);
-}
-.localVolumeSlider[type="range"]::-ms-thumb {
-  -ms-appearance: none;
-  appearance: none;
-
-  height: var(--thumb-size);
-  width: var(--thumb-size);
-  margin-top: var(--thumb-margin-top);
-  border-radius: var(--thumb-radius);
-  background: var(--thumb-color);
-}
-.localVolumeSlider[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-
-  height: var(--thumb-size);
-  width: var(--thumb-size);
-  margin-top: var(--thumb-margin-top);
-  border-radius: var(--thumb-radius);
-  background: var(--thumb-color);
-}
-
-.localVolumeSlider[type="range"]::-moz-range-progress {
-  -moz-appearance: none;
-  appearance: none;
-
-  height: var(--slider-height);
-  background: var(--thumb-color);
-}
-.localVolumeSlider[type="range"]::-ms-fill-lower {
-  -moz-appearance: none;
-  appearance: none;
-
-  height: var(--slider-height);
-  background: var(--thumb-color);
-}

src/video-grid/VideoTileSettingsModal.tsx

@@ -1,95 +0,0 @@
-/*
-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 { ChangeEvent, FC, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { RemoteParticipant, Track } from "livekit-client";
-
-import { FieldRow } from "../input/Input";
-import { Modal } from "../Modal";
-import styles from "./VideoTileSettingsModal.module.css";
-import { VolumeIcon } from "../button/VolumeIcon";
-
-interface LocalVolumeProps {
-  participant: RemoteParticipant;
-  media: "user media" | "screen share";
-}
-
-const LocalVolume: FC<LocalVolumeProps> = ({
-  participant,
-  media,
-}: LocalVolumeProps) => {
-  const source =
-    media === "user media"
-      ? Track.Source.Microphone
-      : Track.Source.ScreenShareAudio;
-
-  const [localVolume, setLocalVolume] = useState<number>(
-    participant.getVolume(source) ?? 0,
-  );
-
-  const onLocalVolumeChanged = (event: ChangeEvent<HTMLInputElement>): void => {
-    const value: number = +event.target.value;
-    setLocalVolume(value);
-    participant.setVolume(value, source);
-  };
-
-  return (
-    <>
-      <FieldRow>
-        <VolumeIcon volume={localVolume} />
-        <input
-          className={styles.localVolumeSlider}
-          type="range"
-          min="0"
-          max="1"
-          step="0.01"
-          value={localVolume}
-          onChange={onLocalVolumeChanged}
-        />
-      </FieldRow>
-    </>
-  );
-};
-
-interface Props {
-  participant: RemoteParticipant;
-  media: "user media" | "screen share";
-  open: boolean;
-  onDismiss: () => void;
-}
-
-export const VideoTileSettingsModal: FC<Props> = ({
-  participant,
-  media,
-  open,
-  onDismiss,
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <Modal
-      className={styles.videoTileSettingsModal}
-      title={t("local_volume_label")}
-      open={open}
-      onDismiss={onDismiss}
-    >
-      <div className={styles.content}>
-        <LocalVolume participant={participant} media={media} />
-      </div>
-    </Modal>
-  );
-};

vite.config.js

@@ -77,6 +77,11 @@ export default defineConfig(({ mode }) => {
         "matrix-js-sdk",
         "react-use-measure",
         "@juggle/resize-observer",
+        // These packages modify the document based on some module-level global
+        // state, and don't play nicely with duplicate copies of themselves
+        // https://github.com/radix-ui/primitives/issues/1241#issuecomment-1847837850
+        "@radix-ui/react-focus-guards",
+        "@radix-ui/react-dismissable-layer",
       ],
     },
   };

yarn.lock

@@ -2302,6 +2302,13 @@
   resolved "https://registry.yarnpkg.com/@opentelemetry/semantic-conventions/-/semantic-conventions-1.19.0.tgz#0c17f80b45de1c8778dfdf17acb1e9d4c4aa4ba8"
   integrity sha512-14jRpC8f5c0gPSwoZ7SbEJni1PqI+AhAE8m1bMz6v+RPM4OlP1PT2UHBJj5Qh/ALLPjhVU/aZUK3YyjTUqqQVg==
 
+"@radix-ui/number@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/number/-/number-1.0.1.tgz#644161a3557f46ed38a042acf4a770e826021674"
+  integrity sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/primitive@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-1.0.1.tgz#e46f9958b35d10e9f6dc71c497305c22e3e55dbd"
@@ -2317,6 +2324,17 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-collection@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.3.tgz#9595a66e09026187524a36c6e7e9c7d286469159"
+  integrity sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+
 "@radix-ui/react-compose-refs@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
@@ -2352,6 +2370,13 @@
     aria-hidden "^1.1.1"
     react-remove-scroll "2.5.5"
 
+"@radix-ui/react-direction@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.1.tgz#9cb61bf2ccf568f3421422d182637b7f47596c9b"
+  integrity sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-dismissable-layer@1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4"
@@ -2460,6 +2485,24 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-slider@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slider/-/react-slider-1.1.2.tgz#330ff2a0e1f6c19aace76590004f229a7e8fbe6c"
+  integrity sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/number" "1.0.1"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-previous" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+
 "@radix-ui/react-slot@1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
@@ -2517,6 +2560,13 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-previous@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz#b595c087b07317a4f143696c6a01de43b0d0ec66"
+  integrity sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-use-rect@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2"
@@ -7304,7 +7354,6 @@ matrix-events-sdk@0.0.1:
 
 "matrix-js-sdk@github:matrix-org/matrix-js-sdk#2cd63ca4b90eb2e4d22b45ae281a81c4514e757a":
   version "30.2.0"
-  uid "2cd63ca4b90eb2e4d22b45ae281a81c4514e757a"
   resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/2cd63ca4b90eb2e4d22b45ae281a81c4514e757a"
   dependencies:
     "@babel/runtime" "^7.12.5"