Implement the new unified grid layout

Here I've implemented an MVP for the new unified grid layout, which scales smoothly up to arbitrarily many participants. It doesn't yet have a special 1:1 layout, so in spotlight mode and 1:1s, we will still fall back to the legacy grid systems.

Things that happened along the way:
- The part of VideoTile that is common to both spotlight and grid tiles, I refactored into MediaView
- VideoTile renamed to GridTile
- Added SpotlightTile for the new, glassy spotlight designs
- NewVideoGrid renamed to Grid, and refactored to be even more generic
- I extracted the media name logic into a custom React hook
- Deleted the BigGrid experiment

src/state/useObservable.ts

@@ -14,9 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { useRef } from "react";
+import { Ref, useCallback, useRef } from "react";
 import { BehaviorSubject, Observable } from "rxjs";
 
+import { useInitial } from "../useInitial";
+
 /**
  * React hook that creates an Observable from a changing value. The Observable
  * replays its current value upon subscription and emits whenever the value
@@ -28,3 +30,14 @@ export function useObservable<T>(value: T): Observable<T> {
   if (value !== subject.current.value) subject.current.next(value);
   return subject.current;
 }
+
+/**
+ * React hook that creates a ref and an Observable that emits any values
+ * stored in the ref. The Observable replays the value currently stored in the
+ * ref upon subscription.
+ */
+export function useObservableRef<T>(initialValue: T): [Observable<T>, Ref<T>] {
+  const subject = useInitial(() => new BehaviorSubject(initialValue));
+  const ref = useCallback((value: T) => subject.next(value), [subject]);
+  return [subject, ref];
+}