@zegocloud/zego-uikit-prebuilt 1.0.1 → 1.3.0

package/{sdk/index.d.ts → index.d.ts}

@@ -1,9 +1,16 @@
 import { Root } from "react-dom/client";
-import { ZegoCloudRoomConfig } from "./model/index";
+import { LiveRole, ScenarioModel, ZegoCloudRoomConfig } from "./model/index";
 import { ZegoCloudRTCCore } from "./modules/index";
 export declare class ZegoUIKitPrebuilt {
     static core: ZegoCloudRTCCore;
     static _instance: ZegoUIKitPrebuilt;
+    static Host: LiveRole;
+    static Cohost: LiveRole;
+    static Audience: LiveRole;
+    static OneONoneCall: ScenarioModel;
+    static GroupCall: ScenarioModel;
+    static LiveStreaming: ScenarioModel;
+    static VideoConference: ScenarioModel;
     root: Root | undefined;
     static create(token: string): ZegoUIKitPrebuilt;
     joinRoom(roomConfig?: ZegoCloudRoomConfig): void;

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/model/index.d.ts

@@ -0,0 +1,157 @@
+import { ZegoUser, ZegoBroadcastMessageInfo } from "zego-express-engine-webrtm/sdk/code/zh/ZegoExpressEntity.d";
+import { ZegoCloudRTCCore } from "../modules";
+import { ZegoCloudUser, ZegoCloudUserList } from "../modules/tools/UserListManager";
+export interface ZegoCloudRemoteMedia {
+    media: MediaStream | undefined;
+    fromUser: ZegoUser;
+    micStatus: "OPEN" | "MUTE";
+    cameraStatus: "OPEN" | "MUTE";
+    state: "NO_PLAY" | "PLAY_REQUESTING" | "PLAYING";
+    streamID: string;
+}
+export declare enum LiveRole {
+    Host = "Host",
+    Cohost = "Cohost",
+    Audience = "Audience"
+}
+export declare enum ScenarioModel {
+    OneONoneCall = "OneONoneCall",
+    GroupCall = "GroupCall",
+    VideoConference = "VideoConference",
+    LiveStreaming = "LiveStreaming"
+}
+export interface ScenarioConfig {
+    [ScenarioModel.LiveStreaming]: {
+        role: LiveRole;
+    };
+    [ScenarioModel.OneONoneCall]: {
+        role: LiveRole;
+    };
+    [ScenarioModel.GroupCall]: {
+        role: LiveRole;
+    };
+    [ScenarioModel.VideoConference]: {
+        role: LiveRole;
+    };
+}
+export interface ZegoCloudRoomConfig {
+    container?: HTMLElement | undefined | null;
+    preJoinViewConfig?: {
+        title?: string;
+        invitationLink?: string;
+    };
+    showPreJoinView?: boolean;
+    turnOnMicrophoneWhenJoining?: boolean;
+    turnOnCameraWhenJoining?: boolean;
+    showMyCameraToggleButton?: boolean;
+    showMyMicrophoneToggleButton?: boolean;
+    showAudioVideoSettingsButton?: boolean;
+    showTextChat?: boolean;
+    showUserList?: boolean;
+    lowerLeftNotification?: {
+        showUserJoinAndLeave?: boolean;
+        showTextChat?: boolean;
+    };
+    branding?: {
+        logoURL?: string;
+    };
+    showLeavingView?: boolean;
+    maxUsers?: number;
+    layout?: "Sidebar" | "Grid" | "Auto";
+    showNonVideoUser?: boolean;
+    showOnlyAudioUser?: boolean;
+    useFrontFacingCamera?: boolean;
+    onJoinRoom?: (users: ZegoUser[]) => void;
+    onLeaveRoom?: (users: ZegoUser[]) => void;
+    onUserJoin?: (user: ZegoUser[]) => void;
+    onUserLeave?: (user: ZegoUser[]) => void;
+    sharedLinks?: {
+        name: string;
+        url: string;
+    }[];
+    showScreenSharingButton?: boolean;
+    scenario?: {
+        mode?: ScenarioModel;
+        config?: ScenarioConfig[ScenarioModel];
+    };
+    showLayoutButton?: boolean;
+    showPinButton?: boolean;
+    facingMode?: "user" | "environment";
+    joinRoomCallback?: () => void;
+    leaveRoomCallback?: () => void;
+    userUpdateCallback?: (updateType: "DELETE" | "ADD", userList: ZegoUser[]) => void;
+    roomTimerDisplayed?: boolean;
+}
+export interface ZegoBrowserCheckProp {
+    core: ZegoCloudRTCCore;
+    joinRoom?: () => void;
+    leaveRoom?: () => void;
+    returnHome?: () => void;
+}
+export interface ZegoNotification {
+    type: "USER" | "MSG";
+    content: string;
+    userName: undefined | string;
+    messageID: number;
+}
+export declare type ZegoBroadcastMessageInfo2 = ZegoBroadcastMessageInfo & {
+    status: "SENDING" | "SENDED" | "FAILED";
+};
+export interface ZegoSettingsProps {
+    core: ZegoCloudRTCCore;
+    theme?: string;
+    initDevices: {
+        mic: string | undefined;
+        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 ZegoScreenSharingLayoutProps {
+    handleSetPin?: Function;
+    userList: ZegoCloudUserList;
+    videoShowNumber: number;
+    selfInfo: {
+        userID: string;
+    };
+    roomID?: String;
+    screenSharingUser: ZegoCloudUser;
+    soundLevel?: SoundLevelMap;
+    handleFullScreen?: (fullScreen: boolean) => void;
+}
+export interface SoundLevelMap {
+    [userID: string]: {
+        [streamID: string]: number;
+    };
+}
+export declare enum ZegoStreamType {
+    main = 0,
+    media = 1,
+    screensharing = 2
+}

package/{sdk/modules → 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;
@@ -28,13 +30,19 @@ export declare class ZegoCloudRTCCore {
     };
     checkWebRTC(): Promise<boolean>;
     _config: ZegoCloudRoomConfig;
-    setConfig(config: ZegoCloudRoomConfig): void;
+    setConfig(config: ZegoCloudRoomConfig): boolean;
+    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;
     createStream(source?: ZegoLocalStreamConfig): Promise<MediaStream>;
     setVideoConfig(media: MediaStream, constraints: ZegoPublishStreamConfig): Promise<ZegoServerResponse>;
+    stopPublishingStream(streamID: string): boolean;
     destroyStream(stream: MediaStream): void;
     useCameraDevice(media: MediaStream, deviceID: string): Promise<ZegoServerResponse>;
     useMicrophoneDevice(media: MediaStream, deviceID: string): Promise<ZegoServerResponse>;
@@ -43,18 +51,39 @@ export declare class ZegoCloudRTCCore {
     mutePublishStreamVideo(localStream: MediaStream, enable: boolean): Promise<boolean>;
     mutePublishStreamAudio(localStream: MediaStream, enable: boolean): Promise<boolean>;
     muteMicrophone(enable: boolean): Promise<boolean>;
+    extraInfoKey: string;
+    _roomExtraInfo: {
+        [index: string]: any;
+    };
+    set roomExtraInfo(value: {
+        [index: string]: any;
+    });
+    get roomExtraInfo(): {
+        [index: string]: any;
+    };
+    setLive(status: "live" | "stop"): Promise<boolean>;
     enterRoom(): Promise<number>;
-    publishLocalStream(media: MediaStream): boolean;
+    publishLocalStream(media: MediaStream, streamType?: "main" | "media" | "screensharing"): boolean | string;
     replaceTrack(media: MediaStream, mediaStreamTrack: MediaStreamTrack): Promise<ZegoServerResponse>;
+    private subscribeUserListCallBack;
+    subscribeUserList(callback: (userList: ZegoCloudUserList) => void): void;
+    private subscribeScreenStreamCallBack;
+    subscribeScreenStream(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;
+    private onRoomLiveStateUpdateCallBack;
+    onRoomLiveStateUpdate(func: (live: 1 | 0) => 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;
+    private onScreenSharingEndedCallBack;
+    onScreenSharingEnded(func: (stream: MediaStream) => void): void;
     NetworkStatusTimer: NodeJS.Timer | null;
     private onNetworkStatusCallBack;
     onNetworkStatus(func: (roomID: string, type: "ROOM" | "STREAM", status: "DISCONNECTED" | "CONNECTING" | "CONNECTED") => void): void;

package/modules/tools/UserListManager.d.ts

@@ -0,0 +1,41 @@
+import { ZegoExpressEngine } from "zego-express-engine-webrtc";
+import { ZegoUser } from "zego-express-engine-webrtm/sdk/code/zh/ZegoExpressEntity.d";
+import { LiveRole, ScenarioModel, 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;
+    showOnlyAudioUser: boolean;
+    screenNumber: number;
+    sidebarEnabled: boolean;
+    remoteUserList: ZegoCloudUserList;
+    remoteScreenStreamList: 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>;
+    userOrderList: string[];
+    userUpdate(roomID: string, updateType: "DELETE" | "ADD", users: ZegoUser[]): Promise<boolean>;
+    mainStreamUpdate(updateType: "DELETE" | "ADD" | "UPDATE", streamList: ZegoCloudRemoteMedia[]): void;
+    screenStreamUpdate(updateType: "DELETE" | "ADD" | "UPDATE", streamList: ZegoCloudRemoteMedia[]): void;
+    waitingPullStreams: {
+        streamID: string;
+        userID: string;
+    }[];
+    isLive: 1 | 0;
+    setLiveStates(state: 1 | 0): Promise<void>;
+    scenario: ScenarioModel;
+    role: LiveRole;
+    startPullStream(userID: string, streamID: string): Promise<MediaStream | undefined>;
+    stopPullStream(userID: string, streamID: string): void;
+    reset(): void;
+}

package/{sdk/modules → modules/tools}/util.d.ts

@@ -8,3 +8,4 @@ export declare function getConfig(token: string): {
 } | undefined;
 export declare function copy(text: string): void;
 export declare function formatTime(s: number): string;
+export declare function generateStreamID(userID: string, roomID: string, type?: "main" | "media" | "screensharing"): string;

package/package.json

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

package/{sdk/view → view}/components/zegoSetting/index.d.ts

@@ -7,10 +7,10 @@ export declare class ZegoSettings extends React.Component<ZegoSettingsProps> {
     state: {
         visible: boolean;
         selectTab: "AUDIO" | "VIDEO";
-        seletMic: string | undefined;
-        seletSpeaker: string | undefined;
-        seletCamera: string | undefined;
-        seletVideoResolution: string | undefined;
+        selectMic: string | undefined;
+        selectSpeaker: string | undefined;
+        selectCamera: string | undefined;
+        selectVideoResolution: string | undefined;
         micDevices: ZegoDeviceInfo[];
         speakerDevices: ZegoDeviceInfo[];
         cameraDevices: ZegoDeviceInfo[];
@@ -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;
@@ -36,10 +37,10 @@ export declare class ZegoSettings extends React.Component<ZegoSettingsProps> {
         micDevices: ZegoDeviceInfo[];
         speakerDevices: ZegoDeviceInfo[];
         cameraDevices: ZegoDeviceInfo[];
-        seletMic: string | undefined;
-        seletSpeaker: string | undefined;
-        seletCamera: string | undefined;
-        seletVideoResolution: string | undefined;
+        selectMic: string | undefined;
+        selectSpeaker: string | undefined;
+        selectCamera: string | undefined;
+        selectVideoResolution: string | undefined;
     }>;
     createVideoStream(): Promise<boolean>;
     createAudioStream(): Promise<boolean>;
@@ -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/components/mobile → view/components}/zegoToast/index.d.ts

@@ -4,10 +4,6 @@ export declare class ZegoToastComponents extends React.Component<{
     content?: string;
     duration: number;
 }> {
-    state: {
-        mounted: boolean;
-    };
-    componentDidMount(): void;
     render(): React.ReactNode;
 }
 export declare const ZegoToast: (config?: {

package/{sdk/view → 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 → 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;
@@ -14,11 +13,17 @@ export declare class ZegoBrowserCheck extends React.Component<ZegoBrowserCheckPr
         isJoinRoomFailed: boolean;
         joinRoomErrorTip: string;
         showDeviceAuthorAlert: boolean;
-        seletMic: undefined;
-        seletSpeaker: undefined;
-        seletCamera: undefined;
-        seletVideoResolution: string;
+        selectMic: undefined;
+        selectSpeaker: undefined;
+        selectCamera: undefined;
+        selectVideoResolution: string;
         isJoining: boolean;
+        showNonVideo: boolean | undefined;
+        sharedLinks: {
+            name: string;
+            url: string;
+            copied: boolean;
+        }[] | undefined;
     };
     videoRef: RefObject<HTMLVideoElement>;
     inviteRef: RefObject<HTMLInputElement>;
@@ -27,16 +32,15 @@ export declare class ZegoBrowserCheck extends React.Component<ZegoBrowserCheckPr
     constructor(props: ZegoBrowserCheckProp);
     componentDidMount(): Promise<void>;
     getDevices(): Promise<{
-        seletMic: string | undefined;
-        seletSpeaker: string | undefined;
-        seletCamera: string | undefined;
-        seletVideoResolution: string;
+        selectMic: string | undefined;
+        selectSpeaker: string | undefined;
+        selectCamera: string | undefined;
+        selectVideoResolution: string;
     }>;
     createStream(videoOpen: boolean, audioOpen: boolean): Promise<MediaStream>;
     toggleStream(type: "video" | "audio"): Promise<void>;
     joinRoom(): Promise<void>;
     handleChange(event: ChangeEvent<HTMLInputElement>): void;
-    handleCopy(): void;
     openSettings(): void;
     render(): React.ReactNode;
 }

package/{sdk/view → 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;
@@ -12,6 +11,11 @@ export declare class ZegoBrowserCheckMobile extends React.Component<ZegoBrowserC
         copied: boolean;
         isVideoOpening: boolean;
         isJoining: boolean;
+        sharedLinks: {
+            name: string;
+            url: string;
+            copied: boolean;
+        }[] | undefined;
     };
     videoRef: RefObject<HTMLVideoElement>;
     inviteRef: RefObject<HTMLInputElement>;
@@ -20,6 +24,8 @@ export declare class ZegoBrowserCheckMobile extends React.Component<ZegoBrowserC
     constructor(props: ZegoBrowserCheckProp);
     componentDidMount(): Promise<void>;
     createStream(videoOpen: boolean, audioOpen: boolean): Promise<MediaStream>;
+    toggleStream2(type: "video" | "audio"): Promise<void>;
+    toggleStream1(type: "video" | "audio"): Promise<void>;
     toggleStream(type: "video" | "audio"): Promise<void>;
     joinRoom(): Promise<void>;
     handleChange(event: ChangeEvent<HTMLInputElement>): void;

package/view/pages/ZegoRoom/components/ZegoScreenSharingLayout.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { ZegoScreenSharingLayoutProps } from "../../../../model";
+export declare class ZegoScreenSharingLayout extends React.Component<ZegoScreenSharingLayoutProps> {
+    state: {
+        fullScreen: boolean;
+        loadingMask: boolean;
+        showBottomTip: boolean;
+    };
+    componentDidMount(): void;
+    onCanPlay(): void;
+    handleIgnore(): void;
+    render(): React.ReactNode;
+}

package/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/view/pages/ZegoRoom/components/zegoOne2One.d.ts

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

package/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/view/pages/ZegoRoom/components/zegoRoomInvite.d.ts

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

package/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/view/pages/ZegoRoom/components/zegoUserList.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { ZegoCloudRTCCore } from "../../../../modules";
+import { ZegoCloudUser, 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;
+    isShownPin(user: ZegoCloudUser): boolean;
+    render(): React.ReactNode;
+}

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { ZegoCloudUser } from "../../../../modules/tools/UserListManager";
+import ShowPCManageContext, { ShowPCManageType } from "../context/showManage";
+export declare class VideoPlayer extends React.Component<{
+    userInfo: ZegoCloudUser;
+    muted: boolean;
+    volume?: {
+        [streamID: string]: number;
+    };
+    handlePin?: Function;
+    onPause?: Function;
+    onCanPlay?: Function;
+    myClass?: string;
+    hiddenName?: boolean;
+    hiddenMore?: boolean;
+}> {
+    static contextType?: React.Context<ShowPCManageType>;
+    context: React.ContextType<typeof ShowPCManageContext>;
+    render(): React.ReactNode;
+}

package/view/pages/ZegoRoom/context/showManage.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { ZegoCloudUser } from "../../../../modules/tools/UserListManager";
+export declare type ShowPCManageType = {
+    show?: (user: ZegoCloudUser) => void;
+    showPinButton: boolean;
+};
+declare const ShowPCManageContext: React.Context<ShowPCManageType>;
+export default ShowPCManageContext;