资源视频编辑组件、视频预览组件

src/pages/resource/videos/compenents/video-play-dialog/index.tsx

@@ -0,0 +1,64 @@
+import React, { useState, useEffect } from "react";
+import styles from "./index.module.less";
+import closeIcon from "../../../../../assets/images/commen/close.png";
+
+interface PropInterface {
+  id: number;
+  url: string;
+  open: boolean;
+  onCancel: () => void;
+}
+
+declare const window: any;
+
+export const VideoPlayDialog: React.FC<PropInterface> = ({
+  id,
+  url,
+  open,
+  onCancel,
+}) => {
+  const [loading, setLoading] = useState<boolean>(true);
+
+  useEffect(() => {
+    if (open && url) {
+      initDPlayer(url);
+    }
+  }, [id, open, url]);
+
+  const initDPlayer = (playUrl: string) => {
+    window.player = new window.DPlayer({
+      container: document.getElementById("meedu-player-container"),
+      autoplay: false,
+      video: {
+        url: playUrl,
+      },
+    });
+    window.player.on("ended", () => {
+      window.player && window.player.destroy();
+    });
+  };
+
+  return (
+    <>
+      {open && (
+        <div className={styles["play-mask"]}>
+          <div className={styles["play-dialog"]}>
+            <div
+              className={styles["close-button"]}
+              onClick={() => {
+                window.player && window.player.destroy();
+                onCancel();
+              }}
+            >
+              <img src={closeIcon} />
+            </div>
+            <div
+              className={styles["play-box"]}
+              id="meedu-player-container"
+            ></div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};