✨(frontend) introduce a recording toaster

Notify visually users that the room is being recorded.
Draft, it will be enhance the future.

src/frontend/src/features/rooms/livekit/components/RecordingStateToast.tsx

@@ -0,0 +1,43 @@
+import { css } from '@/styled-system/css'
+import { RiRecordCircleLine } from '@remixicon/react'
+import { Text } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+import { useRoomContext } from '@livekit/components-react'
+
+export const RecordingStateToast = () => {
+  const { t } = useTranslation('rooms', { keyPrefix: 'recording' })
+
+  const room = useRoomContext()
+
+  if (!room?.isRecording) return
+
+  return (
+    <div
+      className={css({
+        display: 'flex',
+        position: 'fixed',
+        top: '10px',
+        left: '10px',
+        paddingY: '0.25rem',
+        paddingX: '0.25rem 0.35rem',
+        backgroundColor: 'primaryDark.200',
+        borderColor: 'primaryDark.400',
+        border: '1px solid',
+        color: 'white',
+        borderRadius: '4px',
+        gap: '0.5rem',
+      })}
+    >
+      <RiRecordCircleLine
+        size={20}
+        className={css({
+          color: 'white',
+          backgroundColor: 'danger.700',
+          padding: '3px',
+          borderRadius: '3px',
+        })}
+      />
+      <Text variant={'sm'}>{t('label')}</Text>
+    </div>
+  )
+}

src/frontend/src/features/rooms/livekit/prefabs/VideoConference.tsx

@@ -28,6 +28,7 @@ import { FocusLayout } from '../components/FocusLayout'
 import { ParticipantTile } from '../components/ParticipantTile'
 import { SidePanel } from '../components/SidePanel'
 import { useSidePanel } from '../hooks/useSidePanel'
+import { RecordingStateToast } from '../components/RecordingStateToast'
 
 const LayoutWrapper = styled(
   'div',
@@ -212,6 +213,7 @@ export function VideoConference({ ...props }: VideoConferenceProps) {
       )}
       <RoomAudioRenderer />
       <ConnectionStateToast />
+      <RecordingStateToast />
     </div>
   )
 }

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

@@ -164,5 +164,8 @@
     "raisedHands": "",
     "lowerParticipantHand": "",
     "lowerParticipantsHand": ""
+  },
+  "recording": {
+    "label": ""
   }
 }

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

@@ -163,5 +163,8 @@
     "raisedHands": "Raised hands",
     "lowerParticipantHand": "Lower {{name}}'s hand",
     "lowerParticipantsHand": "Lower all hands"
+  },
+  "recording": {
+    "label": "Recording"
   }
 }

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

@@ -163,5 +163,8 @@
     "raisedHands": "Mains levées",
     "lowerParticipantHand": "Baisser la main de {{name}}",
     "lowerParticipantsHand": "Baisser la main de tous les participants"
+  },
+  "recording": {
+    "label": "Enregistrement"
   }
 }