Address review comments

src/Slider.tsx

@@ -16,6 +16,12 @@ 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;

src/state/MediaViewModel.ts

@@ -248,22 +248,28 @@ export class RemoteUserMediaViewModel extends BaseUserMediaViewModel {
     this.localVolumeAdjustment,
     this.localVolumeCommit.pipe(map(() => "commit" as const)),
   ).pipe(
-    accumulate(
+    accumulate({ volume: 1, committedVolume: 1 }, (state, event) => {
-      { muted: false, volume: 1, committedVolume: 1 },
+      switch (event) {
-      (state, event) =>
+        case "toggle mute":
-        event === "toggle mute"
+          return {
-          ? { ...state, muted: !state.muted }
+            ...state,
-          : event === "commit"
+            volume: state.volume === 0 ? state.committedVolume : 0,
-            ? { ...state, committedVolume: state.volume }
+          };
-            : // Volume adjustment
+        case "commit":
-              event === 0
+          // Dragging the slider to zero should have the same effect as
-              ? // Dragging the slider to zero should have the same effect as
+          // muting: keep the original committed volume, as if it were never
-                // muting: reset the volume to the committed volume, as if it were
+          // dragged
-                // never dragged
+          return {
-                { ...state, muted: true, volume: state.committedVolume }
+            ...state,
-              : { ...state, muted: false, volume: event },
+            committedVolume:
-    ),
+              state.volume === 0 ? state.committedVolume : state.volume,
-    map(({ muted, volume }) => (muted ? 0 : volume)),
+          };
+        default:
+          // Volume adjustment
+          return { ...state, volume: event };
+      }
+    }),
+    map(({ volume }) => volume),
     this.scope.state(),
   );