Fix reaction crash (#4608)

* Fix crash bug for remote screen share

Author: PorterNan

change-beta/@azure-communication-react-d6a2c723-a4e8-48db-9ce4-a26c89fa019b.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix crash bug for remote screen share",
+  "packageName": "@azure/communication-react",
+  "email": "jiangnanhello@live.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-d6a2c723-a4e8-48db-9ce4-a26c89fa019b.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "",
+  "comment": "Fix crash bug for remote screen share",
+  "packageName": "@azure/communication-react",
+  "email": "jiangnanhello@live.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/RemoteVideoTile.tsx

@@ -203,11 +203,11 @@ export const _RemoteVideoTile = React.memo(
       return remoteParticipant.displayName;
     };
 
-    const reactionOverlay = (
+    const reactionOverlay = reactionResources && (
       <MeetingReactionOverlay
         overlayMode="grid-tiles"
         reaction={remoteParticipant.reaction}
-        reactionResources={reactionResources!}
+        reactionResources={reactionResources}
       />
     );
 

packages/react-components/src/components/VideoGallery/RemoteScreenShare.tsx

@@ -93,12 +93,14 @@ export const RemoteScreenShare = React.memo(
           }
           onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}
           overlay={
-            <MeetingReactionOverlay
-              reactionResources={reactionResources!}
-              localParticipant={localParticipant}
-              remoteParticipants={remoteParticipants}
-              overlayMode="screen-share"
-            />
+            reactionResources && (
+              <MeetingReactionOverlay
+                reactionResources={reactionResources}
+                localParticipant={localParticipant}
+                remoteParticipants={remoteParticipants}
+                overlayMode="screen-share"
+              />
+            )
           }
         />
       );
@@ -115,12 +117,14 @@ export const RemoteScreenShare = React.memo(
         }
         onRenderPlaceholder={() => <LoadingSpinner loadingMessage={loadingMessage} />}
         overlay={
-          <MeetingReactionOverlay
-            reactionResources={reactionResources!}
-            localParticipant={localParticipant}
-            remoteParticipants={remoteParticipants}
-            overlayMode="screen-share"
-          />
+          reactionResources && (
+            <MeetingReactionOverlay
+              reactionResources={reactionResources}
+              localParticipant={localParticipant}
+              remoteParticipants={remoteParticipants}
+              overlayMode="screen-share"
+            />
+          )
         }
       />
     );