@cloud-app-dev/vidc 4.0.1 → 4.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/AppContext/index.js +20 -61
- package/es/AutoExit/index.js +5 -9
- package/es/Config/index.js +0 -5
- package/es/Config/utils.js +7 -27
- package/es/ConfigContext/index.d.ts +1 -1
- package/es/ConfigContext/index.js +1 -3
- package/es/CustomRenderSelect/index.js +19 -39
- package/es/DynamicGridList/index.js +16 -28
- package/es/FullScreen/index.js +10 -21
- package/es/GridList/hook.js +36 -67
- package/es/GridList/index.d.ts +1 -1
- package/es/GridList/index.js +1 -1
- package/es/ImageView/index.js +16 -31
- package/es/LabelValue/index.d.ts +0 -8
- package/es/LabelValue/index.js +11 -16
- package/es/List/index.js +5 -7
- package/es/ListWithSizeAnimate/demo.js +3 -15
- package/es/LoaderScript/utils.js +100 -153
- package/es/Map/Config/index.d.ts +4 -2
- package/es/Map/Config/index.js +17 -32
- package/es/Map/Config/utils.d.ts +2 -2
- package/es/Map/Config/utils.js +40 -51
- package/es/Map/InfoWindow/MakerLikeWindow.js +35 -29
- package/es/Map/InfoWindow/demo.js +17 -29
- package/es/Map/interface.d.ts +14 -0
- package/es/Picture/component/Tools/index.js +5 -7
- package/es/Picture/demo.js +15 -19
- package/es/Picture/index.js +70 -104
- package/es/Picture/utils.js +14 -28
- package/es/Player/api/index.js +26 -94
- package/es/Player/contraller_bar/right_bar.js +12 -23
- package/es/Player/demo.js +47 -62
- package/es/Player/event/errorEvent.js +15 -40
- package/es/Player/fps_play.js +12 -28
- package/es/Player/frontend_timeline.js +28 -48
- package/es/Player/player.d.ts +2 -1
- package/es/Player/segment_timeline.js +45 -69
- package/es/Player/single_player.js +101 -109
- package/es/Player/util.js +8 -27
- package/es/Progress/index.js +5 -16
- package/es/ROI/index.d.ts +0 -6
- package/es/ROI/index.js +17 -26
- package/es/RefDrawer/Footer.js +3 -5
- package/es/RefDrawer/demo.js +0 -3
- package/es/RefDrawer/index.js +17 -27
- package/es/RefModal/demo.js +0 -3
- package/es/RefModal/index.js +27 -27
- package/es/ScreenPlayer/Live.d.ts +1 -1
- package/es/ScreenPlayer/Live.js +36 -70
- package/es/ScreenPlayer/LiveTools.js +20 -39
- package/es/ScreenPlayer/PlayerWithExt.js +48 -85
- package/es/ScreenPlayer/RecordTools.d.ts +1 -1
- package/es/ScreenPlayer/RecordTools.js +27 -53
- package/es/ScreenPlayer/SegmentTimeLine.js +8 -13
- package/es/ScreenPlayer/TimeSelect.js +9 -24
- package/es/ScreenPlayer/demo.js +1 -1
- package/es/ScreenPlayer/demo2.js +76 -108
- package/es/ScreenPlayer/useTimeSlider.js +63 -141
- package/es/Service/http.js +14 -34
- package/es/TableLayout/index.js +6 -10
- package/es/ThemeAntd/index.js +0 -1
- package/es/Timeout/index.js +16 -31
- package/es/VList/index.d.ts +1 -9
- package/es/VList/index.js +18 -30
- package/es/typings.d.ts +1 -0
- package/es/useDrawROI/index.js +61 -115
- package/es/useInfiniteScroll/index.js +24 -45
- package/es/utils.js +18 -42
- package/package.json +4 -5
- package/es/ROI/utils.d.ts +0 -1
- package/es/ROI/utils.js +0 -1
- package/es/ThemeAntd/demo.html +0 -32
|
@@ -1,26 +1,19 @@
|
|
|
1
|
+
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); }
|
|
1
2
|
import _nextTick from "@cloud-app-dev/utils/es/nextTick";
|
|
2
3
|
import _useEventListener from "ahooks/es/useEventListener";
|
|
3
4
|
import _useUpdateEffect from "ahooks/es/useUpdateEffect";
|
|
4
5
|
import _useSize from "ahooks/es/useSize";
|
|
5
|
-
|
|
6
6
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
7
|
-
|
|
8
7
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
9
|
-
|
|
10
|
-
function
|
|
11
|
-
|
|
8
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
9
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
10
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
12
11
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
13
|
-
|
|
14
12
|
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."); }
|
|
15
|
-
|
|
16
13
|
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); }
|
|
17
|
-
|
|
18
|
-
function
|
|
19
|
-
|
|
20
|
-
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; }
|
|
21
|
-
|
|
14
|
+
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; }
|
|
15
|
+
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; } }
|
|
22
16
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
23
|
-
|
|
24
17
|
import moment from 'dayjs';
|
|
25
18
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
26
19
|
var hours = [1, 6, 12, 24];
|
|
@@ -30,20 +23,19 @@ var hoverLineColor = '#319BFF';
|
|
|
30
23
|
var minPerStep = [1, 2, 5, 10, 15, 20, 30, 60, 120, 180, 240, 360, 720, 1440];
|
|
31
24
|
var minStepSize = 20;
|
|
32
25
|
var distance_between_gtitle = 80;
|
|
26
|
+
|
|
33
27
|
/**
|
|
34
28
|
* 下一个刻度
|
|
35
29
|
*/
|
|
36
|
-
|
|
37
30
|
function ms_to_next_step(timestamp, step) {
|
|
38
31
|
var remainder = timestamp % step;
|
|
39
32
|
return remainder ? step - remainder : 0;
|
|
40
33
|
}
|
|
34
|
+
|
|
41
35
|
/**
|
|
42
36
|
* 返回 2018-01-01 10:00:00 格式时间
|
|
43
37
|
* @param {*} time
|
|
44
38
|
*/
|
|
45
|
-
|
|
46
|
-
|
|
47
39
|
function formartTimestemp(time) {
|
|
48
40
|
return moment(time).format('YYYY-MM-DD HH:mm:ss');
|
|
49
41
|
}
|
|
@@ -51,25 +43,20 @@ function formartTimestemp(time) {
|
|
|
51
43
|
* 返回时间轴上刻度的时间
|
|
52
44
|
* @param {*} datetime new Date 格式
|
|
53
45
|
*/
|
|
54
|
-
|
|
55
|
-
|
|
56
46
|
function graduation_title(datetime) {
|
|
57
47
|
var mom = moment(datetime);
|
|
58
48
|
var h = mom.get('hours');
|
|
59
49
|
var m = mom.get('minutes');
|
|
60
50
|
var s = mom.get('seconds');
|
|
61
|
-
|
|
62
51
|
if (h === 0 && m === 0 && s === 0) {
|
|
63
52
|
return mom.format('YYYY.MM.DD');
|
|
64
53
|
}
|
|
65
|
-
|
|
66
54
|
return mom.format('HH:mm');
|
|
67
55
|
}
|
|
56
|
+
|
|
68
57
|
/**
|
|
69
58
|
* 绘制线条
|
|
70
59
|
*/
|
|
71
|
-
|
|
72
|
-
|
|
73
60
|
function drawLine(ctx, beginX, beginY, endX, endY, color, width) {
|
|
74
61
|
ctx.beginPath();
|
|
75
62
|
ctx.moveTo(beginX, beginY);
|
|
@@ -78,102 +65,84 @@ function drawLine(ctx, beginX, beginY, endX, endY, color, width) {
|
|
|
78
65
|
ctx.lineWidth = width;
|
|
79
66
|
ctx.stroke();
|
|
80
67
|
}
|
|
81
|
-
|
|
82
68
|
function drawText(ctx, _ref) {
|
|
83
69
|
var fillStyle = _ref.fillStyle,
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
70
|
+
font = _ref.font,
|
|
71
|
+
text = _ref.text,
|
|
72
|
+
x = _ref.x,
|
|
73
|
+
y = _ref.y;
|
|
88
74
|
ctx.fillStyle = fillStyle;
|
|
89
75
|
ctx.font = font;
|
|
90
76
|
ctx.fillText(text, x, y);
|
|
91
77
|
}
|
|
92
|
-
|
|
93
78
|
function useTimeSlider(canvasRef, _ref2) {
|
|
94
79
|
var hoursPer = _ref2.hoursPer,
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
80
|
+
begin = _ref2.begin,
|
|
81
|
+
currentTime = _ref2.currentTime,
|
|
82
|
+
_ref2$segments = _ref2.segments,
|
|
83
|
+
segments = _ref2$segments === void 0 ? [] : _ref2$segments,
|
|
84
|
+
onTimeChange = _ref2.onTimeChange,
|
|
85
|
+
onHoursPerChange = _ref2.onHoursPerChange;
|
|
102
86
|
var _useState = useState({
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
87
|
+
hoursPer: hoursPer,
|
|
88
|
+
begin: begin,
|
|
89
|
+
currentTime: currentTime,
|
|
90
|
+
hover: {
|
|
91
|
+
x: 0,
|
|
92
|
+
time: undefined
|
|
93
|
+
}
|
|
94
|
+
}),
|
|
95
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
96
|
+
state = _useState2[0],
|
|
97
|
+
setState = _useState2[1];
|
|
115
98
|
var extRef = useRef({
|
|
116
99
|
mousedownTime: undefined,
|
|
117
100
|
mousedownX: 0
|
|
118
101
|
});
|
|
119
|
-
|
|
120
102
|
var size = _useSize(canvasRef);
|
|
121
|
-
|
|
122
103
|
var canvas = canvasRef.current;
|
|
123
|
-
|
|
124
104
|
var _useMemo = useMemo(function () {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
105
|
+
return size ? size : {
|
|
106
|
+
width: 0,
|
|
107
|
+
height: 0
|
|
108
|
+
};
|
|
109
|
+
}, [size]),
|
|
110
|
+
width = _useMemo.width,
|
|
111
|
+
height = _useMemo.height;
|
|
133
112
|
var ctx = canvas === null || canvas === void 0 ? void 0 : canvas.getContext('2d');
|
|
134
|
-
|
|
135
113
|
var update = function update() {
|
|
136
114
|
var params = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
137
115
|
return setState(function (old) {
|
|
138
116
|
return _objectSpread(_objectSpread({}, old), params);
|
|
139
117
|
});
|
|
140
118
|
};
|
|
141
|
-
|
|
142
119
|
var clearCanvas = function clearCanvas() {
|
|
143
120
|
return ctx === null || ctx === void 0 ? void 0 : ctx.clearRect(0, 0, width, height);
|
|
144
121
|
};
|
|
122
|
+
|
|
145
123
|
/**
|
|
146
124
|
* 绘制覆盖时间刻度颜色,表示有录像的部分
|
|
147
125
|
*/
|
|
148
|
-
|
|
149
|
-
|
|
150
126
|
var drawOverlay = function drawOverlay() {
|
|
151
127
|
segments.forEach(function (item) {
|
|
152
128
|
var px_ms = width / (state.hoursPer * 60 * 60 * 1000); // px/ms
|
|
153
|
-
|
|
154
129
|
var beginX = (item.beginTime - state.begin) * px_ms;
|
|
155
130
|
var scale_width = (item.endTime - item.beginTime) * px_ms;
|
|
156
|
-
|
|
157
131
|
if (ctx) {
|
|
158
132
|
var _item$style;
|
|
159
|
-
|
|
160
133
|
ctx.fillStyle = item.url ? ((_item$style = item.style) === null || _item$style === void 0 ? void 0 : _item$style.background) || hoverLineColor : '#242C3D';
|
|
161
134
|
ctx.fillRect(beginX, height - 10, scale_width + 1, height);
|
|
162
135
|
}
|
|
163
136
|
});
|
|
164
137
|
};
|
|
138
|
+
|
|
165
139
|
/**
|
|
166
140
|
* 绘制刻度相关的
|
|
167
141
|
*/
|
|
168
|
-
|
|
169
|
-
|
|
170
142
|
var drawScale = function drawScale() {
|
|
171
143
|
var px_per_min = width / (state.hoursPer * 60); // px/min
|
|
172
|
-
|
|
173
144
|
var px_per_ms = width / (state.hoursPer * 60 * 60 * 1000); // px/ms
|
|
174
|
-
|
|
175
145
|
var px_per_step = minStepSize; // px/格 默认最小值20px
|
|
176
|
-
|
|
177
146
|
var min_per_step = px_per_step / px_per_min; // min/格
|
|
178
147
|
|
|
179
148
|
for (var i = 0; i < minPerStep.length; i++) {
|
|
@@ -184,33 +153,23 @@ function useTimeSlider(canvasRef, _ref2) {
|
|
|
184
153
|
break;
|
|
185
154
|
}
|
|
186
155
|
}
|
|
187
|
-
|
|
188
156
|
var medium_step = 30;
|
|
189
|
-
|
|
190
157
|
for (var _i2 = 0; _i2 < minPerStep.length; _i2++) {
|
|
191
158
|
if (distance_between_gtitle / px_per_min <= minPerStep[_i2]) {
|
|
192
159
|
medium_step = minPerStep[_i2];
|
|
193
160
|
break;
|
|
194
161
|
}
|
|
195
162
|
}
|
|
196
|
-
|
|
197
163
|
var num_steps = width / px_per_step; //总格数
|
|
198
|
-
|
|
199
164
|
var ms_offset = ms_to_next_step(state.begin, min_per_step * 60 * 1000); //开始的偏移时间 ms
|
|
200
|
-
|
|
201
165
|
var px_offset = ms_offset * px_per_ms; //开始的偏移距离 px
|
|
202
|
-
|
|
203
166
|
var ms_per_step = px_per_step / px_per_ms; // ms/step
|
|
204
167
|
|
|
205
168
|
var graduation_left, graduation_time, lineH;
|
|
206
|
-
|
|
207
169
|
for (var _i3 = 0; _i3 < num_steps; _i3++) {
|
|
208
170
|
graduation_left = px_offset + _i3 * px_per_step; // 距离=开始的偏移距离+格数*px/格
|
|
209
|
-
|
|
210
171
|
graduation_time = state.begin + ms_offset + _i3 * ms_per_step; //时间=左侧开始时间+偏移时间+格数*ms/格
|
|
211
|
-
|
|
212
172
|
var date = moment(graduation_time);
|
|
213
|
-
|
|
214
173
|
if (date.get('hours') === 0 && date.get('minutes') === 0) {
|
|
215
174
|
lineH = 10;
|
|
216
175
|
var big_date = graduation_title(date.valueOf());
|
|
@@ -225,43 +184,36 @@ function useTimeSlider(canvasRef, _ref2) {
|
|
|
225
184
|
} else if (graduation_time / (60 * 1000) % medium_step === 0) {
|
|
226
185
|
lineH = 10;
|
|
227
186
|
var middle_date = graduation_title(date.valueOf());
|
|
228
|
-
|
|
229
|
-
var _x = graduation_left - (middle_date.length > 5 ? 24 : 12);
|
|
230
|
-
|
|
187
|
+
var _x2 = graduation_left - (middle_date.length > 5 ? 24 : 12);
|
|
231
188
|
drawText(ctx, {
|
|
232
189
|
fillStyle: normalLineColor,
|
|
233
190
|
font: '10px Arial',
|
|
234
|
-
x:
|
|
191
|
+
x: _x2,
|
|
235
192
|
y: 30,
|
|
236
193
|
text: middle_date
|
|
237
194
|
});
|
|
238
195
|
} else {
|
|
239
196
|
lineH = 5;
|
|
240
197
|
}
|
|
241
|
-
|
|
242
198
|
drawLine(ctx, graduation_left, height - lineH, graduation_left, height, normalLineColor, 2);
|
|
243
199
|
}
|
|
244
200
|
};
|
|
201
|
+
|
|
245
202
|
/**
|
|
246
203
|
* 绘制当前刻度
|
|
247
204
|
* @returns
|
|
248
205
|
*/
|
|
249
|
-
|
|
250
|
-
|
|
251
206
|
var drawCurrentLine = function drawCurrentLine() {
|
|
252
207
|
var currentTime = state.currentTime,
|
|
253
|
-
|
|
254
|
-
|
|
208
|
+
begin = state.begin,
|
|
209
|
+
hoursPer = state.hoursPer;
|
|
255
210
|
var time = currentTime;
|
|
256
211
|
var range = [begin, currentTime + hoursPer * 3600 * 1000];
|
|
257
|
-
|
|
258
212
|
if (time < range[0] || time > range[1]) {
|
|
259
213
|
return;
|
|
260
214
|
}
|
|
261
|
-
|
|
262
215
|
var ms_current = time - begin;
|
|
263
216
|
var px_per_ms = width / (hoursPer * 60 * 60 * 1000); // px/ms
|
|
264
|
-
|
|
265
217
|
var left = px_per_ms * ms_current;
|
|
266
218
|
drawText(ctx, {
|
|
267
219
|
fillStyle: '#ffffff',
|
|
@@ -272,14 +224,12 @@ function useTimeSlider(canvasRef, _ref2) {
|
|
|
272
224
|
});
|
|
273
225
|
drawLine(ctx, left, 20, left, height, currentColor, 2); //中间当前点线
|
|
274
226
|
};
|
|
227
|
+
|
|
275
228
|
/**
|
|
276
229
|
* 绘制提示时间
|
|
277
230
|
*/
|
|
278
|
-
|
|
279
|
-
|
|
280
231
|
var drawHoverLine = function drawHoverLine() {
|
|
281
232
|
var _state$hover$x, _state$hover$time, _state$hover$x2, _state$hover$x3;
|
|
282
|
-
|
|
283
233
|
drawText(ctx, {
|
|
284
234
|
fillStyle: hoverLineColor,
|
|
285
235
|
font: '12px Arial',
|
|
@@ -289,71 +239,61 @@ function useTimeSlider(canvasRef, _ref2) {
|
|
|
289
239
|
});
|
|
290
240
|
drawLine(ctx, (_state$hover$x2 = state.hover.x) !== null && _state$hover$x2 !== void 0 ? _state$hover$x2 : 0, 20, (_state$hover$x3 = state.hover.x) !== null && _state$hover$x3 !== void 0 ? _state$hover$x3 : 0, height, hoverLineColor, 1);
|
|
291
241
|
};
|
|
242
|
+
|
|
292
243
|
/**
|
|
293
244
|
* 获取鼠标posx
|
|
294
245
|
* @param {*} e
|
|
295
246
|
*/
|
|
296
|
-
|
|
297
|
-
|
|
298
247
|
var get_cursor_x_position = function get_cursor_x_position(e) {
|
|
299
248
|
return e.offsetX;
|
|
300
249
|
};
|
|
250
|
+
|
|
301
251
|
/**
|
|
302
252
|
* 更新画布大小
|
|
303
253
|
*/
|
|
304
|
-
|
|
305
|
-
|
|
306
254
|
_useUpdateEffect(function () {
|
|
307
255
|
if (canvas) {
|
|
308
256
|
canvas.width = width;
|
|
309
257
|
canvas.height = height;
|
|
310
258
|
}
|
|
311
259
|
}, [canvas, height, width]);
|
|
312
|
-
|
|
313
260
|
useEffect(function () {
|
|
314
261
|
if (canvas) {
|
|
315
262
|
clearCanvas();
|
|
316
263
|
drawOverlay();
|
|
317
264
|
drawScale();
|
|
318
265
|
drawCurrentLine();
|
|
319
|
-
|
|
320
266
|
if (state.hover.time) {
|
|
321
267
|
drawHoverLine();
|
|
322
268
|
}
|
|
323
|
-
}
|
|
324
|
-
|
|
269
|
+
}
|
|
270
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
325
271
|
}, [canvas, state.begin, state.currentTime, state.hoursPer, segments, state.hover, size]);
|
|
326
|
-
|
|
327
272
|
_useUpdateEffect(function () {
|
|
328
273
|
return update({
|
|
329
274
|
begin: begin
|
|
330
275
|
});
|
|
331
276
|
}, [begin]);
|
|
332
|
-
|
|
333
277
|
_useUpdateEffect(function () {
|
|
334
278
|
return update({
|
|
335
279
|
hoursPer: hoursPer
|
|
336
280
|
});
|
|
337
281
|
}, [hoursPer]);
|
|
338
|
-
|
|
339
282
|
_useUpdateEffect(function () {
|
|
340
283
|
return update({
|
|
341
284
|
currentTime: currentTime
|
|
342
285
|
});
|
|
343
286
|
}, [currentTime]);
|
|
287
|
+
|
|
344
288
|
/**
|
|
345
289
|
* 触发绘制范围单位(hour)
|
|
346
290
|
*/
|
|
347
|
-
|
|
348
|
-
|
|
349
291
|
_useEventListener('mousewheel', function (event) {
|
|
350
292
|
event.preventDefault();
|
|
351
293
|
var delta = Math.max(-1, Math.min(1, event.wheelDelta || -event.detail));
|
|
352
294
|
var middle_time = state.begin + state.hoursPer * 3600 * 1000 / 2; //ms 记住当前中间的时间
|
|
353
|
-
|
|
354
295
|
var new_hoursPer = state.hoursPer;
|
|
355
296
|
var index = hours.indexOf(new_hoursPer);
|
|
356
|
-
|
|
357
297
|
if (delta < 0) {
|
|
358
298
|
// 缩小
|
|
359
299
|
if (index === hours.length - 1) {
|
|
@@ -369,27 +309,23 @@ function useTimeSlider(canvasRef, _ref2) {
|
|
|
369
309
|
new_hoursPer = hours[index - 1];
|
|
370
310
|
}
|
|
371
311
|
}
|
|
372
|
-
|
|
373
312
|
var new_begin = middle_time - state.hoursPer * 3600 * 1000 / 2; //new_begin = 当前中间的时间 - hoursPer/2
|
|
374
|
-
|
|
375
313
|
setState(function (old) {
|
|
376
314
|
return _objectSpread(_objectSpread({}, old), {}, {
|
|
377
315
|
begin: new_begin,
|
|
378
316
|
hoursPer: new_hoursPer
|
|
379
317
|
});
|
|
380
318
|
});
|
|
381
|
-
|
|
382
319
|
_nextTick(function () {
|
|
383
320
|
return onHoursPerChange === null || onHoursPerChange === void 0 ? void 0 : onHoursPerChange(new_hoursPer);
|
|
384
321
|
});
|
|
385
322
|
}, {
|
|
386
323
|
target: canvasRef
|
|
387
324
|
});
|
|
325
|
+
|
|
388
326
|
/**
|
|
389
327
|
* 用于处理canvas移除hover效果
|
|
390
328
|
*/
|
|
391
|
-
|
|
392
|
-
|
|
393
329
|
_useEventListener('mouseout', function () {
|
|
394
330
|
return setState(function (old) {
|
|
395
331
|
return _objectSpread(_objectSpread({}, old), {}, {
|
|
@@ -402,11 +338,10 @@ function useTimeSlider(canvasRef, _ref2) {
|
|
|
402
338
|
}, {
|
|
403
339
|
target: canvasRef
|
|
404
340
|
});
|
|
341
|
+
|
|
405
342
|
/**
|
|
406
343
|
* hover效果绘制
|
|
407
344
|
*/
|
|
408
|
-
|
|
409
|
-
|
|
410
345
|
_useEventListener('mousemove', function (e) {
|
|
411
346
|
if (extRef.current.mousedownTime) {
|
|
412
347
|
setState(function (old) {
|
|
@@ -421,7 +356,6 @@ function useTimeSlider(canvasRef, _ref2) {
|
|
|
421
356
|
// 触发绘制hover tips
|
|
422
357
|
var pos_x = get_cursor_x_position(e);
|
|
423
358
|
var ms_per_px = state.hoursPer * 3600 * 1000 / width; // ms/px
|
|
424
|
-
|
|
425
359
|
var current_timestamp = state.begin + pos_x * ms_per_px;
|
|
426
360
|
setState(function (old) {
|
|
427
361
|
return _objectSpread(_objectSpread({}, old), {}, {
|
|
@@ -435,80 +369,69 @@ function useTimeSlider(canvasRef, _ref2) {
|
|
|
435
369
|
}, {
|
|
436
370
|
target: canvasRef
|
|
437
371
|
});
|
|
372
|
+
|
|
438
373
|
/**
|
|
439
374
|
* 标记点击、拖动的触发器
|
|
440
375
|
*/
|
|
441
|
-
|
|
442
|
-
|
|
443
376
|
_useEventListener('mousedown', function (e) {
|
|
444
377
|
extRef.current.mousedownTime = Date.now();
|
|
445
378
|
extRef.current.mousedownX = get_cursor_x_position(e); //记住mousedown的位置
|
|
446
379
|
}, {
|
|
447
380
|
target: canvasRef
|
|
448
381
|
});
|
|
382
|
+
|
|
449
383
|
/**
|
|
450
384
|
* 处理点击、结束拖动的处理
|
|
451
385
|
*/
|
|
452
|
-
|
|
453
|
-
|
|
454
386
|
_useEventListener('mouseup', function (e) {
|
|
455
387
|
if (!extRef.current.mousedownTime) {
|
|
456
388
|
// 未在canvas上触发mousedown 过滤
|
|
457
389
|
return;
|
|
458
390
|
}
|
|
459
|
-
|
|
460
391
|
var clickDelay = Date.now() - extRef.current.mousedownTime;
|
|
461
|
-
|
|
462
392
|
if (clickDelay < 200 && e.target === canvas) {
|
|
463
393
|
// click 事件
|
|
464
394
|
var pos_x = get_cursor_x_position(e); //鼠标距离 px
|
|
465
|
-
|
|
466
395
|
var ms_per_px = state.hoursPer * 3600 * 1000 / width; // ms/px
|
|
467
|
-
|
|
468
396
|
var new_current = state.begin + pos_x * ms_per_px;
|
|
469
397
|
var segmentItem = segments.find(function (v) {
|
|
470
398
|
return new_current >= v.beginTime && new_current < v.endTime;
|
|
471
|
-
});
|
|
399
|
+
});
|
|
400
|
+
// 当前片段没有录像的时候
|
|
401
|
+
var _outTimeline = segmentItem && !segmentItem.url;
|
|
402
|
+
// const new_begin = new_current - (state.hoursPer * 60 * 60 * 1000) / 2;
|
|
472
403
|
|
|
473
|
-
var _outTimeline = segmentItem && !segmentItem.url; // const new_begin = new_current - (state.hoursPer * 60 * 60 * 1000) / 2;
|
|
474
404
|
// setState((old) => ({ ...old, begin: new_begin, current: new_current }));
|
|
475
|
-
|
|
476
|
-
|
|
477
405
|
setState(function (old) {
|
|
478
406
|
return _objectSpread(_objectSpread({}, old), {}, {
|
|
479
407
|
current: new_current
|
|
480
408
|
});
|
|
481
409
|
});
|
|
482
|
-
|
|
483
410
|
_nextTick(function () {
|
|
484
411
|
return onTimeChange === null || onTimeChange === void 0 ? void 0 : onTimeChange({
|
|
485
412
|
currentTime: new_current
|
|
486
413
|
}, _outTimeline);
|
|
487
414
|
});
|
|
488
|
-
}
|
|
489
|
-
|
|
490
|
-
|
|
415
|
+
}
|
|
416
|
+
// 清楚拖拽关联信息
|
|
491
417
|
extRef.current.mousedownTime = undefined;
|
|
492
418
|
extRef.current.mousedownX = 0;
|
|
493
419
|
}, {
|
|
494
420
|
target: document
|
|
495
421
|
});
|
|
496
|
-
|
|
497
422
|
var moveTimerRef = useRef();
|
|
423
|
+
|
|
498
424
|
/**
|
|
499
425
|
* 拖动处理
|
|
500
426
|
*/
|
|
501
|
-
|
|
502
427
|
_useEventListener('mousemove', function (e) {
|
|
503
428
|
if (!extRef.current.mousedownTime) {
|
|
504
429
|
return;
|
|
505
430
|
}
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
431
|
+
clearTimeout(moveTimerRef.current);
|
|
432
|
+
// 触发拖动
|
|
509
433
|
var pos_x = get_cursor_x_position(e);
|
|
510
434
|
var px_per_ms = width / (state.hoursPer * 60 * 60 * 1000); // px/ms
|
|
511
|
-
|
|
512
435
|
var diff_x = pos_x - extRef.current.mousedownX;
|
|
513
436
|
var new_begin = state.begin - Math.round(diff_x / px_per_ms);
|
|
514
437
|
extRef.current.mousedownX = pos_x;
|
|
@@ -524,5 +447,4 @@ function useTimeSlider(canvasRef, _ref2) {
|
|
|
524
447
|
target: document
|
|
525
448
|
});
|
|
526
449
|
}
|
|
527
|
-
|
|
528
450
|
export default useTimeSlider;
|
package/es/Service/http.js
CHANGED
|
@@ -1,15 +1,12 @@
|
|
|
1
|
+
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); }
|
|
1
2
|
var _excluded = ["cancelHttp"];
|
|
2
|
-
|
|
3
3
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
4
|
-
|
|
5
4
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
|
-
|
|
7
|
-
function
|
|
8
|
-
|
|
5
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
7
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
9
8
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
10
|
-
|
|
11
9
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
12
|
-
|
|
13
10
|
import Axios from 'axios';
|
|
14
11
|
import * as Middleware from "./middleware";
|
|
15
12
|
var CancelToken = Axios.CancelToken;
|
|
@@ -23,19 +20,19 @@ var config = {
|
|
|
23
20
|
}
|
|
24
21
|
};
|
|
25
22
|
var httpInstance = Axios.create(config);
|
|
23
|
+
|
|
26
24
|
/**
|
|
27
25
|
* 请求之前拦截动作
|
|
28
26
|
*/
|
|
29
|
-
|
|
30
27
|
httpInstance.interceptors.request.use(function (response) {
|
|
31
28
|
return response;
|
|
32
29
|
}, function (error) {
|
|
33
30
|
return console.error(error);
|
|
34
31
|
});
|
|
32
|
+
|
|
35
33
|
/**
|
|
36
34
|
* 请求之后拦截动作
|
|
37
35
|
*/
|
|
38
|
-
|
|
39
36
|
httpInstance.interceptors.response.use(function (response) {
|
|
40
37
|
if (Middleware.responseMiddleware.length === 0) {
|
|
41
38
|
return response.data;
|
|
@@ -54,23 +51,18 @@ httpInstance.interceptors.response.use(function (response) {
|
|
|
54
51
|
});
|
|
55
52
|
return Promise.reject(err);
|
|
56
53
|
}
|
|
57
|
-
|
|
58
54
|
if (!error.response) {
|
|
59
55
|
console.error(error);
|
|
60
56
|
return Promise.reject(error);
|
|
61
57
|
}
|
|
62
|
-
|
|
63
58
|
return Promise.reject(error.response);
|
|
64
59
|
});
|
|
65
|
-
|
|
66
60
|
function http(_ref) {
|
|
67
61
|
var cancelHttp = _ref.cancelHttp,
|
|
68
|
-
|
|
69
|
-
|
|
62
|
+
newOptions = _objectWithoutProperties(_ref, _excluded);
|
|
70
63
|
var cancel;
|
|
71
64
|
var cancelToken = new CancelToken(function (c) {
|
|
72
65
|
cancel = c;
|
|
73
|
-
|
|
74
66
|
if (cancelHttp) {
|
|
75
67
|
cancelHttp(cancel);
|
|
76
68
|
}
|
|
@@ -79,7 +71,6 @@ function http(_ref) {
|
|
|
79
71
|
cancelToken: cancelToken
|
|
80
72
|
}));
|
|
81
73
|
}
|
|
82
|
-
|
|
83
74
|
var httpMultiPartInstance = Axios.create({
|
|
84
75
|
timeout: 10 * 60 * 1000,
|
|
85
76
|
headers: {
|
|
@@ -91,55 +82,44 @@ httpMultiPartInstance.interceptors.response.use(function (response) {
|
|
|
91
82
|
}, function (error) {
|
|
92
83
|
return Promise.reject(error);
|
|
93
84
|
});
|
|
94
|
-
|
|
95
85
|
function httpXMLInstance(_ref2) {
|
|
96
86
|
var url = _ref2.url,
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
87
|
+
_ref2$method = _ref2.method,
|
|
88
|
+
method = _ref2$method === void 0 ? 'GET' : _ref2$method,
|
|
89
|
+
data = _ref2.data,
|
|
90
|
+
headers = _ref2.headers,
|
|
91
|
+
cancelHttp = _ref2.cancelHttp,
|
|
92
|
+
_ref2$isAsync = _ref2.isAsync,
|
|
93
|
+
isAsync = _ref2$isAsync === void 0 ? false : _ref2$isAsync;
|
|
104
94
|
return new Promise(function (resolve, reject) {
|
|
105
95
|
var xhr = new XMLHttpRequest();
|
|
106
|
-
|
|
107
96
|
var cancel = function cancel() {
|
|
108
97
|
return xhr.abort();
|
|
109
98
|
};
|
|
110
|
-
|
|
111
99
|
if (cancelHttp) {
|
|
112
100
|
cancelHttp(cancel);
|
|
113
101
|
}
|
|
114
|
-
|
|
115
102
|
xhr.open(method, url, !isAsync);
|
|
116
|
-
|
|
117
103
|
if (headers) {
|
|
118
104
|
Object.keys(headers).forEach(function (key) {
|
|
119
105
|
xhr.setRequestHeader(key, headers[key]);
|
|
120
106
|
});
|
|
121
107
|
}
|
|
122
|
-
|
|
123
108
|
xhr.onreadystatechange = function () {
|
|
124
109
|
if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
|
|
125
110
|
var _data;
|
|
126
|
-
|
|
127
111
|
try {
|
|
128
112
|
_data = JSON.parse(xhr.response);
|
|
129
113
|
} catch (e) {
|
|
130
114
|
_data = xhr.response;
|
|
131
115
|
}
|
|
132
|
-
|
|
133
116
|
resolve(_data);
|
|
134
117
|
}
|
|
135
|
-
|
|
136
118
|
if (xhr.readyState === 4 && !(xhr.status === 200 || xhr.status === 304)) {
|
|
137
119
|
reject(xhr);
|
|
138
120
|
}
|
|
139
121
|
};
|
|
140
|
-
|
|
141
122
|
xhr.send(data ? JSON.stringify(data) : null);
|
|
142
123
|
});
|
|
143
124
|
}
|
|
144
|
-
|
|
145
125
|
export { http as default, http, httpMultiPartInstance, httpXMLInstance };
|