Merge pull request #62 from cloudflare/rxjs

Rxjs

app/components/AudioInputSelector.tsx

@@ -1,16 +1,14 @@
 import type { FC } from 'react'
-import { useAudioInputDeviceId } from '~/hooks/globalPersistedState'
 import useMediaDevices from '~/hooks/useMediaDevices'
 import { useRoomContext } from '~/hooks/useRoomContext'
 import { errorMessageMap } from '~/hooks/useUserMedia'
 import { Option, Select } from './Select'
 
 export const AudioInputSelector: FC<{ id?: string }> = ({ id }) => {
 	const audioInputDevices = useMediaDevices((d) => d.kind === 'audioinput')
-	const [audioDeviceId, setAudioDeviceId] = useAudioInputDeviceId()
 
 	const {
-		userMedia: { audioUnavailableReason },
+		userMedia: { audioUnavailableReason, audioDeviceId, setAudioDeviceId },
 	} = useRoomContext()
 
 	if (audioUnavailableReason) {

app/components/VideoInputSelector.tsx

@@ -1,16 +1,14 @@
 import type { FC } from 'react'
-import { useVideoInputDeviceId } from '~/hooks/globalPersistedState'
 import useMediaDevices from '~/hooks/useMediaDevices'
 import { useRoomContext } from '~/hooks/useRoomContext'
 import { errorMessageMap } from '~/hooks/useUserMedia'
 import { Option, Select } from './Select'
 
 export const VideoInputSelector: FC<{ id?: string }> = ({ id }) => {
-	const [videoDeviceId, setVideoDeviceId] = useVideoInputDeviceId()
 	const videoInputDevices = useMediaDevices((d) => d.kind === 'videoinput')
 
 	const {
-		userMedia: { videoUnavailableReason },
+		userMedia: { videoUnavailableReason, videoDeviceId, setVideoDeviceId },
 	} = useRoomContext()
 
 	if (videoUnavailableReason) {

app/entry.client.tsx

@@ -1,4 +1,7 @@
 import { RemixBrowser } from '@remix-run/react'
+import { startTransition } from 'react'
 import { hydrateRoot } from 'react-dom/client'
 
-hydrateRoot(document, <RemixBrowser />)
+startTransition(() => {
+	hydrateRoot(document, <RemixBrowser />)
+})

app/hooks/rxjsHooks.ts

@@ -0,0 +1,54 @@
+import { useEffect, useRef, useState } from 'react'
+import { BehaviorSubject, Observable } from 'rxjs'
+
+export function useSubscribedState<T>(observable: Observable<T>): T | undefined
+export function useSubscribedState<T>(
+	observable: Observable<T>,
+	defaultValue: T
+): T
+export function useSubscribedState<T>(
+	observable: Observable<T>,
+	defaultValue?: T
+): T {
+	const [state, setState] = useState(defaultValue)
+	useObservableEffect(observable, setState)
+	return state as any
+}
+
+export function useObservableEffect<T>(
+	observable: Observable<T>,
+	fn: (value: T) => void
+) {
+	const fnRef = useRef(fn)
+	fnRef.current = fn
+	useEffect(() => {
+		const subscription = observable.subscribe((v) => fnRef.current(v))
+		return () => {
+			subscription.unsubscribe()
+		}
+	}, [observable])
+}
+
+/**
+ * Turns a value into a stable observable that will emit new
+ * values when the value changes, and completes upon unmounting.
+ */
+export function useStateObservable<T>(value: T) {
+	const ref = useRef(new BehaviorSubject(value))
+	const observableRef = useRef(ref.current.asObservable())
+	const previousValue = useRef<T>()
+	if (previousValue.current !== value) {
+		previousValue.current = value
+		ref.current.next(value)
+	}
+
+	useEffect(() => {
+		const { current } = ref
+		if (!current) return
+		return () => {
+			current.complete()
+		}
+	}, [])
+
+	return observableRef.current
+}

app/hooks/useIsServer.ts

@@ -0,0 +1,9 @@
+import { useSyncExternalStore } from 'react'
+
+export function useIsServer() {
+	return useSyncExternalStore(
+		() => () => {},
+		() => false,
+		() => true
+	)
+}