jeffemmett
/
daily-examples
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added separate handler for remote vs. local emojis

This commit is contained in:
Kimberlee Johnson 2021-11-16 14:26:40 -08:00
parent c5a077e95e
commit 283fd0c1c4
2 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
custom/flying-emojis/components/FlyingEmojisOverlay.js
View File

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

2
custom/shared/package.json
View File

@ -4,7 +4,7 @@
"private": true, "private": true,
"main": "index.js", "main": "index.js",
"dependencies": { "dependencies": {
"@daily-co/daily-js": "0.19.0", "@daily-co/daily-js": "0.21.0",
"bowser": "^2.11.0", "bowser": "^2.11.0",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"debounce": "^1.2.1", "debounce": "^1.2.1",