Refactor media devices to live outside React as Observables

This moves the media devices state out of React to further our transition to a MVVM architecture in which we can more easily model and store complex application state. I have created an AppViewModel to act as the overarching state holder for any future non-React state we end up creating, and the MediaDevices reside within this. We should move more application logic (including the CallViewModel itself) there in the future.

src/utils/test.ts

@@ -46,6 +46,7 @@ import {
   type ResolvedConfigOptions,
 } from "../config/ConfigOptions";
 import { Config } from "../config/Config";
+import { type MediaDevices } from "../state/MediaDevices";
 
 export function withFakeTimers(continuation: () => void): void {
   vi.useFakeTimers();
@@ -332,3 +333,18 @@ export const mockTrack = (identity: string): TrackReference =>
     track: {},
     source: {},
   }) as unknown as TrackReference;
+
+export const deviceStub = {
+  available$: of(new Map<never, never>()),
+  selected$: of(undefined),
+  select(): void {},
+};
+
+export function mockMediaDevices(data: Partial<MediaDevices>): MediaDevices {
+  return {
+    audioInput: deviceStub,
+    audioOutput: deviceStub,
+    videoInput: deviceStub,
+    ...data,
+  } as MediaDevices;
+}