@zegocloud/zego-uikit-prebuilt 1.0.1 → 1.0.2

package/index.html

@@ -62,15 +62,15 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
 </body>
-<script src="./index.umd.js"></script>
+<script src="./zego-uikit-prebuilt.js"></script>
 <script>
     // get token
     function generateToken(tokenServerUrl, userID, roomID, userName) {
         // Obtain the token interface provided by the App Server
         return fetch(
             `${tokenServerUrl}/access_token?userID=${userID}&userName=${userName}&roomID=${roomID}&expired_ts=7200`, {
-                method: 'GET',
-            }
+            method: 'GET',
+        }
         ).then((res) => res.json());
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
             "name": "@zegocloud/zego-uikit-prebuilt",
-            "version": "1.0.1",
+            "version": "1.0.2",
             "description": "zegocloud prebuilt meeting webrtc sdk",
             "main": "./zego-uikit-prebuilt.js",
             "typings": "./sdk/index.d.ts",

package/sdk/model/index.d.ts

@@ -1,11 +1,13 @@
 import { ZegoUser, ZegoBroadcastMessageInfo } from "zego-express-engine-webrtm/sdk/code/zh/ZegoExpressEntity.d";
 import { ZegoCloudRTCCore } from "../modules";
+import { ZegoCloudUserList } from "../modules/tools/UserListManager";
 export interface ZegoCloudRemoteMedia {
     media: MediaStream;
     fromUser: ZegoUser;
     micStatus: "OPEN" | "MUTE";
     cameraStatus: "OPEN" | "MUTE";
     state: "NO_PLAY" | "PLAY_REQUESTING" | "PLAYING";
+    streamID: string;
 }
 export interface ZegoCloudRoomConfig {
     container?: HTMLElement | undefined | null;
@@ -13,6 +15,7 @@ export interface ZegoCloudRoomConfig {
         title?: string;
         invitationLink?: string;
     };
+    facingMode?: "user" | "environment";
     showPreJoinView?: boolean;
     turnOnMicrophoneWhenJoining?: boolean;
     turnOnCameraWhenJoining?: boolean;
@@ -25,14 +28,19 @@ export interface ZegoCloudRoomConfig {
         showUserJoinAndLeave?: boolean;
         showTextChat?: boolean;
     };
-    leaveRoomCallback?: () => void;
     joinRoomCallback?: () => void;
+    leaveRoomCallback?: () => void;
+    userUpdateCallback?: (type: "ADD" | "DELETE", user: ZegoUser[]) => void;
     roomTimerDisplayed?: boolean;
     branding?: {
         logoURL?: string;
     };
     showLeavingView?: boolean;
     localizationJSON?: object;
+    maxUsers?: number;
+    layout?: "Sidebar" | "Grid" | "Default";
+    showNonVideoUser?: boolean;
+    showOnlyAudioUser?: boolean;
 }
 export interface ZegoBrowserCheckProp {
     core: ZegoCloudRTCCore;
@@ -57,10 +65,36 @@ export interface ZegoSettingsProps {
         cam: string | undefined;
         speaker: string | undefined;
         videoResolve: string | undefined;
+        showNonVideoUser: boolean | undefined;
     };
     closeCallBack?: () => void;
     onMicChange: (deviceID: string) => void;
     onCameraChange: (deviceID: string) => void;
     onSpeakerChange: (deviceID: string) => void;
     onVideoResolutionChange: (level: string) => void;
+    onShowNonVideoChange: (selected: boolean) => void;
+}
+export interface ZegoGridLayoutProps {
+    userList: ZegoCloudUserList;
+    videoShowNumber: number;
+    gridRowNumber?: number;
+    selfInfo?: {
+        userID: string;
+    };
+    handleSetPin?: Function;
+    soundLevel?: SoundLevelMap;
+}
+export interface ZegoSidebarLayoutProps {
+    handleSetPin?: Function;
+    userList: ZegoCloudUserList;
+    videoShowNumber: number;
+    selfInfo: {
+        userID: string;
+    };
+    soundLevel?: SoundLevelMap;
+}
+export interface SoundLevelMap {
+    [userID: string]: {
+        [streamID: string]: number;
+    };
 }

package/sdk/modules/index.d.ts

@@ -1,11 +1,13 @@
 /// <reference types="node" />
 import { ZegoExpressEngine } from "zego-express-engine-webrtc";
-import { ZegoDeviceInfo, ZegoLocalStreamConfig, ZegoPublishStreamConfig, ZegoServerResponse } from "zego-express-engine-webrtc/sdk/code/zh/ZegoExpressEntity.web";
+import { ZegoDeviceInfo, ZegoLocalStreamConfig, ZegoPublishStreamConfig, ZegoServerResponse, ZegoSoundLevelInfo } from "zego-express-engine-webrtc/sdk/code/zh/ZegoExpressEntity.web";
 import { ZegoUser, ZegoBroadcastMessageInfo } from "zego-express-engine-webrtm/sdk/code/zh/ZegoExpressEntity.d";
 import { ZegoCloudRemoteMedia, ZegoCloudRoomConfig } from "../model";
+import { ZegoCloudUserList, ZegoCloudUserListManager } from "./tools/UserListManager";
 export declare class ZegoCloudRTCCore {
     static _instance: ZegoCloudRTCCore;
     static _zg: ZegoExpressEngine;
+    zum: ZegoCloudUserListManager;
     _expressConfig: {
         appID: number;
         userID: string;
@@ -29,7 +31,12 @@ export declare class ZegoCloudRTCCore {
     checkWebRTC(): Promise<boolean>;
     _config: ZegoCloudRoomConfig;
     setConfig(config: ZegoCloudRoomConfig): void;
+    setPin(userID?: string, pined?: boolean): void;
+    setMaxScreenNum(num: number): Promise<void>;
+    setSidebarLayOut(enable: boolean): Promise<void>;
+    setShowNonVideo(enable: boolean): Promise<void>;
     getCameras(): Promise<ZegoDeviceInfo[]>;
+    useVideoDevice(localStream: MediaStream, deviceID: string): Promise<ZegoServerResponse>;
     getMicrophones(): Promise<ZegoDeviceInfo[]>;
     getSpeakers(): Promise<ZegoDeviceInfo[]>;
     setVolume(media: HTMLVideoElement, volume: number): void;
@@ -44,14 +51,18 @@ export declare class ZegoCloudRTCCore {
     mutePublishStreamAudio(localStream: MediaStream, enable: boolean): Promise<boolean>;
     muteMicrophone(enable: boolean): Promise<boolean>;
     enterRoom(): Promise<number>;
-    publishLocalStream(media: MediaStream): boolean;
+    publishLocalStream(media: MediaStream): boolean | string;
     replaceTrack(media: MediaStream, mediaStreamTrack: MediaStreamTrack): Promise<ZegoServerResponse>;
+    private subscribeUserListCallBack;
+    subscribeUserList(callback: (userList: ZegoCloudUserList) => void): void;
     private onRemoteMediaUpdateCallBack;
     onRemoteMediaUpdate(func: (updateType: "DELETE" | "ADD" | "UPDATE", streamList: ZegoCloudRemoteMedia[]) => void): void;
     private onNetworkStatusQualityCallBack;
     onNetworkStatusQuality(func: (roomID: string, level: number) => void): void;
     private onRemoteUserUpdateCallBack;
     onRemoteUserUpdate(func: (roomID: string, updateType: "DELETE" | "ADD", user: ZegoUser[]) => void): void;
+    private onSoundLevelUpdateCallBack;
+    onSoundLevelUpdate(func: (soundLevelList: ZegoSoundLevelInfo[]) => void): void;
     sendRoomMessage(message: string): Promise<import("zego-express-engine-webrtm/sdk/code/zh/ZegoExpressEntity.d").ZegoServerResponse>;
     private onRoomMessageUpdateCallBack;
     onRoomMessageUpdate(func: (roomID: string, info: ZegoBroadcastMessageInfo[]) => void): void;

package/sdk/modules/tools/UserListManager.d.ts

@@ -0,0 +1,27 @@
+import { ZegoExpressEngine } from "zego-express-engine-webrtc";
+import { ZegoUser } from "zego-express-engine-webrtm/sdk/code/zh/ZegoExpressEntity.d";
+import { ZegoCloudRemoteMedia } from "../../model";
+export declare type ZegoCloudUserList = ZegoCloudUser[];
+export declare type ZegoCloudUser = ZegoUser & {
+    pin: boolean;
+    overScreenMuteVideo?: boolean;
+    streamList: ZegoCloudRemoteMedia[];
+};
+export declare class ZegoCloudUserListManager {
+    private zg;
+    constructor(zg: ZegoExpressEngine);
+    showNonVideo: boolean;
+    screenNumber: number;
+    sidebarEnabled: boolean;
+    remoteUserList: ZegoCloudUserList;
+    setPin(userID?: string, pined?: boolean): void;
+    setShowNonVideo(enable: boolean): Promise<boolean>;
+    setMaxScreenNum(num: number): Promise<boolean>;
+    setSidebarLayOut(enable: boolean): Promise<boolean>;
+    updateStream(): Promise<boolean>;
+    openVideo(user: ZegoCloudUser): Promise<void>;
+    muteVideo(user: ZegoCloudUser): Promise<void>;
+    userUpdate(roomID: string, updateType: "DELETE" | "ADD", users: ZegoUser[]): void;
+    streamNumUpdate(updateType: "DELETE" | "ADD" | "UPDATE", streamList: ZegoCloudRemoteMedia[]): void;
+    clearUserList(): void;
+}

package/sdk/util.d.ts

@@ -1,5 +1,7 @@
 export declare function randomNumber(len: number): number;
 export declare function isPc(): boolean;
+export declare function isIOS(): boolean;
+export declare function IsSafari(): boolean;
 export declare function DateFormat(date: number, fmt: string): string;
 export declare function userNameColor(userName: string): string;
 export declare function getUrlParams(url: string): {
@@ -11,3 +13,4 @@ export declare function getVideoResolution(level: string): {
     bitrate: number;
     frameRate: number;
 };
+export declare const throttle: (fn: Function, wait: number) => () => void;

package/sdk/view/components/zegoSetting/index.d.ts

@@ -20,6 +20,7 @@ export declare class ZegoSettings extends React.Component<ZegoSettingsProps> {
         speakerVolume: number;
         isSpeakerPlaying: boolean;
         renderAudio: boolean;
+        showNonVideo: boolean | undefined;
     };
     videoRef: React.RefObject<HTMLDivElement>;
     speakerTimer: NodeJS.Timer | null;
@@ -52,6 +53,7 @@ export declare class ZegoSettings extends React.Component<ZegoSettingsProps> {
     close(): void;
     captureMicVolume(): void;
     onTestMusicEnded(): void;
+    handleShowNonVideo(): void;
     render(): React.ReactNode;
 }
 export declare const ZegoSettingsAlert: (config: ZegoSettingsProps) => void;

package/sdk/view/index.d.ts

@@ -5,7 +5,9 @@ export declare class ZegoCloudRTCKitComponent extends React.Component<{
 }> {
     state: {
         step: number;
+        isSupportWebRTC: boolean;
     };
+    componentDidMount(): Promise<void>;
     nextPage(): void;
     render(): React.ReactNode;
 }

package/sdk/view/pages/ZegoBrowserCheck/index.d.ts

@@ -2,7 +2,6 @@ import React, { ChangeEvent, RefObject } from "react";
 import { ZegoBrowserCheckProp } from "../../../model";
 export declare class ZegoBrowserCheck extends React.Component<ZegoBrowserCheckProp> {
     state: {
-        isSupportWebRTC: undefined;
         localStream: undefined;
         localVideoStream: undefined;
         localAudioStream: undefined;
@@ -19,6 +18,7 @@ export declare class ZegoBrowserCheck extends React.Component<ZegoBrowserCheckPr
         seletCamera: undefined;
         seletVideoResolution: string;
         isJoining: boolean;
+        showNonVideo: boolean | undefined;
     };
     videoRef: RefObject<HTMLVideoElement>;
     inviteRef: RefObject<HTMLInputElement>;

package/sdk/view/pages/ZegoBrowserCheckMobile/index.d.ts

@@ -2,7 +2,6 @@ import React, { ChangeEvent, RefObject } from "react";
 import { ZegoBrowserCheckProp } from "../../../model";
 export declare class ZegoBrowserCheckMobile extends React.Component<ZegoBrowserCheckProp> {
     state: {
-        isSupportWebRTC: undefined;
         localStream: undefined;
         localVideoStream: undefined;
         localAudioStream: undefined;

package/sdk/view/pages/ZegoRoom/components/zegoGridLayout.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { ZegoGridLayoutProps } from "../../../../model";
+export declare class ZegoGridLayout extends React.Component<ZegoGridLayoutProps> {
+    render(): React.ReactNode;
+}

package/sdk/view/pages/ZegoRoom/components/zegoOne2One.d.ts

@@ -1,19 +1,15 @@
 import React from "react";
-import { ZegoCloudRemoteMedia } from "../../../../model";
+import { ZegoCloudUser } from "../../../../modules/tools/UserListManager";
+import { SoundLevelMap } from "../../../../model";
 export declare class ZegoOne2One extends React.Component<{
-    localStream: MediaStream | undefined;
-    remoteStreamInfo: ZegoCloudRemoteMedia | undefined;
-    remoteUserInfo: {
-        userName: string | undefined;
-        userID: string | undefined;
-    };
-    selfUserInfo: {
-        userName: string;
-        micOpen: boolean;
-        cameraOpen: boolean;
+    selfInfo: {
+        userID: string;
     };
     onLocalStreamPaused: () => void;
+    handleSetPin: Function;
+    soundLevel?: SoundLevelMap;
+    userList: ZegoCloudUser[];
 }> {
-    getVideoScreen(): JSX.Element;
+    getVideoScreen(): JSX.Element | null;
     render(): React.ReactNode;
 }

package/sdk/view/pages/ZegoRoom/components/zegoOthersVideo.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function OthersVideo(props: {
+    users: string[];
+    others: number;
+}): JSX.Element;

package/sdk/view/pages/ZegoRoom/components/zegoRoomInvite.d.ts

@@ -0,0 +1,9 @@
+import React, { RefObject } from "react";
+import { ZegoCloudRTCCore } from "../../../../modules";
+export declare class ZegoRoomInvite extends React.Component<{
+    core: ZegoCloudRTCCore;
+}> {
+    inviteRef: RefObject<HTMLInputElement>;
+    handleCopy(): void;
+    render(): React.ReactNode;
+}

package/sdk/view/pages/ZegoRoom/components/zegoSidebarLayout.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { ZegoSidebarLayoutProps } from "../../../../model";
+export declare class ZegoSidebarLayout extends React.Component<ZegoSidebarLayoutProps> {
+    get pinUser(): import("../../../../modules/tools/UserListManager").ZegoCloudUser;
+    render(): React.ReactNode;
+}

package/sdk/view/pages/ZegoRoom/components/zegoUserList.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { ZegoCloudRTCCore } from "../../../../modules";
+import { ZegoCloudUserList } from "../../../../modules/tools/UserListManager";
+import { SoundLevelMap } from "../../../../model";
+export declare class ZegoUserList extends React.Component<{
+    core: ZegoCloudRTCCore;
+    userList: ZegoCloudUserList;
+    selfUserID: string;
+    handleSetPin: Function;
+    soundLevel?: SoundLevelMap;
+}> {
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onBodyClick(e: Event): void;
+    expandMemberMenu(userID: string | null): void;
+    getHeight(userID: string, streamID: string): number;
+    render(): React.ReactNode;
+}

package/sdk/view/pages/ZegoRoom/components/zegoVideoPlayer.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ZegoCloudUser } from "../../../../modules/tools/UserListManager";
+export declare function VideoPlayer(props: {
+    userInfo: ZegoCloudUser;
+    muted: boolean;
+    volume?: {
+        [streamID: string]: number;
+    };
+    handlePin?: Function;
+    onPause?: Function;
+    myClass?: string;
+}): JSX.Element;

package/sdk/view/pages/ZegoRoom/index.d.ts

@@ -1,13 +1,14 @@
 /// <reference types="node" />
 import React, { RefObject } from "react";
-import { ZegoBroadcastMessageInfo2, ZegoBrowserCheckProp, ZegoCloudRemoteMedia, ZegoNotification } from "../../../model";
+import { SoundLevelMap, ZegoBroadcastMessageInfo2, ZegoBrowserCheckProp, ZegoCloudRemoteMedia, ZegoNotification } from "../../../model";
 import { ZegoUser } from "zego-express-engine-webrtm/sdk/code/zh/ZegoExpressEntity.d";
+import { ZegoCloudUserList } from "../../../modules/tools/UserListManager";
 export declare class ZegoRoom extends React.Component<ZegoBrowserCheckProp> {
     state: {
         localStream: undefined | MediaStream;
         remoteStreamInfo: ZegoCloudRemoteMedia | undefined;
         layOutStatus: "ONE_VIDEO" | "INVITE" | "USER_LIST" | "MESSAGE";
-        userList: ZegoUser[];
+        zegoCloudUserList: ZegoCloudUserList;
         messageList: ZegoBroadcastMessageInfo2[];
         notificationList: ZegoNotification[];
         micOpen: boolean;
@@ -20,25 +21,36 @@ export declare class ZegoRoom extends React.Component<ZegoBrowserCheckProp> {
         seletSpeaker: string | undefined;
         seletCamera: string | undefined;
         seletVideoResolution: string;
+        showNonVideoUser: boolean;
+        videoShowNumber: number;
+        gridRowNumber: number;
+        layout: "Default" | "Grid" | "Sidebar";
+        showLayoutSettingsModel: boolean;
+        isLayoutChanging: boolean;
+        soundLevel: SoundLevelMap;
     };
-    inviteRef: RefObject<HTMLInputElement>;
     settingsRef: RefObject<HTMLDivElement>;
     moreRef: RefObject<HTMLDivElement>;
     micStatus: -1 | 0 | 1;
     cameraStatus: -1 | 0 | 1;
     notifyTimer: NodeJS.Timeout;
     msgDelayed: boolean;
+    localUserPin: boolean;
+    localStreamID: string;
+    userUpdateCallBack: () => void;
     componentDidMount(): void;
     componentDidUpdate(preProps: ZegoBrowserCheckProp, preState: {
         localStream: undefined | MediaStream;
         remoteStreamInfo: ZegoCloudRemoteMedia | undefined;
         layOutStatus: "ONE_VIDEO" | "INVITE" | "USER_LIST" | "MESSAGE";
-        userList: ZegoUser[];
+        zegoCloudUserList: ZegoUser[];
         messageList: ZegoBroadcastMessageInfo2[];
         notificationList: ZegoNotification[];
         micOpen: boolean;
         cameraOpen: boolean;
         showMore: boolean;
+        layout: string;
+        videoShowNumber: number;
     }): void;
     componentWillUnmount(): void;
     initSDK(): Promise<void>;
@@ -52,7 +64,13 @@ export declare class ZegoRoom extends React.Component<ZegoBrowserCheckProp> {
     handleSetting(): void;
     handleLeave(): void;
     leaveRoom(): void;
-    handleCopy(): void;
-    getListScreen(): JSX.Element | undefined;
+    computeByResize(): void;
+    onWindowResize: () => void;
+    showLayoutSettings(show: boolean): void;
+    changeLayout(type: string): Promise<unknown>;
+    getShownUser(forceShowNonVideoUser?: boolean): ZegoCloudUserList;
+    getHiddenUser(): JSX.Element;
+    getLayoutScreen(): JSX.Element | undefined;
+    handleSetPin(userID: string): void;
     render(): React.ReactNode;
 }

package/sdk/view/pages/ZegoRoomMobile/components/zegoGrid.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { ZegoGridLayoutProps } from "../../../../model/index";
+export declare class ZegoGrid extends React.Component<ZegoGridLayoutProps> {
+    render(): React.ReactNode;
+}

package/sdk/view/pages/ZegoRoomMobile/components/zegoLayout.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export declare class ZegoLayout extends React.Component<{
+    selectLayout: "Sidebar" | "Grid" | "Default";
+    closeCallBac: () => void;
+    selectCallBack?: (selectLayout: "Sidebar" | "Grid" | "Default") => Promise<boolean>;
+}> {
+    state: {
+        selectLayout: "Sidebar" | "Grid" | "Default";
+    };
+    checking: boolean;
+    select(selectLayout: "Sidebar" | "Grid" | "Default"): Promise<void>;
+    render(): React.ReactNode;
+}

package/sdk/view/pages/ZegoRoomMobile/components/zegoManage.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ZegoCloudUser } from "../../../../modules/tools/UserListManager";
+export declare class ZegoManage extends React.Component<{
+    selectedUser: ZegoCloudUser;
+    closeCallBac: () => void;
+    selectCallBac: (type?: "Pin", value?: boolean) => void;
+}> {
+    select(type?: "Pin", value?: boolean): Promise<void>;
+    render(): React.ReactNode;
+}

package/sdk/view/pages/ZegoRoomMobile/components/zegoMore.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ZegoCloudUser } from "../../../../modules/tools/UserListManager";
+import ShowManageContext, { ShowManageType } from "../context/showManage";
+export declare class ZegoMore extends React.Component<{
+    user: ZegoCloudUser;
+}> {
+    static contextType?: React.Context<ShowManageType>;
+    context: React.ContextType<typeof ShowManageContext>;
+    render(): React.ReactNode;
+}

package/sdk/view/pages/ZegoRoomMobile/components/zegoOne2One.d.ts

@@ -1,21 +1,14 @@
 import React from "react";
-import { ZegoCloudRemoteMedia } from "../../../../model";
-import { ZegoCloudRTCCore } from "../../../../modules";
+import { ZegoCloudUserList } from "../../../../modules/tools/UserListManager";
+import { SoundLevelMap } from "../../../../model";
 export declare class ZegoOne2One extends React.Component<{
-    localStream: MediaStream | undefined;
-    remoteStreamInfo: ZegoCloudRemoteMedia | undefined;
-    core: ZegoCloudRTCCore;
+    userList: ZegoCloudUserList;
     onLocalStreamPaused: () => void;
-    remoteUserInfo: {
-        userName: string | undefined;
-        userID: string | undefined;
-    };
-    selfUserInfo: {
-        userName: string;
-        micOpen: boolean;
-        cameraOpen: boolean;
+    soundLevel?: SoundLevelMap;
+    selfInfo?: {
+        userID: string;
     };
 }> {
-    getVideoScreen(): JSX.Element;
+    getVideoScreen(): JSX.Element | undefined;
     render(): React.ReactNode;
 }

package/sdk/view/pages/ZegoRoomMobile/components/zegoSidebar.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ZegoGridLayoutProps } from "../../../../model";
+import { ZegoCloudUserList } from "../../../../modules/tools/UserListManager";
+export declare class ZegoSidebar extends React.Component<ZegoGridLayoutProps> {
+    get userList(): ZegoCloudUserList;
+    get pinUser(): import("../../../../modules/tools/UserListManager").ZegoCloudUser;
+    render(): React.ReactNode;
+}

package/sdk/view/pages/ZegoRoomMobile/components/zegoUserList.d.ts

@@ -1,10 +1,10 @@
 import React, { ChangeEvent } from "react";
 import { ZegoCloudRTCCore } from "../../../../modules";
-import { ZegoUser } from "zego-express-engine-webrtm/sdk/code/zh/ZegoExpressEntity.d";
+import { ZegoCloudUser, ZegoCloudUserList } from "../../../../modules/tools/UserListManager";
 export declare class ZegoUserList extends React.Component<{
-    userList: ZegoUser[];
+    userList: ZegoCloudUserList;
     core: ZegoCloudRTCCore;
-    closeCallBack: () => void;
+    closeCallBack: (user?: ZegoCloudUser) => void;
 }> {
     state: {
         message: string;

package/sdk/view/pages/ZegoRoomMobile/components/zegoUserVideo.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import { ZegoCloudUser } from "../../../../modules/tools/UserListManager";
+export declare class ZegoUserVideo extends React.Component<{
+    user: ZegoCloudUser;
+    onLocalStreamPaused?: () => void;
+    volume: {
+        [streamID: string]: number;
+    };
+    circleSize?: "GRID" | "SIDEBAR";
+    muted: boolean;
+}> {
+    render(): React.ReactNode;
+}
+export declare class ZegoUserOtherVideo extends React.Component<{
+    user: ZegoCloudUser;
+    nextUser: ZegoCloudUser;
+    othersNumber: number;
+    circleSize?: "GRID" | "SIDEBAR";
+    onLocalStreamPaused?: () => void;
+}> {
+    render(): React.ReactNode;
+}

package/sdk/view/pages/ZegoRoomMobile/context/showManage.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { ZegoCloudUser } from "../../../../modules/tools/UserListManager";
+export declare type ShowManageType = {
+    show: (user: ZegoCloudUser) => void;
+};
+declare const ShowManageContext: React.Context<ShowManageType>;
+export default ShowManageContext;

package/sdk/view/pages/ZegoRoomMobile/index.d.ts

@@ -1,14 +1,16 @@
 /// <reference types="node" />
 import React from "react";
-import { ZegoBroadcastMessageInfo2, ZegoBrowserCheckProp, ZegoCloudRemoteMedia, ZegoNotification } from "../../../model";
-import { ZegoUser, ZegoBroadcastMessageInfo } from "zego-express-engine-webrtm/sdk/code/zh/ZegoExpressEntity.d";
+import { SoundLevelMap, ZegoBroadcastMessageInfo2, ZegoBrowserCheckProp, ZegoNotification } from "../../../model";
+import { ZegoBroadcastMessageInfo } from "zego-express-engine-webrtm/sdk/code/zh/ZegoExpressEntity.d";
 import { ZegoDeviceInfo } from "zego-express-engine-webrtc/sdk/code/zh/ZegoExpressEntity.web";
+import { ZegoCloudUserList } from "../../../modules/tools/UserListManager";
 export declare class ZegoRoomMobile extends React.Component<ZegoBrowserCheckProp> {
+    static contextType: React.Context<import("./context/showManage").ShowManageType>;
     state: {
         localStream: undefined | MediaStream;
-        remoteStreamInfo: ZegoCloudRemoteMedia | undefined;
-        layOutStatus: "ONE_VIDEO" | "INVITE" | "USER_LIST" | "MESSAGE";
-        userList: ZegoUser[];
+        layOutStatus: "ONE_VIDEO" | "INVITE" | "USER_LIST" | "MESSAGE" | "LAYOUT" | "MANAGE";
+        userLayoutStatus: "Default" | "Grid" | "Sidebar";
+        zegoCloudUserList: ZegoCloudUserList;
         messageList: ZegoBroadcastMessageInfo2[];
         notificationList: ZegoNotification[];
         micOpen: boolean;
@@ -19,19 +21,21 @@ export declare class ZegoRoomMobile extends React.Component<ZegoBrowserCheckProp
         cameraFront: boolean;
         showFooter: boolean;
         isNetworkPoor: boolean;
+        soundLevel: SoundLevelMap;
     };
     micStatus: -1 | 0 | 1;
     cameraStatus: -1 | 0 | 1;
+    localUserPin: boolean;
     faceModel: 0 | 1 | -1;
     notifyTimer: NodeJS.Timeout | null;
     footerTimer: NodeJS.Timeout;
     cameraDevices: ZegoDeviceInfo[];
+    userUpdateCallBack: () => void;
+    localStreamID: string;
     componentDidMount(): void;
     componentDidUpdate(preProps: ZegoBrowserCheckProp, preState: {
         localStream: undefined | MediaStream;
-        remoteStreamInfo: ZegoCloudRemoteMedia | undefined;
         layOutStatus: "ONE_VIDEO" | "INVITE" | "USER_LIST" | "MESSAGE";
-        userList: ZegoUser[];
         messageList: ZegoBroadcastMessageInfo[];
         notificationList: ZegoNotification[];
         micOpen: boolean;
@@ -43,13 +47,18 @@ export declare class ZegoRoomMobile extends React.Component<ZegoBrowserCheckProp
     toggleMic(): Promise<void>;
     toggleCamera(): Promise<void>;
     switchCamera(): Promise<void>;
-    toggleLayOut(layOutStatus: "ONE_VIDEO" | "INVITE" | "USER_LIST" | "MESSAGE"): void;
+    toggleLayOut(layOutStatus: "ONE_VIDEO" | "INVITE" | "USER_LIST" | "MESSAGE" | "LAYOUT"): void;
     sendMessage(msg: string): Promise<void>;
     onblur: (e: {
         path?: any[];
     }) => void;
     openMore(): void;
     leaveRoom(): void;
+    getShownUser(forceShowNonVideoUser?: boolean): ZegoCloudUserList;
+    getHiddenUser(): JSX.Element;
+    private _selectedUser;
     getListScreen(): JSX.Element | undefined;
+    getLayoutScreen(): JSX.Element | undefined;
+    clickVideo(e: MouseEvent): void;
     render(): React.ReactNode;
 }