feat(flat-components): video avatar (#641)

* feat(flat-components): video avatar

* refactor(desktop): use flat-components

desktop/renderer-app/src/components/AvatarCanvas.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useRef } from "react";
+import type AgoraSDK from "agora-electron-sdk";
+import { observer } from "mobx-react-lite";
+import { useUpdateEffect } from "react-use";
+import { User } from "../stores/ClassRoomStore";
+
+export interface AvatarCanvasProps {
+    isCreator: boolean;
+    /** id of current login user */
+    userUUID: string;
+    /** the user of this avatar */
+    avatarUser: User;
+    rtcEngine: AgoraSDK;
+    updateDeviceState: (id: string, camera: boolean, mic: boolean) => void;
+}
+
+export const AvatarCanvas = observer<AvatarCanvasProps>(function AvatarCanvas({
+    userUUID,
+    avatarUser,
+    rtcEngine,
+}) {
+    /** avatar element */
+    const elRef = useRef<HTMLDivElement | null>(null);
+
+    useUpdateEffect(() => {
+        if (userUUID === avatarUser.userUUID) {
+            rtcEngine.enableLocalVideo(avatarUser.camera);
+        } else {
+            rtcEngine.muteRemoteVideoStream(avatarUser.rtcUID, !avatarUser.camera);
+        }
+    }, [avatarUser.camera]);
+
+    useUpdateEffect(() => {
+        if (userUUID === avatarUser.userUUID) {
+            rtcEngine.enableLocalAudio(avatarUser.mic);
+        } else {
+            rtcEngine.muteRemoteAudioStream(avatarUser.rtcUID, !avatarUser.mic);
+        }
+    }, [avatarUser.mic]);
+
+    useEffect(
+        () => () => {
+            if (userUUID === avatarUser.userUUID) {
+                rtcEngine.enableLocalVideo(false);
+                rtcEngine.enableLocalAudio(false);
+            } else {
+                rtcEngine.muteRemoteVideoStream(avatarUser.rtcUID, true);
+                rtcEngine.muteRemoteAudioStream(avatarUser.rtcUID, true);
+            }
+        },
+        [rtcEngine, userUUID, avatarUser.userUUID, avatarUser.rtcUID],
+    );
+
+    const canvas = (
+        <div
+            className="video-avatar-canvas"
+            ref={el => {
+                if (!el || elRef.current === el) {
+                    return;
+                }
+
+                elRef.current = el;
+
+                if (el) {
+                    if (userUUID === avatarUser.userUUID) {
+                        rtcEngine.setupLocalVideo(el);
+                        rtcEngine.enableLocalVideo(avatarUser.camera);
+                        rtcEngine.enableLocalAudio(avatarUser.mic);
+                    } else {
+                        rtcEngine.setupRemoteVideo(avatarUser.rtcUID, el);
+                        rtcEngine.muteRemoteVideoStream(avatarUser.rtcUID, !avatarUser.camera);
+                        rtcEngine.muteRemoteAudioStream(avatarUser.rtcUID, !avatarUser.mic);
+                    }
+                }
+            }}
+        />
+    );
+
+    return canvas;
+});

desktop/renderer-app/src/components/ExitRoomConfirm.tsx

@@ -1,10 +1,14 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { Button, Modal } from "antd";
 import { observer } from "mobx-react-lite";
+import {
+    CloseRoomConfirmModal,
+    ExitRoomConfirmModal,
+    StopClassConfirmModal,
+} from "flat-components";
 import { RoomStatus } from "../apiMiddleware/flatServer/constants";
-import { RouteNameType, usePushHistory } from "../utils/routes";
 import { useSafePromise } from "../utils/hooks/lifecycle";
 import { ipcAsyncByMainWindow, ipcReceive, ipcReceiveRemove } from "../utils/ipc";
+import { RouteNameType, usePushHistory } from "../utils/routes";
 import { errorTips } from "./Tips/ErrorTips";
 
 export enum ExitRoomConfirmType {
@@ -14,20 +18,25 @@ export enum ExitRoomConfirmType {
 
 export interface ExitRoomConfirmProps {
     isCreator: boolean;
-    roomStatus: RoomStatus;
-    hangClass: () => Promise<void>;
-    stopClass: () => Promise<void>;
-    // @TODO remove ref
-    confirmRef: { current: (confirmType: ExitRoomConfirmType) => void };
+    confirmType: ExitRoomConfirmType;
+    visible: boolean;
+    isReturnLoading: boolean;
+    isStopLoading: boolean;
+    onReturnMain: () => Promise<void>;
+    onStopClass: () => Promise<void>;
+    onCancel: () => void;
+    confirm: (confirmType: ExitRoomConfirmType) => void;
 }
 
-export const ExitRoomConfirm = observer<ExitRoomConfirmProps>(function ExitRoomConfirm({
-    isCreator,
+export function useExitRoomConfirmModal({
     roomStatus,
     hangClass,
     stopClass,
-    confirmRef,
-}) {
+}: {
+    roomStatus: RoomStatus;
+    hangClass: () => Promise<void>;
+    stopClass: () => Promise<void>;
+}): Omit<ExitRoomConfirmProps, "isCreator"> {
     const [confirmType, setConfirmType] = useState(ExitRoomConfirmType.ExitButton);
     const [visible, setVisible] = useState(false);
     const [isReturnLoading, setReturnLoading] = useState(false);
@@ -94,52 +103,48 @@ export const ExitRoomConfirm = observer<ExitRoomConfirmProps>(function ExitRoomC
         };
     }, [confirm]);
 
-    confirmRef.current = confirm;
-
-    return isCreator ? (
-        confirmType === ExitRoomConfirmType.ExitButton ? (
-            <Modal
-                visible={visible}
-                title="关闭选项"
-                onOk={onCancel}
-                onCancel={onCancel}
-                footer={[
-                    <Button key="Cancel" onClick={onCancel}>
-                        取消
-                    </Button>,
-                    <Button key="ReturnMain" loading={isReturnLoading} onClick={onReturnMain}>
-                        挂起房间
-                    </Button>,
-                    <Button
-                        key="StopClass"
-                        type="primary"
-                        loading={isStopLoading}
-                        onClick={onStopClass}
-                    >
-                        结束上课
-                    </Button>,
-                ]}
-            >
-                <p>课堂正在继续，你是暂时退出挂起房间还是结束上课？</p>
-            </Modal>
+    return {
+        confirmType,
+        visible,
+        isReturnLoading,
+        isStopLoading,
+        onReturnMain,
+        onStopClass,
+        onCancel,
+        confirm,
+    };
+}
+
+export const ExitRoomConfirm = observer<Omit<ExitRoomConfirmProps, "confirm">>(
+    function ExitRoomConfirm({
+        isCreator,
+        confirmType,
+        isReturnLoading,
+        isStopLoading,
+        onReturnMain,
+        onStopClass,
+        ...restProps
+    }) {
+        return isCreator ? (
+            confirmType === ExitRoomConfirmType.ExitButton ? (
+                <CloseRoomConfirmModal
+                    {...restProps}
+                    stopLoading={isStopLoading}
+                    hangLoading={isReturnLoading}
+                    onStop={onStopClass}
+                    onHang={onReturnMain}
+                />
+            ) : (
+                <StopClassConfirmModal
+                    {...restProps}
+                    loading={isStopLoading}
+                    onStop={onStopClass}
+                />
+            )
         ) : (
-            <Modal
-                visible={visible}
-                title="确定结束上课"
-                okButtonProps={{ loading: isStopLoading }}
-                onOk={onStopClass}
-                onCancel={onCancel}
-            >
-                <p>
-                    一旦结束上课，所有用户自动退出房间，并且自动结束课程和录制（如有），不能继续直播。
-                </p>
-            </Modal>
-        )
-    ) : (
-        <Modal visible={visible} title="确定退出房间" onOk={onReturnMain} onCancel={onCancel}>
-            <p>课堂正在继续，确定退出房间？</p>
-        </Modal>
-    );
-});
+            <ExitRoomConfirmModal {...restProps} onExit={onReturnMain} />
+        );
+    },
+);
 
 export default ExitRoomConfirm;