feat(service-providers): add agora cloud recording

desktop/renderer-app/package.json

@@ -24,6 +24,7 @@
     "@netless/flat-i18n": "workspace:*",
     "@netless/flat-pages": "workspace:*",
     "@netless/flat-server-api": "workspace:*",
+    "@netless/flat-service-provider-agora-cloud-recording": "workspace:*",
     "@netless/flat-service-provider-agora-rtc-electron": "workspace:*",
     "@netless/flat-service-provider-agora-rtm": "workspace:*",
     "@netless/flat-service-provider-fastboard": "workspace:*",

desktop/renderer-app/src/tasks/init-flat-services.ts

@@ -201,6 +201,13 @@ export function initFlatServices(): void {
         return service;
     });
 
+    flatServices.register("recording", async () => {
+        const { AgoraCloudRecording } = await import(
+            "@netless/flat-service-provider-agora-cloud-recording"
+        );
+        return new AgoraCloudRecording();
+    });
+
     flatServices.register(
         [
             "file-convert:doc",

packages/flat-components/src/components/ClassroomPage/TopBar/TopBarRightBtn/style.less

@@ -11,13 +11,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 0
-        (
-            (
-                    @topbar-right-btn-gap -
-                        (@topbar-right-btn-width - @topbar-icon-width)
-                ) / 2
-        );
+    margin: 0 ((@topbar-right-btn-gap - (@topbar-right-btn-width - @topbar-icon-width)) / 2);
     padding: 4px;
     cursor: pointer;
     background-color: white;
@@ -28,6 +22,11 @@
     &:hover {
         background-color: var(--blue-1);
     }
+
+    &:disabled {
+        cursor: wait;
+        opacity: 0.5;
+    }
 }
 
 .flat-color-scheme-dark {

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

@@ -4,7 +4,10 @@ import { RouteNameType, usePushHistory } from "../utils/routes";
 import { errorTips, useSafePromise } from "flat-components";
 import { FlatServices } from "@netless/flat-services";
 
-export type useClassRoomStoreConfig = Omit<ClassroomStoreConfig, "rtc" | "rtm" | "whiteboard">;
+export type useClassRoomStoreConfig = Omit<
+    ClassroomStoreConfig,
+    "rtc" | "rtm" | "whiteboard" | "recording"
+>;
 
 export function useClassroomStore(config: useClassRoomStoreConfig): ClassroomStore | undefined {
     const [classroomStore, setClassroomStore] = useState<ClassroomStore>();
@@ -29,14 +32,16 @@ export function useClassroomStore(config: useClassRoomStoreConfig): ClassroomSto
                 flatServices.requestService("videoChat"),
                 flatServices.requestService("textChat"),
                 flatServices.requestService("whiteboard"),
+                flatServices.requestService("recording"),
             ]),
-        ).then(([videoChat, textChat, whiteboard]) => {
-            if (!isUnmounted && videoChat && textChat && whiteboard) {
+        ).then(([videoChat, textChat, whiteboard, recording]) => {
+            if (!isUnmounted && videoChat && textChat && whiteboard && recording) {
                 classroomStore = new ClassroomStore({
                     ...config,
                     rtc: videoChat,
                     rtm: textChat,
                     whiteboard,
+                    recording,
                 });
                 setClassroomStore(classroomStore);
                 sp(classroomStore.init()).catch(e => {
@@ -56,6 +61,7 @@ export function useClassroomStore(config: useClassRoomStoreConfig): ClassroomSto
             flatServices.shutdownService("videoChat");
             flatServices.shutdownService("textChat");
             flatServices.shutdownService("whiteboard");
+            flatServices.shutdownService("recording");
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);

packages/flat-services/src/flat-services.ts

@@ -1,4 +1,5 @@
 import { IServiceFile, IServiceFileCatalog } from "./services/file";
+import { IServiceRecording } from "./services/recording";
 import { IServiceTextChat } from "./services/text-chat";
 import { IService } from "./services/typing";
 import { IServiceVideoChat } from "./services/video-chat";
@@ -9,6 +10,7 @@ export type FlatServicesCatalog = IServiceFileCatalog & {
     videoChat: IServiceVideoChat;
     textChat: IServiceTextChat;
     whiteboard: IServiceWhiteboard;
+    recording: IServiceRecording;
 };
 
 export type FlatServiceID = Extract<keyof FlatServicesCatalog, string>;

packages/flat-services/src/index.ts

@@ -3,6 +3,7 @@ export * from "./toaster";
 export * from "./services/video-chat";
 export * from "./services/text-chat";
 export * from "./services/whiteboard";
+export * from "./services/recording";
 export * from "./services/file";
 
 export * from "./providers/provider-file";

packages/flat-services/src/services/recording/README.md

@@ -0,0 +1,3 @@
+# recording
+
+Recording service is responsible for recording video chat and whiteboard.

packages/flat-services/src/services/recording/events.ts

@@ -0,0 +1,7 @@
+import type { Remitter } from "remitter";
+
+export interface IServiceRecordingEventData {}
+
+export type IServiceRecordingEventName = Extract<keyof IServiceRecordingEventData, string>;
+
+export type IServiceRecordingEvents = Remitter<IServiceRecordingEventData>;

service-providers/rtc-recording/flat-rtc-recording/src/index.ts → packages/flat-services/src/services/recording/index.ts

@@ -1,2 +1 @@
-export * from "./constants";
 export * from "./recording";

packages/flat-services/src/services/recording/recording.ts

@@ -0,0 +1,43 @@
+import type { RoomType } from "@netless/flat-server-api";
+import type { ReadonlyVal } from "value-enhancer";
+import type { IServiceRecordingEvents } from "./events";
+
+import { Remitter } from "remitter";
+import { SideEffectManager } from "side-effect-manager";
+import { IService } from "../typing";
+
+export interface IServiceRecording$Val {
+    readonly isRecording$: ReadonlyVal<boolean>;
+}
+
+export interface IServiceRecordingJoinRoomConfig {
+    roomID: string;
+    classroomType: RoomType;
+}
+
+export abstract class IServiceRecording implements IService {
+    public readonly sideEffect = new SideEffectManager();
+
+    public readonly events: IServiceRecordingEvents = new Remitter();
+
+    public abstract readonly $Val: IServiceRecording$Val;
+
+    public abstract readonly roomID: string | null;
+
+    public abstract readonly isRecording: boolean;
+
+    public abstract joinRoom(config: IServiceRecordingJoinRoomConfig): Promise<void>;
+
+    public abstract leaveRoom(): Promise<void>;
+
+    /** Use with try-catch. */
+    public abstract startRecording(): Promise<void>;
+
+    /** Use with try-catch. */
+    public abstract stopRecording(): Promise<void>;
+
+    public async destroy(): Promise<void> {
+        this.events.destroy();
+        this.sideEffect.flushAll();
+    }
+}

packages/flat-services/src/services/whiteboard/whiteboard.ts

@@ -38,6 +38,8 @@ export abstract class IServiceWhiteboard {
 
     public abstract joinRoom(config: IServiceWhiteboardJoinRoomConfig): Promise<void>;
 
+    public abstract leaveRoom(): Promise<void>;
+
     public abstract render(el: HTMLElement): void;
 
     public abstract setTheme(theme: "light" | "dark"): void;

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

@@ -20,6 +20,7 @@ import { globalStore } from "../global-store";
 import { ClassModeType, RoomStatusLoadingType } from "./constants";
 import { ChatStore } from "./chat-store";
 import {
+    IServiceRecording,
     IServiceTextChat,
     IServiceVideoChat,
     IServiceVideoChatMode,
@@ -37,6 +38,7 @@ export interface ClassroomStoreConfig {
     rtc: IServiceVideoChat;
     rtm: IServiceTextChat;
     whiteboard: IServiceWhiteboard;
+    recording: IServiceRecording;
 }
 
 export type DeviceStateStorageState = Record<string, { camera: boolean; mic: boolean }>;
@@ -94,6 +96,7 @@ export class ClassroomStore {
     public readonly rtm: IServiceTextChat;
     public readonly chatStore: ChatStore;
     public readonly whiteboardStore: WhiteboardStore;
+    public readonly recording: IServiceRecording;
 
     public constructor(config: ClassroomStoreConfig) {
         if (!globalStore.userUUID) {
@@ -108,6 +111,8 @@ export class ClassroomStore {
         this.classMode = ClassModeType.Lecture;
         this.rtc = config.rtc;
         this.rtm = config.rtm;
+        this.recording = config.recording;
+
         this.chatStore = new ChatStore({
             roomUUID: this.roomUUID,
             ownerUUID: this.ownerUUID,
@@ -139,6 +144,14 @@ export class ClassroomStore {
             onStageUsersStorage: false,
         });
 
+        this.sideEffect.addDisposer(
+            this.recording.$Val.isRecording$.subscribe(isRecording => {
+                runInAction(() => {
+                    this.isRecording = isRecording;
+                });
+            }),
+        );
+
         this.sideEffect.addDisposer(
             reaction(
                 () => this.isRecording,
@@ -436,6 +449,13 @@ export class ClassroomStore {
                 );
             }
         }
+
+        if (this.isCreator) {
+            await this.recording.joinRoom({
+                roomID: this.roomUUID,
+                classroomType: this.roomType,
+            });
+        }
     }
 
     public async destroy(): Promise<void> {
@@ -669,11 +689,11 @@ export class ClassroomStore {
     };
 
     private async startRecording(): Promise<void> {
-        // @TODO add cloud recording
+        await this.recording.startRecording();
     }
 
     private async stopRecording(): Promise<void> {
-        // @TODO add cloud recording
+        await this.recording.stopRecording();
     }
 
     private async initRTC(): Promise<void> {