@cloud-app-dev/vidc 3.0.9 → 3.0.12

package/es/ScreenPlayer/PlayerWithExt.js

@@ -69,7 +69,8 @@ export function SegmentPlayerWithExt(_a) {
       segments = _a.segments,
       updatePlayer = _a.updatePlayer,
       onClick = _a.onClick,
-      props = __rest(_a, ["begin", "style", "className", "segments", "updatePlayer", "onClick"]);
+      mode = _a.mode,
+      props = __rest(_a, ["begin", "style", "className", "segments", "updatePlayer", "onClick", "mode"]);
 
   var ref = useRef();
   var update = useCallback(function () {
@@ -87,7 +88,7 @@ export function SegmentPlayerWithExt(_a) {
     onDoubleClick: toggleFullscreen
   }, /*#__PURE__*/React.createElement(ExtModel, {
     segments: segments,
-    mode: 1
+    mode: mode
   }, /*#__PURE__*/React.createElement(SegmentPlayer, Object.assign({}, props, {
     segments: segments,
     type: "hls",
@@ -141,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));
@@ -151,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.d.ts

@@ -6,5 +6,5 @@ import './index.less';
  * @param param0
  * @returns
  */
-declare function RecordPlayer({ list, children, queryRecord, onIndexChange, onClose, onCloseAll, download }: IRecordPlayerProps): JSX.Element;
+declare function RecordPlayer({ list, children, queryRecord, onIndexChange, onClose, onCloseAll, download, snapshot, defaultScreen, screenChange, defaultSelectIndex, }: IRecordPlayerProps): JSX.Element;
 export default RecordPlayer;

package/es/ScreenPlayer/Record.js

@@ -1,5 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
+import _useUpdateEffect from "ahooks/es/useUpdateEffect";
 import "antd/lib/message/style";
 import _message from "antd/lib/message";
 import _usePrevious from "ahooks/es/usePrevious";
@@ -36,6 +37,16 @@ import useRecordList from './useRecordList';
 import useVideoFit from './useVideoFit';
 import DisableMark from '../DisableMark';
 import "./index.css";
+var defaultState = {
+  screenNum: 4,
+  selectIndex: 0,
+  modes: [],
+  currentTimes: [],
+  loading: false,
+  seekTo: 0,
+  mergeSegments: [],
+  timeMode: 24
+};
 /**
  * @desc 录像设计的时间全部需要到毫秒
  * @param param0
@@ -51,18 +62,15 @@ function RecordPlayer(_ref) {
       onIndexChange = _ref.onIndexChange,
       onClose = _ref.onClose,
       onCloseAll = _ref.onCloseAll,
-      download = _ref.download;
-
-  var _useState = useState({
-    screenNum: 4,
-    selectIndex: 0,
-    mode: 1,
-    currentTimes: [],
-    loading: false,
-    seekTo: 0,
-    mergeSegments: [],
-    timeMode: 24
-  }),
+      download = _ref.download,
+      snapshot = _ref.snapshot,
+      defaultScreen = _ref.defaultScreen,
+      screenChange = _ref.screenChange,
+      defaultSelectIndex = _ref.defaultSelectIndex;
+
+  var _useState = useState(Object.assign(Object.assign({}, defaultState), {
+    screenNum: defaultScreen !== null && defaultScreen !== void 0 ? defaultScreen : defaultState.screenNum
+  })),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
       setState = _useState2[1];
@@ -114,11 +122,6 @@ function RecordPlayer(_ref) {
 
     return (_a = state.currentTimes[state.selectIndex]) !== null && _a !== void 0 ? _a : segmentItem.date;
   }, [segmentItem.date, state.currentTimes, state.selectIndex]);
-  /**
-   *  专门
-   */
-
-  useEffect(function () {}, [fit]);
   /**
    * @desc 用户缓存接收list的变化。
    */
@@ -203,7 +206,10 @@ function RecordPlayer(_ref) {
     }
 
     if (newState.hasOwnProperty('mode')) {
-      obj.mode = newState.mode;
+      var newModes = _toConsumableArray(state.modes);
+
+      newModes[state.selectIndex] = newState.mode;
+      obj.modes = newModes;
     }
 
     if (newState.hasOwnProperty('timeMode')) {
@@ -307,20 +313,44 @@ function RecordPlayer(_ref) {
     setState(function (old) {
       return Object.assign({}, old);
     });
-  }; // index变化同步到父组件
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+  };
+  /**
+   * 同步外部的selectIndex变化
+   */
 
 
   useEffect(function () {
-    return onIndexChange(state.selectIndex);
+    if (typeof defaultSelectIndex !== 'number') {
+      return;
+    }
+
+    setState(function (old) {
+      if (old.selectIndex !== defaultSelectIndex) {
+        return Object.assign(Object.assign({}, old), {
+          selectIndex: defaultSelectIndex
+        });
+      }
+
+      return old;
+    });
+  }, [defaultSelectIndex]); // index变化同步到父组件
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  _useUpdateEffect(function () {
+    return onIndexChange && onIndexChange(state.selectIndex);
   }, [state.selectIndex]);
+
+  _useUpdateEffect(function () {
+    return screenChange && screenChange(state.screenNum);
+  }, [state.screenNum]);
+
   return /*#__PURE__*/React.createElement("div", {
-    className: "split-screen-player-wrapper split-screen-player-wrapper-record",
-    ref: domRef
+    className: "split-screen-player-wrapper split-screen-player-wrapper-record"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "player-layout"
+    className: "player-layout",
+    ref: domRef
   }, screenList.map(function (item, index) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
 
     return item.recordType === 1 ? /*#__PURE__*/React.createElement(SegmentPlayerWithExt, Object.assign({}, item, {
       segments: ((_a = recordList[index]) === null || _a === void 0 ? void 0 : _a.segments) || [],
@@ -339,10 +369,11 @@ function RecordPlayer(_ref) {
       style: {
         width: screenType.width,
         height: screenType.height
-      }
+      },
+      mode: (_d = item.mode) !== null && _d !== void 0 ? _d : state.modes[index]
     })) : /*#__PURE__*/React.createElement(FrontendPlayerWithExt, Object.assign({}, item, {
       className: state.selectIndex === index ? 'player-current-index' : '',
-      segments: ((_d = recordList[index]) === null || _d === void 0 ? void 0 : _d.segments) || [],
+      segments: ((_e = recordList[index]) === null || _e === void 0 ? void 0 : _e.segments) || [],
       updatePlayer: function updatePlayer(player) {
         return _updatePlayer(player, index);
       },
@@ -353,8 +384,8 @@ function RecordPlayer(_ref) {
           });
         });
       },
-      mode: state.mode,
-      key: "".concat((_e = item === null || item === void 0 ? void 0 : item.date) !== null && _e !== void 0 ? _e : '', "-").concat((_f = item.cid) !== null && _f !== void 0 ? _f : '', "-").concat(index),
+      mode: (_f = item.mode) !== null && _f !== void 0 ? _f : state.modes[index],
+      key: "".concat((_g = item === null || item === void 0 ? void 0 : item.date) !== null && _g !== void 0 ? _g : '', "-").concat((_h = item.cid) !== null && _h !== void 0 ? _h : '', "-").concat(index),
       style: {
         width: screenType.width,
         height: screenType.height
@@ -370,18 +401,19 @@ function RecordPlayer(_ref) {
     toggleFit: toggleFit,
     getPlayerItem: getPlayerItem,
     screenNum: state.screenNum,
-    mode: state.mode,
+    mode: state.modes[state.selectIndex],
     containerRef: domRef,
     updateState: updateState,
     onTimeChange: onTimeChange,
     onClose: onClose,
     onCloseAll: onCloseAll,
     timeMode: state.timeMode,
-    download: download
+    download: download,
+    snapshot: snapshot
   }), /*#__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/RecordTools.d.ts

@@ -19,6 +19,7 @@ interface IToolsProps {
     onCloseAll?: () => void;
     timeMode: number;
     download?: () => void;
+    snapshot?: (base64: string) => void;
 }
-declare function RecordTools({ containerRef, updateState, download, 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, snapshot, }: IToolsProps): JSX.Element;
 export default RecordTools;

package/es/ScreenPlayer/RecordTools.js

@@ -32,7 +32,8 @@ function RecordTools(_ref) {
       time = _ref.time,
       onTimeChange = _ref.onTimeChange,
       onClose = _ref.onClose,
-      onCloseAll = _ref.onCloseAll;
+      onCloseAll = _ref.onCloseAll,
+      snapshot = _ref.snapshot;
 
   var _useFullscreen = _useFullscreen3(containerRef),
       _useFullscreen2 = _slicedToArray(_useFullscreen, 2),
@@ -56,9 +57,10 @@ function RecordTools(_ref) {
     player ? player.reload ? player.reload() : player.api.reload() : undefined;
   };
 
-  var snapshot = function snapshot() {
+  var snapshotaction = function snapshotaction() {
     var player = getPlayerItem();
-    return player ? player.api.snapshot() : undefined;
+    var base64 = player ? player.api.snapshot() : undefined;
+    snapshot && snapshot(base64);
   };
 
   var player = getPlayerItem();
@@ -76,7 +78,7 @@ function RecordTools(_ref) {
   }, /*#__PURE__*/React.createElement(IconFont, {
     type: "lm-player-xiangji1fill",
     title: "\u622A\u56FE",
-    onClick: snapshot
+    onClick: snapshotaction
   })), /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item",
     onClick: reload
@@ -85,38 +87,56 @@ function RecordTools(_ref) {
     title: "\u91CD\u8F7D"
   })), /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item",
-    onClick: onClose
+    onClick: download
   }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-YesorNo_No_Dark",
-    title: "\u5173\u95ED\u5F53\u524D"
+    type: "lm-player-xiazai",
+    title: "\u4E0B\u8F7D\u5F53\u524D\u5F55\u50CF"
   })), /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item",
-    onClick: download
+    onClick: function onClick() {
+      return updateState({
+        mode: mode !== 2 ? 2 : 1
+      });
+    }
   }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-S_Edit_LoadDown",
-    title: "\u4E0B\u8F7D\u5F53\u524D\u5F55\u50CF"
+    style: {
+      top: 2,
+      position: 'relative',
+      left: 1
+    },
+    type: "lm-player-S_Device_shezhi",
+    title: "\u5207\u6362".concat(mode === 1 ? '插件' : '浏览器', "\u6A21\u5F0F")
   }))), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-mid"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "player-tools-item",
-    onClick: playToggle
-  }, player && !player.video.paused ? /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-Pause_Main",
-    title: "\u6682\u505C"
-  }) : /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-Play_Main",
-    title: "\u64AD\u653E"
+    onClick: onClose
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    type: "lm-player-tingzhi",
+    title: "\u505C\u6B62",
+    style: {
+      fontSize: 16
+    }
   })), /*#__PURE__*/React.createElement(TimeSelect, {
     time: time,
     onChange: onTimeChange
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-item",
     onClick: playToggle
   }, player && !player.video.paused ? /*#__PURE__*/React.createElement(IconFont, {
     type: "lm-player-Pause_Main",
-    title: "\u6682\u505C"
+    title: "\u6682\u505C",
+    style: {
+      fontSize: 22
+    }
   }) : /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-Play_Main",
+    style: {
+      fontSize: 17,
+      position: 'relative',
+      left: 2,
+      top: 2
+    },
+    type: "lm-player-bofang",
     title: "\u64AD\u653E"
   }))), /*#__PURE__*/React.createElement("div", {
     className: "player-tools-right"
@@ -124,26 +144,16 @@ function RecordTools(_ref) {
     className: "player-tools-item",
     onClick: onCloseAll
   }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-YesorNo_No_Dark",
+    type: "lm-player-quanbuguanbi",
     title: "\u5173\u95ED\u6240\u6709"
-  })), /*#__PURE__*/React.createElement("span", {
-    className: "player-tools-item",
-    onClick: function onClick() {
-      return updateState({
-        mode: mode === 1 ? 2 : 1
-      });
-    }
-  }, /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-YesorNo_No_Dark",
-    title: "\u5207\u6362".concat(mode === 1 ? '插件' : '浏览器', "\u6A21\u5F0F")
   })), /*#__PURE__*/React.createElement("span", {
     className: "player-tools-item",
     onClick: toggleFit
   }, fit === 'fill' ? /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-S_View_ScreenSizeFull",
+    type: "lm-player-huamianshiying",
     title: "\u81EA\u9002\u5E94"
   }) : /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-S_View_ScreenSizeFull",
+    type: "lm-player-huamianshiying",
     title: "\u586B\u5145"
   })), /*#__PURE__*/React.createElement(ScreenSelect, {
     screenNum: screenNum,
@@ -152,10 +162,10 @@ function RecordTools(_ref) {
     className: "player-tools-item",
     onClick: toggleFullscreen
   }, isFullscreen ? /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-ExitFull_Main",
+    type: "lm-player-quanping",
     title: "\u5168\u5C4F"
   }) : /*#__PURE__*/React.createElement(IconFont, {
-    type: "lm-player-Full_Main",
+    type: "lm-player-quanping",
     title: "\u5168\u5C4F"
   })), /*#__PURE__*/React.createElement(TimeMode, {
     timeMode: timeMode,

package/es/ScreenPlayer/ScreenSelect.js

@@ -1,28 +1,49 @@
-import "antd/lib/tooltip/style";
-import _Tooltip from "antd/lib/tooltip";
-import React from 'react';
+import "antd/lib/select/style";
+import _Select from "antd/lib/select";
+import React, { useMemo } from 'react';
+import CustomRenderSelect from '../CustomRenderSelect';
 import { ScreenType } from './utils';
+import IconFont from '../Player/iconfont';
 
 function ScreenSelect(_ref) {
   var screenNum = _ref.screenNum,
       updateState = _ref.updateState;
-  return /*#__PURE__*/React.createElement(_Tooltip, {
-    title: /*#__PURE__*/React.createElement("div", null, ScreenType.map(function (item) {
-      return /*#__PURE__*/React.createElement("div", {
-        key: "".concat(item.name),
-        style: {
-          padding: 6
-        },
-        onClick: function onClick() {
-          return updateState({
-            screenNum: item.name
-          });
-        }
-      }, item.name);
-    }))
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "player-tools-item"
-  }, screenNum));
+  var icon = useMemo(function () {
+    return ScreenType.find(function (v) {
+      return v.name === screenNum;
+    }).icon;
+  }, []);
+  return /*#__PURE__*/React.createElement(CustomRenderSelect, {
+    value: screenNum,
+    dropdownClassName: "custom-select-dropdown ",
+    customRender: function customRender() {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "select-current-screen-item"
+      }, /*#__PURE__*/React.createElement(IconFont, {
+        type: icon
+      }));
+    },
+    onChange: function onChange(v) {
+      return updateState({
+        screenNum: v
+      });
+    },
+    placement: "topLeft"
+  }, ScreenType.map(function (item) {
+    return /*#__PURE__*/React.createElement(_Select.Option, {
+      key: "".concat(item.name),
+      value: item.name
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        paddingRight: 4,
+        color: 'var(--icon)',
+        position: 'relative',
+        top: 1
+      }
+    }, /*#__PURE__*/React.createElement(IconFont, {
+      type: item.icon
+    })), item.name, "\u5206\u5C4F");
+  }));
 }
 
 export default ScreenSelect;

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/TimeMode.js

@@ -10,13 +10,19 @@ function TimeMode(_ref) {
     value: timeMode,
     onChange: onChange,
     className: "time-mode-select",
-    dropdownClassName: "time-mode-select-dropdown",
+    dropdownClassName: "custom-select-dropdown",
     placement: "topLeft"
   }, TimeModeLibs.map(function (item) {
     return /*#__PURE__*/React.createElement(_Select.Option, {
       value: item.name,
       key: item.name
-    }, item.name, "\u5C0F\u65F6");
+    }, /*#__PURE__*/React.createElement("span", {
+      style: {
+        display: 'inline-block',
+        width: 20,
+        textAlign: 'center'
+      }
+    }, item.name), "\u5C0F\u65F6");
   }));
 }
 

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;