:fire: fetch

dashboard/src/components/general/Video.tsx

@@ -1,13 +1,37 @@
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import videojs from "video.js";
 import VideoPlayer from "./VideoPlayer";
+import { IAttachmentResponse } from "../api/Attachments";
+import { get } from "../../request";
 
 interface IWidget {
+  fileName?: string;
+  fileId?: string;
   src?: string;
   type?: string;
 }
-export const VideoWidget = ({ src, type }: IWidget) => {
+const VideoWidget = ({ fileName, fileId, src, type }: IWidget) => {
   const playerRef = useRef<videojs.Player>();
+  const [url, setUrl] = useState<string>();
+
+  useEffect(() => {
+    if (fileId) {
+      const url = `/v2/attachment/${fileId}`;
+      console.info("VideoWidget api request", url);
+      get<IAttachmentResponse>(url).then((json) => {
+        console.debug("VideoWidget api response", json);
+        if (json.ok) {
+          setUrl(json.data.url);
+        }
+      });
+    }
+  }, [fileId]);
+
+  useEffect(() => {
+    if (src) {
+      setUrl(src);
+    }
+  }, [src]);
 
   const handlePlayerReady = (player: videojs.Player) => {
     if (playerRef.current) {
@@ -32,7 +56,7 @@ export const VideoWidget = ({ src, type }: IWidget) => {
         poster: "",
         sources: [
           {
-            src: src ? src : "",
+            src: url ? url : "",
             type: type ? type : "video/mp4",
           },
         ],