refactor(flat-pages): show avatar when no video (#1704)

packages/flat-pages/src/ReplayPage/ReplayPage.less

@@ -94,6 +94,11 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    visibility: hidden;
+
+    &.is-active {
+        visibility: visible;
+    }
 
     video {
         max-width: 100%;
@@ -102,6 +107,15 @@
     }
 }
 
+.replay-videos {
+    .video-avatar-video {
+        z-index: 1;
+    }
+    .video-avatar-media-ctrl {
+        display: none;
+    }
+}
+
 .replay-videos.is-horizontal {
     min-width: 100%;
     padding: 8px 4px;
@@ -111,14 +125,19 @@
     text-align: center;
     white-space: nowrap;
 
-    .replay-video {
+    .video-avatar {
         display: inline-block;
+        margin: 0 4px;
         flex-shrink: 0;
         width: max-content;
+    }
+
+    .replay-video {
+        display: inline-block;
+        width: 100%;
         height: 100%;
         border-radius: 6px;
         overflow: hidden;
-        margin: 0 4px;
     }
 }
 

packages/flat-pages/src/ReplayPage/ReplayVideo.tsx

@@ -1,23 +1,29 @@
 import { observer } from "mobx-react-lite";
 import React, { useEffect, useMemo, useRef } from "react";
 import { ClassroomReplayStore, User } from "@netless/flat-stores";
+import { VideoAvatar } from "flat-components";
+import { noop } from "lodash-es";
+import classNames from "classnames";
 
 export interface ReplayVideoProps {
     classroomReplayStore: ClassroomReplayStore;
     user?: User | null | undefined;
     video?: HTMLVideoElement | undefined;
+    small?: boolean;
 }
 
 export const ReplayVideo = observer<ReplayVideoProps>(function ReplayVideo({
     classroomReplayStore,
     user,
     video: realVideo,
+    small,
 }) {
     const ref = useRef<HTMLDivElement>(null);
     const video = useMemo(
         () => realVideo || (user && classroomReplayStore.userVideos.get(user.userUUID)),
         [classroomReplayStore.userVideos, user, realVideo],
     );
+    const camera = user && classroomReplayStore.userDevices.get(user.userUUID)?.camera;
 
     useEffect(() => {
         if (ref.current) {
@@ -30,5 +36,20 @@ export const ReplayVideo = observer<ReplayVideoProps>(function ReplayVideo({
         }
     }, [video]);
 
-    return <div ref={ref} className="replay-video" />;
+    return user ? (
+        <VideoAvatar
+            avatarUser={user}
+            isCreator={false}
+            small={small}
+            updateDeviceState={noop}
+            userUUID={user?.userUUID}
+        >
+            <div
+                ref={ref}
+                className={classNames("replay-video", {
+                    "is-active": camera,
+                })}
+            />
+        </VideoAvatar>
+    ) : null;
 });

packages/flat-pages/src/ReplayPage/index.tsx

@@ -38,12 +38,15 @@ export const ReplayPage = observer<ReplayPageProps>(function ReplayPage({ match
         <div className={classNames("replay-videos", { "is-horizontal": isSmallClass })}>
             <ReplayVideo
                 classroomReplayStore={classroomReplayStore}
+                small={isSmallClass}
                 user={classroomReplayStore.users.creator}
             />
             {classroomReplayStore.onStageUserUUIDs.map(uuid => (
                 <ReplayVideo
                     key={uuid}
                     classroomReplayStore={classroomReplayStore}
+                    small={isSmallClass}
+                    user={classroomReplayStore.users.cachedUsers.get(uuid)}
                     video={classroomReplayStore.userVideos.get(uuid)}
                 />
             ))}

packages/flat-pages/src/utils/use-classroom-replay-store.ts

@@ -1,3 +1,4 @@
+import { RoomType } from "@netless/flat-server-api";
 import { ClassroomReplayStore } from "@netless/flat-stores";
 import { errorTips, useSafePromise } from "flat-components";
 import { useEffect, useState } from "react";
@@ -7,6 +8,7 @@ import { usePushHistory } from "./routes";
 export interface UseClassroomReplayStoreConfig {
     roomUUID: string;
     ownerUUID: string;
+    roomType: RoomType;
 }
 
 export function useClassroomReplayStore(

packages/flat-stores/src/classroom-replay-store/index.ts

@@ -6,7 +6,7 @@ import { ChatMsg } from "flat-components";
 import { action, makeAutoObservable, observable, runInAction } from "mobx";
 import { SideEffectManager } from "side-effect-manager";
 
-import { OnStageUsersStorageState } from "../classroom-store";
+import { DeviceStateStorageState, OnStageUsersStorageState } from "../classroom-store";
 import { ClassroomReplayEventData } from "../classroom-store/event";
 import { globalStore } from "../global-store";
 import { RoomItem, RoomRecording, roomStore } from "../room-store";
@@ -34,6 +34,7 @@ export class ClassroomReplayStore {
     public readonly onStageUserUUIDs = observable.array<string>();
     public readonly recordings = observable.array<Recording>();
     public readonly userVideos = observable.map<string, HTMLVideoElement>();
+    public readonly userDevices = observable.map<string, DeviceStateStorageState[string]>();
 
     public syncPlayer: AtomPlayer | null = null;
 
@@ -236,6 +237,17 @@ export class ClassroomReplayStore {
             "scrollTop",
         );
 
+        const deviceStateStorage = fastboard.syncedStore.connectStorage<DeviceStateStorageState>(
+            "deviceState",
+            {},
+        );
+        this.sideEffect.push(
+            deviceStateStorage.on("stateChanged", () => {
+                this.userDevices.replace(deviceStateStorage.state);
+            }),
+            "deviceState",
+        );
+
         const players: AtomPlayer[] = [];
         players.push(new WhiteboardPlayer({ name: "whiteboard", player: fastboard.player }));
         const userVideos = new Map<string, HTMLVideoElement>();