🚸(frontend) explain duplicate identity disconnect on feedback page

Add context to feedback page when user is disconnected for joining with
same identity, which is forbidden by LiveKit. Improves user understanding
of disconnection reasons.

src/frontend/src/features/rooms/components/Conference.tsx

@@ -127,7 +127,9 @@ export const Conference = ({
           })}
           onDisconnected={(e) => {
             if (e == DisconnectReason.CLIENT_INITIATED) {
-              navigateTo('feedback')
+              navigateTo('feedback', { duplicateIdentity: false })
+            } else if (e == DisconnectReason.DUPLICATE_IDENTITY) {
+              navigateTo('feedback', { duplicateIdentity: true })
             }
           }}
         >

src/frontend/src/features/rooms/routes/Feedback.tsx

@@ -3,7 +3,7 @@ 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 { useLocation, useSearchParams } from 'wouter'
 
 // fixme - duplicated with home, refactor in a proper style
 const Heading = styled('h1', {
@@ -16,17 +16,25 @@ const Heading = styled('h1', {
     lineHeight: '2.5rem',
     letterSpacing: '0',
     paddingBottom: '2rem',
+    textAlign: 'center',
   },
 })
 
 export const FeedbackRoute = () => {
   const { t } = useTranslation('rooms')
   const [, setLocation] = useLocation()
+
+  const [searchParams] = useSearchParams()
+
   return (
     <Screen layout="centered" footer={false}>
       <Center>
         <VStack>
-          <Heading>{t('feedback.heading')}</Heading>
+          <Heading>
+            {t(
+              `feedback.heading.${searchParams.get('duplicateIdentity') ? 'duplicateIdentity' : 'normal'}`
+            )}
+          </Heading>
           <HStack>
             <Button variant="secondary" onPress={() => window.history.back()}>
               {t('feedback.back')}

src/frontend/src/locales/de/rooms.json

@@ -1,6 +1,9 @@
 {
   "feedback": {
-    "heading": "Sie haben das Meeting verlassen",
+    "heading": {
+      "normal": "Sie haben das Meeting verlassen",
+      "duplicateIdentity": "Sie haben dem Meeting von einem anderen Gerät aus beigetreten"
+    },
     "home": "Zur Startseite zurückkehren",
     "back": "Dem Meeting erneut beitreten"
   },

src/frontend/src/locales/en/rooms.json

@@ -1,6 +1,9 @@
 {
   "feedback": {
-    "heading": "You have left the meeting",
+    "heading": {
+      "normal": "You have left the meeting",
+      "duplicateIdentity": "You have joined the meeting from another device"
+    },
     "home": "Return to home",
     "back": "Rejoin the meeting"
   },

src/frontend/src/locales/fr/rooms.json

@@ -1,6 +1,9 @@
 {
   "feedback": {
-    "heading": "Vous avez quitté la réunion",
+    "heading": {
+      "normal": "Vous avez quitté la réunion",
+      "duplicateIdentity": "Vous avez rejoint la réunion depuis un autre appareil"
+    },
     "home": "Retourner à l'accueil",
     "back": "Réintégrer la réunion"
   },

src/frontend/src/locales/nl/rooms.json

@@ -1,6 +1,9 @@
 {
   "feedback": {
-    "heading": "Je hebt de vergadering verlaten",
+    "heading": {
+      "normal": "Je hebt de vergadering verlaten",
+      "duplicateIdentity": "U heeft de vergadering via een ander apparaat geopend"
+    },
     "home": "Keer terug naar het hoofdscherm",
     "back": "Sluit weer bij de vergadering aan"
   },

src/frontend/src/routes.ts

@@ -43,6 +43,11 @@ export const routes: Record<
   feedback: {
     name: 'feedback',
     path: '/feedback',
+    to: (params: { duplicateIdentity?: false }) =>
+      '/feedback' +
+      (params.duplicateIdentity
+        ? `?duplicateIdentity=${params?.duplicateIdentity}`
+        : ''),
     Component: FeedbackRoute,
   },
   legalTerms: {