🚸(frontend) explain to a user her was ejected

Add a clear feedback message explaining to users when they are ejected from a
meeting, explicitly stating that the action was taken by an admin.

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to
 
 - ✨(summary) add dutch and german languages
 - 🔧(agents) make Silero VAD optional
+- 🚸(frontend) explain to a user they were ejected
 
 ### Changed
 

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

@@ -25,12 +25,12 @@ import { VideoConference } from '../livekit/prefabs/VideoConference'
 import { css } from '@/styled-system/css'
 import { BackgroundProcessorFactory } from '../livekit/components/blur'
 import { LocalUserChoices } from '@/stores/userChoices'
-import { navigateTo } from '@/navigation/navigateTo'
 import { MediaDeviceErrorAlert } from './MediaDeviceErrorAlert'
 import { usePostHog } from 'posthog-js/react'
 import { useConfig } from '@/api/useConfig'
 import { isFireFox } from '@/utils/livekit'
 import { useIsMobile } from '@/utils/useIsMobile'
+import { navigateTo } from '@/navigation/navigateTo'
 
 export const Conference = ({
   roomId,
@@ -228,10 +228,20 @@ export const Conference = ({
             posthog.captureException(e)
           }}
           onDisconnected={(e) => {
-            if (e == DisconnectReason.CLIENT_INITIATED) {
-              navigateTo('feedback', { duplicateIdentity: false })
-            } else if (e == DisconnectReason.DUPLICATE_IDENTITY) {
-              navigateTo('feedback', { duplicateIdentity: true })
+            switch (e) {
+              case DisconnectReason.CLIENT_INITIATED:
+                navigateTo('feedback')
+                return
+              case DisconnectReason.DUPLICATE_IDENTITY:
+              case DisconnectReason.PARTICIPANT_REMOVED:
+                navigateTo(
+                  'feedback',
+                  {},
+                  {
+                    state: { reason: e },
+                  }
+                )
+                return
             }
           }}
           onMediaDeviceFailure={(e, kind) => {

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

@@ -3,7 +3,9 @@ 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, useSearchParams } from 'wouter'
+import { useLocation } from 'wouter'
+import { useMemo } from 'react'
+import { DisconnectReason } from 'livekit-client'
 
 // fixme - duplicated with home, refactor in a proper style
 const Heading = styled('h1', {
@@ -24,17 +26,23 @@ export const FeedbackRoute = () => {
   const { t } = useTranslation('rooms')
   const [, setLocation] = useLocation()
 
-  const [searchParams] = useSearchParams()
+  const reasonKey = useMemo(() => {
+    const state = window.history.state
+
+    if (!state?.reason) return
+    switch (state.reason) {
+      case DisconnectReason.DUPLICATE_IDENTITY:
+        return 'duplicateIdentity'
+      case DisconnectReason.PARTICIPANT_REMOVED:
+        return 'participantRemoved'
+    }
+  }, [])
 
   return (
     <Screen layout="centered" footer={false}>
       <Center>
         <VStack>
-          <Heading>
-            {t(
-              `feedback.heading.${searchParams.get('duplicateIdentity') ? 'duplicateIdentity' : 'normal'}`
-            )}
-          </Heading>
+          <Heading>{t(`feedback.heading.${reasonKey || 'normal'}`)}</Heading>
           <HStack>
             <Button variant="secondary" onPress={() => window.history.back()}>
               {t('feedback.back')}

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

@@ -2,7 +2,8 @@
   "feedback": {
     "heading": {
       "normal": "Sie haben das Meeting verlassen",
-      "duplicateIdentity": "Sie haben dem Meeting von einem anderen Gerät aus beigetreten"
+      "duplicateIdentity": "Sie haben dem Meeting von einem anderen Gerät aus beigetreten",
+      "participantRemoved": "Sie wurden von einem Administrator aus dem Anruf entfernt"
     },
     "home": "Zur Startseite zurückkehren",
     "back": "Dem Meeting erneut beitreten"

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

@@ -2,7 +2,8 @@
   "feedback": {
     "heading": {
       "normal": "You have left the meeting",
-      "duplicateIdentity": "You have joined the meeting from another device"
+      "duplicateIdentity": "You have joined the meeting from another device",
+      "participantRemoved": "You have been removed from the meeting by an administrator"
     },
     "home": "Return to home",
     "back": "Rejoin the meeting"

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

@@ -2,7 +2,8 @@
   "feedback": {
     "heading": {
       "normal": "Vous avez quitté la réunion",
-      "duplicateIdentity": "Vous avez rejoint la réunion depuis un autre appareil"
+      "duplicateIdentity": "Vous avez rejoint la réunion depuis un autre appareil",
+      "participantRemoved": "Vous avez été exclu de l'appel par un administrateur"
     },
     "home": "Retourner à l'accueil",
     "back": "Réintégrer la réunion"

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

@@ -2,7 +2,8 @@
   "feedback": {
     "heading": {
       "normal": "Je hebt de vergadering verlaten",
-      "duplicateIdentity": "U heeft de vergadering via een ander apparaat geopend"
+      "duplicateIdentity": "U heeft de vergadering via een ander apparaat geopend",
+      "participantRemoved": "U bent door een beheerder uit het gesprek verwijderd"
     },
     "home": "Keer terug naar het hoofdscherm",
     "back": "Sluit weer bij de vergadering aan"

src/frontend/src/routes.ts

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