@cloud-app-dev/vidc 3.0.11 → 3.0.12

package/es/ScreenPlayer/PlayerWithExt.js

@@ -142,7 +142,7 @@ export function FrontendPlayerWithExt(_ref) {
       return;
     }
 
-    var endTime = moment(segments[segments.length - 1].endTime).unix();
+    var endTime = moment().unix();
     var beginTime = moment(time).unix();
     var videoUrl = new URL(state.url);
     videoUrl.searchParams.set('begin', "".concat(beginTime));
@@ -152,7 +152,7 @@ export function FrontendPlayerWithExt(_ref) {
         url: videoUrl.toString()
       });
     });
-  }, [segments, state.url]);
+  }, [state.url]);
   var ref = useRef();
   var update = useCallback(function () {
     return updatePlayer(ref);

package/es/ScreenPlayer/Record.js

@@ -413,7 +413,7 @@ function RecordPlayer(_ref) {
   }), /*#__PURE__*/React.createElement(SegmentTimeLine, {
     begin: timeBegin,
     updateState: updateState,
-    timeCell: segmentItem.segments,
+    segments: segmentItem.segments,
     key: state.selectIndex,
     onTimeChange: onTimeChange,
     timeMode: state.timeMode

package/es/ScreenPlayer/SegmentTimeLine.d.ts

@@ -2,12 +2,12 @@
 import { ISegmentType } from '../Player/player';
 interface ISegmentTimeLineProps {
     begin?: number;
-    timeCell?: ISegmentType[];
+    segments?: ISegmentType[];
     onTimeChange?: (time: number) => void;
     timeMode: number;
     updateState: (state: {
         timeMode: number;
     }) => void;
 }
-declare function SegmentTimeLine({ begin, timeCell, onTimeChange, timeMode, updateState }: ISegmentTimeLineProps): JSX.Element;
+declare function SegmentTimeLine({ begin, segments, onTimeChange, timeMode, updateState }: ISegmentTimeLineProps): JSX.Element;
 export default SegmentTimeLine;

package/es/ScreenPlayer/SegmentTimeLine.js

@@ -1,59 +1,40 @@
-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';
-import React, { useEffect, useRef } from 'react';
-import TimeSlider from './TimeSlider';
+import React, { useMemo, useRef } from 'react';
+import useTimeSlider from './useTimeSlider';
 
 function SegmentTimeLine(_ref) {
   var begin = _ref.begin,
-      timeCell = _ref.timeCell,
+      segments = _ref.segments,
       onTimeChange = _ref.onTimeChange,
       timeMode = _ref.timeMode,
       updateState = _ref.updateState;
   var ref = useRef();
-  var timeSliderRef = useRef();
-
-  var size = _useSize(ref);
 
   var _useThrottleFn = _useThrottleFn2(onTimeChange, {
     wait: 300
   }),
       run = _useThrottleFn.run;
 
-  useEffect(function () {
-    var time = begin !== null && begin !== void 0 ? begin : moment().set({
+  var time = useMemo(function () {
+    return begin !== null && begin !== void 0 ? begin : moment().set({
       hours: 0,
       minutes: 0,
       seconds: 0
     }).valueOf();
-    timeSliderRef.current = new TimeSlider(ref.current, {
-      onTimeChange: run,
-      start_timestamp: time - timeMode / 2 * 3600 * 1000,
-      current_timestamp: time,
-      timecell: timeCell,
-      hours_per_ruler: timeMode,
-      onHoursPerChange: function onHoursPerChange(hour) {
-        return updateState({
-          timeMode: hour
-        });
-      }
-    });
-  }, [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;
+  }, [begin]);
+  useTimeSlider(ref, {
+    begin: time - timeMode / 2 * 3600 * 1000,
+    currentTime: time,
+    onTimeChange: run,
+    segments: segments,
+    hoursPer: timeMode,
+    onHoursPerChange: function onHoursPerChange(hour) {
+      return updateState({
+        timeMode: hour
+      });
+    }
   });
-
   return /*#__PURE__*/React.createElement("div", {
     className: "record-time-line"
   }, /*#__PURE__*/React.createElement("canvas", {

package/es/ScreenPlayer/TimeSlider.d.ts

@@ -91,11 +91,11 @@ export default class TimeSlider {
      */
     mousemoveFunc2: (e: MouseEvent) => void;
     /**
-     * 拖动/点击 mouseup事件
+     * 点击 mouseup事件
      */
     mouseupFunc: (e: MouseEvent) => void;
     /**
-     * 拖动/点击 mouseup事件
+     * 拖动停止 mouseup事件
      */
     mouseupFunc2: () => void;
     /**

package/es/ScreenPlayer/TimeSlider.js

@@ -48,8 +48,9 @@ var TimeSlider = /*#__PURE__*/function () {
       _this.g_isMousedown = true;
       _this.g_mousedownCursor = _this.get_cursor_x_position(e); //记住mousedown的位置
 
-      document.addEventListener('mousemove', _this.mousemoveFunc);
-      document.addEventListener('mouseup', _this.mouseupFunc2);
+      document.addEventListener('mousemove', _this.mousemoveFunc); //拖动
+
+      document.addEventListener('mouseup', _this.mouseupFunc2); //停止拖动
     };
     /**
      * 鼠标移出隐藏时间 mouseout事件
@@ -112,16 +113,12 @@ var TimeSlider = /*#__PURE__*/function () {
       }
     };
     /**
-     * 拖动/点击 mouseup事件
+     * 点击 mouseup事件
      */
 
 
     this.mouseupFunc = function (e) {
-      if (_this.g_isMousemove) {
-        //拖动 事件
-        _this.g_isMousemove = false;
-        _this.g_isMousedown = false; // this.returnTime = this.start_timestamp + (this.hours_per_ruler * 3600 * 1000) / 2;
-      } else {
+      if (!_this.g_isMousemove) {
         // click 事件
         _this.g_isMousedown = false;
 
@@ -144,11 +141,9 @@ var TimeSlider = /*#__PURE__*/function () {
 
         _this.options.onTimeChange && _this.options.onTimeChange(current_timestamp, outTimeline);
       }
-
-      document.removeEventListener('mousemove', _this.mousemoveFunc);
     };
     /**
-     * 拖动/点击 mouseup事件
+     * 拖动停止 mouseup事件
      */
 
 
@@ -466,10 +461,14 @@ var TimeSlider = /*#__PURE__*/function () {
   }, {
     key: "add_events",
     value: function add_events() {
-      this.canvas.addEventListener('mousewheel', this.mousewheelFunc);
-      this.canvas.addEventListener('mousedown', this.mousedownFunc);
-      this.canvas.addEventListener('mousemove', this.mousemoveFunc2);
-      this.canvas.addEventListener('mouseup', this.mouseupFunc);
+      this.canvas.addEventListener('mousewheel', this.mousewheelFunc); // 调整刻度范围
+
+      this.canvas.addEventListener('mousedown', this.mousedownFunc); // 触发 拖动或者点击标记
+
+      this.canvas.addEventListener('mousemove', this.mousemoveFunc2); //hover 提示当前刻度时间
+
+      this.canvas.addEventListener('mouseup', this.mouseupFunc); // 点击触发
+
       this.canvas.addEventListener('mouseout', this.mouseoutFunc);
     }
   }, {
@@ -484,6 +483,7 @@ var TimeSlider = /*#__PURE__*/function () {
   }, {
     key: "destory",
     value: function destory() {
+      this.clearCanvas();
       this.remove_events();
       this.canvas = null;
       this.options = null;

package/es/ScreenPlayer/demo.js

@@ -3,16 +3,16 @@ import _ConfigProvider from "antd/lib/config-provider";
 import React from 'react';
 import LivePlayer from './Live';
 var list = [{
-  url: 'https://6a75ef90-3-server.antelopecloud.cn/flv_live?app=live&token=542446023_3356491776_1693469173_b34efba891f35a66b227642f66272534',
+  url: 'https://6a75ef90-3-server.antelopecloud.cn/flv_live?app=live&token=542446023_3356491776_1693558509_61374ba6efe326a4cb8b6bae86917a25',
   type: 'flv'
 }, {
-  url: 'https://6a75ef90-3-server.antelopecloud.cn/flv_live?app=live&token=542446023_3356491776_1693469173_b34efba891f35a66b227642f66272534',
+  url: 'https://6a75ef89-1-server.antelopecloud.cn/flv_live?app=live&token=542446501_3356491776_1693535295_37062417b87df4be7dd5c02b01d87248',
   type: 'flv'
 }, {
   url: 'https://6a75ef90-1-server.antelopecloud.cn/flv_live?app=live&token=542453821_3356491776_1693535323_3a90f54c141b9a246d5679678ebafe90',
   type: 'flv'
 }, {
-  url: 'https://6a75ef88-6-server.antelopecloud.cn/flv_live?app=live&token=542449206_3356491776_1693535342_803846974f04eb02e8115d10432d062f',
+  url: 'https://6a75ef90-6-server.antelopecloud.cn/flv_live?app=live&token=542449206_3356491776_1693535342_803846974f04eb02e8115d10432d062f',
   type: 'flv'
 }];
 export default function App() {

package/es/ScreenPlayer/useTimeSlider.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { ISegmentType } from '../Player/player';
+export interface ITimeSliderOptions {
+    hoursPer?: number;
+    begin?: number;
+    segments?: TimeCellItem[];
+    currentTime?: number;
+    onTimeChange?: (time: number, outTimeline?: boolean) => void;
+    onHoursPerChange?: (hour: number) => void;
+}
+export declare type ITimeSliderState = {
+    hoursPer: number;
+    begin: number;
+    currentTime: number;
+    hover: {
+        x: number;
+        time: number;
+    };
+};
+export declare type TimeCellItem = ISegmentType;
+declare function useTimeSlider(canvasRef: React.MutableRefObject<HTMLCanvasElement>, { hoursPer, begin, currentTime, segments, onTimeChange, onHoursPerChange }: ITimeSliderOptions): void;
+export default useTimeSlider;

package/es/ScreenPlayer/useTimeSlider.js

@@ -0,0 +1,485 @@
+import _nextTick from "@cloud-app-dev/utils/es/nextTick";
+import _useEventListener from "ahooks/es/useEventListener";
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
+import _useSize from "ahooks/es/useSize";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import moment from 'moment';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+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];
+var minStepSize = 20;
+var distance_between_gtitle = 80;
+/**
+ * 下一个刻度
+ */
+
+function ms_to_next_step(timestamp, step) {
+  var remainder = timestamp % step;
+  return remainder ? step - remainder : 0;
+}
+/**
+ * 返回 2018-01-01 10:00:00 格式时间
+ * @param {*} time
+ */
+
+
+function formartTimestemp(time) {
+  return moment(time).format('YYYY-MM-DD HH:mm:ss');
+}
+/**
+ * 返回时间轴上刻度的时间
+ * @param {*} datetime new Date 格式
+ */
+
+
+function graduation_title(datetime) {
+  var mom = moment(datetime);
+  var h = mom.get('hours');
+  var m = mom.get('minutes');
+  var s = mom.get('seconds');
+
+  if (h === 0 && m === 0 && s === 0) {
+    return mom.format('YYYY.MM.DD');
+  }
+
+  return mom.format('HH:mm');
+}
+/**
+ * 绘制线条
+ */
+
+
+function drawLine(ctx, beginX, beginY, endX, endY, color, width) {
+  ctx.beginPath();
+  ctx.moveTo(beginX, beginY);
+  ctx.lineTo(endX, endY);
+  ctx.strokeStyle = color;
+  ctx.lineWidth = width;
+  ctx.stroke();
+}
+
+function drawText(ctx, _ref) {
+  var fillStyle = _ref.fillStyle,
+      font = _ref.font,
+      text = _ref.text,
+      x = _ref.x,
+      y = _ref.y;
+  ctx.fillStyle = fillStyle;
+  ctx.font = font;
+  ctx.fillText(text, x, y);
+}
+
+function useTimeSlider(canvasRef, _ref2) {
+  var hoursPer = _ref2.hoursPer,
+      begin = _ref2.begin,
+      currentTime = _ref2.currentTime,
+      _ref2$segments = _ref2.segments,
+      segments = _ref2$segments === void 0 ? [] : _ref2$segments,
+      onTimeChange = _ref2.onTimeChange,
+      onHoursPerChange = _ref2.onHoursPerChange;
+
+  var _useState = useState({
+    hoursPer: hoursPer,
+    begin: begin,
+    currentTime: currentTime,
+    hover: {
+      x: 0,
+      time: null
+    }
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      state = _useState2[0],
+      setState = _useState2[1];
+
+  var extRef = useRef({
+    mousedownTime: null,
+    mousedownX: 0
+  });
+
+  var size = _useSize(canvasRef);
+
+  var canvas = canvasRef.current;
+
+  var _useMemo = useMemo(function () {
+    return size ? size : {
+      width: 0,
+      height: 0
+    };
+  }, [size]),
+      width = _useMemo.width,
+      height = _useMemo.height;
+
+  var ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
+
+  var update = function update() {
+    var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), params);
+    });
+  };
+
+  var clearCanvas = useCallback(function () {
+    return ctx.clearRect(0, 0, width, height);
+  }, [ctx, width, height]);
+  var drawOverlay = useCallback(function () {
+    segments.forEach(function (item) {
+      var _a;
+
+      var px_ms = width / (state.hoursPer * 60 * 60 * 1000); // px/ms
+
+      var beginX = (item.beginTime - state.begin) * px_ms;
+      var scale_width = (item.endTime - item.beginTime) * px_ms;
+      ctx.fillStyle = item.url ? ((_a = item.style) === null || _a === void 0 ? void 0 : _a.background) || hoverLineColor : '#242C3D';
+      ctx.fillRect(beginX, height - 10, scale_width + 1, height);
+    });
+  }, [ctx, segments, height, width, state.begin, state.hoursPer]);
+  /**
+   * 绘制刻度相关的
+   */
+
+  var drawScale = useCallback(function () {
+    var px_per_min = width / (state.hoursPer * 60); // px/min
+
+    var px_per_ms = width / (state.hoursPer * 60 * 60 * 1000); // px/ms
+
+    var px_per_step = minStepSize; // px/格 默认最小值20px
+
+    var min_per_step = px_per_step / px_per_min; // min/格
+
+    for (var i = 0; i < minPerStep.length; i++) {
+      if (min_per_step <= minPerStep[i]) {
+        //让每格时间在minutes_per_step规定的范围内
+        min_per_step = minPerStep[i];
+        px_per_step = px_per_min * min_per_step;
+        break;
+      }
+    }
+
+    var medium_step = 30;
+
+    for (var _i2 = 0; _i2 < minPerStep.length; _i2++) {
+      if (distance_between_gtitle / px_per_min <= minPerStep[_i2]) {
+        medium_step = minPerStep[_i2];
+        break;
+      }
+    }
+
+    var num_steps = width / px_per_step; //总格数
+
+    var ms_offset = ms_to_next_step(state.begin, min_per_step * 60 * 1000); //开始的偏移时间 ms
+
+    var px_offset = ms_offset * px_per_ms; //开始的偏移距离 px
+
+    var ms_per_step = px_per_step / px_per_ms; // ms/step
+
+    var graduation_left, graduation_time, lineH;
+
+    for (var _i3 = 0; _i3 < num_steps; _i3++) {
+      graduation_left = px_offset + _i3 * px_per_step; // 距离=开始的偏移距离+格数*px/格
+
+      graduation_time = state.begin + ms_offset + _i3 * ms_per_step; //时间=左侧开始时间+偏移时间+格数*ms/格
+
+      var date = moment(graduation_time);
+
+      if (date.get('hours') === 0 && date.get('minutes') === 0) {
+        lineH = 10;
+        var big_date = graduation_title(date.valueOf());
+        var x = graduation_left - 12;
+        drawText(ctx, {
+          fillStyle: normalLineColor,
+          font: '10px Arial',
+          x: x,
+          y: 30,
+          text: big_date
+        });
+      } else if (graduation_time / (60 * 1000) % medium_step === 0) {
+        lineH = 10;
+        var middle_date = graduation_title(date.valueOf());
+
+        var _x = graduation_left - (middle_date.length > 5 ? 24 : 12);
+
+        drawText(ctx, {
+          fillStyle: normalLineColor,
+          font: '10px Arial',
+          x: _x,
+          y: 30,
+          text: middle_date
+        });
+      } else {
+        lineH = 5;
+      }
+
+      drawLine(ctx, graduation_left, height - lineH, graduation_left, height, normalLineColor, 2);
+    }
+  }, [ctx, height, width, state.begin, state.hoursPer]);
+  /**
+   * 绘制当前刻度
+   * @returns
+   */
+
+  var drawCurrentLine = useCallback(function () {
+    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); //中间当前点线
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ctx, height, width, state.currentTime, state.begin, state.hoursPer]);
+  /**
+   * 绘制提示时间
+   */
+
+  var drawHoverLine = useCallback(function () {
+    drawText(ctx, {
+      fillStyle: hoverLineColor,
+      font: '12px Arial',
+      x: state.hover.x - 50,
+      y: 12,
+      text: formartTimestemp(state.hover.time)
+    });
+    drawLine(ctx, state.hover.x, 20, state.hover.x, height, hoverLineColor, 1);
+  }, [ctx, height, state.hover.time, state.hover.x]);
+  /**
+   * 获取鼠标posx
+   * @param {*} e
+   */
+
+  var get_cursor_x_position = function get_cursor_x_position(e) {
+    var posx = 0;
+
+    var _canvas$getBoundingCl = canvas.getBoundingClientRect(),
+        left = _canvas$getBoundingCl.left;
+
+    if (!e) {
+      e = window.event;
+    }
+
+    if (e.pageX || e.pageY) {
+      posx = e.pageX - left;
+    } else if (e.clientX || e.clientY) {
+      posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
+    }
+
+    return posx;
+  };
+  /**
+   * 更新画布大小
+   */
+
+
+  _useUpdateEffect(function () {
+    if (canvas) {
+      canvas.width = width;
+      canvas.height = height;
+    }
+  }, [canvas, height, width]);
+
+  useEffect(function () {
+    if (canvas) {
+      clearCanvas();
+      drawOverlay();
+      drawScale();
+      drawCurrentLine();
+      state.hover.time && drawHoverLine();
+    }
+  }, [canvas, state.begin, state.currentTime, state.hoursPer, segments, state.hover, clearCanvas, drawOverlay, drawScale, drawCurrentLine, drawHoverLine]);
+
+  _useUpdateEffect(function () {
+    return update({
+      begin: begin
+    });
+  }, [begin]);
+
+  _useUpdateEffect(function () {
+    return update({
+      hoursPer: hoursPer
+    });
+  }, [hoursPer]);
+
+  _useUpdateEffect(function () {
+    return update({
+      currentTime: currentTime
+    });
+  }, [currentTime]);
+
+  _useEventListener('mousewheel', function (event) {
+    event.preventDefault();
+    var delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail));
+    var middle_time = state.begin + state.hoursPer * 3600 * 1000 / 2; //ms 记住当前中间的时间
+
+    var new_hoursPer = state.hoursPer;
+    var index = hours.indexOf(new_hoursPer);
+
+    if (delta < 0) {
+      // 缩小
+      if (index === hours.length - 1) {
+        new_hoursPer = hours[index];
+      } else {
+        new_hoursPer = hours[index + 1];
+      }
+    } else if (delta > 0) {
+      // 放大
+      if (index === 0) {
+        new_hoursPer = hours[0];
+      } else {
+        new_hoursPer = hours[index - 1];
+      }
+    }
+
+    var new_begin = middle_time - state.hoursPer * 3600 * 1000 / 2; //start_timestamp = 当前中间的时间 - zoom/2
+
+    setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        begin: new_begin,
+        hoursPer: new_hoursPer
+      });
+    });
+
+    _nextTick(function () {
+      return onHoursPerChange && onHoursPerChange(new_hoursPer);
+    });
+  }, {
+    target: canvasRef
+  });
+
+  _useEventListener('mouseout', function () {
+    return setState(function (old) {
+      return Object.assign(Object.assign({}, old), {
+        hover: {
+          x: 0,
+          time: null
+        }
+      });
+    });
+  }, {
+    target: canvasRef
+  });
+
+  _useEventListener('mousemove', function (e) {
+    if (extRef.current.mousedownTime) {
+      setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          hover: old.hover.time ? {
+            x: 0,
+            time: null
+          } : old.hover
+        });
+      });
+    } else {
+      // 触发绘制hover tips
+      var pos_x = get_cursor_x_position(e);
+      var ms_per_px = state.hoursPer * 3600 * 1000 / width; // ms/px
+
+      var current_timestamp = state.begin + pos_x * ms_per_px;
+      setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          hover: {
+            x: pos_x,
+            time: current_timestamp
+          }
+        });
+      });
+    }
+  }, {
+    target: canvasRef
+  });
+
+  _useEventListener('mousedown', function (e) {
+    extRef.current.mousedownTime = Date.now();
+    extRef.current.mousedownX = get_cursor_x_position(e); //记住mousedown的位置
+  }, {
+    target: canvasRef
+  });
+
+  _useEventListener('mouseup', function (e) {
+    if (!extRef.current.mousedownTime) {
+      return;
+    }
+
+    var clickDelay = Date.now() - extRef.current.mousedownTime;
+
+    if (clickDelay < 300 && e.target === canvas) {
+      // click 事件
+      var pos_x = get_cursor_x_position(e); //鼠标距离 px
+
+      var ms_per_px = state.hoursPer * 3600 * 1000 / width; // ms/px
+
+      var new_current = state.begin + pos_x * ms_per_px;
+      var segmentItem = segments.find(function (v) {
+        return new_current >= v.beginTime && new_current < v.endTime;
+      }); // 当前片段没有录像的时候
+
+      var outTimeline = segmentItem && !segmentItem.url;
+      var new_begin = new_current - state.hoursPer * 60 * 60 * 1000 / 2;
+      setState(function (old) {
+        return Object.assign(Object.assign({}, old), {
+          begin: new_begin,
+          current: new_current
+        });
+      });
+
+      _nextTick(function () {
+        return onTimeChange && onTimeChange(new_current, outTimeline);
+      });
+    } // 清楚拖拽关联信息
+
+
+    extRef.current.mousedownTime = null;
+    extRef.current.mousedownX = 0;
+  }, {
+    target: document
+  });
+
+  _useEventListener('mousemove', function (e) {
+    if (!extRef.current.mousedownTime) {
+      return;
+    } // 触发拖动
+
+
+    var pos_x = get_cursor_x_position(e);
+    var px_per_ms = width / (state.hoursPer * 60 * 60 * 1000); // px/ms
+
+    var diff_x = pos_x - extRef.current.mousedownX;
+    var new_begin = state.begin - Math.round(diff_x / px_per_ms);
+    extRef.current.mousedownX = pos_x;
+    update({
+      begin: new_begin
+    });
+  }, {
+    target: document
+  });
+}
+
+export default useTimeSlider;

package/package.json

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