feat: 视频回放增加进度条

packages/base-components/VmsVideo/src/recVideo/TimeSlider/responsiveCanvas.js

@@ -62,7 +62,7 @@ export default class RvResponsiveCanvas extends Component {
         ref={this.setRef}
         width={width * scale}
         height={height * scale}
-        style={{ ...style, width, height, minWidth: '952px' }}
+        style={{ ...style, width, height }}
       />
     );
   }

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

-import { message, ConfigProvider } from 'antd';
+import { message, ConfigProvider, Progress } from 'antd';
 import { useEffect, useState, useContext, useRef, useImperativeHandle } from 'react';
 import TestVideo from '../index';
 import classNames from 'classnames';
 import Empty from '@wisdom-components/empty';
+import empty_icon from '../assets/缺省页.png';
 import { videoPlayback, newPlayback } from '../apis';
 import './index.less';
 import moment from 'moment';
@@ -21,11 +22,29 @@ const RecVideo = (props, ref) => {
   const [minTimestamp, setMinTimestamp] = useState(null); //时间轴最小时间
   const [maxTimestamp, setMaxTimestamp] = useState(null); //时间轴最大时间
   const [loading, setLoading] = useState(true);
+  const [percent, setPercent] = useState(0);
+  const timeRef = useRef(null);
 
   useEffect(() => {
     changeReplayCfg();
   }, [props.VideoInfo]);
 
+  useEffect(() => {
+    let current = percent;
+    if (loading) timeRef.current = setInterval(() => {
+      current = current + 1;
+      setPercent(current > 99 ? 99 : current);
+    }, 40);
+
+    return () => {
+      if (timeRef.current) {
+        clearInterval(timeRef.current);
+        timeRef.current = null;
+        setPercent(0);
+      }
+    }
+  }, [loading]);
+
   useImperativeHandle(ref, () => {
     // changeVal 就是暴露给父组件的方法, newVal是父组件传递的参数
     return jessibuca.current; // _video&& _video.current&&_video.current.jessibuca
@@ -43,7 +62,8 @@ const RecVideo = (props, ref) => {
         force: 1,
         startTime: formattedTime,
         endTime: edDates,
-        'site-code': window?.globalConfig?.userInfo?.LocalSite || window?.globalConfig?.userInfo?.site || '',
+        'site-code':
+          window?.globalConfig?.userInfo?.LocalSite || window?.globalConfig?.userInfo?.site || '',
       };
       rePaly(params);
     }
@@ -62,7 +82,8 @@ const RecVideo = (props, ref) => {
       force: 1,
       startTime: stTimes,
       endTime: edTimes,
-      'site-code': window?.globalConfig?.userInfo?.LocalSite || window?.globalConfig?.userInfo?.site || '',
+      'site-code':
+        window?.globalConfig?.userInfo?.LocalSite || window?.globalConfig?.userInfo?.site || '',
     };
     setHoursRuler(hoursPerRuler);
     setMinTimestamp(moment(stTimes).valueOf());
@@ -72,34 +93,36 @@ const RecVideo = (props, ref) => {
 
   const getVideoPlBack = (param) => {
     setLoading(true);
-    videoPlayback(param).then((res) => {
-      setLoading(false);
-      if (res.code === 200) {
-        setPeridos(
-          res.data.peridos.map((times, i) => {
-            let beginTime = moment(times.StartTime.replaceAll('T', ' ').replaceAll('Z', ' '));
-            let endTime = moment(times.EndTime.replaceAll('T', ' ').replaceAll('Z', ' '));
-            return {
-              ...times,
-              idx: i,
-              beginTime: beginTime.valueOf(),
-              endTime: endTime.valueOf(),
-              style: { background: '#637DEC' },
-            };
-          }),
-        );
-        setShowId(res.data.url);
-      } else {
-        message.warn(res.msg);
-        setShowId(null);
-      }
-    });
+    videoPlayback(param)
+      .then((res) => {
+        setLoading(false);
+        if (res.code === 200) {
+          setPeridos(
+            res.data.peridos.map((times, i) => {
+              let beginTime = moment(times.StartTime.replaceAll('T', ' ').replaceAll('Z', ' '));
+              let endTime = moment(times.EndTime.replaceAll('T', ' ').replaceAll('Z', ' '));
+              return {
+                ...times,
+                idx: i,
+                beginTime: beginTime.valueOf(),
+                endTime: endTime.valueOf(),
+                style: { background: '#637DEC' },
+              };
+            }),
+          );
+          setShowId(res.data.url);
+        } else {
+          message.warn(res.msg);
+          setShowId(null);
+        }
+      })
+      .catch((error) => {
+        setLoading(false);
+      });
   };
 
   const rePaly = (params) => {
-    setLoading(true);
     newPlayback(params).then((res) => {
-      setLoading(false);
       if (res.code === 200) {
         setShowId(res.data);
       } else {
@@ -117,7 +140,14 @@ const RecVideo = (props, ref) => {
 
   return (
     <div className={classNames(prefixCls)}>
-      {showId ? (
+      {loading ? (
+        <>
+          <div className={classNames(`${prefixCls}-load`)}>
+            <Progress className={classNames(`${prefixCls}-progress`)} strokeWidth={14} percent={percent} />
+            <span>视频回放信息获取中，请稍后...</span>
+          </div>
+        </>
+      ) : showId ? (
         <>
           <div className={classNames(`${prefixCls}-video`)}>
             {showId && (
@@ -152,7 +182,11 @@ const RecVideo = (props, ref) => {
         </>
       ) : (
         <div className={classNames(`${prefixCls}-empty`)}>
-          {!loading && <Empty theme={'dark'} description={''} />}
+          <Empty
+            image={empty_icon}
+            theme={'dark'}
+            description={'咦~暂时没有查询到视频回放信息呢~'}
+          />
         </div>
       )}
     </div>

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

@@ -9,6 +9,23 @@
   height: 100%;
   width: 100%;
 
+  &-load {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  &-progress {
+    width: 100%;
+    overflow: hidden;
+    width: 50%;
+    margin-bottom: 10px;
+  }
+
   &-video {
     flex: 1;
     width: 100%;