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

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>

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;
 }

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",

packages/flat-i18n/locales/zh-CN.json

@@ -26,6 +26,7 @@
   "end": "结束",
   "raised-hand": "(已举手)",
   "has-left": "（已离开）",
+  "offline": "已离线",
   "agree": "通过",
   "me": "(我)",
   "cancel-hand-raising": "取消举手",

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(

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]);

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.