Merge remote-tracking branch 'origin/livekit' into raise-hand-button

src/Slider.tsx

@@ -16,6 +16,13 @@ interface Props {
   label: string;
   value: number;
   onValueChange: (value: number) => void;
+  /**
+   * Event handler called when the value changes at the end of an interaction.
+   * Useful when you only need to capture a final value to update a backend
+   * service, or when you want to remember the last value that the user
+   * "committed" to.
+   */
+  onValueCommit?: (value: number) => void;
   min: number;
   max: number;
   step: number;
@@ -30,6 +37,7 @@ export const Slider: FC<Props> = ({
   label,
   value,
   onValueChange: onValueChangeProp,
+  onValueCommit: onValueCommitProp,
   min,
   max,
   step,
@@ -39,12 +47,17 @@ export const Slider: FC<Props> = ({
     ([v]: number[]) => onValueChangeProp(v),
     [onValueChangeProp],
   );
+  const onValueCommit = useCallback(
+    ([v]: number[]) => onValueCommitProp?.(v),
+    [onValueCommitProp],
+  );
 
   return (
     <Root
       className={classNames(className, styles.slider)}
       value={[value]}
       onValueChange={onValueChange}
+      onValueCommit={onValueCommit}
       min={min}
       max={max}
       step={step}

src/analytics/PosthogAnalytics.ts

@@ -64,6 +64,7 @@ interface PlatformProperties {
   appVersion: string;
   matrixBackend: "embedded" | "jssdk";
   callBackend: "livekit" | "full-mesh";
+  cryptoVersion?: string;
 }
 
 interface PosthogSettings {
@@ -184,6 +185,9 @@ export class PosthogAnalytics {
       appVersion,
       matrixBackend: widget ? "embedded" : "jssdk",
       callBackend: "livekit",
+      cryptoVersion: widget
+        ? undefined
+        : window.matrixclient?.getCrypto()?.getVersion(),
     };
   }
 

src/analytics/PosthogEvents.ts

@@ -7,6 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { DisconnectReason } from "livekit-client";
 import { logger } from "matrix-js-sdk/src/logger";
+import { MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc";
 
 import {
   IPosthogEvent,
@@ -20,6 +21,9 @@ interface CallEnded extends IPosthogEvent {
   callParticipantsOnLeave: number;
   callParticipantsMax: number;
   callDuration: number;
+  roomEventEncryptionKeysSent: number;
+  roomEventEncryptionKeysReceived: number;
+  roomEventEncryptionKeysReceivedAverageAge: number;
 }
 
 export class CallEndedTracker {
@@ -43,6 +47,7 @@ export class CallEndedTracker {
     callId: string,
     callParticipantsNow: number,
     sendInstantly: boolean,
+    rtcSession: MatrixRTCSession,
   ): void {
     PosthogAnalytics.instance.trackEvent<CallEnded>(
       {
@@ -51,6 +56,16 @@ export class CallEndedTracker {
         callParticipantsMax: this.cache.maxParticipantsCount,
         callParticipantsOnLeave: callParticipantsNow,
         callDuration: (Date.now() - this.cache.startTime.getTime()) / 1000,
+        roomEventEncryptionKeysSent:
+          rtcSession.statistics.counters.roomEventEncryptionKeysSent,
+        roomEventEncryptionKeysReceived:
+          rtcSession.statistics.counters.roomEventEncryptionKeysReceived,
+        roomEventEncryptionKeysReceivedAverageAge:
+          rtcSession.statistics.counters.roomEventEncryptionKeysReceived > 0
+            ? rtcSession.statistics.totals
+                .roomEventEncryptionKeysReceivedTotalAge /
+              rtcSession.statistics.counters.roomEventEncryptionKeysReceived
+            : 0,
       },
       { send_instantly: sendInstantly },
     );

src/auth/LoginPage.module.css

@@ -64,15 +64,6 @@ Please see LICENSE in the repository root for full details.
   flex-direction: column;
   justify-content: flex-end;
   align-items: center;
-}
-
-.authLinks {
   margin-bottom: 100px;
   font-size: var(--font-size-body);
 }
-
-.authLinks a {
-  color: var(--cpd-color-text-action-accent);
-  text-decoration: none;
-  font-weight: normal;
-}

src/auth/LoginPage.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { FC, FormEvent, useCallback, useRef, useState } from "react";
-import { useHistory, useLocation, Link } from "react-router-dom";
+import { useHistory, useLocation } from "react-router-dom";
 import { Trans, useTranslation } from "react-i18next";
 import { Button } from "@vector-im/compound-web";
 
@@ -18,6 +18,7 @@ import { useInteractiveLogin } from "./useInteractiveLogin";
 import { usePageTitle } from "../usePageTitle";
 import { PosthogAnalytics } from "../analytics/PosthogAnalytics";
 import { Config } from "../config/Config";
+import { Link } from "../button/Link";
 
 export const LoginPage: FC = () => {
   const { t } = useTranslation();

src/config/Config.ts

@@ -5,6 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
+import { merge } from "lodash";
+
 import { getUrlParams } from "../UrlParams";
 import {
   DEFAULT_CONFIG,
@@ -15,7 +17,7 @@ import {
 export class Config {
   private static internalInstance: Config | undefined;
 
-  public static get(): ConfigOptions {
+  public static get(): ResolvedConfigOptions {
     if (!this.internalInstance?.config)
       throw new Error("Config instance read before config got initialized");
     return this.internalInstance.config;
@@ -29,7 +31,7 @@ export class Config {
       Config.internalInstance.initPromise = downloadConfig(
         "../config.json",
       ).then((config) => {
-        internalInstance.config = { ...DEFAULT_CONFIG, ...config };
+        internalInstance.config = merge({}, DEFAULT_CONFIG, config);
       });
     }
     return Config.internalInstance.initPromise;

src/config/ConfigOptions.ts

@@ -77,6 +77,17 @@ export interface ConfigOptions {
    * A link to the end-user license agreement (EULA)
    */
   eula: string;
+
+  media_devices?: {
+    /**
+     * Defines whether participants should start with audio enabled by default.
+     */
+    enable_audio?: boolean;
+    /**
+     * Defines whether participants should start with video enabled by default.
+     */
+    enable_video?: boolean;
+  };
 }
 
 // Overrides members from ConfigOptions that are always provided by the
@@ -88,6 +99,10 @@ export interface ResolvedConfigOptions extends ConfigOptions {
       server_name: string;
     };
   };
+  media_devices: {
+    enable_audio: boolean;
+    enable_video: boolean;
+  };
 }
 
 export const DEFAULT_CONFIG: ResolvedConfigOptions = {
@@ -98,4 +113,8 @@ export const DEFAULT_CONFIG: ResolvedConfigOptions = {
     },
   },
   eula: "https://static.element.io/legal/online-EULA.pdf",
+  media_devices: {
+    enable_audio: true,
+    enable_video: true,
+  },
 };

src/e2ee/matrixKeyProvider.test.ts

@@ -0,0 +1,72 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, test, vi } from "vitest";
+import {
+  MatrixRTCSession,
+  MatrixRTCSessionEvent,
+} from "matrix-js-sdk/src/matrixrtc";
+import { KeyProviderEvent } from "livekit-client";
+
+import { MatrixKeyProvider } from "./matrixKeyProvider";
+
+function mockRTCSession(): MatrixRTCSession {
+  return {
+    on: vi.fn(),
+    off: vi.fn(),
+    reemitEncryptionKeys: vi.fn(),
+  } as unknown as MatrixRTCSession;
+}
+
+describe("matrixKeyProvider", () => {
+  test("initializes", () => {
+    const keyProvider = new MatrixKeyProvider();
+    expect(keyProvider).toBeTruthy();
+  });
+
+  test("listens for key requests and emits existing keys", () => {
+    const keyProvider = new MatrixKeyProvider();
+
+    const session = mockRTCSession();
+
+    keyProvider.setRTCSession(session);
+
+    expect(session.on).toHaveBeenCalledWith(
+      MatrixRTCSessionEvent.EncryptionKeyChanged,
+      expect.any(Function),
+    );
+    expect(session.off).not.toHaveBeenCalled();
+  });
+
+  test("stops listening when session changes", () => {
+    const keyProvider = new MatrixKeyProvider();
+
+    const session1 = mockRTCSession();
+    const session2 = mockRTCSession();
+
+    keyProvider.setRTCSession(session1);
+    expect(session1.off).not.toHaveBeenCalled();
+
+    keyProvider.setRTCSession(session2);
+    expect(session1.off).toHaveBeenCalledWith(
+      MatrixRTCSessionEvent.EncryptionKeyChanged,
+      expect.any(Function),
+    );
+  });
+
+  test("emits existing keys", () => {
+    const keyProvider = new MatrixKeyProvider();
+    const setKeyListener = vi.fn();
+    keyProvider.on(KeyProviderEvent.SetKey, setKeyListener);
+
+    const session = mockRTCSession();
+
+    keyProvider.setRTCSession(session);
+
+    expect(session.reemitEncryptionKeys).toHaveBeenCalled();
+  });
+});

src/e2ee/matrixKeyProvider.ts

@@ -16,7 +16,7 @@ export class MatrixKeyProvider extends BaseKeyProvider {
   private rtcSession?: MatrixRTCSession;
 
   public constructor() {
-    super({ ratchetWindowSize: 0 });
+    super({ ratchetWindowSize: 0, keyringSize: 256 });
   }
 
   public setRTCSession(rtcSession: MatrixRTCSession): void {
@@ -35,15 +35,8 @@ export class MatrixKeyProvider extends BaseKeyProvider {
     );
 
     // The new session could be aware of keys of which the old session wasn't,
-    // so emit a key changed event.
-    for (const [
-      participant,
-      encryptionKeys,
-    ] of this.rtcSession.getEncryptionKeys()) {
-      for (const [index, encryptionKey] of encryptionKeys.entries()) {
-        this.onEncryptionKeyChanged(encryptionKey, index, participant);
-      }
-    }
+    // so emit key changed events
+    this.rtcSession.reemitEncryptionKeys();
   }
 
   private onEncryptionKeyChanged = (

src/livekit/MediaDevicesContext.tsx

@@ -97,7 +97,11 @@ function useMediaDevice(
     }
 
     return {
-      available: available ?? [],
+      available: available
+        ? // Sometimes browsers (particularly Firefox) can return multiple
+          // device entries for the exact same device ID; deduplicate them
+          [...new Map(available.map((d) => [d.deviceId, d])).values()]
+        : [],
       selectedId: alwaysDefault ? undefined : devId,
       select,
     };

src/room/GroupCallView.tsx

@@ -219,6 +219,7 @@ export const GroupCallView: FC<Props> = ({
         rtcSession.room.roomId,
         rtcSession.memberships.length,
         sendInstantly,
+        rtcSession,
       );
 
       // Only sends matrix leave event. The Livekit session will disconnect once the ActiveCall-view unmounts.

src/room/MuteStates.ts

@@ -18,6 +18,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { MediaDevice, useMediaDevices } from "../livekit/MediaDevicesContext";
 import { useReactiveState } from "../useReactiveState";
 import { ElementWidgetActions, widget } from "../widget";
+import { Config } from "../config/Config";
 
 /**
  * If there already are this many participants in the call, we automatically mute
@@ -71,8 +72,14 @@ function useMuteState(
 export function useMuteStates(): MuteStates {
   const devices = useMediaDevices();
 
-  const audio = useMuteState(devices.audioInput, () => true);
-  const video = useMuteState(devices.videoInput, () => true);
+  const audio = useMuteState(
+    devices.audioInput,
+    () => Config.get().media_devices.enable_audio,
+  );
+  const video = useMuteState(
+    devices.videoInput,
+    () => Config.get().media_devices.enable_video,
+  );
 
   useEffect(() => {
     widget?.api.transport

src/room/RoomAuthView.tsx

@@ -64,7 +64,7 @@ export const RoomAuthView: FC = () => {
       <div className={styles.container}>
         <main className={styles.main}>
           <Heading size="xl" weight="semibold" className={styles.headline}>
-            {t("lobby.join_button")}
+            {t("lobby.join_as_guest")}
           </Heading>
           <Form className={styles.form} onSubmit={onSubmit}>
             <FieldRow>
@@ -98,7 +98,9 @@ export const RoomAuthView: FC = () => {
               disabled={loading}
               data-testid="joincall_joincall"
             >
-              {loading ? t("common.loading") : t("room_auth_view_join_button")}
+              {loading
+                ? t("common.loading")
+                : t("room_auth_view_continue_button")}
             </Button>
             <div id={recaptchaId} />
           </Form>

src/rtcSessionHelper.test.ts

@@ -10,6 +10,7 @@ import { expect, test, vi } from "vitest";
 
 import { enterRTCSession } from "../src/rtcSessionHelpers";
 import { Config } from "../src/config/Config";
+import { DEFAULT_CONFIG } from "./config/ConfigOptions";
 
 test("It joins the correct Session", async () => {
   const focusFromOlderMembership = {
@@ -34,8 +35,8 @@ test("It joins the correct Session", async () => {
   };
 
   vi.spyOn(Config, "get").mockReturnValue({
+    ...DEFAULT_CONFIG,
     livekit: { livekit_service_url: "http://my-default-service-url.com" },
-    eula: "",
   });
   const mockedSession = vi.mocked({
     room: {

src/settings/rageshake.ts

@@ -467,6 +467,8 @@ declare global {
  */
 export async function init(): Promise<void> {
   global.mx_rage_logger = new ConsoleLogger();
+
+  // configure loglevel based loggers:
   setLogExtension(logger, global.mx_rage_logger.log);
   // these are the child/prefixed loggers we want to capture from js-sdk
   // there doesn't seem to be an easy way to capture all children
@@ -474,6 +476,29 @@ export async function init(): Promise<void> {
     setLogExtension(logger.getChild(loggerName), global.mx_rage_logger.log);
   });
 
+  // intercept console logging so that we can get matrix_sdk logs:
+  // this is nasty, but no logging hooks are provided
+  [
+    "trace" as const,
+    "debug" as const,
+    "info" as const,
+    "warn" as const,
+    "error" as const,
+  ].forEach((level) => {
+    const originalMethod = window.console[level];
+    if (!originalMethod) return;
+    const prefix = `${level.toUpperCase()} matrix_sdk`;
+    window.console[level] = (...args): void => {
+      originalMethod(...args);
+      // args for calls from the matrix-sdk-crypto-wasm look like:
+      // ["DEBUG matrix_sdk_indexeddb::crypto_store: IndexedDbCryptoStore: opening main store matrix-js-sdk::matrix-sdk-crypto\n    at /home/runner/.cargo/git/checkouts/matrix-rust-sdk-1f4927f82a3d27bb/07aa6d7/crates/matrix-sdk-indexeddb/src/crypto_store/mod.rs:267"]
+      if (typeof args[0] === "string" && args[0].startsWith(prefix)) {
+        // we pass all the args on to the logger in case there are more sent in future
+        global.mx_rage_logger.log(LogLevel[level], "matrix_sdk", ...args);
+      }
+    };
+  });
+
   return tryInitStorage();
 }
 

src/state/CallViewModel.test.ts

@@ -199,7 +199,7 @@ test("participants are retained during a focus switch", () => {
             a: {
               type: "grid",
               spotlight: undefined,
-              grid: [":0", `${aliceId}:0`, `${bobId}:0`],
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
             },
           },
         );
@@ -243,12 +243,12 @@ test("screen sharing activates spotlight layout", () => {
             a: {
               type: "grid",
               spotlight: undefined,
-              grid: [":0", `${aliceId}:0`, `${bobId}:0`],
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
             },
             b: {
               type: "spotlight-landscape",
               spotlight: [`${aliceId}:0:screen-share`],
-              grid: [":0", `${aliceId}:0`, `${bobId}:0`],
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
             },
             c: {
               type: "spotlight-landscape",
@@ -256,17 +256,17 @@ test("screen sharing activates spotlight layout", () => {
                 `${aliceId}:0:screen-share`,
                 `${bobId}:0:screen-share`,
               ],
-              grid: [":0", `${aliceId}:0`, `${bobId}:0`],
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
             },
             d: {
               type: "spotlight-landscape",
               spotlight: [`${bobId}:0:screen-share`],
-              grid: [":0", `${aliceId}:0`, `${bobId}:0`],
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
             },
             e: {
               type: "spotlight-landscape",
               spotlight: [`${aliceId}:0`],
-              grid: [":0", `${aliceId}:0`, `${bobId}:0`],
+              grid: ["local:0", `${aliceId}:0`, `${bobId}:0`],
             },
           },
         );

src/state/CallViewModel.ts

@@ -335,8 +335,8 @@ export class CallViewModel extends ViewModel {
         const newItems = new Map(
           function* (this: CallViewModel): Iterable<[string, MediaItem]> {
             for (const p of [localParticipant, ...remoteParticipants]) {
-              const userMediaId = p === localParticipant ? "local" : p.identity;
-              const member = findMatrixMember(this.matrixRoom, userMediaId);
+              const id = p === localParticipant ? "local" : p.identity;
+              const member = findMatrixMember(this.matrixRoom, id);
               if (member === undefined)
                 logger.warn(
                   `Ruh, roh! No matrix member found for SFU participant '${p.identity}': creating g-g-g-ghost!`,
@@ -345,7 +345,7 @@ export class CallViewModel extends ViewModel {
               // Create as many tiles for this participant as called for by
               // the duplicateTiles option
               for (let i = 0; i < 1 + duplicateTiles; i++) {
-                const userMediaId = `${p.identity}:${i}`;
+                const userMediaId = `${id}:${i}`;
                 yield [
                   userMediaId,
                   prevItems.get(userMediaId) ??

src/state/MediaViewModel.test.ts

@@ -13,43 +13,47 @@ import {
   withTestScheduler,
 } from "../utils/test";
 
-test("set a participant's volume", async () => {
+test("control a participant's volume", async () => {
   const setVolumeSpy = vi.fn();
   await withRemoteMedia({}, { setVolume: setVolumeSpy }, (vm) =>
     withTestScheduler(({ expectObservable, schedule }) => {
-      schedule("-a|", {
-        a() {
-          vm.setLocalVolume(0.8);
-          expect(setVolumeSpy).toHaveBeenLastCalledWith(0.8);
-        },
-      });
-      expectObservable(vm.localVolume).toBe("ab", { a: 1, b: 0.8 });
-    }),
-  );
-});
-
-test("mute and unmute a participant", async () => {
-  const setVolumeSpy = vi.fn();
-  await withRemoteMedia({}, { setVolume: setVolumeSpy }, (vm) =>
-    withTestScheduler(({ expectObservable, schedule }) => {
-      schedule("-abc|", {
+      schedule("-ab---c---d|", {
         a() {
+          // Try muting by toggling
           vm.toggleLocallyMuted();
           expect(setVolumeSpy).toHaveBeenLastCalledWith(0);
         },
         b() {
+          // Try unmuting by dragging the slider back up
+          vm.setLocalVolume(0.6);
           vm.setLocalVolume(0.8);
-          expect(setVolumeSpy).toHaveBeenLastCalledWith(0);
+          vm.commitLocalVolume();
+          expect(setVolumeSpy).toHaveBeenCalledWith(0.6);
+          expect(setVolumeSpy).toHaveBeenLastCalledWith(0.8);
         },
         c() {
+          // Try muting by dragging the slider back down
+          vm.setLocalVolume(0.2);
+          vm.setLocalVolume(0);
+          vm.commitLocalVolume();
+          expect(setVolumeSpy).toHaveBeenCalledWith(0.2);
+          expect(setVolumeSpy).toHaveBeenLastCalledWith(0);
+        },
+        d() {
+          // Try unmuting by toggling
           vm.toggleLocallyMuted();
+          // The volume should return to the last non-zero committed volume
           expect(setVolumeSpy).toHaveBeenLastCalledWith(0.8);
         },
       });
-      expectObservable(vm.locallyMuted).toBe("ab-c", {
-        a: false,
-        b: true,
-        c: false,
+      expectObservable(vm.localVolume).toBe("ab(cd)(ef)g", {
+        a: 1,
+        b: 0,
+        c: 0.6,
+        d: 0.8,
+        e: 0.2,
+        f: 0,
+        g: 0.8,
       });
     }),
   );

src/state/MediaViewModel.ts

@@ -26,10 +26,12 @@ import { RoomMember, RoomMemberEvent } from "matrix-js-sdk/src/matrix";
 import {
   BehaviorSubject,
   Observable,
+  Subject,
   combineLatest,
   distinctUntilKeyChanged,
   fromEvent,
   map,
+  merge,
   of,
   startWith,
   switchMap,
@@ -39,6 +41,7 @@ import { useEffect } from "react";
 import { ViewModel } from "./ViewModel";
 import { useReactiveState } from "../useReactiveState";
 import { alwaysShowSelf } from "../settings/settings";
+import { accumulate } from "../utils/observable";
 
 // TODO: Move this naming logic into the view model
 export function useDisplayName(vm: MediaViewModel): string {
@@ -232,18 +235,51 @@ export class LocalUserMediaViewModel extends BaseUserMediaViewModel {
  * A remote participant's user media.
  */
 export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
-  private readonly _locallyMuted = new BehaviorSubject(false);
-  /**
-   * Whether we've disabled this participant's audio.
-   */
-  public readonly locallyMuted: Observable<boolean> = this._locallyMuted;
+  private readonly locallyMutedToggle = new Subject<void>();
+  private readonly localVolumeAdjustment = new Subject<number>();
+  private readonly localVolumeCommit = new Subject<void>();
 
-  private readonly _localVolume = new BehaviorSubject(1);
   /**
-   * The volume to which we've set this participant's audio, as a scalar
+   * The volume to which this participant's audio is set, as a scalar
    * multiplier.
    */
-  public readonly localVolume: Observable<number> = this._localVolume;
+  public readonly localVolume: Observable<number> = merge(
+    this.locallyMutedToggle.pipe(map(() => "toggle mute" as const)),
+    this.localVolumeAdjustment,
+    this.localVolumeCommit.pipe(map(() => "commit" as const)),
+  ).pipe(
+    accumulate({ volume: 1, committedVolume: 1 }, (state, event) => {
+      switch (event) {
+        case "toggle mute":
+          return {
+            ...state,
+            volume: state.volume === 0 ? state.committedVolume : 0,
+          };
+        case "commit":
+          // Dragging the slider to zero should have the same effect as
+          // muting: keep the original committed volume, as if it were never
+          // dragged
+          return {
+            ...state,
+            committedVolume:
+              state.volume === 0 ? state.committedVolume : state.volume,
+          };
+        default:
+          // Volume adjustment
+          return { ...state, volume: event };
+      }
+    }),
+    map(({ volume }) => volume),
+    this.scope.state(),
+  );
+
+  /**
+   * Whether this participant's audio is disabled.
+   */
+  public readonly locallyMuted: Observable<boolean> = this.localVolume.pipe(
+    map((volume) => volume === 0),
+    this.scope.state(),
+  );
 
   public constructor(
     id: string,
@@ -253,22 +289,24 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
   ) {
     super(id, member, participant, callEncrypted);
 
-    // Sync the local mute state and volume with LiveKit
-    combineLatest([this._locallyMuted, this._localVolume], (muted, volume) =>
-      muted ? 0 : volume,
-    )
+    // Sync the local volume with LiveKit
+    this.localVolume
       .pipe(this.scope.bind())
-      .subscribe((volume) => {
-        (this.participant as RemoteParticipant).setVolume(volume);
-      });
+      .subscribe((volume) =>
+        (this.participant as RemoteParticipant).setVolume(volume),
+      );
   }
 
   public toggleLocallyMuted(): void {
-    this._locallyMuted.next(!this._locallyMuted.value);
+    this.locallyMutedToggle.next();
   }
 
   public setLocalVolume(value: number): void {
-    this._localVolume.next(value);
+    this.localVolumeAdjustment.next(value);
+  }
+
+  public commitLocalVolume(): void {
+    this.localVolumeCommit.next();
   }
 }
 

src/tile/GridTile.tsx

@@ -230,6 +230,7 @@ const RemoteUserMediaTile = forwardRef<
     (v: number) => vm.setLocalVolume(v),
     [vm],
   );
+  const onCommitLocalVolume = useCallback(() => vm.commitLocalVolume(), [vm]);
 
   const VolumeIcon = locallyMuted ? VolumeOffIcon : VolumeOnIcon;
 
@@ -253,10 +254,10 @@ const RemoteUserMediaTile = forwardRef<
               label={t("video_tile.volume")}
               value={localVolume}
               onValueChange={onChangeLocalVolume}
-              min={0.1}
+              onValueCommit={onCommitLocalVolume}
+              min={0}
               max={1}
               step={0.01}
-              disabled={locallyMuted}
             />
           </MenuItem>
         </>

src/useTheme.test.ts

@@ -0,0 +1,78 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { renderHook } from "@testing-library/react-hooks";
+import {
+  afterEach,
+  beforeEach,
+  describe,
+  expect,
+  Mock,
+  test,
+  vi,
+} from "vitest";
+
+import { useTheme } from "./useTheme";
+import { useUrlParams } from "./UrlParams";
+
+// Mock the useUrlParams hook
+vi.mock("./UrlParams", () => ({
+  useUrlParams: vi.fn(),
+}));
+
+describe("useTheme", () => {
+  let originalClassList: DOMTokenList;
+  beforeEach(() => {
+    // Save the original classList to setup spies
+    originalClassList = document.body.classList;
+
+    vi.spyOn(originalClassList, "add");
+    vi.spyOn(originalClassList, "remove");
+    vi.spyOn(originalClassList, "item").mockReturnValue(null);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe.each([
+    { setTheme: null, add: ["cpd-theme-dark"] },
+    { setTheme: "light", add: ["cpd-theme-light"] },
+    { setTheme: "dark-high-contrast", add: ["cpd-theme-dark-hc"] },
+    { setTheme: "light-high-contrast", add: ["cpd-theme-light-hc"] },
+  ])("apply procedure", ({ setTheme, add }) => {
+    test(`should apply ${add[0]} theme when ${setTheme} theme is specified`, () => {
+      (useUrlParams as Mock).mockReturnValue({ theme: setTheme });
+
+      renderHook(() => useTheme());
+
+      expect(originalClassList.remove).toHaveBeenCalledWith(
+        "cpd-theme-light",
+        "cpd-theme-dark",
+        "cpd-theme-light-hc",
+        "cpd-theme-dark-hc",
+      );
+      expect(originalClassList.add).toHaveBeenCalledWith(...add);
+    });
+  });
+
+  test("should not reapply the same theme if it hasn't changed", () => {
+    (useUrlParams as Mock).mockReturnValue({ theme: "dark" });
+    // Simulate a previous theme
+    originalClassList.item = vi.fn().mockReturnValue("cpd-theme-dark");
+
+    renderHook(() => useTheme());
+
+    expect(document.body.classList.add).not.toHaveBeenCalledWith(
+      "cpd-theme-dark",
+    );
+
+    // Ensure the 'no-theme' class is removed
+    expect(document.body.classList.remove).toHaveBeenCalledWith("no-theme");
+    expect(originalClassList.add).not.toHaveBeenCalled();
+  });
+});