@cloud-app-dev/vidc 3.0.38 → 3.0.40

package/es/ROI/index.d.ts

@@ -9,7 +9,7 @@ interface IRIOProps {
     /**
      * 绘制数据变化
      */
-    onChange?: (rio: number[][]) => void;
+    onChange?: (rio: number[][], areas: [number, number][][]) => void;
     /**
      * 开启/关闭 标识
      */

package/es/ROI/index.js

@@ -20,7 +20,8 @@ function RIO(_ref) {
       open = _useDrawROI.open,
       close = _useDrawROI.close,
       clear = _useDrawROI.clear,
-      rio = _useDrawROI.rio; // eslint-disable-next-line react-hooks/exhaustive-deps
+      rio = _useDrawROI.rio,
+      areas = _useDrawROI.areas; // eslint-disable-next-line react-hooks/exhaustive-deps
 
 
   useEffect(function () {
@@ -32,7 +33,7 @@ function RIO(_ref) {
   }, [renderKey]);
 
   _useUpdateEffect(function () {
-    return onChange === null || onChange === void 0 ? void 0 : onChange(rio);
+    return onChange === null || onChange === void 0 ? void 0 : onChange(rio, areas);
   }, [rio]);
 
   return /*#__PURE__*/React.createElement("div", {

package/es/ScreenPlayer/Record.js

@@ -134,6 +134,9 @@ function RecordPlayer(_a) {
   var timeBegin = useMemo(function () {
     return segmentItem.date;
   }, [segmentItem.date]);
+  var currentTime = useMemo(function () {
+    return state.currentTimes[state.selectIndex];
+  }, [state.currentTimes, state.selectIndex]);
   /**
    * @desc 用户缓存接收list的变化。
    */
@@ -466,6 +469,7 @@ function RecordPlayer(_a) {
     disabled: !segmentItem.cid
   }, /*#__PURE__*/React.createElement(SegmentTimeLine, {
     begin: timeBegin,
+    currentTime: currentTime,
     updateState: updateState,
     segments: segmentItem.segments,
     onTimeChange: onTimeChange,

package/es/ScreenPlayer/RecordTools.js

@@ -18,8 +18,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React from 'react';
 import IconFont from '../Player/iconfont';
 import ScreenSelect from './ScreenSelect';
-import TimeSelect from './TimeSelect';
-import TimeMode from './TimeMode';
+import TimeSelect from './TimeSelect'; // import TimeMode from './TimeMode';
+
 import useFullscreen from '../useFullscreen';
 import Volume from '../Player/contraller_bar/volume';
 import RatePick from './RatePick';
@@ -200,14 +200,7 @@ function RecordTools(_ref) {
   }) : /*#__PURE__*/React.createElement(IconFont, {
     type: "lm-player-quanping",
     title: "\u5168\u5C4F"
-  })), /*#__PURE__*/React.createElement(TimeMode, {
-    timeMode: timeMode,
-    onChange: function onChange(m) {
-      return updateState({
-        timeMode: m
-      });
-    }
-  })));
+  }))));
 }
 
 export default RecordTools;

package/es/ScreenPlayer/SegmentTimeLine.d.ts

@@ -8,6 +8,7 @@ interface ISegmentTimeLineProps {
     updateState: (state: {
         timeMode: number;
     }) => void;
+    currentTime?: number;
 }
-declare function SegmentTimeLine({ begin, segments, onTimeChange, timeMode, updateState }: ISegmentTimeLineProps): JSX.Element;
+declare function SegmentTimeLine({ begin, segments, onTimeChange, timeMode, updateState, currentTime }: ISegmentTimeLineProps): JSX.Element;
 export default SegmentTimeLine;

package/es/ScreenPlayer/SegmentTimeLine.js

@@ -8,7 +8,8 @@ function SegmentTimeLine(_ref) {
       segments = _ref.segments,
       onTimeChange = _ref.onTimeChange,
       timeMode = _ref.timeMode,
-      updateState = _ref.updateState;
+      updateState = _ref.updateState,
+      currentTime = _ref.currentTime;
   var ref = useRef();
 
   var _useThrottleFn = _useThrottleFn2(onTimeChange, {
@@ -24,8 +25,8 @@ function SegmentTimeLine(_ref) {
     }).valueOf();
   }, [begin]);
   useTimeSlider(ref, {
-    begin: time,
-    currentTime: time,
+    begin: time - timeMode / 2 * 3600 * 1000,
+    currentTime: currentTime !== null && currentTime !== void 0 ? currentTime : time,
     onTimeChange: run,
     segments: segments,
     hoursPer: timeMode,

package/es/ScreenPlayer/useTimeSlider.js

@@ -17,8 +17,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 import moment from 'moment';
 import { useEffect, useMemo, useRef, useState } from 'react';
-var hours = [1, 6, 12, 24]; // const currentColor = '#FF000A';
-
+var hours = [1, 6, 12, 24];
+var currentColor = '#FF000A';
 var normalLineColor = '#ffffff';
 var hoverLineColor = '#319BFF';
 var minPerStep = [1, 2, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 720, 1440];
@@ -237,20 +237,32 @@ function useTimeSlider(canvasRef, _ref2) {
    * 绘制当前刻度
    * @returns
    */
-  // const drawCurrentLine = () => {
-  //   const { currentTime, begin, hoursPer } = state;
-  //   const time = currentTime;
-  //   const range = [begin, currentTime + hoursPer * 3600 * 1000];
-  //   if (time < range[0] || time > range[1]) {
-  //     return;
-  //   }
-  //   const ms_current = time - begin;
-  //   const px_per_ms = width / (hoursPer * 60 * 60 * 1000); // px/ms
-  //   const left = px_per_ms * ms_current;
-  //   drawText(ctx, { fillStyle: '#ffffff', font: '12px Arial', x: left - 64, y: 14, text: formartTimestemp(time) });
-  //   drawLine(ctx, left, 20, left, height, currentColor, 2); //中间当前点线
-  // };
 
+
+  var drawCurrentLine = function drawCurrentLine() {
+    var currentTime = state.currentTime,
+        begin = state.begin,
+        hoursPer = state.hoursPer;
+    var time = currentTime;
+    var range = [begin, currentTime + hoursPer * 3600 * 1000];
+
+    if (time < range[0] || time > range[1]) {
+      return;
+    }
+
+    var ms_current = time - begin;
+    var px_per_ms = width / (hoursPer * 60 * 60 * 1000); // px/ms
+
+    var left = px_per_ms * ms_current;
+    drawText(ctx, {
+      fillStyle: '#ffffff',
+      font: '12px Arial',
+      x: left - 64,
+      y: 14,
+      text: formartTimestemp(time)
+    });
+    drawLine(ctx, left, 20, left, height, currentColor, 2); //中间当前点线
+  };
   /**
    * 绘制提示时间
    */
@@ -291,16 +303,15 @@ function useTimeSlider(canvasRef, _ref2) {
     if (canvas) {
       clearCanvas();
       drawOverlay();
-      drawScale(); // drawCurrentLine();
-
+      drawScale();
+      drawCurrentLine();
       state.hover.time && drawHoverLine();
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [canvas, state.begin, state.currentTime, state.hoursPer, segments, state.hover]);
 
   _useUpdateEffect(function () {
-    console.log(begin);
-    update({
+    return update({
       begin: begin
     });
   }, [begin]);
@@ -309,8 +320,13 @@ function useTimeSlider(canvasRef, _ref2) {
     return update({
       hoursPer: hoursPer
     });
-  }, [hoursPer]); // useUpdateEffect(() => update({ currentTime }), [currentTime]);
+  }, [hoursPer]);
 
+  _useUpdateEffect(function () {
+    return update({
+      currentTime: currentTime
+    });
+  }, [currentTime]);
   /**
    * 触发绘制范围单位（hour）
    */
@@ -442,7 +458,12 @@ function useTimeSlider(canvasRef, _ref2) {
 
       var outTimeline = segmentItem && !segmentItem.url; // const new_begin = new_current - (state.hoursPer * 60 * 60 * 1000) / 2;
       // setState((old) => ({ ...old, begin: new_begin, current: new_current }));
-      // setState((old) => ({ ...old, begin: new_begin, current: new_current }));
+
+      setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          current: new_current
+        });
+      });
 
       _nextTick(function () {
         return onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange(new_current, outTimeline);

package/es/useDrawROI/index.d.ts

@@ -9,5 +9,7 @@ declare function useDrawROI(target: BasicTarget<HTMLCanvasElement>, { row, rowIt
     clear: () => void;
     rio: number[][];
     status: string;
+    areas: [number, number][][];
+    deleteArea: (area: number[][]) => void;
 };
 export default useDrawROI;

package/es/useDrawROI/index.js

@@ -310,12 +310,26 @@ function useDrawROI(target, _ref) {
 
     return rioArr;
   }, [row, rowItems, state.saveArea, target]);
+
+  var deleteArea = function deleteArea(area) {
+    setState(function (old) {
+      var newArea = old.saveArea.filter(function (v) {
+        return v.join('-') !== area.join('-');
+      });
+      return Object.assign(Object.assign({}, old), {
+        saveArea: _toConsumableArray(newArea)
+      });
+    });
+  };
+
   return {
     open: open,
     close: close,
     clear: clear,
     rio: rio,
-    status: status
+    status: status,
+    areas: state.saveArea,
+    deleteArea: deleteArea
   };
 }
 

package/package.json

@@ -2,7 +2,7 @@
   "private": false,
   "name": "@cloud-app-dev/vidc",
   "description": "Video Image Data Componennts",
-  "version": "3.0.38",
+  "version": "3.0.40",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",