♻️(frontend) standardize toast notification durations

Introduce ToastDuration enum to replace magic numbers for notification
timeouts. Added semantic duration constants for different notification types
(alerts, messages, join/leave events). Improves maintainability and
consistency across toast implementations.
This commit is contained in:
lebaudantoine
2025-02-11 23:18:55 +01:00
committed by aleb_the_flash
parent da95e804a0
commit 09a0496d25

View File

@@ -7,6 +7,19 @@ import { Div } from '@/primitives'
import { ChatMessage, isMobileBrowser } from '@livekit/components-core' import { ChatMessage, isMobileBrowser } from '@livekit/components-core'
import { useNotificationSound } from '@/features/notifications/hooks/useSoundNotification' import { useNotificationSound } from '@/features/notifications/hooks/useSoundNotification'
enum ToastDuration {
SHORT = 3000,
MEDIUM = 4000,
LONG = 5000,
}
const NotificationDuration = {
ALERT: ToastDuration.SHORT,
MESSAGE: ToastDuration.LONG,
PARTICIPANT_JOINED: ToastDuration.LONG,
HAND_RAISED: ToastDuration.LONG,
} as const
export const MainNotificationToast = () => { export const MainNotificationToast = () => {
const room = useRoomContext() const room = useRoomContext()
const { triggerNotificationSound } = useNotificationSound() const { triggerNotificationSound } = useNotificationSound()
@@ -23,7 +36,7 @@ export const MainNotificationToast = () => {
message: chatMessage.message, message: chatMessage.message,
type: NotificationType.MessageReceived, type: NotificationType.MessageReceived,
}, },
{ timeout: 5000 } { timeout: NotificationDuration.MESSAGE }
) )
} }
room.on(RoomEvent.ChatMessage, handleChatMessage) room.on(RoomEvent.ChatMessage, handleChatMessage)
@@ -49,7 +62,7 @@ export const MainNotificationToast = () => {
participant, participant,
type: NotificationType.ParticipantMuted, type: NotificationType.ParticipantMuted,
}, },
{ timeout: 3000 } { timeout: NotificationDuration.ALERT }
) )
break break
default: default:
@@ -74,7 +87,7 @@ export const MainNotificationToast = () => {
type: NotificationType.ParticipantJoined, type: NotificationType.ParticipantJoined,
}, },
{ {
timeout: 5000, timeout: NotificationDuration.PARTICIPANT_JOINED,
} }
) )
} }
@@ -133,7 +146,7 @@ export const MainNotificationToast = () => {
participant, participant,
type: NotificationType.HandRaised, type: NotificationType.HandRaised,
}, },
{ timeout: 5000 } { timeout: NotificationDuration.HAND_RAISED }
) )
} }
} }