Preprod [ Add Reactions ]

template/defaultConfig.js

@@ -83,6 +83,7 @@ const DefaultConfig = {
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,
   ENABLE_SPOTLIGHT: false,
+  ENABLE_LIVE_REACTIONS: true,
   AUTO_CONNECT_RTM: false,
   ENABLE_CONVERSATIONAL_AI: false,
   CUSTOMIZE_AGENT: true,

template/global.d.ts

@@ -170,6 +170,7 @@ interface ConfigInterface {
   STT_AUTO_START: boolean;
   CLOUD_RECORDING_AUTO_START: boolean;
   ENABLE_SPOTLIGHT: boolean;
+  ENABLE_LIVE_REACTIONS: boolean;
   AUTO_CONNECT_RTM: boolean;
   ENABLE_CONVERSATIONAL_AI: boolean;
   CUSTOMIZE_AGENT: boolean;

template/package.json

@@ -76,6 +76,7 @@
     "graphql": "15.5.0",
     "hark": "^1.2.3",
     "jwt-decode": "3.1.2",
+    "lottie-web": "^5.13.0",
     "nanoevents": "7.0.1",
     "nanoid": "4.0.0",
     "nosleep.js": "0.12.0",

template/src/components/Controls.tsx

@@ -123,6 +123,7 @@ import {
   ScreenshareToolbarItem,
 } from './controls/toolbar-items';
 import ViewTextTracksModal from './text-tracks/ViewTextTracksModal';
+import LiveReactionButton from './reactions/LiveReactionButton';
 
 export const useToggleWhiteboard = () => {
   const {
@@ -1129,6 +1130,14 @@ export const RecordingToolbarItem = props => {
   );
 };
 
+export const LiveReactionToolbarItem = props => {
+  return (
+    <ToolbarItem testID="liveReaction-btn" toolbarProps={props}>
+      <LiveReactionButton />
+    </ToolbarItem>
+  );
+};
+
 export const MoreButtonToolbarItem = (props?: {
   fields?: ToolbarMoreButtonCustomFields;
 }) => {
@@ -1324,36 +1333,43 @@ const Controls = (props: ControlsProps) => {
         component: LocalVideoToolbarItem,
         order: 2,
       },
+      reactions: {
+        align: 'center',
+        component: $config.ENABLE_LIVE_REACTIONS
+          ? LiveReactionToolbarItem
+          : null,
+        order: 3,
+      },
       'switch-camera': {
         align: 'center',
         component: SwitchCameraToolbarItem,
-        order: 3,
+        order: 4,
       },
       screenshare: {
         align: 'center',
         component: canAccessScreenshare ? ScreenshareToolbarItem : null,
-        order: 4,
+        order: 5,
         hide: w => {
           return w < BREAKPOINTS.sm ? true : false;
         },
       },
       recording: {
         align: 'center',
         component: RecordingToolbarItem,
-        order: 5,
+        order: 6,
         hide: w => {
           return w < BREAKPOINTS.sm ? true : false;
         },
       },
       more: {
         align: 'center',
         component: MoreButtonToolbarItem,
-        order: 6,
+        order: 7,
       },
       'end-call': {
         align: 'center',
         component: LocalEndcallToolbarItem,
-        order: 7,
+        order: 8,
       },
     };
   }, [canAccessInvite, canAccessScreenshare]);

template/src/components/reactions/LiveReactionBadge.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import {StyleSheet, Text, View} from 'react-native';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {useVideoCall} from '../useVideoCall';
+
+interface LiveReactionBadgeProps {
+  uid: number | string;
+  hasLeadingIcon?: boolean;
+}
+
+const LiveReactionBadge = ({
+  uid,
+  hasLeadingIcon = false,
+}: LiveReactionBadgeProps) => {
+  const {latestReactionByUid} = useVideoCall();
+  const reaction = latestReactionByUid[String(uid)];
+
+  if (!$config.ENABLE_LIVE_REACTIONS || !reaction) {
+    return null;
+  }
+
+  return (
+    <View
+      pointerEvents="none"
+      style={[
+        styles.container,
+        hasLeadingIcon ? styles.containerWithLeadingIcon : null,
+      ]}>
+      <Text style={styles.emoji}>{reaction.emoji}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 8,
+    left: 8,
+    zIndex: 1001,
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor:
+      $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['25%'],
+  },
+  containerWithLeadingIcon: {
+    left: 48,
+  },
+  emoji: {
+    fontSize: 24,
+    lineHeight: 26,
+  },
+});
+
+export default LiveReactionBadge;