agora-appbuilder-core 4.1.13-beta.1 → 4.1.13-beta.3

package/template/src/subComponents/caption/useSTTAPI.tsx

@@ -36,6 +36,26 @@ const useSTTAPI = (): IuseSTTAPI => {
   const STT_API_URL = `${$config.BACKEND_ENDPOINT}/v1/stt`;
   const localUid = useLocalUid();
 
+  const roomIdRef = React.useRef(roomId);
+  React.useEffect(() => {
+    roomIdRef.current = roomId;
+  }, [roomId]);
+
+  const localUidRef = React.useRef(localUid);
+  React.useEffect(() => {
+    localUidRef.current = localUid;
+  }, [localUid]);
+
+  const tokenRef = React.useRef(store.token);
+  React.useEffect(() => {
+    tokenRef.current = store.token;
+  }, [store.token]);
+
+  const rtcPropsRef = React.useRef(rtcProps);
+  React.useEffect(() => {
+    rtcPropsRef.current = rtcProps;
+  }, [rtcProps]);
+
   const apiCall = async (
     method: 'startv7' | 'update' | 'stopv7',
     botUid: number,
@@ -49,10 +69,11 @@ const useSTTAPI = (): IuseSTTAPI => {
       const ownerUid = botUid - 900000000;
 
       let requestBody: any = {
-        passphrase: roomId?.host || roomId?.attendee || '',
+        passphrase:
+          roomIdRef?.current?.host || roomIdRef?.current?.attendee || '',
         dataStream_uid: botUid,
         encryption_mode: $config.ENCRYPTION_ENABLED
-          ? rtcProps.encryption.mode
+          ? rtcPropsRef?.current.encryption.mode
           : null,
       };
 
@@ -89,14 +110,14 @@ const useSTTAPI = (): IuseSTTAPI => {
           // If method is update and no targets are passed
           requestBody.translate = false;
         }
-        requestBody.subscribeAudioUids = [`${localUid}`];
+        requestBody.subscribeAudioUids = [`${localUidRef.current}`];
       }
 
       const response = await fetch(`${STT_API_URL}/${method}`, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          authorization: store.token ? `Bearer ${store.token}` : '',
+          authorization: tokenRef?.current ? `Bearer ${tokenRef?.current}` : '',
           'X-Request-Id': requestId,
           'X-Session-Id': logger.getSessionId(),
         },

package/template/src/subComponents/caption/useStreamMessageUtils.native.ts

@@ -50,7 +50,7 @@ const useStreamMessageUtils = (): {
       .lookupType('agora.audio2text.Text')
       .decode(payload as Uint8Array) as any;
 
-    console.log('[STT_PER_USER_BOT] stt v7 textstream', botUid, textstream);
+    console.log('[STT_GLOBAL] stt v7 textstream', botUid, textstream);
     // console.log('STT - Parsed Textstream : ', textstream);
 
     // Identifing Current & Prev Speakers for the Captions

package/template/src/subComponents/caption/useStreamMessageUtils.ts

@@ -52,7 +52,7 @@ const useStreamMessageUtils = (): {
         .lookupType('agora.audio2text.Text')
         .decode(payload as Uint8Array) as any;
 
-      console.log('[STT_PER_USER_BOT] stt v7 textstream', botUid, textstream);
+      console.log('[STT_GLOBAL] stt v7 textstream', botUid, textstream);
       //console.log('STT - Parsed Textstream : ', textstream);
       // console.log(
       //   `STT-callback(${++counter}): %c${textstream.uid} %c${textstream.words

package/template/src/subComponents/caption/utils.ts

@@ -110,7 +110,7 @@ export function getLanguageLabel(
   languageCode: LanguageType[],
 ): string | undefined {
   const langLabels = languageCode.map(langCode => {
-    return langData.find(data => data.value === langCode).label;
+    return langData.find(data => data.value === langCode)?.label;
   });
   return langLabels ? langLabels.join(', ') : undefined;
 }
@@ -163,31 +163,32 @@ export const formatTranscriptContent = (
   const formattedContent = meetingTranscript
     .map(item => {
       if (
-        item.uid.toString().indexOf('langUpdate') !== -1 ||
-        item.uid.toString().indexOf('translationUpdate') !== -1
+        item.uid.toString().includes('langUpdate') ||
+        item.uid.toString().includes('translationUpdate')
       ) {
-        return `${defaultContent[item?.uid?.split('-')[1]]?.name} ${item.text}`;
+        // return `${defaultContent[item?.uid?.split('-')[1]]?.name} ${item.text}`;
+        return item.text;
       }
 
-      // Build transcript entry with original text and all translations
-      let transcriptEntry = `${defaultContent[item.uid]?.name} ${formatTime(
-        Number(item?.time),
-      )}:\n${item.text}`;
-
-      // Add all translations with language labels
-      if (item.translations && item.translations.length > 0) {
-        const translationLines = item.translations
-          .map(trans => {
-            const langLabel =
-              langData.find(l => l.value === trans.lang)?.label || trans.lang;
-            return `${langLabel}: ${trans.text}`;
-          })
-          .join('\n');
-
-        transcriptEntry += `\n${translationLines}`;
+      const speakerName = defaultContent[item.uid]?.name || 'Speaker';
+
+      // Original
+      let entry = `${speakerName}:\n${item.text}`;
+
+      // Selected Translation
+      const storedLang = item.selectedTranslationLanguage;
+      const selectedTranslation = storedLang
+        ? item.translations?.find(t => t.lang === storedLang) || null
+        : null;
+      if (selectedTranslation) {
+        const langLabel =
+          langData.find(l => l.value === selectedTranslation.lang)?.label ||
+          selectedTranslation.lang;
+
+        entry += `\n→ (${langLabel}) ${selectedTranslation.text}`;
       }
 
-      return transcriptEntry;
+      return entry;
     })
     .join('\n\n');
 
@@ -196,13 +197,20 @@ export const formatTranscriptContent = (
   );
 
   const attendees = Object.entries(defaultContent)
-    .filter(
-      arr =>
-        arr[1].type === 'rtc' &&
-        arr[0] !== '100000' && // exclude recording bot
-        (arr[1]?.isInWaitingRoom === true ? false : true),
-    )
-    .map(arr => arr[1].name)
+    .filter(([uid, user]) => {
+      const uidNum = Number(uid);
+
+      const isBot =
+        uidNum === 111111 || // STT bot (web)
+        uidNum > 900000000 || // STT bots (native)
+        uidNum === 100000 || // Recording bot (web user)
+        uidNum === 100001; // Recording bot (web screen)
+
+      const isWaitingRoom = user?.isInWaitingRoom === true;
+
+      return user.type === 'rtc' && !isBot && !isWaitingRoom;
+    })
+    .map(([_, user]) => user.name)
     .join(',');
 
   const info =
@@ -232,19 +240,18 @@ export const formatTranscriptContent = (
  * @param captionText - The original caption text
  * @param translations - Array of available translations
  * @param viewerSourceLanguage - The user's source (spoken) language
- * @param speakerUid - The UID of the person speaking
- * @param currentUserUid - The UID of the current user
  * @returns The appropriate caption text to display
  */
 export const getUserTranslatedText = (
   captionText: string,
   translations: Array<{lang: string; text: string; isFinal: boolean}> = [],
-  viewerSourceLanguage: LanguageType,
-  speakerUid: string | number,
-  currentUserUid: string | number,
+  sourceLanguage: LanguageType,
+  selectedTranslationLanguage: LanguageType,
+  // speakerUid: string | number,
+  // currentUserUid: string | number,
 ): {
   value: string;
-  langCode: string;
+  langLabel: string;
 } => {
   // console.log(
   //   'getUserTranslatedText input params',
@@ -256,16 +263,17 @@ export const getUserTranslatedText = (
   // );
 
   // 1. If the speaker is the local user, always show their own source text
-  if (speakerUid === currentUserUid) {
+  if (!selectedTranslationLanguage) {
     return {
       value: captionText,
-      langCode: getLanguageLabel([viewerSourceLanguage]) || '',
+      langLabel: getLanguageLabel([sourceLanguage]) || '',
     };
   }
+
   // For other users' captions, try to find translation matching viewer's source language
-  if (viewerSourceLanguage && translations && translations.length > 0) {
+  if (selectedTranslationLanguage && translations && translations.length > 0) {
     const matchingTranslation = translations.find(
-      t => t.lang === viewerSourceLanguage,
+      t => t.lang === selectedTranslationLanguage,
     );
     if (matchingTranslation) {
       // Translation exists (even if empty)
@@ -274,7 +282,7 @@ export const getUserTranslatedText = (
       const translatedText = matchingTranslation.text?.trim() || '';
       return {
         value: translatedText,
-        langCode: getLanguageLabel([matchingTranslation.lang]) || '',
+        langLabel: getLanguageLabel([selectedTranslationLanguage]) || '',
       };
     }
   }
@@ -282,7 +290,7 @@ export const getUserTranslatedText = (
   // Fallback to original text if no translation found
   return {
     value: captionText,
-    langCode: 'Original',
+    langLabel: 'Original',
   };
 };
 

package/template/src/components/whiteboard/FastBoardView.tsx

@@ -1,227 +0,0 @@
-/*
-********************************************
- Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the "Materials") are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.'s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
-*********************************************
-*/
-
-import React, {useRef, useEffect} from 'react';
-import {StyleSheet, View, Text} from 'react-native';
-import {useRoomInfo} from 'customization-api';
-import {useString} from '../../utils/useString';
-import {whiteboardInitializingText} from '../../language/default-labels/videoCallScreenLabels';
-import {useFastboard, Fastboard, createFastboard, FastboardApp} from '@netless/fastboard-react/full';
-
-import {useLocalUid} from '../../../agora-rn-uikit';
-import useUserName from '../../utils/useUserName';
-
-interface FastBoardViewProps {
-  showToolbox?: boolean;
-}
-
-/**
- * Technical Note: Why we are not using the 'useFastboard' hook?
- * 
- * We replaced the standard 'useFastboard' hook with a manual 'FastboardManager' implementation
- * to solve a critical race condition in React 18+ Strict Mode.
- * 
- * Issue: "[WindowManager]: Already created cannot be created again"
- * 
- * In Strict Mode, React intentionally mounts, unmounts, and remounts components rapidly 
- * to detect side-effects. The standard hook attempts to initialize the Fastboard singleton 
- * twice in parallel. The first initialization is still "pending" when the second one starts,
- * causing the underlying WindowManager to crash because it doesn't support concurrent init calls.
- * 
- * Solution: The 'FastboardManager' below uses Reference Counting and Singleton pattern to:
- * 1. Deduplicate initialization requests (reusing the same Promise).
- * 2. Delay cleanup slightly to handle the rapid Unmount -> Mount cycle without destroying the instance.
- */
-const FastBoardView: React.FC<FastBoardViewProps> = ({showToolbox = true}) => {
-  const {
-    data: {whiteboard: {room_token, room_uuid} = {}, isHost},
-  } = useRoomInfo();
-  
-  const localUid = useLocalUid();
-  const [name] = useUserName();
-
-  const whiteboardInitializing = useString(whiteboardInitializingText)();
-
-  // Generate stable UID - only once
-  // Use local user's name or fallback to UID if name is not available
-  const uidRef = useRef<string>(name || String(localUid));
-  const [fastboard, setFastboard] = React.useState<FastboardApp | null>(null);
-
-  // Configuration object - Memoize stringified version to detect changes
-  const config = React.useMemo(() => ({
-    sdkConfig: {
-      appIdentifier: 'EEJBQPVbEe2Bao8ZShuoHQ/hgB5eo0qcDbVig',
-      region: 'us-sv',
-    },
-    joinRoom: {
-      uid: uidRef.current,
-      uuid: room_uuid,
-      roomToken: room_token,
-    },
-  }), [room_uuid, room_token]);
-
-  const configStr = JSON.stringify(config);
-
-  useEffect(() => {
-    let isMounted = true;
-    
-    const initFastboard = async () => {
-      try {
-        const app = await FastboardManager.acquire(configStr, config);
-        if (isMounted) {
-          setFastboard(app);
-        }
-      } catch (error) {
-        console.error("Fastboard initialization failed:", error);
-      }
-    };
-
-    initFastboard();
-
-    return () => {
-      isMounted = false;
-      FastboardManager.release(configStr);
-    };
-  }, [configStr, config]);
-
-  // Show loading if fastboard not ready yet
-  if (!fastboard) {
-    return (
-      <View style={styles.container}>
-        <View style={styles.placeholder}>
-          <Text style={styles.placeholderText}>{whiteboardInitializing}</Text>
-        </View>
-      </View>
-    );
-  }
-
-  return (
-    <View style={styles.container}>
-      <div style={divStyles.fastboardContainer}>
-        <Fastboard app={fastboard} />
-      </div>
-    </View>
-  );
-};
-
-// Global Manager to handle Strict Mode and Singleton constraints
-const FastboardManager = {
-  activeConfig: null as string | null,
-  instance: null as FastboardApp | null,
-  promise: null as Promise<FastboardApp> | null,
-  subscribers: 0,
-  
-  acquire: async (configStr: string, config: any): Promise<FastboardApp> => {
-    FastboardManager.subscribers++;
-    
-    // If config matches and we have an instance/promise, reuse it
-    if (FastboardManager.activeConfig === configStr) {
-      if (FastboardManager.instance) return FastboardManager.instance;
-      if (FastboardManager.promise) return FastboardManager.promise;
-    }
-    
-    // Config mismatch! We must cleanup the previous board before creating a new one.
-    // This happens if component remounts with new UID (e.g. Pin to Top).
-    
-    // 1. If there's a pending loading operation, wait for it and destroy the result.
-    if (FastboardManager.promise) {
-       try {
-          const oldApp = await FastboardManager.promise;
-           // Double check if it wasn't already destroyed or reassigned
-           if (oldApp) oldApp.destroy();
-       } catch (e) {
-          console.warn("Error cleaning up previous pending Fastboard:", e);
-       }
-    }
-    
-    // 2. If there's an active instance, destroy it.
-    if (FastboardManager.instance) {
-        try {
-            FastboardManager.instance.destroy();
-        } catch (e) {
-             console.warn("Error cleaning up previous active Fastboard:", e);
-        }
-    }
-    
-    // Reset state
-    FastboardManager.instance = null;
-    FastboardManager.promise = null;
-    FastboardManager.activeConfig = configStr;
-    
-    // 3. Create new instance
-    FastboardManager.promise = createFastboard(config).then(app => {
-      // Check if we are still the active config
-      if (FastboardManager.activeConfig === configStr) {
-         FastboardManager.instance = app;
-         return app;
-      } else {
-         // Config changed while loading
-         app.destroy();
-         throw new Error("Fastboard config changed during initialization");
-      }
-    });
-    
-    return FastboardManager.promise;
-  },
-  
-  release: (configStr: string) => {
-    FastboardManager.subscribers--;
-    
-    // Delayed cleanup to handle Strict Mode "Unmount -> Mount" flicker
-    setTimeout(() => {
-      if (FastboardManager.subscribers === 0 && FastboardManager.activeConfig === configStr) {
-         if (FastboardManager.instance) {
-           FastboardManager.instance.destroy();
-           FastboardManager.instance = null;
-         }
-         FastboardManager.promise = null;
-         FastboardManager.activeConfig = null;
-      }
-    }, 200);
-  }
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    position: 'relative',
-    backgroundColor: '#ffffff',
-  },
-  placeholder: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    backgroundColor: '#f5f5f5',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  placeholderText: {
-    color: '#666666',
-    fontSize: 16,
-  },
-  errorText: {
-    color: '#ff4444',
-    fontSize: 16,
-  },
-});
-
-const divStyles = {
-  fastboardContainer: {
-    width: '100%',
-    height: '100%',
-    borderRadius: 4,
-    overflow: 'hidden' as const,
-  },
-};
-
-export default FastBoardView;