@vtx/player 1.0.11 → 1.0.13

package/lib/history-control-v2/components/grid-item/index.js

@@ -4,63 +4,93 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+
 var _jsxRuntime = require("react/jsx-runtime");
+
 var _react = require("react");
+
 var _controls = require("../../../controls");
+
 var _historyPlayer = _interopRequireDefault(require("../../../history-player"));
+
 var _context = require("../../context");
+
 var _utils = require("../../utils");
+
 var _ahooks = require("ahooks");
+
 var _lodash = _interopRequireDefault(require("lodash"));
+
 var _moment = _interopRequireDefault(require("moment"));
+
 var _setTagVideo = _interopRequireDefault(require("../../../components/set-tag-video"));
+
 var _tagVideo = _interopRequireDefault(require("../../../components/tag-video"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 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 = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+
+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; }
+
 var GridItem = function GridItem(props) {
   var _useContext = (0, _react.useContext)(_context.historyControlV2Context),
-    loading = _useContext.loading,
-    channels = _useContext.channels,
-    setChannels = _useContext.setChannels,
-    activeIndex = _useContext.activeIndex,
-    setTimeLinePosition = _useContext.setTimeLinePosition; // setTimeLinePosition
+      loading = _useContext.loading,
+      channels = _useContext.channels,
+      setChannels = _useContext.setChannels,
+      activeIndex = _useContext.activeIndex,
+      setTimeLinePosition = _useContext.setTimeLinePosition; // setTimeLinePosition
+
+
   var active = props.active,
-    onClick = props.onClick,
-    onClose = props.onClose,
-    onScreenshot = props.onScreenshot,
-    scale = props.scale,
-    _props$palyIndex = props.palyIndex,
-    palyIndex = _props$palyIndex === void 0 ? 0 : _props$palyIndex,
-    _props$channel = props.channel,
-    channel = _props$channel === void 0 ? _utils.DEFAULT_PLAY_PARAMS : _props$channel;
+      onTimeChange = props.onTimeChange,
+      onClick = props.onClick,
+      onClose = props.onClose,
+      onScreenshot = props.onScreenshot,
+      scale = props.scale,
+      _props$palyIndex = props.palyIndex,
+      palyIndex = _props$palyIndex === void 0 ? 0 : _props$palyIndex,
+      _props$channel = props.channel,
+      channel = _props$channel === void 0 ? _utils.DEFAULT_PLAY_PARAMS : _props$channel;
+
   var _useState = (0, _react.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    tagSetShow = _useState2[0],
-    setTagSetShow = _useState2[1];
+      _useState2 = _slicedToArray(_useState, 2),
+      tagSetShow = _useState2[0],
+      setTagSetShow = _useState2[1];
+
   var url = channel.url,
-    startTime = channel.startTime,
-    endTime = channel.endTime,
-    channelName = channel.channelName,
-    deviceName = channel.deviceName,
-    hasLabel = channel.hasLabel;
+      startTime = channel.startTime,
+      endTime = channel.endTime,
+      channelName = channel.channelName,
+      deviceName = channel.deviceName,
+      hasLabel = channel.hasLabel;
+
   var _useSetState = (0, _ahooks.useSetState)({
-      width: '100%',
-      height: '100%'
-    }),
-    _useSetState2 = _slicedToArray(_useSetState, 2),
-    _useSetState2$ = _useSetState2[0],
-    width = _useSetState2$.width,
-    height = _useSetState2$.height,
-    setState = _useSetState2[1];
+    width: '100%',
+    height: '100%'
+  }),
+      _useSetState2 = _slicedToArray(_useSetState, 2),
+      _useSetState2$ = _useSetState2[0],
+      width = _useSetState2$.width,
+      height = _useSetState2$.height,
+      setState = _useSetState2[1];
+
   var gridItemRef = (0, _react.useRef)(null);
   var gridItemSize = (0, _ahooks.useSize)(gridItemRef);
   (0, _react.useEffect)(function () {
@@ -72,6 +102,7 @@ var GridItem = function GridItem(props) {
             height: gridItemSize.height - 26
           });
           break;
+
         case '4*3':
           if (gridItemSize.width / 4 < (gridItemSize.height - 26) / 3) {
             setState({
@@ -84,7 +115,9 @@ var GridItem = function GridItem(props) {
               height: '100%'
             });
           }
+
           break;
+
         case '16*9':
           if (gridItemSize.width / 16 < (gridItemSize.height - 26) / 9) {
             setState({
@@ -97,6 +130,7 @@ var GridItem = function GridItem(props) {
               height: '100%'
             });
           }
+
           break;
       }
     }
@@ -109,9 +143,11 @@ var GridItem = function GridItem(props) {
   var isExpanded = false;
   var showInfo = false;
   var info = [];
-  var handleTimeChange = function handleTimeChange(time) {
+
+  var handleTimeChange = function handleTimeChange(time, speed) {
     if (time !== '' && channels[palyIndex].tagId == '' && channels[palyIndex].index != -1 && (0, _moment["default"])(time).diff((0, _moment["default"])(channels[palyIndex].endTime), 'seconds') >= 0) {
       var newChannels = _toConsumableArray(channels);
+
       var length = channels[palyIndex].tableList.length;
       var index = channels[palyIndex].index + 1 % length;
       newChannels[palyIndex].index = index;
@@ -119,11 +155,14 @@ var GridItem = function GridItem(props) {
       newChannels[palyIndex].endTime = channels[palyIndex].tableList[index].endTime;
       setChannels(newChannels);
     }
+
     if (palyIndex === activeIndex) {
       var progress = (0, _moment["default"])(time).diff((0, _moment["default"])(startTime).startOf('day'), 'seconds') / (24 * 60 * 60) * 100;
       setTimeLinePosition(progress);
+      onTimeChange && onTimeChange(time, speed);
     }
   };
+
   return (0, _jsxRuntime.jsx)("div", Object.assign({
     className: "grid-item-container ".concat(active ? 'active' : '', " ").concat(loading ? '' : 'emptyImg'),
     onClick: onClick,
@@ -164,6 +203,7 @@ var GridItem = function GridItem(props) {
     })
   }));
 };
+
 var _default = GridItem;
 exports["default"] = _default;
 //# sourceMappingURL=index.js.map

package/lib/history-control-v2/components/grid-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["_jsxRuntime","require","_react","_controls","_historyPlayer","_interopRequireDefault","_context","_utils","_ahooks","_lodash","_moment","_setTagVideo","_tagVideo","obj","__esModule","_toConsumableArray","arr","_arrayWithoutHoles","_iterableToArray","_unsupportedIterableToArray","_nonIterableSpread","TypeError","iter","Symbol","iterator","Array","from","isArray","_arrayLikeToArray","_slicedToArray","i","_arrayWithHoles","_iterableToArrayLimit","_nonIterableRest","o","minLen","n","Object","prototype","toString","call","slice","constructor","name","test","len","length","arr2","_i","_s","_e","_x","_r","_arr","_n","_d","next","done","push","value","err","GridItem","props","_useContext","useContext","historyControlV2Context","loading","channels","setChannels","activeIndex","setTimeLinePosition","active","onClick","onClose","onScreenshot","scale","_props$palyIndex","palyIndex","_props$channel","channel","DEFAULT_PLAY_PARAMS","_useState","useState","_useState2","tagSetShow","setTagSetShow","url","startTime","endTime","channelName","deviceName","hasLabel","_useSetState","useSetState","width","height","_useSetState2","_useSetState2$","setState","gridItemRef","useRef","gridItemSize","useSize","useEffect","historyPlayerProps","isExpanded","showInfo","info","handleTimeChange","time","tagId","index","moment","diff","newChannels","tableList","beginTime","progress","startOf","_jsx","assign","className","concat","ref","children","channelNum","_jsxs","_Fragment","PlayerHeader","extraButton","TagVideo","style","HistoryPlayer","controlBottom","onTimeChange","_","throttle","controlVisible","SetTagVideo","screenshot","_default","exports"],"sources":["history-control-v2/components/grid-item/index.js"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useContext, useEffect, useRef, useState } from 'react';\nimport { PlayerHeader } from '../../../controls';\nimport HistoryPlayer from '../../../history-player';\nimport { historyControlV2Context } from '../../context';\nimport { DEFAULT_PLAY_PARAMS } from '../../utils';\nimport { useSetState, useSize } from 'ahooks';\nimport _ from 'lodash';\nimport moment from 'moment';\nimport SetTagVideo from '../../../components/set-tag-video';\nimport TagVideo from '../../../components/tag-video';\nconst GridItem = (props) => {\n    const { loading, channels, setChannels, activeIndex, setTimeLinePosition } = useContext(historyControlV2Context); // setTimeLinePosition\n    const { active, onClick, onClose, onScreenshot, scale, palyIndex = 0, channel = DEFAULT_PLAY_PARAMS } = props;\n    const [tagSetShow, setTagSetShow] = useState(false);\n    const { url, startTime, endTime, channelName, deviceName, hasLabel } = channel;\n    const [{ width, height }, setState] = useSetState({\n        width: '100%',\n        height: '100%',\n    });\n    const gridItemRef = useRef(null);\n    const gridItemSize = useSize(gridItemRef);\n    useEffect(() => {\n        if ((gridItemSize === null || gridItemSize === void 0 ? void 0 : gridItemSize.width) && (gridItemSize === null || gridItemSize === void 0 ? void 0 : gridItemSize.height)) {\n            switch (scale) {\n                case '100%':\n                    setState({\n                        width: '100%',\n                        height: gridItemSize.height - 26,\n                    });\n                    break;\n                case '4*3':\n                    if (gridItemSize.width / 4 < (gridItemSize.height - 26) / 3) {\n                        setState({\n                            width: '100%',\n                            height: (gridItemSize.width / 4) * 3,\n                        });\n                    }\n                    else {\n                        setState({\n                            width: ((gridItemSize.height - 26) / 3) * 4,\n                            height: '100%',\n                        });\n                    }\n                    break;\n                case '16*9':\n                    if (gridItemSize.width / 16 < (gridItemSize.height - 26) / 9) {\n                        setState({\n                            width: '100%',\n                            height: (gridItemSize.width / 16) * 9,\n                        });\n                    }\n                    else {\n                        setState({\n                            width: ((gridItemSize.height - 26) / 9) * 16,\n                            height: '100%',\n                        });\n                    }\n                    break;\n            }\n        }\n    }, [gridItemSize, scale]);\n    const historyPlayerProps = {\n        url,\n        startTime,\n        endTime,\n    };\n    const isExpanded = false;\n    const showInfo = false;\n    const info = [];\n    const handleTimeChange = (time) => {\n        if (time !== '' && channels[palyIndex].tagId == '' && channels[palyIndex].index != -1 && moment(time).diff(moment(channels[palyIndex].endTime), 'seconds') >= 0) {\n            const newChannels = [...channels];\n            const length = channels[palyIndex].tableList.length;\n            const index = channels[palyIndex].index + 1 % length;\n            newChannels[palyIndex].index = index;\n            newChannels[palyIndex].startTime = channels[palyIndex].tableList[index].beginTime;\n            newChannels[palyIndex].endTime = channels[palyIndex].tableList[index].endTime;\n            setChannels(newChannels);\n        }\n        if (palyIndex === activeIndex) {\n            const progress = (moment(time).diff(moment(startTime).startOf('day'), 'seconds') / (24 * 60 * 60)) *\n                100;\n            setTimeLinePosition(progress);\n        }\n    };\n    return (_jsx(\"div\", Object.assign({ className: `grid-item-container ${active ? 'active' : ''} ${loading ? '' : 'emptyImg'}`, onClick: onClick, ref: gridItemRef }, { children: channel.channelNum && (_jsxs(_Fragment, { children: [_jsx(PlayerHeader, { name: `${deviceName}-${channelName}`, onClose: onClose, extraButton: hasLabel ? _jsx(TagVideo, { channel: channel }) : null }), _jsx(\"div\", Object.assign({ className: \"player-container\" }, { children: historyPlayerProps.url && historyPlayerProps.startTime && historyPlayerProps.endTime && (_jsx(\"div\", Object.assign({ style: { width, height } }, { children: _jsx(HistoryPlayer, Object.assign({}, historyPlayerProps, { controlBottom: isExpanded ? 235 : 0, onTimeChange: _.throttle(handleTimeChange, 999), showInfo: showInfo, info: info, controlVisible: tagSetShow, activeIndex: palyIndex, extraButton: _jsx(SetTagVideo, { tagSetShow: tagSetShow, setTagSetShow: setTagSetShow, channel: channel }), screenshot: onScreenshot })) }))) }))] })) })));\n};\nexport default GridItem;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["GridItem","props","useContext","historyControlV2Context","loading","channels","setChannels","activeIndex","setTimeLinePosition","active","onTimeChange","onClick","onClose","onScreenshot","scale","palyIndex","channel","DEFAULT_PLAY_PARAMS","useState","tagSetShow","setTagSetShow","url","startTime","endTime","channelName","deviceName","hasLabel","useSetState","width","height","setState","gridItemRef","useRef","gridItemSize","useSize","useEffect","historyPlayerProps","isExpanded","showInfo","info","handleTimeChange","time","speed","tagId","index","moment","diff","newChannels","length","tableList","beginTime","progress","startOf","_jsx","Object","assign","className","ref","children","channelNum","_jsxs","_Fragment","PlayerHeader","name","extraButton","TagVideo","style","HistoryPlayer","controlBottom","_","throttle","controlVisible","SetTagVideo","screenshot"],"sources":["history-control-v2/components/grid-item/index.js"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useContext, useEffect, useRef, useState } from 'react';\nimport { PlayerHeader } from '../../../controls';\nimport HistoryPlayer from '../../../history-player';\nimport { historyControlV2Context } from '../../context';\nimport { DEFAULT_PLAY_PARAMS } from '../../utils';\nimport { useSetState, useSize } from 'ahooks';\nimport _ from 'lodash';\nimport moment from 'moment';\nimport SetTagVideo from '../../../components/set-tag-video';\nimport TagVideo from '../../../components/tag-video';\nconst GridItem = (props) => {\n    const { loading, channels, setChannels, activeIndex, setTimeLinePosition } = useContext(historyControlV2Context); // setTimeLinePosition\n    const { active, onTimeChange, onClick, onClose, onScreenshot, scale, palyIndex = 0, channel = DEFAULT_PLAY_PARAMS } = props;\n    const [tagSetShow, setTagSetShow] = useState(false);\n    const { url, startTime, endTime, channelName, deviceName, hasLabel } = channel;\n    const [{ width, height }, setState] = useSetState({\n        width: '100%',\n        height: '100%',\n    });\n    const gridItemRef = useRef(null);\n    const gridItemSize = useSize(gridItemRef);\n    useEffect(() => {\n        if ((gridItemSize === null || gridItemSize === void 0 ? void 0 : gridItemSize.width) && (gridItemSize === null || gridItemSize === void 0 ? void 0 : gridItemSize.height)) {\n            switch (scale) {\n                case '100%':\n                    setState({\n                        width: '100%',\n                        height: gridItemSize.height - 26,\n                    });\n                    break;\n                case '4*3':\n                    if (gridItemSize.width / 4 < (gridItemSize.height - 26) / 3) {\n                        setState({\n                            width: '100%',\n                            height: (gridItemSize.width / 4) * 3,\n                        });\n                    }\n                    else {\n                        setState({\n                            width: ((gridItemSize.height - 26) / 3) * 4,\n                            height: '100%',\n                        });\n                    }\n                    break;\n                case '16*9':\n                    if (gridItemSize.width / 16 < (gridItemSize.height - 26) / 9) {\n                        setState({\n                            width: '100%',\n                            height: (gridItemSize.width / 16) * 9,\n                        });\n                    }\n                    else {\n                        setState({\n                            width: ((gridItemSize.height - 26) / 9) * 16,\n                            height: '100%',\n                        });\n                    }\n                    break;\n            }\n        }\n    }, [gridItemSize, scale]);\n    const historyPlayerProps = {\n        url,\n        startTime,\n        endTime,\n    };\n    const isExpanded = false;\n    const showInfo = false;\n    const info = [];\n    const handleTimeChange = (time, speed) => {\n        if (time !== '' && channels[palyIndex].tagId == '' && channels[palyIndex].index != -1 && moment(time).diff(moment(channels[palyIndex].endTime), 'seconds') >= 0) {\n            const newChannels = [...channels];\n            const length = channels[palyIndex].tableList.length;\n            const index = channels[palyIndex].index + 1 % length;\n            newChannels[palyIndex].index = index;\n            newChannels[palyIndex].startTime = channels[palyIndex].tableList[index].beginTime;\n            newChannels[palyIndex].endTime = channels[palyIndex].tableList[index].endTime;\n            setChannels(newChannels);\n        }\n        if (palyIndex === activeIndex) {\n            const progress = (moment(time).diff(moment(startTime).startOf('day'), 'seconds') / (24 * 60 * 60)) *\n                100;\n            setTimeLinePosition(progress);\n            onTimeChange && onTimeChange(time, speed);\n        }\n    };\n    return (_jsx(\"div\", Object.assign({ className: `grid-item-container ${active ? 'active' : ''} ${loading ? '' : 'emptyImg'}`, onClick: onClick, ref: gridItemRef }, { children: channel.channelNum && (_jsxs(_Fragment, { children: [_jsx(PlayerHeader, { name: `${deviceName}-${channelName}`, onClose: onClose, extraButton: hasLabel ? _jsx(TagVideo, { channel: channel }) : null }), _jsx(\"div\", Object.assign({ className: \"player-container\" }, { children: historyPlayerProps.url && historyPlayerProps.startTime && historyPlayerProps.endTime && (_jsx(\"div\", Object.assign({ style: { width, height } }, { children: _jsx(HistoryPlayer, Object.assign({}, historyPlayerProps, { controlBottom: isExpanded ? 235 : 0, onTimeChange: _.throttle(handleTimeChange, 999), showInfo: showInfo, info: info, controlVisible: tagSetShow, activeIndex: palyIndex, extraButton: _jsx(SetTagVideo, { tagSetShow: tagSetShow, setTagSetShow: setTagSetShow, channel: channel }), screenshot: onScreenshot })) }))) }))] })) })));\n};\nexport default GridItem;\n"],"mappings":"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"}

package/lib/history-control-v2/components/panel/index.js

@@ -4,58 +4,89 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.HistoryControlV2Panel = void 0;
+
 var _jsxRuntime = require("react/jsx-runtime");
+
 var _react = require("react");
+
 var _reactCollapsed = _interopRequireDefault(require("react-collapsed"));
+
 var _api = require("../../../api");
+
 var _icons = require("../../../icons");
+
 var _utils = require("../../../utils");
+
 var _context = require("../../context");
+
 var _collapse = _interopRequireDefault(require("../../images/collapse.png"));
+
 var _utils2 = require("../../utils");
+
 var _ahooks = require("ahooks");
+
 var _button = _interopRequireDefault(require("antd/lib/button"));
+
 var _message = _interopRequireDefault(require("antd/lib/message"));
+
 var _table = _interopRequireDefault(require("antd/lib/table"));
+
 var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));
+
 var _moment = _interopRequireDefault(require("moment"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-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 _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; }
+
 var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useContext = (0, _react.useContext)(_context.historyControlV2Context),
-    channels = _useContext.channels,
-    setChannels = _useContext.setChannels,
-    setLoading = _useContext.setLoading,
-    activeIndex = _useContext.activeIndex,
-    setActiveIndex = _useContext.setActiveIndex,
-    timeLinePosition = _useContext.timeLinePosition;
+      channels = _useContext.channels,
+      setChannels = _useContext.setChannels,
+      setLoading = _useContext.setLoading,
+      activeIndex = _useContext.activeIndex,
+      setActiveIndex = _useContext.setActiveIndex,
+      timeLinePosition = _useContext.timeLinePosition;
+
   var realChannels = channels.filter(function (item) {
     return item.channelNum !== '';
   });
   var segmentsRef = (0, _react.useRef)(null);
+
   var getRef = function getRef() {
     return segmentsRef.current;
   };
+
   var onVideoClose = props.onVideoClose;
+
   var _useCollapse = (0, _reactCollapsed["default"])({
-      defaultExpanded: false // 默认展开
-    }),
-    getCollapseProps = _useCollapse.getCollapseProps,
-    getToggleProps = _useCollapse.getToggleProps,
-    isExpanded = _useCollapse.isExpanded;
+    defaultExpanded: true // 默认展开
+
+  }),
+      getCollapseProps = _useCollapse.getCollapseProps,
+      getToggleProps = _useCollapse.getToggleProps,
+      isExpanded = _useCollapse.isExpanded;
+
   var _useRequest = (0, _ahooks.useRequest)(_api.getHistoryUrls, {
-      manual: true
-    }),
-    runAsync = _useRequest.runAsync;
+    manual: true
+  }),
+      runAsync = _useRequest.runAsync;
+
   var _useRequest2 = (0, _ahooks.useRequest)(_api.getPlaybackUrlSingle, {
-      manual: true
-    }),
-    GetHKV2Url = _useRequest2.runAsync;
+    manual: true
+  }),
+      GetHKV2Url = _useRequest2.runAsync;
+
   var columns = [{
     title: '序号',
     dataIndex: 'index',
@@ -66,12 +97,14 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     width: 90,
     render: function render(_, record, index) {
       var _a;
+
       var active = ((_a = channels === null || channels === void 0 ? void 0 : channels[activeIndex]) === null || _a === void 0 ? void 0 : _a.index) === index;
       return (0, _jsxRuntime.jsx)(_button["default"], Object.assign({
         className: "play-btn ".concat(active ? 'active' : ''),
         onClick: function onClick() {
           if (active) {
             var newChannels = _toConsumableArray(channels);
+
             newChannels[activeIndex].index = -1;
             newChannels[activeIndex].startTime = '';
             newChannels[activeIndex].endTime = '';
@@ -81,6 +114,7 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
             // eslint-disable-next-line no-inner-declarations
             var deal = function deal(url) {
               var newChannels = _toConsumableArray(channels);
+
               newChannels[activeIndex].index = index;
               newChannels[activeIndex].startTime = record.beginTime;
               newChannels[activeIndex].endTime = record.endTime;
@@ -88,6 +122,7 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
               newChannels[activeIndex].url = url || record.url;
               setChannels(newChannels);
             };
+
             if (record.hkType === 'HK_CAR_CLOUD_V2') {
               GetHKV2Url({
                 code: record.code,
@@ -116,7 +151,8 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     }
   }, {
     title: '设备名称',
-    dataIndex: 'deviceName'
+    dataIndex: 'deviceName',
+    width: 200
   }, {
     title: '开始时间',
     dataIndex: 'beginTime',
@@ -134,6 +170,7 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     width: 110,
     dataIndex: 'size'
   }];
+
   var loadData = function loadData(channel) {
     setLoading(true);
     runAsync({
@@ -147,10 +184,13 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
         if (res.length > 25) {
           _message["default"].info('最多播放25个视频通道');
         }
+
         var newIds = _toConsumableArray(res).map(function (item) {
           return "".concat(item.deviceId).concat(item.channelNum);
         });
+
         var newChannels = _toConsumableArray(channels);
+
         channels.map(function (item, index) {
           if (!newIds.includes("".concat(item.deviceId).concat(item.channelNum))) {
             newChannels[index] = Object.assign({
@@ -159,7 +199,7 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
           }
         });
         var fetchArr = [],
-          fetchIndexArr = [];
+            fetchIndexArr = [];
         res.filter(function (item, index) {
           return index < 25;
         }).map(function (item) {
@@ -168,17 +208,22 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
            * 优化第一条数据的开始时间不要早于请求的开始时间
            * 最后一条的结束时间不要晚于请求的结束时间
            */
+
+
           if (item.list.length) {
             if ((0, _moment["default"])((_b = (_a = item.list) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.beginTime).diff((0, _moment["default"])(channel.beginTime), 'seconds') < 0) {
               item.list[0].beginTime = channel.beginTime;
             }
+
             if ((0, _moment["default"])((_d = (_c = item.list) === null || _c === void 0 ? void 0 : _c[item.list.length - 1]) === null || _d === void 0 ? void 0 : _d.endTime).diff((0, _moment["default"])(channel.endTime), 'seconds') > 0) {
               item.list[item.list.length - 1].endTime = channel.endTime;
             }
           }
+
           var result = (_e = newChannels.filter(function (citem) {
             return citem.deviceId === item.deviceId && citem.channelNum === item.channelNum;
           })) === null || _e === void 0 ? void 0 : _e[0];
+
           if (result) {
             var isClose = newChannels[result.channelIndex].index === -1 && newChannels[result.channelIndex].tagId === '';
             newChannels[result.channelIndex] = Object.assign(Object.assign({}, newChannels[result.channelIndex]), {
@@ -191,12 +236,14 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
             var channelIndex = (_l = (_k = newChannels.filter(function (item) {
               return item.channelNum === '';
             })) === null || _k === void 0 ? void 0 : _k[0]) === null || _l === void 0 ? void 0 : _l.channelIndex;
+
             if (typeof channelIndex == 'number') {
               // 过滤跨天的数据
               item.list = item.list.filter(function (e) {
                 return e.beginTime.slice(0, 10) === e.endTime.slice(0, 10);
               });
               var data = (0, _utils2.getChannelData)(item, channel);
+
               if (data.hkType === 'HK_CAR_CLOUD_V2') {
                 fetchArr.push(GetHKV2Url({
                   code: data.code,
@@ -208,12 +255,14 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
                 }));
                 fetchIndexArr.push(channelIndex);
               }
+
               newChannels[channelIndex] = Object.assign(Object.assign({}, newChannels[channelIndex]), data);
             } else {
               _message["default"].error('没有多余的播放位置');
             }
           }
         });
+
         if (fetchArr.length) {
           Promise.all(fetchArr).then(function (data) {
             data.forEach(function (e, index) {
@@ -229,9 +278,11 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
       } else {
         _message["default"].info('未查询到视频');
       }
+
       setLoading(false);
     });
   };
+
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       load: function load(channel) {
@@ -269,8 +320,10 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
               children: [(0, _jsxRuntime.jsx)(TimeVerticalLine, {
                 getRef: getRef,
                 history: channels === null || channels === void 0 ? void 0 : channels[activeIndex].segmentData,
+                channelName: channels === null || channels === void 0 ? void 0 : channels[activeIndex].channelName,
                 onClick: function onClick(index, startTime, endTime) {
                   var newChannels = _toConsumableArray(channels);
+
                   newChannels[activeIndex] = Object.assign(Object.assign({}, newChannels[activeIndex]), {
                     index: index,
                     startTime: (0, _moment["default"])(startTime).format(_utils.TimeFormat.params),
@@ -329,7 +382,8 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
                 columns: columns,
                 dataSource: (channels === null || channels === void 0 ? void 0 : channels[activeIndex].tableList) || [],
                 scroll: {
-                  y: 100
+                  y: 100,
+                  x: 920
                 },
                 pagination: false,
                 rowKey: function rowKey() {
@@ -337,6 +391,7 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
                 },
                 rowClassName: function rowClassName(_, index) {
                   var _a;
+
                   return index === ((_a = channels === null || channels === void 0 ? void 0 : channels[activeIndex]) === null || _a === void 0 ? void 0 : _a.index) ? 'active' : '';
                 }
               })
@@ -348,10 +403,12 @@ var HistoryControlV2Panel = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   });
 });
 exports.HistoryControlV2Panel = HistoryControlV2Panel;
+
 var TimeLine = function TimeLine() {
   var getSplitLines = function getSplitLines() {
     var result = [];
     var step = 100 / 24;
+
     for (var i = 0; i < 25; i++) {
       var element = (0, _jsxRuntime.jsx)("div", Object.assign({
         className: "line",
@@ -367,8 +424,10 @@ var TimeLine = function TimeLine() {
       }), i);
       result.push(element);
     }
+
     return result;
   };
+
   return (0, _jsxRuntime.jsxs)("div", Object.assign({
     className: "time-axis"
   }, {
@@ -381,40 +440,48 @@ var TimeLine = function TimeLine() {
     }))]
   }));
 };
+
 var ONEDAY_MILL = 24 * 60 * 60 * 1000;
+
 var TimeVerticalLine = function TimeVerticalLine(_ref) {
   var getRef = _ref.getRef,
-    history = _ref.history,
-    _onClick = _ref.onClick;
+      history = _ref.history,
+      _onClick = _ref.onClick,
+      channelName = _ref.channelName;
+
   var _a;
+
   var mouse = (0, _ahooks.useMouse)(getRef());
   var elementX = mouse.elementX,
-    elementY = mouse.elementY,
-    elementW = mouse.elementW,
-    elementH = mouse.elementH;
-  var visible = elementX >= 0 && elementY >= 0 && elementX <= elementW && elementY <= elementH;
-  // 计算elementX在整个宽度的占比，根据占比在一天中的比例算出具体时间，最后判断这个时间是否在某段视频中。在则显示提示时间。
+      elementY = mouse.elementY,
+      elementW = mouse.elementW,
+      elementH = mouse.elementH;
+  var visible = elementX >= 0 && elementY >= 0 && elementX <= elementW && elementY <= elementH; // 计算elementX在整个宽度的占比，根据占比在一天中的比例算出具体时间，最后判断这个时间是否在某段视频中。在则显示提示时间。
+
   var percent = elementX / elementW;
   var time = (0, _moment["default"])((0, _moment["default"])(history.start).valueOf() + percent * ONEDAY_MILL).format(_utils.TimeFormat.params);
   var flag = false,
-    playStart = -1,
-    playEnd = -1,
-    index = -1;
+      playStart = -1,
+      playEnd = -1,
+      index = -1;
   var now = (0, _moment["default"])(time).valueOf();
+
   for (var i = 0; i < ((_a = history.list) === null || _a === void 0 ? void 0 : _a.length); i++) {
     var begin = (0, _moment["default"])(history.list[i].beginTime).valueOf(),
-      end = (0, _moment["default"])(history.list[i].endTime).valueOf();
+        end = (0, _moment["default"])(history.list[i].endTime).valueOf();
+
     if (now >= begin && now <= end) {
-      index = i;
-      // url = history.list[i].playbackUrl;
+      index = i; // url = history.list[i].playbackUrl;
+
       playStart = now;
       playEnd = end;
       flag = true;
       break;
     }
   }
+
   return visible ? flag ? (0, _jsxRuntime.jsx)(_tooltip["default"], Object.assign({
-    title: time
+    title: "".concat(channelName || '', "  ").concat(time)
   }, {
     children: (0, _jsxRuntime.jsx)("div", {
       className: "timeline",
@@ -435,20 +502,25 @@ var TimeVerticalLine = function TimeVerticalLine(_ref) {
     }
   }) : (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
 };
+
 var getSegments = function getSegments(props) {
   var _props$list = props.list,
-    list = _props$list === void 0 ? [] : _props$list,
-    start = props.start,
-    end = props.end;
+      list = _props$list === void 0 ? [] : _props$list,
+      start = props.start,
+      end = props.end;
   var startTime = (0, _moment["default"])(start);
   var endTime = (0, _moment["default"])(end);
   var total = endTime.diff(startTime, 'seconds'); // 总时间
+
   var result = list === null || list === void 0 ? void 0 : list.map(function (i) {
     var itemStart = (0, _moment["default"])(i.beginTime).diff(startTime, 'seconds') > 0 ? (0, _moment["default"])(i.beginTime) : startTime;
     var itemEnd = (0, _moment["default"])(i.endTime);
     var itemTotal = itemEnd.diff(itemStart, 'seconds'); // 分段总时间
+
     var width = itemTotal / total * 100; // 分段时间占总时间百分比
+
     var left = itemStart.diff(startTime, 'seconds') / total * 100; // 分段其实时间
+
     return (0, _jsxRuntime.jsx)("div", {
       className: "segment",
       style: {
@@ -459,6 +531,7 @@ var getSegments = function getSegments(props) {
   });
   return result;
 };
+
 HistoryControlV2Panel.displayName = 'HistoryControlV2Panel';
 var _default = HistoryControlV2Panel;
 exports["default"] = _default;