@ezuikit/player-theme 0.0.1-alpha.6 → 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.mjs CHANGED
@@ -1,6 +1,6 @@
1
1
  /*
2
- * @ezuikit/player-theme v0.0.1-alpha.6
3
- * Copyright (c) 2025-10-13 Ezviz-OpenBiz
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$r() {
386
- _extends$r = Object.assign || function(target) {
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$r.apply(this, arguments);
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$r({}, options, {
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$q() {
449
- _extends$q = Object.assign || function(target) {
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$q.apply(this, arguments);
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$q({}, options, {
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$p() {
755
- _extends$p = Object.assign || function(target) {
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$p.apply(this, arguments);
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$p({}, options, {
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$o() {
901
- _extends$o = Object.assign || function(target) {
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$o.apply(this, arguments);
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$o({}, options, {
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$n() {
1456
- _extends$n = Object.assign || function(target) {
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$n.apply(this, arguments);
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$n({}, options, {
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$m() {
1942
- _extends$m = Object.assign || function(target) {
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$m.apply(this, arguments);
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$m({
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$l() {
2024
- _extends$l = Object.assign || function(target) {
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$l.apply(this, arguments);
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$l({}, options, {
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$k() {
3237
- _extends$k = Object.assign || function(target) {
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$k.apply(this, arguments);
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$k({}, options, {
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$j() {
3784
- _extends$j = Object.assign || function(target) {
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$j.apply(this, arguments);
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$j({}, options, {
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$i() {
4597
- _extends$i = Object.assign || function(target) {
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$i.apply(this, arguments);
4607
+ return _extends$h.apply(this, arguments);
4609
4608
  }
4610
4609
  function __zoom(theme, container, options) {
4611
- theme.zoomUtil = new Zoom(container, _extends$i({}, options || {}, {
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$h() {
4718
- _extends$h = Object.assign || function(target) {
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$h.apply(this, arguments);
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$h({}, item, {
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$h({}, item, {
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$g() {
4981
- _extends$g = Object.assign || function(target) {
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$g.apply(this, arguments);
4991
+ return _extends$f.apply(this, arguments);
4993
4992
  }
4994
4993
  class Footer extends Component {
4995
4994
  constructor(options = {}){
4996
- super(_extends$g({}, options, {
4995
+ super(_extends$f({}, options, {
4997
4996
  cType: 'footer'
4998
4997
  }));
4999
4998
  }
5000
4999
  }
5001
5000
 
5002
- function _extends$f() {
5003
- _extends$f = Object.assign || function(target) {
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$f.apply(this, arguments);
5013
+ return _extends$e.apply(this, arguments);
5015
5014
  }
5016
5015
  class Header extends Component {
5017
5016
  constructor(options = {}){
5018
- super(_extends$f({}, options, {
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$e() {
5183
- _extends$e = Object.assign || function(target) {
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$e.apply(this, arguments);
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$e({}, options, {
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$d() {
5232
- _extends$d = Object.assign || function(target) {
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$d.apply(this, arguments);
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$d({}, options, {
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$c() {
6065
- _extends$c = Object.assign || function(target) {
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$c.apply(this, arguments);
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$c({}, this._options, {
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$c({}, this._options, {
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$c({}, options, {
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$b() {
6211
- _extends$b = Object.assign || function(target) {
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$b.apply(this, arguments);
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$b({}, options, {
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$a() {
6357
- _extends$a = Object.assign || function(target) {
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$a.apply(this, arguments);
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$a({}, options, {
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$9() {
6468
- _extends$9 = Object.assign || function(target) {
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$9.apply(this, arguments);
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$9({
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$8() {
6722
- _extends$8 = Object.assign || function(target) {
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$8.apply(this, arguments);
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$8({}, DEFINITION_DEFAULT_OPTIONS, {
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 realItem = list.find((it)=>it.level === this._level);
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}(${(realItem == null ? void 0 : realItem.name) || ''})</span>`;
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
- // 如果 label 不存在,则不显示label,直接显示list的第一个label, 一般自定义清晰度列表可能会出现
6805
- return `<span>${label || ((_list_ = list[0]) == null ? void 0 : _list_.label) || ''}</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 realItem = this.list.find((it)=>it.level === this._level);
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}(${(realItem == null ? void 0 : realItem.name) || ''})</span>
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$7() {
6844
- _extends$7 = Object.assign || function(target) {
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$7.apply(this, arguments);
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$7({}, SPEED_DEFAULT_OPTIONS, options, {
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$6() {
7287
- _extends$6 = Object.assign || function(target) {
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$6.apply(this, arguments);
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$6({}, options, {
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 TimeLine extends Control {
7402
+ */ class TimeLineControl extends Control {
8675
7403
  _render() {
8676
- var _this_timeLineUtil_updateRecords, _this_timeLineUtil;
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 TimeLine$1(this.$container, _timeLineOptions);
7425
+ this.timeLineUtil = new MobileTimeLine(this.$container, _timeLineOptions);
8686
7426
  } else {
8687
- this.timeLineUtil = new TimeLine$2(this.$container, _timeLineOptions);
7427
+ this.timeLineUtil = new TimeLine(this.$container, _timeLineOptions);
8688
7428
  this._renderAddReduce();
8689
7429
  }
8690
- (_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (_this_timeLineUtil_updateRecords = _this_timeLineUtil.updateRecords) == null ? void 0 : _this_timeLineUtil_updateRecords.call(_this_timeLineUtil, this.records);
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 = width;
7434
+ if (!isMobile()) this.timeLineUtil.resize(width);
8695
7435
  }
8696
7436
  _renderAddReduce() {
8697
- this.$add = document.createElement('span');
8698
- this.$add.classList.add(`${PREFIX_CLASS}-time-line-scale-add`);
8699
- this.$add.innerHTML = IconComponents.add();
8700
- this.$add.addEventListener('click', ()=>{
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.scale);
8703
- this.timeLineUtil.changeScale(currentScale + 1);
7442
+ const currentScale = Math.floor(this.timeLineUtil.timeWidth);
7443
+ this.timeLineUtil.setTimeWidth(currentScale + 1);
8704
7444
  }
8705
7445
  });
8706
- this.$reduce = document.createElement('span');
8707
- this.$reduce.classList.add(`${PREFIX_CLASS}-time-line-scale-sub`);
8708
- this.$reduce.innerHTML = IconComponents.reduce();
8709
- this.$reduce.addEventListener('click', ()=>{
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.scale);
8712
- this.timeLineUtil.changeScale(currentScale - 1);
7451
+ const currentScale = Math.floor(this.timeLineUtil.timeWidth);
7452
+ this.timeLineUtil.setTimeWidth(currentScale - 1);
8713
7453
  }
8714
7454
  });
8715
- this.$container.appendChild(this.$add);
8716
- this.$container.appendChild(this.$reduce);
7455
+ this.$container.appendChild(this._$add);
7456
+ this.$container.appendChild(this._$reduce);
8717
7457
  }
8718
7458
  destroy() {
8719
- if (this.$add) {
8720
- this.$add.remove();
8721
- this.$add = null;
7459
+ if (this._$add) {
7460
+ this._$add.remove();
7461
+ this._$add = null;
8722
7462
  }
8723
- if (this.$reduce) {
8724
- this.$reduce.remove();
8725
- this.$reduce = null;
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
- _this_timeLineUtil_updateRecords, _this_timeLineUtil;
7491
+ _this_timeLineUtil_updateTimeSections, _this_timeLineUtil;
8752
7492
  this.records = records;
8753
- (_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (_this_timeLineUtil_updateRecords = _this_timeLineUtil.updateRecords) == null ? void 0 : _this_timeLineUtil_updateRecords.call(_this_timeLineUtil, records);
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: TimeLine
7565
+ timeLine: TimeLineControl
8826
7566
  };
8827
7567
 
8828
7568
  class RecFooter extends EventEmitter {
@@ -10603,6 +9343,6 @@ const THEME_DEFAULT_OPTIONS = {
10603
9343
  zh,
10604
9344
  en
10605
9345
  };
10606
- /** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '0.0.1-alpha.6';
9346
+ /** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '1.0.0-beta.1';
10607
9347
 
10608
9348
  export { Control, Fullscreen, Loading, Message, Play, Poster, Rec, Theme, Utils, Volume, Theme as default };