fix(classroom): incorrectly destroy <AvatarCanvas> (#780)

netless-io · Jun 30, 2021 · 15d8f0f · 15d8f0f
1 parent 910c93f
commit 15d8f0f
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 23 deletions.
diff --git a/desktop/renderer-app/src/pages/SmallClassPage/index.tsx b/desktop/renderer-app/src/pages/SmallClassPage/index.tsx
@@ -182,9 +182,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
                         rtcEngine={classRoomStore.rtc.rtcEngine}
                         updateDeviceState={classRoomStore.updateDeviceState}
                     />
-                    {classRoomStore.users.speakingJoiners.map(renderAvatar)}
-                    {classRoomStore.users.handRaisingJoiners.map(renderAvatar)}
-                    {classRoomStore.users.otherJoiners.map(renderAvatar)}
+                    {classRoomStore.users.joiners.map(renderAvatar)}
                 </div>
             </div>
         );

diff --git a/web/flat-web/src/apiMiddleware/rtc/avatar.ts b/web/flat-web/src/apiMiddleware/rtc/avatar.ts
@@ -41,6 +41,7 @@ export class RtcAvatar {
         if (!this.isLocal) {
             this.setupExistingTracks();
             this.client.on("user-published", this.onUserPublished);
+            this.client.on("user-unpublished", this.onUserUnpublished);
         }
     }
 
@@ -66,10 +67,12 @@ export class RtcAvatar {
         const { audioTrack, videoTrack } = this;
         const tracks: ITrack[] = [];
         if (audioTrack) {
+            audioTrack.stop();
             this.audioTrack = undefined;
             tracks.push(audioTrack);
         }
         if (videoTrack) {
+            videoTrack.stop();
             this.videoTrack = undefined;
             tracks.push(videoTrack);
         }
@@ -94,16 +97,6 @@ export class RtcAvatar {
         mediaType: "video" | "audio",
     ): Promise<void> => {
         if (user.uid === this.avatarUser.rtcUID) {
-            if (mediaType === "audio") {
-                this.audioTrack?.stop();
-            } else {
-                this.videoTrack?.stop();
-            }
-            try {
-                await this.client.unsubscribe(user, mediaType);
-            } catch (error) {
-                console.info("unsubscribe failed", error);
-            }
             const track = await this.client.subscribe(user, mediaType);
             if (mediaType === "audio") {
                 this.audioTrack = track;
@@ -115,6 +108,30 @@ export class RtcAvatar {
         }
     };
 
+    private onUserUnpublished = async (
+        user: IAgoraRTCRemoteUser,
+        mediaType: "video" | "audio",
+    ): Promise<void> => {
+        if (user.uid === this.avatarUser.rtcUID) {
+            if (mediaType === "audio") {
+                if (this.audioTrack) {
+                    this.audioTrack.stop();
+                    this.audioTrack = undefined;
+                }
+            } else {
+                if (this.videoTrack) {
+                    this.videoTrack.stop();
+                    this.videoTrack = undefined;
+                }
+            }
+            try {
+                await this.client.unsubscribe(user, mediaType);
+            } catch (error) {
+                console.info("unsubscribe failed", error);
+            }
+        }
+    };
+
     public async setCamera(enable: boolean): Promise<void> {
         try {
             if (this.isLocal) {
@@ -125,9 +142,9 @@ export class RtcAvatar {
                     const videoTrack = await AgoraRTC.createCameraVideoTrack({
                         encoderConfig: { width: 288, height: 216 },
                     });
-                    this.videoTrack = videoTrack;
-                    this.element && videoTrack.play(this.element);
                     await this.client.publish(videoTrack);
+                    this.element && videoTrack.play(this.element);
+                    this.videoTrack = videoTrack;
                 }
             }
         } catch (error) {
@@ -143,10 +160,10 @@ export class RtcAvatar {
                     await audioTrack.setEnabled(enable);
                 } else if (enable) {
                     const audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
-                    this.audioTrack = audioTrack;
+                    await this.client.publish(audioTrack);
                     // NOTE: playing local audio track causes echo
                     // audioTrack.play();
-                    await this.client.publish(audioTrack);
+                    this.audioTrack = audioTrack;
                 }
             }
         } catch (error) {

diff --git a/web/flat-web/src/apiMiddleware/rtc/room.ts b/web/flat-web/src/apiMiddleware/rtc/room.ts
@@ -3,7 +3,9 @@ import { AGORA } from "../../constants/Process";
 import { globalStore } from "../../stores/GlobalStore";
 import { generateRTCToken } from "../flatServer/agora";
 
-AgoraRTC.setLogLevel(/* WARNING */ 2);
+if (import.meta.env.PROD) {
+    AgoraRTC.setLogLevel(/* WARNING */ 2);
+}
 
 export enum RtcChannelType {
     Communication = 0,

diff --git a/web/flat-web/src/pages/SmallClassPage/index.tsx b/web/flat-web/src/pages/SmallClassPage/index.tsx
@@ -176,9 +176,7 @@ export const SmallClassPage = observer<SmallClassPageProps>(function SmallClassP
                         rtc={classRoomStore.rtc}
                         updateDeviceState={classRoomStore.updateDeviceState}
                     />
-                    {classRoomStore.users.speakingJoiners.map(renderAvatar)}
-                    {classRoomStore.users.handRaisingJoiners.map(renderAvatar)}
-                    {classRoomStore.users.otherJoiners.map(renderAvatar)}
+                    {classRoomStore.users.joiners.map(renderAvatar)}
                 </div>
             </div>
         );

diff --git a/web/flat-web/src/stores/ClassRoomStore.ts b/web/flat-web/src/stores/ClassRoomStore.ts
@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { message } from "antd";
 import { action, autorun, makeAutoObservable, observable, runInAction } from "mobx";
 import { v4 as uuidv4 } from "uuid";
 import dateSub from "date-fns/sub";
@@ -35,7 +34,6 @@ import { WhiteboardStore } from "./WhiteboardStore";
 import { RouteNameType, usePushHistory } from "../utils/routes";
 import { useSafePromise } from "../utils/hooks/lifecycle";
 import { NetworkQuality } from "agora-rtc-sdk-ng";
-import { useTranslation } from "react-i18next";
 
 export type { User } from "./UserStore";