@ezuikit/player-theme 0.0.1-beta.1 → 1.0.0-beta.1
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/dist/index.js +147 -1416
- package/dist/index.mjs +147 -1416
- package/dist/index.umd.js +621 -1303
- package/dist/style.css +1 -1
- package/dist/style.js +2 -2
- package/package.json +4 -4
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @ezuikit/player-theme
|
|
3
|
-
* Copyright (c) 2025-10-
|
|
2
|
+
* @ezuikit/player-theme v1.0.0-beta.1
|
|
3
|
+
* Copyright (c) 2025-10-27 Ezviz-OpenBiz
|
|
4
4
|
* Released under the MIT License.
|
|
5
5
|
*/
|
|
6
6
|
import EventEmitter from 'eventemitter3';
|
|
@@ -11,6 +11,7 @@ import { isMobile, parseEzopenUrl } from '@ezuikit/utils-tools';
|
|
|
11
11
|
import screenfull from 'screenfull';
|
|
12
12
|
import I18n from '@ezuikit/utils-i18n';
|
|
13
13
|
import Logger from '@ezuikit/utils-logger';
|
|
14
|
+
import { MobileTimeLine, TimeLine } from '@ezuikit/control-time-line';
|
|
14
15
|
|
|
15
16
|
/**
|
|
16
17
|
* 播放器的类名前缀
|
|
@@ -382,8 +383,8 @@ function getLocale(locales, language = 'zh') {
|
|
|
382
383
|
}
|
|
383
384
|
}
|
|
384
385
|
|
|
385
|
-
function _extends$
|
|
386
|
-
_extends$
|
|
386
|
+
function _extends$q() {
|
|
387
|
+
_extends$q = Object.assign || function(target) {
|
|
387
388
|
for(var i = 1; i < arguments.length; i++){
|
|
388
389
|
var source = arguments[i];
|
|
389
390
|
for(var key in source){
|
|
@@ -394,7 +395,7 @@ function _extends$r() {
|
|
|
394
395
|
}
|
|
395
396
|
return target;
|
|
396
397
|
};
|
|
397
|
-
return _extends$
|
|
398
|
+
return _extends$q.apply(this, arguments);
|
|
398
399
|
}
|
|
399
400
|
const LOADING_DEFAULT_OPTIONS = {};
|
|
400
401
|
/**
|
|
@@ -434,7 +435,7 @@ const LOADING_DEFAULT_OPTIONS = {};
|
|
|
434
435
|
this.$popupContainer.classList.remove(`${PREFIX_CLASS}-has-loading`);
|
|
435
436
|
}
|
|
436
437
|
constructor(options = {}){
|
|
437
|
-
super(Object.assign({}, LOADING_DEFAULT_OPTIONS, _extends$
|
|
438
|
+
super(Object.assign({}, LOADING_DEFAULT_OPTIONS, _extends$q({}, options, {
|
|
438
439
|
tagName: 'div',
|
|
439
440
|
controlType: 'block',
|
|
440
441
|
classNameSuffix: 'loading'
|
|
@@ -445,8 +446,8 @@ const LOADING_DEFAULT_OPTIONS = {};
|
|
|
445
446
|
}
|
|
446
447
|
}
|
|
447
448
|
|
|
448
|
-
function _extends$
|
|
449
|
-
_extends$
|
|
449
|
+
function _extends$p() {
|
|
450
|
+
_extends$p = Object.assign || function(target) {
|
|
450
451
|
for(var i = 1; i < arguments.length; i++){
|
|
451
452
|
var source = arguments[i];
|
|
452
453
|
for(var key in source){
|
|
@@ -457,7 +458,7 @@ function _extends$q() {
|
|
|
457
458
|
}
|
|
458
459
|
return target;
|
|
459
460
|
};
|
|
460
|
-
return _extends$
|
|
461
|
+
return _extends$p.apply(this, arguments);
|
|
461
462
|
}
|
|
462
463
|
// 不放在服务器上 是因为有可能http加载失败
|
|
463
464
|
// prettier-ignore
|
|
@@ -516,7 +517,7 @@ const POSTER_OPTIONS = {
|
|
|
516
517
|
super.destroy();
|
|
517
518
|
}
|
|
518
519
|
constructor(options = {}){
|
|
519
|
-
super(Object.assign({}, POSTER_OPTIONS, _extends$
|
|
520
|
+
super(Object.assign({}, POSTER_OPTIONS, _extends$p({}, options, {
|
|
520
521
|
tagName: 'div',
|
|
521
522
|
controlType: 'block',
|
|
522
523
|
classNameSuffix: 'poster'
|
|
@@ -751,8 +752,8 @@ const IconComponents = {
|
|
|
751
752
|
reduce: (attr = {})=>createIcon(Icons.reduce, 'reduce', attr)
|
|
752
753
|
};
|
|
753
754
|
|
|
754
|
-
function _extends$
|
|
755
|
-
_extends$
|
|
755
|
+
function _extends$o() {
|
|
756
|
+
_extends$o = Object.assign || function(target) {
|
|
756
757
|
for(var i = 1; i < arguments.length; i++){
|
|
757
758
|
var source = arguments[i];
|
|
758
759
|
for(var key in source){
|
|
@@ -763,7 +764,7 @@ function _extends$p() {
|
|
|
763
764
|
}
|
|
764
765
|
return target;
|
|
765
766
|
};
|
|
766
|
-
return _extends$
|
|
767
|
+
return _extends$o.apply(this, arguments);
|
|
767
768
|
}
|
|
768
769
|
const MESSAGE_DEFAULT_OPTIONS = {};
|
|
769
770
|
/**
|
|
@@ -888,7 +889,7 @@ const MESSAGE_DEFAULT_OPTIONS = {};
|
|
|
888
889
|
return icon;
|
|
889
890
|
}
|
|
890
891
|
constructor(options = {}){
|
|
891
|
-
super(Object.assign({}, MESSAGE_DEFAULT_OPTIONS, _extends$
|
|
892
|
+
super(Object.assign({}, MESSAGE_DEFAULT_OPTIONS, _extends$o({}, options, {
|
|
892
893
|
tagName: 'div',
|
|
893
894
|
controlType: 'block'
|
|
894
895
|
})));
|
|
@@ -897,8 +898,8 @@ const MESSAGE_DEFAULT_OPTIONS = {};
|
|
|
897
898
|
}
|
|
898
899
|
}
|
|
899
900
|
|
|
900
|
-
function _extends$
|
|
901
|
-
_extends$
|
|
901
|
+
function _extends$n() {
|
|
902
|
+
_extends$n = Object.assign || function(target) {
|
|
902
903
|
for(var i = 1; i < arguments.length; i++){
|
|
903
904
|
var source = arguments[i];
|
|
904
905
|
for(var key in source){
|
|
@@ -909,7 +910,7 @@ function _extends$o() {
|
|
|
909
910
|
}
|
|
910
911
|
return target;
|
|
911
912
|
};
|
|
912
|
-
return _extends$
|
|
913
|
+
return _extends$n.apply(this, arguments);
|
|
913
914
|
}
|
|
914
915
|
/**
|
|
915
916
|
* 播放/暂停控件
|
|
@@ -942,7 +943,7 @@ function _extends$o() {
|
|
|
942
943
|
}
|
|
943
944
|
}
|
|
944
945
|
constructor(options){
|
|
945
|
-
super(_extends$
|
|
946
|
+
super(_extends$n({}, options, {
|
|
946
947
|
tagName: 'span',
|
|
947
948
|
controlType: 'button',
|
|
948
949
|
classNameSuffix: 'play'
|
|
@@ -1452,8 +1453,8 @@ const PROGRESS_DEFAULT_OPTIONS = {
|
|
|
1452
1453
|
}
|
|
1453
1454
|
}
|
|
1454
1455
|
|
|
1455
|
-
function _extends$
|
|
1456
|
-
_extends$
|
|
1456
|
+
function _extends$m() {
|
|
1457
|
+
_extends$m = Object.assign || function(target) {
|
|
1457
1458
|
for(var i = 1; i < arguments.length; i++){
|
|
1458
1459
|
var source = arguments[i];
|
|
1459
1460
|
for(var key in source){
|
|
@@ -1464,7 +1465,7 @@ function _extends$n() {
|
|
|
1464
1465
|
}
|
|
1465
1466
|
return target;
|
|
1466
1467
|
};
|
|
1467
|
-
return _extends$
|
|
1468
|
+
return _extends$m.apply(this, arguments);
|
|
1468
1469
|
}
|
|
1469
1470
|
const VOLUME_DEFAULT_OPTIONS = {
|
|
1470
1471
|
volume: 0.8,
|
|
@@ -1609,7 +1610,7 @@ const VOLUME_DEFAULT_OPTIONS = {
|
|
|
1609
1610
|
}
|
|
1610
1611
|
constructor(options = {}){
|
|
1611
1612
|
var _this__options_props, _this__options_props1, _this__options_props2, _this__options_props3;
|
|
1612
|
-
super(_extends$
|
|
1613
|
+
super(_extends$m({}, options, {
|
|
1613
1614
|
tagName: 'span',
|
|
1614
1615
|
classNameSuffix: 'volume',
|
|
1615
1616
|
controlType: 'button'
|
|
@@ -1625,8 +1626,7 @@ const VOLUME_DEFAULT_OPTIONS = {
|
|
|
1625
1626
|
// 轻应用私有暂时不支持调节音量
|
|
1626
1627
|
if (!(Utils.isMobile || this._options.PLAY_TYPE === 'ezopen')) {
|
|
1627
1628
|
var _this__options_props4, _this__options_props5;
|
|
1628
|
-
this.picker = new Picker({
|
|
1629
|
-
container: this.$container,
|
|
1629
|
+
this.picker = new Picker(this.$container, {
|
|
1630
1630
|
getPopupContainer: ()=>this.$container,
|
|
1631
1631
|
trigger: this._options.trigger,
|
|
1632
1632
|
// trigger: "click",
|
|
@@ -1938,8 +1938,8 @@ const __fullscreenProvider__ = Provider.getInstance();
|
|
|
1938
1938
|
}
|
|
1939
1939
|
};
|
|
1940
1940
|
|
|
1941
|
-
function _extends$
|
|
1942
|
-
_extends$
|
|
1941
|
+
function _extends$l() {
|
|
1942
|
+
_extends$l = Object.assign || function(target) {
|
|
1943
1943
|
for(var i = 1; i < arguments.length; i++){
|
|
1944
1944
|
var source = arguments[i];
|
|
1945
1945
|
for(var key in source){
|
|
@@ -1950,7 +1950,7 @@ function _extends$m() {
|
|
|
1950
1950
|
}
|
|
1951
1951
|
return target;
|
|
1952
1952
|
};
|
|
1953
|
-
return _extends$
|
|
1953
|
+
return _extends$l.apply(this, arguments);
|
|
1954
1954
|
}
|
|
1955
1955
|
/**
|
|
1956
1956
|
* 全屏控件
|
|
@@ -1999,7 +1999,7 @@ function _extends$m() {
|
|
|
1999
1999
|
_event() {}
|
|
2000
2000
|
constructor(options){
|
|
2001
2001
|
var _options_props, _this_options;
|
|
2002
|
-
super(_extends$
|
|
2002
|
+
super(_extends$l({
|
|
2003
2003
|
tagName: 'span',
|
|
2004
2004
|
classNameSuffix: 'fullscreen',
|
|
2005
2005
|
controlType: 'button'
|
|
@@ -2020,8 +2020,8 @@ function _extends$m() {
|
|
|
2020
2020
|
}
|
|
2021
2021
|
}
|
|
2022
2022
|
|
|
2023
|
-
function _extends$
|
|
2024
|
-
_extends$
|
|
2023
|
+
function _extends$k() {
|
|
2024
|
+
_extends$k = Object.assign || function(target) {
|
|
2025
2025
|
for(var i = 1; i < arguments.length; i++){
|
|
2026
2026
|
var source = arguments[i];
|
|
2027
2027
|
for(var key in source){
|
|
@@ -2032,7 +2032,7 @@ function _extends$l() {
|
|
|
2032
2032
|
}
|
|
2033
2033
|
return target;
|
|
2034
2034
|
};
|
|
2035
|
-
return _extends$
|
|
2035
|
+
return _extends$k.apply(this, arguments);
|
|
2036
2036
|
}
|
|
2037
2037
|
/**
|
|
2038
2038
|
* 回放类型切换(本地回放(sdk 卡), 云存储回放, 云录制回放)控件
|
|
@@ -2115,7 +2115,7 @@ function _extends$l() {
|
|
|
2115
2115
|
*/ _onControlClick(e) {}
|
|
2116
2116
|
constructor(options){
|
|
2117
2117
|
var _options_props;
|
|
2118
|
-
super(_extends$
|
|
2118
|
+
super(_extends$k({}, options, {
|
|
2119
2119
|
tagName: 'div',
|
|
2120
2120
|
controlType: 'block',
|
|
2121
2121
|
classNameSuffix: 'rec'
|
|
@@ -3233,8 +3233,8 @@ var en = {
|
|
|
3233
3233
|
}
|
|
3234
3234
|
}
|
|
3235
3235
|
|
|
3236
|
-
function _extends$
|
|
3237
|
-
_extends$
|
|
3236
|
+
function _extends$j() {
|
|
3237
|
+
_extends$j = Object.assign || function(target) {
|
|
3238
3238
|
for(var i = 1; i < arguments.length; i++){
|
|
3239
3239
|
var source = arguments[i];
|
|
3240
3240
|
for(var key in source){
|
|
@@ -3245,7 +3245,7 @@ function _extends$k() {
|
|
|
3245
3245
|
}
|
|
3246
3246
|
return target;
|
|
3247
3247
|
};
|
|
3248
|
-
return _extends$
|
|
3248
|
+
return _extends$j.apply(this, arguments);
|
|
3249
3249
|
}
|
|
3250
3250
|
/**
|
|
3251
3251
|
* 更多控件
|
|
@@ -3258,8 +3258,7 @@ function _extends$k() {
|
|
|
3258
3258
|
}) : IconComponents.moreDot({
|
|
3259
3259
|
title: (_this_locale1 = this.locale) == null ? void 0 : _this_locale1.BTN_MORE
|
|
3260
3260
|
});
|
|
3261
|
-
this.picker = new Picker({
|
|
3262
|
-
container: this.$container,
|
|
3261
|
+
this.picker = new Picker(this.$container, {
|
|
3263
3262
|
getPopupContainer: ()=>this.$container,
|
|
3264
3263
|
trigger: Utils.isMobile ? 'click' : 'hover',
|
|
3265
3264
|
wrapClassName: `${PREFIX_CLASS}-more ${this.options.wrapClassName}`,
|
|
@@ -3316,7 +3315,7 @@ function _extends$k() {
|
|
|
3316
3315
|
// this._options.onClick?.(e);
|
|
3317
3316
|
}
|
|
3318
3317
|
constructor(options){
|
|
3319
|
-
super(_extends$
|
|
3318
|
+
super(_extends$j({}, options, {
|
|
3320
3319
|
tagName: 'span',
|
|
3321
3320
|
controlType: 'button',
|
|
3322
3321
|
classNameSuffix: 'more'
|
|
@@ -3780,8 +3779,8 @@ const ignoreList = [
|
|
|
3780
3779
|
if (theme.$container) theme.$container.style.cssText += cssText;
|
|
3781
3780
|
}
|
|
3782
3781
|
|
|
3783
|
-
function _extends$
|
|
3784
|
-
_extends$
|
|
3782
|
+
function _extends$i() {
|
|
3783
|
+
_extends$i = Object.assign || function(target) {
|
|
3785
3784
|
for(var i = 1; i < arguments.length; i++){
|
|
3786
3785
|
var source = arguments[i];
|
|
3787
3786
|
for(var key in source){
|
|
@@ -3792,7 +3791,7 @@ function _extends$j() {
|
|
|
3792
3791
|
}
|
|
3793
3792
|
return target;
|
|
3794
3793
|
};
|
|
3795
|
-
return _extends$
|
|
3794
|
+
return _extends$i.apply(this, arguments);
|
|
3796
3795
|
}
|
|
3797
3796
|
const ZOOM_DEFAULT_OPTIONS = {
|
|
3798
3797
|
open: false,
|
|
@@ -3901,7 +3900,7 @@ const ZOOM_DEFAULT_OPTIONS = {
|
|
|
3901
3900
|
super._onControlClick(e);
|
|
3902
3901
|
}
|
|
3903
3902
|
constructor(options){
|
|
3904
|
-
super(_extends$
|
|
3903
|
+
super(_extends$i({}, options, {
|
|
3905
3904
|
tagName: 'span',
|
|
3906
3905
|
controlType: 'button',
|
|
3907
3906
|
classNameSuffix: 'zoom'
|
|
@@ -4593,8 +4592,8 @@ const ZOOM_DEFAULT_OPTIONS = {
|
|
|
4593
4592
|
}
|
|
4594
4593
|
Zoom.VERSION = '0.0.2';
|
|
4595
4594
|
|
|
4596
|
-
function _extends$
|
|
4597
|
-
_extends$
|
|
4595
|
+
function _extends$h() {
|
|
4596
|
+
_extends$h = Object.assign || function(target) {
|
|
4598
4597
|
for(var i = 1; i < arguments.length; i++){
|
|
4599
4598
|
var source = arguments[i];
|
|
4600
4599
|
for(var key in source){
|
|
@@ -4605,10 +4604,10 @@ function _extends$i() {
|
|
|
4605
4604
|
}
|
|
4606
4605
|
return target;
|
|
4607
4606
|
};
|
|
4608
|
-
return _extends$
|
|
4607
|
+
return _extends$h.apply(this, arguments);
|
|
4609
4608
|
}
|
|
4610
4609
|
function __zoom(theme, container, options) {
|
|
4611
|
-
theme.zoomUtil = new Zoom(container, _extends$
|
|
4610
|
+
theme.zoomUtil = new Zoom(container, _extends$h({}, options || {}, {
|
|
4612
4611
|
min: 1,
|
|
4613
4612
|
onChange: (zoom, reset)=>{
|
|
4614
4613
|
if (zoom !== theme._zoom) {
|
|
@@ -4714,8 +4713,8 @@ function _async_to_generator$5(fn) {
|
|
|
4714
4713
|
});
|
|
4715
4714
|
};
|
|
4716
4715
|
}
|
|
4717
|
-
function _extends$
|
|
4718
|
-
_extends$
|
|
4716
|
+
function _extends$g() {
|
|
4717
|
+
_extends$g = Object.assign || function(target) {
|
|
4719
4718
|
for(var i = 1; i < arguments.length; i++){
|
|
4720
4719
|
var source = arguments[i];
|
|
4721
4720
|
for(var key in source){
|
|
@@ -4726,7 +4725,7 @@ function _extends$h() {
|
|
|
4726
4725
|
}
|
|
4727
4726
|
return target;
|
|
4728
4727
|
};
|
|
4729
|
-
return _extends$
|
|
4728
|
+
return _extends$g.apply(this, arguments);
|
|
4730
4729
|
}
|
|
4731
4730
|
/** 兼容 themeData中不规范的 key */ const replaceKey = {
|
|
4732
4731
|
sound: 'volume',
|
|
@@ -4763,7 +4762,7 @@ function _extends$h() {
|
|
|
4763
4762
|
}
|
|
4764
4763
|
if (item.isrender === 1 && REC_GROUP.includes(item.iconId)) {
|
|
4765
4764
|
// TODO: 因为回放是一组, 位置以第一个位置为准
|
|
4766
|
-
recControls.push(recControls[0] ? _extends$
|
|
4765
|
+
recControls.push(recControls[0] ? _extends$g({}, item, {
|
|
4767
4766
|
part: recControls[0].part
|
|
4768
4767
|
}) : item);
|
|
4769
4768
|
return false;
|
|
@@ -4786,7 +4785,7 @@ function _extends$h() {
|
|
|
4786
4785
|
}
|
|
4787
4786
|
if (item.isrender === 1 && REC_GROUP.includes(item.iconId)) {
|
|
4788
4787
|
// TODO: 因为回放是一组, 位置以第一个位置为准
|
|
4789
|
-
recControls.push(recControls[0] ? _extends$
|
|
4788
|
+
recControls.push(recControls[0] ? _extends$g({}, item, {
|
|
4790
4789
|
part: recControls[0].part
|
|
4791
4790
|
}) : item);
|
|
4792
4791
|
return false;
|
|
@@ -4977,8 +4976,8 @@ function rgbOrHexToRgbaWithOpacity(color, opacity = 0.8) {
|
|
|
4977
4976
|
}
|
|
4978
4977
|
}
|
|
4979
4978
|
|
|
4980
|
-
function _extends$
|
|
4981
|
-
_extends$
|
|
4979
|
+
function _extends$f() {
|
|
4980
|
+
_extends$f = Object.assign || function(target) {
|
|
4982
4981
|
for(var i = 1; i < arguments.length; i++){
|
|
4983
4982
|
var source = arguments[i];
|
|
4984
4983
|
for(var key in source){
|
|
@@ -4989,18 +4988,18 @@ function _extends$g() {
|
|
|
4989
4988
|
}
|
|
4990
4989
|
return target;
|
|
4991
4990
|
};
|
|
4992
|
-
return _extends$
|
|
4991
|
+
return _extends$f.apply(this, arguments);
|
|
4993
4992
|
}
|
|
4994
4993
|
class Footer extends Component {
|
|
4995
4994
|
constructor(options = {}){
|
|
4996
|
-
super(_extends$
|
|
4995
|
+
super(_extends$f({}, options, {
|
|
4997
4996
|
cType: 'footer'
|
|
4998
4997
|
}));
|
|
4999
4998
|
}
|
|
5000
4999
|
}
|
|
5001
5000
|
|
|
5002
|
-
function _extends$
|
|
5003
|
-
_extends$
|
|
5001
|
+
function _extends$e() {
|
|
5002
|
+
_extends$e = Object.assign || function(target) {
|
|
5004
5003
|
for(var i = 1; i < arguments.length; i++){
|
|
5005
5004
|
var source = arguments[i];
|
|
5006
5005
|
for(var key in source){
|
|
@@ -5011,11 +5010,11 @@ function _extends$f() {
|
|
|
5011
5010
|
}
|
|
5012
5011
|
return target;
|
|
5013
5012
|
};
|
|
5014
|
-
return _extends$
|
|
5013
|
+
return _extends$e.apply(this, arguments);
|
|
5015
5014
|
}
|
|
5016
5015
|
class Header extends Component {
|
|
5017
5016
|
constructor(options = {}){
|
|
5018
|
-
super(_extends$
|
|
5017
|
+
super(_extends$e({}, options, {
|
|
5019
5018
|
cType: 'header'
|
|
5020
5019
|
}));
|
|
5021
5020
|
}
|
|
@@ -5179,8 +5178,8 @@ function interactiveHF($container, second = 3000, callback) {
|
|
|
5179
5178
|
};
|
|
5180
5179
|
}
|
|
5181
5180
|
|
|
5182
|
-
function _extends$
|
|
5183
|
-
_extends$
|
|
5181
|
+
function _extends$d() {
|
|
5182
|
+
_extends$d = Object.assign || function(target) {
|
|
5184
5183
|
for(var i = 1; i < arguments.length; i++){
|
|
5185
5184
|
var source = arguments[i];
|
|
5186
5185
|
for(var key in source){
|
|
@@ -5191,7 +5190,7 @@ function _extends$e() {
|
|
|
5191
5190
|
}
|
|
5192
5191
|
return target;
|
|
5193
5192
|
};
|
|
5194
|
-
return _extends$
|
|
5193
|
+
return _extends$d.apply(this, arguments);
|
|
5195
5194
|
}
|
|
5196
5195
|
/**
|
|
5197
5196
|
* 全局全屏
|
|
@@ -5221,15 +5220,15 @@ function _extends$e() {
|
|
|
5221
5220
|
}
|
|
5222
5221
|
}
|
|
5223
5222
|
constructor(options){
|
|
5224
|
-
super(_extends$
|
|
5223
|
+
super(_extends$d({}, options, {
|
|
5225
5224
|
controlType: 'button',
|
|
5226
5225
|
classNameSuffix: 'global-fullscreen'
|
|
5227
5226
|
}));
|
|
5228
5227
|
}
|
|
5229
5228
|
}
|
|
5230
5229
|
|
|
5231
|
-
function _extends$
|
|
5232
|
-
_extends$
|
|
5230
|
+
function _extends$c() {
|
|
5231
|
+
_extends$c = Object.assign || function(target) {
|
|
5233
5232
|
for(var i = 1; i < arguments.length; i++){
|
|
5234
5233
|
var source = arguments[i];
|
|
5235
5234
|
for(var key in source){
|
|
@@ -5240,7 +5239,7 @@ function _extends$d() {
|
|
|
5240
5239
|
}
|
|
5241
5240
|
return target;
|
|
5242
5241
|
};
|
|
5243
|
-
return _extends$
|
|
5242
|
+
return _extends$c.apply(this, arguments);
|
|
5244
5243
|
}
|
|
5245
5244
|
/**
|
|
5246
5245
|
* 截图控件,点击后会触发截图事件, 截图数据会通过 onCapture 回调函数返回
|
|
@@ -5283,7 +5282,7 @@ function _extends$d() {
|
|
|
5283
5282
|
super._onControlClick(e);
|
|
5284
5283
|
}
|
|
5285
5284
|
constructor(options){
|
|
5286
|
-
super(_extends$
|
|
5285
|
+
super(_extends$c({}, options, {
|
|
5287
5286
|
tagName: 'span',
|
|
5288
5287
|
classNameSuffix: 'capture-picture'
|
|
5289
5288
|
})), this._timer = null;
|
|
@@ -6061,8 +6060,8 @@ function _async_to_generator$4(fn) {
|
|
|
6061
6060
|
}
|
|
6062
6061
|
};
|
|
6063
6062
|
|
|
6064
|
-
function _extends$
|
|
6065
|
-
_extends$
|
|
6063
|
+
function _extends$b() {
|
|
6064
|
+
_extends$b = Object.assign || function(target) {
|
|
6066
6065
|
for(var i = 1; i < arguments.length; i++){
|
|
6067
6066
|
var source = arguments[i];
|
|
6068
6067
|
for(var key in source){
|
|
@@ -6073,7 +6072,7 @@ function _extends$c() {
|
|
|
6073
6072
|
}
|
|
6074
6073
|
return target;
|
|
6075
6074
|
};
|
|
6076
|
-
return _extends$
|
|
6075
|
+
return _extends$b.apply(this, arguments);
|
|
6077
6076
|
}
|
|
6078
6077
|
/**
|
|
6079
6078
|
* 云台控件
|
|
@@ -6111,7 +6110,7 @@ function _extends$c() {
|
|
|
6111
6110
|
this.$turntable.classList.add(`${PREFIX_CLASS}-ptz-turntable`);
|
|
6112
6111
|
this.$panel.appendChild(this.$turntable);
|
|
6113
6112
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
6114
|
-
this._ptzControl = new Ptz$1(this.$turntable, _extends$
|
|
6113
|
+
this._ptzControl = new Ptz$1(this.$turntable, _extends$b({}, this._options, {
|
|
6115
6114
|
onSpeedChange: this._onSpeedChange.bind(this),
|
|
6116
6115
|
onDirection: this._onDirection.bind(this)
|
|
6117
6116
|
}));
|
|
@@ -6120,7 +6119,7 @@ function _extends$c() {
|
|
|
6120
6119
|
}
|
|
6121
6120
|
renderMobileExtend($container) {
|
|
6122
6121
|
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
6123
|
-
if (!this._ptzControl1) this._ptzControl1 = new MobilePtz($container, _extends$
|
|
6122
|
+
if (!this._ptzControl1) this._ptzControl1 = new MobilePtz($container, _extends$b({}, this._options, {
|
|
6124
6123
|
onSpeedChange: this._onSpeedChange.bind(this),
|
|
6125
6124
|
onDirection: this._onDirection.bind(this)
|
|
6126
6125
|
}));
|
|
@@ -6188,7 +6187,7 @@ function _extends$c() {
|
|
|
6188
6187
|
this.active = false;
|
|
6189
6188
|
}
|
|
6190
6189
|
constructor(options){
|
|
6191
|
-
super(_extends$
|
|
6190
|
+
super(_extends$b({}, options, {
|
|
6192
6191
|
tagName: 'span',
|
|
6193
6192
|
controlType: 'button',
|
|
6194
6193
|
classNameSuffix: 'ptz'
|
|
@@ -6207,8 +6206,8 @@ function formatTime(seconds, format = 'MM:SS') {
|
|
|
6207
6206
|
return format.replace('HH', pad(hours)).replace('MM', pad(minutes)).replace('SS', pad(secs));
|
|
6208
6207
|
}
|
|
6209
6208
|
|
|
6210
|
-
function _extends$
|
|
6211
|
-
_extends$
|
|
6209
|
+
function _extends$a() {
|
|
6210
|
+
_extends$a = Object.assign || function(target) {
|
|
6212
6211
|
for(var i = 1; i < arguments.length; i++){
|
|
6213
6212
|
var source = arguments[i];
|
|
6214
6213
|
for(var key in source){
|
|
@@ -6219,7 +6218,7 @@ function _extends$b() {
|
|
|
6219
6218
|
}
|
|
6220
6219
|
return target;
|
|
6221
6220
|
};
|
|
6222
|
-
return _extends$
|
|
6221
|
+
return _extends$a.apply(this, arguments);
|
|
6223
6222
|
}
|
|
6224
6223
|
const RECORD_DEFAULT_OPTIONS = {
|
|
6225
6224
|
maxDuration: 3600
|
|
@@ -6314,7 +6313,7 @@ const RECORD_DEFAULT_OPTIONS = {
|
|
|
6314
6313
|
super._onControlClick(e);
|
|
6315
6314
|
}
|
|
6316
6315
|
constructor(options){
|
|
6317
|
-
super(_extends$
|
|
6316
|
+
super(_extends$a({}, options, {
|
|
6318
6317
|
tagName: 'span',
|
|
6319
6318
|
controlType: 'button',
|
|
6320
6319
|
classNameSuffix: 'record'
|
|
@@ -6353,8 +6352,8 @@ function _async_to_generator$3(fn) {
|
|
|
6353
6352
|
});
|
|
6354
6353
|
};
|
|
6355
6354
|
}
|
|
6356
|
-
function _extends$
|
|
6357
|
-
_extends$
|
|
6355
|
+
function _extends$9() {
|
|
6356
|
+
_extends$9 = Object.assign || function(target) {
|
|
6358
6357
|
for(var i = 1; i < arguments.length; i++){
|
|
6359
6358
|
var source = arguments[i];
|
|
6360
6359
|
for(var key in source){
|
|
@@ -6365,7 +6364,7 @@ function _extends$a() {
|
|
|
6365
6364
|
}
|
|
6366
6365
|
return target;
|
|
6367
6366
|
};
|
|
6368
|
-
return _extends$
|
|
6367
|
+
return _extends$9.apply(this, arguments);
|
|
6369
6368
|
}
|
|
6370
6369
|
/**
|
|
6371
6370
|
* 对讲控件
|
|
@@ -6443,7 +6442,7 @@ function _extends$a() {
|
|
|
6443
6442
|
}).call(this);
|
|
6444
6443
|
}
|
|
6445
6444
|
constructor(options){
|
|
6446
|
-
super(_extends$
|
|
6445
|
+
super(_extends$9({}, options, {
|
|
6447
6446
|
tagName: 'span',
|
|
6448
6447
|
controlType: 'button',
|
|
6449
6448
|
classNameSuffix: 'talk'
|
|
@@ -6464,8 +6463,8 @@ function _extends$a() {
|
|
|
6464
6463
|
}
|
|
6465
6464
|
}
|
|
6466
6465
|
|
|
6467
|
-
function _extends$
|
|
6468
|
-
_extends$
|
|
6466
|
+
function _extends$8() {
|
|
6467
|
+
_extends$8 = Object.assign || function(target) {
|
|
6469
6468
|
for(var i = 1; i < arguments.length; i++){
|
|
6470
6469
|
var source = arguments[i];
|
|
6471
6470
|
for(var key in source){
|
|
@@ -6476,7 +6475,7 @@ function _extends$9() {
|
|
|
6476
6475
|
}
|
|
6477
6476
|
return target;
|
|
6478
6477
|
};
|
|
6479
|
-
return _extends$
|
|
6478
|
+
return _extends$8.apply(this, arguments);
|
|
6480
6479
|
}
|
|
6481
6480
|
const SELECT_DEFAULT_OPTIONS = {
|
|
6482
6481
|
fieldNames: {
|
|
@@ -6675,7 +6674,7 @@ const SELECT_DEFAULT_OPTIONS = {
|
|
|
6675
6674
|
}
|
|
6676
6675
|
constructor(options){
|
|
6677
6676
|
var _this__options_fieldNames, _this__picker_$body;
|
|
6678
|
-
super(_extends$
|
|
6677
|
+
super(_extends$8({
|
|
6679
6678
|
tagName: 'span',
|
|
6680
6679
|
type: 'button',
|
|
6681
6680
|
controlType: 'button'
|
|
@@ -6689,8 +6688,7 @@ const SELECT_DEFAULT_OPTIONS = {
|
|
|
6689
6688
|
}
|
|
6690
6689
|
var _this__options_fieldNames_value;
|
|
6691
6690
|
const valueKey = (_this__options_fieldNames_value = (_this__options_fieldNames = this._options.fieldNames) == null ? void 0 : _this__options_fieldNames.value) != null ? _this__options_fieldNames_value : 'value';
|
|
6692
|
-
this._picker = new Picker({
|
|
6693
|
-
container: this.$container,
|
|
6691
|
+
this._picker = new Picker(this.$container, {
|
|
6694
6692
|
// 由于某些原因, 移动端强制渲染在 body 上
|
|
6695
6693
|
getPopupContainer: ()=>Utils.isMobile ? options.rootContainer : this.$container,
|
|
6696
6694
|
trigger: Utils.isMobile ? 'click' : 'hover',
|
|
@@ -6718,8 +6716,8 @@ const SELECT_DEFAULT_OPTIONS = {
|
|
|
6718
6716
|
}
|
|
6719
6717
|
}
|
|
6720
6718
|
|
|
6721
|
-
function _extends$
|
|
6722
|
-
_extends$
|
|
6719
|
+
function _extends$7() {
|
|
6720
|
+
_extends$7 = Object.assign || function(target) {
|
|
6723
6721
|
for(var i = 1; i < arguments.length; i++){
|
|
6724
6722
|
var source = arguments[i];
|
|
6725
6723
|
for(var key in source){
|
|
@@ -6730,7 +6728,7 @@ function _extends$8() {
|
|
|
6730
6728
|
}
|
|
6731
6729
|
return target;
|
|
6732
6730
|
};
|
|
6733
|
-
return _extends$
|
|
6731
|
+
return _extends$7.apply(this, arguments);
|
|
6734
6732
|
}
|
|
6735
6733
|
const DEFINITION_LEVELS_LOCALE = [
|
|
6736
6734
|
'VIDEO_LEVEL_FLUENT',
|
|
@@ -6783,7 +6781,7 @@ function __filter(list, locale = {}) {
|
|
|
6783
6781
|
}
|
|
6784
6782
|
constructor(options = {}){
|
|
6785
6783
|
var _options_props, _options_props1, _options_locales_options_language;
|
|
6786
|
-
super(_extends$
|
|
6784
|
+
super(_extends$7({}, DEFINITION_DEFAULT_OPTIONS, {
|
|
6787
6785
|
value: (_options_props = options.props) == null ? void 0 : _options_props.videoLevel
|
|
6788
6786
|
}, options, {
|
|
6789
6787
|
fieldNames: {
|
|
@@ -6795,14 +6793,12 @@ function __filter(list, locale = {}) {
|
|
|
6795
6793
|
controlType: 'button',
|
|
6796
6794
|
classNameSuffix: 'definition',
|
|
6797
6795
|
renderLabel: (label, item, list)=>{
|
|
6798
|
-
var _list_;
|
|
6799
6796
|
if ((item == null ? void 0 : item.level) === 'auto') {
|
|
6800
6797
|
var _options_locales_options_language;
|
|
6801
|
-
const
|
|
6802
|
-
return `<span>${options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO}(${(
|
|
6798
|
+
const realIitem = list.find((it)=>it.level === this._level);
|
|
6799
|
+
return `<span>${options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO}(${(realIitem == null ? void 0 : realIitem.name) || ''})</span>`;
|
|
6803
6800
|
}
|
|
6804
|
-
|
|
6805
|
-
return `<span>${label || ((_list_ = list[0]) == null ? void 0 : _list_.name) || ''}</span>`;
|
|
6801
|
+
return `<span>${label}</span>`;
|
|
6806
6802
|
},
|
|
6807
6803
|
onChange: (value, item)=>{
|
|
6808
6804
|
var _options_onChange;
|
|
@@ -6829,9 +6825,9 @@ function __filter(list, locale = {}) {
|
|
|
6829
6825
|
this._level = realLevel + '';
|
|
6830
6826
|
if (l === 'auto') {
|
|
6831
6827
|
var _options_locales_options_language;
|
|
6832
|
-
const
|
|
6828
|
+
const realIitem = this.list.find((it)=>it.level === this._level);
|
|
6833
6829
|
this.$container.querySelector(`.${PREFIX_CLASS}-select-btn`).innerHTML = `
|
|
6834
|
-
<span>${options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO}(${(
|
|
6830
|
+
<span>${options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO}(${(realIitem == null ? void 0 : realIitem.name) || ''})</span>
|
|
6835
6831
|
`;
|
|
6836
6832
|
} else {
|
|
6837
6833
|
if (this.value !== this._level + '') this.value = this._level + '';
|
|
@@ -6840,8 +6836,8 @@ function __filter(list, locale = {}) {
|
|
|
6840
6836
|
}
|
|
6841
6837
|
}
|
|
6842
6838
|
|
|
6843
|
-
function _extends$
|
|
6844
|
-
_extends$
|
|
6839
|
+
function _extends$6() {
|
|
6840
|
+
_extends$6 = Object.assign || function(target) {
|
|
6845
6841
|
for(var i = 1; i < arguments.length; i++){
|
|
6846
6842
|
var source = arguments[i];
|
|
6847
6843
|
for(var key in source){
|
|
@@ -6852,7 +6848,7 @@ function _extends$7() {
|
|
|
6852
6848
|
}
|
|
6853
6849
|
return target;
|
|
6854
6850
|
};
|
|
6855
|
-
return _extends$
|
|
6851
|
+
return _extends$6.apply(this, arguments);
|
|
6856
6852
|
}
|
|
6857
6853
|
// 支持的倍速列表, 需要是 2 的指数,不能小于 0.5, 最大 16 倍
|
|
6858
6854
|
const SUPPORT_SPEED = [
|
|
@@ -6888,7 +6884,7 @@ const SPEED_DEFAULT_OPTIONS = {
|
|
|
6888
6884
|
}
|
|
6889
6885
|
constructor(options){
|
|
6890
6886
|
var _options_locales_options_language, _options_locales;
|
|
6891
|
-
super(_extends$
|
|
6887
|
+
super(_extends$6({}, SPEED_DEFAULT_OPTIONS, options, {
|
|
6892
6888
|
value: (options.props.speed || 1) + '',
|
|
6893
6889
|
classNameSuffix: 'speed',
|
|
6894
6890
|
controlType: 'button',
|
|
@@ -7283,8 +7279,8 @@ const DEFAULT_OPTIONS = {
|
|
|
7283
7279
|
}
|
|
7284
7280
|
}
|
|
7285
7281
|
|
|
7286
|
-
function _extends$
|
|
7287
|
-
_extends$
|
|
7282
|
+
function _extends$5() {
|
|
7283
|
+
_extends$5 = Object.assign || function(target) {
|
|
7288
7284
|
for(var i = 1; i < arguments.length; i++){
|
|
7289
7285
|
var source = arguments[i];
|
|
7290
7286
|
for(var key in source){
|
|
@@ -7295,7 +7291,7 @@ function _extends$6() {
|
|
|
7295
7291
|
}
|
|
7296
7292
|
return target;
|
|
7297
7293
|
};
|
|
7298
|
-
return _extends$
|
|
7294
|
+
return _extends$5.apply(this, arguments);
|
|
7299
7295
|
}
|
|
7300
7296
|
/**
|
|
7301
7297
|
* 日历选择器控件
|
|
@@ -7376,7 +7372,7 @@ function _extends$6() {
|
|
|
7376
7372
|
}
|
|
7377
7373
|
constructor(options){
|
|
7378
7374
|
var _this_options_props_urlInfo_searchParams, _this_options_props_urlInfo, _this_options_props;
|
|
7379
|
-
super(_extends$
|
|
7375
|
+
super(_extends$5({}, options, {
|
|
7380
7376
|
tagName: 'span',
|
|
7381
7377
|
controlType: 'button',
|
|
7382
7378
|
classNameSuffix: 'date'
|
|
@@ -7387,1274 +7383,6 @@ function _extends$6() {
|
|
|
7387
7383
|
}
|
|
7388
7384
|
}
|
|
7389
7385
|
|
|
7390
|
-
/*
|
|
7391
|
-
* @ezuikit/control-time-line v0.0.1
|
|
7392
|
-
* Copyright (c) 2025-09-21 Ezviz-OpenBiz
|
|
7393
|
-
* Released under the MIT License.
|
|
7394
|
-
*/
|
|
7395
|
-
|
|
7396
|
-
const BASE_TIME_LINE_DEFAULT_OPTIONS = {
|
|
7397
|
-
language: 'zh',
|
|
7398
|
-
records: [],
|
|
7399
|
-
onChange: ()=>{},
|
|
7400
|
-
onDragStart: ()=>{},
|
|
7401
|
-
onDragging: ()=>{},
|
|
7402
|
-
onDragEnd: ()=>{}
|
|
7403
|
-
};
|
|
7404
|
-
class BaseTimeLine {
|
|
7405
|
-
get current() {
|
|
7406
|
-
return this._current;
|
|
7407
|
-
}
|
|
7408
|
-
/**
|
|
7409
|
-
* 更新当前时间
|
|
7410
|
-
* @param time 能转成时间的值, 如 时间对象 Date, 时间戳,时间戳字符串
|
|
7411
|
-
*/ update(current) {}
|
|
7412
|
-
updateRecords(records) {
|
|
7413
|
-
if (records) {
|
|
7414
|
-
this.records = records;
|
|
7415
|
-
}
|
|
7416
|
-
}
|
|
7417
|
-
resize(width, height) {}
|
|
7418
|
-
/**
|
|
7419
|
-
* 改变时间轴刻度
|
|
7420
|
-
*/ changeScale(timelag) {}
|
|
7421
|
-
setReadOnly(readOnly) {}
|
|
7422
|
-
destroy() {
|
|
7423
|
-
this._current = undefined;
|
|
7424
|
-
}
|
|
7425
|
-
constructor(container, options){
|
|
7426
|
-
this.records = [];
|
|
7427
|
-
this.$container = container;
|
|
7428
|
-
this.options = deepmerge(BASE_TIME_LINE_DEFAULT_OPTIONS, options, {
|
|
7429
|
-
clone: false
|
|
7430
|
-
});
|
|
7431
|
-
}
|
|
7432
|
-
}
|
|
7433
|
-
|
|
7434
|
-
function toDate(time) {
|
|
7435
|
-
let date = null;
|
|
7436
|
-
if (typeof time === 'string' && time.includes(':')) {
|
|
7437
|
-
date = new Date(time);
|
|
7438
|
-
} else if ((typeof time === 'string' || typeof time === 'number') && /\d/.test(time + '') && (time + '').length === 10) {
|
|
7439
|
-
date = new Date(+time * 1000);
|
|
7440
|
-
} else if ((typeof time === 'string' || typeof time === 'number') && /\d/.test(time + '') && (time + '').length === 13) {
|
|
7441
|
-
date = new Date(+time);
|
|
7442
|
-
} else if (time instanceof Date) {
|
|
7443
|
-
date = time;
|
|
7444
|
-
}
|
|
7445
|
-
return date;
|
|
7446
|
-
}
|
|
7447
|
-
/**
|
|
7448
|
-
*
|
|
7449
|
-
* @param time
|
|
7450
|
-
* @returns
|
|
7451
|
-
*/ function formatDateToHHmmss(time) {
|
|
7452
|
-
const date = toDate(time);
|
|
7453
|
-
if (date) {
|
|
7454
|
-
const h = date.getHours(); // 返回日期中的小时数(0到23)
|
|
7455
|
-
const m = date.getMinutes(); // 返回日期中的分钟数(0到59)
|
|
7456
|
-
const s = date.getSeconds(); // 返回日期中的秒数(0到59)
|
|
7457
|
-
return (h > 9 ? h : '0' + h) + ':' + (m > 9 ? m : '0' + m) + ':' + (s > 9 ? s : '0' + s);
|
|
7458
|
-
}
|
|
7459
|
-
return '00:00:00';
|
|
7460
|
-
}
|
|
7461
|
-
function subTime(time) {
|
|
7462
|
-
if (+time < 10) {
|
|
7463
|
-
return '0' + time;
|
|
7464
|
-
} else {
|
|
7465
|
-
return time;
|
|
7466
|
-
}
|
|
7467
|
-
}
|
|
7468
|
-
function tranTime(time, fmt = 'YYYY-MM-DD HH:mm:ss') {
|
|
7469
|
-
const newDate = toDate(time);
|
|
7470
|
-
if (newDate) {
|
|
7471
|
-
if (fmt === 'YYYY-MM-DD') {
|
|
7472
|
-
return newDate.getFullYear() + '-' + subTime(newDate.getMonth() + 1) + '-' + subTime(newDate.getDate());
|
|
7473
|
-
} else if (fmt === 'HH:mm:ss') {
|
|
7474
|
-
return subTime(newDate.getHours()) + ':' + subTime(newDate.getMinutes()) + ':' + subTime(newDate.getSeconds());
|
|
7475
|
-
}
|
|
7476
|
-
// prettier-ignore
|
|
7477
|
-
return newDate.getFullYear() + "-" + subTime(newDate.getMonth() + 1) + "-" + subTime(newDate.getDate()) + " " + subTime(newDate.getHours()) + ":" + subTime(newDate.getMinutes()) + ":" + subTime(newDate.getSeconds());
|
|
7478
|
-
}
|
|
7479
|
-
return '';
|
|
7480
|
-
}
|
|
7481
|
-
/**
|
|
7482
|
-
* @description 判读两个区间是否重叠
|
|
7483
|
-
* @param {number} a_start 一个区间的开始
|
|
7484
|
-
* @param {number} a_end 一个区间的结束
|
|
7485
|
-
* @param {number} b_start 另一个区间的开始
|
|
7486
|
-
* @param {number} b_end 另一个区间的结束
|
|
7487
|
-
* @returns {boolean}
|
|
7488
|
-
*/ function isOverlap(a_start, a_end, b_start, b_end) {
|
|
7489
|
-
return Math.max(a_start, b_start) <= Math.min(a_end, b_end);
|
|
7490
|
-
}
|
|
7491
|
-
|
|
7492
|
-
/* eslint-disable @typescript-eslint/no-non-null-assertion */ /* eslint-disable eqeqeq */ /* eslint-disable no-unneeded-ternary */ /* eslint-disable @typescript-eslint/no-this-alias */ /* eslint-disable @typescript-eslint/prefer-includes */ function _extends$5() {
|
|
7493
|
-
_extends$5 = Object.assign || function(target) {
|
|
7494
|
-
for(var i = 1; i < arguments.length; i++){
|
|
7495
|
-
var source = arguments[i];
|
|
7496
|
-
for(var key in source){
|
|
7497
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
7498
|
-
target[key] = source[key];
|
|
7499
|
-
}
|
|
7500
|
-
}
|
|
7501
|
-
}
|
|
7502
|
-
return target;
|
|
7503
|
-
};
|
|
7504
|
-
return _extends$5.apply(this, arguments);
|
|
7505
|
-
}
|
|
7506
|
-
const PREFIX = 'ez-time-line';
|
|
7507
|
-
/**
|
|
7508
|
-
* 0: 1分钟,
|
|
7509
|
-
* 1: 10分钟
|
|
7510
|
-
* 2: 半小时
|
|
7511
|
-
* 3: 1小时
|
|
7512
|
-
* 4: 2小时
|
|
7513
|
-
*/ const scaleEnum = {
|
|
7514
|
-
0: 1,
|
|
7515
|
-
1: 10,
|
|
7516
|
-
2: 30,
|
|
7517
|
-
3: 60,
|
|
7518
|
-
4: 120
|
|
7519
|
-
};
|
|
7520
|
-
const MOBILE_TIME_LINE_DEFAULT_OPTIONS = Object.assign({}, BASE_TIME_LINE_DEFAULT_OPTIONS, {
|
|
7521
|
-
// height: 400,
|
|
7522
|
-
scale: 0,
|
|
7523
|
-
readOnly: false
|
|
7524
|
-
});
|
|
7525
|
-
let TimeLine$1 = class TimeLine extends BaseTimeLine {
|
|
7526
|
-
/**
|
|
7527
|
-
* 更新状态
|
|
7528
|
-
* @param obj
|
|
7529
|
-
*/ setState(obj) {
|
|
7530
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
7531
|
-
Object.keys(obj).forEach((key)=>{
|
|
7532
|
-
this.state[key] = obj[key];
|
|
7533
|
-
if (key === 'scrollTop' && this._$itemList) {
|
|
7534
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
7535
|
-
this._$itemContainer.scrollTo(0, obj[key]);
|
|
7536
|
-
}
|
|
7537
|
-
if (key === 'current' && this._$currentTime) {
|
|
7538
|
-
this._$currentTime.querySelector(`.${PREFIX}-current-value`).innerHTML = obj[key];
|
|
7539
|
-
}
|
|
7540
|
-
});
|
|
7541
|
-
}
|
|
7542
|
-
/**
|
|
7543
|
-
* 设置只读或取消只读
|
|
7544
|
-
* @param readOnly - 只读或取消只读
|
|
7545
|
-
* @returns
|
|
7546
|
-
*/ setReadOnly(readOnly) {
|
|
7547
|
-
this._readOnly = readOnly;
|
|
7548
|
-
if (this._$itemList) this._$itemContainer.style.overflowY = readOnly ? 'hidden' : 'scroll';
|
|
7549
|
-
}
|
|
7550
|
-
/**
|
|
7551
|
-
* 改变时间轴刻度
|
|
7552
|
-
* 0: 1分钟,
|
|
7553
|
-
* 1: 10分钟
|
|
7554
|
-
* 2: 半小时
|
|
7555
|
-
* 3: 1小时
|
|
7556
|
-
* 4: 2小时
|
|
7557
|
-
* @param value 120: 2小时, 60:1小时, 30:半小时,10:10分钟,1:1分钟
|
|
7558
|
-
*/ changeScale(scale) {
|
|
7559
|
-
if (scaleEnum[scale]) {
|
|
7560
|
-
this._scale = scale;
|
|
7561
|
-
this._matchTimeDot();
|
|
7562
|
-
}
|
|
7563
|
-
}
|
|
7564
|
-
get scale() {
|
|
7565
|
-
return this._scale;
|
|
7566
|
-
}
|
|
7567
|
-
/**
|
|
7568
|
-
* 获取真实时间刻度(时间单位 分钟)
|
|
7569
|
-
*/ get _scaleWidth() {
|
|
7570
|
-
return scaleEnum[this._scale] || scaleEnum[0];
|
|
7571
|
-
}
|
|
7572
|
-
updateRecords(records, defaultIndex) {
|
|
7573
|
-
const list = records.map((record)=>{
|
|
7574
|
-
return _extends$5({}, record, {
|
|
7575
|
-
startTime: formatDateToHHmmss(record.startTime),
|
|
7576
|
-
endTime: formatDateToHHmmss(record.endTime)
|
|
7577
|
-
});
|
|
7578
|
-
});
|
|
7579
|
-
if (list.length > 0) {
|
|
7580
|
-
if (typeof defaultIndex === 'undefined') {
|
|
7581
|
-
defaultIndex = list.length - 1;
|
|
7582
|
-
}
|
|
7583
|
-
// 若current不为0,则不重置current,避免拖动后时间轴回弹
|
|
7584
|
-
const { current } = this.state;
|
|
7585
|
-
this.setState({
|
|
7586
|
-
availTimeLine: list,
|
|
7587
|
-
start: list[defaultIndex].startTime,
|
|
7588
|
-
end: list[defaultIndex].endTime,
|
|
7589
|
-
current: current === 0 ? list[defaultIndex].startTime : current
|
|
7590
|
-
});
|
|
7591
|
-
this._matchRecTimeDot();
|
|
7592
|
-
this._primaryOffsetH();
|
|
7593
|
-
} else {
|
|
7594
|
-
this.setState({
|
|
7595
|
-
availTimeLine: []
|
|
7596
|
-
});
|
|
7597
|
-
this._matchRecTimeDot();
|
|
7598
|
-
}
|
|
7599
|
-
}
|
|
7600
|
-
_matchTimeDot() {
|
|
7601
|
-
const { end } = this.state;
|
|
7602
|
-
const scaleWidth = this._scaleWidth;
|
|
7603
|
-
const timeArr = [];
|
|
7604
|
-
// 时间转分钟
|
|
7605
|
-
let minute = this._timeToMinute(end);
|
|
7606
|
-
minute = Math.floor(minute / scaleWidth) * scaleWidth;
|
|
7607
|
-
for(let i = minute; i >= 0;){
|
|
7608
|
-
let marginTop = 0;
|
|
7609
|
-
let marginBottom = 0;
|
|
7610
|
-
// 视频片段
|
|
7611
|
-
if (i == minute) marginTop = 70;
|
|
7612
|
-
if (i == 0) {
|
|
7613
|
-
const height = this.$container.clientHeight;
|
|
7614
|
-
marginBottom = height - 70;
|
|
7615
|
-
}
|
|
7616
|
-
const time = this._minuteToTime(i);
|
|
7617
|
-
timeArr.push({
|
|
7618
|
-
id: i,
|
|
7619
|
-
current: time,
|
|
7620
|
-
label: 'a' + i,
|
|
7621
|
-
marginTop,
|
|
7622
|
-
marginBottom,
|
|
7623
|
-
recArr: []
|
|
7624
|
-
});
|
|
7625
|
-
i = i - scaleWidth;
|
|
7626
|
-
}
|
|
7627
|
-
this.setState({
|
|
7628
|
-
timeArr
|
|
7629
|
-
});
|
|
7630
|
-
this._renderDateLine();
|
|
7631
|
-
}
|
|
7632
|
-
_matchRecTimeDot() {
|
|
7633
|
-
const { start, end, availTimeLine, timeArr } = this.state;
|
|
7634
|
-
const scaleWidth = this._scaleWidth;
|
|
7635
|
-
const len = availTimeLine.length;
|
|
7636
|
-
if (len === 0) {
|
|
7637
|
-
for(let j = 0; j < timeArr.length; j++){
|
|
7638
|
-
timeArr[j].recArr = [];
|
|
7639
|
-
}
|
|
7640
|
-
} else {
|
|
7641
|
-
for(let k = 0; k < timeArr.length; k++){
|
|
7642
|
-
timeArr[k].recArr = [];
|
|
7643
|
-
}
|
|
7644
|
-
for(let i = 0; i < len; i++){
|
|
7645
|
-
const temp = availTimeLine[i];
|
|
7646
|
-
const st = this._timeToSecond(temp.startTime);
|
|
7647
|
-
const et = this._timeToSecond(temp.endTime);
|
|
7648
|
-
// console.log('st: ', st, 'et:', et);
|
|
7649
|
-
let stAvailPercent = 0;
|
|
7650
|
-
let etAvailPercent = 0;
|
|
7651
|
-
const stMinute = Math.floor(st / (scaleWidth * 60)) * scaleWidth;
|
|
7652
|
-
stAvailPercent = (st - stMinute * 60) / scaleWidth;
|
|
7653
|
-
const etMinute = Math.floor(et / (scaleWidth * 60)) * scaleWidth;
|
|
7654
|
-
etAvailPercent = (et - etMinute * 60) / scaleWidth;
|
|
7655
|
-
for(let j = 0; j < timeArr.length; j++){
|
|
7656
|
-
if (timeArr[j].id == stMinute && timeArr[j].id == etMinute) {
|
|
7657
|
-
const height = etAvailPercent - stAvailPercent;
|
|
7658
|
-
const top = 60 - etAvailPercent;
|
|
7659
|
-
timeArr[j].recArr.push({
|
|
7660
|
-
height,
|
|
7661
|
-
top
|
|
7662
|
-
});
|
|
7663
|
-
} else {
|
|
7664
|
-
if (timeArr[j].id == stMinute) {
|
|
7665
|
-
timeArr[j].recArr.push({
|
|
7666
|
-
height: 60 - stAvailPercent,
|
|
7667
|
-
top: 0
|
|
7668
|
-
});
|
|
7669
|
-
} else if (timeArr[j].id == etMinute) {
|
|
7670
|
-
timeArr[j].recArr.push({
|
|
7671
|
-
height: etAvailPercent,
|
|
7672
|
-
top: 60 - etAvailPercent
|
|
7673
|
-
});
|
|
7674
|
-
} else if (timeArr[j].id > stMinute && timeArr[j].id < etMinute) {
|
|
7675
|
-
timeArr[j].recArr.push({
|
|
7676
|
-
height: 60,
|
|
7677
|
-
top: 0
|
|
7678
|
-
});
|
|
7679
|
-
}
|
|
7680
|
-
}
|
|
7681
|
-
}
|
|
7682
|
-
}
|
|
7683
|
-
}
|
|
7684
|
-
this.setState({
|
|
7685
|
-
timeArr
|
|
7686
|
-
});
|
|
7687
|
-
this._renderDateLine();
|
|
7688
|
-
}
|
|
7689
|
-
_renderDateLine() {
|
|
7690
|
-
const { timeArr } = this.state;
|
|
7691
|
-
const container = this._$itemList;
|
|
7692
|
-
container.innerHTML = '';
|
|
7693
|
-
timeArr.forEach((item, index)=>{
|
|
7694
|
-
const timeItemDOM = document.createElement('div');
|
|
7695
|
-
timeItemDOM.setAttribute('class', PREFIX + '-time-scale-area');
|
|
7696
|
-
timeItemDOM.style.cssText = `margin-top: ${item.marginTop}px; margin-bottom: ${item.marginBottom}px; border-right-color: ${item.borderColor};`;
|
|
7697
|
-
const scaleDOM = document.createElement('div');
|
|
7698
|
-
scaleDOM.setAttribute('class', PREFIX + '-scale');
|
|
7699
|
-
let timeItemHtml = `
|
|
7700
|
-
<div class="${PREFIX}-time-scale"></div>
|
|
7701
|
-
<div class="${PREFIX}-time-scale"></div>
|
|
7702
|
-
<div class="${PREFIX}-time-scale"></div>
|
|
7703
|
-
<div class="${PREFIX}-time-scale"></div>
|
|
7704
|
-
<div class="${PREFIX}-time-scale"></div>
|
|
7705
|
-
<div class="${PREFIX}-time-scale" style="width:10px"></div>
|
|
7706
|
-
`;
|
|
7707
|
-
item.recArr.forEach((i, j)=>{
|
|
7708
|
-
timeItemHtml += `<div class="${PREFIX}-time-unavail" style="height: ${i.height}px;background-color:#A8B9ED; top: ${i.top}px"></div>`;
|
|
7709
|
-
});
|
|
7710
|
-
timeItemHtml += `<div id=${item.label} class="${PREFIX}-time-label"> ${item.current}</div>`;
|
|
7711
|
-
timeItemDOM.innerHTML = timeItemHtml;
|
|
7712
|
-
container.appendChild(timeItemDOM);
|
|
7713
|
-
});
|
|
7714
|
-
}
|
|
7715
|
-
_primaryOffsetH() {
|
|
7716
|
-
const { start, timeArr, current } = this.state;
|
|
7717
|
-
const scaleWidth = this._scaleWidth;
|
|
7718
|
-
const currentItem = timeArr[0].current;
|
|
7719
|
-
const currentTime = this._timeToSecond(currentItem);
|
|
7720
|
-
// current不为0时,从当前时间开始计算偏移量,避免拖动时间轴后回弹
|
|
7721
|
-
const startSecond = this._timeToSecond(current === 0 ? start : current);
|
|
7722
|
-
const offsetS = currentTime - startSecond;
|
|
7723
|
-
const offsetH = Math.ceil(offsetS / scaleWidth) + 60; // offsetS / (scaleWidth * 60) * 60
|
|
7724
|
-
this.setState({
|
|
7725
|
-
scrollTop: offsetH
|
|
7726
|
-
});
|
|
7727
|
-
}
|
|
7728
|
-
_currentOffsetH() {
|
|
7729
|
-
const { current, timeArr } = this.state;
|
|
7730
|
-
const scale = this._scaleWidth;
|
|
7731
|
-
const startItem = timeArr[0].current;
|
|
7732
|
-
const startSecond = this._timeToSecond(startItem);
|
|
7733
|
-
const currentSecond = this._timeToSecond(current);
|
|
7734
|
-
const offsetS = startSecond - currentSecond;
|
|
7735
|
-
const offsetH = Math.ceil(offsetS / scale) + 60; // offsetS / (scale * 60) * 60
|
|
7736
|
-
this.setState({
|
|
7737
|
-
scrollTop: offsetH
|
|
7738
|
-
});
|
|
7739
|
-
}
|
|
7740
|
-
_rectTopToTime(reactTop) {
|
|
7741
|
-
const scaleWidth = this._scaleWidth;
|
|
7742
|
-
// let rectTop = rect.top; // 获取当前元素距离父元素顶部的高度
|
|
7743
|
-
// let reactTop = 0 - rectTop; // 实际偏移高度
|
|
7744
|
-
const index = Math.floor(reactTop / 60); // 以分钟为刻度时,每个元素初始高度为60px, 向下取整并除以时刻倍数得出偏移item;
|
|
7745
|
-
const offsetH = reactTop - index * 60; // 偏移高度
|
|
7746
|
-
let current;
|
|
7747
|
-
let offsetSecond;
|
|
7748
|
-
if (offsetH == 0) {
|
|
7749
|
-
var _this_state_timeArr_;
|
|
7750
|
-
current = (_this_state_timeArr_ = this.state.timeArr[index - 1]) == null ? void 0 : _this_state_timeArr_.current;
|
|
7751
|
-
offsetSecond = 0;
|
|
7752
|
-
} else {
|
|
7753
|
-
// 当scaleWidth==120, scaleWidth==60, scaleWidth==30, scaleWidth==10, scaleWidth==1
|
|
7754
|
-
const time = this.state.timeArr[index].current;
|
|
7755
|
-
const minute = this._timeToMinute(time);
|
|
7756
|
-
// 相对于下一元素偏移
|
|
7757
|
-
const offsetY = 60 - offsetH;
|
|
7758
|
-
const offsetS = offsetY * scaleWidth; // offsetY / 60 * scaleWidth * 60
|
|
7759
|
-
const offsetM = Math.floor(offsetS / 60) + minute;
|
|
7760
|
-
const second = Math.floor(offsetS / 60) * 60;
|
|
7761
|
-
offsetSecond = Math.ceil(offsetS - second); // 保留两位小数
|
|
7762
|
-
current = this._minuteToTime(offsetM);
|
|
7763
|
-
}
|
|
7764
|
-
if (current === undefined || +current.split(':')[0] >= 24 && (+current.split(':')[1] > 0 || offsetSecond > 0)) {
|
|
7765
|
-
// 超出 24h 后不允许
|
|
7766
|
-
this.update(new Date(`${new Date().getFullYear()}-${subTime(new Date().getMonth() + 1)}-${subTime(new Date().getDate())} 23:59:59`));
|
|
7767
|
-
return;
|
|
7768
|
-
}
|
|
7769
|
-
this.setState({
|
|
7770
|
-
current: current + ':' + (offsetSecond > 9 ? offsetSecond : '0' + offsetSecond),
|
|
7771
|
-
scrollTop: reactTop
|
|
7772
|
-
});
|
|
7773
|
-
}
|
|
7774
|
-
/**
|
|
7775
|
-
* 更新当前时间
|
|
7776
|
-
* @param time 能转成时间的值, 如 时间对象 Date, 时间戳,时间戳字符串
|
|
7777
|
-
*/ update(time) {
|
|
7778
|
-
if (time && !this._isTouchStart) {
|
|
7779
|
-
this.setState({
|
|
7780
|
-
current: tranTime(time, 'HH:mm:ss')
|
|
7781
|
-
});
|
|
7782
|
-
this._currentOffsetH();
|
|
7783
|
-
}
|
|
7784
|
-
}
|
|
7785
|
-
destroy() {
|
|
7786
|
-
if (this._scrollTimer) {
|
|
7787
|
-
clearInterval(this._scrollTimer);
|
|
7788
|
-
this._scrollTimer = null;
|
|
7789
|
-
}
|
|
7790
|
-
this._removeEventListener();
|
|
7791
|
-
super.destroy();
|
|
7792
|
-
}
|
|
7793
|
-
_timeToSecond(time) {
|
|
7794
|
-
const e = time.split(':');
|
|
7795
|
-
const h = Number(e[0]);
|
|
7796
|
-
const m = Number(e[1]);
|
|
7797
|
-
const s = Number(e[2]);
|
|
7798
|
-
return h * 60 * 60 + m * 60 + (s ? s : 0);
|
|
7799
|
-
}
|
|
7800
|
-
_minuteToTime(minute) {
|
|
7801
|
-
const hour = Math.floor(minute / 60);
|
|
7802
|
-
const m = minute % 60;
|
|
7803
|
-
return (hour > 9 ? hour : '0' + hour) + ':' + (m > 9 ? m : '0' + m);
|
|
7804
|
-
}
|
|
7805
|
-
_timeToMinute(time) {
|
|
7806
|
-
const e = time.split(':');
|
|
7807
|
-
const h = Number(e[0]);
|
|
7808
|
-
const m = Number(e[1]);
|
|
7809
|
-
// const s = Number(e[2]);
|
|
7810
|
-
return h * 60 + m;
|
|
7811
|
-
}
|
|
7812
|
-
_render() {
|
|
7813
|
-
this._$currentTime = document.createElement('div');
|
|
7814
|
-
this._$currentTime.classList.add(PREFIX + '-current');
|
|
7815
|
-
this._$currentTime.innerHTML = `<div class="${PREFIX}-current-value">00:00:00</div>`;
|
|
7816
|
-
this.$container.appendChild(this._$currentTime);
|
|
7817
|
-
this._$itemContainer = document.createElement('div');
|
|
7818
|
-
this._$itemContainer.classList.add(PREFIX + '-item-container');
|
|
7819
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
7820
|
-
if (/\d/.test(this.options.height)) {
|
|
7821
|
-
this._$itemContainer.style.cssText += `height: ${this.options.height}px`;
|
|
7822
|
-
} else if (typeof this.options.height === 'string') {
|
|
7823
|
-
this._$itemContainer.style.cssText += `height: ${this.options.height}`;
|
|
7824
|
-
} else {
|
|
7825
|
-
const height = this.$container.clientHeight;
|
|
7826
|
-
this._$itemContainer.style.cssText += `height: ${height}px`;
|
|
7827
|
-
}
|
|
7828
|
-
this._$itemList = document.createElement('div');
|
|
7829
|
-
this._$itemList.classList.add(PREFIX + '-item');
|
|
7830
|
-
this._$itemContainer.appendChild(this._$itemList);
|
|
7831
|
-
this.$container.appendChild(this._$itemContainer);
|
|
7832
|
-
this._addEventListener();
|
|
7833
|
-
}
|
|
7834
|
-
_addEventListener() {
|
|
7835
|
-
// js安卓、IOS、鸿蒙系统监听开始触摸
|
|
7836
|
-
if (this._$itemContainer) {
|
|
7837
|
-
// 监听手动滚动时间轴时,停止时间轴滚动,时刻仍然变化
|
|
7838
|
-
this._$itemContainer.addEventListener('touchstart', this._touchstart, false);
|
|
7839
|
-
// 监听手动滚动时间轴时,停止时间轴滚动,时刻仍然变化
|
|
7840
|
-
this._$itemContainer.addEventListener('touchmove', this._touchmove, false);
|
|
7841
|
-
// 手动滚动停止,选定时刻自动播放
|
|
7842
|
-
this._$itemContainer.addEventListener('touchend', this._touchend, false);
|
|
7843
|
-
}
|
|
7844
|
-
this._matchTimeDot();
|
|
7845
|
-
}
|
|
7846
|
-
_removeEventListener() {
|
|
7847
|
-
if (this._$itemContainer) {
|
|
7848
|
-
// 监听手动滚动时间轴时,停止时间轴滚动,时刻仍然变化
|
|
7849
|
-
this._$itemContainer.removeEventListener('touchstart', this._touchstart);
|
|
7850
|
-
// 监听手动滚动时间轴时,停止时间轴滚动,时刻仍然变化
|
|
7851
|
-
this._$itemContainer.removeEventListener('touchmove', this._touchmove);
|
|
7852
|
-
// 手动滚动停止,选定时刻自动播放
|
|
7853
|
-
this._$itemContainer.removeEventListener('touchend', this._touchend);
|
|
7854
|
-
}
|
|
7855
|
-
}
|
|
7856
|
-
_touchstart() {
|
|
7857
|
-
if (this._readOnly) return false;
|
|
7858
|
-
this._isTouchStart = true;
|
|
7859
|
-
this.options.onDragStart == null ? void 0 : this.options.onDragStart.call(this.options, this.state.current);
|
|
7860
|
-
}
|
|
7861
|
-
_touchmove() {
|
|
7862
|
-
var _this__$itemContainer;
|
|
7863
|
-
if (this._readOnly) return false;
|
|
7864
|
-
const reactTop = (_this__$itemContainer = this._$itemContainer) == null ? void 0 : _this__$itemContainer.scrollTop; // 实际偏移高度
|
|
7865
|
-
this._rectTopToTime(reactTop);
|
|
7866
|
-
this.options.onDragging == null ? void 0 : this.options.onDragging.call(this.options, this.state.current);
|
|
7867
|
-
}
|
|
7868
|
-
_touchend() {
|
|
7869
|
-
if (this._readOnly) return false;
|
|
7870
|
-
// 这里有问题, 滚动是利用滚动操作(overflow-y: scroll;)的
|
|
7871
|
-
new Promise((resolve, _reject)=>{
|
|
7872
|
-
let preTop = -1;
|
|
7873
|
-
if (this._scrollTimer) {
|
|
7874
|
-
clearInterval(this._scrollTimer);
|
|
7875
|
-
this._scrollTimer = null;
|
|
7876
|
-
}
|
|
7877
|
-
this._scrollTimer = setInterval(()=>{
|
|
7878
|
-
var _this__$itemContainer;
|
|
7879
|
-
// debugger
|
|
7880
|
-
const reactTop = (_this__$itemContainer = this._$itemContainer) == null ? void 0 : _this__$itemContainer.scrollTop; // 实际偏移高度
|
|
7881
|
-
if (reactTop !== preTop) {
|
|
7882
|
-
preTop = reactTop;
|
|
7883
|
-
} else {
|
|
7884
|
-
if (this._scrollTimer) {
|
|
7885
|
-
clearInterval(this._scrollTimer);
|
|
7886
|
-
this._scrollTimer = null;
|
|
7887
|
-
}
|
|
7888
|
-
this._isTouchStart = false;
|
|
7889
|
-
resolve(reactTop);
|
|
7890
|
-
}
|
|
7891
|
-
}, 100);
|
|
7892
|
-
}).then((reactTop)=>{
|
|
7893
|
-
this._rectTopToTime(reactTop);
|
|
7894
|
-
this.options.onDragEnd == null ? void 0 : this.options.onDragEnd.call(this.options, this.state.current);
|
|
7895
|
-
this.options.onChange == null ? void 0 : this.options.onChange.call(this.options, this.state.current);
|
|
7896
|
-
});
|
|
7897
|
-
}
|
|
7898
|
-
constructor(container, options){
|
|
7899
|
-
super(container, deepmerge(MOBILE_TIME_LINE_DEFAULT_OPTIONS, options, {
|
|
7900
|
-
clone: false
|
|
7901
|
-
})), // 禁用拖动轴
|
|
7902
|
-
this._readOnly = false, this._isTouchStart = false, this.state = {
|
|
7903
|
-
start: '00:00:00',
|
|
7904
|
-
end: '24:00:00',
|
|
7905
|
-
current: 0,
|
|
7906
|
-
timeArr: [],
|
|
7907
|
-
availTimeLine: [],
|
|
7908
|
-
scrollTop: 0,
|
|
7909
|
-
index: 0,
|
|
7910
|
-
date: '',
|
|
7911
|
-
noTimeLineTxt: ''
|
|
7912
|
-
};
|
|
7913
|
-
this._scale = this.options.scale || 0;
|
|
7914
|
-
this.setReadOnly(!!this.options.readOnly);
|
|
7915
|
-
this._touchstart = this._touchstart.bind(this);
|
|
7916
|
-
this._touchmove = this._touchmove.bind(this);
|
|
7917
|
-
this._touchend = this._touchend.bind(this);
|
|
7918
|
-
this._render();
|
|
7919
|
-
}
|
|
7920
|
-
};
|
|
7921
|
-
|
|
7922
|
-
/**
|
|
7923
|
-
* 时间刻度宽度 [刻度间隔秒数s, 刻度间隔宽度px, 长刻度间隔短刻度个数, 说明]
|
|
7924
|
-
* 需要满足 (24 * 60 * 60) % ([0] * [2]) = 0, 这样 0 点刻度才能正确显示
|
|
7925
|
-
*/ /**
|
|
7926
|
-
* 时间刻度宽度, 需要满足 (24 * 60 * 60) % ([0] * [2]) = 0
|
|
7927
|
-
*/ const TIME_WIDTH = [
|
|
7928
|
-
[
|
|
7929
|
-
1,
|
|
7930
|
-
10,
|
|
7931
|
-
10,
|
|
7932
|
-
'单位 1秒'
|
|
7933
|
-
],
|
|
7934
|
-
[
|
|
7935
|
-
60,
|
|
7936
|
-
20,
|
|
7937
|
-
5,
|
|
7938
|
-
'单位 1分钟'
|
|
7939
|
-
],
|
|
7940
|
-
[
|
|
7941
|
-
600,
|
|
7942
|
-
20,
|
|
7943
|
-
6,
|
|
7944
|
-
'单位 10分钟'
|
|
7945
|
-
],
|
|
7946
|
-
[
|
|
7947
|
-
3600,
|
|
7948
|
-
30,
|
|
7949
|
-
6,
|
|
7950
|
-
'单位 1小时'
|
|
7951
|
-
],
|
|
7952
|
-
[
|
|
7953
|
-
14400,
|
|
7954
|
-
40,
|
|
7955
|
-
2,
|
|
7956
|
-
'单位 4小时'
|
|
7957
|
-
],
|
|
7958
|
-
[
|
|
7959
|
-
43200,
|
|
7960
|
-
80,
|
|
7961
|
-
2,
|
|
7962
|
-
'单位 12小时'
|
|
7963
|
-
]
|
|
7964
|
-
];
|
|
7965
|
-
|
|
7966
|
-
/**
|
|
7967
|
-
* 时间轴配置项
|
|
7968
|
-
*/ const TIMELINE_DEFAULT_OPTIONS = {
|
|
7969
|
-
height: 36,
|
|
7970
|
-
className: '',
|
|
7971
|
-
wrapClassName: '',
|
|
7972
|
-
timeSections: [],
|
|
7973
|
-
timeWidth: 0,
|
|
7974
|
-
currentTime: new Date(new Date().setHours(0, 0, 8, 0)),
|
|
7975
|
-
dpr: window.devicePixelRatio || 2,
|
|
7976
|
-
wheelSpeed: 0.1,
|
|
7977
|
-
readOnly: false,
|
|
7978
|
-
scaleOffsetTop: 4,
|
|
7979
|
-
showYearMonthDay: true,
|
|
7980
|
-
// --------------------只支持初始化时,不支持动态变更 (不做对象冻结)--------------------
|
|
7981
|
-
timePointColor: '#1890ff',
|
|
7982
|
-
timeTextColor: '#FFF',
|
|
7983
|
-
timeScaleColor: '#FFF',
|
|
7984
|
-
timeSectionColor: 'rgba(24, 144, 255, 0.5)',
|
|
7985
|
-
timeAxisBgColor: '#000',
|
|
7986
|
-
onChange: ()=>{},
|
|
7987
|
-
onDragEnd: ()=>{},
|
|
7988
|
-
onHover: ()=>{},
|
|
7989
|
-
onDestroy: ()=>{}
|
|
7990
|
-
};
|
|
7991
|
-
/**
|
|
7992
|
-
* 时间轴控件类, 支持PC/Mobile 拖动和缩放
|
|
7993
|
-
* @beta
|
|
7994
|
-
* @example
|
|
7995
|
-
* ```ts
|
|
7996
|
-
* import TimeLine from './TimeLine';
|
|
7997
|
-
* const timeLine = new TimeLine(document.getElementById('container'), {})
|
|
7998
|
-
* ```
|
|
7999
|
-
*/ let TimeLine$2 = class TimeLine {
|
|
8000
|
-
/**
|
|
8001
|
-
* 初始化 (canvas)
|
|
8002
|
-
*/ _init() {
|
|
8003
|
-
this._$canvas = document.createElement('canvas');
|
|
8004
|
-
this._ctx = this._$canvas.getContext('2d');
|
|
8005
|
-
if (this._options.className) {
|
|
8006
|
-
this._$canvas.className = this._options.className;
|
|
8007
|
-
}
|
|
8008
|
-
this._$canvas.style.cssText += 'cursor: pointer;';
|
|
8009
|
-
this.width = this._options.width || this.$container.offsetWidth;
|
|
8010
|
-
this.height = this._options.height || this.$container.offsetHeight;
|
|
8011
|
-
if (this._options.wrapClassName) this.$container.classList.add(this._options.wrapClassName);
|
|
8012
|
-
this.$container.appendChild(this._$canvas);
|
|
8013
|
-
this._addEventListener();
|
|
8014
|
-
this.setReadOnly(this._options.readOnly);
|
|
8015
|
-
this._update({
|
|
8016
|
-
currentTime: this._options.currentTime,
|
|
8017
|
-
timeWidth: this._options.timeWidth,
|
|
8018
|
-
timeSections: this._options.timeSections
|
|
8019
|
-
});
|
|
8020
|
-
}
|
|
8021
|
-
/**
|
|
8022
|
-
* 获取当前时间
|
|
8023
|
-
* @returns
|
|
8024
|
-
*/ get currentTime() {
|
|
8025
|
-
return this._currentTime;
|
|
8026
|
-
}
|
|
8027
|
-
set currentTime(time) {
|
|
8028
|
-
if (!this._isMouseDown && !this._destroyed) {
|
|
8029
|
-
this._update({
|
|
8030
|
-
currentTime: new Date(time)
|
|
8031
|
-
});
|
|
8032
|
-
}
|
|
8033
|
-
}
|
|
8034
|
-
/**
|
|
8035
|
-
* 获取 TimeLine 的宽度
|
|
8036
|
-
* @returns
|
|
8037
|
-
*/ get width() {
|
|
8038
|
-
return this._width;
|
|
8039
|
-
}
|
|
8040
|
-
set width(width) {
|
|
8041
|
-
if (this._$canvas && width) {
|
|
8042
|
-
width = Math.floor(width);
|
|
8043
|
-
this._$canvas.width = width * this._options.dpr;
|
|
8044
|
-
this._$canvas.style.cssText += `width: ${width}px;`;
|
|
8045
|
-
this.$container.style.width = width + 'px';
|
|
8046
|
-
this._width = width;
|
|
8047
|
-
this._update();
|
|
8048
|
-
}
|
|
8049
|
-
}
|
|
8050
|
-
/**
|
|
8051
|
-
* 获取 TimeLine 的高度
|
|
8052
|
-
* @returns
|
|
8053
|
-
*/ get height() {
|
|
8054
|
-
return this._height;
|
|
8055
|
-
}
|
|
8056
|
-
set height(height) {
|
|
8057
|
-
height = Math.floor(height);
|
|
8058
|
-
if (this._$canvas && height) {
|
|
8059
|
-
this._$canvas.height = height * this._options.dpr;
|
|
8060
|
-
this._$canvas.style.cssText += `height: ${height}px;`;
|
|
8061
|
-
this.$container.style.height = height + 'px';
|
|
8062
|
-
this._height = height;
|
|
8063
|
-
this._update();
|
|
8064
|
-
}
|
|
8065
|
-
}
|
|
8066
|
-
/**
|
|
8067
|
-
* 设置时间轴刻度宽度
|
|
8068
|
-
* @param timeWidth - 时间轴刻度宽度 [0, TIME_WIDTH.length - 1]
|
|
8069
|
-
* @returns
|
|
8070
|
-
*/ setTimeWidth(timeWidth) {
|
|
8071
|
-
this._update({
|
|
8072
|
-
timeWidth
|
|
8073
|
-
});
|
|
8074
|
-
}
|
|
8075
|
-
get scale() {
|
|
8076
|
-
return this._timeWidth;
|
|
8077
|
-
}
|
|
8078
|
-
/**
|
|
8079
|
-
* 设置时间轴刻度宽度
|
|
8080
|
-
* @param timeWidth - 时间轴刻度宽度 [0, TIME_WIDTH.length - 1]
|
|
8081
|
-
* @returns
|
|
8082
|
-
*/ changeScale(scale) {
|
|
8083
|
-
this.setTimeWidth(scale);
|
|
8084
|
-
}
|
|
8085
|
-
/**
|
|
8086
|
-
* 设置片段数组
|
|
8087
|
-
* @param timeSections - 片段数组
|
|
8088
|
-
* @returns
|
|
8089
|
-
*/ updateRecords(timeSections) {
|
|
8090
|
-
this._update({
|
|
8091
|
-
timeSections
|
|
8092
|
-
});
|
|
8093
|
-
}
|
|
8094
|
-
/**
|
|
8095
|
-
* 更新当前时间
|
|
8096
|
-
* @param time 能转成时间的值, 如 时间对象 Date, 时间戳,时间戳字符串
|
|
8097
|
-
*/ update(time) {
|
|
8098
|
-
if (time && !this._isMouseDown) {
|
|
8099
|
-
this._update({
|
|
8100
|
-
currentTime: new Date(tranTime(time, 'YYYY-MM-DD HH:mm:ss'))
|
|
8101
|
-
});
|
|
8102
|
-
}
|
|
8103
|
-
}
|
|
8104
|
-
/**
|
|
8105
|
-
* 更新
|
|
8106
|
-
* @param options - 更新参数
|
|
8107
|
-
* @returns
|
|
8108
|
-
*/ _update(options) {
|
|
8109
|
-
if ((options == null ? void 0 : options.currentTime) && options.currentTime instanceof Date) {
|
|
8110
|
-
this._currentTime = options.currentTime;
|
|
8111
|
-
}
|
|
8112
|
-
if (options == null ? void 0 : options.timeSections) {
|
|
8113
|
-
this._timeSections = this._mergeTimeSections(options.timeSections);
|
|
8114
|
-
}
|
|
8115
|
-
if (typeof (options == null ? void 0 : options.timeWidth) === 'number' && (options == null ? void 0 : options.timeWidth) < TIME_WIDTH.length) {
|
|
8116
|
-
this._timeWidth = options == null ? void 0 : options.timeWidth;
|
|
8117
|
-
this._timeWidthArray = TIME_WIDTH[Math.floor(this._timeWidth)];
|
|
8118
|
-
}
|
|
8119
|
-
if (!this._timeWidthArray) {
|
|
8120
|
-
// 不存在 默认取第一个
|
|
8121
|
-
this._timeWidth = 0;
|
|
8122
|
-
this._timeWidthArray = TIME_WIDTH[0];
|
|
8123
|
-
}
|
|
8124
|
-
if (typeof (options == null ? void 0 : options.timeWidth) === 'number' && this._timeWidthArray) {
|
|
8125
|
-
if (this._timeWidthArray[3]) {
|
|
8126
|
-
var _this__$canvas;
|
|
8127
|
-
(_this__$canvas = this._$canvas) == null ? void 0 : _this__$canvas.setAttribute('data-title', this._timeWidthArray[3]);
|
|
8128
|
-
}
|
|
8129
|
-
}
|
|
8130
|
-
// 清空画布
|
|
8131
|
-
if (this._ctx) {
|
|
8132
|
-
this._ctx.fillStyle = this._options.timeAxisBgColor;
|
|
8133
|
-
// prettier-ignore
|
|
8134
|
-
this._ctx.fillRect(0, 0, this._width * this._options.dpr, this._height * this._options.dpr);
|
|
8135
|
-
}
|
|
8136
|
-
this._draw();
|
|
8137
|
-
}
|
|
8138
|
-
/**
|
|
8139
|
-
* 设置只读或取消只读
|
|
8140
|
-
* @param readOnly - 只读或取消只读
|
|
8141
|
-
* @returns
|
|
8142
|
-
*/ setReadOnly(readOnly) {
|
|
8143
|
-
this._readOnly = readOnly;
|
|
8144
|
-
if (this._$canvas) {
|
|
8145
|
-
if (this._readOnly) {
|
|
8146
|
-
this._$canvas.style.cursor = 'not-allowed';
|
|
8147
|
-
} else {
|
|
8148
|
-
this._$canvas.style.cursor = 'pointer';
|
|
8149
|
-
}
|
|
8150
|
-
}
|
|
8151
|
-
}
|
|
8152
|
-
/**
|
|
8153
|
-
* 销毁
|
|
8154
|
-
* @returns
|
|
8155
|
-
*/ destroy() {
|
|
8156
|
-
this._removeEventListener();
|
|
8157
|
-
if (this._$canvas) {
|
|
8158
|
-
this.$container.removeChild(this._$canvas);
|
|
8159
|
-
this._timeSections = [];
|
|
8160
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
8161
|
-
this._$canvas = null;
|
|
8162
|
-
}
|
|
8163
|
-
this._destroyed = true;
|
|
8164
|
-
this._options.onDestroy == null ? void 0 : this._options.onDestroy.call(this._options);
|
|
8165
|
-
// if (this._$tip) {
|
|
8166
|
-
// this.$container.removeChild(this._$tip);
|
|
8167
|
-
// // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
8168
|
-
// this._$tip = null!;
|
|
8169
|
-
// }
|
|
8170
|
-
}
|
|
8171
|
-
// -----------------------------------------------------------------------------------------
|
|
8172
|
-
// private
|
|
8173
|
-
// -----------------------------------------------------------------------------------------
|
|
8174
|
-
/**
|
|
8175
|
-
* 缩放时间轴 动态减少间距 (没处理 dpr)
|
|
8176
|
-
* @returns 刻度间距
|
|
8177
|
-
*/ get _curScaleSpacing() {
|
|
8178
|
-
var _this__timeWidthArray, _this__timeWidthArray1;
|
|
8179
|
-
return Math.floor(((_this__timeWidthArray = this._timeWidthArray) == null ? void 0 : _this__timeWidthArray[1]) - ((_this__timeWidthArray1 = this._timeWidthArray) == null ? void 0 : _this__timeWidthArray1[1]) * +(this._timeWidth % 1 / 2).toFixed(2)); // 刻度间距
|
|
8180
|
-
}
|
|
8181
|
-
/**
|
|
8182
|
-
* 绘制
|
|
8183
|
-
*/ _draw() {
|
|
8184
|
-
this._drawScale();
|
|
8185
|
-
this._drawSections();
|
|
8186
|
-
}
|
|
8187
|
-
/**
|
|
8188
|
-
* 绘制刻度
|
|
8189
|
-
*/ _drawScale() {
|
|
8190
|
-
const lineWidth = 1 * this._options.dpr;
|
|
8191
|
-
/** 中心位置 */ this._centerPositionX = parseInt(this._width * this._options.dpr / 2 + '');
|
|
8192
|
-
const centerPosition = {
|
|
8193
|
-
x: this._width * this._options.dpr / 2,
|
|
8194
|
-
y: this._height * this._options.dpr
|
|
8195
|
-
};
|
|
8196
|
-
const curScaleTime = Math.floor(this._currentTime.getTime() / 1000); // currentTime 秒
|
|
8197
|
-
// 由于时区问题 当前时间戳(秒)处理但前刻度有偏移,所以改成使用当天便宜量, 这样就能保证当天的 0 点刻度能展示
|
|
8198
|
-
// prettier-ignore
|
|
8199
|
-
const offsetSecond = (curScaleTime - Math.floor(new Date(tranTime(new Date(curScaleTime * 1000), "YYYY-MM-DD") + " 00:00:00").getTime() / 1000)) % this._timeWidthArray[0];
|
|
8200
|
-
const padding = this._height * this._options.dpr / 20; // 刻度顶部偏移量 高度的 1/8
|
|
8201
|
-
const spacing = this._curScaleSpacing * this._options.dpr;
|
|
8202
|
-
// 因为右偏移 右侧靠近中心点的X坐标 减去偏移量
|
|
8203
|
-
// prettier-ignore
|
|
8204
|
-
const rightLastScaleTimeX = Math.floor(this._centerPositionX + (this._timeWidthArray[0] - offsetSecond) / this._timeWidthArray[0] * spacing);
|
|
8205
|
-
let leftLastScaleTime = curScaleTime - offsetSecond;
|
|
8206
|
-
let rightLastScaleTime = leftLastScaleTime + this._timeWidthArray[0];
|
|
8207
|
-
const leftLastScaleTimeX = rightLastScaleTimeX - spacing;
|
|
8208
|
-
// 左扩展刻度
|
|
8209
|
-
for(let x = leftLastScaleTimeX; x > 0; x -= spacing){
|
|
8210
|
-
// prettier-ignore
|
|
8211
|
-
const leftOffsetSecond = leftLastScaleTime - Math.floor(new Date(tranTime(new Date(leftLastScaleTime * 1000), "YYYY-MM-DD") + " 00:00:00").getTime() / 1000);
|
|
8212
|
-
// prettier-ignore
|
|
8213
|
-
const curScale = leftOffsetSecond % (this._timeWidthArray[0] * this._timeWidthArray[2]);
|
|
8214
|
-
if (curScale === 0) {
|
|
8215
|
-
// prettier-ignore
|
|
8216
|
-
this._drawSolidLine(x, padding, x, padding + (this._options.scaleOffsetTop + 4) * this._options.dpr, lineWidth);
|
|
8217
|
-
// prettier-ignore
|
|
8218
|
-
this._drawTextString(tranTime(new Date(leftLastScaleTime * 1000)), x, padding + (this._options.scaleOffsetTop + 4 + 4) * this._options.dpr, "center");
|
|
8219
|
-
} else {
|
|
8220
|
-
this._drawSolidLine(x, padding, x, padding + this._options.scaleOffsetTop * this._options.dpr, lineWidth);
|
|
8221
|
-
}
|
|
8222
|
-
leftLastScaleTime = leftLastScaleTime - this._timeWidthArray[0];
|
|
8223
|
-
}
|
|
8224
|
-
// 右扩展刻度
|
|
8225
|
-
// prettier-ignore
|
|
8226
|
-
for(let x = rightLastScaleTimeX; x <= this._width * this._options.dpr; x += spacing){
|
|
8227
|
-
// prettier-ignore
|
|
8228
|
-
const rightOffsetSecond = rightLastScaleTime - Math.floor(new Date(tranTime(new Date(rightLastScaleTime * 1000), "YYYY-MM-DD") + " 00:00:00").getTime() / 1000);
|
|
8229
|
-
// prettier-ignore
|
|
8230
|
-
const curScale = rightOffsetSecond % (this._timeWidthArray[0] * this._timeWidthArray[2]);
|
|
8231
|
-
if (curScale === 0) {
|
|
8232
|
-
// prettier-ignore
|
|
8233
|
-
this._drawSolidLine(x, padding, x, padding + (this._options.scaleOffsetTop + 4) * this._options.dpr, lineWidth);
|
|
8234
|
-
// prettier-ignore
|
|
8235
|
-
this._drawTextString(tranTime(new Date(rightLastScaleTime * 1000)), x, padding + (this._options.scaleOffsetTop + 4 + 4) * this._options.dpr, "center");
|
|
8236
|
-
} else {
|
|
8237
|
-
this._drawSolidLine(x, padding, x, padding + this._options.scaleOffsetTop * this._options.dpr, lineWidth);
|
|
8238
|
-
}
|
|
8239
|
-
rightLastScaleTime = rightLastScaleTime + this._timeWidthArray[0];
|
|
8240
|
-
}
|
|
8241
|
-
// 当前中心位置(当前时间 currentTime)
|
|
8242
|
-
// prettier-ignore
|
|
8243
|
-
this._drawSolidLine(centerPosition.x, 0, centerPosition.x, centerPosition.y, lineWidth, this._options.timePointColor);
|
|
8244
|
-
}
|
|
8245
|
-
/**
|
|
8246
|
-
* 绘制线
|
|
8247
|
-
* @param startX - 线起点 x 坐标
|
|
8248
|
-
* @param startY - 线起点 y 坐标
|
|
8249
|
-
* @param endX - 线终点 x 坐标
|
|
8250
|
-
* @param endY - 线终点 y 坐标
|
|
8251
|
-
* @param lineWidth - 线宽度
|
|
8252
|
-
* @param color - 线颜色
|
|
8253
|
-
*
|
|
8254
|
-
*/ // prettier-ignore
|
|
8255
|
-
_drawSolidLine(startX, startY, endX, endY, lineWidth, color) {
|
|
8256
|
-
if (this._ctx) {
|
|
8257
|
-
this._ctx.save();
|
|
8258
|
-
this._ctx.strokeStyle = color != null ? color : this._options.timeScaleColor;
|
|
8259
|
-
this._ctx.lineWidth = lineWidth;
|
|
8260
|
-
this._ctx.beginPath();
|
|
8261
|
-
this._ctx.moveTo(startX, startY);
|
|
8262
|
-
this._ctx.lineTo(endX, endY);
|
|
8263
|
-
this._ctx.stroke();
|
|
8264
|
-
this._ctx.restore();
|
|
8265
|
-
}
|
|
8266
|
-
}
|
|
8267
|
-
/**
|
|
8268
|
-
* 绘制刻度文字
|
|
8269
|
-
* @param text - 文本
|
|
8270
|
-
* @param x - X
|
|
8271
|
-
* @param y - Y
|
|
8272
|
-
* @param align - 文本对齐方式
|
|
8273
|
-
*/ _drawTextString(text, x, y, align) {
|
|
8274
|
-
if (this._ctx) {
|
|
8275
|
-
const timeTexts = text.split(' ');
|
|
8276
|
-
this._ctx.font = `${12 * this._options.dpr * 1}px serif`;
|
|
8277
|
-
this._ctx.fillStyle = this._options.timeTextColor;
|
|
8278
|
-
this._ctx.textAlign = align || 'left';
|
|
8279
|
-
if (this._timeWidthArray[0] % 60 === 0) {
|
|
8280
|
-
// 仅展示 hh:mm
|
|
8281
|
-
timeTexts[1] = timeTexts[1].replace(/:00$/, '');
|
|
8282
|
-
}
|
|
8283
|
-
this._ctx.fillText(timeTexts[1], x, y + 8 * this._options.dpr);
|
|
8284
|
-
// prettier-ignore
|
|
8285
|
-
if (this._options.showYearMonthDay && (timeTexts[1] === "00:00:00" || timeTexts[1] === "00:00" || this._timeWidthArray[0] * this._timeWidthArray[2] === 24 * 3600)) {
|
|
8286
|
-
// 展示年月日
|
|
8287
|
-
this._ctx.textAlign = align || "left";
|
|
8288
|
-
this._ctx.fillText(timeTexts[0], x, y + (8 + 10) * this._options.dpr);
|
|
8289
|
-
}
|
|
8290
|
-
}
|
|
8291
|
-
}
|
|
8292
|
-
/**
|
|
8293
|
-
* 画录像区间
|
|
8294
|
-
*/ _drawSections() {
|
|
8295
|
-
// 绘制蓝色区域
|
|
8296
|
-
const timeArr = this._timeSections || [];
|
|
8297
|
-
// 根据时间查找当前位置
|
|
8298
|
-
for(let i = 0; i < timeArr.length; i++){
|
|
8299
|
-
const position = this._findPosition(timeArr[i]);
|
|
8300
|
-
// 判断一下绘制区域是否在画布区域, 不在可以不用绘制
|
|
8301
|
-
// prettier-ignore
|
|
8302
|
-
if (this._ctx && isOverlap(0, this._width * this._options.dpr, position.x1, position.x2)) {
|
|
8303
|
-
this._ctx.fillStyle = this._options.timeSectionColor;
|
|
8304
|
-
// prettier-ignore
|
|
8305
|
-
this._ctx.fillRect(position.x1, 0, position.x2 - position.x1, this._height * this._options.dpr);
|
|
8306
|
-
}
|
|
8307
|
-
}
|
|
8308
|
-
}
|
|
8309
|
-
/**
|
|
8310
|
-
* 获取时间片段在时间轴中的x1 ,x2坐标 (已做 dpr 处理)
|
|
8311
|
-
* @param item - 时间片段
|
|
8312
|
-
* @returns {void}
|
|
8313
|
-
*/ _findPosition(item) {
|
|
8314
|
-
// 中间的当前时间 currentTime 为基准, 然后计算时间片段的 x 坐标和 y 坐标
|
|
8315
|
-
// prettier-ignore
|
|
8316
|
-
const x1 = (parseInt((item.startTime - this._currentTime.getTime()) / 1000 + '', 10) / this._timeWidthArray[0] // 多少个刻度
|
|
8317
|
-
* this._curScaleSpacing // 乘刻度宽度
|
|
8318
|
-
+ this._width / 2) * this._options.dpr;
|
|
8319
|
-
const x2 = x1 + parseInt((item.endTime - item.startTime) / 1000 + '', 10) / this._timeWidthArray[0] * this._curScaleSpacing * this._options.dpr;
|
|
8320
|
-
return {
|
|
8321
|
-
x1,
|
|
8322
|
-
x2
|
|
8323
|
-
};
|
|
8324
|
-
}
|
|
8325
|
-
/**
|
|
8326
|
-
* 合并相邻两个时间区间
|
|
8327
|
-
* @param timeSections - 时间区间数组
|
|
8328
|
-
*
|
|
8329
|
-
* @returns 合并后的时间区间
|
|
8330
|
-
*/ _mergeTimeSections(timeSections) {
|
|
8331
|
-
if (timeSections.length === 0) return timeSections;
|
|
8332
|
-
timeSections = timeSections.map((item)=>{
|
|
8333
|
-
// 处理秒
|
|
8334
|
-
if ((item.startTime + '').length === 10) {
|
|
8335
|
-
item.startTime = item.startTime * 1000;
|
|
8336
|
-
}
|
|
8337
|
-
if ((item.endTime + '').length === 10) {
|
|
8338
|
-
item.endTime = item.endTime * 1000;
|
|
8339
|
-
}
|
|
8340
|
-
return {
|
|
8341
|
-
startTime: item.startTime,
|
|
8342
|
-
endTime: item.endTime
|
|
8343
|
-
};
|
|
8344
|
-
});
|
|
8345
|
-
const merged = [
|
|
8346
|
-
timeSections[0]
|
|
8347
|
-
];
|
|
8348
|
-
for(let i = 1; i < timeSections.length; i++){
|
|
8349
|
-
const prev = merged[merged.length - 1];
|
|
8350
|
-
const curr = timeSections[i];
|
|
8351
|
-
// 如果当前区间与上一个区间重叠或相邻(即 prev.end >= curr.start)
|
|
8352
|
-
if (prev.endTime >= curr.startTime) {
|
|
8353
|
-
// 合并区间
|
|
8354
|
-
prev.endTime = Math.max(prev.endTime, curr.endTime);
|
|
8355
|
-
} else {
|
|
8356
|
-
merged.push(curr);
|
|
8357
|
-
}
|
|
8358
|
-
}
|
|
8359
|
-
return merged;
|
|
8360
|
-
}
|
|
8361
|
-
// -------------------------------------
|
|
8362
|
-
// mouse event
|
|
8363
|
-
// -------------------------------------
|
|
8364
|
-
/**
|
|
8365
|
-
* 添加事件监听
|
|
8366
|
-
* @returns
|
|
8367
|
-
*/ _addEventListener() {
|
|
8368
|
-
if (this._$canvas) {
|
|
8369
|
-
// 事件监听
|
|
8370
|
-
this._$canvas.addEventListener('mousemove', this._mousemoveFun);
|
|
8371
|
-
// prettier-ignore
|
|
8372
|
-
this._$canvas.addEventListener("mouseover", this._mouseoverFun);
|
|
8373
|
-
// prettier-ignore
|
|
8374
|
-
this._$canvas.addEventListener("mouseleave", this._mouseleaveFun);
|
|
8375
|
-
// prettier-ignore
|
|
8376
|
-
this._$canvas.addEventListener("mousedown", this._mousedownFun);
|
|
8377
|
-
// prettier-ignore
|
|
8378
|
-
this._$canvas.addEventListener("mouseup", this._mouseUpFun);
|
|
8379
|
-
this._$canvas.addEventListener('wheel', this._mousewheelFun);
|
|
8380
|
-
// prettier-ignore
|
|
8381
|
-
this.$container.addEventListener("wheel", (e)=>{
|
|
8382
|
-
e.preventDefault();
|
|
8383
|
-
}, {
|
|
8384
|
-
passive: false
|
|
8385
|
-
});
|
|
8386
|
-
this._$canvas.addEventListener('keydown', this._ctrlKeyDownFun);
|
|
8387
|
-
this._$canvas.addEventListener('keyup', this._ctrlKeyUpFun);
|
|
8388
|
-
// ctrl 键事件
|
|
8389
|
-
document.addEventListener('keydown', this._ctrlKeyDownFun, false);
|
|
8390
|
-
document.addEventListener('keyup', this._ctrlKeyUpFun, false);
|
|
8391
|
-
this._$canvas.addEventListener('touchstart', this._touchstartFun, {
|
|
8392
|
-
passive: false
|
|
8393
|
-
});
|
|
8394
|
-
this._$canvas.addEventListener('touchmove', this._touchmoveFun, {
|
|
8395
|
-
passive: false
|
|
8396
|
-
});
|
|
8397
|
-
this._$canvas.addEventListener('touchend', this._touchendFun, {
|
|
8398
|
-
passive: false
|
|
8399
|
-
});
|
|
8400
|
-
}
|
|
8401
|
-
}
|
|
8402
|
-
/**
|
|
8403
|
-
* 移除事件监听
|
|
8404
|
-
* @returns
|
|
8405
|
-
*/ _removeEventListener() {
|
|
8406
|
-
if (this._$canvas) {
|
|
8407
|
-
// 事件监听
|
|
8408
|
-
this._$canvas.removeEventListener('mousemove', this._mousemoveFun);
|
|
8409
|
-
// prettier-ignore
|
|
8410
|
-
this._$canvas.removeEventListener("mouseover", this._mouseoverFun);
|
|
8411
|
-
// prettier-ignore
|
|
8412
|
-
this._$canvas.removeEventListener("mouseleave", this._mouseleaveFun);
|
|
8413
|
-
// prettier-ignore
|
|
8414
|
-
this._$canvas.removeEventListener("mousedown", this._mousedownFun);
|
|
8415
|
-
// prettier-ignore
|
|
8416
|
-
this._$canvas.removeEventListener("mouseup", this._mouseUpFun);
|
|
8417
|
-
this._$canvas.removeEventListener('wheel', this._mousewheelFun);
|
|
8418
|
-
this._$canvas.removeEventListener('keydown', this._ctrlKeyDownFun);
|
|
8419
|
-
this._$canvas.removeEventListener('keyup', this._ctrlKeyUpFun);
|
|
8420
|
-
// ctrl 键事件
|
|
8421
|
-
document.removeEventListener('keydown', this._ctrlKeyDownFun);
|
|
8422
|
-
document.removeEventListener('keyup', this._ctrlKeyUpFun);
|
|
8423
|
-
// touch
|
|
8424
|
-
this._$canvas.removeEventListener('touchstart', this._touchstartFun);
|
|
8425
|
-
this._$canvas.removeEventListener('touchmove', this._touchmoveFun);
|
|
8426
|
-
this._$canvas.removeEventListener('touchend', this._touchendFun);
|
|
8427
|
-
}
|
|
8428
|
-
}
|
|
8429
|
-
/**
|
|
8430
|
-
* 鼠标按下事件监听
|
|
8431
|
-
* @param e - 鼠标事件
|
|
8432
|
-
* @returns
|
|
8433
|
-
*/ _mousedownFun(e) {
|
|
8434
|
-
if (this._readOnly) return;
|
|
8435
|
-
this._isMouseDown = true;
|
|
8436
|
-
this._mousePosition = e.pageX;
|
|
8437
|
-
this._oldTime = this._currentTime;
|
|
8438
|
-
this._options.onDragStart == null ? void 0 : this._options.onDragStart.call(this._options, this._currentTime);
|
|
8439
|
-
}
|
|
8440
|
-
/**
|
|
8441
|
-
* 鼠标移入事件监听
|
|
8442
|
-
* @returns
|
|
8443
|
-
*/ _mouseoverFun() {
|
|
8444
|
-
if (this._readOnly) return;
|
|
8445
|
-
this._isOver = true;
|
|
8446
|
-
}
|
|
8447
|
-
/**
|
|
8448
|
-
* 鼠标离开事件监听
|
|
8449
|
-
* @returns
|
|
8450
|
-
*/ _mouseleaveFun(e) {
|
|
8451
|
-
if (this._readOnly) return;
|
|
8452
|
-
this._isOver = false;
|
|
8453
|
-
this._moveEndOrTouchEndFun(e);
|
|
8454
|
-
}
|
|
8455
|
-
/**
|
|
8456
|
-
* 鼠标抬起事件监听
|
|
8457
|
-
* @returns
|
|
8458
|
-
*/ _mouseUpFun(e) {
|
|
8459
|
-
this._moveEndOrTouchEndFun(e);
|
|
8460
|
-
}
|
|
8461
|
-
/**
|
|
8462
|
-
* 鼠标移动事件监听
|
|
8463
|
-
* @param e - 鼠标事件
|
|
8464
|
-
* @returns
|
|
8465
|
-
*/ _mousemoveFun(e) {
|
|
8466
|
-
if (this._readOnly) return;
|
|
8467
|
-
if (this._isMouseDown && this._isOver) {
|
|
8468
|
-
// 鼠标按下位置和移动位置的偏移量
|
|
8469
|
-
this._moveUpdateFun(e.pageX);
|
|
8470
|
-
} else {
|
|
8471
|
-
const left = parseInt(this.$container.offsetLeft + '', 10);
|
|
8472
|
-
this._mousePosition = e.pageX - left;
|
|
8473
|
-
this._update(); // 更新画面
|
|
8474
|
-
}
|
|
8475
|
-
new Date(// prettier-ignore
|
|
8476
|
-
this._currentTime.getTime() + parseInt((e.pageX - this._width / 2) / this._curScaleSpacing * this._timeWidthArray[0] + "", 10) * 1000);
|
|
8477
|
-
}
|
|
8478
|
-
/**
|
|
8479
|
-
* 鼠标滚轮滚动
|
|
8480
|
-
* @param e - 鼠标滚轮滚动事件
|
|
8481
|
-
* @returns
|
|
8482
|
-
*/ _mousewheelFun(e) {
|
|
8483
|
-
e.preventDefault(); // 阻止默认滚动行为
|
|
8484
|
-
// eslint-disable-next-line no-useless-return
|
|
8485
|
-
if (this._readOnly) return;
|
|
8486
|
-
// if (this._isCtrlKeyDown) {
|
|
8487
|
-
// const zoom = e.deltaY > 0 ? -this._options.wheelSpeed : this._options.wheelSpeed;
|
|
8488
|
-
// this._timeWidth = +(this._timeWidth + zoom).toFixed(2);
|
|
8489
|
-
// if (this._timeWidth <= 0) {
|
|
8490
|
-
// this._timeWidth = 0;
|
|
8491
|
-
// } else if (this._timeWidth >= TIME_WIDTH.length) {
|
|
8492
|
-
// this._timeWidth = TIME_WIDTH.length - 0.01;
|
|
8493
|
-
// }
|
|
8494
|
-
// this._update({
|
|
8495
|
-
// timeWidth: Math.floor(this._timeWidth),
|
|
8496
|
-
// });
|
|
8497
|
-
// }
|
|
8498
|
-
}
|
|
8499
|
-
/**
|
|
8500
|
-
* ctrl键按下事件
|
|
8501
|
-
* @param e - 键盘按下事件
|
|
8502
|
-
*/ _ctrlKeyDownFun(e) {
|
|
8503
|
-
if (e.ctrlKey || e.key === 'Control') {
|
|
8504
|
-
this._isCtrlKeyDown = true;
|
|
8505
|
-
}
|
|
8506
|
-
}
|
|
8507
|
-
/**
|
|
8508
|
-
* ctrl键抬起事件
|
|
8509
|
-
* @param e - 键盘按下事件
|
|
8510
|
-
*/ _ctrlKeyUpFun(e) {
|
|
8511
|
-
if (e.ctrlKey || e.key === 'Control') {
|
|
8512
|
-
this._isCtrlKeyDown = false;
|
|
8513
|
-
}
|
|
8514
|
-
}
|
|
8515
|
-
// ----------------------------------------------------------------------
|
|
8516
|
-
// touch
|
|
8517
|
-
// ----------------------------------------------------------------------
|
|
8518
|
-
/**
|
|
8519
|
-
* 触摸距离
|
|
8520
|
-
* @param touches - 两指触摸点
|
|
8521
|
-
* @returns
|
|
8522
|
-
*/ _getTouchDistance(touches) {
|
|
8523
|
-
const [touch1, touch2] = touches;
|
|
8524
|
-
const dx = touch2.clientX - touch1.clientX;
|
|
8525
|
-
const dy = touch2.clientY - touch1.clientY;
|
|
8526
|
-
return Math.sqrt(dx * dx + dy * dy);
|
|
8527
|
-
}
|
|
8528
|
-
/**
|
|
8529
|
-
* 触摸开始
|
|
8530
|
-
* @param e - 触摸事件
|
|
8531
|
-
* @returns
|
|
8532
|
-
*/ _touchstartFun(e) {
|
|
8533
|
-
if (this._readOnly) return;
|
|
8534
|
-
this._oldTime = this._currentTime;
|
|
8535
|
-
this._isOver = true;
|
|
8536
|
-
if (e.touches.length === 1) {
|
|
8537
|
-
// 单指
|
|
8538
|
-
const touch = e.touches[0];
|
|
8539
|
-
this._isMouseDown = true;
|
|
8540
|
-
this._mousePosition = touch.clientX;
|
|
8541
|
-
// this._touchmoveFun(e);
|
|
8542
|
-
} else if (e.touches.length === 2) {
|
|
8543
|
-
// 双指
|
|
8544
|
-
this._lastTouchDist = this._getTouchDistance(e.touches);
|
|
8545
|
-
}
|
|
8546
|
-
}
|
|
8547
|
-
/**
|
|
8548
|
-
* 触摸移动
|
|
8549
|
-
* @param e - 触摸事件
|
|
8550
|
-
* @returns
|
|
8551
|
-
*/ _touchmoveFun(e) {
|
|
8552
|
-
e.preventDefault(); // 防止页面缩放
|
|
8553
|
-
e.stopPropagation();
|
|
8554
|
-
if (this._readOnly) return;
|
|
8555
|
-
if (e.touches.length === 1) {
|
|
8556
|
-
// 单指
|
|
8557
|
-
const touch = e.touches[0];
|
|
8558
|
-
this._moveUpdateFun(touch.clientX);
|
|
8559
|
-
} else if (e.touches.length === 2) {
|
|
8560
|
-
// 双指
|
|
8561
|
-
const newDist = this._getTouchDistance(e.touches);
|
|
8562
|
-
newDist / this._lastTouchDist;
|
|
8563
|
-
// scale *= zoom;
|
|
8564
|
-
// // 限制缩放范围
|
|
8565
|
-
// scale = Math.max(0.5, Math.min(3, scale));
|
|
8566
|
-
// img.style.transform = `scale(${scale})`;
|
|
8567
|
-
// lastDist = newDist;
|
|
8568
|
-
}
|
|
8569
|
-
}
|
|
8570
|
-
/**
|
|
8571
|
-
* 触摸结束
|
|
8572
|
-
* @param e - 触摸事件
|
|
8573
|
-
* @returns
|
|
8574
|
-
*/ _touchendFun(e) {
|
|
8575
|
-
if (this._readOnly) return;
|
|
8576
|
-
this._moveEndOrTouchEndFun(e);
|
|
8577
|
-
}
|
|
8578
|
-
/**
|
|
8579
|
-
* 拖动结束
|
|
8580
|
-
* @returns
|
|
8581
|
-
*/ _moveEndOrTouchEndFun(e) {
|
|
8582
|
-
if (this._readOnly) return;
|
|
8583
|
-
if (this._isMouseDown) {
|
|
8584
|
-
this._isMouseDown = false;
|
|
8585
|
-
if (this._moved) {
|
|
8586
|
-
this._moved = false;
|
|
8587
|
-
this._update({
|
|
8588
|
-
currentTime: this._currentTime
|
|
8589
|
-
});
|
|
8590
|
-
this._oldTime = this._currentTime;
|
|
8591
|
-
this._options.onDragEnd == null ? void 0 : this._options.onDragEnd.call(this._options, this._currentTime, this._isOver);
|
|
8592
|
-
}
|
|
8593
|
-
if (this._isOver && Math.abs(this._mousePosition - (e.pageX || e.clientX)) > 5) {
|
|
8594
|
-
this._options.onChange == null ? void 0 : this._options.onChange.call(this._options, this._currentTime);
|
|
8595
|
-
}
|
|
8596
|
-
this._mousePosition = 0;
|
|
8597
|
-
this._lastTouchDist = 0;
|
|
8598
|
-
}
|
|
8599
|
-
}
|
|
8600
|
-
/**
|
|
8601
|
-
* 移动更新时间
|
|
8602
|
-
* @param x - 移动的x坐标
|
|
8603
|
-
* @returns
|
|
8604
|
-
*/ _moveUpdateFun(x) {
|
|
8605
|
-
// 鼠标按下位置和移动位置的偏移量
|
|
8606
|
-
const mouseOffset = this._mousePosition - x;
|
|
8607
|
-
// fix点击引起mousemove的问题
|
|
8608
|
-
if (mouseOffset === 0) return;
|
|
8609
|
-
if (this._oldTime) {
|
|
8610
|
-
// prettier-ignore
|
|
8611
|
-
const currentTime = this._oldTime.getTime() + parseInt(mouseOffset / this._curScaleSpacing * this._timeWidthArray[0] + "", 10) * 1000;
|
|
8612
|
-
this._update({
|
|
8613
|
-
currentTime: new Date(currentTime)
|
|
8614
|
-
});
|
|
8615
|
-
this._options.onDragging == null ? void 0 : this._options.onDragging.call(this._options, new Date(currentTime));
|
|
8616
|
-
}
|
|
8617
|
-
this._moved = true;
|
|
8618
|
-
}
|
|
8619
|
-
constructor(container, options){
|
|
8620
|
-
this._$canvas = null;
|
|
8621
|
-
this._ctx = null;
|
|
8622
|
-
this._width = 0;
|
|
8623
|
-
this._height = 0;
|
|
8624
|
-
this._currentTime = new Date(new Date().setHours(0, 0, 0, 0));
|
|
8625
|
-
this._timeWidth = 0;
|
|
8626
|
-
/** 时间刻度宽度 [刻度间隔秒数s, 刻度间隔宽度px, 长刻度间隔短刻度个数, 中文说明] */ this._timeWidthArray = TIME_WIDTH[0];
|
|
8627
|
-
this._centerPositionX = 0;
|
|
8628
|
-
this._timeSections = [];
|
|
8629
|
-
/** 只读 */ this._readOnly = false;
|
|
8630
|
-
// mouse
|
|
8631
|
-
this._isMouseDown = false;
|
|
8632
|
-
this._mousePosition = 0; // 鼠标在画布中X轴的位置
|
|
8633
|
-
this._oldTime = null;
|
|
8634
|
-
this._isOver = false;
|
|
8635
|
-
this._moved = false;
|
|
8636
|
-
this._isCtrlKeyDown = false;
|
|
8637
|
-
this._destroyed = false;
|
|
8638
|
-
this._lastTouchDist = 0;
|
|
8639
|
-
this.$container = container;
|
|
8640
|
-
// prettier-ignore
|
|
8641
|
-
this._options = Object.assign({}, TIMELINE_DEFAULT_OPTIONS, options);
|
|
8642
|
-
this._mousemoveFun = this._mousemoveFun.bind(this);
|
|
8643
|
-
this._mouseoverFun = this._mouseoverFun.bind(this);
|
|
8644
|
-
this._mouseleaveFun = this._mouseleaveFun.bind(this);
|
|
8645
|
-
this._mousedownFun = this._mousedownFun.bind(this);
|
|
8646
|
-
this._mouseUpFun = this._mouseUpFun.bind(this);
|
|
8647
|
-
this._mousewheelFun = this._mousewheelFun.bind(this);
|
|
8648
|
-
this._touchstartFun = this._touchstartFun.bind(this);
|
|
8649
|
-
this._touchmoveFun = this._touchmoveFun.bind(this);
|
|
8650
|
-
this._touchendFun = this._touchendFun.bind(this);
|
|
8651
|
-
this._ctrlKeyDownFun = this._ctrlKeyDownFun.bind(this);
|
|
8652
|
-
this._ctrlKeyUpFun = this._ctrlKeyUpFun.bind(this);
|
|
8653
|
-
this._init();
|
|
8654
|
-
}
|
|
8655
|
-
};
|
|
8656
|
-
TimeLine$2.TIME_WIDTH = TIME_WIDTH;
|
|
8657
|
-
|
|
8658
7386
|
function _extends$4() {
|
|
8659
7387
|
_extends$4 = Object.assign || function(target) {
|
|
8660
7388
|
for(var i = 1; i < arguments.length; i++){
|
|
@@ -8671,58 +7399,70 @@ function _extends$4() {
|
|
|
8671
7399
|
}
|
|
8672
7400
|
/**
|
|
8673
7401
|
* 回放时间轴控件
|
|
8674
|
-
*/ class
|
|
7402
|
+
*/ class TimeLineControl extends Control {
|
|
8675
7403
|
_render() {
|
|
8676
|
-
var
|
|
7404
|
+
var _this_timeLineUtil_updateTimeSections, _this_timeLineUtil;
|
|
8677
7405
|
const _timeLineOptions = {
|
|
8678
7406
|
// locale: this._options.locale,
|
|
8679
7407
|
onChange: (date)=>{
|
|
8680
7408
|
this._options.onChange == null ? void 0 : this._options.onChange.call(this._options, date);
|
|
8681
7409
|
this.emit(EVENTS.control.timeLineChange, date);
|
|
7410
|
+
},
|
|
7411
|
+
// 2025-10-27 仅移动端支持
|
|
7412
|
+
onPickerSelect: (item)=>{
|
|
7413
|
+
let date = null;
|
|
7414
|
+
try {
|
|
7415
|
+
if ((item.startTime + '').length === 10) date = new Date(item.startTime * 1000);
|
|
7416
|
+
else if ((item.startTime + '').length === 13) date = new Date(item.startTime);
|
|
7417
|
+
else date = new Date(item.startTime);
|
|
7418
|
+
this._options.onChange == null ? void 0 : this._options.onChange.call(this._options, date);
|
|
7419
|
+
this.emit(EVENTS.control.timeLineChange, date);
|
|
7420
|
+
} catch (error) {
|
|
7421
|
+
}
|
|
8682
7422
|
}
|
|
8683
7423
|
};
|
|
8684
7424
|
if (isMobile()) {
|
|
8685
|
-
this.timeLineUtil = new
|
|
7425
|
+
this.timeLineUtil = new MobileTimeLine(this.$container, _timeLineOptions);
|
|
8686
7426
|
} else {
|
|
8687
|
-
this.timeLineUtil = new TimeLine
|
|
7427
|
+
this.timeLineUtil = new TimeLine(this.$container, _timeLineOptions);
|
|
8688
7428
|
this._renderAddReduce();
|
|
8689
7429
|
}
|
|
8690
|
-
(_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (
|
|
7430
|
+
(_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (_this_timeLineUtil_updateTimeSections = _this_timeLineUtil.updateTimeSections) == null ? void 0 : _this_timeLineUtil_updateTimeSections.call(_this_timeLineUtil, this.records);
|
|
8691
7431
|
this.timeLineUtil.update(new Date());
|
|
8692
7432
|
}
|
|
8693
7433
|
setWidth(width) {
|
|
8694
|
-
if (!isMobile()) this.timeLineUtil.width
|
|
7434
|
+
if (!isMobile()) this.timeLineUtil.resize(width);
|
|
8695
7435
|
}
|
|
8696
7436
|
_renderAddReduce() {
|
|
8697
|
-
this
|
|
8698
|
-
this
|
|
8699
|
-
this
|
|
8700
|
-
this
|
|
7437
|
+
this._$add = document.createElement('span');
|
|
7438
|
+
this._$add.classList.add(`${PREFIX_CLASS}-time-line-scale-add`);
|
|
7439
|
+
this._$add.innerHTML = IconComponents.add();
|
|
7440
|
+
this._$add.addEventListener('click', ()=>{
|
|
8701
7441
|
if (this.timeLineUtil) {
|
|
8702
|
-
const currentScale = Math.floor(this.timeLineUtil.
|
|
8703
|
-
this.timeLineUtil.
|
|
7442
|
+
const currentScale = Math.floor(this.timeLineUtil.timeWidth);
|
|
7443
|
+
this.timeLineUtil.setTimeWidth(currentScale + 1);
|
|
8704
7444
|
}
|
|
8705
7445
|
});
|
|
8706
|
-
this
|
|
8707
|
-
this
|
|
8708
|
-
this
|
|
8709
|
-
this
|
|
7446
|
+
this._$reduce = document.createElement('span');
|
|
7447
|
+
this._$reduce.classList.add(`${PREFIX_CLASS}-time-line-scale-sub`);
|
|
7448
|
+
this._$reduce.innerHTML = IconComponents.reduce();
|
|
7449
|
+
this._$reduce.addEventListener('click', ()=>{
|
|
8710
7450
|
if (this.timeLineUtil) {
|
|
8711
|
-
const currentScale = Math.floor(this.timeLineUtil.
|
|
8712
|
-
this.timeLineUtil.
|
|
7451
|
+
const currentScale = Math.floor(this.timeLineUtil.timeWidth);
|
|
7452
|
+
this.timeLineUtil.setTimeWidth(currentScale - 1);
|
|
8713
7453
|
}
|
|
8714
7454
|
});
|
|
8715
|
-
this.$container.appendChild(this
|
|
8716
|
-
this.$container.appendChild(this
|
|
7455
|
+
this.$container.appendChild(this._$add);
|
|
7456
|
+
this.$container.appendChild(this._$reduce);
|
|
8717
7457
|
}
|
|
8718
7458
|
destroy() {
|
|
8719
|
-
if (this
|
|
8720
|
-
this
|
|
8721
|
-
this
|
|
7459
|
+
if (this._$add) {
|
|
7460
|
+
this._$add.remove();
|
|
7461
|
+
this._$add = null;
|
|
8722
7462
|
}
|
|
8723
|
-
if (this
|
|
8724
|
-
this
|
|
8725
|
-
this
|
|
7463
|
+
if (this._$reduce) {
|
|
7464
|
+
this._$reduce.remove();
|
|
7465
|
+
this._$reduce = null;
|
|
8726
7466
|
}
|
|
8727
7467
|
if (this.timeLineUtil) {
|
|
8728
7468
|
this.timeLineUtil.destroy();
|
|
@@ -8742,15 +7482,15 @@ function _extends$4() {
|
|
|
8742
7482
|
tagName: 'div',
|
|
8743
7483
|
controlType: 'block',
|
|
8744
7484
|
classNameSuffix: 'time-line'
|
|
8745
|
-
})), this.records = [];
|
|
7485
|
+
})), this._$add = null, this._$reduce = null, this.records = [];
|
|
8746
7486
|
this._options = options;
|
|
8747
7487
|
this.records = ((_this__options = this._options) == null ? void 0 : (_this__options_props = _this__options.props) == null ? void 0 : _this__options_props.recordList) || [];
|
|
8748
7488
|
this._render();
|
|
8749
7489
|
this.on(EVENTS.setAllDayRecTimes, (records)=>{
|
|
8750
7490
|
var // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
8751
|
-
|
|
7491
|
+
_this_timeLineUtil_updateTimeSections, _this_timeLineUtil;
|
|
8752
7492
|
this.records = records;
|
|
8753
|
-
(_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (
|
|
7493
|
+
(_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (_this_timeLineUtil_updateTimeSections = _this_timeLineUtil.updateTimeSections) == null ? void 0 : _this_timeLineUtil_updateTimeSections.call(_this_timeLineUtil, records);
|
|
8754
7494
|
});
|
|
8755
7495
|
this.on(EVENTS.getOSDTime, (time)=>{
|
|
8756
7496
|
var // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
|
@@ -8822,7 +7562,7 @@ const Controls = {
|
|
|
8822
7562
|
rec: Rec,
|
|
8823
7563
|
speed: Speed,
|
|
8824
7564
|
date: DatePicker,
|
|
8825
|
-
timeLine:
|
|
7565
|
+
timeLine: TimeLineControl
|
|
8826
7566
|
};
|
|
8827
7567
|
|
|
8828
7568
|
class RecFooter extends EventEmitter {
|
|
@@ -10017,7 +8757,7 @@ const THEME_DEFAULT_OPTIONS = {
|
|
|
10017
8757
|
// 私有方法
|
|
10018
8758
|
// ==============================================================================================
|
|
10019
8759
|
/** 初始化配置项 */ _initOptions(options = {}) {
|
|
10020
|
-
var _this_options_loggerOptions
|
|
8760
|
+
var _this_options_loggerOptions;
|
|
10021
8761
|
this.options = deepmerge(THEME_DEFAULT_OPTIONS, options, {
|
|
10022
8762
|
clone: false
|
|
10023
8763
|
});
|
|
@@ -10031,7 +8771,7 @@ const THEME_DEFAULT_OPTIONS = {
|
|
|
10031
8771
|
}
|
|
10032
8772
|
if (!this.$container) throw new Error('container option is required!');
|
|
10033
8773
|
if ([
|
|
10034
|
-
'
|
|
8774
|
+
'VIDOE',
|
|
10035
8775
|
'CANVAS'
|
|
10036
8776
|
].includes(this.$container.tagName)) {
|
|
10037
8777
|
throw new Error('container node cannot be video or canvas!');
|
|
@@ -10042,10 +8782,6 @@ const THEME_DEFAULT_OPTIONS = {
|
|
|
10042
8782
|
}));
|
|
10043
8783
|
this.logger.log(navigator.userAgent || 'unknown');
|
|
10044
8784
|
this.logger.log('[Theme Version] ', Theme.THEME_VERSION);
|
|
10045
|
-
if ('container' in this.options) {
|
|
10046
|
-
// JSON 不能序列化dom节点, 不要使用 this.options.container, 请使用 this.container
|
|
10047
|
-
delete this.options.container;
|
|
10048
|
-
}
|
|
10049
8785
|
this.logger.log(JSON.stringify(this.options));
|
|
10050
8786
|
const language = this.options.language || 'zh';
|
|
10051
8787
|
const locales = deepmerge({
|
|
@@ -10058,11 +8794,6 @@ const THEME_DEFAULT_OPTIONS = {
|
|
|
10058
8794
|
this.i18n = new I18n(locales, {
|
|
10059
8795
|
defaultLocale: language
|
|
10060
8796
|
});
|
|
10061
|
-
// 默认清晰度列表
|
|
10062
|
-
if (((_this_options_definitionOptions = this.options.definitionOptions) == null ? void 0 : (_this_options_definitionOptions_list = _this_options_definitionOptions.list) == null ? void 0 : _this_options_definitionOptions_list.length) > 0 || ((_this_options_videoLevelList = this.options.videoLevelList) == null ? void 0 : _this_options_videoLevelList.length) > 0) {
|
|
10063
|
-
var _this_options_definitionOptions1;
|
|
10064
|
-
this.videoLevelList = ((_this_options_definitionOptions1 = this.options.definitionOptions) == null ? void 0 : _this_options_definitionOptions1.list) || this.options.videoLevelList;
|
|
10065
|
-
}
|
|
10066
8797
|
}
|
|
10067
8798
|
/**
|
|
10068
8799
|
* 初始化设置类名和设置宽高
|
|
@@ -10612,6 +9343,6 @@ const THEME_DEFAULT_OPTIONS = {
|
|
|
10612
9343
|
zh,
|
|
10613
9344
|
en
|
|
10614
9345
|
};
|
|
10615
|
-
/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '0.0
|
|
9346
|
+
/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '1.0.0-beta.1';
|
|
10616
9347
|
|
|
10617
9348
|
export { Control, Fullscreen, Loading, Message, Play, Poster, Rec, Theme, Utils, Volume, Theme as default };
|