feat(cloud-storage): add cloud-storage modal to room (#487)

config/.env

@@ -4,11 +4,6 @@ NETLESS_APP_IDENTIFIER=
 AGORA_APP_ID=
 
 OSS_ACCESS_KEY_ID=
-OSS_ACCESS_KEY_SECRET=
-OSS_REGION=
-OSS_BUCKET=
-OSS_FOLDER=
-OSS_PREFIX=
 
 WECHAT_APP_ID=
 FLAT_SERVER_DOMAIN=

desktop/renderer-app/src/components/CloudStorageButton.less

@@ -0,0 +1,9 @@
+.cloud-storage-button-modal {
+    .ant-modal-body,
+    .ant-modal-footer {
+        padding: 0;
+    }
+    .ant-modal-content {
+        overflow: hidden;
+    }
+}

desktop/renderer-app/src/components/CloudStorageButton.tsx

@@ -0,0 +1,38 @@
+// TODO: remove this component when multi sub window is Done
+
+import { Modal } from "antd";
+import { observer } from "mobx-react-lite";
+import React, { useState } from "react";
+import { CloudStoragePage } from "../pages/CloudStoragePage";
+import { WhiteboardStore } from "../stores/WhiteboardStore";
+import { TopBarRightBtn } from "./TopBarRightBtn";
+import "./CloudStorageButton.less";
+
+interface CloudStorageButtonProps {
+    whiteboard: WhiteboardStore;
+}
+
+export const CloudStorageButton = observer<CloudStorageButtonProps>(function CloudStorageButton({
+    whiteboard,
+}) {
+    const [visible, setVisible] = useState(false);
+
+    return (
+        <>
+            <TopBarRightBtn
+                title="Open Cloud Storage"
+                icon="cloud-storage"
+                onClick={() => setVisible(true)}
+            />
+            <Modal
+                onCancel={() => setVisible(false)}
+                destroyOnClose
+                footer={[]}
+                visible={visible}
+                className="cloud-storage-button-modal"
+            >
+                <CloudStoragePage compact whiteboard={whiteboard} />
+            </Modal>
+        </>
+    );
+});

desktop/renderer-app/src/pages/BigClassPage/index.tsx

@@ -3,13 +3,12 @@ import classNames from "classnames";
 import { observer } from "mobx-react-lite";
 import React, { useEffect, useRef, useState } from "react";
 import { useParams } from "react-router";
-import { v4 } from "uuid";
 import { RoomPhase, ViewMode } from "white-web-sdk";
-import { FileConvertStep, RoomStatus, RoomType } from "../../apiMiddleware/flatServer/constants";
-import { convertFinish, listFiles } from "../../apiMiddleware/flatServer/storage";
+import { RoomStatus, RoomType } from "../../apiMiddleware/flatServer/constants";
 import { RtcChannelType } from "../../apiMiddleware/Rtc";
 import { ChatPanel } from "../../components/ChatPanel";
 import { RoomStatusStoppedModal } from "../../components/ClassRoom/RoomStatusStoppedModal";
+import { CloudStorageButton } from "../../components/CloudStorageButton";
 import { ExitRoomConfirm, ExitRoomConfirmType } from "../../components/ExitRoomConfirm";
 import InviteButton from "../../components/InviteButton";
 import { NetworkStatus } from "../../components/NetworkStatus";
@@ -32,7 +31,6 @@ import { usePowerSaveBlocker } from "../../utils/hooks/usePowerSaveBlocker";
 import { useWindowSize } from "../../utils/hooks/useWindowSize";
 import { useAutoRun, useReaction } from "../../utils/mobx";
 import { RouteNameType, RouteParams } from "../../utils/routes";
-import { getFileUrl, queryTask } from "../CloudStoragePage/utils";
 import { BigClassAvatar } from "./BigClassAvatar";
 import "./BigClassPage.less";
 
@@ -252,11 +250,7 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
                     onClick={whiteboardStore.toggleFileOpen}
                 /> */}
                 {/* TODO: open cloud-storage sub window */}
-                <TopBarRightBtn
-                    title="Open Cloud Storage"
-                    icon="cloud-storage"
-                    onClick={debugInsertRecentFileIntoWhiteboard}
-                />
+                <CloudStorageButton whiteboard={whiteboardStore} />
                 <InviteButton roomInfo={classRoomStore.roomInfo} />
                 {/* @TODO implement Options menu */}
                 {/* <TopBarRightBtn title="Options" icon="options" onClick={() => {}} /> */}
@@ -369,105 +363,6 @@ export const BigClassPage = observer<BigClassPageProps>(function BigClassPage()
         // @TODO remove ref
         exitRoomConfirmRef.current(ExitRoomConfirmType.StopClassButton);
     }
-
-    async function debugInsertRecentFileIntoWhiteboard(): Promise<void> {
-        const { files, totalUsage } = await listFiles({ page: 1 });
-        console.log("totalUsage:", totalUsage);
-        if (files.length === 0) {
-            console.log("no files");
-            return;
-        }
-        const file = files[files.length - 1];
-        const { fileName, fileUUID } = file;
-        const img = [".jpg", ".jpeg", ".png", ".webp"];
-        const src = getFileUrl(fileName, fileUUID);
-        console.log("insert", fileName, src);
-        if (img.some(ext => fileName.endsWith(ext))) {
-            const uuid = v4();
-            if (src) {
-                const image = new Image();
-                image.onload = () => {
-                    const { width, height } = image;
-                    whiteboardStore.room?.insertImage({
-                        uuid,
-                        centerX: 0,
-                        centerY: 0,
-                        width,
-                        height,
-                        locked: false,
-                    });
-                    whiteboardStore.room?.completeImageUpload(uuid, src);
-                };
-                image.src = src;
-            } else {
-                const { innerWidth: width, innerHeight: height } = window;
-                whiteboardStore.room?.insertImage({
-                    uuid: v4(),
-                    centerX: 0,
-                    centerY: 0,
-                    width,
-                    height,
-                    locked: false,
-                });
-                whiteboardStore.room?.completeImageUpload(uuid, src);
-            }
-        } else if (fileName.endsWith(".mp3")) {
-            // whiteboardStore.room?.insertPlugin("audio", {
-            //     originX: -240,
-            //     originY: -43,
-            //     width: 480,
-            //     height: 86,
-            //     attributes: {
-            //         pluginAudioUrl: src,
-            //     },
-            // });
-            console.log("not support mp3 yet");
-        } else if (fileName.endsWith(".mp4")) {
-            // whiteboardStore.room?.insertPlugin("video", {
-            //     originX: -240,
-            //     originY: -135,
-            //     width: 480,
-            //     height: 270,
-            //     attributes: {
-            //         pluginAudioUrl: src,
-            //     },
-            // });
-            console.log("not support mp4 yet");
-        } else if (fileName.endsWith(".pptx") || fileName.endsWith(".pdf")) {
-            const uuid = v4();
-            const { taskUUID, taskToken } = file;
-            const { status, progress, failedReason } = await queryTask(
-                taskUUID,
-                taskToken,
-                fileName.endsWith(".pptx"),
-            );
-            if (file.convertStep !== FileConvertStep.Done) {
-                if (status === "Finished" || status === "Fail") {
-                    await convertFinish({ fileUUID });
-                    if (status === "Fail") {
-                        message.error(`convert failed, reason: ${failedReason}`);
-                    }
-                } else {
-                    message.info("still converting..., wait and try again");
-                    return;
-                }
-            }
-            console.log(status, progress, failedReason);
-            if (status === "Finished" && progress) {
-                const room = whiteboardStore.room!;
-                const scenes = progress.convertedFileList.map(f => ({
-                    name: v4(),
-                    ppt: {
-                        width: f.width,
-                        height: f.height,
-                        src: f.conversionFileUrl,
-                    },
-                }));
-                room.putScenes(`/${taskUUID}/${uuid}`, scenes);
-                room.setScenePath(`/${taskUUID}/${uuid}/${scenes[0].name}`);
-            }
-        }
-    }
 });
 
 export default BigClassPage;

desktop/renderer-app/src/pages/CloudStoragePage/index.tsx

@@ -2,20 +2,24 @@ import { CloudStorageContainer } from "flat-components";
 import { observer } from "mobx-react-lite";
 import React, { useEffect, useState } from "react";
 import MainPageLayout from "../../components/MainPageLayout";
+import { WhiteboardStore } from "../../stores/WhiteboardStore";
 import { useWindowSize } from "../../utils/hooks/useWindowSize";
 import { CloudStorageStore } from "./store";
 import "./style.less";
 
 export interface CloudStoragePageProps {
     compact?: boolean;
+    /** only works in compact mode */
+    whiteboard?: WhiteboardStore;
 }
 
 export const CloudStoragePage = observer<CloudStoragePageProps>(function CloudStoragePage({
     compact,
+    whiteboard,
 }) {
     useWindowSize("Main");
 
-    const [store] = useState(() => new CloudStorageStore(compact ?? false));
+    const [store] = useState(() => new CloudStorageStore({ compact, whiteboard }));
 
     useEffect(() => {
         store.initialize();

desktop/renderer-app/src/pages/CloudStoragePage/store.tsx

@@ -16,10 +16,12 @@ import {
     removeFiles,
     renameFile,
 } from "../../apiMiddleware/flatServer/storage";
+import { WhiteboardStore } from "../../stores/WhiteboardStore";
 import {
     convertStepToType,
     download,
     getFileUrl,
+    insertFileIntoRoom,
     isFakeID,
     pickFiles,
     queryTask,
@@ -29,6 +31,8 @@ import {
 type FileMenusKey = "download" | "rename" | "delete";
 
 export class CloudStorageStore extends CloudStorageStoreBase {
+    whiteboard?: WhiteboardStore;
+
     pulling = new Map<string, number>();
     retryable = new Map<string, File>();
 
@@ -45,9 +49,10 @@ export class CloudStorageStore extends CloudStorageStoreBase {
         return menus;
     };
 
-    constructor(compact: boolean) {
+    constructor({ compact, whiteboard }: { compact?: boolean; whiteboard?: WhiteboardStore }) {
         super();
-        this.setCompact(compact);
+        this.whiteboard = whiteboard;
+        this.setCompact(Boolean(compact));
         makeObservable(this, {
             updateFiles: action,
             updateTotalUsage: action,
@@ -141,6 +146,21 @@ export class CloudStorageStore extends CloudStorageStoreBase {
     }
 
     onItemTitleClick = (fileUUID: string): void => {
+        if (this.compact) {
+            this.onItemTitleClickInRoom(fileUUID);
+        } else {
+            this.onItemTitleClickInPage(fileUUID);
+        }
+    };
+
+    onItemTitleClickInRoom(fileUUID: string): void {
+        const room = this.whiteboard?.room;
+        if (room) {
+            insertFileIntoRoom(fileUUID, room);
+        }
+    }
+
+    onItemTitleClickInPage(fileUUID: string): void {
         console.log("[cloud-storage] onItemTitleClick", fileUUID);
         const file = this.files.find(file => file.fileUUID === fileUUID);
         switch (file?.convert) {
@@ -156,7 +176,7 @@ export class CloudStorageStore extends CloudStorageStoreBase {
                 Modal.info({ content: "请到房间内查看课件" });
             }
         }
-    };
+    }
 
     onBatchDelete = (): void => {
         Modal.confirm({