agora-appbuilder-core 4.1.20 → 4.1.21

package/template/src/components/reactions/LiveReactionStageOverlay.tsx

@@ -4,7 +4,8 @@ import {useVideoCall} from '../useVideoCall';
 import {
   LIVE_REACTION_FLOAT_DURATION,
   LIVE_REACTION_LANE_COUNT,
-  LIVE_REACTION_MAP,
+  getLiveReactionMap,
+  resolveReactionVisual,
 } from './catalog';
 
 // Use the bundled Lottie player directly instead of relying on a global.
@@ -123,6 +124,11 @@ const css = `
   object-fit: contain;
   display: block;
 }
+.live-reaction-stage-item img.live-reaction-custom {
+  width: 36px;
+  height: 36px;
+  border-radius: 6px;
+}
 .live-reaction-clap {
   width: 48px;
   height: 48px;
@@ -181,13 +187,15 @@ const css = `
 const ReactionArt = ({
   fallbackSrc,
   lottieData,
+  isCustom,
 }: {
   fallbackSrc: string;
   lottieData?: any;
+  isCustom?: boolean;
 }) => {
   const containerRef = React.useRef<HTMLDivElement | null>(null);
   const animationRef = React.useRef<any>(null);
-  const [shouldFallback, setShouldFallback] = React.useState(false);
+  const [shouldFallback, setShouldFallback] = React.useState(!lottieData);
 
   React.useEffect(() => {
     const container = containerRef.current;
@@ -222,7 +230,14 @@ const ReactionArt = ({
   }, [lottieData, shouldFallback]);
 
   if (shouldFallback) {
-    return <img src={fallbackSrc} alt="" aria-hidden="true" />;
+    return (
+      <img
+        src={fallbackSrc}
+        alt=""
+        aria-hidden="true"
+        className={isCustom ? 'live-reaction-custom' : undefined}
+      />
+    );
   }
 
   return (
@@ -278,8 +293,15 @@ const LiveReactionStageOverlay = () => {
           </div>
         ) : null}
         {floatingReactions.map((reaction, index) => {
-          const reactionDefinition = LIVE_REACTION_MAP[reaction.assetKey];
-          if (!reactionDefinition) {
+          const catalogEntry = getLiveReactionMap()[reaction.assetKey];
+          if (!catalogEntry) {
+            return null;
+          }
+          const visual = resolveReactionVisual(
+            reaction.assetKey,
+            reaction.skinTone,
+          );
+          if (!visual) {
             return null;
           }
           const lane =
@@ -304,8 +326,9 @@ const LiveReactionStageOverlay = () => {
               }>
               <div className="live-reaction-stage-item-content">
                 <ReactionArt
-                  fallbackSrc={reactionDefinition.asset}
-                  lottieData={reactionDefinition.lottieData}
+                  fallbackSrc={visual.asset}
+                  lottieData={visual.lottieData}
+                  isCustom={!!catalogEntry.custom}
                 />
                 <div
                   className="live-reaction-sender-name"

package/template/src/components/reactions/catalog.ts

@@ -1,8 +1,26 @@
+// @ts-ignore
+import tyCustom from '../../assets/live-reactions/custom/ty.png';
+
+export type SkinToneCode = '1f3fb' | '1f3fc' | '1f3fd' | '1f3fe' | '1f3ff';
+export type SkinTonePreference = 'default' | SkinToneCode;
+
+export interface LiveReactionSkinToneAsset {
+  asset: any;
+  lottieData?: any;
+}
+
+export interface LiveReactionCustomMeta {
+  label: string;
+  fallbackEmoji: string;
+}
+
 export interface LiveReactionDefinition {
   key: string;
   emoji: string;
   asset: any;
   lottieData?: any;
+  skinToneVariants?: Record<SkinToneCode, LiveReactionSkinToneAsset>;
+  custom?: LiveReactionCustomMeta;
 }
 
 export interface LiveReactionEvent {
@@ -13,6 +31,7 @@ export interface LiveReactionEvent {
   senderDisplayName?: string;
   timestamp: number;
   lane?: number;
+  skinTone?: SkinToneCode;
 }
 
 export const LIVE_REACTION_LANE_COUNT = 5;
@@ -20,6 +39,22 @@ export const LIVE_REACTION_BADGE_DURATION = 10_000;
 export const LIVE_REACTION_FLOAT_DURATION = 4_200;
 export const LIVE_REACTION_MAX_FLOATING_ITEMS = 20;
 
+export const SKIN_TONE_CODES: SkinToneCode[] = [
+  '1f3fb',
+  '1f3fc',
+  '1f3fd',
+  '1f3fe',
+  '1f3ff',
+];
+
+export const SKIN_TONE_MODIFIER: Record<SkinToneCode, string> = {
+  '1f3fb': '\u{1F3FB}',
+  '1f3fc': '\u{1F3FC}',
+  '1f3fd': '\u{1F3FD}',
+  '1f3fe': '\u{1F3FE}',
+  '1f3ff': '\u{1F3FF}',
+};
+
 export const LIVE_REACTIONS: LiveReactionDefinition[] = [
   {
     key: 'sparkling-heart',
@@ -32,6 +67,28 @@ export const LIVE_REACTIONS: LiveReactionDefinition[] = [
     emoji: '👍',
     asset: require('../../assets/live-reactions/1f44d.gif'),
     lottieData: require('../../assets/live-reactions/animated/1f44d.json'),
+    skinToneVariants: {
+      '1f3fb': {
+        asset: require('../../assets/live-reactions/1f44d_1f3fb.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f44d_1f3fb.json'),
+      },
+      '1f3fc': {
+        asset: require('../../assets/live-reactions/1f44d_1f3fc.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f44d_1f3fc.json'),
+      },
+      '1f3fd': {
+        asset: require('../../assets/live-reactions/1f44d_1f3fd.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f44d_1f3fd.json'),
+      },
+      '1f3fe': {
+        asset: require('../../assets/live-reactions/1f44d_1f3fe.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f44d_1f3fe.json'),
+      },
+      '1f3ff': {
+        asset: require('../../assets/live-reactions/1f44d_1f3ff.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f44d_1f3ff.json'),
+      },
+    },
   },
   {
     key: 'party-popper',
@@ -44,6 +101,28 @@ export const LIVE_REACTIONS: LiveReactionDefinition[] = [
     emoji: '👏',
     asset: require('../../assets/live-reactions/1f44f.gif'),
     lottieData: require('../../assets/live-reactions/animated/1f44f.json'),
+    skinToneVariants: {
+      '1f3fb': {
+        asset: require('../../assets/live-reactions/1f44f_1f3fb.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f44f_1f3fb.json'),
+      },
+      '1f3fc': {
+        asset: require('../../assets/live-reactions/1f44f_1f3fc.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f44f_1f3fc.json'),
+      },
+      '1f3fd': {
+        asset: require('../../assets/live-reactions/1f44f_1f3fd.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f44f_1f3fd.json'),
+      },
+      '1f3fe': {
+        asset: require('../../assets/live-reactions/1f44f_1f3fe.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f44f_1f3fe.json'),
+      },
+      '1f3ff': {
+        asset: require('../../assets/live-reactions/1f44f_1f3ff.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f44f_1f3ff.json'),
+      },
+    },
   },
   {
     key: 'joy',
@@ -69,11 +148,173 @@ export const LIVE_REACTIONS: LiveReactionDefinition[] = [
     asset: require('../../assets/live-reactions/1f914.gif'),
     lottieData: require('../../assets/live-reactions/animated/1f914.json'),
   },
+  {
+    key: 'eyes',
+    emoji: '👀',
+    asset: require('../../assets/live-reactions/1f440.gif'),
+    lottieData: require('../../assets/live-reactions/animated/1f440.json'),
+  },
+  {
+    key: 'rocket',
+    emoji: '🚀',
+    asset: require('../../assets/live-reactions/1f680.gif'),
+    lottieData: require('../../assets/live-reactions/animated/1f680.json'),
+  },
+  {
+    key: 'upside-down-face',
+    emoji: '🙃',
+    asset: require('../../assets/live-reactions/1f643.gif'),
+    lottieData: require('../../assets/live-reactions/animated/1f643.json'),
+  },
+  {
+    key: 'fire',
+    emoji: '🔥',
+    asset: require('../../assets/live-reactions/1f525.gif'),
+    lottieData: require('../../assets/live-reactions/animated/1f525.json'),
+  },
+  {
+    key: 'hundred',
+    emoji: '💯',
+    asset: require('../../assets/live-reactions/1f4af.gif'),
+    lottieData: require('../../assets/live-reactions/animated/1f4af.json'),
+  },
+  {
+    key: 'raising-hands',
+    emoji: '🙌',
+    asset: require('../../assets/live-reactions/1f64c.gif'),
+    lottieData: require('../../assets/live-reactions/animated/1f64c.json'),
+    skinToneVariants: {
+      '1f3fb': {
+        asset: require('../../assets/live-reactions/1f64c_1f3fb.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f64c_1f3fb.json'),
+      },
+      '1f3fc': {
+        asset: require('../../assets/live-reactions/1f64c_1f3fc.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f64c_1f3fc.json'),
+      },
+      '1f3fd': {
+        asset: require('../../assets/live-reactions/1f64c_1f3fd.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f64c_1f3fd.json'),
+      },
+      '1f3fe': {
+        asset: require('../../assets/live-reactions/1f64c_1f3fe.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f64c_1f3fe.json'),
+      },
+      '1f3ff': {
+        asset: require('../../assets/live-reactions/1f64c_1f3ff.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f64c_1f3ff.json'),
+      },
+    },
+  },
+  {
+    key: 'light-bulb',
+    emoji: '💡',
+    asset: require('../../assets/live-reactions/1f4a1.gif'),
+    lottieData: require('../../assets/live-reactions/animated/1f4a1.json'),
+  },
+  {
+    key: 'folded-hands',
+    emoji: '🙏',
+    asset: require('../../assets/live-reactions/1f64f.gif'),
+    lottieData: require('../../assets/live-reactions/animated/1f64f.json'),
+    skinToneVariants: {
+      '1f3fb': {
+        asset: require('../../assets/live-reactions/1f64f_1f3fb.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f64f_1f3fb.json'),
+      },
+      '1f3fc': {
+        asset: require('../../assets/live-reactions/1f64f_1f3fc.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f64f_1f3fc.json'),
+      },
+      '1f3fd': {
+        asset: require('../../assets/live-reactions/1f64f_1f3fd.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f64f_1f3fd.json'),
+      },
+      '1f3fe': {
+        asset: require('../../assets/live-reactions/1f64f_1f3fe.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f64f_1f3fe.json'),
+      },
+      '1f3ff': {
+        asset: require('../../assets/live-reactions/1f64f_1f3ff.gif'),
+        lottieData: require('../../assets/live-reactions/animated/1f64f_1f3ff.json'),
+      },
+    },
+  },
+  {
+    key: 'check-mark',
+    emoji: '✅',
+    asset: require('../../assets/live-reactions/2705.gif'),
+    lottieData: require('../../assets/live-reactions/animated/2705.json'),
+  },
+  {
+    key: 'sunglasses',
+    emoji: '😎',
+    asset: require('../../assets/live-reactions/1f60e.gif'),
+    lottieData: require('../../assets/live-reactions/animated/1f60e.json'),
+  },
+  {
+    key: 'thank-you',
+    emoji: '🙏',
+    asset: tyCustom,
+    custom: {label: 'Thank you', fallbackEmoji: '🙏'},
+  },
 ];
 
+let _customLiveReactions: LiveReactionDefinition[] = [];
+
+export function registerCustomLiveReactions(
+  reactions: LiveReactionDefinition[],
+): void {
+  _customLiveReactions = Array.isArray(reactions) ? [...reactions] : [];
+}
+
+export function getLiveReactions(): LiveReactionDefinition[] {
+  return [...LIVE_REACTIONS, ..._customLiveReactions];
+}
+
+export function getLiveReactionMap(): Record<string, LiveReactionDefinition> {
+  return getLiveReactions().reduce<Record<string, LiveReactionDefinition>>(
+    (acc, reaction) => {
+      acc[reaction.key] = reaction;
+      return acc;
+    },
+    {},
+  );
+}
+
 export const LIVE_REACTION_MAP = LIVE_REACTIONS.reduce<
   Record<string, LiveReactionDefinition>
 >((acc, reaction) => {
   acc[reaction.key] = reaction;
   return acc;
 }, {});
+
+export function supportsSkinTone(
+  reaction: LiveReactionDefinition | undefined,
+): boolean {
+  return !!reaction?.skinToneVariants;
+}
+
+export function resolveReactionVisual(
+  assetKey: string,
+  skinTone?: SkinToneCode,
+): LiveReactionSkinToneAsset | undefined {
+  const reaction = getLiveReactionMap()[assetKey];
+  if (!reaction) {
+    return undefined;
+  }
+  if (skinTone && reaction.skinToneVariants?.[skinTone]) {
+    return reaction.skinToneVariants[skinTone];
+  }
+  return {asset: reaction.asset, lottieData: reaction.lottieData};
+}
+
+export function applySkinToneToEmoji(
+  reaction: LiveReactionDefinition,
+  tone: SkinTonePreference,
+): string {
+  if (tone === 'default' || !reaction.skinToneVariants?.[tone]) {
+    return reaction.emoji;
+  }
+  return `${reaction.emoji}${SKIN_TONE_MODIFIER[tone]}`;
+}

package/template/src/components/useVideoCall.tsx

@@ -45,7 +45,10 @@ import {
   LIVE_REACTION_MAX_FLOATING_ITEMS,
   LiveReactionDefinition,
   LiveReactionEvent,
+  SkinToneCode,
+  applySkinToneToEmoji,
 } from './reactions/catalog';
+import StorageContext from './StorageContext';
 import {useString} from '../utils/useString';
 import {videoRoomUserFallbackText} from '../language/default-labels/videoCallScreenLabels';
 
@@ -117,6 +120,7 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
   const {uids} = useUserPreference();
   const remoteUserFallbackName = useString(videoRoomUserFallbackText)();
   const {deviceList} = useContext(DeviceContext);
+  const {store} = useContext(StorageContext);
   const setUsername = useSetName();
   //const videoTileInViewPortStateRef = useRef({});
   const [videoTileInViewPortState, setVideoTileInViewPortStateL] = useState({});
@@ -254,13 +258,20 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
         reaction.key
       }-${Date.now()}-${nanoid(4)}`;
       const senderDisplayName = getReactionSenderName(String(localUser.uid));
+      const tonePreference = store.liveReactionSkinTone ?? 'default';
+      const skinTone: SkinToneCode | undefined =
+        tonePreference !== 'default' && reaction.skinToneVariants?.[tonePreference]
+          ? tonePreference
+          : undefined;
+      const emoji = applySkinToneToEmoji(reaction, tonePreference);
       const nextReaction: LiveReactionEvent = {
         reactionId,
         assetKey: reaction.key,
-        emoji: reaction.emoji,
+        emoji,
         senderUid: String(localUser.uid),
         senderDisplayName,
         timestamp: Date.now(),
+        skinTone,
       };
 
       ingestReaction(nextReaction);
@@ -271,11 +282,17 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
           assetKey: nextReaction.assetKey,
           emoji: nextReaction.emoji,
           timestamp: nextReaction.timestamp,
+          skinTone: nextReaction.skinTone,
         }),
         PersistanceLevel.None,
       );
     },
-    [getReactionSenderName, ingestReaction, localUser.uid],
+    [
+      getReactionSenderName,
+      ingestReaction,
+      localUser.uid,
+      store.liveReactionSkinTone,
+    ],
   );
 
   useEffect(() => {
@@ -312,6 +329,7 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
           emoji: payload.emoji,
           senderUid: String(data.sender),
           timestamp: payload.timestamp || data.ts || Date.now(),
+          skinTone: payload.skinTone,
         });
       } catch (error) {
         console.warn('Failed to parse live reaction payload', error);

package/template/src/rtm/__tests__/isRemoteDeparture.test.ts

@@ -0,0 +1,19 @@
+import {describe, expect, it} from '@jest/globals';
+import {isRemoteDeparture} from '../isRemoteDeparture';
+
+describe('isRemoteDeparture', () => {
+  it('always treats an explicit remote leave as a departure', () => {
+    expect(isRemoteDeparture(4, false)).toBe(true);
+    expect(isRemoteDeparture(4, true)).toBe(true);
+  });
+
+  it('treats a remote timeout as a departure only when enabled', () => {
+    expect(isRemoteDeparture(5, true)).toBe(true);
+    expect(isRemoteDeparture(5, false)).toBe(false);
+  });
+
+  it('ignores unrelated presence event types', () => {
+    expect(isRemoteDeparture(3, true)).toBe(false);
+    expect(isRemoteDeparture(6, true)).toBe(false);
+  });
+});

package/template/src/rtm/isRemoteDeparture.ts

@@ -0,0 +1,4 @@
+export const isRemoteDeparture = (
+  type: number,
+  includeTimeout: boolean,
+): boolean => type === 4 || (includeTimeout && type === 5);

package/template/src/subComponents/caption/__tests__/sttRequestBody.test.ts

@@ -0,0 +1,61 @@
+import {describe, expect, it, jest} from '@jest/globals';
+import {buildSTTRequestBody, type STTMethod} from '../sttRequestBody';
+
+const createOptions = (method: STTMethod) => ({
+  method,
+  botUid: 900000123,
+  passphrase: 'phrase',
+  encryptionMode: 8,
+  localUid: 123,
+  channelName: 'room',
+  translationConfig:
+    method === 'stopv7'
+      ? undefined
+      : {source: ['en-US'] as any, targets: ['de-DE'] as any},
+  resolveSessionId: jest.fn(async () => 'shared-session'),
+});
+
+describe('buildSTTRequestBody', () => {
+  it.each(['startv7', 'update', 'stopv7'] as STTMethod[])(
+    'adds the coordinated session ID to %s on every client platform',
+    async method => {
+      const body = await buildSTTRequestBody(createOptions(method));
+
+      expect(body.session_id).toBe('shared-session');
+      expect(body.passphrase).toBe('phrase');
+      expect(body.dataStream_uid).toBe(900000123);
+      expect(body.encryption_mode).toBe(8);
+    },
+  );
+
+  it('keeps the existing update translation payload behavior', async () => {
+    const body = await buildSTTRequestBody({
+      ...createOptions('update'),
+      translationConfig: {
+        source: ['en-US'],
+        targets: ['en-US', 'de-DE'],
+      },
+    });
+
+    expect(body).toMatchObject({
+      lang: ['en-US'],
+      translate: true,
+      translate_config: [
+        {
+          source_lang: 'en-US',
+          target_lang: ['de-DE'],
+        },
+      ],
+      subscribeAudioUids: ['123'],
+    });
+  });
+
+  it('rejects construction when the shared ID is unavailable', async () => {
+    await expect(
+      buildSTTRequestBody({
+        ...createOptions('stopv7'),
+        resolveSessionId: jest.fn(async () => undefined),
+      }),
+    ).rejects.toThrow('Unable to resolve the shared STT session ID');
+  });
+});

package/template/src/subComponents/caption/__tests__/sttSessionId.native.test.ts

@@ -0,0 +1,76 @@
+import {afterEach, beforeEach, describe, expect, it, jest} from '@jest/globals';
+
+const mockStorage = {
+  getChannelMetadata: jest.fn<any>(),
+  setChannelMetadata: jest.fn<any>(),
+  removeChannelMetadata: jest.fn<any>(),
+};
+const mockPresence = {
+  getOnlineUsers: jest.fn<any>(),
+};
+
+jest.mock('../../../rtm/RTMEngine', () => ({
+  __esModule: true,
+  default: {
+    getInstance: () => ({
+      engine: {storage: mockStorage, presence: mockPresence},
+    }),
+  },
+}));
+
+jest.mock('../../../utils/getUniqueID', () => ({
+  __esModule: true,
+  default: jest.fn(() => 'native-session'),
+}));
+
+import {
+  ensureSTTSessionId,
+  resetSTTSessionIdCache,
+  STT_SESSION_ID_KEY,
+} from '../sttSessionId';
+
+const emptyChannelMetadata = {
+  timestamp: 100,
+  channelName: 'room',
+  channelType: 1,
+  majorRevision: 0,
+  itemCount: 0,
+  items: [],
+};
+
+describe('native STT session coordination', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.spyOn(console, 'log').mockImplementation(() => {});
+    resetSTTSessionIdCache();
+    mockStorage.getChannelMetadata.mockResolvedValue(emptyChannelMetadata);
+    mockStorage.setChannelMetadata.mockResolvedValue({
+      timestamp: 100,
+      channelName: 'room',
+      channelType: 1,
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('creates the shared session ID through the native RTM client', async () => {
+    await expect(ensureSTTSessionId('room')).resolves.toBe('native-session');
+
+    expect(mockStorage.setChannelMetadata).toHaveBeenCalledWith(
+      'room',
+      1,
+      {
+        items: [
+          {
+            key: STT_SESSION_ID_KEY,
+            value: 'native-session',
+            revision: 0,
+          },
+        ],
+      },
+      {addUserId: true, addTimeStamp: true},
+    );
+  });
+});