mirror of
https://github.com/suitenumerique/meet.git
synced 2026-08-20 07:12:18 +00:00
lebaudantoine
07a1425fee
One of the best ways to reduce the size of the initially loaded chunk (index.js, around 2Mo before optimization) is to lazy load routes and features so their JS gets isolated in dedicated chunks and is loaded only when needed. For example, most of the JS under the legal terms page is never consulted by users. Likewise, when loading the home page, there is no need for all the feature-related JS required to display a videoconference. After this lazy-loading optimization, the initial chunk is now around 1.2Mo, a significant improvement.
83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import { Button } from '@/primitives'
|
|
import { Screen } from '@/layout/Screen'
|
|
import { Center, HStack, styled, VStack } from '@/styled-system/jsx'
|
|
import { Rating } from '@/features/rooms/components/Rating.tsx'
|
|
import { useLocation } from 'wouter'
|
|
import { useMemo } from 'react'
|
|
import { DisconnectReason } from 'livekit-client'
|
|
import type { CandidateInfo } from '@/stores/connectionObserver'
|
|
|
|
// fixme - duplicated with home, refactor in a proper style
|
|
const Heading = styled('h1', {
|
|
base: {
|
|
fontWeight: '500',
|
|
fontStyle: 'normal',
|
|
fontStretch: 'normal',
|
|
fontOpticalSizing: 'auto',
|
|
fontSize: '2.3rem',
|
|
lineHeight: '2.5rem',
|
|
letterSpacing: '0',
|
|
paddingBottom: '2rem',
|
|
textAlign: 'center',
|
|
},
|
|
})
|
|
|
|
enum DisconnectReasonKey {
|
|
DuplicateIdentity = 'duplicateIdentity',
|
|
ParticipantRemoved = 'participantRemoved',
|
|
}
|
|
|
|
const FeedbackRoute = () => {
|
|
const { t } = useTranslation('rooms')
|
|
const [, setLocation] = useLocation()
|
|
|
|
const reasonKey = useMemo(() => {
|
|
const state = window.history.state
|
|
|
|
if (!state?.reason) return
|
|
switch (state.reason) {
|
|
case DisconnectReason.DUPLICATE_IDENTITY:
|
|
return DisconnectReasonKey.DuplicateIdentity
|
|
case DisconnectReason.PARTICIPANT_REMOVED:
|
|
return DisconnectReasonKey.ParticipantRemoved
|
|
}
|
|
}, [])
|
|
|
|
const metadata = useMemo(() => {
|
|
const state = window.history.state
|
|
return {
|
|
room_id: state?.room_id as string,
|
|
pc_publisher: state?.pc_publisher as CandidateInfo,
|
|
pc_publisher_changes_count: state?.pc_publisher_changes_count as number,
|
|
pc_subscriber: state?.pc_subscriber as CandidateInfo,
|
|
pc_subscriber_changes_count: state?.pc_subscriber_changes_count as number,
|
|
}
|
|
}, [])
|
|
|
|
const showBackButton = reasonKey !== DisconnectReasonKey.ParticipantRemoved
|
|
|
|
return (
|
|
<Screen layout="centered" footer={false}>
|
|
<Center>
|
|
<VStack>
|
|
<Heading>{t(`feedback.heading.${reasonKey || 'normal'}`)}</Heading>
|
|
<HStack>
|
|
{showBackButton && (
|
|
<Button variant="secondary" onPress={() => window.history.back()}>
|
|
{t('feedback.back')}
|
|
</Button>
|
|
)}
|
|
<Button variant="primary" onPress={() => setLocation('/')}>
|
|
{t('feedback.home')}
|
|
</Button>
|
|
</HStack>
|
|
<Rating metadata={metadata} />
|
|
</VStack>
|
|
</Center>
|
|
</Screen>
|
|
)
|
|
}
|
|
|
|
export default FeedbackRoute
|