:fire: video demo

dashboard/src/pages/nut/index.tsx

@@ -1,59 +1,13 @@
-import { useState, useRef } from "react";
-import { Tag, Row, Col, Space, Button } from "antd";
+import { useState } from "react";
+import { Tag, Space, Button } from "antd";
 import lodash from "lodash";
 import { marked } from "marked";
-import videojs from "video.js";
 
 import FooterBar from "../../components/library/FooterBar";
 
 import HeadBar from "../../components/library/HeadBar";
 import Home from "../../components/nut/Home";
 import InnerDrawer from "../../components/nut/InnerDrawer";
-import VideoPlayer from "../../components/nut/VideoPlayer";
-
-// ------------------------------------------
-
-const VideoBox = () => {
-  const playerRef = useRef<videojs.Player>();
-
-  const handlePlayerReady = (player: videojs.Player) => {
-    if (playerRef.current) {
-      playerRef.current = player;
-      player.on("waiting", () => {
-        console.log("player is waiting");
-      });
-
-      player.on("dispose", () => {
-        console.log("player will dispose");
-      });
-    }
-  };
-
-  return (
-    <VideoPlayer
-      options={{
-        autoplay: true,
-        controls: true,
-        responsive: true,
-        fluid: true,
-        poster: "https://vjs.zencdn.net/v/oceans.png",
-        sources: [
-          {
-            src: "https://vjs.zencdn.net/v/oceans.mp4",
-            type: "video/mp4",
-          },
-          {
-            src: "https://vjs.zencdn.net/v/oceans.webm",
-            type: "video/webm",
-          },
-          { src: "https://vjs.zencdn.net/v/oceans.ogv", type: "video/ogg" },
-        ],
-      }}
-      onReady={handlePlayerReady}
-    />
-  );
-};
-// ------------------------------------------
 
 interface IRandomPanel {
   v1: string;
@@ -88,11 +42,7 @@ const Widget = () => {
         }}
       ></div>
       <div>Home Page</div>
-      <Row>
-        <Col offset={1}>
-          <VideoBox />
-        </Col>
-      </Row>
+
       <InnerDrawer />
       <div>
         <h1>Mermaid</h1>