studio/meet
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨(frontend) getEmojiLabel util for accessible emoji labeling across app

Browse Source 
centralizes emoji label logic to ensure consistency and reuse in UI components
This commit is contained in:
Cyril
2026-01-07 12:30:14 +01:00
committed by aleb_the_flash
parent e1450329f2
commit 459749b992
2 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/frontend/src/features/rooms/livekit/components/ReactionPortal.tsx
View File

@@ -5,6 +5,7 @@ import { css } from '@/styled-system/css'
import { Participant } from 'livekit-client' import { Participant } from 'livekit-client'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { Reaction } from '@/features/rooms/livekit/components/controls/ReactionsToggle' import { Reaction } from '@/features/rooms/livekit/components/controls/ReactionsToggle'
import { getEmojiLabel } from '@/features/rooms/livekit/utils/reactionUtils'
export const ANIMATION_DURATION = 3000 export const ANIMATION_DURATION = 3000
export const ANIMATION_DISTANCE = 300 export const ANIMATION_DISTANCE = 300
@@ -24,29 +25,6 @@ const srOnly = css({
border: 0, border: 0,
}) })
const getEmojiLabel = (
emoji: string,
t: ReturnType<typeof useTranslation>['t']
) => {
const emojiLabels: Record<string, string> = {
'thumbs-up': t('emojis.thumbs-up', { defaultValue: 'thumbs up' }),
'thumbs-down': t('emojis.thumbs-down', { defaultValue: 'thumbs down' }),
'clapping-hands': t('emojis.clapping-hands', {
defaultValue: 'clapping hands',
}),
'red-heart': t('emojis.red-heart', { defaultValue: 'red heart' }),
'face-with-tears-of-joy': t('emojis.face-with-tears-of-joy', {
defaultValue: 'face with tears of joy',
}),
'face-with-open-mouth': t('emojis.face-with-open-mouth', {
defaultValue: 'surprised face',
}),
'party-popper': t('emojis.party-popper', { defaultValue: 'party popper' }),
'folded-hands': t('emojis.folded-hands', { defaultValue: 'folded hands' }),
}
return emojiLabels[emoji] ?? emoji
}
interface FloatingReactionProps { interface FloatingReactionProps {
emoji: string emoji: string
name?: string name?: string

24
src/frontend/src/features/rooms/livekit/utils/reactionUtils.ts Normal file
View File

@@ -0,0 +1,24 @@
import { useTranslation } from 'react-i18next'
export const getEmojiLabel = (
emoji: string,
t: ReturnType<typeof useTranslation>['t']
) => {
const emojiLabels: Record<string, string> = {
'thumbs-up': t('emojis.thumbs-up', { defaultValue: 'thumbs up' }),
'thumbs-down': t('emojis.thumbs-down', { defaultValue: 'thumbs down' }),
'clapping-hands': t('emojis.clapping-hands', {
defaultValue: 'clapping hands',
}),
'red-heart': t('emojis.red-heart', { defaultValue: 'red heart' }),
'face-with-tears-of-joy': t('emojis.face-with-tears-of-joy', {
defaultValue: 'face with tears of joy',
}),
'face-with-open-mouth': t('emojis.face-with-open-mouth', {
defaultValue: 'surprised face',
}),
'party-popper': t('emojis.party-popper', { defaultValue: 'party popper' }),
'folded-hands': t('emojis.folded-hands', { defaultValue: 'folded hands' }),
}
return emojiLabels[emoji] ?? emoji
}