feat: 视频回放展示优化

packages/base-components/VmsVideo/src/apis/index.js

@@ -37,7 +37,7 @@ export function controlSlim(data) {
 // 获取isc ws回看流
 export function hiswsUrl(data) {
   return request({
-    url: `${baseURI}${CommonPath}/PandaCore/GateWay/pandavms/camera/isc/hiswsurl`,
+    url: `${baseURI}${CommonPath}/pandavms/camera/isc/hiswsurl`,
     method: REQUEST_METHOD_POST,
     data,
   });

packages/base-components/VmsVideo/src/demos/dmeo3.tsx

@@ -13,12 +13,13 @@ const Demo2 = (props) => {
           },
           VideoInfo: {
             id: 'FB4FAC6B-4AC1-4EE6-8133-A613098F5AEF',
-            beginTime: '2024-05-20 00:00:00',
-            endTime: '2024-05-20 23:59:59',
-            playTime: '2024-05-20 06:00:00',
+            beginTime: '2024-05-24 00:00:00',
+            endTime: '2024-05-24 23:59:59',
+            playTime: '2024-05-24 06:00:00',
             hoursRuler: 24,
           },
           ProgressBar: { strokeColor: 'red', textColor: 'red' },
+          EmptyIcon: '',
         }}
         ref={jessibuca}
       />

packages/base-components/VmsVideo/src/recVideo/hkh5player/index.js

@@ -22,7 +22,7 @@ const HKh5player = (props, ref) => {
   const IS_MOVE_DEVICE = document.body.clientWidth < 992; // 是否移动设备
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('hk-h5-player-view');
-  const { VideoInfo = {}, JessibucaObj, ProgressBar } = props;
+  const { VideoInfo = {}, JessibucaObj, ProgressBar, EmptyIcon = '' } = props;
   const videoID = VideoInfo?.id || `VIDEO_PLAY_BACK`;
   const [showId, setShowId] = useState(VideoInfo?.id || ''); //视频ID
   const [peridos, setPeridos] = useState([]); //可播放视频时间段
@@ -100,7 +100,10 @@ const HKh5player = (props, ref) => {
     if (!id) return setShowId(null);
     const hoursPerRuler = calculateHours(beginTime, endTime) || 24;
     const stTimes = moment(beginTime).format('YYYY-MM-DD HH:mm:ss');
-    const edTimes = moment(endTime).format('YYYY-MM-DD HH:mm:ss');
+    const edTimes =
+      moment(new Date()).valueOf() >= moment(endTime).valueOf()
+        ? moment(endTime).format('YYYY-MM-DD HH:mm:ss')
+        : moment(new Date()).format('YYYY-MM-DD HH:mm:ss');
     const params = {
       id: id,
       startTime: stTimes,
@@ -120,22 +123,29 @@ const HKh5player = (props, ref) => {
       },
     ]);
     setLoading(true);
-    hiswsUrl(params).then((res) => {
-      setLoading(false);
-      if (res.code === 200) {
-        const data = res?.data || '';
-        const url = data.split('?')[0].split('/').pop() || '';
-        if (!url) return setShowId(null);
-        videoUrl.current = url;
-        getVideoReplayInfo({
-          beginTime: playTimestamp ? moment(playTimestamp).format('YYYY-MM-DD HH:mm:ss') : stTimes,
-          endTime: edTimes,
-        });
-      } else {
+    hiswsUrl(params)
+      .then((res) => {
+        setLoading(false);
+        if (res.code === 200) {
+          const data = res?.data || '';
+          const url = data.split('?')[0].split('/').pop() || '';
+          if (!url) return setShowId(null);
+          videoUrl.current = url;
+          getVideoReplayInfo({
+            beginTime: playTimestamp
+              ? moment(playTimestamp).format('YYYY-MM-DD HH:mm:ss')
+              : stTimes,
+            endTime: edTimes,
+          });
+        } else {
+          setShowId(null);
+          message.warn(res.msg);
+        }
+      })
+      .catch((err) => {
+        setLoading(false);
         setShowId(null);
-        message.warn(res.msg);
-      }
-    });
+      });
   };
 
   // 获取计算小时数
@@ -462,7 +472,7 @@ const HKh5player = (props, ref) => {
                 if (recordInfo && playOffset) {
                   setPlayTimestamp(time);
                 } else {
-                  message.warn('当前时间节点没有视频可以播放哦！');
+                  message.warn('当前时间节点超出回放时间区间！');
                 }
               }}
               timecell={peridos}
@@ -523,7 +533,11 @@ const HKh5player = (props, ref) => {
   const emptyBoxRender = () => {
     return (
       <div className={classNames(`${prefixCls}-empty`)}>
-        <Empty image={empty_icon} theme={'dark'} description={'咦~暂时没有查询到视频回放信息呢~'} />
+        <Empty
+          image={EmptyIcon || empty_icon}
+          theme={'dark'}
+          description={'咦~暂时没有查询到视频回放信息呢~'}
+        />
       </div>
     );
   };

packages/base-components/VmsVideo/src/recVideo/index.js

@@ -13,7 +13,7 @@ const RecVideo = (props, ref) => {
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('rec-video-view');
 
-  const { VideoInfo, JessibucaObj, ProgressBar } = props;
+  const { VideoInfo, JessibucaObj, ProgressBar, EmptyIcon = '', } = props;
   const jessibuca = useRef(null);
   const [hoursRuler, setHoursRuler] = useState(VideoInfo.hoursRuler || 24);
   const [showId, setShowId] = useState(null); //视频ID
@@ -196,7 +196,7 @@ const RecVideo = (props, ref) => {
       ) : (
         <div className={classNames(`${prefixCls}-empty`)}>
           <Empty
-            image={empty_icon}
+            image={EmptyIcon || empty_icon}
             theme={'dark'}
             description={'咦~暂时没有查询到视频回放信息呢~'}
           />