Make the volume slider less silly

Previously, dragging it all the way to the left would *not* mute the participant but rather bottom out at 10% volume, and people have found this unintuitive. Let's make it less silly by giving the slider a range of 0% to 100%, and making the mute toggle button have the same effect as dragging the slider to zero. When unmuting, it will reset to the last non-zero "committed" volume, similar to how the volume sliders in desktop environments work.

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,
       });
     }),
   );