e2c3b745ca
We've introduced simplifications that improve performance, enhance ux, and contribute to the overall perception of experience quality. Previously, our processor handling was overly complex. LiveKit allows us to set a processor before starting the local video preview track, which eliminates the black blink glitch that appeared when loading the join component with a default processor. This change prevents the unnecessary stopping and restarting of the local video track. I'm glad this issue is now resolved. We also simplified component communication by avoiding props drilling. Now, we use a single flag to indicate when the user is ready to enter the room. This significantly reduces the complexity of props passed through components.
66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import { useLocation, useParams } from 'wouter'
|
|
import { ErrorScreen } from '@/components/ErrorScreen'
|
|
import { useUser, UserAware } from '@/features/auth'
|
|
import { Conference } from '../components/Conference'
|
|
import { Join } from '../components/Join'
|
|
import { useKeyboardShortcuts } from '@/features/shortcuts/useKeyboardShortcuts'
|
|
import {
|
|
isRoomValid,
|
|
normalizeRoomId,
|
|
} from '@/features/rooms/utils/isRoomValid'
|
|
|
|
export const Room = () => {
|
|
const { isLoggedIn } = useUser()
|
|
const [hasSubmittedEntry, setHasSubmittedEntry] = useState(false)
|
|
|
|
const { roomId } = useParams()
|
|
const [location, setLocation] = useLocation()
|
|
const initialRoomData = history.state?.initialRoomData
|
|
const mode = isLoggedIn && history.state?.create ? 'create' : 'join'
|
|
const skipJoinScreen = isLoggedIn && mode === 'create'
|
|
|
|
useKeyboardShortcuts()
|
|
|
|
const clearRouterState = () => {
|
|
if (window?.history?.state) {
|
|
window.history.replaceState({}, '')
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
window.addEventListener('beforeunload', clearRouterState)
|
|
return () => {
|
|
window.removeEventListener('beforeunload', clearRouterState)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (roomId && !isRoomValid(roomId)) {
|
|
setLocation(normalizeRoomId(roomId))
|
|
}
|
|
}, [roomId, setLocation, location])
|
|
|
|
if (!roomId) {
|
|
return <ErrorScreen />
|
|
}
|
|
|
|
if (!hasSubmittedEntry && !skipJoinScreen) {
|
|
return (
|
|
<UserAware>
|
|
<Join enterRoom={() => setHasSubmittedEntry(true)} roomId={roomId} />
|
|
</UserAware>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<UserAware>
|
|
<Conference
|
|
initialRoomData={initialRoomData}
|
|
roomId={roomId}
|
|
mode={mode}
|
|
/>
|
|
</UserAware>
|
|
)
|
|
}
|