add fetch url

dashboard/src/components/template/Video.tsx

@@ -1,50 +1,81 @@
 import { Button, Card, Collapse, Modal, Popover, Space } from "antd";
 import { Typography } from "antd";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { CloseOutlined } from "@ant-design/icons";
 
-import { Link } from "react-router-dom";
 import { TDisplayStyle } from "./Article";
 import Video from "../general/Video";
 import { VideoIcon } from "../../assets/icon";
-import { useIntl } from "react-intl";
 import { IAttachmentResponse } from "../api/Attachments";
 import { get } from "../../request";
 
 const { Text } = Typography;
 
+const getUrl = async (fileId: string) => {
+  const url = `/v2/attachment/${fileId}`;
+  console.info("url", url);
+  const res = await get<IAttachmentResponse>(url);
+  if (res.ok) {
+    return res.data.url;
+  } else {
+    return "";
+  }
+};
+
+const getLink = async ({ url, id, type, title }: IVideoCtl) => {
+  let link = url;
+  if (!link && id) {
+    const res = await getUrl(id);
+    link = res;
+  }
+  return link;
+};
+
 interface IVideoCtl {
   url?: string;
   id?: string;
+  type?: string;
   title?: React.ReactNode;
   style?: TDisplayStyle;
   _style?: TDisplayStyle;
 }
 
-export const VideoCtl = ({
-  url,
-  id,
-  title,
-  style = "modal",
-  _style,
-}: IVideoCtl) => {
-  const intl = useIntl();
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [fetchUrl, setFetchUrl] = useState<string>();
-  style = _style ? _style : style;
-  useEffect(() => {
-    if (id) {
-      const url = `/v2/attachment/${id}`;
-      console.info("url", url);
-      get<IAttachmentResponse>(url).then((json) => {
-        console.log(json);
-        if (json.ok) {
-          setFetchUrl(json.data.url);
-        }
-      });
-    }
-  }, [id]);
+const VideoPopover = ({ url, id, type, title }: IVideoCtl) => {
+  const [popOpen, setPopOpen] = useState(false);
+  console.debug("popOpen", popOpen);
+  return (
+    <Popover
+      title={
+        <div>
+          {title}
+          <Button
+            type="link"
+            icon={<CloseOutlined />}
+            onClick={() => {
+              setPopOpen(false);
+            }}
+          />
+        </div>
+      }
+      content={
+        <div style={{ width: 600, height: 480 }}>
+          <Video fileId={id} src={url} type={type} />
+        </div>
+      }
+      trigger={"click"}
+      placement="bottom"
+      open={popOpen}
+    >
+      <span onClick={() => setPopOpen(true)}>
+        <VideoIcon />
+        {title}
+      </span>
+    </Popover>
+  );
+};
 
+const VideoModal = ({ url, id, type, title }: IVideoCtl) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const showModal = () => {
     setIsModalOpen(true);
   };
@@ -57,65 +88,65 @@ export const VideoCtl = ({
     setIsModalOpen(false);
   };
 
-  let output = <></>;
-  let articleLink = url ? url : fetchUrl ? fetchUrl : "";
-
-  const VideoModal = () => {
-    return (
-      <>
-        <Typography.Link
-          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            if (event.ctrlKey || event.metaKey) {
-              window.open(articleLink, "_blank");
-            } else {
-              showModal();
-            }
-          }}
-        >
-          <Space>
-            <VideoIcon />
-            {title}
-          </Space>
-        </Typography.Link>
-        <Modal
-          width={"90%"}
-          destroyOnClose
-          style={{ maxWidth: 1000, top: 20, height: 700 }}
-          title={
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "space-between",
-                marginRight: 30,
-              }}
-            >
-              <Text>{title}</Text>
-              <Text>
-                <Link to={articleLink} target="_blank">
-                  {intl.formatMessage({
-                    id: "buttons.open.in.new.tab",
-                  })}
-                </Link>
-              </Text>
-            </div>
+  return (
+    <>
+      <Typography.Link
+        onClick={async (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+          if (event.ctrlKey || event.metaKey) {
+            const link = await getLink({ url: url, id: id });
+            window.open(link, "_blank");
+          } else {
+            showModal();
           }
-          open={isModalOpen}
-          onOk={handleOk}
-          onCancel={handleCancel}
-          footer={[]}
-        >
-          <div style={{ height: 550 }}>
-            <Video src={url} />
+        }}
+      >
+        <Space>
+          <VideoIcon />
+          {title}
+        </Space>
+      </Typography.Link>
+      <Modal
+        width={800}
+        destroyOnClose
+        style={{ maxWidth: "90%", top: 20, height: 700 }}
+        title={
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              marginRight: 30,
+            }}
+          >
+            <Text>{title}</Text>
           </div>
-        </Modal>
-      </>
-    );
-  };
+        }
+        open={isModalOpen}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        footer={[]}
+      >
+        <div style={{ height: 550 }}>
+          <Video fileId={id} src={url} type={type} />
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export const VideoCtl = ({
+  url,
+  id,
+  type,
+  title,
+  style = "modal",
+  _style,
+}: IVideoCtl) => {
+  const curStyle = _style ? _style : style;
 
   const VideoCard = () => {
     return (
       <Card title={title} bodyStyle={{ width: 550, height: 420 }}>
-        <Video src={url} />
+        <Video fileId={id} src={url} type={type} />
       </Card>
     );
   };
@@ -123,7 +154,7 @@ export const VideoCtl = ({
   const VideoWindow = () => {
     return (
       <div style={{ width: 550, height: 420 }}>
-        <Video src={url} />
+        <Video fileId={id} src={url} type={type} />
       </div>
     );
   };
@@ -132,7 +163,7 @@ export const VideoCtl = ({
     return (
       <Collapse bordered={false}>
         <Collapse.Panel header={title} key="parent2">
-          <Video src={url} />
+          <Video fileId={id} src={url} type={type} />
         </Collapse.Panel>
       </Collapse>
     );
@@ -140,71 +171,35 @@ export const VideoCtl = ({
 
   const VideoLink = () => {
     return (
-      <Link to={articleLink} target="_blank">
+      <Typography.Link
+        onClick={async () => {
+          const link = await getLink({ url: url, id: id });
+          window.open(link, "_blank");
+        }}
+      >
         <Space>
           <VideoIcon />
           {title}
         </Space>
-      </Link>
+      </Typography.Link>
     );
   };
 
-  const VideoPopover = () => {
-    const [popOpen, setPopOpen] = useState(false);
-
-    return (
-      <Popover
-        title={
-          <div>
-            {title}
-            <Button
-              type="link"
-              icon={<CloseOutlined />}
-              onClick={() => {
-                setPopOpen(false);
-              }}
-            />
-          </div>
-        }
-        content={
-          <div style={{ width: 600, height: 350 }}>
-            <Video src={url} />
-          </div>
-        }
-        trigger={"click"}
-        placement="bottom"
-        open={popOpen}
-      >
-        <span onClick={() => setPopOpen(true)}>
-          <VideoIcon />
-          {title}
-        </span>
-      </Popover>
-    );
-  };
-  switch (style) {
-    case "modal":
-      output = <VideoModal />;
-      break;
-    case "card":
-      output = <VideoCard />;
-      break;
-    case "window":
-      output = <VideoWindow />;
-      break;
-    case "toggle":
-      output = <VideoToggle />;
-      break;
-    case "link":
-      output = <VideoLink />;
-      break;
-    case "popover":
-      output = <VideoPopover />;
-      break;
-    default:
-      break;
-  }
-  return output;
+  return curStyle === "modal" ? (
+    <VideoModal url={url} id={id} type={type} title={title} />
+  ) : curStyle === "card" ? (
+    <VideoCard />
+  ) : curStyle === "window" ? (
+    <VideoWindow />
+  ) : curStyle === "toggle" ? (
+    <VideoToggle />
+  ) : curStyle === "link" ? (
+    <VideoLink />
+  ) : curStyle === "popover" ? (
+    <VideoPopover url={url} id={id} type={type} title={title} />
+  ) : (
+    <></>
+  );
 };
 
 interface IWidget {