:construction: create video

dashboard/src/components/general/Video.tsx

@@ -0,0 +1,16 @@
+interface IWidget {
+  src?: string;
+  type?: string;
+}
+export const Widget = ({ src, type }: IWidget) => {
+  return (
+    <div>
+      <video controls={true} autoPlay={true}>
+        <source src={src} type={type} />
+        Video not playing? <a href={type}>Download file</a> instead.
+      </video>
+    </div>
+  );
+};
+
+export default Widget;

dashboard/src/components/general/Video.txt

@@ -1,53 +0,0 @@
-import React from "react";
-import videojs from "video.js";
-import "video.js/dist/video-js.css";
-
-export const VideoJS = (props) => {
-  const videoRef = React.useRef(null);
-  const playerRef = React.useRef(null);
-  const { options, onReady } = props;
-
-  React.useEffect(() => {
-    // Make sure Video.js player is only initialized once
-    if (!playerRef.current) {
-      // The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
-      const videoElement = document.createElement("video-js");
-
-      videoElement.classList.add("vjs-big-play-centered");
-      videoRef.current.appendChild(videoElement);
-
-      const player = (playerRef.current = videojs(videoElement, options, () => {
-        videojs.log("player is ready");
-        onReady && onReady(player);
-      }));
-
-      // You could update an existing player in the `else` block here
-      // on prop change, for example:
-    } else {
-      const player = playerRef.current;
-
-      player.autoplay(options.autoplay);
-      player.src(options.sources);
-    }
-  }, [options, videoRef]);
-
-  // Dispose the Video.js player when the functional component unmounts
-  React.useEffect(() => {
-    const player = playerRef.current;
-
-    return () => {
-      if (player && !player.isDisposed()) {
-        player.dispose();
-        playerRef.current = null;
-      }
-    };
-  }, [playerRef]);
-
-  return (
-    <div data-vjs-player>
-      <div ref={videoRef} />
-    </div>
-  );
-};
-
-export default VideoJS;

dashboard/src/components/general/VideoModal.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+import { Modal } from "antd";
+import Video from "./Video";
+
+interface IWidget {
+  src?: string;
+  type?: string;
+  trigger?: JSX.Element;
+}
+export const Widget = ({ src, type, trigger }: IWidget) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+      <span onClick={showModal}>{trigger}</span>
+      <Modal
+        title="Basic Modal"
+        open={isModalOpen}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        width={1000}
+      >
+        <Video src={src} type={type} />
+        <div>
+          src = {src}
+          type = {type}
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+export default Widget;