Fix reaction animation frame glitch on Android (#4404)

Author: JamesBurnside

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

@@ -52,7 +52,7 @@ export interface MeetingReactionOverlayProps {
  * Emoji max size
  * @internal
  */
-const DEFAULT_EMOJI_MAX_SIZE_PX = 100;
+const DEFAULT_EMOJI_MAX_SIZE_PX = 70;
 /* @conditional-compile-remove(reaction) */
 /**
  * Emoji min size

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

@@ -6,13 +6,15 @@ import React, { useCallback, useEffect, useState } from 'react';
 /* @conditional-compile-remove(reaction) */
 import { Reaction, ReactionResources } from '../../types';
 /* @conditional-compile-remove(reaction) */
-import { getEmojiFrameCount, getEmojiResource } from './utils/videoGalleryLayoutUtils';
+import { getEmojiFrameCount, getEmojiFrameSize, getEmojiResource } from './utils/videoGalleryLayoutUtils';
 /* @conditional-compile-remove(reaction) */
 import { Stack, mergeStyles } from '@fluentui/react';
 /* @conditional-compile-remove(reaction) */
 import { reactionRenderingStyle, videoContainerStyles } from '../styles/VideoTile.styles';
 /* @conditional-compile-remove(reaction) */
 import {
+  REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX,
+  REACTION_NUMBER_OF_ANIMATION_FRAMES,
   REACTION_SCREEN_SHARE_ANIMATION_TIME_MS,
   REACTION_START_DISPLAY_SIZE,
   getReceivedUnixTime
@@ -41,6 +43,11 @@ export const ParticipantVideoTileOverlay = React.memo(
         ? getEmojiFrameCount(reaction?.reactionType, reactionResources)
         : undefined;
 
+    const frameSize =
+      reaction !== undefined && reactionResources !== undefined
+        ? getEmojiFrameSize(reaction?.reactionType, reactionResources)
+        : undefined;
+
     const currentUnixTimeStamp = Date.now();
     const receivedUnixTimestamp = reaction ? getReceivedUnixTime(reaction.receivedOn) : undefined;
     const canRenderReaction =
@@ -66,11 +73,12 @@ export const ParticipantVideoTileOverlay = React.memo(
     const reactionContainerStyles = useCallback(
       () =>
         reactionRenderingStyle({
-          spriteImageUrl,
+          spriteImageUrl: spriteImageUrl ?? '',
           emojiSize: emojiSize,
-          frameCount
+          frameCount: frameCount ?? REACTION_NUMBER_OF_ANIMATION_FRAMES,
+          rawFrameSize: frameSize ?? REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX
         }),
-      [spriteImageUrl, emojiSize, frameCount]
+      [spriteImageUrl, emojiSize, frameCount, frameSize]
     );
 
     return (
@@ -84,7 +92,13 @@ export const ParticipantVideoTileOverlay = React.memo(
       >
         <div style={{ height: '33.33%' }}></div>
         {canRenderReaction && isValidImageSource && (
-          <div style={{ minHeight: '84px', height: '84px', width: '84px' }}>
+          <div
+            style={{
+              minHeight: `${emojiSize}px`,
+              height: `${emojiSize}px`,
+              width: `${emojiSize}px`
+            }}
+          >
             <div className={reactionContainerStyles()} />
           </div>
         )}

packages/react-components/src/components/VideoGallery/utils/reactionUtils.ts

@@ -10,6 +10,9 @@ export const REACTION_NUMBER_OF_ANIMATION_FRAMES = 51;
 /* @conditional-compile-remove(reaction) */
 /** @private */
 export const REACTION_SCREEN_SHARE_ANIMATION_TIME_MS = 4133;
+/* @conditional-compile-remove(reaction) */
+/** @private */
+export const REACTION_DEFAULT_RESOURCE_FRAME_SIZE_PX = 128;
 
 /* @conditional-compile-remove(reaction) */
 /** @private */

packages/react-components/src/components/VideoGallery/utils/videoGalleryLayoutUtils.ts

@@ -284,3 +284,24 @@ export const getEmojiFrameCount = (reactionName: string, reactionResources: Reac
       return 0;
   }
 };
+
+/* @conditional-compile-remove(reaction) */
+/**
+ * @private
+ */
+export const getEmojiFrameSize = (reactionName: string, reactionResources: ReactionResources): number | undefined => {
+  switch (reactionName) {
+    case 'like':
+      return reactionResources.likeReaction?.size;
+    case 'heart':
+      return reactionResources.heartReaction?.size;
+    case 'laugh':
+      return reactionResources.laughReaction?.size;
+    case 'applause':
+      return reactionResources.applauseReaction?.size;
+    case 'surprised':
+      return reactionResources.surprisedReaction?.size;
+    default:
+      return undefined;
+  }
+};

packages/react-components/src/components/styles/VideoTile.styles.ts

@@ -4,12 +4,8 @@
 import { IButtonStyles, IStyle, mergeStyles, Theme, ITheme } from '@fluentui/react';
 /* @conditional-compile-remove(reaction) */
 import { keyframes, memoizeFunction } from '@fluentui/react';
-
 /* @conditional-compile-remove(reaction) */
-/**
- * @private
- */
-const DEFAULT_ORIGINAL_EMOJI_SIZE = 84;
+import { REACTION_SCREEN_SHARE_ANIMATION_TIME_MS } from '../VideoGallery/utils/reactionUtils';
 
 /**
  * @private
@@ -186,13 +182,13 @@ export const raiseHandLimitedSpaceStyles: IStyle = {
 /**
  * @private
  */
-export const playFrames = memoizeFunction(() =>
+export const playFrames = memoizeFunction((frameHightPx: number, frameCount: number) =>
   keyframes({
     from: {
-      backgroundPosition: '0px 8568px'
+      backgroundPosition: `0px 0px`
     },
     to: {
-      backgroundPosition: '0px 0px'
+      backgroundPosition: `0px ${frameCount * -frameHightPx}px`
     }
   })
 );
@@ -202,30 +198,27 @@ export const playFrames = memoizeFunction(() =>
  * @private
  */
 export const reactionRenderingStyle = (args: {
-  spriteImageUrl?: string;
+  spriteImageUrl: string;
   emojiSize: number;
-  frameCount?: number;
+  rawFrameSize: number;
+  frameCount: number;
 }): string => {
   const imageUrl = `url(${args.spriteImageUrl})`;
-  const steps = args.frameCount ?? 51;
+  const steps = args.frameCount ?? 0;
+  const frameSizePx = args.rawFrameSize;
   return mergeStyles({
-    height: '100%',
-    width: '100%',
+    height: `${frameSizePx}px`,
+    width: `${frameSizePx}px`,
     overflow: 'hidden',
-    animationName: playFrames(),
+    animationName: playFrames(frameSizePx, steps),
     backgroundImage: imageUrl,
-    animationDuration: '5.12s',
+    animationDuration: `${REACTION_SCREEN_SHARE_ANIMATION_TIME_MS / 1000}s`,
     animationTimingFunction: `steps(${steps})`,
-    backgroundSize: `cover`,
     animationPlayState: 'running',
     animationIterationCount: 'infinite',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundPosition: `center`,
-    transform: `scale(${
-      DEFAULT_ORIGINAL_EMOJI_SIZE < args.emojiSize
-        ? DEFAULT_ORIGINAL_EMOJI_SIZE / args.emojiSize
-        : args.emojiSize / DEFAULT_ORIGINAL_EMOJI_SIZE
-    })`
+
+    // Scale the emoji to fit the parent container
+    transform: `scale(${args.emojiSize / frameSizePx})`,
+    transformOrigin: 'top left'
   });
 };