@voplus/morpho-document 1.4.96 → 1.4.97

package/es/components/FileViewer/FileViewer.d.ts

@@ -1,18 +1,18 @@
-import React from "react";
-export interface IFileViewerProps {
-    id: string;
-    style?: React.CSSProperties;
-    className?: string;
-}
-declare const FileViewer: {
-    (props: IFileViewerProps): JSX.Element;
-    PDF: (props: {
-        id: string;
-        viewerProps?: Partial<import("../../controls/PDFViewer/props").PDFViewerProps> | undefined;
-        download?: (() => Promise<Blob>) | undefined;
-    }) => JSX.Element;
-    Image: (props: {
-        id: string;
-    }) => JSX.Element;
-};
-export default FileViewer;
+import React from "react";
+export interface IFileViewerProps {
+    id: string;
+    style?: React.CSSProperties;
+    className?: string;
+}
+declare const FileViewer: {
+    (props: IFileViewerProps): JSX.Element;
+    PDF: (props: {
+        id: string;
+        viewerProps?: Partial<import("../../controls/PDFViewer/props").PDFViewerProps> | undefined;
+        download?: (() => Promise<Blob>) | undefined;
+    }) => JSX.Element;
+    Image: (props: {
+        id: string;
+    }) => JSX.Element;
+};
+export default FileViewer;

package/es/components/FileViewer/FileViewer.js

@@ -1,38 +1,38 @@
-import ImageViewer from "./ImageViewer";
-import PDFFileViewer from "./PDF";
-import React from "react";
-import VideoViewer from "./VideoViewer";
-import WOPIViewer from "./WOPIViewer";
-import { observe } from "@voplus/morpho-ui";
-import { useFile } from "@voplus/morpho-document-core";
-const FileViewer = (props) => {
-    const file = useFile(props.id);
-    const styles = Object.assign({}, props.style);
-    const renderViewer = () => {
-        if (file.mimetype.startsWith("video/")) {
-            styles["display"] = "flex";
-            return React.createElement(VideoViewer, { id: file.id, mime: file.mimetype });
-        }
-        else if (file.mimetype === "application/pdf") {
-            return React.createElement(PDFFileViewer, { id: file.id });
-        }
-        else if (file.mimetype.startsWith("image/")) {
-            styles["overflowY"] = "auto";
-            return React.createElement(ImageViewer, { id: file.id });
-        }
-        else if (/^application\/(msword|(vnd\.(ms-|openxmlformats-).*))$/gim.test(file.mimetype)) {
-            return React.createElement(WOPIViewer, { id: file.id });
-        }
-        else if (file.name.includes(".wopitest")) {
-            return React.createElement(WOPIViewer, { id: file.id });
-        }
-        else {
-            return "File type not supported! :(";
-        }
-    };
-    return observe(() => (React.createElement(React.Fragment, null, file.loaded && (React.createElement("div", { className: props.className, style: styles }, renderViewer())))));
-};
-FileViewer.PDF = PDFFileViewer;
-FileViewer.Image = ImageViewer;
-export default FileViewer;
+import ImageViewer from "./ImageViewer";
+import PDFFileViewer from "./PDF";
+import React from "react";
+import VideoViewer from "./VideoViewer";
+import WOPIViewer from "./WOPIViewer";
+import { observe } from "@voplus/morpho-ui";
+import { useFile } from "@voplus/morpho-document-core";
+const FileViewer = (props) => {
+    const file = useFile(props.id);
+    const styles = Object.assign({}, props.style);
+    const renderViewer = () => {
+        if (file.mimetype.startsWith("video/")) {
+            styles["display"] = "flex";
+            return React.createElement(VideoViewer, { id: file.id, mime: file.mimetype });
+        }
+        else if (file.mimetype === "application/pdf") {
+            return React.createElement(PDFFileViewer, { id: file.id });
+        }
+        else if (file.mimetype.startsWith("image/")) {
+            styles["overflowY"] = "auto";
+            return React.createElement(ImageViewer, { id: file.id });
+        }
+        else if (/^application\/(msword|(vnd\.(ms-|openxmlformats-).*))$/gim.test(file.mimetype)) {
+            return React.createElement(WOPIViewer, { id: file.id });
+        }
+        else if (file.name.includes(".wopitest")) {
+            return React.createElement(WOPIViewer, { id: file.id });
+        }
+        else {
+            return "File type not supported! :(";
+        }
+    };
+    return observe(() => (React.createElement(React.Fragment, null, file.loaded && (React.createElement("div", { className: props.className, style: styles }, renderViewer())))));
+};
+FileViewer.PDF = PDFFileViewer;
+FileViewer.Image = ImageViewer;
+export default FileViewer;
 //# sourceMappingURL=FileViewer.js.map

package/es/components/FileViewer/ImageViewer.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-declare const ImageViewer: (props: {
-    id: string;
-}) => JSX.Element;
-export default ImageViewer;
+/// <reference types="react" />
+declare const ImageViewer: (props: {
+    id: string;
+}) => JSX.Element;
+export default ImageViewer;

package/es/components/FileViewer/ImageViewer.js

@@ -1,60 +1,60 @@
-import { Modal, Spin } from "@voplus/antd";
-import React, { useEffect, useRef, useState } from "react";
-import { ZoomInOutlined, ZoomOutOutlined } from "@ant-design/icons";
-import Panable from "@voplus/morpho-ui/es/controls/Panable";
-import { Scrollbars } from "react-custom-scrollbars";
-import { observe } from "@voplus/morpho-ui";
-import { runInAction } from "mobx";
-import styles from "./index.less";
-import { useFileStore } from "@voplus/morpho-document-core";
-import { useLocalObservable } from "mobx-react-lite";
-import { useRouteMatch } from "react-router";
-const ImageViewer = (props) => {
-    const store = useFileStore();
-    const match = useRouteMatch();
-    const [visible, setVisible] = useState(false);
-    const state = useLocalObservable(() => ({
-        loading: false,
-        error: "",
-        url: "",
-    }));
-    useEffect(() => {
-        getUrl();
-    }, [props.id]);
-    const getUrl = () => {
-        runInAction(() => (state.loading = true));
-        store
-            .download(props.id)
-            .then((blob) => {
-            if (blob) {
-                runInAction(() => (state.url = URL.createObjectURL(blob)));
-            }
-        })
-            .catch((err) => (state.error = err))
-            .finally(() => runInAction(() => (state.loading = false)));
-    };
-    const ref = useRef(null);
-    return observe(() => (React.createElement(React.Fragment, null,
-        React.createElement(Scrollbars, { autoHide: true, style: { minHeight: "50vh" } }, state.loading ? (React.createElement("div", { className: styles["viewer-spin"] },
-            React.createElement(Spin, null))) : state.error ? (state.error) : state.url ? (React.createElement("div", { className: "image-viewer" },
-            React.createElement("img", { ref: ref, src: state.url, style: { maxWidth: "100%", height: "auto" } }),
-            match.params.id !== props.id && (React.createElement("span", { className: "image-viewer-plus", onClick: () => setVisible(true) },
-                React.createElement(ZoomInOutlined, null))))) : ("No Url")),
-        React.createElement(Modal, { width: ref && ref.current
-                ? ref.current.naturalWidth > window.innerWidth * 0.8
-                    ? "80vw"
-                    : ref.current.naturalWidth
-                : "50vw", visible: visible, title: "", footer: null, closable: false, onCancel: () => setVisible(false), wrapClassName: "image-viewer-width-fit", style: {
-                height: ref && ref.current
-                    ? ref.current.naturalHeight > window.innerHeight * 0.8
-                        ? "80vh"
-                        : ref.current.naturalHeight
-                    : "50vh",
-            } },
-            React.createElement("div", { className: "zoom-out" },
-                React.createElement(ZoomOutOutlined, { onClick: () => setVisible(false) })),
-            React.createElement(Panable, null,
-                React.createElement("img", { src: state.url, style: { maxWidth: "100%", maxHeight: "100%", pointerEvents: "none" }, onClick: () => setVisible(false) }))))));
-};
-export default ImageViewer;
+import { Modal, Spin } from "@voplus/antd";
+import React, { useEffect, useRef, useState } from "react";
+import { ZoomInOutlined, ZoomOutOutlined } from "@ant-design/icons";
+import Panable from "@voplus/morpho-ui/es/controls/Panable";
+import { Scrollbars } from "react-custom-scrollbars";
+import { observe } from "@voplus/morpho-ui";
+import { runInAction } from "mobx";
+import styles from "./index.less";
+import { useFileStore } from "@voplus/morpho-document-core";
+import { useLocalObservable } from "mobx-react-lite";
+import { useRouteMatch } from "react-router";
+const ImageViewer = (props) => {
+    const store = useFileStore();
+    const match = useRouteMatch();
+    const [visible, setVisible] = useState(false);
+    const state = useLocalObservable(() => ({
+        loading: false,
+        error: "",
+        url: "",
+    }));
+    useEffect(() => {
+        getUrl();
+    }, [props.id]);
+    const getUrl = () => {
+        runInAction(() => (state.loading = true));
+        store
+            .download(props.id)
+            .then((blob) => {
+            if (blob) {
+                runInAction(() => (state.url = URL.createObjectURL(blob)));
+            }
+        })
+            .catch((err) => (state.error = err))
+            .finally(() => runInAction(() => (state.loading = false)));
+    };
+    const ref = useRef(null);
+    return observe(() => (React.createElement(React.Fragment, null,
+        React.createElement(Scrollbars, { autoHide: true, style: { minHeight: "50vh" } }, state.loading ? (React.createElement("div", { className: styles["viewer-spin"] },
+            React.createElement(Spin, null))) : state.error ? (state.error) : state.url ? (React.createElement("div", { className: "image-viewer" },
+            React.createElement("img", { ref: ref, src: state.url, style: { maxWidth: "100%", height: "auto" } }),
+            match.params.id !== props.id && (React.createElement("span", { className: "image-viewer-plus", onClick: () => setVisible(true) },
+                React.createElement(ZoomInOutlined, null))))) : ("No Url")),
+        React.createElement(Modal, { width: ref && ref.current
+                ? ref.current.naturalWidth > window.innerWidth * 0.8
+                    ? "80vw"
+                    : ref.current.naturalWidth
+                : "50vw", visible: visible, title: "", footer: null, closable: false, onCancel: () => setVisible(false), wrapClassName: "image-viewer-width-fit", style: {
+                height: ref && ref.current
+                    ? ref.current.naturalHeight > window.innerHeight * 0.8
+                        ? "80vh"
+                        : ref.current.naturalHeight
+                    : "50vh",
+            } },
+            React.createElement("div", { className: "zoom-out" },
+                React.createElement(ZoomOutOutlined, { onClick: () => setVisible(false) })),
+            React.createElement(Panable, null,
+                React.createElement("img", { src: state.url, style: { maxWidth: "100%", maxHeight: "100%", pointerEvents: "none" }, onClick: () => setVisible(false) }))))));
+};
+export default ImageViewer;
 //# sourceMappingURL=ImageViewer.js.map

package/es/components/FileViewer/PDF/index.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { PDFViewerProps } from "../../../controls/PDFViewer/props";
-declare const PDFFileViewer: (props: {
-    id: string;
-    /** props for internal pdf viewer  */
-    viewerProps?: Partial<PDFViewerProps>;
-    /** 指定 download api function */
-    download?: () => Promise<Blob>;
-}) => JSX.Element;
-export default PDFFileViewer;
+/// <reference types="react" />
+import { PDFViewerProps } from "../../../controls/PDFViewer/props";
+declare const PDFFileViewer: (props: {
+    id: string;
+    /** props for internal pdf viewer  */
+    viewerProps?: Partial<PDFViewerProps>;
+    /** 指定 download api function */
+    download?: () => Promise<Blob>;
+}) => JSX.Element;
+export default PDFFileViewer;

package/es/components/FileViewer/PDF/index.js

@@ -1,38 +1,38 @@
-import React from "react";
-import { Spin } from "@voplus/antd";
-import Viewer from "../../../controls/PDFViewer";
-import { observe } from "@voplus/morpho-ui";
-import { runInAction } from "mobx";
-import styles from "../index.less";
-import { useEffect } from "react";
-import { useFileStore } from "@voplus/morpho-document-core";
-import { useLocalObservable } from "mobx-react-lite";
-const PDFFileViewer = (props) => {
-    const store = useFileStore();
-    const state = useLocalObservable(() => ({
-        url: "",
-        error: "",
-        loading: true,
-    }));
-    useEffect(() => {
-        getUrl();
-    }, [props.id]);
-    return observe(() => {
-        var _a;
-        return (React.createElement(React.Fragment, null, state.loading ? (React.createElement("div", { className: styles["viewer-spin"] },
-            React.createElement(Spin, null))) : state.error ? (state.error) : state.url ? (React.createElement(Viewer, { url: state.url, toolbar: (_a = props.viewerProps) === null || _a === void 0 ? void 0 : _a.toolbar })) : ("No Url")));
-    });
-    function getUrl() {
-        runInAction(() => (state.loading = true));
-        (props.download ? props.download() : store.download(props.id))
-            .then((blob) => {
-            if (blob) {
-                state.url = URL.createObjectURL(blob);
-            }
-        })
-            .catch((err) => (state.error = err))
-            .finally(() => runInAction(() => (state.loading = false)));
-    }
-};
-export default PDFFileViewer;
+import React from "react";
+import { Spin } from "@voplus/antd";
+import Viewer from "../../../controls/PDFViewer";
+import { observe } from "@voplus/morpho-ui";
+import { runInAction } from "mobx";
+import styles from "../index.less";
+import { useEffect } from "react";
+import { useFileStore } from "@voplus/morpho-document-core";
+import { useLocalObservable } from "mobx-react-lite";
+const PDFFileViewer = (props) => {
+    const store = useFileStore();
+    const state = useLocalObservable(() => ({
+        url: "",
+        error: "",
+        loading: true,
+    }));
+    useEffect(() => {
+        getUrl();
+    }, [props.id]);
+    return observe(() => {
+        var _a;
+        return (React.createElement(React.Fragment, null, state.loading ? (React.createElement("div", { className: styles["viewer-spin"] },
+            React.createElement(Spin, null))) : state.error ? (state.error) : state.url ? (React.createElement(Viewer, { url: state.url, toolbar: (_a = props.viewerProps) === null || _a === void 0 ? void 0 : _a.toolbar })) : ("No Url")));
+    });
+    function getUrl() {
+        runInAction(() => (state.loading = true));
+        (props.download ? props.download() : store.download(props.id))
+            .then((blob) => {
+            if (blob) {
+                state.url = URL.createObjectURL(blob);
+            }
+        })
+            .catch((err) => (state.error = err))
+            .finally(() => runInAction(() => (state.loading = false)));
+    }
+};
+export default PDFFileViewer;
 //# sourceMappingURL=index.js.map

package/es/components/FileViewer/Preview.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import "./index.less";
-declare const FilePreview: (props: {
-    id: string;
-    visible?: boolean;
-    onClose?: any;
-    /** url of open new page */
-    url?: string;
-}) => JSX.Element;
-export default FilePreview;
+/// <reference types="react" />
+import "./index.less";
+declare const FilePreview: (props: {
+    id: string;
+    visible?: boolean;
+    onClose?: any;
+    /** url of open new page */
+    url?: string;
+}) => JSX.Element;
+export default FilePreview;

package/es/components/FileViewer/Preview.js

@@ -1,65 +1,65 @@
-import "./index.less";
-import { ArrowLeftOutlined, CloseOutlined, DownloadOutlined } from "@ant-design/icons";
-import { AsideContent, observe } from "@voplus/morpho-ui";
-import { Button, Tooltip } from "@voplus/antd";
-import { QuickSubContent, QuickSubTab } from "../QuickViewDialog/QuickSubTab";
-import React, { useState } from "react";
-import { useFile, useFileStore } from "@voplus/morpho-document-core";
-import DocumentHeader from "../DocumentHeader";
-import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
-import FileViewer from "./FileViewer";
-import QuickModal from "../QuickViewDialog/QuickModal";
-import { faExternalLink } from "@fortawesome/pro-light-svg-icons";
-import { saveAs } from "file-saver";
-import { useLayout } from "@voplus/morpho-data";
-const FilePreview = (props) => {
-    const layout = useLayout();
-    const store = useFileStore();
-    const file = useFile(props.id);
-    const [subTab, setSubTab] = useState(false);
-    const [asideContext] = useState(AsideContent.createContext());
-    const download = () => {
-        store.download(props.id).then((blob) => {
-            if (blob) {
-                const url = URL.createObjectURL(blob);
-                if (url) {
-                    saveAs(url, file.name);
-                }
-            }
-        });
-    };
-    return observe(() => (React.createElement(QuickModal, { visible: props.visible, width: subTab ? "1000px" : "650px", onCancel: props.onClose },
-        React.createElement(AsideContent, { context: asideContext, style: { width: "100%" } },
-            React.createElement("div", { className: "perview-content" },
-                layout.ui.mobile && (React.createElement("div", { style: { padding: "10px 20px", borderBottom: "1px solid #f2f2f2" } },
-                    React.createElement(ArrowLeftOutlined, { style: { fontSize: "16px" }, onClick: props.onClose }))),
-                React.createElement("div", { className: "perview-head" }, file ? (React.createElement(React.Fragment, null,
-                    React.createElement(DocumentHeader, { id: props.id, className: "perview-doc-head", clickNameEffect: "edit", autoSaveName: true, tagsVisible: false, toolsVisible: false, flagVisible: false, statusVisible: false, quickDataBarVisible: false, descriptionVisible: false }),
-                    React.createElement("div", { className: "preview-tab" },
-                        props.url && (React.createElement(Tooltip, { title: "Open New Tab" },
-                            React.createElement(Button, { onClick: openTab, className: "ant-btn-icon-only" },
-                                React.createElement(FAIcon, { icon: faExternalLink })))),
-                        React.createElement(QuickSubTab, { shape: false, showSubTab: showSubTab }),
-                        React.createElement(Tooltip, { title: "Download" },
-                            React.createElement(Button, { icon: React.createElement(DownloadOutlined, null), onClick: download })),
-                        !layout.ui.mobile && React.createElement(Button, { icon: React.createElement(CloseOutlined, null), onClick: props.onClose })))) : ("File not found")),
-                file.loaded ? (React.createElement(FileViewer, { id: props.id, style: {
-                        height: "70vh",
-                        display: "flex",
-                        flexDirection: "column",
-                        textAlign: "center",
-                        flex: 1,
-                    } })) : ("File not found"))))));
-    function showSubTab(key) {
-        setSubTab(true);
-        asideContext.openAside(React.createElement(QuickSubContent, { id: props.id, type: key, shape: true, onCancel: () => {
-                asideContext.closeAside();
-                setSubTab(false);
-            } }), { span: 12 });
-    }
-    function openTab() {
-        layout.history.push(props.url);
-    }
-};
-export default FilePreview;
+import "./index.less";
+import { ArrowLeftOutlined, CloseOutlined, DownloadOutlined } from "@ant-design/icons";
+import { AsideContent, observe } from "@voplus/morpho-ui";
+import { Button, Tooltip } from "@voplus/antd";
+import { QuickSubContent, QuickSubTab } from "../QuickViewDialog/QuickSubTab";
+import React, { useState } from "react";
+import { useFile, useFileStore } from "@voplus/morpho-document-core";
+import DocumentHeader from "../DocumentHeader";
+import { FontAwesomeIcon as FAIcon } from "@fortawesome/react-fontawesome";
+import FileViewer from "./FileViewer";
+import QuickModal from "../QuickViewDialog/QuickModal";
+import { faExternalLink } from "@fortawesome/pro-light-svg-icons";
+import { saveAs } from "file-saver";
+import { useLayout } from "@voplus/morpho-data";
+const FilePreview = (props) => {
+    const layout = useLayout();
+    const store = useFileStore();
+    const file = useFile(props.id);
+    const [subTab, setSubTab] = useState(false);
+    const [asideContext] = useState(AsideContent.createContext());
+    const download = () => {
+        store.download(props.id).then((blob) => {
+            if (blob) {
+                const url = URL.createObjectURL(blob);
+                if (url) {
+                    saveAs(url, file.name);
+                }
+            }
+        });
+    };
+    return observe(() => (React.createElement(QuickModal, { visible: props.visible, width: subTab ? "1000px" : "650px", onCancel: props.onClose },
+        React.createElement(AsideContent, { context: asideContext, style: { width: "100%" } },
+            React.createElement("div", { className: "perview-content" },
+                layout.ui.mobile && (React.createElement("div", { style: { padding: "10px 20px", borderBottom: "1px solid #f2f2f2" } },
+                    React.createElement(ArrowLeftOutlined, { style: { fontSize: "16px" }, onClick: props.onClose }))),
+                React.createElement("div", { className: "perview-head" }, file ? (React.createElement(React.Fragment, null,
+                    React.createElement(DocumentHeader, { id: props.id, className: "perview-doc-head", clickNameEffect: "edit", autoSaveName: true, tagsVisible: false, toolsVisible: false, flagVisible: false, statusVisible: false, quickDataBarVisible: false, descriptionVisible: false }),
+                    React.createElement("div", { className: "preview-tab" },
+                        props.url && (React.createElement(Tooltip, { title: "Open New Tab" },
+                            React.createElement(Button, { onClick: openTab, className: "ant-btn-icon-only" },
+                                React.createElement(FAIcon, { icon: faExternalLink })))),
+                        React.createElement(QuickSubTab, { shape: false, showSubTab: showSubTab }),
+                        React.createElement(Tooltip, { title: "Download" },
+                            React.createElement(Button, { icon: React.createElement(DownloadOutlined, null), onClick: download })),
+                        !layout.ui.mobile && React.createElement(Button, { icon: React.createElement(CloseOutlined, null), onClick: props.onClose })))) : ("File not found")),
+                file.loaded ? (React.createElement(FileViewer, { id: props.id, style: {
+                        height: "70vh",
+                        display: "flex",
+                        flexDirection: "column",
+                        textAlign: "center",
+                        flex: 1,
+                    } })) : ("File not found"))))));
+    function showSubTab(key) {
+        setSubTab(true);
+        asideContext.openAside(React.createElement(QuickSubContent, { id: props.id, type: key, shape: true, onCancel: () => {
+                asideContext.closeAside();
+                setSubTab(false);
+            } }), { span: 12 });
+    }
+    function openTab() {
+        layout.history.push(props.url);
+    }
+};
+export default FilePreview;
 //# sourceMappingURL=Preview.js.map

package/es/components/FileViewer/VideoViewer.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-declare const VideoViewer: (props: {
-    id: string;
-    mime: string;
-}) => JSX.Element;
-export default VideoViewer;
+/// <reference types="react" />
+declare const VideoViewer: (props: {
+    id: string;
+    mime: string;
+}) => JSX.Element;
+export default VideoViewer;

package/es/components/FileViewer/VideoViewer.js

@@ -1,26 +1,26 @@
-import React, { useEffect, useState } from "react";
-import { Scrollbars } from "react-custom-scrollbars";
-import { observe } from "@voplus/morpho-ui";
-import { useApplicationContext } from "@voplus/morpho-data";
-const VideoViewer = (props) => {
-    const api = useApplicationContext();
-    const path = `/api/files/${props.id}/content?access_token=${encodeURIComponent(api.user.info.accessToken)}`;
-    const [loaded, setLoaded] = useState(true);
-    useEffect(() => {
-        /** [fix] propertiesView 显示video时内容不正常
-         * 场景:list里有两个以上的video,点击item,propertiesView 显示video,始终都是只显示第一次点击显示的video,video没刷新
-         */
-        onReload();
-    }, [props.id]);
-    return observe(() => (React.createElement(Scrollbars, { autoHide: true }, loaded ? (React.createElement("video", { style: { maxWidth: "100%", height: "100%" }, controls: true },
-        React.createElement("source", { src: `${api.api.currentEndPoint.url(path)}`, type: props.mime }))) : null)));
-    /** reload data */
-    function onReload() {
-        setLoaded(false);
-        setTimeout(() => {
-            setLoaded(true);
-        }, 50);
-    }
-};
-export default VideoViewer;
+import React, { useEffect, useState } from "react";
+import { Scrollbars } from "react-custom-scrollbars";
+import { observe } from "@voplus/morpho-ui";
+import { useApplicationContext } from "@voplus/morpho-data";
+const VideoViewer = (props) => {
+    const api = useApplicationContext();
+    const path = `/api/files/${props.id}/content?access_token=${encodeURIComponent(api.user.info.accessToken)}`;
+    const [loaded, setLoaded] = useState(true);
+    useEffect(() => {
+        /** [fix] propertiesView 显示video时内容不正常
+         * 场景:list里有两个以上的video,点击item,propertiesView 显示video,始终都是只显示第一次点击显示的video,video没刷新
+         */
+        onReload();
+    }, [props.id]);
+    return observe(() => (React.createElement(Scrollbars, { autoHide: true }, loaded ? (React.createElement("video", { style: { maxWidth: "100%", height: "100%" }, controls: true },
+        React.createElement("source", { src: `${api.api.currentEndPoint.url(path)}`, type: props.mime }))) : null)));
+    /** reload data */
+    function onReload() {
+        setLoaded(false);
+        setTimeout(() => {
+            setLoaded(true);
+        }, 50);
+    }
+};
+export default VideoViewer;
 //# sourceMappingURL=VideoViewer.js.map

package/es/components/FileViewer/WOPIViewer.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-export interface IWOPIViewerProps {
-    id: string;
-}
-declare const WOPIViewer: (props: IWOPIViewerProps) => JSX.Element;
-export default WOPIViewer;
+/// <reference types="react" />
+export interface IWOPIViewerProps {
+    id: string;
+}
+declare const WOPIViewer: (props: IWOPIViewerProps) => JSX.Element;
+export default WOPIViewer;