Added separate handler for remote vs. local emojis

custom/flying-emojis/components/FlyingEmojisOverlay.js

@@ -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(

custom/shared/package.json

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