# 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** - [x] A reaction button is added to the in-call toolbar (position: between existing buttons per design spec) - [x] Clicking the reaction button opens a picker directly above the toolbar with a downward-pointing caret aligned to the button - [x] The picker displays all 8 emojis in a single horizontal row in fixed order: 👍 👏 ❤️ 🎉 😮 😂 🥲 👎 - [x] Hovering an emoji scales it to 1.15× - [x] Selecting an emoji closes the picker immediately and dispatches the reaction via the signaling API - [x] Clicking outside the picker or pressing Escape closes it without sending a reaction; focus returns to the reaction button - [x] The reaction button shows `aria-expanded="true"` while the picker is open **Display on Video Tiles** - [x] 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 - [x] The reaction appears with a subtle scale-in animation and disappears with a fade-out (suggestion - not mentioned in the spec) - [x] The reaction auto-dismisses after 7 seconds - [x] A new reaction from the same participant immediately replaces any currently displayed reaction (timer resets) - [x] Reactions are displayed individually per participant without grouping - [x] Reactions do not obscure the participant name or audio/video status indicators - [x] In screen-share/presentation mode, reactions appear on the participant's thumbnail in the filmstrip **Moderator Toggle** - [x] The moderator menu contains an entry to enable/disable emoji reactions - [x] When reactions are disabled, the toolbar reaction button is shown grayed out with a red strikethrough line - [x] The disabled button is visible but not clickable - [x] When reactions are disabled by the moderator, all currently displayed reaction overlays are dismissed immediately across all tiles **Notifications** - [x] When the moderator enables reactions, all other participants see a snackbar: "Reactions have been enabled by the host" - [x] When the moderator disables reactions, all other participants see a snackbar: "Reactions have been disabled by the host" - [x] The moderator receives a localized confirmation snackbar: "Reactions enabled" / "Reactions disabled"