refactor(flat-components): show offline on-stage users in users panel (…

…#1821) * refactor(flat-components): show left but on stage ones in users panel * refactor: store offline users in user store * refactor
netless-io · Feb 2, 2023 · bd57e0f · bd57e0f
1 parent 1f2daff
commit bd57e0f
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 5 deletions.
diff --git a/packages/flat-components/src/components/UsersPanel/index.tsx b/packages/flat-components/src/components/UsersPanel/index.tsx
@@ -153,7 +153,14 @@ const Row = /* @__PURE__ */ observer(function Row({
                     <span className="users-panel-list-avatar">
                         <img src={user.avatar} />
                     </span>
-                    <span className="users-panel-list-name">{user.name}</span>
+                    {user.hasLeft ? (
+                        <div className="users-panel-list-name-wrapper">
+                            <span className="users-panel-list-name">{user.name}</span>
+                            <span className="users-panel-list-has-left">{t("offline")}</span>
+                        </div>
+                    ) : (
+                        <span className="users-panel-list-name">{user.name}</span>
+                    )}
                 </span>
             </td>
             <td>

diff --git a/packages/flat-components/src/components/UsersPanel/style.less b/packages/flat-components/src/components/UsersPanel/style.less
@@ -90,10 +90,20 @@
     gap: 8px;
 }
 
+.users-panel-list-name-wrapper {
+    display: flex;
+    flex-direction: column;
+}
+
 .users-panel-list-name {
     font-size: 14px;
 }
 
+.users-panel-list-has-left {
+    font-size: 12px;
+    color: var(--danger);
+}
+
 .users-panel-btn-group {
     white-space: nowrap;
 }

diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json
@@ -26,6 +26,7 @@
   "raise-hand": "Raise hand",
   "raised-hand": "(Hand raised)",
   "has-left": "(Has left)",
+  "offline": "offline",
   "say-something": "Say something...",
   "send": "send",
   "teacher": "Teacher",

diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json
@@ -26,6 +26,7 @@
   "end": "结束",
   "raised-hand": "(已举手)",
   "has-left": "（已离开）",
+  "offline": "已离线",
   "agree": "通过",
   "me": "(我)",
   "cancel-hand-raising": "取消举手",

diff --git a/packages/flat-pages/src/components/UsersButton.tsx b/packages/flat-pages/src/components/UsersButton.tsx
@@ -17,10 +17,15 @@ export const UsersButton = observer<UsersButtonProps>(function UsersButton({ cla
     const [open, setOpen] = useState(false);
 
     const users = useComputed(() => {
-        const { creator, speakingJoiners, handRaisingJoiners, otherJoiners } = classroom.users;
-        return creator
-            ? [...speakingJoiners, ...handRaisingJoiners, creator, ...otherJoiners]
-            : [...speakingJoiners, ...handRaisingJoiners, ...otherJoiners];
+        const { creator, speakingJoiners, handRaisingJoiners, otherJoiners, offlineJoiners } =
+            classroom.users;
+        return [
+            ...speakingJoiners,
+            ...handRaisingJoiners,
+            ...(creator ? [creator] : []),
+            ...offlineJoiners,
+            ...otherJoiners,
+        ];
     }).get();
 
     const getDeviceState = useCallback(

diff --git a/packages/flat-stores/src/classroom-store/index.ts b/packages/flat-stores/src/classroom-store/index.ts
@@ -492,6 +492,7 @@ export class ClassroomStore {
                     user.camera = false;
                 }
             });
+            this.users.updateOfflineJoiners(onStageUsers);
 
             if (!this.isCreator) {
                 const isJoinerOnStage = Boolean(onStageUsersStorage.state[this.userUUID]);

diff --git a/packages/flat-stores/src/user-store.ts b/packages/flat-stores/src/user-store.ts
@@ -40,6 +40,8 @@ export class UserStore {
     public handRaisingJoiners = observable.array<User>([]);
     /** the rest joiners */
     public otherJoiners = observable.array<User>([]);
+    /** joiners who have left */
+    public offlineJoiners = observable.array<User>([]);
 
     public get joiners(): User[] {
         return [...this.speakingJoiners, ...this.handRaisingJoiners, ...this.otherJoiners];
@@ -151,6 +153,16 @@ export class UserStore {
         unSortedUsers.forEach(this.sortUser);
     };
 
+    public updateOfflineJoiners(onStageUserUUIDs: string[]): void {
+        this.offlineJoiners.clear();
+        for (const userUUID of onStageUserUUIDs) {
+            const user = this.cachedUsers.get(userUUID);
+            if (user && user.hasLeft) {
+                this.offlineJoiners.push(user);
+            }
+        }
+    }
+
     /**
      * Fetch info of users who have left the room.
      * For RTM message title.