add popover

dashboard/src/components/template/Video.tsx

@@ -1,24 +1,50 @@
-import { Card, Collapse, Modal, Space } from "antd";
+import { Button, Card, Collapse, Modal, Popover, Space } from "antd";
 import { Typography } from "antd";
-import { useState } from "react";
+import { useEffect, 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;
 
 interface IVideoCtl {
   url?: string;
+  id?: string;
   title?: React.ReactNode;
   style?: TDisplayStyle;
+  _style?: TDisplayStyle;
 }
 
-export const VideoCtl = ({ url, title, style = "modal" }: IVideoCtl) => {
+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 showModal = () => {
     setIsModalOpen(true);
   };
@@ -32,92 +58,148 @@ export const VideoCtl = ({ url, title, style = "modal" }: IVideoCtl) => {
   };
 
   let output = <></>;
-  let articleLink = url ? url : "";
+  let articleLink = url ? url : fetchUrl ? fetchUrl : "";
 
-  switch (style) {
-    case "modal":
-      output = (
-        <>
-          <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>
+  const VideoModal = () => {
+    return (
+      <>
+        <Typography.Link
+          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+            if (event.ctrlKey || event.metaKey) {
+              window.open(articleLink, "_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={"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>
-          </Modal>
-        </>
-      );
+          }
+          open={isModalOpen}
+          onOk={handleOk}
+          onCancel={handleCancel}
+          footer={[]}
+        >
+          <div style={{ height: 550 }}>
+            <Video src={url} />
+          </div>
+        </Modal>
+      </>
+    );
+  };
+
+  const VideoCard = () => {
+    return (
+      <Card title={title} bodyStyle={{ width: 550, height: 400 }}>
+        <Video src={url} />
+      </Card>
+    );
+  };
+
+  const VideoWindow = () => {
+    return (
+      <div style={{ width: 550, height: 320 }}>
+        <Video src={url} />
+      </div>
+    );
+  };
+
+  const VideoToggle = () => {
+    return (
+      <Collapse bordered={false}>
+        <Collapse.Panel header={title} key="parent2">
+          <Video src={url} />
+        </Collapse.Panel>
+      </Collapse>
+    );
+  };
+
+  const VideoLink = () => {
+    return (
+      <Link to={articleLink} target="_blank">
+        <Space>
+          <VideoIcon />
+          {title}
+        </Space>
+      </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 = (
-        <Card title={title} bodyStyle={{ width: 550, height: 400 }}>
-          <Video src={url} />
-        </Card>
-      );
+      output = <VideoCard />;
       break;
     case "window":
-      output = (
-        <div style={{ width: 550, height: 320 }}>
-          <Video src={url} />
-        </div>
-      );
+      output = <VideoWindow />;
       break;
     case "toggle":
-      output = (
-        <Collapse bordered={false}>
-          <Collapse.Panel header={title} key="parent2">
-            <Video src={url} />
-          </Collapse.Panel>
-        </Collapse>
-      );
+      output = <VideoToggle />;
       break;
     case "link":
-      output = (
-        <Link to={articleLink} target="_blank">
-          <Space>
-            <VideoIcon />
-            {title}
-          </Space>
-        </Link>
-      );
+      output = <VideoLink />;
+      break;
+    case "popover":
+      output = <VideoPopover />;
       break;
     default:
       break;