From 283fd0c1c4271412ce87668e7a9dd7f91b4d909d Mon Sep 17 00:00:00 2001
From: Kimberlee Johnson <hello@kimberlee.dev>
Date: Tue, 16 Nov 2021 14:26:40 -0800
Subject: [PATCH] Added separate handler for remote vs. local emojis

---
 .../components/FlyingEmojisOverlay.js         | 34 +++++++++++++------
 custom/shared/package.json                    |  2 +-
 2 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/custom/flying-emojis/components/FlyingEmojisOverlay.js b/custom/flying-emojis/components/FlyingEmojisOverlay.js
index 35b87d7..559b7e6 100644
--- a/custom/flying-emojis/components/FlyingEmojisOverlay.js
+++ b/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(
diff --git a/custom/shared/package.json b/custom/shared/package.json
index b0acf8a..dfce824 100644
--- a/custom/shared/package.json
+++ b/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",