Conference UI: Implement Emoji Reactions

Summary

Implement the frontend integration for live emoji reactions in video calls. Participants can send emoji reactions (👍 👏 ❤️ 🎉 😮 😂 🥲 👎) via a toolbar button and picker. Reactions appear on the sender's video tile for all participants for 7 seconds. Moderators can enable/disable reactions globally via the moderator menu. The feature follows existing patterns established by the raise-hand feature (signaling API, participant state, tile overlay, moderator toggle).

Translation

English German
Disable Emoji Reactions Emoji-Reaktionen deaktivieren
Enable Emoji Reactions Emoji-Reaktionen aktivieren
Reactions have been enabled by the host Reaktionen wurden vom Moderator aktiviert
Reactions have been disabled by the host Reaktionen wurden vom Moderator deaktiviert
Reactions enabled Reaktionen aktiviert
Reactions disabled Reaktionen deaktiviert

Technical Notes

  • Toolbar button: Follow HandraiseButton pattern - single component file using useAppDispatch/useAppSelector
  • Picker: New component, positioned with Popper/Popover (MUI)
  • Tile overlay: New fragment in ParticipantWindow, positioned similarly to HandRaisedIndicator but in a distinct zone to avoid collision
  • State: Extend participantsSlice with reaction: string | null and reactionUpdatedAt: string | null; extend moderationSlice with reactionsEnabled: boolean

Out of Scope

  • Persistent reactions in recordings/transcripts
  • Custom emoji uploads
  • Floating screen-wide overlay animation

Acceptance Criteria

Reaction Picker & Sending

  • A reaction button is added to the in-call toolbar (position: between existing buttons per design spec)
  • Clicking the reaction button opens a picker directly above the toolbar with a downward-pointing caret aligned to the button
  • The picker displays all 8 emojis in a single horizontal row in fixed order: 👍 👏 ❤️ 🎉 😮 😂 🥲 👎
  • Hovering an emoji scales it to 1.15×
  • Selecting an emoji closes the picker immediately and dispatches the reaction via the signaling API
  • Clicking outside the picker or pressing Escape closes it without sending a reaction; focus returns to the reaction button
  • The reaction button shows aria-expanded="true" while the picker is open

Display on Video Tiles

  • The selected emoji is displayed as an overlay on the sender's video tile (position: bottom-left corner of the sender's video tile) - for others and the own tile
  • The reaction appears with a subtle scale-in animation and disappears with a fade-out (suggestion - not mentioned in the spec)
  • The reaction auto-dismisses after 7 seconds
  • A new reaction from the same participant immediately replaces any currently displayed reaction (timer resets)
  • Reactions are displayed individually per participant without grouping
  • Reactions do not obscure the participant name or audio/video status indicators
  • In screen-share/presentation mode, reactions appear on the participant's thumbnail in the filmstrip

Moderator Toggle

  • The moderator menu contains an entry to enable/disable emoji reactions
  • When reactions are disabled, the toolbar reaction button is shown grayed out with a red strikethrough line
  • The disabled button is visible but not clickable
  • When reactions are disabled by the moderator, all currently displayed reaction overlays are dismissed immediately across all tiles

Notifications

  • When the moderator enables reactions, all other participants see a snackbar: "Reactions have been enabled by the host"
  • When the moderator disables reactions, all other participants see a snackbar: "Reactions have been disabled by the host"
  • The moderator receives a localized confirmation snackbar: "Reactions enabled" / "Reactions disabled"
Edited by Albrecht Weiche