diff --git a/dailyjs/README.md b/dailyjs/README.md index 9b78cc3..5c3d2f6 100644 --- a/dailyjs/README.md +++ b/dailyjs/README.md @@ -12,6 +12,10 @@ Send messages to other participants using sendAppMessage Broadcast call to a custom RTMP endpoint using a variety of different layout modes +### [🔥 Flying emojis](./flying-emojis) + +Send emoji reactions to all clients using sendAppMessage + --- ## Getting started diff --git a/dailyjs/flying-emojis/components/Tray/Tray.js b/dailyjs/flying-emojis/components/Tray/Tray.js index 3788e98..113de3d 100644 --- a/dailyjs/flying-emojis/components/Tray/Tray.js +++ b/dailyjs/flying-emojis/components/Tray/Tray.js @@ -4,8 +4,11 @@ import Button from '@dailyjs/shared/components/Button'; import { TrayButton } from '@dailyjs/shared/components/Tray'; import { ReactComponent as IconStar } from '@dailyjs/shared/icons/star-md.svg'; +const COOLDOWN = 1500; + export const Tray = () => { const [showEmojis, setShowEmojis] = useState(false); + const [isThrottled, setIsThrottled] = useState(false); function sendEmoji(emoji) { // Dispatch custom event here so the local user can see their own emoji @@ -13,8 +16,18 @@ export const Tray = () => { new CustomEvent('reaction_added', { detail: { emoji } }) ); setShowEmojis(false); + setIsThrottled(true); } + // Pseudo-throttling (should ideally be done serverside) + useEffect(() => { + if (!isThrottled) { + return false; + } + const t = setTimeout(() => setIsThrottled(false), COOLDOWN); + return () => clearTimeout(t); + }, [isThrottled]); + return (