agora-appbuilder-core 4.1.16 → 4.1.17

package/template/src/components/useVideoCall.tsx

@@ -13,6 +13,7 @@
 import React, {
   SetStateAction,
   useState,
+  useCallback,
   useContext,
   useEffect,
   useRef,
@@ -23,11 +24,30 @@ import StopRecordingPopup from './popups/StopRecordingPopup';
 import StartScreenSharePopup from './popups/StartScreenSharePopup';
 import StopScreenSharePopup from './popups/StopScreenSharePopup';
 import {SdkApiContext} from './SdkApiContext';
-import {UidType, useRoomInfo} from 'customization-api';
+import {
+  UidType,
+  useContent,
+  useLocalUserInfo,
+  useRoomInfo,
+} from 'customization-api';
 import SDKEvents from '../utils/SdkEvents';
 import DeviceContext from './DeviceContext';
 import useSetName from '../utils/useSetName';
 import WhiteboardClearAllPopup from './popups/WhiteboardClearAllPopup';
+import events from '../rtm-events-api';
+import {PersistanceLevel} from '../rtm-events-api/types';
+import {EventNames} from '../rtm-events';
+import {nanoid} from 'nanoid/non-secure';
+import {useUserPreference} from './useUserPreference';
+import {
+  LIVE_REACTION_BADGE_DURATION,
+  LIVE_REACTION_FLOAT_DURATION,
+  LIVE_REACTION_MAX_FLOATING_ITEMS,
+  LiveReactionDefinition,
+  LiveReactionEvent,
+} from './reactions/catalog';
+import {useString} from '../utils/useString';
+import {videoRoomUserFallbackText} from '../language/default-labels/videoCallScreenLabels';
 
 interface InViewPortState {
   [key: number]: boolean;
@@ -49,6 +69,9 @@ export interface VideoCallContextInterface {
   setVideoTileInViewPortState: (uid: UidType, visible: boolean) => void;
   showWhiteboardClearAllPopup: boolean;
   setShowWhiteboardClearAllPopup: React.Dispatch<SetStateAction<boolean>>;
+  latestReactionByUid: Record<string, LiveReactionEvent>;
+  floatingReactions: LiveReactionEvent[];
+  emitLiveReaction: (reaction: LiveReactionDefinition) => void;
 }
 
 const VideoCallContext = React.createContext<VideoCallContextInterface>({
@@ -68,6 +91,9 @@ const VideoCallContext = React.createContext<VideoCallContextInterface>({
   setVideoTileInViewPortState: () => {},
   showWhiteboardClearAllPopup: false,
   setShowWhiteboardClearAllPopup: () => {},
+  latestReactionByUid: {},
+  floatingReactions: [],
+  emitLiveReaction: () => {},
 });
 
 interface VideoCallProviderProps {
@@ -86,10 +112,50 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
     useState(false);
   const {join, enterRoom} = useContext(SdkApiContext);
   const roomInfo = useRoomInfo();
+  const localUser = useLocalUserInfo();
+  const {defaultContent} = useContent();
+  const {uids} = useUserPreference();
+  const remoteUserFallbackName = useString(videoRoomUserFallbackText)();
   const {deviceList} = useContext(DeviceContext);
   const setUsername = useSetName();
   //const videoTileInViewPortStateRef = useRef({});
   const [videoTileInViewPortState, setVideoTileInViewPortStateL] = useState({});
+  const [latestReactionByUid, setLatestReactionByUid] = useState<
+    Record<string, LiveReactionEvent>
+  >({});
+  const [floatingReactions, setFloatingReactions] = useState<
+    LiveReactionEvent[]
+  >([]);
+  const reactionBadgeTimeoutsRef = useRef<
+    Record<string, ReturnType<typeof setTimeout>>
+  >({});
+  const floatingReactionTimeoutsRef = useRef<
+    Record<string, ReturnType<typeof setTimeout>>
+  >({});
+  const processedReactionIdsRef = useRef<Set<string>>(new Set());
+
+  const assignReactionLane = useCallback((reaction: LiveReactionEvent) => {
+    if (typeof reaction.lane === 'number') {
+      return reaction;
+    }
+    const lane = Math.floor(Math.random() * 5);
+    return {...reaction, lane};
+  }, []);
+
+  const getReactionSenderName = useCallback(
+    (senderUid: string) => {
+      if (String(localUser.uid) === String(senderUid)) {
+        return 'You';
+      }
+      return (
+        uids[String(senderUid)]?.name ||
+        defaultContent[Number(senderUid)]?.name ||
+        defaultContent[String(senderUid)]?.name ||
+        remoteUserFallbackName
+      );
+    },
+    [defaultContent, localUser.uid, remoteUserFallbackName, uids],
+  );
 
   const setVideoTileInViewPortState = (uid: UidType, visible: boolean) => {
     //videoTileInViewPortStateRef.current[uid] = visible;
@@ -101,6 +167,117 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
     });
   };
 
+  const cleanupReactionBadgeTimeout = useCallback((uid: string) => {
+    if (reactionBadgeTimeoutsRef.current[uid]) {
+      clearTimeout(reactionBadgeTimeoutsRef.current[uid]);
+      delete reactionBadgeTimeoutsRef.current[uid];
+    }
+  }, []);
+
+  const cleanupFloatingReactionTimeout = useCallback((reactionId: string) => {
+    if (floatingReactionTimeoutsRef.current[reactionId]) {
+      clearTimeout(floatingReactionTimeoutsRef.current[reactionId]);
+      delete floatingReactionTimeoutsRef.current[reactionId];
+    }
+  }, []);
+
+  const ingestReaction = useCallback(
+    (reaction: LiveReactionEvent) => {
+      if (!$config.ENABLE_LIVE_REACTIONS) {
+        return;
+      }
+      if (processedReactionIdsRef.current.has(reaction.reactionId)) {
+        return;
+      }
+      const nextReaction = assignReactionLane({
+        ...reaction,
+        senderDisplayName: getReactionSenderName(reaction.senderUid),
+      });
+      processedReactionIdsRef.current.add(nextReaction.reactionId);
+      if (processedReactionIdsRef.current.size > 200) {
+        processedReactionIdsRef.current = new Set(
+          Array.from(processedReactionIdsRef.current).slice(-100),
+        );
+      }
+
+      setLatestReactionByUid(prev => ({
+        ...prev,
+        [nextReaction.senderUid]: nextReaction,
+      }));
+      cleanupReactionBadgeTimeout(nextReaction.senderUid);
+      reactionBadgeTimeoutsRef.current[nextReaction.senderUid] = setTimeout(
+        () => {
+          setLatestReactionByUid(prev => {
+            if (
+              prev[nextReaction.senderUid]?.reactionId !==
+              nextReaction.reactionId
+            ) {
+              return prev;
+            }
+            const next = {...prev};
+            delete next[nextReaction.senderUid];
+            return next;
+          });
+          cleanupReactionBadgeTimeout(nextReaction.senderUid);
+        },
+        LIVE_REACTION_BADGE_DURATION,
+      );
+
+      setFloatingReactions(prev => {
+        const next = [...prev, nextReaction];
+        return next.length > LIVE_REACTION_MAX_FLOATING_ITEMS
+          ? next.slice(next.length - LIVE_REACTION_MAX_FLOATING_ITEMS)
+          : next;
+      });
+      cleanupFloatingReactionTimeout(nextReaction.reactionId);
+      floatingReactionTimeoutsRef.current[nextReaction.reactionId] = setTimeout(
+        () => {
+          setFloatingReactions(prev =>
+            prev.filter(item => item.reactionId !== nextReaction.reactionId),
+          );
+          cleanupFloatingReactionTimeout(nextReaction.reactionId);
+        },
+        LIVE_REACTION_FLOAT_DURATION,
+      );
+    },
+    [
+      assignReactionLane,
+      cleanupFloatingReactionTimeout,
+      cleanupReactionBadgeTimeout,
+      getReactionSenderName,
+    ],
+  );
+
+  const emitLiveReaction = useCallback(
+    (reaction: LiveReactionDefinition) => {
+      const reactionId = `${localUser.uid}-${
+        reaction.key
+      }-${Date.now()}-${nanoid(4)}`;
+      const senderDisplayName = getReactionSenderName(String(localUser.uid));
+      const nextReaction: LiveReactionEvent = {
+        reactionId,
+        assetKey: reaction.key,
+        emoji: reaction.emoji,
+        senderUid: String(localUser.uid),
+        senderDisplayName,
+        timestamp: Date.now(),
+      };
+
+      ingestReaction(nextReaction);
+      events.send(
+        EventNames.LIVE_REACTION,
+        JSON.stringify({
+          reactionId: nextReaction.reactionId,
+          assetKey: nextReaction.assetKey,
+          emoji: nextReaction.emoji,
+          timestamp: nextReaction.timestamp,
+        }),
+        PersistanceLevel.None,
+      );
+    },
+    [getReactionSenderName, ingestReaction, localUser.uid],
+  );
+
   useEffect(() => {
     if (join.initialized && join.phrase) {
       if (join.userName && join.skipPrecall) {
@@ -118,6 +295,44 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
       roomInfo.data.isHost,
     );
   }, []);
+
+  useEffect(() => {
+    if (!$config.ENABLE_LIVE_REACTIONS) {
+      return;
+    }
+    const unsubscribe = events.on(EventNames.LIVE_REACTION, data => {
+      try {
+        const payload =
+          typeof data.payload === 'string'
+            ? JSON.parse(data.payload)
+            : data.payload;
+        ingestReaction({
+          reactionId: payload.reactionId,
+          assetKey: payload.assetKey,
+          emoji: payload.emoji,
+          senderUid: String(data.sender),
+          timestamp: payload.timestamp || data.ts || Date.now(),
+        });
+      } catch (error) {
+        console.warn('Failed to parse live reaction payload', error);
+      }
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [ingestReaction]);
+
+  useEffect(() => {
+    return () => {
+      Object.keys(reactionBadgeTimeoutsRef.current).forEach(uid => {
+        cleanupReactionBadgeTimeout(uid);
+      });
+      Object.keys(floatingReactionTimeoutsRef.current).forEach(reactionId => {
+        cleanupFloatingReactionTimeout(reactionId);
+      });
+    };
+  }, [cleanupFloatingReactionTimeout, cleanupReactionBadgeTimeout]);
   return (
     <VideoCallContext.Provider
       value={{
@@ -138,6 +353,9 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
         videoTileInViewPortState,
         showWhiteboardClearAllPopup,
         setShowWhiteboardClearAllPopup,
+        latestReactionByUid,
+        floatingReactions,
+        emitLiveReaction,
       }}>
       <StartScreenSharePopup />
       <StopScreenSharePopup />

package/template/src/language/default-labels/videoCallScreenLabels.ts

@@ -114,6 +114,7 @@ export const toolbarItemManageTextTracksText =
 export const toolbarItemVirtualBackgroundText =
   'toolbarItemVirtualBackgroundText';
 export const toolbarItemViewRecordingText = 'toolbarItemViewRecordingText';
+export const toolbarItemReactionText = 'toolbarItemReactionText';
 
 export const toolbarItemRaiseHandText = 'toolbarItemRaiseHandText';
 
@@ -585,6 +586,7 @@ export interface I18nVideoCallScreenLabelsInterface {
   [toolbarItemManageTextTracksText]?: I18nConditionalType;
   [toolbarItemVirtualBackgroundText]?: I18nBaseType;
   [toolbarItemViewRecordingText]?: I18nConditionalType;
+  [toolbarItemReactionText]?: I18nBaseType;
 
   [toolbarItemRaiseHandText]?: I18nConditionalType;
 
@@ -957,6 +959,7 @@ export const VideoCallScreenLabels: I18nVideoCallScreenLabelsInterface = {
   [toolbarItemTranscriptText]: active =>
     active ? 'Hide Meeting Transcript' : 'Show Meeting Transcript',
   [toolbarItemViewRecordingText]: 'View Recordings',
+  [toolbarItemReactionText]: 'React',
   [toolbarItemManageTextTracksText]: 'View Text-tracks',
 
   [toolbarItemRaiseHandText]: active => (active ? 'Lower Hand' : 'Raise Hand'),

package/template/src/pages/video-call/ActionSheetContent.tsx

@@ -65,6 +65,7 @@ import {
   ScreenshareToolbarItem,
 } from '../../components/controls/toolbar-items';
 import {useControlPermissionMatrix} from '../../components/controls/useControlPermissionMatrix';
+import LiveReactionButton from '../../components/reactions/LiveReactionButton';
 //Icon for expanding Action Sheet
 interface ShowMoreIconProps {
   isExpanded: boolean;
@@ -157,6 +158,14 @@ const LayoutIcon = props => {
   );
 };
 
+const LiveReactionIcon = props => {
+  return (
+    <ToolbarItem toolbarProps={props}>
+      <LiveReactionButton />
+    </ToolbarItem>
+  );
+};
+
 interface CaptionIconBtnProps {
   showLabel?: boolean;
   onPressCallback?: () => void;
@@ -341,8 +350,12 @@ const ActionSheetContent = props => {
       component:
         !isAudioRoom && (isAudioVideoControlsDisabled ? null : CamIcon),
     },
-    'end-call': {
+    reactions: {
       order: 2,
+      component: $config.ENABLE_LIVE_REACTIONS ? LiveReactionIcon : null,
+    },
+    'end-call': {
+      order: 3,
       component: EndCallIcon,
     },
     chat: {

package/template/src/pages/video-call/VideoComponent.tsx

@@ -13,6 +13,7 @@ import {useLiveStreamDataContext} from '../../components/contexts/LiveStreamData
 import {useCustomization} from 'customization-implementation';
 import useMount from '../../components/useMount';
 import {whiteboardContext} from '../../components/whiteboard/WhiteboardConfigure';
+import LiveReactionStageOverlay from '../../components/reactions/LiveReactionStageOverlay';
 
 const VideoComponent = () => {
   const {dispatch} = useContext(DispatchContext);
@@ -108,10 +109,12 @@ const VideoComponent = () => {
         <View
           style={{
             flex: 1,
+            position: 'relative',
             flexDirection: isDesktop() ? 'row' : 'column',
             justifyContent: 'space-between',
           }}>
           <CurrentLayout renderData={activeUids} />
+          <LiveReactionStageOverlay />
           {((!$config.EVENT_MODE && activeUids.length === 1) ||
             ($config.EVENT_MODE &&
               hostUids.concat(audienceUids)?.length === 1)) &&
@@ -127,7 +130,12 @@ const VideoComponent = () => {
         </View>
       );
     }
-    return <CurrentLayout renderData={activeUids} />;
+    return (
+      <View style={{flex: 1, position: 'relative'}}>
+        <CurrentLayout renderData={activeUids} />
+        <LiveReactionStageOverlay />
+      </View>
+    );
   } else {
     return <></>;
   }

package/template/src/pages/video-call/VideoRenderer.tsx

@@ -52,6 +52,7 @@ import {LogSource, logger} from '../../logger/AppBuilderLogger';
 import {useFullScreen} from '../../utils/useFullScreen';
 import SpotlightHighligher from './SpotlightHighlighter';
 import {AgentContext} from '../../ai-agent/components/AgentControls/AgentContext';
+import LiveReactionBadge from '../../components/reactions/LiveReactionBadge';
 
 export interface VideoRendererProps {
   user: ContentInterface;
@@ -238,6 +239,13 @@ const VideoRenderer: React.FC<VideoRendererProps> = ({
           {!showReplacePin && !showPinForMe && (
             <ScreenShareNotice uid={user.uid} isMax={isMax} />
           )}
+          <LiveReactionBadge
+            uid={user.uid}
+            hasLeadingIcon={
+              currentLayout === DefaultLayouts[1].name &&
+              user.uid === secondaryPinnedUid
+            }
+          />
           {currentLayout === DefaultLayouts[1].name &&
           user.uid === secondaryPinnedUid ? (
             <View

package/template/src/rtm-events/constants.ts

@@ -47,6 +47,7 @@ const BOARD_COLOR_CHANGED = 'BOARD_COLOR_CHANGED';
 const WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION = 'WHITEBOARD_L_I_U_P';
 const RECORDING_DELETED = 'RECORDING_DELETED';
 const SPOTLIGHT_USER_CHANGED = 'SPOTLIGHT_USER_CHANGED';
+const LIVE_REACTION = 'LIVE_REACTION';
 const EventNames = {
   RECORDING_STATE_ATTRIBUTE,
   RECORDING_STARTED_BY_ATTRIBUTE,
@@ -76,6 +77,7 @@ const EventNames = {
   WHITEBOARD_LAST_IMAGE_UPLOAD_POSITION,
   RECORDING_DELETED,
   SPOTLIGHT_USER_CHANGED,
+  LIVE_REACTION,
 };
 /** ***** EVENT NAMES ENDS ***** */
 

package/template/webpack.commons.js

@@ -132,7 +132,7 @@ module.exports = {
         },
       },
       {
-        test: /\.(mp4|png|jpe?g|gif)$/i,
+        test: /\.(mp4|png|jpe?g|gif|webp)$/i,
         use: [
           {
             loader: 'file-loader',

package/template/webpack.ts.config.js

@@ -71,7 +71,7 @@ module.exports = merge(commons, {
         },
       },
       {
-        test: /\.(png|jpe?g|gif)$/i,
+        test: /\.(png|jpe?g|gif|webp)$/i,
         use: [
           {
             loader: 'file-loader',