@ezuikit/player-theme 3.0.2-beta.1 → 3.1.0-beta.1

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 /*
-* @ezuikit/player-theme v3.0.2-beta.1
-* Copyright (c) 2026-05-15 Ezviz-OpenBiz
+* @ezuikit/player-theme v3.1.0-beta.1
+* Copyright (c) 2026-06-24 Ezviz-OpenBiz
 * Released under the MIT License.
 */
 import EventEmitter from 'eventemitter3';
@@ -13,13 +13,12 @@ import I18n from '@ezuikit/utils-i18n';
 import Logger from '@ezuikit/utils-logger';
 import Zoom$1 from '@ezuikit/control-zoom';
 import { Ptz as Ptz$1, MobilePtz } from '@ezuikit/control-ptz';
-import { DatePicker } from '@ezuikit/control-date-picker';
+import { DatePicker, TimePicker } from '@ezuikit/control-date-picker';
 import { MobileTimeLine, TimeLine } from '@ezuikit/control-time-line';
 
 /**
  * 播放器的类名前缀
  */ var PREFIX_CLASS = 'ezplayer';
-/** */ var DATE_PICKER_ICON_WIDTH = 36;
 /** 填充模式 */ var THEME_SCALE_MODE_TYPE = {
     /** 画面完全填充canvas区域,画面会被拉伸 */ full: 0,
     /** 画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 */ auto: 1,
@@ -143,6 +142,9 @@ var EVENTS = {
     /** 麦克风音量变化 */ talkVolumeChange: 'talkVolumeChange',
     /** 语音广播状态变化 */ broadcastChange: 'broadcastChange',
     /** AI对话框状态变化 */ aichatChange: 'aichatChange',
+    /** 直播模式切换 */ liveChange: 'liveChange',
+    /** 回放下拉选择变化 */ recDropdownChange: 'recDropdownChange',
+    /** 告警消息面板状态变化 */ alarmMessageChange: 'alarmMessageChange',
     /** 动态切换日志配置 */ setLoggerOptions: 'setLoggerOptions',
     records: 'records',
     ptzSpeedChange: 'ptzSpeedChange',
@@ -190,6 +192,12 @@ var EVENTS = {
         /** 语音广播控件销毁 */ broadcastDestroy: 'Control.broadcastDestroy',
         /** AI对话框状态变化 */ aichatChange: 'Control.aichatChange',
         /** AI对话框控件销毁 */ aichatDestroy: 'Control.aichatDestroy',
+        /** 直播按钮点击 */ liveChange: 'Control.liveChange',
+        /** 直播控件销毁 */ liveDestroy: 'Control.liveDestroy',
+        /** 回放下拉选择变化 */ recDropdownChange: 'Control.recDropdownChange',
+        /** 回放下拉控件销毁 */ recDropdownDestroy: 'Control.recDropdownDestroy',
+        /** 告警消息面板开关 */ alarmMessageChange: 'Control.alarmMessageChange',
+        /** 告警消息面板销毁 */ alarmMessageDestroy: 'Control.alarmMessageDestroy',
         /** 缩放比例改变 */ zoomChange: 'Control.zoomChange',
         /** 音量调节面板 展示隐藏变换 */ zoomPanelOpenChange: 'Control.zoomPanelOpenChange',
         /** 缩放控件销毁 */ zoomDestroy: 'Control.zoomDestroy',
@@ -199,6 +207,8 @@ var EVENTS = {
         /** 日期改变 */ dateChange: 'Control.dateChange',
         /** 日期改变 */ dateMonthChange: 'Control.dateMonthChange',
         /** 日期销毁 */ dateDestroy: 'Control.datePanelDestroy',
+        /** 时间面板展示隐藏变换 */ timePanelOpenChange: 'Control.timePanelOpenChange',
+        /** 时间改变 */ timeChange: 'Control.timeChange',
         /** 时间轴拖动结束 */ timeLineChange: 'Control.timeLineChange',
         /** 时间轴图片列表面板 */ timeLinePanelOpenChange: 'Control.timeLinePanelOpenChange',
         /** 时间轴控件销毁 */ timeLineDestroy: 'Control.timeLineDestroy',
@@ -241,7 +251,7 @@ function _create_class$9(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties$9(Constructor.prototype, protoProps);
     return Constructor;
 }
-function _inherits$t(subClass, superClass) {
+function _inherits$x(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -252,14 +262,14 @@ function _inherits$t(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$t(subClass, superClass);
+    if (superClass) _set_prototype_of$x(subClass, superClass);
 }
-function _set_prototype_of$t(o, p) {
-    _set_prototype_of$t = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$x(o, p) {
+    _set_prototype_of$x = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$t(o, p);
+    return _set_prototype_of$x(o, p);
 }
 /**
  * 控件基类
@@ -273,7 +283,7 @@ function _set_prototype_of$t(o, p) {
  * const myControl = new MyControl({})
  * ```
  */ var Control = /*#__PURE__*/ function(EventEmitter) {
-    _inherits$t(Control, EventEmitter);
+    _inherits$x(Control, EventEmitter);
     function Control(options) {
         var _this;
         var _this___options;
@@ -365,7 +375,7 @@ function _set_prototype_of$t(o, p) {
         if (this._camelCaseName) {
             this.emit("Control." + this._camelCaseName + "Destroy");
         }
-        if (((_this___options = this.__options) == null ? void 0 : _this___options.controlType) !== 'block') this.$container.addEventListener('dblclick', this._onDBlClick);
+        if (((_this___options = this.__options) == null ? void 0 : _this___options.controlType) !== 'block') this.$container.removeEventListener('dblclick', this._onDBlClick);
         this._active = false;
         this.removeAllListeners();
         (_this_$container = this.$container) == null ? void 0 : (_this_$container_remove = _this_$container.remove) == null ? void 0 : _this_$container_remove.call(_this_$container);
@@ -448,8 +458,8 @@ function _set_prototype_of$t(o, p) {
     return Control;
 }(EventEmitter);
 
-function _extends$s() {
-    _extends$s = Object.assign || function(target) {
+function _extends$w() {
+    _extends$w = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -460,9 +470,9 @@ function _extends$s() {
         }
         return target;
     };
-    return _extends$s.apply(this, arguments);
+    return _extends$w.apply(this, arguments);
 }
-function _inherits$s(subClass, superClass) {
+function _inherits$w(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -473,25 +483,25 @@ function _inherits$s(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$s(subClass, superClass);
+    if (superClass) _set_prototype_of$w(subClass, superClass);
 }
-function _set_prototype_of$s(o, p) {
-    _set_prototype_of$s = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$w(o, p) {
+    _set_prototype_of$w = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$s(o, p);
+    return _set_prototype_of$w(o, p);
 }
 var LOADING_DEFAULT_OPTIONS = {};
 /**
  * 加载动画控件
  * @category Control
  */ var Loading = /*#__PURE__*/ function(Control) {
-    _inherits$s(Loading, Control);
+    _inherits$w(Loading, Control);
     function Loading(options) {
         if (options === void 0) options = {};
         var _this;
-        _this = Control.call(this, Object.assign({}, LOADING_DEFAULT_OPTIONS, _extends$s({}, options, {
+        _this = Control.call(this, Object.assign({}, LOADING_DEFAULT_OPTIONS, _extends$w({}, options, {
             tagName: 'div',
             controlType: 'block',
             classNameSuffix: 'loading'
@@ -529,8 +539,8 @@ var LOADING_DEFAULT_OPTIONS = {};
     return Loading;
 }(Control);
 
-function _extends$r() {
-    _extends$r = Object.assign || function(target) {
+function _extends$v() {
+    _extends$v = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -541,9 +551,9 @@ function _extends$r() {
         }
         return target;
     };
-    return _extends$r.apply(this, arguments);
+    return _extends$v.apply(this, arguments);
 }
-function _inherits$r(subClass, superClass) {
+function _inherits$v(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -554,14 +564,14 @@ function _inherits$r(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$r(subClass, superClass);
+    if (superClass) _set_prototype_of$v(subClass, superClass);
 }
-function _set_prototype_of$r(o, p) {
-    _set_prototype_of$r = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$v(o, p) {
+    _set_prototype_of$v = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$r(o, p);
+    return _set_prototype_of$v(o, p);
 }
 // 不放在服务器上 是因为有可能http加载失败
 // prettier-ignore
@@ -573,11 +583,11 @@ var POSTER_OPTIONS = {
  * 封面控件
  * @category Control
  */ var Poster = /*#__PURE__*/ function(Control) {
-    _inherits$r(Poster, Control);
+    _inherits$v(Poster, Control);
     function Poster(options) {
         if (options === void 0) options = {};
         var _this;
-        _this = Control.call(this, Object.assign({}, POSTER_OPTIONS, _extends$r({}, options, {
+        _this = Control.call(this, Object.assign({}, POSTER_OPTIONS, _extends$v({}, options, {
             tagName: 'div',
             controlType: 'block',
             classNameSuffix: 'poster'
@@ -683,7 +693,11 @@ var Icons = {
     warnCircleOutLined: '<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" focusable="false" aria-hidden="true" data-icon="info-circle">\n  <path d="M8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1ZM8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2ZM7.5 8.875C7.5 8.94375 7.55625 9 7.625 9L8.375 9C8.44375 9 8.5 8.94375 8.5 8.875L8.5 4.625C8.5 4.55625 8.44375 4.5 8.375 4.5L7.625 4.5C7.55625 4.5 7.5 4.55625 7.5 4.625L7.5 8.875ZM7.25 10.75C7.25 11.1642 7.58579 11.5 8 11.5C8.41421 11.5 8.75 11.1642 8.75 10.75C8.75 10.3358 8.41421 10 8 10C7.58579 10 7.25 10.3358 7.25 10.75Z" fill-rule="evenodd" />\n          </svg>',
     date: '<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" focusable="false" aria-hidden="true" data-icon="date">\n    <g>\n    <path d="m13.35,5.9c-0.3,0 -0.5,-0.2 -0.5,-0.5l0,-3.3c0,-0.3 0.2,-0.5 0.5,-0.5s0.5,0.2 0.5,0.5l0,3.3c0,0.3 -0.3,0.5 -0.5,0.5z" />\n    <path d="m6.65,5.9c-0.3,0 -0.5,-0.2 -0.5,-0.5l0,-3.3c0,-0.3 0.2,-0.5 0.5,-0.5s0.5,0.2 0.5,0.5l0,3.3c0,0.3 -0.2,0.5 -0.5,0.5z" />\n    <path d="m17.45,8.4l-15,0c-0.3,0 -0.5,-0.2 -0.5,-0.5s0.2,-0.5 0.5,-0.5l15,0c0.3,0 0.5,0.2 0.5,0.5s-0.2,0.5 -0.5,0.5z" />\n    <path d="m15.85,18.4l-11.7,0c-1.2,0 -2.2,-1 -2.2,-2.2l0,-10.8c0,-1.2 1,-2.2 2.2,-2.2l11.7,0c1.2,0 2.2,1 2.2,2.2l0,10.8c-0.1,1.3 -1,2.2 -2.2,2.2zm-11.7,-14.1c-0.6,0 -1.2,0.5 -1.2,1.2l0,10.8c0,0.6 0.5,1.2 1.2,1.2l11.7,0c0.6,0 1.2,-0.5 1.2,-1.2l0,-10.9c0,-0.6 -0.5,-1.2 -1.2,-1.2l-11.7,0l0,0.1z" />\n    <path d="m9.95,12c-0.4,0 -0.7,-0.3 -0.7,-0.7c0,-0.2 0.1,-0.4 0.2,-0.5s0.3,-0.2 0.5,-0.2l0,0l0,0c0.4,0 0.7,0.3 0.7,0.7s-0.3,0.7 -0.7,0.7z" />\n    <path d="m14.15,12c-0.4,0 -0.7,-0.3 -0.7,-0.7c0,-0.2 0.1,-0.4 0.2,-0.5c0.1,-0.1 0.3,-0.2 0.5,-0.2c0.4,0 0.7,0.3 0.7,0.7s-0.3,0.7 -0.7,0.7zm0,-1c-0.2,0 -0.3,0.1 -0.3,0.3c0,0.2 0.3,0.4 0.5,0.2c0.1,-0.1 0.1,-0.1 0.1,-0.2c0,-0.2 -0.1,-0.3 -0.3,-0.3z" />\n    <path d="m5.85,15.3c-0.4,0 -0.7,-0.3 -0.7,-0.7c0,-0.2 0.1,-0.4 0.2,-0.5c0.1,-0.1 0.3,-0.2 0.5,-0.2l0,0l0,0c0.4,0 0.7,0.3 0.7,0.7c0,0.4 -0.3,0.7 -0.7,0.7z" />\n    <path d="m9.95,15.3c-0.4,0 -0.7,-0.3 -0.7,-0.7c0,-0.2 0.1,-0.4 0.2,-0.5c0.1,-0.1 0.3,-0.2 0.5,-0.2l0,0l0,0c0.4,0 0.7,0.3 0.7,0.7c0.1,0.4 -0.3,0.7 -0.7,0.7z" />\n    </g>\n  </svg>',
     add: '<svg fill="currentColor" width="1em" height="1em" viewBox="0 0 20 20" focusable="false" aria-hidden="true" data-icon="add">\n  <path d="M10.5859 2.96875L9.41406 2.96875C9.3099 2.96875 9.25781 3.02083 9.25781 3.125L9.25781 9.25781L3.4375 9.25781C3.38542 9.25781 3.34635 9.27083 3.32031 9.29688C3.29427 9.32292 3.28125 9.36198 3.28125 9.41406L3.28125 10.5859C3.28125 10.6901 3.33333 10.7422 3.4375 10.7422L9.25781 10.7422L9.25781 16.875C9.25781 16.9792 9.3099 17.0312 9.41406 17.0312L10.5859 17.0312C10.6901 17.0312 10.7422 16.9792 10.7422 16.875L10.7422 10.7422L16.5625 10.7422C16.6667 10.7422 16.7188 10.6901 16.7188 10.5859L16.7188 9.41406C16.7188 9.3099 16.6667 9.25781 16.5625 9.25781L10.7422 9.25781L10.7422 3.125C10.7422 3.07292 10.7292 3.03385 10.7031 3.00781C10.6771 2.98177 10.638 2.96875 10.5859 2.96875Z" fill-rule="evenodd" /></svg>',
-    reduce: '<svg fill="currentColor" width="1em" height="1em" viewBox="0 0 20 20" focusable="false" aria-hidden="true" data-icon="reduce">\n   	<path  d="M3.4375 9.25781L16.5625 9.25781C16.6667 9.25781 16.7188 9.3099 16.7188 9.41406L16.7188 10.5859C16.7188 10.6901 16.6667 10.7422 16.5625 10.7422L3.4375 10.7422C3.33333 10.7422 3.28125 10.6901 3.28125 10.5859L3.28125 9.41406C3.28125 9.3099 3.33333 9.25781 3.4375 9.25781Z" fill-rule="evenodd" />\n  </svg>'
+    reduce: '<svg fill="currentColor" width="1em" height="1em" viewBox="0 0 20 20" focusable="false" aria-hidden="true" data-icon="reduce">\n   	<path  d="M3.4375 9.25781L16.5625 9.25781C16.6667 9.25781 16.7188 9.3099 16.7188 9.41406L16.7188 10.5859C16.7188 10.6901 16.6667 10.7422 16.5625 10.7422L3.4375 10.7422C3.33333 10.7422 3.28125 10.6901 3.28125 10.5859L3.28125 9.41406C3.28125 9.3099 3.33333 9.25781 3.4375 9.25781Z" fill-rule="evenodd" />\n  </svg>',
+    /** 直播 */ live: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" focusable="false" aria-hidden="true" data-icon="live">\n    <rect width="18" height="13" x="3" y="7" rx="1.6" stroke-linejoin="round" stroke-width="1.5"/>\n    <path d="M8.26636 4.8L10.466 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>\n    <path d="M15.996 4.8L13.796 7" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>\n    <path d="M9.8 17L15.4 13.354L9.8 10L9.8 17Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>\n  </svg>',
+    /** 回放 */ recDropdown: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" focusable="false" aria-hidden="true" data-icon="rec-dropdown">\n    <path d="M9.168 2.556C9.168 2.556 12.51 4.445 12 4.445C7.306 4.445 3.5 8.251 3.5 12.945C3.5 17.64 7.306 21.445 12 21.445C16.695 21.445 20.5 17.64 20.5 12.945C20.5 10.622 19.568 8.517 18.058 6.982" stroke-linecap="round" stroke-width="1.5"/>\n    <path d="M11.61 9.829L11.61 13.731L16.064 13.731" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>\n  </svg>',
+    /** 消息/告警 */ alarmMessage: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" focusable="false" aria-hidden="true" data-icon="alarm-message">\n    <path d="M9.708 18.344L9.708 18.709C9.708 19.974 10.734 21 12 21C13.266 21 14.292 19.974 14.292 18.709L14.292 18.343" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>\n    <path d="M13.833 5.751L13.833 4.833C13.833 3.821 13.013 3 12 3C10.987 3 10.167 3.821 10.167 4.833L10.167 5.751" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>\n    <path d="M6.563 10.189C6.563 7.686 8.592 5.657 11.094 5.657L12.907 5.657C15.41 5.657 17.438 7.686 17.438 10.189L17.438 12.986C17.438 13.516 17.649 14.025 18.024 14.4L18.665 15.04C19.04 15.416 19.251 15.925 19.251 16.455C19.251 17.499 18.405 18.345 17.361 18.345L6.64 18.345C5.596 18.345 4.75 17.499 4.75 16.455C4.75 15.925 4.961 15.416 5.336 15.04L5.977 14.4C6.352 14.025 6.563 13.516 6.563 12.986L6.563 10.189Z" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>\n  </svg>',
+    time: '<svg fill="currentColor" width="1em" height="1em" viewBox="0 0 20 20" focusable="false" aria-hidden="true" data-icon="time">\n   	<path d="M10 1.66504C14.6026 1.66521 18.333 5.39635 18.333 9.99902C18.3328 14.6015 14.6025 18.3319 10 18.332C5.39733 18.332 1.66619 14.6017 1.66602 9.99902C1.66602 5.39624 5.39722 1.66504 10 1.66504ZM10 2.91504C6.08758 2.91504 2.91602 6.0866 2.91602 9.99902C2.91619 13.9113 6.08769 17.082 10 17.082C13.9122 17.0819 17.0828 13.9112 17.083 9.99902C17.083 6.08671 13.9123 2.91521 10 2.91504ZM10 6.875C10.3451 6.87508 10.625 7.1549 10.625 7.5V9.59863L10.71 9.63672C12.71 10.5481 13.253 10.796 13.6406 10.9727L13.7217 11.0098L13.8008 11.0459C13.8799 11.082 13.9609 11.1179 14.0557 11.1611C14.3697 11.3043 14.5083 11.6752 14.3652 11.9893C14.2221 12.3034 13.8512 12.442 13.5371 12.2988C13.4108 12.2412 13.3093 12.1949 13.2031 12.1465L13.1221 12.1094C12.7068 11.9201 12.1127 11.6495 9.74023 10.5684C9.51771 10.4667 9.375 10.2447 9.375 10V7.5C9.37504 7.15485 9.65485 6.875 10 6.875Z"/>\n  </svg>'
 };
 
 /**
@@ -841,11 +855,27 @@ var IconComponents = {
     reduce: function(attr) {
         if (attr === void 0) attr = {};
         return createIcon(Icons.reduce, 'reduce', attr);
+    },
+    /** 直播 */ live: function(attr) {
+        if (attr === void 0) attr = {};
+        return createIcon(Icons.live, 'live', attr);
+    },
+    /** 回放 */ recDropdown: function(attr) {
+        if (attr === void 0) attr = {};
+        return createIcon(Icons.recDropdown, 'rec-dropdown', attr);
+    },
+    /** 消息 */ alarmMessage: function(attr) {
+        if (attr === void 0) attr = {};
+        return createIcon(Icons.alarmMessage, 'alarm-message', attr);
+    },
+    time: function(attr) {
+        if (attr === void 0) attr = {};
+        return createIcon(Icons.time, 'time', attr);
     }
 };
 
-function _extends$q() {
-    _extends$q = Object.assign || function(target) {
+function _extends$u() {
+    _extends$u = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -856,9 +886,9 @@ function _extends$q() {
         }
         return target;
     };
-    return _extends$q.apply(this, arguments);
+    return _extends$u.apply(this, arguments);
 }
-function _inherits$q(subClass, superClass) {
+function _inherits$u(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -869,25 +899,25 @@ function _inherits$q(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$q(subClass, superClass);
+    if (superClass) _set_prototype_of$u(subClass, superClass);
 }
-function _set_prototype_of$q(o, p) {
-    _set_prototype_of$q = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$u(o, p) {
+    _set_prototype_of$u = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$q(o, p);
+    return _set_prototype_of$u(o, p);
 }
 var MESSAGE_DEFAULT_OPTIONS = {};
 /**
  * 消息控件
  * @category Control
  */ var Message = /*#__PURE__*/ function(Control) {
-    _inherits$q(Message, Control);
+    _inherits$u(Message, Control);
     function Message(options) {
         if (options === void 0) options = {};
         var _this;
-        _this = Control.call(this, Object.assign({}, MESSAGE_DEFAULT_OPTIONS, _extends$q({}, options, {
+        _this = Control.call(this, Object.assign({}, MESSAGE_DEFAULT_OPTIONS, _extends$u({}, options, {
             tagName: 'div',
             controlType: 'block'
         }))) || this, _this._$toast = null;
@@ -1040,8 +1070,8 @@ function _create_class$8(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties$8(Constructor.prototype, protoProps);
     return Constructor;
 }
-function _extends$p() {
-    _extends$p = Object.assign || function(target) {
+function _extends$t() {
+    _extends$t = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -1052,9 +1082,9 @@ function _extends$p() {
         }
         return target;
     };
-    return _extends$p.apply(this, arguments);
+    return _extends$t.apply(this, arguments);
 }
-function _inherits$p(subClass, superClass) {
+function _inherits$t(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -1065,23 +1095,23 @@ function _inherits$p(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$p(subClass, superClass);
+    if (superClass) _set_prototype_of$t(subClass, superClass);
 }
-function _set_prototype_of$p(o, p) {
-    _set_prototype_of$p = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$t(o, p) {
+    _set_prototype_of$t = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$p(o, p);
+    return _set_prototype_of$t(o, p);
 }
 /**
  * 播放/暂停控件
  * @category Control
  */ var Play = /*#__PURE__*/ function(Control) {
-    _inherits$p(Play, Control);
+    _inherits$t(Play, Control);
     function Play(options) {
         var _this;
-        _this = Control.call(this, _extends$p({}, options, {
+        _this = Control.call(this, _extends$t({}, options, {
             tagName: 'span',
             controlType: 'button',
             classNameSuffix: 'play'
@@ -1697,8 +1727,8 @@ function _create_class$6(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties$6(Constructor.prototype, protoProps);
     return Constructor;
 }
-function _extends$o() {
-    _extends$o = Object.assign || function(target) {
+function _extends$s() {
+    _extends$s = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -1709,9 +1739,9 @@ function _extends$o() {
         }
         return target;
     };
-    return _extends$o.apply(this, arguments);
+    return _extends$s.apply(this, arguments);
 }
-function _inherits$o(subClass, superClass) {
+function _inherits$s(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -1722,14 +1752,14 @@ function _inherits$o(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$o(subClass, superClass);
+    if (superClass) _set_prototype_of$s(subClass, superClass);
 }
-function _set_prototype_of$o(o, p) {
-    _set_prototype_of$o = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$s(o, p) {
+    _set_prototype_of$s = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$o(o, p);
+    return _set_prototype_of$s(o, p);
 }
 var VOLUME_DEFAULT_OPTIONS = {
     volume: 0.8,
@@ -1743,12 +1773,12 @@ var VOLUME_DEFAULT_OPTIONS = {
  * 音量调节控件
  * @category Control
  */ var Volume = /*#__PURE__*/ function(Control) {
-    _inherits$o(Volume, Control);
+    _inherits$s(Volume, Control);
     function Volume(options) {
         if (options === void 0) options = {};
         var _this;
         var _this__options_props, _this__options_props1, _this__options_props2, _this__options_props3;
-        _this = Control.call(this, _extends$o({}, options, {
+        _this = Control.call(this, _extends$s({}, options, {
             tagName: 'span',
             classNameSuffix: 'volume',
             controlType: 'button'
@@ -2408,8 +2438,8 @@ var __fullscreenProvider__ = Provider.getInstance();
     return Fullscreen;
 }();
 
-function _extends$n() {
-    _extends$n = Object.assign || function(target) {
+function _extends$r() {
+    _extends$r = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -2420,9 +2450,9 @@ function _extends$n() {
         }
         return target;
     };
-    return _extends$n.apply(this, arguments);
+    return _extends$r.apply(this, arguments);
 }
-function _inherits$n(subClass, superClass) {
+function _inherits$r(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -2433,24 +2463,24 @@ function _inherits$n(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$n(subClass, superClass);
+    if (superClass) _set_prototype_of$r(subClass, superClass);
 }
-function _set_prototype_of$n(o, p) {
-    _set_prototype_of$n = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$r(o, p) {
+    _set_prototype_of$r = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$n(o, p);
+    return _set_prototype_of$r(o, p);
 }
 /**
  * 全屏控件
  * @category Control
  */ var Fullscreen = /*#__PURE__*/ function(Control) {
-    _inherits$n(Fullscreen, Control);
+    _inherits$r(Fullscreen, Control);
     function Fullscreen(options) {
         var _this;
         var _options_props, _this_options;
-        _this = Control.call(this, _extends$n({
+        _this = Control.call(this, _extends$r({
             tagName: 'span',
             classNameSuffix: 'fullscreen',
             controlType: 'button'
@@ -2515,8 +2545,8 @@ function _set_prototype_of$n(o, p) {
     return Fullscreen;
 }(Control);
 
-function _extends$m() {
-    _extends$m = Object.assign || function(target) {
+function _extends$q() {
+    _extends$q = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -2527,9 +2557,9 @@ function _extends$m() {
         }
         return target;
     };
-    return _extends$m.apply(this, arguments);
+    return _extends$q.apply(this, arguments);
 }
-function _inherits$m(subClass, superClass) {
+function _inherits$q(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -2540,24 +2570,24 @@ function _inherits$m(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$m(subClass, superClass);
+    if (superClass) _set_prototype_of$q(subClass, superClass);
 }
-function _set_prototype_of$m(o, p) {
-    _set_prototype_of$m = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$q(o, p) {
+    _set_prototype_of$q = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$m(o, p);
+    return _set_prototype_of$q(o, p);
 }
 /**
  * 回放类型切换（本地回放(sdk 卡)， 云存储回放， 云录制回放）控件
  * @category Control
  */ var Rec = /*#__PURE__*/ function(Control) {
-    _inherits$m(Rec, Control);
+    _inherits$q(Rec, Control);
     function Rec(options) {
         var _this;
         var _options_props;
-        _this = Control.call(this, _extends$m({}, options, {
+        _this = Control.call(this, _extends$q({}, options, {
             tagName: 'div',
             controlType: 'block',
             classNameSuffix: 'rec'
@@ -2834,6 +2864,12 @@ var zh = {
     BTN_TALK: '对讲',
     BTN_BROADCAST: '语音广播',
     BTN_AICHAT: 'AI对话',
+    BTN_LIVE: '直播',
+    BTN_REC_DROPDOWN: '回放',
+    BTN_ALARM_MESSAGE: '消息',
+    REC_DROPDOWN_CLOUD_REC: '云存储',
+    REC_DROPDOWN_CLOUD_RECORD: '云录制',
+    REC_DROPDOWN_LOCAL_REC: '本地回放',
     BTN_ZOOM: '电子放大',
     BTN_3D_ZOOM: '3D定位',
     BTN_PTZ: '云台控制',
@@ -2847,6 +2883,7 @@ var zh = {
     BTN_CLOUDRECORD: '云录制',
     BTN_REC: '本地存储',
     BTN_CALENDAR: '日历',
+    BTN_TIME: '时间',
     BTN_MORE: '更多',
     DEVICE_NAME: '设备名称',
     DEVICE_ID: '设备序列号',
@@ -3106,6 +3143,12 @@ var en = {
     BTN_TALK: 'Intercom',
     BTN_BROADCAST: 'Voice broadcast',
     BTN_AICHAT: 'AI Chat',
+    BTN_LIVE: 'Live',
+    BTN_REC_DROPDOWN: 'Playback',
+    BTN_ALARM_MESSAGE: 'Messages',
+    REC_DROPDOWN_CLOUD_REC: 'Cloud Storage',
+    REC_DROPDOWN_CLOUD_RECORD: 'Cloud Recording',
+    REC_DROPDOWN_LOCAL_REC: 'Local Playback',
     BTN_ZOOM: 'Electronic zoom',
     BTN_3D_ZOOM: '3D positioning',
     BTN_PTZ: 'PTZ control',
@@ -3121,6 +3164,7 @@ var en = {
     BTN_CLOUDRECORD: 'Cloud recording',
     BTN_REC: 'Local storage',
     BTN_CALENDAR: 'Calendar',
+    BTN_TIME: 'Time',
     BTN_MORE: 'More',
     DEVICE_NAME: 'Device name',
     DEVICE_ID: 'Device serial number',
@@ -3301,6 +3345,21 @@ var en = {
                 iconId: 'deviceName',
                 part: 'left',
                 isrender: 1
+            },
+            {
+                iconId: 'live',
+                part: 'right',
+                isrender: 1
+            },
+            {
+                iconId: 'recDropdown',
+                part: 'right',
+                isrender: 1
+            },
+            {
+                iconId: 'alarmMessage',
+                part: 'right',
+                isrender: 1
             }
         ]
     },
@@ -3388,19 +3447,19 @@ var en = {
                 isrender: 1
             },
             {
-                iconId: 'cloudRec',
+                iconId: 'live',
                 part: 'right',
                 defaultActive: 0,
                 isrender: 1
             },
             {
-                iconId: 'cloudRecord',
+                iconId: 'recDropdown',
                 part: 'right',
                 defaultActive: 0,
                 isrender: 1
             },
             {
-                iconId: 'rec',
+                iconId: 'alarmMessage',
                 part: 'right',
                 defaultActive: 0,
                 isrender: 1
@@ -3803,7 +3862,7 @@ var en = {
     voice: voice
 };
 
-function _inherits$l(subClass, superClass) {
+function _inherits$p(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -3814,20 +3873,20 @@ function _inherits$l(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$l(subClass, superClass);
+    if (superClass) _set_prototype_of$p(subClass, superClass);
 }
-function _set_prototype_of$l(o, p) {
-    _set_prototype_of$l = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$p(o, p) {
+    _set_prototype_of$p = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$l(o, p);
+    return _set_prototype_of$p(o, p);
 }
 /**
  * 截图控件
  * @category Content
  */ var Content = /*#__PURE__*/ function(EventEmitter) {
-    _inherits$l(Content, EventEmitter);
+    _inherits$p(Content, EventEmitter);
     function Content(options) {
         var _this;
         _this = EventEmitter.call(this) || this, _this._scaleMode = 0, _this._cleanUpResizeObserver = null, _this._originWidth = 0, _this._originHeight = 0, _this._width = 0, _this._height = 0;
@@ -3942,8 +4001,8 @@ function _set_prototype_of$l(o, p) {
     return Content;
 }(EventEmitter);
 
-function _extends$l() {
-    _extends$l = Object.assign || function(target) {
+function _extends$p() {
+    _extends$p = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -3954,9 +4013,9 @@ function _extends$l() {
         }
         return target;
     };
-    return _extends$l.apply(this, arguments);
+    return _extends$p.apply(this, arguments);
 }
-function _inherits$k(subClass, superClass) {
+function _inherits$o(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -3967,23 +4026,23 @@ function _inherits$k(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$k(subClass, superClass);
+    if (superClass) _set_prototype_of$o(subClass, superClass);
 }
-function _set_prototype_of$k(o, p) {
-    _set_prototype_of$k = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$o(o, p) {
+    _set_prototype_of$o = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$k(o, p);
+    return _set_prototype_of$o(o, p);
 }
 /**
  * 更多控件
  * @category Control
  */ var More = /*#__PURE__*/ function(Control) {
-    _inherits$k(More, Control);
+    _inherits$o(More, Control);
     function More(options) {
         var _this;
-        _this = Control.call(this, _extends$l({}, options, {
+        _this = Control.call(this, _extends$p({}, options, {
             tagName: 'span',
             controlType: 'button',
             classNameSuffix: 'more'
@@ -4199,6 +4258,15 @@ function debounce(func, wait) {
         }
     });
     // =======================================================
+    // 告警消息
+    // =======================================================
+    theme.on(EVENTS.alarmMessageChange, function(active) {
+        var _theme_controls;
+        if ((_theme_controls = theme.controls) == null ? void 0 : _theme_controls.alarmMessageControl) {
+            theme.controls.alarmMessageControl._panelOpen = active;
+        }
+    });
+    // =======================================================
     // 录制
     // =======================================================
     theme.on(EVENTS.recordingChange, function(recording) {
@@ -4294,7 +4362,7 @@ function debounce(func, wait) {
  *
  * @param theme - Theme
  */ function _controlEventemitter(theme) {
-    var _theme_controls, _theme_controls1, _theme_controls2, _theme_controls3, _theme_controls4, _theme_controls5, _theme_controls6, _theme_controls7, _theme_controls8, _theme_controls9, _theme_controls10, _theme_controls11, _theme_controls12, _theme_controls13, _theme_controls14, _theme_controls15, _theme_controls16;
+    var _theme_controls, _theme_controls1, _theme_controls2, _theme_controls3, _theme_controls4, _theme_controls5, _theme_controls6, _theme_controls7, _theme_controls8, _theme_controls9, _theme_controls10, _theme_controls11, _theme_controls12, _theme_controls13, _theme_controls14, _theme_controls15, _theme_controls16, _theme_controls17, _theme_controls18, _theme_controls19, _theme_controls20, _theme_controls21, _theme_controls22;
     // Controls
     if (theme._recFooter) {
         theme._recFooter.on(EVENTS.theme.recFooterDestroy, function() {
@@ -4405,8 +4473,50 @@ function debounce(func, wait) {
             theme.emit(EVENTS.control.aichatDestroy);
         });
     }
+    // 直播按钮
+    if ((_theme_controls7 = theme.controls) == null ? void 0 : _theme_controls7.liveControl) {
+        theme.controls.liveControl.on(EVENTS.control.liveChange, function() {
+            var _theme_controls;
+            // 直接设置回放下拉控件为非激活状态
+            if ((_theme_controls = theme.controls) == null ? void 0 : _theme_controls.recDropdownControl) {
+                theme.controls.recDropdownControl.active = false;
+            }
+            theme.emit(EVENTS.control.liveChange);
+        });
+    }
+    // 回放下拉
+    if ((_theme_controls8 = theme.controls) == null ? void 0 : _theme_controls8.recDropdownControl) {
+        theme.controls.recDropdownControl.on(EVENTS.control.recDropdownChange, function(type) {
+            var _theme_controls;
+            // 直接设置直播控件为非激活状态
+            if ((_theme_controls = theme.controls) == null ? void 0 : _theme_controls.liveControl) {
+                theme.controls.liveControl.active = false;
+            }
+            theme.emit(EVENTS.control.recDropdownChange, type);
+        });
+    }
+    // 告警消息
+    if ((_theme_controls9 = theme.controls) == null ? void 0 : _theme_controls9.alarmMessageControl) {
+        theme.controls.alarmMessageControl.on(EVENTS.control.alarmMessageChange, function(active) {
+            theme.emit(EVENTS.control.alarmMessageChange, active);
+        });
+    }
+    // 播放地址切换后同步 Live/RecDropdown 激活状态
+    // changePlayUrl 后 urlInfo 已更新，firstFrameDisplay 表示新地址播放成功
+    if (((_theme_controls10 = theme.controls) == null ? void 0 : _theme_controls10.liveControl) || ((_theme_controls11 = theme.controls) == null ? void 0 : _theme_controls11.recDropdownControl)) {
+        theme.on(EVENTS.firstFrameDisplay, function() {
+            var _theme_controls, _theme_controls1;
+            var urlInfo = theme.urlInfo;
+            if ((_theme_controls = theme.controls) == null ? void 0 : _theme_controls.liveControl) {
+                theme.controls.liveControl._syncActiveByUrlInfo(urlInfo);
+            }
+            if ((_theme_controls1 = theme.controls) == null ? void 0 : _theme_controls1.recDropdownControl) {
+                theme.controls.recDropdownControl._syncActiveByUrlInfo(urlInfo);
+            }
+        });
+    }
     // 缩放控件
-    if ((_theme_controls7 = theme.controls) == null ? void 0 : _theme_controls7.zoomControl) {
+    if ((_theme_controls12 = theme.controls) == null ? void 0 : _theme_controls12.zoomControl) {
         theme.controls.zoomControl.on(EVENTS.control.zoomChange, function(value, _percent, _range) {
             if (theme.zoom !== value) {
                 theme.zoom = value;
@@ -4428,7 +4538,7 @@ function debounce(func, wait) {
         });
     }
     // 清晰度控件
-    if ((_theme_controls8 = theme.controls) == null ? void 0 : _theme_controls8.definitionControl) {
+    if ((_theme_controls13 = theme.controls) == null ? void 0 : _theme_controls13.definitionControl) {
         theme.controls.definitionControl.on(EVENTS.control.definitionPanelOpenChange, function(open, definition, item) {
             theme.emit(CLEAR_TIMER_HEADER_FOOTER_ANIMATION, open, definition);
             theme.emit(EVENTS.control.definitionPanelOpenChange, open, definition, item);
@@ -4441,7 +4551,7 @@ function debounce(func, wait) {
         });
     }
     // 倍速控件
-    if ((_theme_controls9 = theme.controls) == null ? void 0 : _theme_controls9.speedControl) {
+    if ((_theme_controls14 = theme.controls) == null ? void 0 : _theme_controls14.speedControl) {
         theme.controls.speedControl.on(EVENTS.control.speedPanelOpenChange, function(open, speed, item) {
             theme.emit(CLEAR_TIMER_HEADER_FOOTER_ANIMATION, open, speed);
             theme.emit(EVENTS.control.speedPanelOpenChange, open, speed, item);
@@ -4454,7 +4564,7 @@ function debounce(func, wait) {
         });
     }
     // 截图控件
-    if ((_theme_controls10 = theme.controls) == null ? void 0 : _theme_controls10.capturePictureControl) {
+    if ((_theme_controls15 = theme.controls) == null ? void 0 : _theme_controls15.capturePictureControl) {
         theme.controls.capturePictureControl.on(EVENTS.control.capturePicture, function(options) {
             theme.emit(EVENTS.control.capturePicture, options);
         });
@@ -4463,25 +4573,25 @@ function debounce(func, wait) {
         });
     }
     // 全屏控件
-    if ((_theme_controls11 = theme.controls) == null ? void 0 : _theme_controls11.fullscreenControl) {
+    if ((_theme_controls16 = theme.controls) == null ? void 0 : _theme_controls16.fullscreenControl) {
         theme.controls.fullscreenControl.on(EVENTS.control.fullscreenDestroy, function() {
             theme.emit(EVENTS.control.fullscreenDestroy);
         });
     }
     // 全局全屏控件
-    if ((_theme_controls12 = theme.controls) == null ? void 0 : _theme_controls12.globalFullscreenControl) {
+    if ((_theme_controls17 = theme.controls) == null ? void 0 : _theme_controls17.globalFullscreenControl) {
         theme.controls.globalFullscreenControl.on(EVENTS.control.globalFullscreenDestroy, function() {
             theme.emit(EVENTS.control.globalFullscreenDestroy);
         });
     }
     // 设备信息控件
-    if ((_theme_controls13 = theme.controls) == null ? void 0 : _theme_controls13.deviceControl) {
+    if ((_theme_controls18 = theme.controls) == null ? void 0 : _theme_controls18.deviceControl) {
         theme.controls.deviceControl.on(EVENTS.control.deviceDestroy, function() {
             theme.emit(EVENTS.control.deviceDestroy);
         });
     }
     // 回放类型切换控件
-    if ((_theme_controls14 = theme.controls) == null ? void 0 : _theme_controls14.recControl) {
+    if ((_theme_controls19 = theme.controls) == null ? void 0 : _theme_controls19.recControl) {
         // prettier-ignore
         theme.controls.recControl.on(EVENTS.control.recTypeChange, function(type) {
             if (theme.recType !== type) {
@@ -4502,15 +4612,19 @@ function debounce(func, wait) {
         });
     }
     // 时间轴控件
-    if ((_theme_controls15 = theme.controls) == null ? void 0 : _theme_controls15.timeLineControl) {
+    if ((_theme_controls20 = theme.controls) == null ? void 0 : _theme_controls20.timeLineControl) {
         theme.controls.timeLineControl.on(EVENTS.control.timeLineChange, function(date) {
             theme.emit(EVENTS.control.timeLineChange, date);
         });
         theme.controls.timeLineControl.on(EVENTS.control.timeLinePanelOpenChange, function(open) {
-            var _theme_controls_dateControl, _theme_controls;
+            var _theme_controls_dateControl, _theme_controls, _theme_controls_timeControl, _theme_controls1;
             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_datePicker, _theme_controls_dateControl1, _theme_controls2;
+                (_theme_controls2 = theme.controls) == null ? void 0 : (_theme_controls_dateControl1 = _theme_controls2.dateControl) == null ? void 0 : (_theme_controls_dateControl_datePicker = _theme_controls_dateControl1.datePicker) == null ? void 0 : _theme_controls_dateControl_datePicker.hide();
+            }
+            if ((_theme_controls1 = theme.controls) == null ? void 0 : (_theme_controls_timeControl = _theme_controls1.timeControl) == null ? void 0 : _theme_controls_timeControl.timePicker) {
+                var _theme_controls_timeControl_timePicker, _theme_controls_timeControl1, _theme_controls3;
+                (_theme_controls3 = theme.controls) == null ? void 0 : (_theme_controls_timeControl1 = _theme_controls3.timeControl) == null ? void 0 : (_theme_controls_timeControl_timePicker = _theme_controls_timeControl1.timePicker) == null ? void 0 : _theme_controls_timeControl_timePicker.hide();
             }
             theme.emit(EVENTS.control.timeLinePanelOpenChange, open);
         });
@@ -4519,7 +4633,7 @@ function debounce(func, wait) {
         });
     }
     // 日历控件
-    if ((_theme_controls16 = theme.controls) == null ? void 0 : _theme_controls16.dateControl) {
+    if ((_theme_controls21 = theme.controls) == null ? void 0 : _theme_controls21.dateControl) {
         theme.controls.dateControl.on(EVENTS.control.datePanelOpenChange, function(open, date) {
             theme.emit(EVENTS.control.datePanelOpenChange, open, date);
         });
@@ -4530,6 +4644,15 @@ function debounce(func, wait) {
             theme.emit(EVENTS.control.recDestroy);
         });
     }
+    // 时间控件
+    if ((_theme_controls22 = theme.controls) == null ? void 0 : _theme_controls22.timeControl) {
+        theme.controls.timeControl.on(EVENTS.control.timePanelOpenChange, function(open, time) {
+            theme.emit(EVENTS.control.timePanelOpenChange, open, time);
+        });
+        theme.controls.timeControl.on(EVENTS.control.timeChange, function(time) {
+            theme.emit(EVENTS.control.timeChange, time);
+        });
+    }
 }
 var ignoreList = [
     EVENTS.getOSDTime,
@@ -4614,8 +4737,8 @@ function _create_class$5(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties$5(Constructor.prototype, protoProps);
     return Constructor;
 }
-function _extends$k() {
-    _extends$k = Object.assign || function(target) {
+function _extends$o() {
+    _extends$o = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -4626,9 +4749,9 @@ function _extends$k() {
         }
         return target;
     };
-    return _extends$k.apply(this, arguments);
+    return _extends$o.apply(this, arguments);
 }
-function _inherits$j(subClass, superClass) {
+function _inherits$n(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -4639,14 +4762,14 @@ function _inherits$j(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$j(subClass, superClass);
+    if (superClass) _set_prototype_of$n(subClass, superClass);
 }
-function _set_prototype_of$j(o, p) {
-    _set_prototype_of$j = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$n(o, p) {
+    _set_prototype_of$n = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$j(o, p);
+    return _set_prototype_of$n(o, p);
 }
 var ZOOM_DEFAULT_OPTIONS = {
     open: false,
@@ -4656,10 +4779,10 @@ var ZOOM_DEFAULT_OPTIONS = {
  * 电子放大控件
  * @category Control
  */ var Zoom = /*#__PURE__*/ function(Control) {
-    _inherits$j(Zoom, Control);
+    _inherits$n(Zoom, Control);
     function Zoom(options) {
         var _this;
-        _this = Control.call(this, _extends$k({}, options, {
+        _this = Control.call(this, _extends$o({}, options, {
             tagName: 'span',
             controlType: 'button',
             classNameSuffix: 'zoom'
@@ -4787,8 +4910,8 @@ var ZOOM_DEFAULT_OPTIONS = {
     return Zoom;
 }(Control);
 
-function _extends$j() {
-    _extends$j = Object.assign || function(target) {
+function _extends$n() {
+    _extends$n = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -4799,10 +4922,10 @@ function _extends$j() {
         }
         return target;
     };
-    return _extends$j.apply(this, arguments);
+    return _extends$n.apply(this, arguments);
 }
 function __zoom(theme, container, options) {
-    theme.zoomUtil = new Zoom$1(container, _extends$j({}, options || {}, {
+    theme.zoomUtil = new Zoom$1(container, _extends$n({}, options || {}, {
         min: 1,
         onChange: function(zoom, reset) {
             if (zoom !== theme._zoom) {
@@ -5027,8 +5150,8 @@ function _async_to_generator$5(fn) {
         });
     };
 }
-function _extends$i() {
-    _extends$i = Object.assign || function(target) {
+function _extends$m() {
+    _extends$m = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -5039,7 +5162,7 @@ function _extends$i() {
         }
         return target;
     };
-    return _extends$i.apply(this, arguments);
+    return _extends$m.apply(this, arguments);
 }
 function _ts_generator$5(thisArg, body) {
     var f, y, t, _ = {
@@ -5167,7 +5290,7 @@ function _ts_generator$5(thisArg, body) {
         }
         if (item.isrender !== 0 && REC_GROUP.includes(item.iconId)) {
             // TODO: 因为回放是一组， 位置以第一个位置为准
-            recControls.push(recControls[0] ? _extends$i({}, item, {
+            recControls.push(recControls[0] ? _extends$m({}, item, {
                 part: recControls[0].part
             }) : item);
             return false;
@@ -5190,7 +5313,7 @@ function _ts_generator$5(thisArg, body) {
         }
         if (item.isrender !== 0 && REC_GROUP.includes(item.iconId)) {
             // TODO: 因为回放是一组， 位置以第一个位置为准
-            recControls.push(recControls[0] ? _extends$i({}, item, {
+            recControls.push(recControls[0] ? _extends$m({}, item, {
                 part: recControls[0].part
             }) : item);
             return false;
@@ -5441,8 +5564,8 @@ function rgbOrHexToRgbaWithOpacity(color, opacity) {
     return Component;
 }();
 
-function _extends$h() {
-    _extends$h = Object.assign || function(target) {
+function _extends$l() {
+    _extends$l = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -5453,9 +5576,9 @@ function _extends$h() {
         }
         return target;
     };
-    return _extends$h.apply(this, arguments);
+    return _extends$l.apply(this, arguments);
 }
-function _inherits$i(subClass, superClass) {
+function _inherits$m(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -5466,28 +5589,28 @@ function _inherits$i(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$i(subClass, superClass);
+    if (superClass) _set_prototype_of$m(subClass, superClass);
 }
-function _set_prototype_of$i(o, p) {
-    _set_prototype_of$i = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$m(o, p) {
+    _set_prototype_of$m = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$i(o, p);
+    return _set_prototype_of$m(o, p);
 }
 var Footer = /*#__PURE__*/ function(Component) {
-    _inherits$i(Footer, Component);
+    _inherits$m(Footer, Component);
     function Footer(options) {
         if (options === void 0) options = {};
-        return Component.call(this, _extends$h({}, options, {
+        return Component.call(this, _extends$l({}, options, {
             cType: 'footer'
         })) || this;
     }
     return Footer;
 }(Component);
 
-function _extends$g() {
-    _extends$g = Object.assign || function(target) {
+function _extends$k() {
+    _extends$k = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -5498,9 +5621,9 @@ function _extends$g() {
         }
         return target;
     };
-    return _extends$g.apply(this, arguments);
+    return _extends$k.apply(this, arguments);
 }
-function _inherits$h(subClass, superClass) {
+function _inherits$l(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -5511,20 +5634,20 @@ function _inherits$h(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$h(subClass, superClass);
+    if (superClass) _set_prototype_of$l(subClass, superClass);
 }
-function _set_prototype_of$h(o, p) {
-    _set_prototype_of$h = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$l(o, p) {
+    _set_prototype_of$l = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$h(o, p);
+    return _set_prototype_of$l(o, p);
 }
 var Header = /*#__PURE__*/ function(Component) {
-    _inherits$h(Header, Component);
+    _inherits$l(Header, Component);
     function Header(options) {
         if (options === void 0) options = {};
-        return Component.call(this, _extends$g({}, options, {
+        return Component.call(this, _extends$k({}, options, {
             cType: 'header'
         })) || this;
     }
@@ -5690,8 +5813,8 @@ function interactiveHF($container, second, callback) {
     };
 }
 
-function _extends$f() {
-    _extends$f = Object.assign || function(target) {
+function _extends$j() {
+    _extends$j = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -5702,9 +5825,9 @@ function _extends$f() {
         }
         return target;
     };
-    return _extends$f.apply(this, arguments);
+    return _extends$j.apply(this, arguments);
 }
-function _inherits$g(subClass, superClass) {
+function _inherits$k(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -5715,23 +5838,23 @@ function _inherits$g(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$g(subClass, superClass);
+    if (superClass) _set_prototype_of$k(subClass, superClass);
 }
-function _set_prototype_of$g(o, p) {
-    _set_prototype_of$g = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$k(o, p) {
+    _set_prototype_of$k = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$g(o, p);
+    return _set_prototype_of$k(o, p);
 }
 /**
  * 全局全屏
  * 主题和播放器不提供全局全屏的api， 如果开发者想要可以参考这个组件自己实现
  * @category Control
  */ var GlobalFullscreen = /*#__PURE__*/ function(Fullscreen) {
-    _inherits$g(GlobalFullscreen, Fullscreen);
+    _inherits$k(GlobalFullscreen, Fullscreen);
     function GlobalFullscreen(options) {
-        return Fullscreen.call(this, _extends$f({}, options, {
+        return Fullscreen.call(this, _extends$j({}, options, {
             controlType: 'button',
             classNameSuffix: 'global-fullscreen'
         })) || this;
@@ -5762,8 +5885,8 @@ function _set_prototype_of$g(o, p) {
     return GlobalFullscreen;
 }(Fullscreen);
 
-function _extends$e() {
-    _extends$e = Object.assign || function(target) {
+function _extends$i() {
+    _extends$i = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -5774,9 +5897,9 @@ function _extends$e() {
         }
         return target;
     };
-    return _extends$e.apply(this, arguments);
+    return _extends$i.apply(this, arguments);
 }
-function _inherits$f(subClass, superClass) {
+function _inherits$j(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -5787,23 +5910,23 @@ function _inherits$f(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$f(subClass, superClass);
+    if (superClass) _set_prototype_of$j(subClass, superClass);
 }
-function _set_prototype_of$f(o, p) {
-    _set_prototype_of$f = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$j(o, p) {
+    _set_prototype_of$j = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$f(o, p);
+    return _set_prototype_of$j(o, p);
 }
 /**
  * 截图控件，点击后会触发截图事件， 截图数据会通过 onCapture 回调函数返回
  * @category Control
  */ var CapturePicture = /*#__PURE__*/ function(Control) {
-    _inherits$f(CapturePicture, Control);
+    _inherits$j(CapturePicture, Control);
     function CapturePicture(options) {
         var _this;
-        _this = Control.call(this, _extends$e({}, options, {
+        _this = Control.call(this, _extends$i({}, options, {
             tagName: 'span',
             classNameSuffix: 'capture-picture'
         })) || this, _this._timer = null;
@@ -5869,8 +5992,8 @@ function _create_class$4(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties$4(Constructor.prototype, protoProps);
     return Constructor;
 }
-function _extends$d() {
-    _extends$d = Object.assign || function(target) {
+function _extends$h() {
+    _extends$h = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -5881,9 +6004,9 @@ function _extends$d() {
         }
         return target;
     };
-    return _extends$d.apply(this, arguments);
+    return _extends$h.apply(this, arguments);
 }
-function _inherits$e(subClass, superClass) {
+function _inherits$i(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -5894,23 +6017,23 @@ function _inherits$e(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$e(subClass, superClass);
+    if (superClass) _set_prototype_of$i(subClass, superClass);
 }
-function _set_prototype_of$e(o, p) {
-    _set_prototype_of$e = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$i(o, p) {
+    _set_prototype_of$i = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$e(o, p);
+    return _set_prototype_of$i(o, p);
 }
 /**
  * 云台控件
  * @category Control
  */ var Ptz = /*#__PURE__*/ function(Control) {
-    _inherits$e(Ptz, Control);
+    _inherits$i(Ptz, Control);
     function Ptz(options) {
         var _this;
-        _this = Control.call(this, _extends$d({}, options, {
+        _this = Control.call(this, _extends$h({}, options, {
             tagName: 'span',
             controlType: 'button',
             classNameSuffix: 'ptz'
@@ -5953,7 +6076,7 @@ function _set_prototype_of$e(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 Ptz$1(this.$turntable, _extends$d({}, this._options, {
+            this._ptzControl = new Ptz$1(this.$turntable, _extends$h({}, this._options, {
                 onSpeedChange: this._onSpeedChange.bind(this),
                 onDirection: this._onDirection.bind(this)
             }));
@@ -5962,7 +6085,7 @@ function _set_prototype_of$e(o, p) {
     };
     _proto.renderMobileExtend = function renderMobileExtend($container) {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        if (!this._ptzControl1) this._ptzControl1 = new MobilePtz($container, _extends$d({}, this._options, {
+        if (!this._ptzControl1) this._ptzControl1 = new MobilePtz($container, _extends$h({}, this._options, {
             onSpeedChange: this._onSpeedChange.bind(this),
             onDirection: this._onDirection.bind(this)
         }));
@@ -6065,8 +6188,8 @@ function _create_class$3(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties$3(Constructor.prototype, protoProps);
     return Constructor;
 }
-function _extends$c() {
-    _extends$c = Object.assign || function(target) {
+function _extends$g() {
+    _extends$g = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -6077,9 +6200,9 @@ function _extends$c() {
         }
         return target;
     };
-    return _extends$c.apply(this, arguments);
+    return _extends$g.apply(this, arguments);
 }
-function _inherits$d(subClass, superClass) {
+function _inherits$h(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -6090,14 +6213,14 @@ function _inherits$d(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$d(subClass, superClass);
+    if (superClass) _set_prototype_of$h(subClass, superClass);
 }
-function _set_prototype_of$d(o, p) {
-    _set_prototype_of$d = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$h(o, p) {
+    _set_prototype_of$h = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$d(o, p);
+    return _set_prototype_of$h(o, p);
 }
 var RECORD_DEFAULT_OPTIONS = {
     maxDuration: 3600
@@ -6111,10 +6234,10 @@ var RECORD_DEFAULT_OPTIONS = {
  *  2. 录制时间很短可能会因为浏览器的限制或没有I帧而无法生成有效的视频文件
  * @category Control
  */ var Record = /*#__PURE__*/ function(Control) {
-    _inherits$d(Record, Control);
+    _inherits$h(Record, Control);
     function Record(options) {
         var _this;
-        _this = Control.call(this, _extends$c({}, options, {
+        _this = Control.call(this, _extends$g({}, options, {
             tagName: 'span',
             controlType: 'button',
             classNameSuffix: 'record'
@@ -6255,8 +6378,8 @@ function _create_class$2(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties$2(Constructor.prototype, protoProps);
     return Constructor;
 }
-function _extends$b() {
-    _extends$b = Object.assign || function(target) {
+function _extends$f() {
+    _extends$f = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -6267,9 +6390,9 @@ function _extends$b() {
         }
         return target;
     };
-    return _extends$b.apply(this, arguments);
+    return _extends$f.apply(this, arguments);
 }
-function _inherits$c(subClass, superClass) {
+function _inherits$g(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -6280,14 +6403,14 @@ function _inherits$c(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$c(subClass, superClass);
+    if (superClass) _set_prototype_of$g(subClass, superClass);
 }
-function _set_prototype_of$c(o, p) {
-    _set_prototype_of$c = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$g(o, p) {
+    _set_prototype_of$g = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$c(o, p);
+    return _set_prototype_of$g(o, p);
 }
 function _ts_generator$4(thisArg, body) {
     var f, y, t, _ = {
@@ -6389,10 +6512,10 @@ function _ts_generator$4(thisArg, body) {
  *
  * @category Control
  */ var Talk = /*#__PURE__*/ function(Control) {
-    _inherits$c(Talk, Control);
+    _inherits$g(Talk, Control);
     function Talk(options) {
         var _this;
-        _this = Control.call(this, _extends$b({}, options, {
+        _this = Control.call(this, _extends$f({}, options, {
             tagName: 'span',
             controlType: 'button',
             classNameSuffix: 'talk'
@@ -6525,8 +6648,8 @@ function _async_to_generator$3(fn) {
         });
     };
 }
-function _extends$a() {
-    _extends$a = Object.assign || function(target) {
+function _extends$e() {
+    _extends$e = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -6537,9 +6660,9 @@ function _extends$a() {
         }
         return target;
     };
-    return _extends$a.apply(this, arguments);
+    return _extends$e.apply(this, arguments);
 }
-function _inherits$b(subClass, superClass) {
+function _inherits$f(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -6550,14 +6673,14 @@ function _inherits$b(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$b(subClass, superClass);
+    if (superClass) _set_prototype_of$f(subClass, superClass);
 }
-function _set_prototype_of$b(o, p) {
-    _set_prototype_of$b = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$f(o, p) {
+    _set_prototype_of$f = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$b(o, p);
+    return _set_prototype_of$f(o, p);
 }
 function _ts_generator$3(thisArg, body) {
     var f, y, t, _ = {
@@ -6657,10 +6780,10 @@ function _ts_generator$3(thisArg, body) {
  *
  * @category Control
  */ var Broadcast = /*#__PURE__*/ function(Control) {
-    _inherits$b(Broadcast, Control);
+    _inherits$f(Broadcast, Control);
     function Broadcast(options) {
         var _this;
-        _this = Control.call(this, _extends$a({}, options, {
+        _this = Control.call(this, _extends$e({}, options, {
             tagName: 'span',
             controlType: 'button',
             classNameSuffix: 'broadcast'
@@ -6755,8 +6878,8 @@ function _async_to_generator$2(fn) {
         });
     };
 }
-function _extends$9() {
-    _extends$9 = Object.assign || function(target) {
+function _extends$d() {
+    _extends$d = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -6767,9 +6890,9 @@ function _extends$9() {
         }
         return target;
     };
-    return _extends$9.apply(this, arguments);
+    return _extends$d.apply(this, arguments);
 }
-function _inherits$a(subClass, superClass) {
+function _inherits$e(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -6780,14 +6903,14 @@ function _inherits$a(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$a(subClass, superClass);
+    if (superClass) _set_prototype_of$e(subClass, superClass);
 }
-function _set_prototype_of$a(o, p) {
-    _set_prototype_of$a = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$e(o, p) {
+    _set_prototype_of$e = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$a(o, p);
+    return _set_prototype_of$e(o, p);
 }
 function _ts_generator$2(thisArg, body) {
     var f, y, t, _ = {
@@ -6887,10 +7010,10 @@ function _ts_generator$2(thisArg, body) {
  *
  * @category Control
  */ var AIChat = /*#__PURE__*/ function(Control) {
-    _inherits$a(AIChat, Control);
+    _inherits$e(AIChat, Control);
     function AIChat(options) {
         var _this;
-        _this = Control.call(this, _extends$9({}, options, {
+        _this = Control.call(this, _extends$d({}, options, {
             tagName: 'span',
             controlType: 'button',
             classNameSuffix: 'aichat'
@@ -6956,6 +7079,348 @@ function _ts_generator$2(thisArg, body) {
     return AIChat;
 }(Control);
 
+function _extends$c() {
+    _extends$c = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends$c.apply(this, arguments);
+}
+function _inherits$d(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of$d(subClass, superClass);
+}
+function _set_prototype_of$d(o, p) {
+    _set_prototype_of$d = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of$d(o, p);
+}
+/**
+ * 直播按钮控件
+ *
+ * 点击切换到直播模式
+ *
+ * @category Control
+ */ var Live = /*#__PURE__*/ function(Control) {
+    _inherits$d(Live, Control);
+    function Live(options) {
+        var _this;
+        var _this___options_props1;
+        _this = Control.call(this, _extends$c({}, options, {
+            tagName: 'span',
+            controlType: 'button',
+            classNameSuffix: 'live'
+        })) || this;
+        _this._options = options;
+        _this._render();
+        // H5 端不展示直播/回放切换按钮
+        if (Utils.isMobile) {
+            _this.$container.style.display = 'none';
+        }
+        // 初始化时根据当前播放模式确定激活状态
+        _this._syncActiveByUrlInfo((_this___options_props1 = _this.__options.props) == null ? void 0 : _this___options_props1.urlInfo);
+        return _this;
+    }
+    var _proto = Live.prototype;
+    /**
+   * 根据 urlInfo 同步激活状态
+   * 在初始化和播放地址切换后调用
+   */ _proto._syncActiveByUrlInfo = function _syncActiveByUrlInfo(urlInfo) {
+        var shouldBeActive = !!(urlInfo && urlInfo.type === 'live');
+        this.active = shouldBeActive;
+    };
+    _proto._render = function _render() {
+        var _this_locale;
+        this.$container.innerHTML = IconComponents.live({
+            title: ((_this_locale = this.locale) == null ? void 0 : _this_locale.BTN_LIVE) || '直播'
+        });
+    };
+    /**
+   * 销毁
+   */ _proto.destroy = function destroy() {
+        Control.prototype.destroy.call(this);
+    };
+    /**
+   * 点击 Control 会触发
+   */ _proto._onControlClick = function _onControlClick(e) {
+        var _this__options_onChange, _this__options;
+        Control.prototype._onControlClick.call(this, e);
+        // 已经是直播模式则不触发
+        if (this.active) {
+            return;
+        }
+        this.active = true;
+        this.emit(EVENTS.control.liveChange);
+        (_this__options = this._options) == null ? void 0 : (_this__options_onChange = _this__options.onChange) == null ? void 0 : _this__options_onChange.call(_this__options);
+    };
+    return Live;
+}(Control);
+
+function _extends$b() {
+    _extends$b = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends$b.apply(this, arguments);
+}
+function _inherits$c(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of$c(subClass, superClass);
+}
+function _set_prototype_of$c(o, p) {
+    _set_prototype_of$c = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of$c(o, p);
+}
+/**
+ * 回放下拉控件
+ *
+ * 鼠标移入弹出气泡，展示云存储、云录制、本地回放三个选项
+ *
+ * @category Control
+ */ var RecDropdown = /*#__PURE__*/ function(Control) {
+    _inherits$c(RecDropdown, Control);
+    function RecDropdown(options) {
+        var _this;
+        var _options_props, _this___options_props1;
+        _this = Control.call(this, _extends$b({}, options, {
+            tagName: 'span',
+            controlType: 'button',
+            classNameSuffix: 'rec-dropdown'
+        })) || this;
+        _this._options = options;
+        // H5 端不展示直播/回放切换按钮
+        if (Utils.isMobile) {
+            _this.$container.style.display = 'none';
+        }
+        // 初始化时根据 urlInfo 确定当前回放类型和激活状态
+        _this._recType = options.recType || ((_options_props = options.props) == null ? void 0 : _options_props.recType) || 'cloudRec';
+        _this._syncActiveByUrlInfo((_this___options_props1 = _this.__options.props) == null ? void 0 : _this___options_props1.urlInfo);
+        _this._render();
+        _this._initPicker();
+        return _this;
+    }
+    var _proto = RecDropdown.prototype;
+    /**
+   * 根据 urlInfo 同步激活状态和回放类型
+   * 在初始化和播放地址切换后调用
+   */ _proto._syncActiveByUrlInfo = function _syncActiveByUrlInfo(urlInfo) {
+        if (urlInfo && urlInfo.type === 'rec') {
+            var _urlInfo_searchParams1;
+            this.active = true;
+            if (urlInfo.recType === 'cloud' && ((_urlInfo_searchParams1 = urlInfo.searchParams) == null ? void 0 : _urlInfo_searchParams1.busType) === '7') {
+                this._recType = 'cloudRecord';
+            } else if (urlInfo.recType === 'cloud') {
+                this._recType = 'cloudRec';
+            } else {
+                this._recType = 'rec';
+            }
+            this._activeOption(this._recType);
+        } else {
+            this.active = false;
+        }
+    };
+    _proto._render = function _render() {
+        var _this_locale;
+        this.$container.innerHTML = IconComponents.recDropdown({
+            title: ((_this_locale = this.locale) == null ? void 0 : _this_locale.BTN_REC_DROPDOWN) || '回放'
+        });
+    };
+    _proto._initPicker = function _initPicker() {
+        var _this = this;
+        this._picker = new Picker(this.$container, {
+            getPopupContainer: function() {
+                return Utils.isMobile ? _this.__options.rootContainer : _this.$container;
+            },
+            trigger: Utils.isMobile ? 'click' : 'hover',
+            isMobile: Utils.isMobile,
+            wrapClassName: "" + PREFIX_CLASS + "-rec-dropdown-picker",
+            placement: 'bottom',
+            offset: [
+                0,
+                4
+            ]
+        });
+        this._picker.innerHTML(this._getPanelHTML());
+        this._activeOption(this._recType);
+        this._bindPanelEvents();
+    };
+    _proto._getPanelHTML = function _getPanelHTML() {
+        var _this_locale, _this_locale1, _this_locale2;
+        var cloudRecLabel = ((_this_locale = this.locale) == null ? void 0 : _this_locale.REC_DROPDOWN_CLOUD_REC) || '云存储';
+        var cloudRecordLabel = ((_this_locale1 = this.locale) == null ? void 0 : _this_locale1.REC_DROPDOWN_CLOUD_RECORD) || '云录制';
+        var localRecLabel = ((_this_locale2 = this.locale) == null ? void 0 : _this_locale2.REC_DROPDOWN_LOCAL_REC) || '本地回放';
+        return '<div class="' + PREFIX_CLASS + '-rec-dropdown-panel">\n      <ul class="' + PREFIX_CLASS + '-rec-dropdown-list">\n        <li class="' + PREFIX_CLASS + '-rec-dropdown-item" data-type="cloudRec">\n          <span>' + cloudRecLabel + '</span>\n        </li>\n        <li class="' + PREFIX_CLASS + '-rec-dropdown-item" data-type="cloudRecord">\n          <span>' + cloudRecordLabel + '</span>\n        </li>\n        <li class="' + PREFIX_CLASS + '-rec-dropdown-item" data-type="rec">\n          <span>' + localRecLabel + "</span>\n        </li>\n      </ul>\n    </div>";
+    };
+    _proto._bindPanelEvents = function _bindPanelEvents() {
+        var _this = this;
+        this._delegation = delegate(this._picker.$body, "." + PREFIX_CLASS + "-rec-dropdown-item", 'click', function(e) {
+            e.stopPropagation();
+            var type = e.delegateTarget.getAttribute('data-type');
+            if (type) {
+                var _this__options_onChange, _this__options;
+                _this._recType = type;
+                _this._activeOption(type);
+                // 设置自身为激活状态
+                _this.active = true;
+                _this.emit(EVENTS.control.recDropdownChange, type);
+                (_this__options = _this._options) == null ? void 0 : (_this__options_onChange = _this__options.onChange) == null ? void 0 : _this__options_onChange.call(_this__options, type);
+                _this._picker.open = false;
+            }
+        });
+    };
+    _proto._activeOption = function _activeOption(type) {
+        var _this__picker;
+        if ((_this__picker = this._picker) == null ? void 0 : _this__picker.$body) {
+            var items = this._picker.$body.querySelectorAll("." + PREFIX_CLASS + "-rec-dropdown-item");
+            items.forEach(function(item) {
+                item.classList.remove("" + PREFIX_CLASS + "-active");
+            });
+            var target = this._picker.$body.querySelector("." + PREFIX_CLASS + '-rec-dropdown-item[data-type="' + type + '"]');
+            target == null ? void 0 : target.classList.add("" + PREFIX_CLASS + "-active");
+        }
+    };
+    /**
+   * 销毁
+   */ _proto.destroy = function destroy() {
+        var _this__delegation_destroy, _this__delegation;
+        (_this__delegation = this._delegation) == null ? void 0 : (_this__delegation_destroy = _this__delegation.destroy) == null ? void 0 : _this__delegation_destroy.call(_this__delegation);
+        this._delegation = null;
+        if (this._picker) {
+            this._picker.destroy();
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this._picker = null;
+        }
+        Control.prototype.destroy.call(this);
+    };
+    /**
+   * 点击 Control 会触发（移动端 click 触发 picker）
+   */ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _proto._onControlClick = function _onControlClick(_e) {
+    // picker 自行处理 click/hover，这里不额外处理
+    };
+    return RecDropdown;
+}(Control);
+
+function _extends$a() {
+    _extends$a = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends$a.apply(this, arguments);
+}
+function _inherits$b(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of$b(subClass, superClass);
+}
+function _set_prototype_of$b(o, p) {
+    _set_prototype_of$b = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of$b(o, p);
+}
+/**
+ * 告警消息按钮控件
+ *
+ * 点击弹出告警消息列表弹窗（纯触发按钮，无激活状态）
+ *
+ * @category Control
+ */ var AlarmMessage = /*#__PURE__*/ function(Control) {
+    _inherits$b(AlarmMessage, Control);
+    function AlarmMessage(options) {
+        var _this;
+        _this = Control.call(this, _extends$a({}, options, {
+            tagName: 'span',
+            controlType: 'button',
+            classNameSuffix: 'alarm-message'
+        })) || this, _this._panelOpen = false;
+        _this._options = options;
+        _this._render();
+        _this.on(EVENTS.alarmMessageChange, function(open) {
+            _this._panelOpen = open;
+        });
+        return _this;
+    }
+    var _proto = AlarmMessage.prototype;
+    _proto._render = function _render() {
+        var _this_locale;
+        this.$container.innerHTML = IconComponents.alarmMessage({
+            title: ((_this_locale = this.locale) == null ? void 0 : _this_locale.BTN_ALARM_MESSAGE) || '消息'
+        });
+    };
+    /**
+   * 销毁
+   */ _proto.destroy = function destroy() {
+        if (this._panelOpen) {
+            this.emit(EVENTS.control.alarmMessageChange, false);
+        }
+        Control.prototype.destroy.call(this);
+    };
+    /**
+   * 点击 Control 会触发
+   */ _proto._onControlClick = function _onControlClick(e) {
+        var _this__options_onChange, _this__options;
+        Control.prototype._onControlClick.call(this, e);
+        this._panelOpen = !this._panelOpen;
+        this.emit(EVENTS.control.alarmMessageChange, this._panelOpen);
+        (_this__options = this._options) == null ? void 0 : (_this__options_onChange = _this__options.onChange) == null ? void 0 : _this__options_onChange.call(_this__options, this._panelOpen);
+    };
+    return AlarmMessage;
+}(Control);
+
 function _defineProperties$1(target, props) {
     for(var i = 0; i < props.length; i++){
         var descriptor = props[i];
@@ -6969,8 +7434,8 @@ function _create_class$1(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties$1(Constructor.prototype, protoProps);
     return Constructor;
 }
-function _extends$8() {
-    _extends$8 = Object.assign || function(target) {
+function _extends$9() {
+    _extends$9 = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -6981,9 +7446,9 @@ function _extends$8() {
         }
         return target;
     };
-    return _extends$8.apply(this, arguments);
+    return _extends$9.apply(this, arguments);
 }
-function _inherits$9(subClass, superClass) {
+function _inherits$a(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -6994,14 +7459,14 @@ function _inherits$9(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$9(subClass, superClass);
+    if (superClass) _set_prototype_of$a(subClass, superClass);
 }
-function _set_prototype_of$9(o, p) {
-    _set_prototype_of$9 = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$a(o, p) {
+    _set_prototype_of$a = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$9(o, p);
+    return _set_prototype_of$a(o, p);
 }
 var SELECT_DEFAULT_OPTIONS = {
     fieldNames: {
@@ -7063,11 +7528,11 @@ var SELECT_DEFAULT_OPTIONS = {
  * }
  * ```
  */ var Select = /*#__PURE__*/ function(Control) {
-    _inherits$9(Select, Control);
+    _inherits$a(Select, Control);
     function Select(options) {
         var _this;
         var _this__options_fieldNames, _this__picker_$body;
-        _this = Control.call(this, _extends$8({
+        _this = Control.call(this, _extends$9({
             tagName: 'span',
             type: 'button',
             controlType: 'button'
@@ -7265,8 +7730,8 @@ function _assert_this_initialized$1(self) {
     }
     return self;
 }
-function _extends$7() {
-    _extends$7 = Object.assign || function(target) {
+function _extends$8() {
+    _extends$8 = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -7277,9 +7742,9 @@ function _extends$7() {
         }
         return target;
     };
-    return _extends$7.apply(this, arguments);
+    return _extends$8.apply(this, arguments);
 }
-function _inherits$8(subClass, superClass) {
+function _inherits$9(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -7290,14 +7755,14 @@ function _inherits$8(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$8(subClass, superClass);
+    if (superClass) _set_prototype_of$9(subClass, superClass);
 }
-function _set_prototype_of$8(o, p) {
-    _set_prototype_of$8 = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$9(o, p) {
+    _set_prototype_of$9 = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$8(o, p);
+    return _set_prototype_of$9(o, p);
 }
 function _type_of(obj) {
     "@swc/helpers - typeof";
@@ -7347,12 +7812,12 @@ function __filter(list, locale) {
  *
  * @category Control
  */ var Definition = /*#__PURE__*/ function(Select) {
-    _inherits$8(Definition, Select);
+    _inherits$9(Definition, Select);
     function Definition(options) {
         if (options === void 0) options = {};
         var _this;
         var _options_props, _options_props1, _options_locales_options_language;
-        _this = Select.call(this, _extends$7({}, DEFINITION_DEFAULT_OPTIONS, {
+        _this = Select.call(this, _extends$8({}, DEFINITION_DEFAULT_OPTIONS, {
             value: (_options_props = options.props) == null ? void 0 : _options_props.videoLevel
         }, options, {
             fieldNames: {
@@ -7426,8 +7891,8 @@ function _assert_this_initialized(self) {
     }
     return self;
 }
-function _extends$6() {
-    _extends$6 = Object.assign || function(target) {
+function _extends$7() {
+    _extends$7 = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -7438,9 +7903,9 @@ function _extends$6() {
         }
         return target;
     };
-    return _extends$6.apply(this, arguments);
+    return _extends$7.apply(this, arguments);
 }
-function _inherits$7(subClass, superClass) {
+function _inherits$8(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -7451,14 +7916,14 @@ function _inherits$7(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$7(subClass, superClass);
+    if (superClass) _set_prototype_of$8(subClass, superClass);
 }
-function _set_prototype_of$7(o, p) {
-    _set_prototype_of$7 = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$8(o, p) {
+    _set_prototype_of$8 = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$7(o, p);
+    return _set_prototype_of$8(o, p);
 }
 // 支持的倍速列表, 需要是 2 的指数，不能小于 0.5， 最大 16 倍
 var SUPPORT_SPEED = [
@@ -7492,11 +7957,11 @@ var SPEED_DEFAULT_OPTIONS = {
  *   2. 标准流不支持；
  * @category Control
  */ var Speed = /*#__PURE__*/ function(Select) {
-    _inherits$7(Speed, Select);
+    _inherits$8(Speed, Select);
     function Speed(options) {
         var _this;
         var _options_locales_options_language, _options_locales;
-        _this = Select.call(this, _extends$6({}, SPEED_DEFAULT_OPTIONS, options, {
+        _this = Select.call(this, _extends$7({}, SPEED_DEFAULT_OPTIONS, options, {
             value: (options.props.speed || 1) + '',
             classNameSuffix: 'speed',
             controlType: 'button',
@@ -7550,8 +8015,8 @@ var SPEED_DEFAULT_OPTIONS = {
     return Speed;
 }(Select);
 
-function _extends$5() {
-    _extends$5 = Object.assign || function(target) {
+function _extends$6() {
+    _extends$6 = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
             var source = arguments[i];
             for(var key in source){
@@ -7562,9 +8027,9 @@ function _extends$5() {
         }
         return target;
     };
-    return _extends$5.apply(this, arguments);
+    return _extends$6.apply(this, arguments);
 }
-function _inherits$6(subClass, superClass) {
+function _inherits$7(subClass, superClass) {
     if (typeof superClass !== "function" && superClass !== null) {
         throw new TypeError("Super expression must either be null or a function");
     }
@@ -7575,24 +8040,24 @@ function _inherits$6(subClass, superClass) {
             configurable: true
         }
     });
-    if (superClass) _set_prototype_of$6(subClass, superClass);
+    if (superClass) _set_prototype_of$7(subClass, superClass);
 }
-function _set_prototype_of$6(o, p) {
-    _set_prototype_of$6 = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+function _set_prototype_of$7(o, p) {
+    _set_prototype_of$7 = Object.setPrototypeOf || function setPrototypeOf(o, p) {
         o.__proto__ = p;
         return o;
     };
-    return _set_prototype_of$6(o, p);
+    return _set_prototype_of$7(o, p);
 }
 /**
  * 日历选择器控件
  * @category Control
  */ var DatePickerControl = /*#__PURE__*/ function(Control) {
-    _inherits$6(DatePickerControl, Control);
+    _inherits$7(DatePickerControl, Control);
     function DatePickerControl(options) {
         var _this;
         var _this_options_props_urlInfo_searchParams, _this_options_props_urlInfo, _this_options_props;
-        _this = Control.call(this, _extends$5({
+        _this = Control.call(this, _extends$6({
             maxDate: new Date()
         }, options, {
             tagName: 'span',
@@ -7623,11 +8088,8 @@ 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, {
+        this.datePicker = new DatePicker(this.$container, _extends$6({
             isMobile: isMobile1,
-            getPopupContainer: function() {
-                return _this.$container;
-            },
             mode: 'date',
             offset: [
                 0,
@@ -7640,6 +8102,11 @@ function _set_prototype_of$6(o, p) {
             triggerClose: true,
             disabledDate: function(date) {
                 return date.getTime() > (_this.options.maxDate || new Date()).getTime();
+            }
+        }, this.options || {}, {
+            // 不支持自定义
+            getPopupContainer: function() {
+                return _this.$container;
             },
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             onOk: function(date, _mode) {
@@ -7663,7 +8130,7 @@ function _set_prototype_of$6(o, p) {
                 _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);
             }
-        });
+        }));
     };
     /**
    * 设置日期, change = true 时触发 onChange 事件
@@ -7708,6 +8175,145 @@ function _set_prototype_of$6(o, p) {
     return DatePickerControl;
 }(Control);
 
+function _extends$5() {
+    _extends$5 = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends$5.apply(this, arguments);
+}
+function _inherits$6(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+        throw new TypeError("Super expression must either be null or a function");
+    }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+        constructor: {
+            value: subClass,
+            writable: true,
+            configurable: true
+        }
+    });
+    if (superClass) _set_prototype_of$6(subClass, superClass);
+}
+function _set_prototype_of$6(o, p) {
+    _set_prototype_of$6 = Object.setPrototypeOf || function setPrototypeOf(o, p) {
+        o.__proto__ = p;
+        return o;
+    };
+    return _set_prototype_of$6(o, p);
+}
+/** 时间格式 HH:mm:ss */ var TIME_FORMAT = 'HH:mm:ss';
+/**
+ * 时间选择器控件
+ * @category Control
+ */ var TimePickerControl = /*#__PURE__*/ function(Control) {
+    _inherits$6(TimePickerControl, Control);
+    function TimePickerControl(options) {
+        var _this;
+        var _this_options_props_urlInfo_searchParams, _this_options_props_urlInfo, _this_options_props;
+        _this = Control.call(this, _extends$5({}, options, {
+            tagName: 'span',
+            controlType: 'button',
+            classNameSuffix: 'time'
+        })) || 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) || _this.options.current || new Date(), TIME_FORMAT);
+        _this._render();
+        return _this;
+    }
+    var _proto = TimePickerControl.prototype;
+    _proto._render = function _render() {
+        var _this = this;
+        var _this_locale;
+        isMobile();
+        // if (isMobile1) {
+        //   this.$container.innerHTML = `
+        //     <span class="${PREFIX_CLASS}-mobile-date-filter" title="${(this.locale?.BTN_TIME || '') as string}">
+        //       <span class="${PREFIX_CLASS}-mobile-date-filter-value">${this._getTimeStr()}</span>
+        //       ${IconComponents.filter()}
+        //     <span>`;
+        // } else {
+        this.$container.innerHTML = IconComponents.time({
+            title: (_this_locale = this.locale) == null ? void 0 : _this_locale.BTN_TIME
+        });
+        // }
+        this.timePicker = new TimePicker(this.$container, _extends$5({
+            showHeader: false,
+            isMobile: false,
+            offset: [
+                0,
+                -10
+            ],
+            language: this.options.language === 'zh' ? 'zh' : 'en',
+            current: this._value,
+            placement: 'tr',
+            triggerClose: true
+        }, this.options || {}, {
+            // 不支持自定义
+            getPopupContainer: function() {
+                return _this.$container;
+            },
+            onChange: function(time, _times) {
+                if (time && _this._value !== time) {
+                    _this._value = time;
+                    _this.options.onChange == null ? void 0 : _this.options.onChange.call(_this.options, time, _times);
+                    _this.emit(EVENTS.control.timeChange, time);
+                }
+            },
+            onOpenChange: function(open) {
+                _this.options.onPanelChange == null ? void 0 : _this.options.onPanelChange.call(_this.options, open, _this.timePicker.current);
+                _this.emit(EVENTS.control.timePanelOpenChange, open, _this.timePicker.current);
+            }
+        }));
+    };
+    /**
+   * 设置时间
+   * @param time 设置的时间 HH:mm:ss
+   */ _proto.setTime = function setTime(time) {
+        var _this_timePicker;
+        (_this_timePicker = this.timePicker) == null ? void 0 : _this_timePicker.setCurrent(time);
+        if (time && this._value !== time) {
+            this._value = time;
+            var valueEl = this.$container.querySelector("." + PREFIX_CLASS + "-mobile-date-filter-value");
+            if (valueEl) {
+                valueEl.innerHTML = this._getTimeStr();
+            }
+        }
+    };
+    _proto.reset = function reset() {
+        if (this.timePicker) this.timePicker.open = false;
+        Control.prototype.reset.call(this);
+    };
+    /**
+   * 销毁控件
+   * @override
+   */ _proto.destroy = function destroy() {
+        if (this.timePicker) {
+            this.timePicker.destroy();
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this.timePicker = null;
+        }
+        Control.prototype.destroy.call(this);
+    };
+    _proto._getTimeStr = function _getTimeStr() {
+        return this._value;
+    };
+    /**
+   * 点击 Control 会触发
+   * @overload super._onControlClick(e: Event)
+   */ _proto._onControlClick = function _onControlClick(e) {
+        Control.prototype._onControlClick.call(this, e);
+    };
+    return TimePickerControl;
+}(Control);
+
 function _extends$4() {
     _extends$4 = Object.assign || function(target) {
         for(var i = 1; i < arguments.length; i++){
@@ -7753,9 +8359,16 @@ function _set_prototype_of$5(o, p) {
             tagName: 'div',
             controlType: 'block',
             classNameSuffix: 'time-line'
-        })) || this, _this._$add = null, _this._$reduce = null, _this._currentTime = 0, _this.records = [];
+        })) || this, _this._$add = null, _this._$reduce = null, _this._$scaleWrapper = null, _this._currentTime = 0, _this.records = [];
         _this._currentTime = 0;
-        _this._options = options;
+        _this._options = deepmerge.all([
+            {
+                showTimeWidthBtn: true
+            },
+            options
+        ], {
+            clone: false
+        });
         _this.records = ((_this__options = _this._options) == null ? void 0 : (_this__options_props = _this__options.props) == null ? void 0 : _this__options_props.recordList) || [];
         _this._render();
         _this.on(EVENTS.setAllDayRecTimes, function(records) {
@@ -7780,11 +8393,19 @@ function _set_prototype_of$5(o, p) {
         var _this = this;
         var _this_timeLineUtil_updateTimeSections, _this_timeLineUtil;
         var _this__options_showTimeWidthBtn, _this__options_showCoverFold;
-        var _timeLineOptions = {
+        var _timeLineOptions = _extends$4({
             language: this._options.language || 'zh',
             coverQuery: this._options.coverQuery || '',
             showTimeWidthBtn: (_this__options_showTimeWidthBtn = this._options.showTimeWidthBtn) != null ? _this__options_showTimeWidthBtn : true,
             showCoverFold: (_this__options_showCoverFold = this._options.showCoverFold) != null ? _this__options_showCoverFold : true,
+            hoverTipPlacement: 'top'
+        }, this._options || {}, {
+            onClickSeek: function(date) {
+                if (date == null ? void 0 : date.getTime()) {
+                    _this._options.onClickSeek == null ? void 0 : _this._options.onClickSeek.call(_this._options, date);
+                    _this.emit(EVENTS.control.timeLineChange, date);
+                }
+            },
             onChange: function(date) {
                 if (_this._currentTime !== (date == null ? void 0 : date.getTime())) {
                     _this._options.onChange == null ? void 0 : _this._options.onChange.call(_this._options, date);
@@ -7806,12 +8427,12 @@ function _set_prototype_of$5(o, p) {
                 } catch (error) {
                 }
             }
-        };
+        });
         if (isMobile()) {
             this.timeLineUtil = new MobileTimeLine(this.$container, _timeLineOptions);
         } else {
             this.timeLineUtil = new TimeLine(this.$container, _timeLineOptions);
-            this._renderAddReduce();
+            if (this._options.showTimeWidthBtn) this._renderAddReduce();
         }
         (_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (_this_timeLineUtil_updateTimeSections = _this_timeLineUtil.updateTimeSections) == null ? void 0 : _this_timeLineUtil_updateTimeSections.call(_this_timeLineUtil, this.records);
         this.timeLineUtil.update(new Date());
@@ -7822,7 +8443,7 @@ function _set_prototype_of$5(o, p) {
     _proto._renderAddReduce = function _renderAddReduce() {
         var _this = this;
         this._$add = document.createElement('span');
-        this._$add.classList.add("" + PREFIX_CLASS + "-time-line-scale-add");
+        this._$add.classList.add("" + PREFIX_CLASS + "-time-line-zoom-add");
         this._$add.innerHTML = IconComponents.add();
         this._$add.addEventListener('click', function() {
             if (_this.timeLineUtil) {
@@ -7831,7 +8452,7 @@ function _set_prototype_of$5(o, p) {
             }
         });
         this._$reduce = document.createElement('span');
-        this._$reduce.classList.add("" + PREFIX_CLASS + "-time-line-scale-sub");
+        this._$reduce.classList.add("" + PREFIX_CLASS + "-time-line-zoom-sub");
         this._$reduce.innerHTML = IconComponents.reduce();
         this._$reduce.addEventListener('click', function() {
             if (_this.timeLineUtil) {
@@ -7839,8 +8460,11 @@ function _set_prototype_of$5(o, p) {
                 _this.timeLineUtil.setTimeWidth(currentScale - 1);
             }
         });
-        this.$container.appendChild(this._$add);
-        this.$container.appendChild(this._$reduce);
+        this._$scaleWrapper = document.createElement('span');
+        this._$scaleWrapper.classList.add("" + PREFIX_CLASS + "-time-line-zoom");
+        this._$scaleWrapper.appendChild(this._$add);
+        this._$scaleWrapper.appendChild(this._$reduce);
+        this.$container.appendChild(this._$scaleWrapper);
     };
     _proto.destroy = function destroy() {
         if (this._$add) {
@@ -7851,6 +8475,10 @@ function _set_prototype_of$5(o, p) {
             this._$reduce.remove();
             this._$reduce = null;
         }
+        if (this._$scaleWrapper) {
+            this._$scaleWrapper.remove();
+            this._$scaleWrapper = null;
+        }
         if (this.timeLineUtil) {
             this.timeLineUtil.destroy();
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -7948,6 +8576,9 @@ var Controls = {
     talk: Talk,
     broadcast: Broadcast,
     aiChat: AIChat,
+    live: Live,
+    recDropdown: RecDropdown,
+    alarmMessage: AlarmMessage,
     zoom: Zoom,
     definition: Definition,
     fullscreen: Fullscreen,
@@ -7955,6 +8586,7 @@ var Controls = {
     rec: Rec,
     speed: Speed,
     date: DatePickerControl,
+    time: TimePickerControl,
     timeLine: TimeLineControl
 };
 
@@ -7990,17 +8622,25 @@ var RecFooter = /*#__PURE__*/ function(EventEmitter) {
         _this.$container = container;
         _this.$popupContainer = document.createElement('div');
         _this.$popupContainer.classList.add("" + PREFIX_CLASS + "-rec-footer");
-        if (_this.options.hasDatePicker) {
-            _this.$popupContainer.classList.add("" + PREFIX_CLASS + "-rec-footer-has-date-picker");
-        }
         _this.$container.appendChild(_this.$popupContainer);
         _this.$timeLineContainer = document.createElement('div');
         _this.$timeLineContainer.classList.add("" + PREFIX_CLASS + "-rec-footer-time-line");
-        if (_this.options.hasDatePicker) {
+        if (_this.options.hasDatePicker || _this.options.hasTimePicker) {
             _this.$popupContainer.appendChild(_this.$timeLineContainer);
+            // 右侧容器: 放置时间选择器和日期选择器
+            _this.$rightContainer = document.createElement('div');
+            _this.$rightContainer.classList.add("" + PREFIX_CLASS + "-rec-footer-right");
+            _this.$popupContainer.appendChild(_this.$rightContainer);
+        }
+        if (_this.options.hasTimePicker) {
+            _this.$timePickerContainer = document.createElement('div');
+            _this.$timePickerContainer.classList.add("" + PREFIX_CLASS + "-rec-footer-btn", "" + PREFIX_CLASS + "-rec-footer-time-picker");
+            _this.$rightContainer.appendChild(_this.$timePickerContainer);
+        }
+        if (_this.options.hasDatePicker) {
             _this.$datePickerContainer = document.createElement('div');
-            _this.$datePickerContainer.classList.add("" + PREFIX_CLASS + "-rec-footer-date-picker");
-            _this.$popupContainer.appendChild(_this.$datePickerContainer);
+            _this.$datePickerContainer.classList.add("" + PREFIX_CLASS + "-rec-footer-btn", "" + PREFIX_CLASS + "-rec-footer-date-picker");
+            _this.$rightContainer.appendChild(_this.$datePickerContainer);
         }
         _this.$popupContainer.addEventListener('dblclick', function(e) {
             e.preventDefault();
@@ -8014,6 +8654,14 @@ var RecFooter = /*#__PURE__*/ function(EventEmitter) {
             this.$datePickerContainer.remove();
             this.$datePickerContainer = null;
         }
+        if (this.$timePickerContainer) {
+            this.$timePickerContainer.remove();
+            this.$timePickerContainer = null;
+        }
+        if (this.$rightContainer) {
+            this.$rightContainer.remove();
+            this.$rightContainer = null;
+        }
         if (this.$timeLineContainer) {
             var _this_$timeLineContainer_remove, _this_$timeLineContainer;
             (_this_$timeLineContainer = this.$timeLineContainer) == null ? void 0 : (_this_$timeLineContainer_remove = _this_$timeLineContainer.remove) == null ? void 0 : _this_$timeLineContainer_remove.call(_this_$timeLineContainer);
@@ -8481,7 +9129,10 @@ function _ts_generator$1(thisArg, body) {
 // 需要权限的控件
 var AUTH_KEY = [
     'ptz',
-    'aiChat'
+    'aiChat',
+    'live',
+    'recDropdown',
+    'alarmMessage'
 ];
 /**
  * 渲染控件
@@ -8561,7 +9212,7 @@ function _renderControls(theme, $container, btnList, props) {
 }
 function _renderTheme(theme, data) {
     return _async_to_generator$1(function() {
-        var _theme_posterControl, _filterThemeData_header, _filterThemeData_footer, _theme_options_mobileExtendOptions_controls, _theme_options_mobileExtendOptions, themeData, filterThemeData, props, _$_filterLeftRightControls, leftBtns, rightBtns, _theme_controls, _theme_controls1, _$_filterLeftRightControls1, leftBtns1, rightBtns1, _filterThemeData_footer_btnList, list, _needTimeLine, hasPtz, _theme_options_mobileExtendOptions1, _theme_options_mobileExtendOptions2, _theme_options_mobileExtendOptions3, _theme_options_mobileExtendOptions_controls1, _theme_options_mobileExtendOptions4, _filterThemeData_header1, _filterThemeData_footer1, _filterThemeData_footer_btnList1;
+        var _theme_posterControl, _filterThemeData_header, _filterThemeData_footer, _theme_urlInfo, _theme_options_mobileExtendOptions_controls, _theme_options_mobileExtendOptions, themeData, filterThemeData, props, _$_filterLeftRightControls, leftBtns, rightBtns, _theme_controls, _theme_controls1, _$_filterLeftRightControls1, leftBtns1, rightBtns1, _filterThemeData_footer_btnList, list, _needTimeLine, hasPtz, _theme_options_mobileExtendOptions1, _theme_options_mobileExtendOptions2, _theme_options_mobileExtendOptions3, _theme_controls2, _theme_options_mobileExtendOptions4, _theme_options_mobileExtendOptions_controls1, _theme_options_mobileExtendOptions5, _filterThemeData_header1, _filterThemeData_footer1, _filterThemeData_footer_btnList1, _theme_options;
         return _ts_generator$1(this, function(_state) {
             switch(_state.label){
                 case 0:
@@ -8702,13 +9353,14 @@ function _renderTheme(theme, data) {
                     list = [].concat(((_filterThemeData_header = filterThemeData.header) == null ? void 0 : _filterThemeData_header.btnList) || [], (_filterThemeData_footer_btnList = (_filterThemeData_footer = filterThemeData.footer) == null ? void 0 : _filterThemeData_footer.btnList) != null ? _filterThemeData_footer_btnList : []);
                     // FIXME: 这个逻辑实际上是有问题的
                     _needTimeLine = list.some(function(item) {
-                        return REC_GROUP.includes(item.iconId);
-                    });
+                        return REC_GROUP.includes(item.iconId) || item.iconId === 'recDropdown';
+                    }) && ((_theme_urlInfo = theme.urlInfo) == null ? void 0 : _theme_urlInfo.type) === 'rec';
                     theme.$container.classList.remove("" + PREFIX_CLASS + "-has-time-line");
                     // PC 单独渲染timeLine
                     if (!Utils.isMobile && !(theme.options.timeLineOptions === null || theme.options.disabledTimeLine) && _needTimeLine) {
                         theme._recFooter = new RecFooter(theme.$container, {
-                            hasDatePicker: theme.options.dateOptions !== null
+                            hasDatePicker: theme.options.dateOptions !== null,
+                            hasTimePicker: theme.options.timeOptions !== null
                         });
                         //
                         _renderTimeLine(theme, theme._recFooter.$timeLineContainer, props);
@@ -8719,6 +9371,9 @@ function _renderTheme(theme, data) {
                         if (theme.options.dateOptions !== null) {
                             _renderDatePicker(theme, theme._recFooter.$datePickerContainer, props);
                         }
+                        if (theme.options.timeOptions !== null) {
+                            _renderTimePicker(theme, theme._recFooter.$timePickerContainer, props);
+                        }
                     }
                     // 移动端扩展
                     if (Utils.isMobile && ((_theme_options_mobileExtendOptions = theme.options.mobileExtendOptions) == null ? void 0 : (_theme_options_mobileExtendOptions_controls = _theme_options_mobileExtendOptions.controls) == null ? void 0 : _theme_options_mobileExtendOptions_controls.length)) {
@@ -8730,22 +9385,46 @@ function _renderTheme(theme, data) {
                             if (theme.options.dateOptions !== null && ((_theme_options_mobileExtendOptions1 = theme.options.mobileExtendOptions) == null ? void 0 : _theme_options_mobileExtendOptions1.controls.includes('date')) && _needTimeLine) {
                                 _renderDatePicker(theme, theme._mobileExtend.$topLeft, props);
                             }
-                            if (theme.options.recOptions !== null && ((_theme_options_mobileExtendOptions2 = theme.options.mobileExtendOptions) == null ? void 0 : _theme_options_mobileExtendOptions2.controls.includes('rec')) && _needTimeLine) {
+                            if (theme.options.timeOptions !== null && ((_theme_options_mobileExtendOptions2 = theme.options.mobileExtendOptions) == null ? void 0 : _theme_options_mobileExtendOptions2.controls.includes('time')) && _needTimeLine) {
+                                _renderTimePicker(theme, theme._mobileExtend.$topLeft, props);
+                            }
+                            if (theme.options.recOptions !== null && ((_theme_options_mobileExtendOptions3 = theme.options.mobileExtendOptions) == null ? void 0 : _theme_options_mobileExtendOptions3.controls.includes('rec')) && _needTimeLine) {
                                 [].concat(((_filterThemeData_header1 = filterThemeData.header) == null ? void 0 : _filterThemeData_header1.btnList) || [], (_filterThemeData_footer_btnList1 = (_filterThemeData_footer1 = filterThemeData.footer) == null ? void 0 : _filterThemeData_footer1.btnList) != null ? _filterThemeData_footer_btnList1 : []).forEach(function(item) {
                                     var _theme__mobileExtend;
                                     if (REC_GROUP.includes(item.iconId)) _renderRecType(theme, (_theme__mobileExtend = theme._mobileExtend) == null ? void 0 : _theme__mobileExtend.$topRight, item.iconId, props);
                                 });
                             }
-                            if ((theme.options.timeLineOptions !== null || !theme.options.disabledTimeLine) && ((_theme_options_mobileExtendOptions3 = theme.options.mobileExtendOptions) == null ? void 0 : _theme_options_mobileExtendOptions3.controls.includes('timeLine')) && _needTimeLine) {
+                            // 移动端：在 rec 控件旁渲染 alarmMessage 按钮
+                            if (theme.options.alarmMessageOptions !== null && !((_theme_controls2 = theme.controls) == null ? void 0 : _theme_controls2['alarmMessageControl'])) {
+                                // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                                theme.controls['alarmMessageControl'] = new Controls['alarmMessage'](_extends$1({
+                                    rootContainer: theme.$container,
+                                    getPopupContainer: function() {
+                                        var _theme__mobileExtend;
+                                        return (_theme__mobileExtend = theme._mobileExtend) == null ? void 0 : _theme__mobileExtend.$topRight;
+                                    },
+                                    language: theme.options.language || 'zh',
+                                    locales: theme.i18n.translations,
+                                    sdkType: theme.options.sdkType,
+                                    urlInfo: theme.urlInfo
+                                }, ((_theme_options = theme.options) == null ? void 0 : _theme_options.alarmMessageOptions) || {}, {
+                                    props: props
+                                }));
+                            }
+                            if ((theme.options.timeLineOptions !== null || !theme.options.disabledTimeLine) && ((_theme_options_mobileExtendOptions4 = theme.options.mobileExtendOptions) == null ? void 0 : _theme_options_mobileExtendOptions4.controls.includes('timeLine')) && _needTimeLine) {
                                 _renderTimeLine(theme, theme._mobileExtend.$content, props);
                             }
-                            if (Utils.isMobile && ((_theme_options_mobileExtendOptions4 = theme.options.mobileExtendOptions) == null ? void 0 : (_theme_options_mobileExtendOptions_controls1 = _theme_options_mobileExtendOptions4.controls) == null ? void 0 : _theme_options_mobileExtendOptions_controls1.includes('ptz')) && hasPtz && theme.controls.ptzControl) {
+                            if (Utils.isMobile && ((_theme_options_mobileExtendOptions5 = theme.options.mobileExtendOptions) == null ? void 0 : (_theme_options_mobileExtendOptions_controls1 = _theme_options_mobileExtendOptions5.controls) == null ? void 0 : _theme_options_mobileExtendOptions_controls1.includes('ptz')) && hasPtz && theme.controls.ptzControl) {
                                 theme.controls.ptzControl.renderMobileExtend(theme._mobileExtend.$content);
                             }
                         }
                     }
                     theme.emit(EVENTS.control.mountedControls);
                     if (!theme.playing) theme._disabled(true);
+                    // 同步 loading 状态（修复：_loadingControl 创建前设置的 loading=true 不生效的问题）
+                    if (theme._loading && theme._loadingControl) {
+                        theme._loadingControl.show();
+                    }
                     _controlEventemitter(theme);
                     return [
                         2
@@ -8787,6 +9466,22 @@ var _renderDatePicker = function(theme, container, props) {
         }));
     }
 };
+var _renderTimePicker = function(theme, container, props) {
+    if (props === void 0) props = {};
+    if (!theme.controls.timeControl && theme.options.timeOptions !== null) {
+        var _theme_options;
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        theme.controls.timeControl = new Controls['time'](_extends$1({
+            getPopupContainer: function() {
+                return container;
+            },
+            language: theme.options.language,
+            locales: theme.i18n.translations
+        }, ((_theme_options = theme.options) == null ? void 0 : _theme_options["timeOptions"]) || {}, {
+            props: props
+        }));
+    }
+};
 var _renderRecType = function(theme, container, recType, props) {
     if (props === void 0) props = {};
     var _theme_controls, _theme_controls1, _theme_controls2;
@@ -9599,7 +10294,9 @@ var THEME_DEFAULT_OPTIONS = {
                 _this._width = width;
                 _this._height = height;
                 if ((_this_controls = _this.controls) == null ? void 0 : _this_controls.timeLineControl) {
-                    _this.controls.timeLineControl.setWidth(width - 20 - DATE_PICKER_ICON_WIDTH);
+                    var _this_$container_querySelector;
+                    var rcFooterRightWidth = ((_this_$container_querySelector = _this.$container.querySelector("." + PREFIX_CLASS + "-rec-footer-right")) == null ? void 0 : _this_$container_querySelector.clientWidth) || 0;
+                    _this.controls.timeLineControl.setWidth(width - rcFooterRightWidth);
                 }
                 // header 和 footer 使用防抖去实现， 避免频繁触发，
                 _this._headerMoreControlShow();
@@ -10353,6 +11050,6 @@ var THEME_DEFAULT_OPTIONS = {
     zh: zh,
     en: en
 };
-/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '3.0.2-beta.1';
+/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '3.1.0-beta.1';
 
 export { Control, EVENTS, Fullscreen, Loading, Message, Play, Poster, Rec, Theme, Utils, Volume };