feat(flat-web): add one to one class page to flat-web (#725)

web/flat-web/src/AppRoutes/route-pages.ts

@@ -23,17 +23,17 @@ export const routePages: RoutePages = {
         title: "Flat",
         component: () => import("../pages/HomePage"),
     },
+    [RouteNameType.BigClassPage]: {
+        title: "BigClassPage",
+        component: () => import("../pages/BigClassPage"),
+    },
     [RouteNameType.SmallClassPage]: {
         title: "SmallClassPage",
         component: () => import("../pages/SmallClassPage"),
     },
     [RouteNameType.OneToOnePage]: {
         title: "OneToOnePage",
-        component: () => Promise.resolve({ default: () => null }),
-    },
-    [RouteNameType.BigClassPage]: {
-        title: "BigClassPage",
-        component: () => import("../pages/BigClassPage"),
+        component: () => import("../pages/OneToOnePage"),
     },
     [RouteNameType.RoomDetailPage]: {
         title: "RoomDetailPage",

web/flat-web/src/pages/OneToOnePage/OneToOneAvatar.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { OneToOneVideoAvatar, OneToOneVideoAvatarProps } from "flat-components";
+import { AvatarCanvas } from "../../components/AvatarCanvas";
+import { User } from "../../stores/UserStore";
+import { RtcRoom } from "../../apiMiddleware/rtc/room";
+
+export interface OneToOneAvatarProps extends Omit<OneToOneVideoAvatarProps, "avatarUser"> {
+    rtc: RtcRoom;
+    avatarUser?: User | null;
+}
+
+export const OneToOneAvatar: React.FC<OneToOneAvatarProps> = ({
+    avatarUser,
+    rtc,
+    ...restProps
+}) => (
+    <OneToOneVideoAvatar {...restProps} avatarUser={avatarUser}>
+        {avatarUser && <AvatarCanvas {...restProps} avatarUser={avatarUser} rtcRoom={rtc} />}
+    </OneToOneVideoAvatar>
+);
+
+export default OneToOneAvatar;

web/flat-web/src/pages/OneToOnePage/OneToOnePage.less

@@ -0,0 +1,19 @@
+.one-to-one-realtime-box {
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.one-to-one-realtime-content {
+    flex: 1;
+    display: flex;
+}
+
+.one-to-one-rtc-avatar-container {
+    width: 288px;
+    height: 216px;
+    overflow: hidden;
+    display: flex;
+}