♻️(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:
committed by
aleb_the_flash
parent
da95e804a0
commit
09a0496d25
@@ -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 }
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user