@ezuikit/player-theme 3.1.5-beta.4 → 3.1.6-beta.1

package/dist/index.esm.js

@@ -1,6 +1,6 @@
 /*
-* @ezuikit/player-theme v3.1.5-beta.4
-* Copyright (c) 2026-09-15 13:35:29 Ezviz-OpenBiz
+* @ezuikit/player-theme v3.1.6-beta.1
+* Copyright (c) 2026-09-16 19:24:27 Ezviz-OpenBiz
 * Released under the MIT License.
 */
 import EventEmitter from 'eventemitter3';
@@ -18,8 +18,8 @@ import { DatePicker, TimePicker } from '@ezuikit/control-date-picker';
 import { MobileTimeLine, TimeLine } from '@ezuikit/control-time-line';
 import SegmentProgress from '@ezuikit/control-segment-progress';
 
-/**
- * 播放器的类名前缀
+/**
+ * 播放器的类名前缀
  */ var PREFIX_CLASS = 'ezplayer';
 /** 填充模式 */ var THEME_SCALE_MODE_TYPE = {
     /** 画面完全填充canvas区域,画面会被拉伸 */ full: 0,
@@ -51,32 +51,32 @@ var THEME_PROPS = [
     // 播放区间（片段分享）。通过 props 下发而不是靠事件，避免主题异步渲染时错过初始化事件
     'playbackRange'
 ];
-/**
- * 当移动端 picker 控件打开时需要关闭动画（定时器）
+/**
+ * 当移动端 picker 控件打开时需要关闭动画（定时器）
  */ var CLEAR_TIMER_HEADER_FOOTER_ANIMATION = 'CLEAR_TIMER_HEADER_FOOTER_ANIMATION';
-/**
- * 'rec', 'cloudRec', 'cloudRecord' 是一个组，并且要在头部（移动端特殊处理)
- *
- * |          rec          |  cloudRec    |    cloudRecord  |
- * |:---------------------:|:------------:|:---------------:|
- * | 本地回放（SDK存储回放）   |    云存储回放 |     云录制回放    |
+/**
+ * 'rec', 'cloudRec', 'cloudRecord' 是一个组，并且要在头部（移动端特殊处理)
+ *
+ * |          rec          |  cloudRec    |    cloudRecord  |
+ * |:---------------------:|:------------:|:---------------:|
+ * | 本地回放（SDK存储回放）   |    云存储回放 |     云录制回放    |
  */ var REC_GROUP = [
     'rec',
     'cloudRec',
     'cloudRecord'
 ];
-/**
- * 设备信息
- *
- * |      deviceID       |  deviceName   |
- * |:-------------------:|:-------------:|
- * |   设备ID（唯一标识）   |   设备名称     |
+/**
+ * 设备信息
+ *
+ * |      deviceID       |  deviceName   |
+ * |:-------------------:|:-------------:|
+ * |   设备ID（唯一标识）   |   设备名称     |
  */ var DEVICE_INFO_GROUP = [
     'deviceID',
     'deviceName'
 ];
-/**
- * 暂停时能禁用的控件按钮
+/**
+ * 暂停时能禁用的控件按钮
  */ var PAUSE_DISABLED_BTN = [
     'capturePicture',
     'volume',
@@ -87,9 +87,9 @@ var THEME_PROPS = [
     'speed',
     'globalFullscreen'
 ];
-/**
- * 移动端可以扩展的控件
- * ['ptz', 'talk', 'record', 'capturePicture', 'timeLine', 'rec', 'date'];
+/**
+ * 移动端可以扩展的控件
+ * ['ptz', 'talk', 'record', 'capturePicture', 'timeLine', 'rec', 'date'];
  */ var MOBILE_EXTENDS = [
     'ptz',
     'timeLine',
@@ -97,25 +97,25 @@ var THEME_PROPS = [
     'date',
     'segmentProgress'
 ];
-/**
- *
- * 事件名
- *
- * ---------------                                             ------------------
- * -             -           theme.emit(EVENTS.xxxxx)          -                -
- * -             -   ------------------------------------->    -                -
- * -             -                                             -                -
- * -   Theme     -                                             -    Controls    -
- * -             -        control.emit(EVENTS.control.xxx)     -                -
- * -             -   <--------------------------------------   -                -
- * ---------------                                             ------------------
- *
- * @example
- * ```ts
- * theme.on(EVENTS.loading)
- * theme.on(EVENTS.loading)
- * ```
- *
+/**
+ *
+ * 事件名
+ *
+ * ---------------                                             ------------------
+ * -             -           theme.emit(EVENTS.xxxxx)          -                -
+ * -             -   ------------------------------------->    -                -
+ * -             -                                             -                -
+ * -   Theme     -                                             -    Controls    -
+ * -             -        control.emit(EVENTS.control.xxx)     -                -
+ * -             -   <--------------------------------------   -                -
+ * ---------------                                             ------------------
+ *
+ * @example
+ * ```ts
+ * theme.on(EVENTS.loading)
+ * theme.on(EVENTS.loading)
+ * ```
+ *
  */ // 事件命名不要超过两层
 var EVENTS = {
     loading: 'loading',
@@ -130,11 +130,11 @@ var EVENTS = {
     /** 首帧 */ firstFrameDisplay: 'firstFrameDisplay',
     /** 全屏 */ fullscreen: 'fullscreen',
     /** 退出全屏 */ exitFullscreen: 'exitFullscreen',
-    /**
-   * 全屏变化(移动端也支持触发, 不过移动端是模拟的web全屏 即旋转 180度)
-   * 当 isCurrentFullscreen 为 true 时，表示当前容器全局全屏状态
-   *
-   * 注意：同一个页面中只要有全屏的操作或取消全屏的操作，都会触发该事件 （移动端除外）
+    /**
+   * 全屏变化(移动端也支持触发, 不过移动端是模拟的web全屏 即旋转 180度)
+   * 当 isCurrentFullscreen 为 true 时，表示当前容器全局全屏状态
+   *
+   * 注意：同一个页面中只要有全屏的操作或取消全屏的操作，都会触发该事件 （移动端除外）
    */ fullscreenChange: 'fullscreenChange',
     /** 重置容器尺寸 */ resize: 'resize',
     /** 屏幕旋转方向变化 */ orientationChange: 'orientationChange',
@@ -161,8 +161,8 @@ var EVENTS = {
     setAllDayRecTimes: 'setAllDayRecTimes',
     getOSDTime: 'getOSDTime',
     /** 播放区间播放结束（SDK 层 playbackRange 特性） */ playbackEnd: 'playbackEnd',
-    /**
-   * 控件相关
+    /**
+   * 控件相关
    */ control: {
         /** 点击播放播放／暂停按钮 */ play: 'Control.play',
         /** 播放控件销毁 */ playDestroy: 'Control.playDestroy',
@@ -217,6 +217,8 @@ var EVENTS = {
         /** 日期面板展示隐藏变换 */ datePanelOpenChange: 'Control.datePanelOpenChange',
         /** 日期改变 */ dateChange: 'Control.dateChange',
         /** 日期改变 */ dateMonthChange: 'Control.dateMonthChange',
+        /** 日期面板展示的月份变化 */ datePanelMonthChange: 'Control.datePanelMonthChange',
+        /** 日期面板展示的年份变化 */ datePanelYearChange: 'Control.datePanelYearChange',
         /** 日期销毁 */ dateDestroy: 'Control.datePanelDestroy',
         /** 时间面板展示隐藏变换 */ timePanelOpenChange: 'Control.timePanelOpenChange',
         /** 时间改变 */ timeChange: 'Control.timeChange',
@@ -233,8 +235,8 @@ var EVENTS = {
         /** 播放器内容区域销毁 */ contentDestroy: 'Control.contentDestroy',
         /** 播放器内容区域重新渲染 */ contentRerender: 'Control.contentRerender'
     },
-    /**
-   * 主题控件相关
+    /**
+   * 主题控件相关
    */ theme: {
         /** 销毁前 */ beforeDestroy: 'Theme.beforeDestroy',
         /** 销毁后 */ destroyed: 'Theme.destroyed',
@@ -4846,6 +4848,12 @@ function debounce(func, wait) {
         theme.controls.dateControl.on(EVENTS.control.dateChange, function(date) {
             theme.emit(EVENTS.control.dateChange, date);
         });
+        theme.controls.dateControl.on(EVENTS.control.datePanelMonthChange, function(date, month) {
+            theme.emit(EVENTS.control.datePanelMonthChange, date, month);
+        });
+        theme.controls.dateControl.on(EVENTS.control.datePanelYearChange, function(date, year) {
+            theme.emit(EVENTS.control.datePanelYearChange, date, year);
+        });
         theme.controls.dateControl.on(EVENTS.control.dateDestroy, function() {
             theme.emit(EVENTS.control.dateDestroy);
         });
@@ -8388,9 +8396,9 @@ function _set_prototype_of$8(o, p) {
     };
     return _set_prototype_of$8(o, p);
 }
-/**
- * 日历选择器控件
- * @category Control
+/**
+ * 日历选择器控件
+ * @category Control
  */ var DatePickerControl = /*#__PURE__*/ function(Control) {
     _inherits$8(DatePickerControl, Control);
     function DatePickerControl(options) {
@@ -8405,6 +8413,8 @@ function _set_prototype_of$8(o, p) {
         })) || this;
         _this.options = options;
         _this._value = DateTime.format(((_this_options_props = _this.options.props) == null ? void 0 : (_this_options_props_urlInfo = _this_options_props.urlInfo) == null ? void 0 : (_this_options_props_urlInfo_searchParams = _this_options_props_urlInfo.searchParams) == null ? void 0 : _this_options_props_urlInfo_searchParams.begin) || new Date(), 'YYYY-MM-DD');
+        // 面板首次展示的就是选中日期所在月份，初始化后不应触发年 / 月变化
+        _this._renderMonth = _this._value.slice(0, 7);
         _this._render();
         // 日期上的点
         _this.on(EVENTS.control.dateMonthChange, function(dates) {
@@ -8465,20 +8475,39 @@ function _set_prototype_of$8(o, p) {
                     _this.emit(EVENTS.control.dateChange, date);
                 }
             },
+            // 日历面板「上一月 / 上一年」，底层两种翻页都回调 onPrevMonth
+            onPrevMonth: function onPrevMonth(current, prev) {
+                _this.options.onPrevMonth == null ? void 0 : _this.options.onPrevMonth.call(_this.options, current, prev);
+                _this._onPanelDateChange(prev);
+            },
+            // 日历面板「下一月 / 下一年」，底层两种翻页都回调 onNextMonth
+            onNextMonth: function onNextMonth(current, next) {
+                _this.options.onNextMonth == null ? void 0 : _this.options.onNextMonth.call(_this.options, current, next);
+                _this._onPanelDateChange(next);
+            },
+            // 月 / 年面板中点选单元格同样会改变日历展示的年月，但底层不回调翻页钩子
+            onCell: function onCell(date, mode) {
+                _this.options.onCell == null ? void 0 : _this.options.onCell.call(_this.options, date, mode);
+                if (mode !== 'date' && !_this._isPanelCellDisabled(date, mode)) _this._onPanelDateChange(date);
+            },
             onOpenChange: function onOpenChange(open) {
                 _this.options.onPanelChange == null ? void 0 : _this.options.onPanelChange.call(_this.options, open, _this.datePicker.current);
                 _this.emit(EVENTS.control.datePanelOpenChange, open, _this.datePicker.current);
+                // 面板重新打开会跳回选中日期所在月份，且底层不会回调翻页钩子，这里补齐
+                if (open) _this._onPanelDateChange(_this.datePicker.current);
             }
         }));
     };
-    /**
-   * 设置日期, change = true 时触发 onChange 事件
-   * @param date 设置的日期
-   * @param change 是否触发 onChange 事件
+    /**
+   * 设置日期, change = true 时触发 onChange 事件
+   * @param date 设置的日期
+   * @param change 是否触发 onChange 事件
    */ _proto.setDate = function setDate(date, change) {
         if (change === void 0) change = true;
         var _this_datePicker;
         (_this_datePicker = this.datePicker) == null ? void 0 : _this_datePicker.setCurrent(date, change);
+        // 主动设值由调用方发起，同步展示月份但不触发年 / 月变化回调
+        if (date) this._renderMonth = DateTime.format(date, 'YYYY-MM');
         if (date && !change && this._value !== DateTime.format(date, 'YYYY-MM-DD')) {
             this._value = DateTime.format(date, 'YYYY-MM-DD');
             if (date && this.$container.querySelector("." + PREFIX_CLASS + "-mobile-date-filter-value")) {
@@ -8490,9 +8519,9 @@ function _set_prototype_of$8(o, p) {
         if (this.datePicker) this.datePicker.open = false;
         Control.prototype.reset.call(this);
     };
-    /**
-   * 销毁控件
-   * @override
+    /**
+   * 销毁控件
+   * @override
    */ _proto.destroy = function destroy() {
         if (this.datePicker) {
             this.datePicker.destroy();
@@ -8505,9 +8534,39 @@ function _set_prototype_of$8(o, p) {
         var arr = this._value.split('-');
         return arr[1] + "." + arr[2];
     };
-    /**
-   * 点击 Control 会触发
-   * @overload super._onControlClick(e: Event)
+    /**
+   * 月 / 年面板中被点选的单元格是否已被调用方禁用
+   *
+   * 禁用的单元格底层不会切换展示的年月，因此不应派发变化
+   * @param date 单元格日期
+   * @param mode 当前面板模式
+   */ _proto._isPanelCellDisabled = function _isPanelCellDisabled(date, mode) {
+        if (mode === 'month') return !!(this.options.disabledMonth == null ? void 0 : this.options.disabledMonth.call(this.options, date, DateTime.format(date, 'YYYY-MM')));
+        if (mode === 'year') return !!(this.options.disabledYear == null ? void 0 : this.options.disabledYear.call(this.options, date, date.getFullYear()));
+        return false;
+    };
+    /**
+   * 日历面板展示的年月发生变化时，派发年份 / 月份变化
+   *
+   * 年份变化会先于月份变化派发；跨年翻页（如 2026-01 -> 2025-12）两者都会触发
+   * @param renderDate 面板当前展示的日期
+   */ _proto._onPanelDateChange = function _onPanelDateChange(renderDate) {
+        if (!renderDate) return;
+        var month = DateTime.format(renderDate, 'YYYY-MM');
+        if (!month || month === this._renderMonth) return;
+        var prevYear = this._renderMonth.slice(0, 4);
+        var year = month.slice(0, 4);
+        this._renderMonth = month;
+        if (year !== prevYear) {
+            this.options.onYearChange == null ? void 0 : this.options.onYearChange.call(this.options, renderDate, year);
+            this.emit(EVENTS.control.datePanelYearChange, renderDate, year);
+        }
+        this.options.onMonthChange == null ? void 0 : this.options.onMonthChange.call(this.options, renderDate, month);
+        this.emit(EVENTS.control.datePanelMonthChange, renderDate, month);
+    };
+    /**
+   * 点击 Control 会触发
+   * @overload super._onControlClick(e: Event)
    */ _proto._onControlClick = function _onControlClick(e) {
         Control.prototype._onControlClick.call(this, e);
     };
@@ -11868,6 +11927,6 @@ var THEME_DEFAULT_OPTIONS = {
     zh: zh,
     en: en
 };
-/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '3.1.5-beta.4';
+/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '3.1.6-beta.1';
 
 export { Control, EVENTS, Fullscreen, Loading, Message, Play, Poster, Rec, Theme, Utils, Volume };