From 19a3fbb5b363c4bc0fe759167b75d02d5a40c40d Mon Sep 17 00:00:00 2001
From: Cheerego7 <48879533+Cheerego7@users.noreply.github.com>
Date: Mon, 26 Jul 2021 14:07:37 +0800
Subject: [PATCH] feat(preview): add resource preview to flat-web. (#812)

---
 web/flat-web/package.json                     |  2 +-
 web/flat-web/src/AppRoutes/route-pages.ts     |  4 +
 .../src/pages/CloudStoragePage/store.tsx      | 18 +++-
 .../ResourcePreviewPage/DynamicPreview.less   | 40 ++++++++
 .../ResourcePreviewPage/DynamicPreview.tsx    | 94 +++++++++++++++++++
 .../ResourcePreviewPage/MediaPreview.less     | 23 +++++
 .../ResourcePreviewPage/MediaPreview.tsx      | 42 +++++++++
 .../ResourcePreviewPage/StaticPreview.less    | 11 +++
 .../ResourcePreviewPage/StaticPreview.tsx     | 61 ++++++++++++
 .../ResourcePreviewPage/image/next-step.svg   | 13 +++
 .../image/previous-step.svg                   | 13 +++
 .../src/pages/ResourcePreviewPage/index.tsx   | 50 ++++++++++
 .../src/pages/ResourcePreviewPage/utils.ts    |  3 +
 web/flat-web/src/route-config.ts              |  4 +
 yarn.lock                                     | 27 ++++++
 15 files changed, 400 insertions(+), 5 deletions(-)
 create mode 100644 web/flat-web/src/pages/ResourcePreviewPage/DynamicPreview.less
 create mode 100644 web/flat-web/src/pages/ResourcePreviewPage/DynamicPreview.tsx
 create mode 100644 web/flat-web/src/pages/ResourcePreviewPage/MediaPreview.less
 create mode 100644 web/flat-web/src/pages/ResourcePreviewPage/MediaPreview.tsx
 create mode 100644 web/flat-web/src/pages/ResourcePreviewPage/StaticPreview.less
 create mode 100644 web/flat-web/src/pages/ResourcePreviewPage/StaticPreview.tsx
 create mode 100644 web/flat-web/src/pages/ResourcePreviewPage/image/next-step.svg
 create mode 100644 web/flat-web/src/pages/ResourcePreviewPage/image/previous-step.svg
 create mode 100644 web/flat-web/src/pages/ResourcePreviewPage/index.tsx
 create mode 100644 web/flat-web/src/pages/ResourcePreviewPage/utils.ts

diff --git a/web/flat-web/package.json b/web/flat-web/package.json
index 46ed9904488..ecf427d63d9 100644
--- a/web/flat-web/package.json
+++ b/web/flat-web/package.json
@@ -67,7 +67,7 @@
     "react-virtualized": "^9.22.3",
     "uuid": "^8.3.2",
     "video.js": "7.10.2",
-    "white-web-sdk": "2.13.11"
+    "white-web-sdk": "2.13.12"
   },
   "scripts": {
     "postinstall": "esbuild-dev ./scripts/post-install.ts",
diff --git a/web/flat-web/src/AppRoutes/route-pages.ts b/web/flat-web/src/AppRoutes/route-pages.ts
index 456091e72d7..6b3b12dd229 100644
--- a/web/flat-web/src/AppRoutes/route-pages.ts
+++ b/web/flat-web/src/AppRoutes/route-pages.ts
@@ -95,4 +95,8 @@ export const routePages: RoutePages = {
         title: "JoinPage",
         component: () => import("../pages/JoinPage"),
     },
+    [RouteNameType.ResourcePreviewPage]: {
+        title: "ResourcePreviewPage",
+        component: () => import("../pages/ResourcePreviewPage"),
+    },
 };
diff --git a/web/flat-web/src/pages/CloudStoragePage/store.tsx b/web/flat-web/src/pages/CloudStoragePage/store.tsx
index 0e256e77257..b2f817a02c7 100644
--- a/web/flat-web/src/pages/CloudStoragePage/store.tsx
+++ b/web/flat-web/src/pages/CloudStoragePage/store.tsx
@@ -26,6 +26,7 @@ import {
     renameFile,
 } from "../../apiMiddleware/flatServer/storage";
 import { errorTips } from "../../components/Tips/ErrorTips";
+import { INVITE_BASEURL } from "../../constants/Process";
 import { getUploadTaskManager } from "../../utils/UploadTaskManager";
 import { UploadStatusType, UploadTask } from "../../utils/UploadTaskManager/UploadTask";
 
@@ -357,6 +358,18 @@ export class CloudStorageStore extends CloudStorageStoreBase {
     }
 
     private previewCourseware(file: CloudStorageFile): void {
+        const { fileURL, taskToken, taskUUID } = file;
+
+        const convertFileTypeList = [".pptx", ".ppt", ".pdf", ".doc", ".docx"];
+
+        const isConvertFileType = convertFileTypeList.some(type => fileURL.includes(type));
+
+        const encodeFileURL = encodeURIComponent(fileURL);
+
+        const resourcePreviewURL = isConvertFileType
+            ? `${INVITE_BASEURL}/preview/${encodeFileURL}/${taskToken}/${taskUUID}/`
+            : `${INVITE_BASEURL}/preview/${encodeFileURL}/`;
+
         switch (file.convert) {
             case "converting": {
                 Modal.info({ content: this.i18n.t("please-wait-while-the-lesson-is-transcoded") });
@@ -367,10 +380,7 @@ export class CloudStorageStore extends CloudStorageStoreBase {
                 return;
             }
             default: {
-                // @TODO preview courseware
-                Modal.info({
-                    content: this.i18n.t("please-go-to-the-room-to-view-the-courseware"),
-                });
+                window.open(resourcePreviewURL, "_blank");
             }
         }
     }
diff --git a/web/flat-web/src/pages/ResourcePreviewPage/DynamicPreview.less b/web/flat-web/src/pages/ResourcePreviewPage/DynamicPreview.less
new file mode 100644
index 00000000000..73c25f0737a
--- /dev/null
+++ b/web/flat-web/src/pages/ResourcePreviewPage/DynamicPreview.less
@@ -0,0 +1,40 @@
+.dynamic-preview-container {
+    background-color: #eee;
+}
+
+.ppt-preview-container {
+    .ppt-preview-main-container {
+        padding-top: 25px;
+        border: none;
+    }
+}
+
+.ppt-preview-controls {
+    display: none;
+}
+
+.dynamic-preview-pagination-previous {
+    cursor: pointer;
+}
+
+.dynamic-preview-pagination-next {
+    cursor: pointer;
+}
+
+.dynamic-preview-pagination-container {
+    position: absolute;
+    bottom: 24px;
+    z-index: 2;
+    left: 48%;
+    width: 140px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 8px;
+}
+
+.dynamic-preview-pagination-middle {
+    color: #fff;
+}
diff --git a/web/flat-web/src/pages/ResourcePreviewPage/DynamicPreview.tsx b/web/flat-web/src/pages/ResourcePreviewPage/DynamicPreview.tsx
new file mode 100644
index 00000000000..70e9cf8aa4a
--- /dev/null
+++ b/web/flat-web/src/pages/ResourcePreviewPage/DynamicPreview.tsx
@@ -0,0 +1,94 @@
+import "./DynamicPreview.less";
+import previousStepSVG from "./image/previous-step.svg";
+import nextStepSVG from "./image/next-step.svg";
+
+import { observer } from "mobx-react-lite";
+import React, { useEffect, useRef, useState } from "react";
+import { ConversionResponse, previewPPT } from "white-web-sdk";
+import { queryConvertingTaskStatus } from "../../apiMiddleware/courseware-converting";
+import { useSafePromise } from "../../utils/hooks/lifecycle";
+import { EventEmitter } from "eventemitter3";
+
+export interface DynamicPreviewProps {
+    taskUUID: string;
+    taskToken: string;
+}
+
+export const DynamicPreview = observer<DynamicPreviewProps>(function PPTPreview({
+    taskUUID,
+    taskToken,
+}) {
+    const DynamicPreviewRef = useRef<HTMLDivElement>(null);
+    const sp = useSafePromise();
+
+    const [currentPage, setCurrentPage] = useState(1);
+    const [totalPage, setTotalPage] = useState(0);
+    const [eventEmit] = useState(() => new EventEmitter());
+
+    useEffect(() => {
+        async function getDynamicResource(): Promise<void> {
+            const convertState = await sp(
+                queryConvertingTaskStatus({
+                    taskUUID,
+                    taskToken,
+                    dynamic: true,
+                }),
+            );
+
+            if (DynamicPreviewRef.current) {
+                previewPPT(
+                    convertState as ConversionResponse,
+                    DynamicPreviewRef.current,
+                    {},
+                    true,
+                    {},
+                    undefined,
+                    undefined,
+                    eventEmit,
+                );
+            }
+        }
+
+        getDynamicResource().catch(console.warn);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    useEffect(() => {
+        eventEmit.on("update", data => {
+            setCurrentPage(data.index);
+        });
+        eventEmit.once("update", data => {
+            setTotalPage(data.total);
+        });
+        return () => {
+            eventEmit.removeAllListeners();
+        };
+    }, [eventEmit]);
+
+    return (
+        <div className="dynamic-preview-container">
+            <div ref={DynamicPreviewRef} className="dynamic-preview-inner" />
+            <div className="dynamic-preview-pagination-container">
+                <div
+                    className="dynamic-preview-pagination-previous"
+                    onClick={() => {
+                        eventEmit.emit("preStep");
+                    }}
+                >
+                    <img src={previousStepSVG} alt="previous step" />
+                </div>
+                <div className="dynamic-preview-pagination-middle">
+                    {currentPage} / {totalPage}
+                </div>
+                <div
+                    className="dynamic-preview-pagination-next"
+                    onClick={() => {
+                        eventEmit.emit("nextStep");
+                    }}
+                >
+                    <img src={nextStepSVG} alt="next step" />
+                </div>
+            </div>
+        </div>
+    );
+});
diff --git a/web/flat-web/src/pages/ResourcePreviewPage/MediaPreview.less b/web/flat-web/src/pages/ResourcePreviewPage/MediaPreview.less
new file mode 100644
index 00000000000..93549e7feb9
--- /dev/null
+++ b/web/flat-web/src/pages/ResourcePreviewPage/MediaPreview.less
@@ -0,0 +1,23 @@
+.media-preview-container {
+    height: 100vh;
+    background-color: #000000;
+
+    video {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+}
+
+.audio-container {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.img-container {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+}
diff --git a/web/flat-web/src/pages/ResourcePreviewPage/MediaPreview.tsx b/web/flat-web/src/pages/ResourcePreviewPage/MediaPreview.tsx
new file mode 100644
index 00000000000..9aaf71e2c86
--- /dev/null
+++ b/web/flat-web/src/pages/ResourcePreviewPage/MediaPreview.tsx
@@ -0,0 +1,42 @@
+import "./MediaPreview.less";
+
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { getFileSuffix } from "./utils";
+
+export interface MediaPreviewProps {
+    fileURL: string;
+}
+
+export const MediaPreview = observer<MediaPreviewProps>(function PPTPreview({ fileURL }) {
+    const mediaFileURL = decodeURIComponent(fileURL);
+
+    const mediaFileSuffix = getFileSuffix(mediaFileURL);
+
+    return <div className="media-preview-container">{renderMediaPreview()}</div>;
+
+    function renderMediaPreview(): React.ReactElement {
+        switch (mediaFileSuffix) {
+            case ".mp3": {
+                return (
+                    <div className="audio-container">
+                        <audio controls src={mediaFileURL} />
+                    </div>
+                );
+            }
+            case ".jpg":
+            case ".jpeg":
+            case ".png": {
+                return (
+                    <div className="img-container">
+                        <img src={mediaFileURL} alt="img resource" />
+                    </div>
+                );
+            }
+
+            default: {
+                return <video controls src={mediaFileURL} />;
+            }
+        }
+    }
+});
diff --git a/web/flat-web/src/pages/ResourcePreviewPage/StaticPreview.less b/web/flat-web/src/pages/ResourcePreviewPage/StaticPreview.less
new file mode 100644
index 00000000000..321d4d61865
--- /dev/null
+++ b/web/flat-web/src/pages/ResourcePreviewPage/StaticPreview.less
@@ -0,0 +1,11 @@
+.static-preview-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.static-preview-item {
+    display: block;
+    border-bottom: 2px #f3f3f3 dashed;
+    padding-bottom: 10px;
+}
diff --git a/web/flat-web/src/pages/ResourcePreviewPage/StaticPreview.tsx b/web/flat-web/src/pages/ResourcePreviewPage/StaticPreview.tsx
new file mode 100644
index 00000000000..cb4b3856731
--- /dev/null
+++ b/web/flat-web/src/pages/ResourcePreviewPage/StaticPreview.tsx
@@ -0,0 +1,61 @@
+import "./StaticPreview.less";
+
+import { observer } from "mobx-react-lite";
+import React, { useEffect, useState } from "react";
+import { queryConvertingTaskStatus } from "../../apiMiddleware/courseware-converting";
+import { useSafePromise } from "../../utils/hooks/lifecycle";
+
+export interface StaticPreviewProps {
+    taskUUID: string;
+    taskToken: string;
+}
+
+type ConvertedFileList =
+    | {
+          width: number;
+          height: number;
+          conversionFileUrl: string;
+          preview?: string | undefined;
+      }[]
+    | undefined;
+
+export const StaticPreview = observer<StaticPreviewProps>(function DocumentPreview({
+    taskUUID,
+    taskToken,
+}) {
+    const [convertList, setConvertList] = useState<ConvertedFileList>([]);
+    const sp = useSafePromise();
+
+    useEffect(() => {
+        async function getStaticResource(): Promise<void> {
+            const convertResult = await sp(
+                queryConvertingTaskStatus({
+                    taskUUID,
+                    taskToken,
+                    dynamic: false,
+                }),
+            );
+
+            setConvertList(convertResult.progress?.convertedFileList);
+        }
+
+        getStaticResource().catch(console.warn);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return (
+        <div className="static-preview-container fancy-scrollbar">
+            <div className="static-preview-list">
+                {convertList?.map(file => {
+                    return (
+                        <img
+                            className="static-preview-item"
+                            src={file.conversionFileUrl}
+                            key={file.conversionFileUrl}
+                        ></img>
+                    );
+                })}
+            </div>
+        </div>
+    );
+});
diff --git a/web/flat-web/src/pages/ResourcePreviewPage/image/next-step.svg b/web/flat-web/src/pages/ResourcePreviewPage/image/next-step.svg
new file mode 100644
index 00000000000..c64450c3398
--- /dev/null
+++ b/web/flat-web/src/pages/ResourcePreviewPage/image/next-step.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>矩形备份 19</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="round">
+        <g id="云盘ppt预览-浏览器新标签页" transform="translate(-739.000000, -619.000000)" stroke="#FFFFFF" stroke-width="1.5">
+            <g id="编组-11备份" transform="translate(621.000000, 615.000000)">
+                <g id="编组-7" transform="translate(136.000000, 22.000000) scale(-1, 1) translate(-136.000000, -22.000000) translate(118.000000, 4.000000)">
+                    <polyline id="路径-11备份-5" transform="translate(18.000000, 18.000000) rotate(-360.000000) translate(-18.000000, -18.000000) " points="21 24 18 21 15 18 18 15 21 12"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/web/flat-web/src/pages/ResourcePreviewPage/image/previous-step.svg b/web/flat-web/src/pages/ResourcePreviewPage/image/previous-step.svg
new file mode 100644
index 00000000000..c4d50b6d074
--- /dev/null
+++ b/web/flat-web/src/pages/ResourcePreviewPage/image/previous-step.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>矩形备份 19</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="round">
+        <g id="云盘ppt预览-浏览器新标签页" transform="translate(-665.000000, -619.000000)" stroke="#FFFFFF" stroke-width="1.5">
+            <g id="编组-11备份" transform="translate(621.000000, 615.000000)">
+                <g id="编组-4" transform="translate(44.000000, 4.000000)">
+                    <polyline id="路径-11备份-5" transform="translate(18.000000, 18.000000) rotate(-360.000000) translate(-18.000000, -18.000000) " points="21 24 18 21 15 18 18 15 21 12"></polyline>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/web/flat-web/src/pages/ResourcePreviewPage/index.tsx b/web/flat-web/src/pages/ResourcePreviewPage/index.tsx
new file mode 100644
index 00000000000..90a30bc7a87
--- /dev/null
+++ b/web/flat-web/src/pages/ResourcePreviewPage/index.tsx
@@ -0,0 +1,50 @@
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { useParams } from "react-router";
+import { RouteNameType, RouteParams } from "../../utils/routes";
+import { DynamicPreview } from "./DynamicPreview";
+import { MediaPreview } from "./MediaPreview";
+import { StaticPreview } from "./StaticPreview";
+import { ErrorPage } from "flat-components";
+import { getFileSuffix } from "./utils";
+
+export interface ResourcePreviewPagePageProps {}
+
+export const ResourcePreviewPage = observer<ResourcePreviewPagePageProps>(
+    function ResourcePreviewPage() {
+        const { fileURL, taskToken, taskUUID } =
+            useParams<RouteParams<RouteNameType.ResourcePreviewPage>>();
+
+        const decodeFileName = decodeURIComponent(fileURL);
+
+        return <div className="cloud-storage-preview-container">{renderPreviewComponent()}</div>;
+
+        function renderPreviewComponent(): React.ReactElement {
+            const fileSuffix = getFileSuffix(decodeFileName);
+
+            switch (fileSuffix) {
+                case ".pptx": {
+                    if (taskUUID && taskToken) {
+                        return <DynamicPreview taskUUID={taskUUID} taskToken={taskToken} />;
+                    }
+                    return <ErrorPage />;
+                }
+                case ".ppt":
+                case ".pdf":
+                case ".doc":
+                case ".docx": {
+                    if (taskUUID && taskToken) {
+                        return <StaticPreview taskUUID={taskUUID} taskToken={taskToken} />;
+                    }
+                    return <ErrorPage />;
+                }
+
+                default: {
+                    return <MediaPreview fileURL={fileURL} />;
+                }
+            }
+        }
+    },
+);
+
+export default ResourcePreviewPage;
diff --git a/web/flat-web/src/pages/ResourcePreviewPage/utils.ts b/web/flat-web/src/pages/ResourcePreviewPage/utils.ts
new file mode 100644
index 00000000000..fa6b841fac3
--- /dev/null
+++ b/web/flat-web/src/pages/ResourcePreviewPage/utils.ts
@@ -0,0 +1,3 @@
+export function getFileSuffix(path: string): string {
+    return (/\.[a-z1-9]+$/i.exec(path) || [""])[0].toLowerCase();
+}
diff --git a/web/flat-web/src/route-config.ts b/web/flat-web/src/route-config.ts
index fcafb3532c0..d844c976e01 100644
--- a/web/flat-web/src/route-config.ts
+++ b/web/flat-web/src/route-config.ts
@@ -16,6 +16,7 @@ export enum RouteNameType {
     AboutPage = "AboutPage",
     CloudStoragePage = "CloudStoragePage",
     JoinPage = "JoinPage",
+    ResourcePreviewPage = "ResourcePreviewPage",
 }
 
 export const routeConfig = {
@@ -82,6 +83,9 @@ export const routeConfig = {
     [RouteNameType.JoinPage]: {
         path: "/join/:roomUUID/",
     },
+    [RouteNameType.ResourcePreviewPage]: {
+        path: "/preview/:fileURL/:taskToken?/:taskUUID?/",
+    },
 } as const;
 
 export type ExtraRouteConfig = {};
diff --git a/yarn.lock b/yarn.lock
index a9d66df8463..e74ac5f70fa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18511,6 +18511,33 @@ white-web-sdk@2.13.11:
     uuid "^7.0.3"
     xml-js "^1.6.11"
 
+white-web-sdk@2.13.12:
+  version "2.13.12"
+  resolved "https://registry.npmjs.org/white-web-sdk/-/white-web-sdk-2.13.12.tgz#c247d5896f2f502ef51e72d2d13a8764959a7ee8"
+  integrity sha512-IeZCeldJWftR+81+uc/49pItEHEWm7iLxqTWJfAJZ3FvmMcvDmEFB3+kaZH0I3NLlb7CXFXtfre41LLSFs59yw==
+  dependencies:
+    "@netless/canvas-polyfill" "^0.0.4"
+    atob "^2.1.0"
+    bezier-js "^2.4.4"
+    color "^3.1.0"
+    detect-it "^3.0.5"
+    es6-symbol "^3.1.1"
+    eventemitter3 "^4.0.7"
+    mathjs "6.6.5"
+    mobx "^4.15.7"
+    mobx-react "^5.4.4"
+    numeric "^1.2.6"
+    protobufjs "^6.11.2"
+    query-string "5"
+    react "^16.8.0"
+    react-dom "^16.8.0"
+    resize-observer-polyfill "^1.5.1"
+    spark-md5 "^3.0.0"
+    textarea-caret-ts "^4.1.0"
+    url-parse "^1.4.0"
+    uuid "^7.0.3"
+    xml-js "^1.6.11"
+
 wide-align@^1.1.0:
   version "1.1.3"
   resolved "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz#ae074e6bdc0c14a431e804e624549c633b000457"