@trtc/calls-uikit-react 4.5.10 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trtc/calls-uikit-react",
-  "version": "4.5.10",
+  "version": "4.6.0",
   "main": "./tuicall-uikit-react.umd.js",
   "module": "./tuicall-uikit-react.es.js",
   "types": "./types/index.d.ts",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@tencentcloud/tui-core-lite": "~1.0.1",
-    "@trtc/call-engine-lite-js": "~4.0.10",
+    "@trtc/call-engine-lite-js": "~4.1.0",
     "@tencentcloud/lite-chat": "^1.6.3",
     "@trtc/call-engine-lite-wx": "~5.0.6"
 },

package/src/Components/TUICallKit/TUICallKit.tsx

@@ -16,6 +16,7 @@ import SingleCall from '../components/SingleCall/SingleCall';
 import GroupCall from '../components/GroupCall/GroupCall';
 import { AISubtitle } from '../components/common/AIAssistant';
 import AutoPlayDialog from '../components/common/AutoPlayDialog';
+import DevicePermissionBanner from '../components/common/PermissionDialog';
 import { classNames } from '../util/classnames';
 import {
   CallInfoContext,
@@ -69,6 +70,15 @@ export default function TUICallKit(props: ITUICallKitProps) {
     remoteList,
     setRemoteList,
   ] = useState(TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST));
+  // Sticky flag: once the call reaches a multi-user state, it stays multi-user until IDLE.
+  // Initialized from the current store snapshot so a re-mount during an in-progress call
+  // (e.g. group call, or 1v1 that has already escalated) keeps the correct layout.
+  const [hasEverBeenMulti, setHasEverBeenMulti] = useState(() => {
+    const initIsGroup = TUIStore.getData(StoreName.CALL, NAME.IS_GROUP);
+    const initRemoteList = TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_EXCLUDE_VOLUMN_LIST);
+    return !!initIsGroup || (Array.isArray(initRemoteList) && initRemoteList.length >= 2);
+  });
+  const isMultiUserLayout = hasEverBeenMulti;
   const [callType, setCallType] = useState(TUIStore.getData(StoreName.CALL, NAME.CALL_MEDIA_TYPE));
   const [callRole, setCallRole] = useState(TUIStore.getData(StoreName.CALL, NAME.CALL_ROLE));
   const [isEarPhone, setIsEarPhone] = useState(TUIStore.getData(StoreName.CALL, NAME.IS_EAR_PHONE));
@@ -92,6 +102,7 @@ export default function TUICallKit(props: ITUICallKitProps) {
     callType,
     isEarPhone,
     isGroupCall,
+    isMultiUserLayout,
     isFloat,
     allowedMinimized,
     allowedFullScreen,
@@ -104,6 +115,7 @@ export default function TUICallKit(props: ITUICallKitProps) {
     callType,
     isEarPhone,
     isGroupCall,
+    isMultiUserLayout,
     isFloat,
     allowedFullScreen,
     enableVirtualBackground,
@@ -130,9 +142,18 @@ export default function TUICallKit(props: ITUICallKitProps) {
 
   const handleCallStatusChange = (value) => {
     setCallStatus(value);
+    // Reset the sticky multi-user flag when the call fully ends so the next
+    // call starts fresh (a subsequent 1v1 will start in single layout).
+    if (value === CallStatus.IDLE) {
+      setHasEverBeenMulti(false);
+    }
   };
   const handleIsGroupChange = (value) => {
     setIsGroupCall(value);
+    // Group calls always render in multi-user layout.
+    if (value) {
+      setHasEverBeenMulti(true);
+    }
   };
   const handleCallerUserInfoChange = (value) => {
     setCallerUserInfo(value);
@@ -142,6 +163,11 @@ export default function TUICallKit(props: ITUICallKitProps) {
   };
   const handleRemoteUserInfoListChange = (value) => {
     setRemoteList(value);
+    // Escalate to multi-user layout once the remote participant count reaches 2+.
+    // The flag is sticky and only reset on IDLE.
+    if (Array.isArray(value) && value.length >= 2) {
+      setHasEverBeenMulti(true);
+    }
   };
   const handleCallMediaTypeChange = (value) => {
     setCallType(value);
@@ -258,6 +284,51 @@ export default function TUICallKit(props: ITUICallKitProps) {
     onMinimized,
   ]);
 
+  // When the layout switches from single-user to multi-user mid-call, the old
+  // SingleCall unmounts and its <div id={domId}> nodes are destroyed along with
+  // the <video> elements the SDK attached inside them. The onUserVideoAvailable /
+  // camera-open events do NOT replay, so the new GroupCall would render empty
+  // video tiles.
+  //
+  // Fix: after the new DOM is mounted, re-bind local and remote streams to the
+  // new container nodes. The switch is one-way (sticky), so this runs at most
+  // once per call. Failures here should never block the UI, only log a warning.
+  useEffect(() => {
+    if (!isMultiUserLayout) return;
+    let cancelled = false;
+    (async () => {
+      // 1. Re-attach local camera preview to the new local pusher <div>.
+      const localSnapshot = TUIStore.getData(StoreName.CALL, NAME.LOCAL_USER_INFO_EXCLUDE_VOLUMN);
+      if (localSnapshot?.isVideoAvailable) {
+        try {
+          await TUICallKitAPI.openCamera(NAME.LOCAL_VIDEO);
+        } catch (error) {
+          console.warn('[TUICallKit] re-openCamera after layout switch failed:', error);
+        }
+      }
+      if (cancelled) return;
+      // 2. Re-attach each active remote video stream to its new player <div>.
+      const engine = TUICallKitAPI.getTUICallEngineInstance?.();
+      if (!engine?.startRemoteView) return;
+      const displayMode = TUIStore.getData(StoreName.CALL, NAME.DISPLAY_MODE);
+      const remoteSnapshot = TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_EXCLUDE_VOLUMN_LIST) || [];
+      for (const remoteUser of remoteSnapshot) {
+        if (cancelled) return;
+        if (!remoteUser?.isVideoAvailable || !remoteUser?.userId) continue;
+        try {
+          await engine.startRemoteView({
+            userID: remoteUser.userId,
+            videoViewDomID: remoteUser.userId,
+            options: { objectFit: displayMode },
+          });
+        } catch (error) {
+          console.warn(`[TUICallKit] re-startRemoteView for ${remoteUser.userId} failed:`, error);
+        }
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [isMultiUserLayout]);
+
   return callStatus !== CallStatus.IDLE && (
     <UserInfoContext.Provider value={UserInfoContextValue}>
       <CallerUserInfoContext.Provider value={callerUserInfo}>
@@ -265,15 +336,16 @@ export default function TUICallKit(props: ITUICallKitProps) {
           <CustomUIConfigContext.Provider value={customUIConfigContextValue}>
             <TranslateContext.Provider value={translateContextValue}>
               <div style={{ ...style }} className={classnames} id='tuicallkit-id'>
-                {!isGroupCall && <SingleCall />}
-                {isGroupCall && <GroupCall />}
+                {!isMultiUserLayout && <SingleCall />}
+                {isMultiUserLayout && <GroupCall />}
                 <AutoPlayDialog />
+                <DevicePermissionBanner />
                 <AISubtitle />
               </div>
               <Portal attach="body">
                 <FloatingWindow
                   show={isFloat}
-                  hasVideo={isGroupCall
+                  hasVideo={isMultiUserLayout
                     ? speakerIdList.length !== 0
                     : callType === CallMediaType.VIDEO}
                   isAudioAvailable={localUserInfo.isAudioAvailable}

package/src/Components/components/common/ButtonPanel/ButtonPanel.tsx

@@ -26,7 +26,7 @@ const isMobile = !TUIGlobal.isPC;
 
 export default function ButtonPanel() {
   const {
-    callStatus, isGroupCall, callRole, callType, isShowEnableVirtualBackground,
+    callStatus, isMultiUserLayout, callRole, callType, isShowEnableVirtualBackground,
   } = useContext(CallInfoContext);
   const { localUserInfo } = useContext(UserInfoContext);
   const customButtonUIConfig = useCustomButtonUIConfig();
@@ -98,7 +98,7 @@ export default function ButtonPanel() {
     });
 
     const platform = TUIGlobal.isPC ? 'pc' : 'h5';
-    const callScene = isGroupCall ? 'groupCall' : 'singleCall';
+    const callScene = isMultiUserLayout ? 'groupCall' : 'singleCall';
     const mediaType = callType === CallMediaType.AUDIO ? 'audio' : 'video';
     const status = callStatus === CallStatus.CALLING
       ? callRole === CallRole.CALLER ? 'calling' : 'accept'
@@ -110,7 +110,7 @@ export default function ButtonPanel() {
 
     return rs;
   }, [
-    isGroupCall,
+    isMultiUserLayout,
     callType,
     callStatus,
     callRole,

package/src/Components/components/common/ButtonPanel/ButtonPanelH5/ButtonPanelH5.tsx

@@ -22,7 +22,7 @@ interface IButtonPanelH5Props {
 }
 export default function ButtonPanelH5(props: IButtonPanelH5Props) {
   const { buttons = [] } = props;
-  const { isGroupCall } = useContext(CallInfoContext);
+  const { isMultiUserLayout } = useContext(CallInfoContext);
   const { focusItem } = useContext(FocusItemContext);
   const [isPanelOpen, setIsPanelOpen] = useState(true);
   useEffect(() => {
@@ -38,7 +38,7 @@ export default function ButtonPanelH5(props: IButtonPanelH5Props) {
     buttonPanelH5Style['button-panel-h5-container'],
     {
       [buttonPanelH5Style.open]: isPanelOpen,
-      [buttonPanelH5Style.groupcall]: isGroupCall,
+      [buttonPanelH5Style.groupcall]: isMultiUserLayout,
       [buttonPanelH5Style['show-panel-background']]: showBtnPanelBackground,
     },
   ]);
@@ -127,7 +127,7 @@ export default function ButtonPanelH5(props: IButtonPanelH5Props) {
     return <Row>{renderButtonPanelCol()}</Row>;
   };
   const renderButtonPanel = () => {
-    if (isGroupCall && !isPanelOpen) {
+    if (isMultiUserLayout && !isPanelOpen) {
       return renderCloseButtonPanel();
     }
 
@@ -140,8 +140,8 @@ export default function ButtonPanelH5(props: IButtonPanelH5Props) {
       <div
         className={classNames([
           {
-            [buttonPanelH5Style['groupcall-panel']]: isGroupCall,
-            [buttonPanelH5Style['singlecall-panel']]: !isGroupCall,
+            [buttonPanelH5Style['groupcall-panel']]: isMultiUserLayout,
+            [buttonPanelH5Style['singlecall-panel']]: !isMultiUserLayout,
             [buttonPanelH5Style.close]: !isPanelOpen,
           },
         ])}

package/src/Components/components/common/ButtonPanel/button/Camera.tsx

@@ -1,6 +1,7 @@
 import React, {
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useState,
 } from 'react';
@@ -9,9 +10,11 @@ import Icon from '../../../base/Icon/Icon';
 import { classNames } from '../../../../util/classnames';
 import Popup from '../../../base/Popup/Popup';
 import DeviceSelector from '../../DeviceSelector/DeviceSelector';
-import { DeviceType } from '../../../../../TUICallService/const';
+import { DeviceType, NAME } from '../../../../../TUICallService/const';
 import { UserInfoContext } from '../../../../context';
-import { TUICallKitAPI, TUIGlobal } from '../../../../../TUICallService';
+import {
+  TUICallKitAPI, TUIGlobal, TUIStore, StoreName,
+} from '../../../../../TUICallService';
 import { useTranslate } from '../../../../hooks';
 import CameraOpenSrc from '../../../../assets/button/camera-open.svg';
 import CameraCloseSrc from '../../../../assets/button/camera-close.svg';
@@ -32,8 +35,42 @@ export default function Camera(props: ICameraProps) {
   const [isClickable, setIsClickable] = useState(true);
   const { t } = useTranslate();
   const [{ deviceList }] = useDeviceList(DeviceType.CAMERA);
+
+  // Subscribe to the unavailable-device reasons so the camera button can show a
+  // red badge and intercept clicks when the camera is unavailable.
+  const [
+    deviceUnavailableReasons,
+    setDeviceUnavailableReasons,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.DEVICE_UNAVAILABLE_REASONS));
+  useEffect(() => {
+    const handleChange = (value) => setDeviceUnavailableReasons(value);
+    TUIStore.watch(StoreName.CALL, {
+      [NAME.DEVICE_UNAVAILABLE_REASONS]: handleChange,
+    }, { notifyRangeWhenWatch: NAME.MYSELF });
+    return () => {
+      TUIStore.unwatch(StoreName.CALL, {
+        [NAME.DEVICE_UNAVAILABLE_REASONS]: handleChange,
+      });
+    };
+  }, []);
+  const cameraReason = deviceUnavailableReasons?.camera;
+  const isDeviceUnavailable = !!cameraReason;
+  const isMobile = !TUIGlobal.isPC;
+
   const handleClick = useCallback(
     async () => {
+      // When the camera is unavailable, intercept the click and show a toast
+      // guiding the user instead of toggling the camera.
+      if (isDeviceUnavailable) {
+        let tipKey = 'permission-btn-cam-no-device';
+        if (cameraReason === 'no-permission') {
+          tipKey = isMobile ? 'permission-btn-cam-no-perm-h5' : 'permission-btn-cam-no-perm';
+        } else if (cameraReason === 'device-occupied') {
+          tipKey = 'permission-btn-cam-occupied';
+        }
+        TUIStore.update(StoreName.CALL, NAME.TOAST_INFO, { content: tipKey, type: NAME.ERROR });
+        return;
+      }
       setIsClickable(false);
 
       if (isCameraOpen) {
@@ -44,7 +81,7 @@ export default function Camera(props: ICameraProps) {
 
       setIsClickable(true);
     },
-    [isCameraOpen],
+    [isCameraOpen, isDeviceUnavailable, cameraReason, isMobile],
   );
   const iconClassName = classNames([
     commonStyle['btn-icon-container'],
@@ -56,12 +93,18 @@ export default function Camera(props: ICameraProps) {
     },
   ]);
   const CameraIcon = <Icon url={isCameraOpen ? CameraOpenSrc : CameraCloseSrc} className={commonStyle['btn-icon']} />;
-  const btnText = isCameraOpen ? t('camera enabled') : t('camera disabled');
+  let btnText = isCameraOpen ? t('camera enabled') : t('camera disabled');
+  if (isDeviceUnavailable) {
+    btnText = cameraReason === 'no-permission' ? t('no cam permission') : t('no cam device');
+  }
+  const btnTextNode = isDeviceUnavailable
+    ? <span style={{ color: '#FE3C44' }}>{btnText}</span>
+    : btnText;
 
   return (
     <Popup
       content={<DeviceSelector deviceType={DeviceType.CAMERA} />}
-      disabled={!TUIGlobal.isPC || !(deviceList?.length > 0)}
+      disabled={!TUIGlobal.isPC || isDeviceUnavailable || !(deviceList?.length > 0)}
       teleported={false}
     >
       <div style={{ display: 'flex' }}>
@@ -73,7 +116,7 @@ export default function Camera(props: ICameraProps) {
           onClick={handleClick}
           {...props}
         >
-          {btnText}
+          {btnTextNode}
         </Button>
       </div>
     </Popup>

package/src/Components/components/common/ButtonPanel/button/Microphone.tsx

@@ -1,18 +1,21 @@
 import React, {
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useState,
 } from 'react';
 import Button from '../../../base/Button';
 import Icon from '../../../base/Icon/Icon';
-import { TUICallKitAPI, TUIGlobal } from '../../../../../TUICallService';
+import {
+  TUICallKitAPI, TUIGlobal, TUIStore, StoreName,
+} from '../../../../../TUICallService';
 import { UserInfoContext } from '../../../../context';
 import { classNames } from '../../../../util/classnames';
 import Popup from '../../../base/Popup/Popup';
 import DeviceSelector from '../../DeviceSelector/DeviceSelector';
 import { useTranslate, useDeviceList } from '../../../../hooks';
-import { DeviceType } from '../../../../../TUICallService/const';
+import { DeviceType, NAME } from '../../../../../TUICallService/const';
 import MicrophoneOpenSrc from '../../../../assets/button/microphone-open.svg';
 import MicrophoneCloseSrc from '../../../../assets/button/microphone-close.svg';
 import { classPrefix } from '../../../base/common';
@@ -29,8 +32,41 @@ export default function Microphone(props: IMicrophoneProps) {
   const [isClickable, setIsClickable] = useState(true);
   const { t } = useTranslate();
 
+  // Subscribe to the unavailable-device reasons so the microphone button can show
+  // a red badge and intercept clicks when the microphone is unavailable.
+  const [
+    deviceUnavailableReasons,
+    setDeviceUnavailableReasons,
+  ] = useState(TUIStore.getData(StoreName.CALL, NAME.DEVICE_UNAVAILABLE_REASONS));
+  useEffect(() => {
+    const handleChange = (value) => setDeviceUnavailableReasons(value);
+    TUIStore.watch(StoreName.CALL, {
+      [NAME.DEVICE_UNAVAILABLE_REASONS]: handleChange,
+    }, { notifyRangeWhenWatch: NAME.MYSELF });
+    return () => {
+      TUIStore.unwatch(StoreName.CALL, {
+        [NAME.DEVICE_UNAVAILABLE_REASONS]: handleChange,
+      });
+    };
+  }, []);
+  const microphoneReason = deviceUnavailableReasons?.microphone;
+  const isDeviceUnavailable = !!microphoneReason;
+  const isMobile = !TUIGlobal.isPC;
+
   const handleClick = useCallback(
     async () => {
+      // When the microphone is unavailable, intercept the click and show a toast
+      // guiding the user instead of toggling the microphone.
+      if (isDeviceUnavailable) {
+        let tipKey = 'permission-btn-mic-no-device';
+        if (microphoneReason === 'no-permission') {
+          tipKey = isMobile ? 'permission-btn-mic-no-perm-h5' : 'permission-btn-mic-no-perm';
+        } else if (microphoneReason === 'device-occupied') {
+          tipKey = 'permission-btn-mic-occupied';
+        }
+        TUIStore.update(StoreName.CALL, NAME.TOAST_INFO, { content: tipKey, type: NAME.ERROR });
+        return;
+      }
       setIsClickable(false);
 
       if (isOpen) {
@@ -41,7 +77,7 @@ export default function Microphone(props: IMicrophoneProps) {
 
       setIsClickable(true);
     },
-    [isOpen, setIsClickable],
+    [isOpen, setIsClickable, isDeviceUnavailable, microphoneReason, isMobile],
   );
   const iconClassName = classNames([
     commonStyle['btn-icon-container'],
@@ -52,13 +88,19 @@ export default function Microphone(props: IMicrophoneProps) {
       disabled: !isClickable,
     },
   ]);
-  const btnText = isOpen ? t('microphone enabled') : t('microphone disabled');
+  let btnText = isOpen ? t('microphone enabled') : t('microphone disabled');
+  if (isDeviceUnavailable) {
+    btnText = microphoneReason === 'no-permission' ? t('no mic permission') : t('no mic device');
+  }
+  const btnTextNode = isDeviceUnavailable
+    ? <span style={{ color: '#FE3C44' }}>{btnText}</span>
+    : btnText;
   const MicrophoneIcon = <Icon className={commonStyle['btn-icon']} url={isOpen ? MicrophoneOpenSrc : MicrophoneCloseSrc}/>;
 
   return (
     <Popup
       content={<DeviceSelector deviceType={DeviceType.MICROPHONE} />}
-      disabled={!TUIGlobal.isPC || !(deviceList?.length > 0)}
+      disabled={!TUIGlobal.isPC || isDeviceUnavailable || !(deviceList?.length > 0)}
       teleported={false}
     >
       <div style={{ display: 'flex' }}>
@@ -70,7 +112,7 @@ export default function Microphone(props: IMicrophoneProps) {
           onClick={handleClick}
           {...props}
         >
-          {btnText}
+          {btnTextNode}
         </Button>
       </div>
     </Popup>

package/src/Components/components/common/FloatingWindow/FloatingWindow.tsx

@@ -13,7 +13,7 @@ interface IFloatingWindowProps {
 }
 
 export default function FloatingWindow(props: IFloatingWindowProps) {
-  const { isGroupCall } = useContext(CallInfoContext);
+  const { isMultiUserLayout } = useContext(CallInfoContext);
   // React 19's useRef removed the no-argument overload; pass undefined explicitly.
   const nodeRef = useRef<any>(undefined);
   const [clickable, setClickable] = useState(true);
@@ -28,7 +28,7 @@ export default function FloatingWindow(props: IFloatingWindowProps) {
     >
       <div ref={nodeRef} style={{ visibility }}>
         {
-          isGroupCall
+          isMultiUserLayout
             ? <FloatingWindowGroupCall clickable={clickable} {...props} />
             : <FloatingWindowSingleCall clickable={clickable} {...props} />
         }

package/src/Components/components/common/PermissionDialog/DevicePermissionBanner.module.scss

@@ -0,0 +1,55 @@
+.device-permission-banner {
+  position: absolute;
+  top: 50px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 40;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(0, 0, 0, 0.75);
+  backdrop-filter: blur(6px);
+  color: #fff;
+  border-radius: 6px;
+  padding: 6px 28px 6px 10px;
+  font-size: 12px;
+  line-height: 1.5;
+  max-width: 80%;
+  pointer-events: auto;
+
+  .banner-dot {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: #e6a23c;
+    flex: 0 0 auto;
+  }
+
+  .banner-text {
+    flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .banner-close {
+    position: absolute;
+    top: 50%;
+    right: 5px;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: rgba(255, 255, 255, 0.45);
+    font-size: 11px;
+    line-height: 1;
+    width: 14px;
+    height: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+}

package/src/Components/components/common/PermissionDialog/DevicePermissionBanner.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from 'react';
+import {
+  TUIStore,
+  StoreName,
+  NAME,
+  TUIGlobal,
+  CallStatus,
+  buildDeviceUnavailableText,
+} from '../../../../TUICallService';
+import type { DeviceUnavailableReasons } from '../../../../TUICallService/const';
+import bannerStyle from './DevicePermissionBanner.module.scss';
+
+// Top banner that surfaces unavailable-device reasons (no permission / no device /
+// occupied) during a call. Driven by the DEVICE_UNAVAILABLE_REASONS store written
+// by the service layer after calls/accept.
+export default function DevicePermissionBanner() {
+  const isMobile = !TUIGlobal.isPC;
+  const [
+    deviceUnavailableReasons,
+    setDeviceUnavailableReasons,
+  ] = useState<DeviceUnavailableReasons | null>(TUIStore.getData(StoreName.CALL, NAME.DEVICE_UNAVAILABLE_REASONS));
+  const [
+    visible,
+    setVisible,
+  ] = useState<boolean>(!!TUIStore.getData(StoreName.CALL, NAME.DEVICE_UNAVAILABLE_REASONS));
+
+  const handleDeviceUnavailableReasonsChange = (value: DeviceUnavailableReasons | null) => {
+    setDeviceUnavailableReasons(value);
+    if (value) {
+      setVisible(true);
+    }
+  };
+
+  // Reset banner when the call ends.
+  const handleCallStatusChange = (value) => {
+    if (value === CallStatus.IDLE) {
+      setVisible(false);
+      setDeviceUnavailableReasons(null);
+    }
+  };
+
+  useEffect(() => {
+    TUIStore.watch(StoreName.CALL, {
+      [NAME.DEVICE_UNAVAILABLE_REASONS]: handleDeviceUnavailableReasonsChange,
+      [NAME.CALL_STATUS]: handleCallStatusChange,
+    }, {
+      notifyRangeWhenWatch: NAME.MYSELF,
+    });
+
+    return () => {
+      TUIStore.unwatch(StoreName.CALL, {
+        [NAME.DEVICE_UNAVAILABLE_REASONS]: handleDeviceUnavailableReasonsChange,
+        [NAME.CALL_STATUS]: handleCallStatusChange,
+      });
+    };
+  }, []);
+
+  if (!visible || !deviceUnavailableReasons) {
+    return null;
+  }
+
+  // Group devices per reason so mixed cases (e.g. mic no-permission + camera
+  // no-device) describe each device accurately instead of a single wrong sentence.
+  const bannerText = buildDeviceUnavailableText(
+    deviceUnavailableReasons.microphone,
+    deviceUnavailableReasons.camera,
+    'banner',
+    isMobile,
+  );
+
+  return (
+    <div className={bannerStyle['device-permission-banner']}>
+      <span className={bannerStyle['banner-dot']} />
+      <span className={bannerStyle['banner-text']}>{bannerText}</span>
+      <span className={bannerStyle['banner-close']} onClick={() => setVisible(false)}>✕</span>
+    </div>
+  );
+}

package/src/Components/components/common/PermissionDialog/index.ts

@@ -0,0 +1,3 @@
+import DevicePermissionBanner from './DevicePermissionBanner';
+
+export default DevicePermissionBanner;

package/src/Components/components/common/StreamInfo/StreamInfoH5/StreamInfoH5.tsx

@@ -32,13 +32,13 @@ export default function StreamInfoH5(props: IStreamInfoH5Props) {
     showSwitchCamera = false,
     showNetWorkStatus = false,
   } = props;
-  const { isGroupCall } = useContext(CallInfoContext);
+  const { isMultiUserLayout } = useContext(CallInfoContext);
   const classnames = classNames(
     [
       streamInfoH5Style['stream-info-container-h5'],
       {
-        [streamInfoH5Style.group]: isGroupCall,
-        [streamInfoH5Style.single]: !isGroupCall,
+        [streamInfoH5Style.group]: isMultiUserLayout,
+        [streamInfoH5Style.single]: !isMultiUserLayout,
       },
     ],
   );
@@ -89,7 +89,7 @@ export default function StreamInfoH5(props: IStreamInfoH5Props) {
 
   return (
     <div className={classnames}>
-      {isGroupCall ? renderGroupCallStreamInfo() : renderSingleCallStreamInfo()}
+      {isMultiUserLayout ? renderGroupCallStreamInfo() : renderSingleCallStreamInfo()}
     </div>
   );
 }

package/src/Components/components/common/TopBar/h5/TopBarH5.tsx

@@ -17,12 +17,12 @@ interface ITopBarH5Props {
 export default function TopBarH5(props: ITopBarH5Props) {
   const { callDuration } = props;
   const {
-    isGroupCall, callStatus, callRole, allowedMinimized,
+    isMultiUserLayout, callStatus, callRole, allowedMinimized,
   } = useContext(CallInfoContext);
   
   const { isAITranscriberEnabled } = useAIAssistant();
   
-  const showTip = (isGroupCall
+  const showTip = (isMultiUserLayout
     && (callStatus === CallStatus.CONNECTED || callRole === CallRole.CALLER));
   const showAITranscriberSwitch = callStatus === CallStatus.CONNECTED && isAITranscriberEnabled;
   

package/src/Components/components/common/TopBar/pc/TopBarPC.tsx

@@ -15,7 +15,7 @@ interface ITopBarPCProps {
 export default function TopBarPC(props: ITopBarPCProps) {
   const { callDuration } = props;
   const {
-    isGroupCall,
+    isMultiUserLayout,
     callStatus,
     allowedMinimized,
     allowedFullScreen,
@@ -23,7 +23,7 @@ export default function TopBarPC(props: ITopBarPCProps) {
   
   const { isAITranscriberEnabled } = useAIAssistant();
   
-  const showTime = callStatus === CallStatus.CONNECTED && !isGroupCall;
+  const showTime = callStatus === CallStatus.CONNECTED && !isMultiUserLayout;
   const showAITranscriberSwitch = callStatus === CallStatus.CONNECTED && isAITranscriberEnabled;
   
   return (

package/src/Components/context/CallUserInfoContext.ts

@@ -8,6 +8,9 @@ interface ICallInfoContext {
   isEarPhone?: boolean;
   isClickable?: boolean;
   isGroupCall?: boolean;
+  // Whether the UI should render in multi-user layout.
+  // Rule: true if isGroupCall, or remoteUserList size >= 2, once true it sticks until call ends.
+  isMultiUserLayout?: boolean;
   isFloat?: boolean;
   allowedMinimized?: boolean;
   allowedFullScreen?: boolean;