✨(frontend) introduce in-app toast notification

Toast-related components are reusable. They follow React Aria recommendations. The UI is heavily inspired by GMeet, we should iterate on it. Why toast? It gives additional information and quick actions when an event occurs in the room. The ToastRegion design should be improved to be more extensible, to move away from poor practices with conditional rendering. Added initial toast display when users join, with room for further improvement. Please read the fixme items.
2026-08-22 08:07:26 +00:00 · 2024-09-09 23:48:42 +02:00
parent 4293444d3e
commit 3d615fa582
10 changed files with 269 additions and 18 deletions
@@ -0,0 +1,73 @@
+import { useToast } from '@react-aria/toast'
+import { useRef } from 'react'
+import { Button as RACButton } from 'react-aria-components'
+import { Track } from 'livekit-client'
+import Source = Track.Source
+
+import { useMaybeLayoutContext } from '@livekit/components-react'
+import { ParticipantTile } from '@/features/rooms/livekit/components/ParticipantTile'
+import { StyledToastContainer, ToastProps } from './Toast'
+import { HStack, styled } from '@/styled-system/jsx'
+import { Div } from '@/primitives'
+import { useTranslation } from 'react-i18next'
+
+const ClickableToast = styled(RACButton, {
+  base: {
+    cursor: 'pointer',
+    display: 'flex',
+    borderRadius: 'inherit',
+  },
+})
+
+export function ToastJoined({ state, ...props }: ToastProps) {
+  const { t } = useTranslation('notifications')
+  const ref = useRef(null)
+  const { toastProps, contentProps, titleProps, closeButtonProps } = useToast(
+    props,
+    state,
+    ref
+  )
+  const layoutContext = useMaybeLayoutContext()
+  const participant = props.toast.content.participant
+  const trackReference = {
+    participant,
+    publication: participant.getTrackPublication(Source.Camera),
+    source: Source.Camera,
+  }
+  const pinParticipant = () => {
+    layoutContext?.pin.dispatch?.({
+      msg: 'set_pin',
+      trackReference,
+    })
+  }
+  return (
+    <StyledToastContainer {...toastProps} ref={ref}>
+      <ClickableToast
+        ref={ref}
+        onPress={(e) => {
+          pinParticipant()
+          closeButtonProps.onPress?.(e)
+        }}
+      >
+        <HStack justify="center" alignItems="center" {...contentProps}>
+          <Div display="flex" overflow="hidden" width="128" height="72">
+            <ParticipantTile
+              trackRef={trackReference}
+              disableSpeakingIndicator={true}
+              disableMetadata={true}
+              style={{
+                borderRadius: '7px 0 0 7px',
+                width: '100%',
+              }}
+            />
+          </Div>
+          <Div padding={20} {...titleProps}>
+            {t('joined.description', {
+              name: participant.name || t('defaultName'),
+            })}
+          </Div>
+        </HStack>
+      </ClickableToast>
+    </StyledToastContainer>
+  )
+}