HiddenInfo补全隐患视频播放

components/HiddenInfo/gwj/index.js

@@ -12,6 +12,7 @@ import HeaderBack from "../../HeaderBack";
 import VideoIcon from "../../Icon/VideoIcon";
 import PreviewImg from "../../PreviewImg";
 import PreviewPdf from "../../PreviewPdf";
+import Video from "../../Video";
 
 /**
  * 隐患查看组件（港务局版本）
@@ -42,6 +43,7 @@ function HiddenInfo(props) {
   const [acceptImageFiles, setAcceptImageFiles] = useState([]);
   const [inspectionAcceptImageFiles, setInspectionAcceptImageFiles] = useState([]);
   const [loading, setLoading] = useState(true);
+  const [videoModalOpen, setVideoModalOpen] = useState(true);
 
   const { getFile } = useGetFile();
   const query = useGetUrlQuery();
@@ -146,7 +148,14 @@ function HiddenInfo(props) {
                 }),
               },
               { label: "隐患图片", children: <PreviewImg files={hiddenImageFiles} /> },
-              ...(hiddenVideoFiles.length > 0 ? [{ label: "隐患视频", children: <VideoIcon /> }] : []),
+              ...(hiddenVideoFiles.length > 0
+                ? [{ label: "隐患视频", children: (
+                    <VideoIcon onClick={() => {
+                      setVideoModalOpen(true);
+                    }}
+                    />
+                  ) }]
+                : []),
             ]}
           />
           {
@@ -420,6 +429,16 @@ function HiddenInfo(props) {
           }
         </div>
       </Spin>
+      {
+        videoModalOpen && (
+          <Video
+            visible={videoModalOpen}
+            source={hiddenVideoFiles[0].url}
+            onCancel={() => setVideoModalOpen(false)}
+            title="隐患视频"
+          />
+        )
+      }
     </div>
   );
 }

components/Video/index.d.ts

@@ -2,6 +2,8 @@ import type { ForwardRefExoticComponent, RefAttributes } from "react";
 import type { AliPlayerProps, AliPlayerRef } from "./AliPlayer";
 
 export interface VideoProps extends Omit<AliPlayerProps, "onEnded" | "onTimeupdate"> {
+  /** 弹窗标题，默认 “视频” */
+  title?: string;
   /** 是否显示弹窗 */
   visible?: boolean;
   /** 是否内联模式 */