@cloud-app-dev/vidc 3.0.7 → 3.0.8

package/es/ScreenPlayer/RecordTools.d.ts

@@ -18,6 +18,7 @@ interface IToolsProps {
     onClose?: () => void;
     onCloseAll?: () => void;
     timeMode: number;
+    download?: () => void;
 }
-declare function RecordTools({ containerRef, updateState, screenNum, timeMode, getPlayerItem, mode, toggleFit, fit, time, onTimeChange, onClose, onCloseAll }: IToolsProps): JSX.Element;
+declare function RecordTools({ containerRef, updateState, download, screenNum, timeMode, getPlayerItem, mode, toggleFit, fit, time, onTimeChange, onClose, onCloseAll }: IToolsProps): JSX.Element;
 export default RecordTools;

package/es/ScreenPlayer/RecordTools.js

@@ -22,6 +22,7 @@ import TimeMode from './TimeMode';
 function RecordTools(_ref) {
   var containerRef = _ref.containerRef,
       updateState = _ref.updateState,
+      download = _ref.download,
       screenNum = _ref.screenNum,
       timeMode = _ref.timeMode,
       getPlayerItem = _ref.getPlayerItem,
@@ -89,7 +90,8 @@ function RecordTools(_ref) {
     type: "lm-player-YesorNo_No_Dark",
     title: "\u5173\u95ED\u5F53\u524D"
   })), /*#__PURE__*/React.createElement("span", {
-    className: "player-tools-item"
+    className: "player-tools-item",
+    onClick: download
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lm-player-S_Edit_LoadDown",
     title: "\u4E0B\u8F7D\u5F53\u524D\u5F55\u50CF"

package/es/ScreenPlayer/SegmentTimeLine.d.ts

@@ -9,5 +9,5 @@ interface ISegmentTimeLineProps {
         timeMode: number;
     }) => void;
 }
-declare function SegmentTimeLine({ begin, timeCell, onTimeChange, timeMode }: ISegmentTimeLineProps): JSX.Element;
+declare function SegmentTimeLine({ begin, timeCell, onTimeChange, timeMode, updateState }: ISegmentTimeLineProps): JSX.Element;
 export default SegmentTimeLine;

package/es/ScreenPlayer/SegmentTimeLine.js

@@ -1,3 +1,5 @@
+import _useUnmount from "ahooks/es/useUnmount";
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 import _useThrottleFn2 from "ahooks/es/useThrottleFn";
 import _useSize from "ahooks/es/useSize";
 import moment from 'moment';
@@ -8,8 +10,10 @@ function SegmentTimeLine(_ref) {
   var begin = _ref.begin,
       timeCell = _ref.timeCell,
       onTimeChange = _ref.onTimeChange,
-      timeMode = _ref.timeMode;
+      timeMode = _ref.timeMode,
+      updateState = _ref.updateState;
   var ref = useRef();
+  var timeSliderRef = useRef();
 
   var size = _useSize(ref);
 
@@ -24,17 +28,32 @@ function SegmentTimeLine(_ref) {
       minutes: 0,
       seconds: 0
     }).valueOf();
-    var timeLine = new TimeSlider(ref.current, {
+    timeSliderRef.current = new TimeSlider(ref.current, {
       onTimeChange: run,
       start_timestamp: time - timeMode / 2 * 3600 * 1000,
       current_timestamp: time,
       timecell: timeCell,
-      hours_per_ruler: timeMode
+      hours_per_ruler: timeMode,
+      onHoursPerChange: function onHoursPerChange(hour) {
+        return updateState({
+          timeMode: hour
+        });
+      }
     });
-    return function () {
-      return timeLine.destory();
-    };
-  }, [begin, timeCell, size === null || size === void 0 ? void 0 : size.width, run, timeMode]);
+  }, [begin, timeCell, size === null || size === void 0 ? void 0 : size.width, run]);
+  /**
+   * hour变化更新时间轴而不是重绘
+   */
+
+  _useUpdateEffect(function () {
+    return timeSliderRef.current.drawHourChange(timeMode);
+  }, [timeMode]);
+
+  _useUnmount(function () {
+    timeSliderRef.current.destory();
+    timeSliderRef.current = null;
+  });
+
   return /*#__PURE__*/React.createElement("div", {
     className: "record-time-line"
   }, /*#__PURE__*/React.createElement("canvas", {

package/es/ScreenPlayer/TimeSlider.d.ts

@@ -5,6 +5,7 @@ export interface ITimeSliderOptions {
     timecell?: TimeCellItem[];
     current_timestamp?: number;
     onTimeChange?: (time: number, outTimeline?: boolean) => void;
+    onHoursPerChange?: (hour: number) => void;
 }
 export declare type TimeCellItem = ISegmentType;
 export default class TimeSlider {
@@ -115,6 +116,7 @@ export default class TimeSlider {
      * 滚轮放大缩小，以时间轴中心为准 mousewheel事件
      */
     mousewheelFunc: (event: any) => void;
+    drawHourChange(hour: number): void;
     /**
      * 获取鼠标posx
      * @param {*} e

package/es/ScreenPlayer/TimeSlider.js

@@ -5,6 +5,8 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
 import moment from 'moment';
+import { nextTick } from 'process';
+var hours = [1, 6, 12, 24];
 var currentColor = '#FF000A';
 var normalLineColor = '#ffffff';
 var hoverLineColor = '#319BFF';
@@ -177,24 +179,33 @@ var TimeSlider = /*#__PURE__*/function () {
       var middle_time = _this.start_timestamp + _this.hours_per_ruler * 3600 * 1000 / 2; //ms 记住当前中间的时间
 
       if (delta < 0) {
-        _this.zoom = _this.zoom + 4;
+        // 缩小
+        var index = hours.indexOf(_this.zoom);
 
-        if (_this.zoom >= 24) {
-          _this.zoom = 24; //放大最大24小时
+        if (index === hours.length - 1) {
+          _this.zoom = hours[index];
+        } else {
+          _this.zoom = hours[index + 1];
         }
 
         _this.hours_per_ruler = _this.zoom;
       } else if (delta > 0) {
         // 放大
-        _this.zoom = _this.zoom - 4;
+        var _index = hours.indexOf(_this.zoom);
 
-        if (_this.zoom <= 1) {
-          _this.zoom = 1; //缩小最小1小时
+        if (_index === 0) {
+          _this.zoom = hours[0];
+        } else {
+          _this.zoom = hours[_index - 1];
         }
 
         _this.hours_per_ruler = _this.zoom;
       }
 
+      nextTick(function () {
+        return _this.options.onHoursPerChange && _this.options.onHoursPerChange(_this.hours_per_ruler);
+      });
+
       _this.clearCanvas();
 
       _this.start_timestamp = middle_time - _this.hours_per_ruler * 3600 * 1000 / 2; //start_timestamp = 当前中间的时间 - zoom/2
@@ -512,6 +523,17 @@ var TimeSlider = /*#__PURE__*/function () {
         }
       }
     }
+  }, {
+    key: "drawHourChange",
+    value: function drawHourChange(hour) {
+      var middle_time = this.start_timestamp + this.hours_per_ruler * 3600 * 1000 / 2; //ms 记住当前中间的时间
+
+      this.hours_per_ruler = this.zoom = hour;
+      this.clearCanvas();
+      this.start_timestamp = middle_time - this.hours_per_ruler * 3600 * 1000 / 2; //start_timestamp = 当前中间的时间 - zoom/2
+
+      this.init(this.start_timestamp, this.timecell, true);
+    }
     /**
      * 清除canvas 每次重新绘制需要先清除
      */

package/es/ScreenPlayer/interface.d.ts

@@ -34,8 +34,9 @@ export interface IRecordPlayerProps {
    */
   onCloseAll?: () => void;
   /**
-   * 窗口索引变化，后续基于索引传入播放必要数据
+   * 录像下载回调
    */
+  download?: () => void;
 }
 
 export interface IRecordPlayerState {
@@ -77,7 +78,7 @@ export interface IRecordPlayerState {
   /**
    * 录像时间轴单页绘制时长单位（hour）
    */
-  timeMode:number
+  timeMode: number;
 }
 
 export type ScreenItemLivePlayerType = {

package/package.json

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