Merge pull request #46 from daily-demos/dev-1052-fix-undefined-flying-emojis-in-examples

DEV-1052 Fix: undefined flying emojis in examples repo
This commit is contained in:
Jon Taylor 2021-11-17 10:37:57 +00:00 committed by GitHub
commit 51092ab20b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 11 deletions

View File

@ -18,7 +18,7 @@ export const FlyingEmojisOverlay = () => {
overlayRef.current.removeChild(node);
}, []);
const handleNewFlyingEmoji = useCallback(
const handleDisplayFlyingEmoji = useCallback(
(emoji) => {
if (!overlayRef.current) {
return;
@ -42,6 +42,18 @@ export const FlyingEmojisOverlay = () => {
[handleRemoveFlyingEmoji]
);
const handleReceiveFlyingEmoji = useCallback(
(e) => {
if (!overlayRef.current) {
return;
}
console.log(`🚨 New emoji message received: ${e.data.message}`);
handleDisplayFlyingEmoji(e.data.message);
},
[handleDisplayFlyingEmoji]
);
// -- Effects
// Listen for new app messages and show new flying emojis
@ -52,31 +64,31 @@ export const FlyingEmojisOverlay = () => {
console.log(`⭐ Listening for flying emojis...`);
callObject.on('app-message', handleNewFlyingEmoji);
callObject.on('app-message', handleReceiveFlyingEmoji);
return () => callObject.off('app-message', handleNewFlyingEmoji);
}, [callObject, handleNewFlyingEmoji]);
return () => callObject.off('app-message', handleReceiveFlyingEmoji);
}, [callObject, handleReceiveFlyingEmoji]);
// Listen to window events to show local user emojis
// Listen to window events to show local user emojis and send the emoji to all participants on the call
useEffect(() => {
if (!callObject) {
return false;
}
function handleIncomingEmoji(e) {
function handleSendFlyingEmoji(e) {
const { emoji } = e.detail;
console.log(`⭐ Sending flying emoji: ${emoji}`);
if (emoji) {
callObject.sendAppMessage({ emoji }, '*');
handleNewFlyingEmoji(emoji);
callObject.sendAppMessage({ message: `${emoji}` }, '*');
handleDisplayFlyingEmoji(emoji);
}
}
window.addEventListener('reaction_added', handleIncomingEmoji);
window.addEventListener('reaction_added', handleSendFlyingEmoji);
return () =>
window.removeEventListener('reaction_added', handleIncomingEmoji);
}, [callObject, handleNewFlyingEmoji]);
window.removeEventListener('reaction_added', handleSendFlyingEmoji);
}, [callObject, handleDisplayFlyingEmoji]);
// Remove all event listeners on unmount to prevent console warnings
useEffect(