Convert media view model classes to interfaces

Timo and I agreed previously that we should ditch the class pattern for view models and instead have them be interfaces which are simply created by functions. They're more straightforward to write, mock, and instantiate this way.

The code for media view models and media items is pretty much the last remaining instance of the class pattern. Since I was about to introduce a new media view model for ringing, I wanted to get this refactor out of the way first rather than add to the technical debt.

This refactor also makes things a little easier for https://github.com/element-hq/element-call/pull/3747 by extracting volume controls into their own module.

src/state/MediaViewModel.test.ts

@@ -17,8 +17,8 @@ import {
   mockLocalParticipant,
   mockMediaDevices,
   mockRtcMembership,
-  createLocalMedia,
-  createRemoteMedia,
+  mockLocalMedia,
+  mockRemoteMedia,
   withTestScheduler,
   mockRemoteParticipant,
 } from "../utils/test";
@@ -45,7 +45,7 @@ const rtcMembership = mockRtcMembership("@alice:example.org", "AAAA");
 
 test("control a participant's volume", () => {
   const setVolumeSpy = vi.fn();
-  const vm = createRemoteMedia(
+  const vm = mockRemoteMedia(
     rtcMembership,
     {},
     mockRemoteParticipant({ setVolume: setVolumeSpy }),
@@ -54,33 +54,33 @@ test("control a participant's volume", () => {
     schedule("-ab---c---d|", {
       a() {
         // Try muting by toggling
-        vm.toggleLocallyMuted();
+        vm.togglePlaybackMuted();
         expect(setVolumeSpy).toHaveBeenLastCalledWith(0);
       },
       b() {
         // Try unmuting by dragging the slider back up
-        vm.setLocalVolume(0.6);
-        vm.setLocalVolume(0.8);
-        vm.commitLocalVolume();
+        vm.adjustPlaybackVolume(0.6);
+        vm.adjustPlaybackVolume(0.8);
+        vm.commitPlaybackVolume();
         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();
+        vm.adjustPlaybackVolume(0.2);
+        vm.adjustPlaybackVolume(0);
+        vm.commitPlaybackVolume();
         expect(setVolumeSpy).toHaveBeenCalledWith(0.2);
         expect(setVolumeSpy).toHaveBeenLastCalledWith(0);
       },
       d() {
         // Try unmuting by toggling
-        vm.toggleLocallyMuted();
+        vm.togglePlaybackMuted();
         // The volume should return to the last non-zero committed volume
         expect(setVolumeSpy).toHaveBeenLastCalledWith(0.8);
       },
     });
-    expectObservable(vm.localVolume$).toBe("ab(cd)(ef)g", {
+    expectObservable(vm.playbackVolume$).toBe("ab(cd)(ef)g", {
       a: 1,
       b: 0,
       c: 0.6,
@@ -93,11 +93,11 @@ test("control a participant's volume", () => {
 });
 
 test("toggle fit/contain for a participant's video", () => {
-  const vm = createRemoteMedia(rtcMembership, {}, mockRemoteParticipant({}));
+  const vm = mockRemoteMedia(rtcMembership, {}, mockRemoteParticipant({}));
   withTestScheduler(({ expectObservable, schedule }) => {
     schedule("-ab|", {
-      a: () => vm.toggleFitContain(),
-      b: () => vm.toggleFitContain(),
+      a: () => vm.toggleCropVideo(),
+      b: () => vm.toggleCropVideo(),
     });
     expectObservable(vm.cropVideo$).toBe("abc", {
       a: true,
@@ -108,7 +108,7 @@ test("toggle fit/contain for a participant's video", () => {
 });
 
 test("local media remembers whether it should always be shown", () => {
-  const vm1 = createLocalMedia(
+  const vm1 = mockLocalMedia(
     rtcMembership,
     {},
     mockLocalParticipant({}),
@@ -120,7 +120,7 @@ test("local media remembers whether it should always be shown", () => {
   });
 
   // Next local media should start out *not* always shown
-  const vm2 = createLocalMedia(
+  const vm2 = mockLocalMedia(
     rtcMembership,
     {},
     mockLocalParticipant({}),
@@ -166,7 +166,7 @@ test("switch cameras", async () => {
 
   const selectVideoInput = vi.fn();
 
-  const vm = createLocalMedia(
+  const vm = mockLocalMedia(
     rtcMembership,
     {},
     mockLocalParticipant({
@@ -206,17 +206,17 @@ test("switch cameras", async () => {
 });
 
 test("remote media is in waiting state when participant has not yet connected", () => {
-  const vm = createRemoteMedia(rtcMembership, {}, null); // null participant
+  const vm = mockRemoteMedia(rtcMembership, {}, null); // null participant
   expect(vm.waitingForMedia$.value).toBe(true);
 });
 
 test("remote media is not in waiting state when participant is connected", () => {
-  const vm = createRemoteMedia(rtcMembership, {}, mockRemoteParticipant({}));
+  const vm = mockRemoteMedia(rtcMembership, {}, mockRemoteParticipant({}));
   expect(vm.waitingForMedia$.value).toBe(false);
 });
 
 test("remote media is not in waiting state when participant is connected with no publications", () => {
-  const vm = createRemoteMedia(
+  const vm = mockRemoteMedia(
     rtcMembership,
     {},
     mockRemoteParticipant({
@@ -228,7 +228,7 @@ test("remote media is not in waiting state when participant is connected with no
 });
 
 test("remote media is not in waiting state when user does not intend to publish anywhere", () => {
-  const vm = createRemoteMedia(
+  const vm = mockRemoteMedia(
     rtcMembership,
     {},
     mockRemoteParticipant({}),