@ezuikit/player-theme 2.0.1 → 2.0.2-beta.1

package/dist/index.mjs

@@ -1,17 +1,16 @@
 /*
-* @ezuikit/player-theme v2.0.1
-* Copyright (c) 2025-12-04 Ezviz-OpenBiz
+* @ezuikit/player-theme v2.0.2-beta.1
+* Copyright (c) 2025-12-05 Ezviz-OpenBiz
 * Released under the MIT License.
 */
 import EventEmitter from 'eventemitter3';
 import Picker from '@skax/picker';
 import delegate from '@skax/delegate';
 import deepmerge from 'deepmerge';
-import require$$1, { isMobile, DateTime, parseEzopenUrl } from '@ezuikit/utils-tools';
+import require$$1, { isMobile, parseEzopenUrl } from '@ezuikit/utils-tools';
 import screenfull from 'screenfull';
 import I18n from '@ezuikit/utils-i18n';
 import Logger from '@ezuikit/utils-logger';
-import { DatePicker } from '@ezuikit/control-date-picker';
 import { MobileTimeLine, TimeLine } from '@ezuikit/control-time-line';
 
 /**
@@ -42,8 +41,7 @@ var THEME_PROPS = [
     'speed',
     'urlInfo',
     'videoLevelList',
-    'videoLevel',
-    'recMonth'
+    'videoLevel'
 ];
 /**
  * 当移动端 picker 控件打开时需要关闭动画（定时器）
@@ -189,9 +187,8 @@ var EVENTS = {
         /** 全局全屏控件销毁 */ globalFullscreenDestroy: 'Control.globalFullscreenDestroy',
         /** 日期面板展示隐藏变换 */ datePanelOpenChange: 'Control.datePanelOpenChange',
         /** 日期改变 */ dateChange: 'Control.dateChange',
-        /** 日期改变 */ dateMonthChange: 'Control.dateMonthChange',
         /** 日期销毁 */ dateDestroy: 'Control.datePanelDestroy',
-        /** 时间轴拖动结束 */ timeLineChange: 'Control.timeLineChange',
+        /**  时间轴拖动结束 */ timeLineChange: 'Control.timeLineChange',
         /** 时间轴图片列表面板 */ timeLinePanelOpenChange: 'Control.timeLinePanelOpenChange',
         /** 时间轴控件销毁 */ timeLineDestroy: 'Control.timeLineDestroy',
         /** 主题控件挂载前 切换新的主题也会触发，如果想首次获取需要在 onInitializing 回调中进行监听 */ beforeMountControls: 'Control.beforeMountControls',
@@ -202,7 +199,7 @@ var EVENTS = {
         /** 加载控件销毁 */ loadingDestroy: 'Control.loadingDestroy',
         /** 消息控件销毁 */ messageDestroy: 'Control.messageDestroy',
         /** 播放器内容区域销毁 */ contentDestroy: 'Control.contentDestroy',
-        /** 播放器内容区域重新渲染 */ contentRerender: 'Control.contentRerender'
+        contentRerender: 'Control.contentRerender'
     },
     /**
    * 主题控件相关
@@ -4155,11 +4152,6 @@ function debounce(func, wait) {
             (_theme_zoomUtil1 = theme.zoomUtil) == null ? void 0 : (_theme_zoomUtil_setTransform1 = _theme_zoomUtil1.setTransform) == null ? void 0 : _theme_zoomUtil_setTransform1.call(_theme_zoomUtil1, false);
         }
     });
-    // 日期选择器
-    theme == null ? void 0 : theme.on(EVENTS.control.dateMonthChange, function(dates) {
-        var _theme_controls_dateControl_emit, _theme_controls_dateControl, _theme_controls;
-        (_theme_controls = theme.controls) == null ? void 0 : (_theme_controls_dateControl = _theme_controls.dateControl) == null ? void 0 : (_theme_controls_dateControl_emit = _theme_controls_dateControl.emit) == null ? void 0 : _theme_controls_dateControl_emit.call(_theme_controls_dateControl, EVENTS.control.dateMonthChange, dates);
-    });
 }
 /**
  * 控件向主题发现通信消息 control.on -> theme.emit ,仅用来转发控件的事件
@@ -4358,10 +4350,10 @@ function debounce(func, wait) {
             theme.emit(EVENTS.control.timeLineChange, date);
         });
         theme.controls.timeLineControl.on(EVENTS.control.timeLinePanelOpenChange, function(open) {
-            var _theme_controls_dateControl, _theme_controls;
-            if ((_theme_controls = theme.controls) == null ? void 0 : (_theme_controls_dateControl = _theme_controls.dateControl) == null ? void 0 : _theme_controls_dateControl.datePicker) {
-                var _theme_controls_dateControl_datePicker, _theme_controls_dateControl1, _theme_controls1;
-                (_theme_controls1 = theme.controls) == null ? void 0 : (_theme_controls_dateControl1 = _theme_controls1.dateControl) == null ? void 0 : (_theme_controls_dateControl_datePicker = _theme_controls_dateControl1.datePicker) == null ? void 0 : _theme_controls_dateControl_datePicker.hide();
+            var _theme_controls_dateControl;
+            if ((_theme_controls_dateControl = theme.controls.dateControl) == null ? void 0 : _theme_controls_dateControl.dataPickerUtil) {
+                var _theme_controls_dateControl_dataPickerUtil, _theme_controls_dateControl1;
+                (_theme_controls_dateControl1 = theme.controls.dateControl) == null ? void 0 : (_theme_controls_dateControl_dataPickerUtil = _theme_controls_dateControl1.dataPickerUtil) == null ? void 0 : _theme_controls_dateControl_dataPickerUtil.hide();
             }
             theme.emit(EVENTS.control.timeLinePanelOpenChange, open);
         });
@@ -4654,12 +4646,12 @@ function getDefaultExportFromCjs (x) {
 * Released under the MIT License.
 */
 
-var dist$1;
-var hasRequiredDist$1;
+var dist$2;
+var hasRequiredDist$2;
 
-function requireDist$1 () {
-	if (hasRequiredDist$1) return dist$1;
-	hasRequiredDist$1 = 1;
+function requireDist$2 () {
+	if (hasRequiredDist$2) return dist$2;
+	hasRequiredDist$2 = 1;
 
 	/**
 	 * Zoom position
@@ -5366,12 +5358,12 @@ function requireDist$1 () {
 	}();
 	Zoom.VERSION = '0.0.2';
 
-	dist$1 = Zoom;
-	return dist$1;
+	dist$2 = Zoom;
+	return dist$2;
 }
 
-var distExports$1 = requireDist$1();
-var Zoom = /*@__PURE__*/getDefaultExportFromCjs(distExports$1);
+var distExports$2 = requireDist$2();
+var Zoom = /*@__PURE__*/getDefaultExportFromCjs(distExports$2);
 
 function _extends$h() {
     _extends$h = Object.assign || function(target) {
@@ -6446,7 +6438,7 @@ function _set_prototype_of$d(o, p) {
     return CapturePicture;
 }(Control);
 
-var dist = {};
+var dist$1 = {};
 
 /*
 * @ezuikit/control-ptz v0.0.1
@@ -6454,11 +6446,11 @@ var dist = {};
 * Released under the MIT License.
 */
 
-var hasRequiredDist;
+var hasRequiredDist$1;
 
-function requireDist () {
-	if (hasRequiredDist) return dist;
-	hasRequiredDist = 1;
+function requireDist$1 () {
+	if (hasRequiredDist$1) return dist$1;
+	hasRequiredDist$1 = 1;
 
 	var deepmerge$1 = deepmerge;
 	var utilsTools = require$$1;
@@ -7381,13 +7373,13 @@ function requireDist () {
 	    return Ptz;
 	}(BasePtz);
 
-	dist.BasePtz = BasePtz;
-	dist.MobilePtz = MobilePtz;
-	dist.Ptz = Ptz;
-	return dist;
+	dist$1.BasePtz = BasePtz;
+	dist$1.MobilePtz = MobilePtz;
+	dist$1.Ptz = Ptz;
+	return dist$1;
 }
 
-var distExports = requireDist();
+var distExports$1 = requireDist$1();
 
 function _defineProperties$4(target, props) {
     for(var i = 0; i < props.length; i++){
@@ -7486,7 +7478,7 @@ function _set_prototype_of$c(o, p) {
             this.$turntable.classList.add("" + PREFIX_CLASS + "-ptz-turntable");
             this.$panel.appendChild(this.$turntable);
             // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-            this._ptzControl = new distExports.Ptz(this.$turntable, _extends$b({}, this._options, {
+            this._ptzControl = new distExports$1.Ptz(this.$turntable, _extends$b({}, this._options, {
                 onSpeedChange: this._onSpeedChange.bind(this),
                 onDirection: this._onDirection.bind(this)
             }));
@@ -7495,7 +7487,7 @@ function _set_prototype_of$c(o, p) {
     };
     _proto.renderMobileExtend = function renderMobileExtend($container) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        if (!this._ptzControl1) this._ptzControl1 = new distExports.MobilePtz($container, _extends$b({}, this._options, {
+        if (!this._ptzControl1) this._ptzControl1 = new distExports$1.MobilePtz($container, _extends$b({}, this._options, {
             onSpeedChange: this._onSpeedChange.bind(this),
             onDirection: this._onDirection.bind(this)
         }));
@@ -8538,7 +8530,9 @@ var SUPPORT_SPEED = [
     0.5,
     1,
     2,
-    4
+    4,
+    8,
+    16
 ]; // 8, 16
 var SPEED_DEFAULT_OPTIONS = {
     /**
@@ -8598,6 +8592,541 @@ var SPEED_DEFAULT_OPTIONS = {
     return Speed;
 }(Select);
 
+/*
+* @ezuikit/control-date-picker v0.0.1-alpha.2
+* Copyright (c) 2025-11-12 Ezviz-OpenBiz
+* Released under the MIT License.
+*/
+
+var dist;
+var hasRequiredDist;
+
+function requireDist () {
+	if (hasRequiredDist) return dist;
+	hasRequiredDist = 1;
+
+	function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+	    try {
+	        var info = gen[key](arg);
+	        var value = info.value;
+	    } catch (error) {
+	        reject(error);
+	        return;
+	    }
+	    if (info.done) {
+	        resolve(value);
+	    } else {
+	        Promise.resolve(value).then(_next, _throw);
+	    }
+	}
+	function _async_to_generator(fn) {
+	    return function() {
+	        var self = this, args = arguments;
+	        return new Promise(function(resolve, reject) {
+	            var gen = fn.apply(self, args);
+	            function _next(value) {
+	                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+	            }
+	            function _throw(err) {
+	                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+	            }
+	            _next(undefined);
+	        });
+	    };
+	}
+	function _ts_generator(thisArg, body) {
+	    var f, y, t, _ = {
+	        label: 0,
+	        sent: function() {
+	            if (t[0] & 1) throw t[1];
+	            return t[1];
+	        },
+	        trys: [],
+	        ops: []
+	    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+	    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() {
+	        return this;
+	    }), g;
+	    function verb(n) {
+	        return function(v) {
+	            return step([
+	                n,
+	                v
+	            ]);
+	        };
+	    }
+	    function step(op) {
+	        if (f) throw new TypeError("Generator is already executing.");
+	        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+	            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+	            if (y = 0, t) op = [
+	                op[0] & 2,
+	                t.value
+	            ];
+	            switch(op[0]){
+	                case 0:
+	                case 1:
+	                    t = op;
+	                    break;
+	                case 4:
+	                    _.label++;
+	                    return {
+	                        value: op[1],
+	                        done: false
+	                    };
+	                case 5:
+	                    _.label++;
+	                    y = op[1];
+	                    op = [
+	                        0
+	                    ];
+	                    continue;
+	                case 7:
+	                    op = _.ops.pop();
+	                    _.trys.pop();
+	                    continue;
+	                default:
+	                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+	                        _ = 0;
+	                        continue;
+	                    }
+	                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+	                        _.label = op[1];
+	                        break;
+	                    }
+	                    if (op[0] === 6 && _.label < t[1]) {
+	                        _.label = t[1];
+	                        t = op;
+	                        break;
+	                    }
+	                    if (t && _.label < t[2]) {
+	                        _.label = t[2];
+	                        _.ops.push(op);
+	                        break;
+	                    }
+	                    if (t[2]) _.ops.pop();
+	                    _.trys.pop();
+	                    continue;
+	            }
+	            op = body.call(thisArg, _);
+	        } catch (e) {
+	            op = [
+	                6,
+	                e
+	            ];
+	            y = 0;
+	        } finally{
+	            f = t = 0;
+	        }
+	        if (op[0] & 5) throw op[1];
+	        return {
+	            value: op[0] ? op[1] : void 0,
+	            done: true
+	        };
+	    }
+	}
+	var AppendJS = /*#__PURE__*/ function() {
+	    function AppendJS() {}
+	    AppendJS.loadScript = function loadScript(src) {
+	        return _async_to_generator(function() {
+	            return _ts_generator(this, function(_state) {
+	                switch(_state.label){
+	                    case 0:
+	                        return [
+	                            4,
+	                            new Promise(function(resolve, reject) {
+	                                if (AppendJS.LoadedScr.includes(src)) {
+	                                    return resolve(src);
+	                                }
+	                                if (AppendJS.LoadingScrQueue[src]) {
+	                                    return AppendJS.LoadingScrQueue[src].push(resolve);
+	                                } else {
+	                                    AppendJS.LoadingScrQueue[src] = [
+	                                        resolve
+	                                    ];
+	                                }
+	                                var link;
+	                                if (src.includes('.js')) {
+	                                    link = document.createElement('script');
+	                                    link.src = src;
+	                                    link.async = true;
+	                                } else if (src.includes('.css')) {
+	                                    link = document.createElement('link');
+	                                    link.rel = 'stylesheet';
+	                                    link.href = src;
+	                                }
+	                                link.onload = function() {
+	                                    AppendJS.LoadedScr.push(src);
+	                                    AppendJS.LoadingScrQueue[src].forEach(function(resolve) {
+	                                        return resolve(src);
+	                                    });
+	                                    AppendJS.LoadingScrQueue[src] = [];
+	                                };
+	                                link.onerror = function() {
+	                                    return reject(new Error('Failed to load ' + src));
+	                                };
+	                                document.head.appendChild(link);
+	                            })
+	                        ];
+	                    case 1:
+	                        return [
+	                            2,
+	                            _state.sent()
+	                        ];
+	                }
+	            });
+	        })();
+	    };
+	    AppendJS.loadScriptsBatch = function loadScriptsBatch(srcArr) {
+	        return _async_to_generator(function() {
+	            return _ts_generator(this, function(_state) {
+	                switch(_state.label){
+	                    case 0:
+	                        return [
+	                            4,
+	                            Promise.all(srcArr.map(AppendJS.loadScript))
+	                        ];
+	                    case 1:
+	                        return [
+	                            2,
+	                            _state.sent()
+	                        ];
+	                }
+	            });
+	        })();
+	    };
+	    AppendJS.remove = function remove(src) {
+	        src.forEach(function(item) {
+	            var link = document.querySelector('script[src="' + item + '"]') || document.querySelector('link[href="' + item + '"]');
+	            if (link) {
+	                link.remove();
+	            }
+	        });
+	    };
+	    AppendJS.clear = function clear() {
+	        AppendJS.remove(AppendJS.LoadedScr);
+	    };
+	    return AppendJS;
+	}();
+	/** 已经加载完的js/css */ AppendJS.LoadedScr = [];
+	/** 正在加载的js/css */ AppendJS.LoadingScrQueue = {};
+
+	function _defineProperties(target, props) {
+	    for(var i = 0; i < props.length; i++){
+	        var descriptor = props[i];
+	        descriptor.enumerable = descriptor.enumerable || false;
+	        descriptor.configurable = true;
+	        if ("value" in descriptor) descriptor.writable = true;
+	        Object.defineProperty(target, descriptor.key, descriptor);
+	    }
+	}
+	function _create_class(Constructor, protoProps, staticProps) {
+	    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+	    return Constructor;
+	}
+	var DEFAULT_OPTIONS = {
+	    staticPath: '.',
+	    place: 'top-right',
+	    language: 'zh-CN',
+	    current: new Date(),
+	    maxDate: new Date()
+	};
+	/**
+	 * 日期选择器
+	 */ var DatePicker = /*#__PURE__*/ function() {
+	    function DatePicker(container, options) {
+	        var _this = this;
+	        this._open = false;
+	        this._change = true;
+	        this.$container = container;
+	        this.options = Object.assign({}, DEFAULT_OPTIONS, options);
+	        this.options.staticPath = (this.options.staticPath || '').replace(/\/$/, '');
+	        if (this.options.current) {
+	            this._date = this.options.current;
+	        }
+	        this._init();
+	        this.$container.addEventListener('click', function() {
+	            if (_this._open) _this.hide();
+	            else _this.show();
+	        });
+	        document.body.addEventListener('click', function(e) {
+	            if (!_this.$container.contains(e.target)) {
+	                _this.hide();
+	            }
+	        });
+	    }
+	    var _proto = DatePicker.prototype;
+	    _proto._init = function _init() {
+	        var _this = this;
+	        // 因为挂载在行内，需要父标签设置 position: relative;
+	        this.$container.style.cssText += ";position: relative;";
+	        this.$container.classList.add("datepicker-inline-" + this.options.place);
+	        AppendJS.loadScriptsBatch([
+	            "" + this.options.staticPath + "/rec/jquery.min.js",
+	            "" + this.options.staticPath + "/rec/datepicker.min.css"
+	        ]).then(function() {
+	            AppendJS.loadScriptsBatch([
+	                "" + _this.options.staticPath + "/rec/datepicker.js"
+	            ]).then(function() {
+	                AppendJS.loadScriptsBatch([
+	                    "" + _this.options.staticPath + "/rec/datepicker.zh-CN.js",
+	                    "" + _this.options.staticPath + "/rec/datepicker.en-US.js"
+	                ]).then(function() {
+	                    window.$(_this.$container).datepicker({
+	                        date: _this.options.current,
+	                        language: _this.options.language,
+	                        endDate: _this.options.maxDate,
+	                        inline: true
+	                    });
+	                    _this.hide();
+	                    window.$(_this.$container).on('pick.datepicker', function(e) {
+	                        var _this__date, _this__date1, _this__date2, _this__date3, _this__date4, _this__date5;
+	                        if (e.view === 'year' && ((_this__date = _this._date) == null ? void 0 : _this__date.getFullYear()) !== e.date.getFullYear()) {
+	                            _this.options.onYearChange == null ? void 0 : _this.options.onYearChange.call(_this.options, e.date);
+	                        } else if (e.view === 'month' && (((_this__date1 = _this._date) == null ? void 0 : _this__date1.getMonth()) !== e.date.getMonth() || ((_this__date2 = _this._date) == null ? void 0 : _this__date2.getFullYear()) !== e.date.getFullYear())) {
+	                            _this.options.onMonthChange == null ? void 0 : _this.options.onMonthChange.call(_this.options, e.date);
+	                        } else if ([
+	                            'day',
+	                            'pick'
+	                        ].includes(e.view || e.type) && (((_this__date3 = _this._date) == null ? void 0 : _this__date3.getDate()) !== e.date.getDate() || ((_this__date4 = _this._date) == null ? void 0 : _this__date4.getMonth()) !== e.date.getMonth() || ((_this__date5 = _this._date) == null ? void 0 : _this__date5.getFullYear()) !== e.date.getFullYear())) {
+	                            if (_this._change) {
+	                                _this.options.onChange == null ? void 0 : _this.options.onChange.call(_this.options, e.date);
+	                            }
+	                            _this._date = new Date(e.date.getTime());
+	                        }
+	                        if (e.view === 'day') _this.hide();
+	                        _this._change = true;
+	                    });
+	                });
+	            });
+	        });
+	    };
+	    /**
+	   * 设置日期, change = true 时触发 onChange 事件
+	   *
+	   * @param date 设置的日期
+	   * @param change 是否触发 onChange 事件
+	   */ _proto.setDate = function setDate(date, change) {
+	        if (change === void 0) change = true;
+	        var $datepicker = this.$container.querySelector(".datepicker-inline");
+	        if ($datepicker) {
+	            this._change = change;
+	            window.$(this.$container).datepicker('setDate', date);
+	        }
+	    };
+	    /**
+	   * 隐藏面板, 会触发 onPanelChange 事件
+	   */ _proto.hide = function hide() {
+	        var $datepicker = this.$container.querySelector(".datepicker-inline");
+	        if ($datepicker) {
+	            if (this._open) {
+	                this._open = false;
+	                this.options.onPanelChange == null ? void 0 : this.options.onPanelChange.call(this.options, false, this._date);
+	            }
+	            $datepicker.classList.add('datepicker-hide');
+	        }
+	    };
+	    /**
+	   * 显示面板, 会触发 onPanelChange 事件
+	   */ _proto.show = function show() {
+	        var $datepicker = this.$container.querySelector(".datepicker-inline");
+	        if ($datepicker) {
+	            var _window_$_datepicker, _window_$;
+	            if (!this._open) {
+	                this._open = true;
+	                this.options.onPanelChange == null ? void 0 : this.options.onPanelChange.call(this.options, true, this._date);
+	            }
+	            if (this._date) this.setDate(this._date, false);
+	            (_window_$_datepicker = (_window_$ = window.$(this.$container)).datepicker) == null ? void 0 : _window_$_datepicker.call(_window_$, 'showView');
+	            if (this.options.place === 'bottom-left') {
+	                $datepicker.style.cssText += "top: " + (this.$container.clientHeight + 10) + "px; bottom: auto; right: auto; left: 0px";
+	            } else {
+	                $datepicker.style.cssText += "bottom: " + (this.$container.clientHeight + 10) + "px; top: auto";
+	            }
+	            $datepicker.classList.remove('datepicker-hide');
+	        }
+	    };
+	    /**
+	   * 销毁
+	   */ _proto.destroy = function destroy() {
+	        this.hide();
+	        this._date = undefined;
+	        window.$(this.$container).datepicker('destroy');
+	    // AppendJS.remove([
+	    //   `${this.options.staticPath}/rec/jquery.min.js`,
+	    //   `${this.options.staticPath}/rec/datepicker.min.css`,
+	    //   `${this.options.staticPath}/rec/datepicker.js`,
+	    //   `${this.options.staticPath}/rec/datepicker.zh-CN.js`,
+	    //   `${this.options.staticPath}/rec/datepicker.en-US.js`,
+	    // ]);
+	    };
+	    _create_class(DatePicker, [
+	        {
+	            key: "date",
+	            get: /**
+	   * 获取日期
+	   */ function get() {
+	                return this._date;
+	            }
+	        }
+	    ]);
+	    return DatePicker;
+	}();
+
+	dist = DatePicker;
+	return dist;
+}
+
+var distExports = requireDist();
+var DatePickerUtil = /*@__PURE__*/getDefaultExportFromCjs(distExports);
+
+/**
+ * @description 时间操作
+ */ var DateTime = /*#__PURE__*/ function() {
+    function DateTime() {}
+    /**
+   * @description 时间格式化
+   * @param {Date | number | string} date
+   * @param {string} formatType 格式 'YYYY-MM-DD hh:mm:ss' 或 'YYYYMMDDhhmmss' 或 'YYYY/MM/DD hh:mm:ss'  或 'hh:mm:ss' 或 'YYYYMMDDThhmmssZ'
+   * @param {number} timeZone 时区偏移量 默认 0
+   */ DateTime.formate = function formate(date, formatType, timeZone) {
+        if (timeZone === void 0) timeZone = 0;
+        var dateTime = date;
+        if (typeof date === 'string') {
+            dateTime = DateTime.strToDate(date);
+        } else if (typeof date === 'number') {
+            dateTime = new Date(date);
+        }
+        dateTime = new Date(dateTime.getTime() - timeZone * 3600 * 1000);
+        var year = dateTime.getFullYear();
+        var month = String(dateTime.getMonth() + 1).padStart(2, '0');
+        var day = String(dateTime.getDate()).padStart(2, '0');
+        var hours = String(dateTime.getHours()).padStart(2, '0');
+        var minutes = String(dateTime.getMinutes()).padStart(2, '0');
+        var seconds = String(dateTime.getSeconds()).padStart(2, '0');
+        switch(formatType){
+            case 'YYYY-MM-DD hh:mm:ss':
+                return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
+            case 'YYYYMMDDhhmmss':
+                return "" + year + month + day + hours + minutes + seconds;
+            case 'YYYY/MM/DD hh:mm:ss':
+                return year + "/" + month + "/" + day + " " + hours + ":" + minutes + ":" + seconds;
+            case 'YYYYMMDDThhmmssZ':
+                return "" + year + month + day + "T" + hours + minutes + seconds + "Z";
+            case 'YYYY/MM/DD':
+                return year + "/" + month + "/" + day;
+            case 'YYYYMMDD':
+                return "" + year + month + day;
+            case 'YYYY-MM-DD':
+                return year + "-" + month + "-" + day;
+            case 'YYYY':
+                return "" + year;
+            case 'MM':
+                return "" + month;
+            case 'DD':
+                return "" + day;
+            case 'hh:mm:ss':
+                return hours + ":" + minutes + ":" + seconds;
+            case 'hh':
+                return "" + hours;
+            case 'mm':
+                return "" + minutes;
+            case 'ss':
+                return "" + seconds;
+            default:
+                throw new Error('Unsupported format type');
+        }
+    };
+    /**
+   * @description 对比两个时间的差值
+   * @param {Date | string  | number} date1
+   * @param {Date | string  | number} date2
+   * @param {"year" | "month" | "day" | "hour" | "minute" | "second"} diffType
+   */ DateTime.diff = function diff(date1, date2, diffType) {
+        /** @type {Date} */ var dateTime1 = date1;
+        if (typeof date1 === 'string') {
+            dateTime1 = DateTime.strToDate(date1);
+        } else if (typeof date1 === 'number') {
+            dateTime1 = new Date(date1);
+        }
+        /** @type {Date} */ var dateTime2 = date2;
+        if (typeof date2 === 'string') {
+            dateTime1 = DateTime.strToDate(date2);
+        } else if (typeof date2 === 'number') {
+            dateTime1 = new Date(date2);
+        }
+        var diffSecond = dateTime1.getTime() - dateTime2.getTime();
+        // diff
+        switch(diffType){
+            case 'year':
+                return dateTime1.getFullYear() - dateTime2.getFullYear();
+            case 'month':
+                // 计算总月份差
+                // eslint-disable-next-line no-case-declarations
+                var months = (dateTime1.getFullYear() - dateTime2.getFullYear()) * 12 + (dateTime1.getMonth() - dateTime2.getMonth());
+                // 如果结束日的日期小于开始日的日期，则减去一个月
+                if (dateTime1.getDate() < dateTime2.getDate()) {
+                    months--;
+                }
+                return months;
+            case 'day':
+                return diffSecond / 60 / 60 / 24;
+            case 'hour':
+                return diffSecond / 60 / 60;
+            case 'minute':
+                return diffSecond / 60;
+            case 'second':
+                return diffSecond;
+            default:
+                throw new Error('Unsupported diff type');
+        }
+    };
+    DateTime.now = function now() {
+        return Date.now();
+    };
+    /**
+   *
+   * @param {string} str 日期， 2025-04-10 10:10:10 或 2025/04/10 10:10:10 或 20250410101010 或 20250410T101010Z  或 秒 或 毫秒
+   * @example
+   * DateTime.strToDate("2025/04/10 10:10:10") // Date
+   * DateTime.strToDate("2025-04-10 10:10:10") // Date
+   * DateTime.strToDate("20250410101010") // Date
+   * DateTime.strToDate("20250410T101010Z") // Date
+   */ DateTime.strToDate = function strToDate(str) {
+        var time = (str + '').replace(/-/gi, '').replace(/:/gi, '').replace(/\//gi, '').replace(/ /gi, '').replace(/T|Z/gi, '');
+        // 兼容
+        if ((str + '').length === 10) {
+            // 时间戳 秒
+            return new Date(+str);
+        } else if ((str + '').length === 13) {
+            // 时间戳 毫秒
+            return new Date(+str);
+        }
+        var year = time.slice(0, 4);
+        var month = time.slice(4, 6);
+        var day = time.slice(6, 8);
+        var hour = time.slice(8, 10);
+        var minute = time.slice(10, 12);
+        var second = time.slice(12, 14);
+        return new Date(year + '/' + month + '/' + day + ' ' + hour + ':' + minute + ':' + second);
+    };
+    /**
+   * @description 补充十位
+   * @param {number} num
+   * @returns {string}
+   * @example
+   * DateTime.padStart(1) // "01"
+   * DateTime.padStart(33) // "33"
+   */ DateTime.padStart = function padStart(num) {
+        if (num < 10) {
+            return '0' + num;
+        } else {
+            return num + '';
+        }
+    };
+    return DateTime;
+}();
+
 function _extends$5() {
     _extends$5 = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -8640,29 +9169,20 @@ function _set_prototype_of$6(o, p) {
     function DatePickerControl(options) {
         var _this;
         var _this_options_props_urlInfo_searchParams, _this_options_props_urlInfo, _this_options_props;
-        _this = Control.call(this, _extends$5({
-            maxDate: new Date()
-        }, options, {
+        _this = Control.call(this, _extends$5({}, options, {
             tagName: 'span',
             controlType: 'button',
             classNameSuffix: 'date'
         })) || this;
         _this.options = options;
-        _this._value = DateTime.format(((_this_options_props = _this.options.props) == null ? void 0 : (_this_options_props_urlInfo = _this_options_props.urlInfo) == null ? void 0 : (_this_options_props_urlInfo_searchParams = _this_options_props_urlInfo.searchParams) == null ? void 0 : _this_options_props_urlInfo_searchParams.begin) || new Date(), 'YYYY-MM-DD');
+        _this._value = DateTime.formate(((_this_options_props = _this.options.props) == null ? void 0 : (_this_options_props_urlInfo = _this_options_props.urlInfo) == null ? void 0 : (_this_options_props_urlInfo_searchParams = _this_options_props_urlInfo.searchParams) == null ? void 0 : _this_options_props_urlInfo_searchParams.begin) || new Date(), 'YYYY-MM-DD');
         _this._render();
-        // 日期上的点
-        _this.on(EVENTS.control.dateMonthChange, function(dates) {
-            var _this_datePicker_updateBadges, _this_datePicker;
-            (_this_datePicker = _this.datePicker) == null ? void 0 : (_this_datePicker_updateBadges = _this_datePicker.updateBadges) == null ? void 0 : _this_datePicker_updateBadges.call(_this_datePicker, dates);
-        });
         return _this;
     }
     var _proto = DatePickerControl.prototype;
     _proto._render = function _render() {
         var _this = this;
-        var _this_options_props;
-        var isMobile1 = isMobile();
-        if (isMobile1) {
+        if (isMobile()) {
             var _this_locale;
             this.$container.innerHTML = '\n        <span class="' + PREFIX_CLASS + '-mobile-date-filter" title="' + (((_this_locale = this.locale) == null ? void 0 : _this_locale.BTN_CALENDAR) || '') + '">\n          <span class="' + PREFIX_CLASS + '-mobile-date-filter-value">' + this._getDateStr() + "</span>\n          " + IconComponents.filter() + "\n        <span>";
         } else {
@@ -8671,43 +9191,25 @@ function _set_prototype_of$6(o, p) {
                 title: (_this_locale1 = this.locale) == null ? void 0 : _this_locale1.BTN_CALENDAR
             });
         }
-        this.datePicker = new DatePicker(this.$container, {
-            isMobile: isMobile1,
-            getPopupContainer: function() {
-                return _this.$container;
-            },
-            mode: 'date',
-            offset: [
-                0,
-                -10
-            ],
-            badges: ((_this_options_props = this.options.props) == null ? void 0 : _this_options_props.recMonth) || [],
-            language: this.options.language === 'zh' ? 'zh' : 'en',
+        this.dataPickerUtil = new DatePickerUtil(this.$container, {
+            staticPath: this.options.staticPath,
+            language: this.options.language === 'zh' ? 'zh-CN' : 'en-US',
             current: new Date(this._value + ' 00:00:00'),
-            disabledDate: function(date) {
-                return date.getTime() > (_this.options.maxDate || new Date()).getTime();
-            },
-            placement: 'tr',
-            onOk: function(date, mode) {
-                if (date && _this._value !== DateTime.format(date, 'YYYY-MM-DD') && isMobile1) {
-                    _this._value = DateTime.format(date, 'YYYY-MM-DD');
-                    _this.options.onOk == null ? void 0 : _this.options.onOk.call(_this.options, date);
+            maxDate: this.options.maxDate || new Date(),
+            place: isMobile() ? 'bottom-left' : 'top-right',
+            onChange: function(date) {
+                if (date && _this._value !== DateTime.formate(date, 'YYYY-MM-DD')) {
+                    _this._value = DateTime.formate(date, 'YYYY-MM-DD');
+                    _this.options.onChange == null ? void 0 : _this.options.onChange.call(_this.options, date);
                     _this.emit(EVENTS.control.dateChange, date);
                     if (date && _this.$container.querySelector("." + PREFIX_CLASS + "-mobile-date-filter-value")) {
                         _this.$container.querySelector("." + PREFIX_CLASS + "-mobile-date-filter-value").innerHTML = _this._getDateStr();
                     }
                 }
             },
-            onChange: function(date, mode) {
-                if (date && _this._value !== DateTime.format(date, 'YYYY-MM-DD') && !isMobile1 && mode === 'date') {
-                    _this._value = DateTime.format(date, 'YYYY-MM-DD');
-                    _this.options.onChange == null ? void 0 : _this.options.onChange.call(_this.options, date);
-                    _this.emit(EVENTS.control.dateChange, date);
-                }
-            },
-            onOpenChange: function(open) {
-                _this.options.onPanelChange == null ? void 0 : _this.options.onPanelChange.call(_this.options, open, _this.datePicker.current);
-                _this.emit(EVENTS.control.datePanelOpenChange, open, _this.datePicker.current);
+            onPanelChange: function(open, date) {
+                _this.options.onPanelChange == null ? void 0 : _this.options.onPanelChange.call(_this.options, open, date);
+                _this.emit(EVENTS.control.datePanelOpenChange, open, date);
             }
         });
     };
@@ -8717,27 +9219,28 @@ function _set_prototype_of$6(o, p) {
    * @param change 是否触发 onChange 事件
    */ _proto.setDate = function setDate(date, change) {
         if (change === void 0) change = true;
-        var _this_datePicker;
-        (_this_datePicker = this.datePicker) == null ? void 0 : _this_datePicker.setCurrent(date, change);
-        if (date && !change && this._value !== DateTime.format(date, 'YYYY-MM-DD')) {
-            this._value = DateTime.format(date, 'YYYY-MM-DD');
+        var _this_dataPickerUtil;
+        (_this_dataPickerUtil = this.dataPickerUtil) == null ? void 0 : _this_dataPickerUtil.setDate(date, change);
+        if (date && !change && this._value !== DateTime.formate(date, 'YYYY-MM-DD')) {
+            this._value = DateTime.formate(date, 'YYYY-MM-DD');
             if (date && this.$container.querySelector("." + PREFIX_CLASS + "-mobile-date-filter-value")) {
                 this.$container.querySelector("." + PREFIX_CLASS + "-mobile-date-filter-value").innerHTML = this._getDateStr();
             }
         }
     };
     _proto.reset = function reset() {
-        if (this.datePicker) this.datePicker.open = false;
+        var _this_dataPickerUtil;
+        (_this_dataPickerUtil = this.dataPickerUtil) == null ? void 0 : _this_dataPickerUtil.hide();
         Control.prototype.reset.call(this);
     };
     /**
    * 销毁控件
    * @override
    */ _proto.destroy = function destroy() {
-        if (this.datePicker) {
-            this.datePicker.destroy();
+        if (this.dataPickerUtil) {
+            this.dataPickerUtil.destroy();
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            this.datePicker = null;
+            this.dataPickerUtil = null;
         }
         Control.prototype.destroy.call(this);
     };
@@ -8747,7 +9250,6 @@ function _set_prototype_of$6(o, p) {
     };
     /**
    * 点击 Control 会触发
-   * @overload super._onControlClick(e: Event)
    */ _proto._onControlClick = function _onControlClick(e) {
         Control.prototype._onControlClick.call(this, e);
     };
@@ -9820,7 +10322,8 @@ var _renderDatePicker = function(theme, container, props) {
                 return container;
             },
             language: theme.options.language,
-            locales: theme.i18n.translations
+            locales: theme.i18n.translations,
+            staticPath: theme.options.staticPath
         }, ((_theme_options = theme.options) == null ? void 0 : _theme_options["dateOptions"]) || {}, {
             props: props
         }));
@@ -10119,18 +10622,7 @@ var THEME_DEFAULT_OPTIONS = {
    */ _this._footerMoreControl = null, /** 头部控件 @since 0.0.1 @private */ _this._header = null, /** 低部控件 @since 0.0.1 @private */ _this._footer = null, /** 回放底部时间轴 @since 0.0.1 @private */ _this._recFooter = null, /**
    * 移动端扩展容器, 扩展的控件渲染在指定容器以外， 仅只用端适用， 为了可以放置大的控件和方便开发接入
    * @private
-   */ _this._mobileExtend = null, /**  @since 0.0.1 @private */ _this._interactiveResult = null, /**  @since 0.0.1 @private */ _this._themeData = null, _this._fullscreen = null, _this.zoomUtil = null, /** 清除屏幕旋转 */ _this._cleanupOrientation = null, /**  resizeObserver 监听销毁 */ _this._cleanUpResizeObserver = null, /** 容器的宽 */ _this._width = 0, /** 容器的高 */ _this._height = 0, /** 当前容器的全屏状态  true: 全屏， false: 非全屏 */ _this._isCurrentFullscreen = false, /** 屏幕旋转角度 0 ｜ 90 ｜ 180 ｜ 270 */ _this._orientationAngle = 0, /** 是否播放中 @private */ _this._playing = false, /** 加载中 */ _this._loading = false, /** 音量 */ _this._volume = 0, /** 静音 */ _this._muted = false, /** 电子放大倍数 @private */ _this._zoom = 1, /** 放大中  true: 可缩放状态，false: 禁止缩放状态(不能缩放) @private */ _this._zooming = false, /** 录制中 @private */ _this._recording = false, /** 对讲中 @private */ _this._talking = false, /** 倍速 @private */ _this._speed = 1, /** 自定清晰度 @private */ _this._videoLevelAuto = false, /** 清晰度列表 */ _this.videoLevelList = [], /** 回放片段列表 */ _this.recordList = [], /** 窗口尺寸变化时，设置窗口超出隐藏，防止出现滚动条 */ _this._resizeOverflowTimer = null, // /**
-        //  * 记录回放的月份
-        //  *
-        //  * key: {序列号}_{通道号}_{rec | cloud | cloudRecord}   比如：BC7799091_1_rec  BC7799091_1_cloud BC7799091_1_cloudRecord
-        //  *
-        //  * value: 月份列表  比如 ["2025-12-01", "2025-12-02"]
-        //  * @private
-        //  */
-        // _recMonthObj: Record<string, string[]> = {};
-        /**
-   * 录像回放的月份列表 @private
-   */ _this.recMonth = [], /** 清理 header/footer 动画 定时器 @private */ _this._onPauseTimingFunc = null, /** 销毁标识  @readonly */ _this.destroyed = false, /** 播放地址信息 */ _this.urlInfo = null, _this.scaleMode = 0;
+   */ _this._mobileExtend = null, /**  @since 0.0.1 @private */ _this._interactiveResult = null, /**  @since 0.0.1 @private */ _this._themeData = null, _this._fullscreen = null, _this.zoomUtil = null, /** 清除屏幕旋转 */ _this._cleanupOrientation = null, /**  resizeObserver 监听销毁 */ _this._cleanUpResizeObserver = null, /** 容器的宽 */ _this._width = 0, /** 容器的高 */ _this._height = 0, /** 当前容器的全屏状态  true: 全屏， false: 非全屏 */ _this._isCurrentFullscreen = false, /** 屏幕旋转角度 0 ｜ 90 ｜ 180 ｜ 270 */ _this._orientationAngle = 0, /** 是否播放中 @private */ _this._playing = false, /** 加载中 */ _this._loading = false, /** 音量 */ _this._volume = 0, /** 静音 */ _this._muted = false, /** 电子放大倍数 @private */ _this._zoom = 1, /** 放大中  true: 可缩放状态，false: 禁止缩放状态(不能缩放) @private */ _this._zooming = false, /** 录制中 @private */ _this._recording = false, /** 对讲中 @private */ _this._talking = false, /** 倍速 @private */ _this._speed = 1, /** 自定清晰度 @private */ _this._videoLevelAuto = false, /** 清晰度列表 */ _this.videoLevelList = [], /** 回放片段列表 */ _this.recordList = [], /** 窗口尺寸变化时，设置窗口超出隐藏，防止出现滚动条 */ _this._resizeOverflowTimer = null, /** 清理 header/footer 动画 定时器 @private */ _this._onPauseTimingFunc = null, /** 销毁标识  @readonly */ _this.destroyed = false, /** 播放地址信息 */ _this.urlInfo = null, _this.scaleMode = 0;
         _this._initOptions(options);
         if (_this.options.type === 'ezopen') {
             var _this_urlInfo_searchParams, _this_urlInfo;
@@ -10140,7 +10632,7 @@ var THEME_DEFAULT_OPTIONS = {
             }
             if (_this.urlInfo.type === 'rec') {
                 var _this_urlInfo_searchParams1, _this_urlInfo1, _this_urlInfo_searchParams2, _this_urlInfo2;
-                _this._seekDate = ((_this_urlInfo1 = _this.urlInfo) == null ? void 0 : (_this_urlInfo_searchParams1 = _this_urlInfo1.searchParams) == null ? void 0 : _this_urlInfo_searchParams1.begin) ? DateTime.toDate((_this_urlInfo2 = _this.urlInfo) == null ? void 0 : (_this_urlInfo_searchParams2 = _this_urlInfo2.searchParams) == null ? void 0 : _this_urlInfo_searchParams2.begin) : DateTime.toDate(DateTime.format(new Date(), 'YYYY/MM/DD') + ' 00:00:00');
+                _this._seekDate = ((_this_urlInfo1 = _this.urlInfo) == null ? void 0 : (_this_urlInfo_searchParams1 = _this_urlInfo1.searchParams) == null ? void 0 : _this_urlInfo_searchParams1.begin) ? DateTime.strToDate((_this_urlInfo2 = _this.urlInfo) == null ? void 0 : (_this_urlInfo_searchParams2 = _this_urlInfo2.searchParams) == null ? void 0 : _this_urlInfo_searchParams2.begin) : DateTime.strToDate(DateTime.formate(new Date(), 'YYYY/MM/DD') + ' 00:00:00');
             }
         }
         _this._getRecType(_this.options.url);
@@ -11352,6 +11844,6 @@ var THEME_DEFAULT_OPTIONS = {
     zh: zh,
     en: en
 };
-/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '2.0.1';
+/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '2.0.2-beta.1';
 
 export { Control, Fullscreen, Loading, Message, Play, Poster, Rec, Theme, Utils, Volume };