Disambiguate displaynames (#2918)

* Disambigute displaynames

* Add test

* fixup test functions

* prettier

* lint

* Split displayname utils into own file and add tests.

* Split out fixtures

* Add more testcases for displayname calculation.

* lint

* Also listen for displayname changes. (I stand corrected!)

* fix missing media tiles on missing member

src/tile/GridTile.tsx

@@ -39,7 +39,6 @@ import { useObservableEagerState, useObservableState } from "observable-hooks";
 import styles from "./GridTile.module.css";
 import {
   type UserMediaViewModel,
-  useDisplayName,
   LocalUserMediaViewModel,
   type RemoteUserMediaViewModel,
 } from "../state/MediaViewModel";
@@ -323,7 +322,7 @@ export const GridTile = forwardRef<HTMLDivElement, GridTileProps>(
     const ourRef = useRef<HTMLDivElement | null>(null);
     const ref = useMergedRefs(ourRef, theirRef);
     const media = useObservableEagerState(vm.media$);
-    const displayName = useDisplayName(media);
+    const displayName = useObservableEagerState(media.displayname$);
 
     if (media instanceof LocalUserMediaViewModel) {
       return (

src/tile/SpotlightTile.tsx

@@ -36,7 +36,6 @@ import {
   type MediaViewModel,
   ScreenShareViewModel,
   type UserMediaViewModel,
-  useDisplayName,
 } from "../state/MediaViewModel";
 import { useInitial } from "../useInitial";
 import { useMergedRefs } from "../useMergedRefs";
@@ -132,7 +131,7 @@ const SpotlightItem = forwardRef<HTMLDivElement, SpotlightItemProps>(
   ) => {
     const ourRef = useRef<HTMLDivElement | null>(null);
     const ref = useMergedRefs(ourRef, theirRef);
-    const displayName = useDisplayName(vm);
+    const displayName = useObservableEagerState(vm.displayname$);
     const video = useObservableEagerState(vm.video$);
     const unencryptedWarning = useObservableEagerState(vm.unencryptedWarning$);
     const encryptionStatus = useObservableEagerState(vm.encryptionStatus$);