[Calling] Reaction bug for animation inconsistency for presentation m…

…ode reaction burst case fixed (#4370)
Azure · Apr 1, 2024 · 1a280e4 · 1a280e4
1 parent ba4e96c
commit 1a280e4
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 17 deletions.
diff --git a/change-beta/@azure-communication-react-83fbcf28-2844-46d4-8e21-d726a0f1976a.json b/change-beta/@azure-communication-react-83fbcf28-2844-46d4-8e21-d726a0f1976a.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Reaction",
+  "comment": "Reaction animation inconsistency for presentaiton mode burse case fixed.",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@azure-communication-react-83fbcf28-2844-46d4-8e21-d726a0f1976a.json b/change/@azure-communication-react-83fbcf28-2844-46d4-8e21-d726a0f1976a.json
@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "Reaction",
+  "comment": "Reaction animation inconsistency for presentaiton mode burse case fixed.",
+  "packageName": "@azure/communication-react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.tsx b/packages/react-components/src/components/VideoGallery/RemoteContentShareReactionOverlay.tsx
@@ -133,7 +133,7 @@ export const RemoteContentShareReactionOverlay = React.memo(
             reaction: reaction,
             id: combinedKey,
             reactionMovementIndex: reactionMovementIndex,
-            styleBucket: getReactionStyleBucket(reactionMovementIndex)
+            styleBucket: getReactionStyleBucket()
           }
         ]);
         return;
@@ -184,9 +184,8 @@ export const RemoteContentShareReactionOverlay = React.memo(
     const containerHeight = hostDivHeight ?? 0;
     const containerWidth = hostDivWidth ?? 0;
 
-    const styleBucket = (activeSprites: number): IReactionStyleBucket => getReactionStyleBucket(activeSprites);
-    const displaySizePx = (activeSprites: number): number =>
-      REACTION_START_DISPLAY_SIZE * styleBucket(activeSprites).sizeScale;
+    const styleBucket = (): IReactionStyleBucket => getReactionStyleBucket();
+    const displaySizePx = (): number => REACTION_START_DISPLAY_SIZE * styleBucket().sizeScale;
 
     const leftPosition = (position: number): number => generateStartPositionWave(position, containerWidth / 2, true);
     const reactionMovementStyle = (position: number): React.CSSProperties =>
@@ -230,7 +229,7 @@ export const RemoteContentShareReactionOverlay = React.memo(
                       <div
                         style={spriteAnimationStyles(
                           REACTION_NUMBER_OF_ANIMATION_FRAMES,
-                          displaySizePx(visibleReactions.length),
+                          displaySizePx(),
                           getEmojiResource(reaction?.reaction.reactionType, reactionResources) ?? ''
                         )}
                       />

diff --git a/packages/react-components/src/components/styles/ReactionOverlay.style.ts b/packages/react-components/src/components/styles/ReactionOverlay.style.ts
@@ -121,23 +121,18 @@ function scaleStartPos(index: number): number {
 
 /* @conditional-compile-remove(reaction) */
 /**
+ * We have only one bucket item for presentation style of the reaction animation.
+ * We are choosing to keep the array so that, in future, with styles needed to get updated, one
+ * can add new styles and apply from here, rather than updating over the same style. Later we can remove
+ * the old ones.
+ * It is for the ease of testing and implementation.
  * @private
  */
 const ReactionStyleBuckets: Array<IReactionStyleBucket> = [
-  {
-    sizeScale: 1,
-    heightMaxScale: 1 * 0.95,
-    opacityMax: 1
-  },
   {
     sizeScale: 0.9,
     heightMaxScale: 0.7 * 0.95,
     opacityMax: 0.9
-  },
-  {
-    sizeScale: 0.8,
-    heightMaxScale: 0.4 * 0.95,
-    opacityMax: 0.8
   }
 ];
 
@@ -184,14 +179,17 @@ export interface IReactionStyleBucket {
  * height, width, and opacity.
  * @private
  */
-export function getReactionStyleBucket(activeSpritesCount: number): IReactionStyleBucket {
-  const index = activeSpritesCount < 3 ? 0 : activeSpritesCount < 5 ? getRandomInt(0, 1) : getRandomInt(0, 2);
+export function getReactionStyleBucket(): IReactionStyleBucket {
+  // Having dynamic emoji size on rendering animation impacts performance of the animation itself.
+  // So we are choosing to use a fixed size for all cases.
+  const index = 0;
   return ReactionStyleBuckets[index];
 }
 
 /* @conditional-compile-remove(reaction) */
 /**
  * Return a style bucket for burst scenario
+ * We can utilize this style when we allow more than 50 reactions at a time. Can be configured through ECS.
  * @private
  */
 export function getReactionBurstStyleBucket(): IReactionStyleBucket {