@ezuikit/player-theme 1.0.0 → 1.0.1-alpha.2

package/dist/index.mjs

@@ -1,6 +1,6 @@
 /*
-* @ezuikit/player-theme v1.0.0
-* Copyright (c) 2025-11-03 Ezviz-OpenBiz
+* @ezuikit/player-theme v1.0.1-alpha.2
+* Copyright (c) 2025-11-14 Ezviz-OpenBiz
 * Released under the MIT License.
 */
 import EventEmitter from 'eventemitter3';
@@ -16,7 +16,12 @@ import { MobileTimeLine, TimeLine } from '@ezuikit/control-time-line';
 /**
  * 播放器的类名前缀
  */ const PREFIX_CLASS = 'ezplayer';
-const DATE_PICKER_ICON_WIDTH = 36;
+/** */ const DATE_PICKER_ICON_WIDTH = 36;
+/** 填充模式 */ const THEME_SCALE_MODE_TYPE = {
+    /** 画面完全填充canvas区域,画面会被拉伸 */ full: 0,
+    /** 画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 */ auto: 1,
+    /** 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 */ fullAuto: 2
+};
 // 切换主题时把当前的状态传给控件， 而不是传 theme 对象， 为了解耦
 // 不要添加方法，只添加状态
 const THEME_PROPS = [
@@ -3206,8 +3211,68 @@ var en = {
  * 截图控件
  * @category Content
  */ class Content extends EventEmitter {
+    /**
+   * 重新画面区域
+   * @param {number} originWidth 画面宽度
+   * @param {number} originHeight 画面高度
+   * @returns {void}
+   */ _rerender(originWidth = 0, originHeight = 0) {
+        const width = this.$wrapper.clientWidth;
+        const height = this.$wrapper.clientHeight;
+        if (originWidth > 0 && originHeight > 0) {
+            this._originWidth = originWidth;
+            this._originHeight = originHeight;
+        }
+        // 默认是1
+        // 视频画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边
+        let objectFill = 'contain';
+        // 视频画面完全填充canvas区域,画面会被拉伸
+        if (this._scaleMode === THEME_SCALE_MODE_TYPE.full) {
+            objectFill = 'fill';
+        }
+        // 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全
+        if (this._scaleMode === THEME_SCALE_MODE_TYPE.fullAuto) {
+            objectFill = 'cover';
+        }
+        if (width > 0 && height > 0 && this._originWidth > 0 && this._originHeight > 0 && this.$video) {
+            const left = (width - this._originWidth) / 2;
+            const top = (height - this._originHeight) / 2;
+            const wScale = width / this._originWidth;
+            const hScale = height / this._originHeight;
+            let scale = wScale > hScale ? hScale : wScale;
+            //
+            if (!(this._scaleMode === THEME_SCALE_MODE_TYPE.auto)) {
+                if (wScale !== hScale) {
+                    scale = wScale + ',' + hScale;
+                }
+            }
+            //
+            if (this._scaleMode === THEME_SCALE_MODE_TYPE.fullAuto) {
+                scale = wScale > hScale ? wScale : hScale;
+            }
+            this.$video.style.cssText += `
+        width: ${this._originWidth}px;
+        height: ${this._originHeight}px;
+        position: absolute;
+        object-fit:${objectFill};
+        left: ${left}px;
+        top: ${top}px;
+        transform-origin: 50% 50%;
+        transform: scale(${scale});
+      `;
+        }
+    }
+    setScaleMode(scaleMode = 0) {
+        this._scaleMode = scaleMode;
+        this._rerender();
+    }
     destroy() {
         var _this_$wrapper;
+        if (this.$video) {
+            this.$video.remove();
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this.$video = null;
+        }
         if (this.$content) {
             this.$content.remove();
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -3220,17 +3285,27 @@ var en = {
         this.removeAllListeners();
     }
     constructor(options){
-        super();
+        super(), this._scaleMode = 0, this._originWidth = 0, this._originHeight = 0;
         this.options = options;
+        this._scaleMode = options.scaleMode || 0;
         this.$wrapper = document.createElement('div');
         this.$wrapper.className = `${PREFIX_CLASS}-content-wrapper`;
         this.$content = document.createElement('div');
         this.$content.className = `${PREFIX_CLASS}-content`;
+        this.$video = document.createElement('div');
+        this.$video.className = `${PREFIX_CLASS}-content-video`;
+        this.$content.appendChild(this.$video);
         this.$wrapper.appendChild(this.$content);
         if (typeof options.getContainer === 'function') {
             const $popupContainer = options.getContainer();
             $popupContainer.appendChild(this.$wrapper);
         }
+        this.on(EVENTS.videoInfo, (originWidth, originHeight)=>{
+            this._rerender(originWidth, originHeight);
+        });
+        this.on(EVENTS.resize, ()=>{
+            this._rerender();
+        });
     }
 }
 
@@ -3386,6 +3461,17 @@ function debounce(func, wait) {
         }
     });
     theme == null ? void 0 : theme.on(EVENTS.videoInfo, (info)=>{
+        // 排除流信息回调触发的事件
+        if (!!info && info.from !== "setStreamInfoCallBack") {
+            var // rerender 画面
+            _theme_contentControl_emit, _theme_contentControl;
+            (_theme_contentControl = theme.contentControl) == null ? void 0 : (_theme_contentControl_emit = _theme_contentControl.emit) == null ? void 0 : _theme_contentControl_emit.call(_theme_contentControl, EVENTS.videoInfo, info.width, info.height);
+        }
+    });
+    theme == null ? void 0 : theme.on(EVENTS.resize, ()=>{
+        var // rerender 画面
+        _theme_contentControl_emit, _theme_contentControl;
+        (_theme_contentControl = theme.contentControl) == null ? void 0 : (_theme_contentControl_emit = _theme_contentControl.emit) == null ? void 0 : _theme_contentControl_emit.call(_theme_contentControl, EVENTS.resize);
     });
     theme == null ? void 0 : theme.on('getDeviceInfo', (info)=>{
     });
@@ -3775,12 +3861,12 @@ const ignoreList = [
  * @returns {void}
  */ function _resize(theme, width, height) {
     let cssText = '';
-    if (/\d/.test(width + '')) {
+    if (/^\d+(\.\d+)?$/.test(width + '')) {
         cssText += `width: ${width}px;`;
     } else if (width) {
         cssText += `width: ${width};`;
     }
-    if (/\d/.test(height + '')) {
+    if (/^\d+(\.\d+)?$/.test(height + '')) {
         cssText += `height: ${height}px;`;
     } else if (height) {
         cssText += `height: ${height};`;
@@ -3926,7 +4012,7 @@ const ZOOM_DEFAULT_OPTIONS = {
 
 /*
 * @ezuikit/control-zoom v0.0.2
-* Copyright (c) 2025-09-21 Ezviz-OpenBiz
+* Copyright (c) 2025-11-11 Ezviz-OpenBiz
 * Released under the MIT License.
 */
 /**
@@ -5306,7 +5392,7 @@ function _extends$c() {
 
 /*
 * @ezuikit/control-ptz v0.0.1
-* Copyright (c) 2025-09-21 Ezviz-OpenBiz
+* Copyright (c) 2025-11-11 Ezviz-OpenBiz
 * Released under the MIT License.
 */
 
@@ -5475,11 +5561,11 @@ class MobilePtz extends BasePtz {
                 $icons[0].className = $icons[0].className.replace(`${PTZ_MOBILE_PREFIX}-default`, `${PTZ_MOBILE_PREFIX}-active`);
             }
         }
-        $warp.style.cssText = `background-image:linear-gradient(${direction === 0 ? 180 : direction === 1 ? 0 : direction === 2 ? 90 : 270}deg, #c0ddf1 0%, rgba(100,143,252,0.00) 50%)`;
+        $warp.style = `background-image:linear-gradient(${direction === 0 ? 180 : direction === 1 ? 0 : direction === 2 ? 90 : 270}deg, #c0ddf1 0%, rgba(100,143,252,0.00) 50%)`;
         if (type === 'stop') {
             var _this_options_env1;
             url = ((_this_options_env1 = this.options.env) == null ? void 0 : _this_options_env1.domain) + '/api/lapp/device/ptz/stop';
-            $warp.style.cssText = '';
+            $warp.style = '';
             $icons[3].className = $icons[3].className.replace(`${PTZ_MOBILE_PREFIX}-active`, `${PTZ_MOBILE_PREFIX}-default`);
             $icons[1].className = $icons[1].className.replace(`${PTZ_MOBILE_PREFIX}-active`, `${PTZ_MOBILE_PREFIX}-default`);
             $icons[2].className = $icons[2].className.replace(`${PTZ_MOBILE_PREFIX}-active`, `${PTZ_MOBILE_PREFIX}-default`);
@@ -5523,14 +5609,11 @@ class MobilePtz extends BasePtz {
                     60003,
                     60004
                 ].includes(+rt.code)) {
-                    $warp.style.cssText = `background-image:linear-gradient(${direction === 0 ? 180 : direction === 1 ? 0 : direction === 2 ? 90 : 270}deg, #f45656 0%, rgba(100,143,252,0.00) 50%)`;
+                    $warp.style = `background-image:linear-gradient(${direction === 0 ? 180 : direction === 1 ? 0 : direction === 2 ? 90 : 270}deg, #f45656 0%, rgba(100,143,252,0.00) 50%)`;
                 }
             }
             operationResultCb == null ? void 0 : operationResultCb(rt);
         }).catch((err)=>{
-        }).finally(()=>{
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            operationResultCb = null;
         });
     }
     constructor(container, options){
@@ -6802,12 +6885,14 @@ function __filter(list, locale = {}) {
             controlType: 'button',
             classNameSuffix: 'definition',
             renderLabel: (label, item, list)=>{
+                var _list_;
                 if ((item == null ? void 0 : item.level) === 'auto') {
                     var _options_locales_options_language;
-                    const realIitem = list.find((it)=>it.level === this._level);
-                    return `<span>${options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO}(${(realIitem == null ? void 0 : realIitem.name) || ''})</span>`;
+                    const realItem = list.find((it)=>it.level === this._level);
+                    return `<span>${options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO}(${(realItem == null ? void 0 : realItem.name) || ''})</span>`;
                 }
-                return `<span>${label}</span>`;
+                // 如果 label 不存在，则不显示label，直接显示list的第一个label， 一般自定义清晰度列表可能会出现
+                return `<span>${label || ((_list_ = list[0]) == null ? void 0 : _list_.name) || ''}</span>`;
             },
             onChange: (value, item)=>{
                 var _options_onChange;
@@ -6834,9 +6919,9 @@ function __filter(list, locale = {}) {
             this._level = realLevel + '';
             if (l === 'auto') {
                 var _options_locales_options_language;
-                const realIitem = this.list.find((it)=>it.level === this._level);
+                const realItem = this.list.find((it)=>it.level === this._level);
                 this.$container.querySelector(`.${PREFIX_CLASS}-select-btn`).innerHTML = `
-          <span>${options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO}(${(realIitem == null ? void 0 : realIitem.name) || ''})</span>
+          <span>${options == null ? void 0 : (_options_locales_options_language = options.locales[options.language]) == null ? void 0 : _options_locales_options_language.VIDEO_LEVEL_AUTO}(${(realItem == null ? void 0 : realItem.name) || ''})</span>
         `;
             } else {
                 if (this.value !== this._level + '') this.value = this._level + '';
@@ -6919,7 +7004,7 @@ const SPEED_DEFAULT_OPTIONS = {
 
 /*
 * @ezuikit/control-date-picker v0.0.1
-* Copyright (c) 2025-09-21 Ezviz-OpenBiz
+* Copyright (c) 2025-11-11 Ezviz-OpenBiz
 * Released under the MIT License.
 */
 function asyncGeneratorStep$2(gen, resolve, reject, _next, _throw, key, arg) {
@@ -8010,7 +8095,7 @@ function _renderTheme(theme, data) {
         }
         if (theme.options.posterOptions !== null) {
             theme.posterControl = new Poster(_extends$1({}, theme.options.posterOptions || {}, {
-                getPopupContainer: ()=>theme.contentControl.$content
+                getPopupContainer: ()=>theme.contentControl.$video
             }));
         }
         theme.controls = {}; // 防止为 null
@@ -8241,6 +8326,7 @@ const THEME_DEFAULT_OPTIONS = {
     dblClickFullscreen: true,
     language: 'zh',
     autoPlay: true,
+    scaleMode: THEME_SCALE_MODE_TYPE.full,
     loggerOptions: {
         level: 'INFO',
         showTime: true
@@ -8730,6 +8816,37 @@ const THEME_DEFAULT_OPTIONS = {
         (_this = this) == null ? void 0 : _this.emit(EVENTS.setLoggerOptions, options);
     }
     /**
+   * 设置视频画面缩放模式
+   * @since 1.0.1
+   * @param {0 | 1 | 2} scaleMode - 缩放模式， 0: 窗口铺满， 1: 等比缩放大边铺满， 2: 等比缩放小边铺满
+   */ setScaleMode(scaleMode) {
+        if ([
+            0,
+            1,
+            2
+        ].includes(+scaleMode)) {
+            var _this_contentControl_setScaleMode, _this_contentControl;
+            this.scaleMode = +scaleMode;
+            (_this_contentControl = this.contentControl) == null ? void 0 : (_this_contentControl_setScaleMode = _this_contentControl.setScaleMode) == null ? void 0 : _this_contentControl_setScaleMode.call(_this_contentControl, +scaleMode);
+            const classList = this.$container.classList;
+            for (const item of classList){
+                if (item.startsWith(`${PREFIX_CLASS}-scale-mode-`)) {
+                    classList.remove(item);
+                }
+            }
+            if (this.scaleMode === 0) {
+                this.$container.classList.add(`${PREFIX_CLASS}-scale-mode-full`);
+            } else if (this.scaleMode === 1) {
+                this.$container.classList.add(`${PREFIX_CLASS}-scale-mode-auto`);
+            } else if (this.scaleMode === 2) {
+                this.$container.classList.add(`${PREFIX_CLASS}-scale-mode-full-auto`);
+            }
+        } else {
+            var _this_logger;
+            (_this_logger = this.logger) == null ? void 0 : _this_logger.warn('scaleMode must be 0 | 1 | 2');
+        }
+    }
+    /**
    * 销毁包括事件、控件 ...
    *
    * Destroy (including events, controls...)
@@ -8778,7 +8895,7 @@ const THEME_DEFAULT_OPTIONS = {
     // 私有方法
     // ==============================================================================================
     /** 初始化配置项 */ _initOptions(options = {}) {
-        var _this_options_loggerOptions;
+        var _this_options_loggerOptions, _this_options_definitionOptions_list, _this_options_definitionOptions, _this_options_videoLevelList;
         this.options = deepmerge(THEME_DEFAULT_OPTIONS, options, {
             clone: false
         });
@@ -8792,7 +8909,7 @@ const THEME_DEFAULT_OPTIONS = {
         }
         if (!this.$container) throw new Error('container option is required!');
         if ([
-            'VIDOE',
+            'VIDEO',
             'CANVAS'
         ].includes(this.$container.tagName)) {
             throw new Error('container node cannot be video or canvas!');
@@ -8803,7 +8920,15 @@ const THEME_DEFAULT_OPTIONS = {
         }));
         this.logger.log(navigator.userAgent || 'unknown');
         this.logger.log('[Theme Version] ', Theme.THEME_VERSION);
-        this.logger.log(JSON.stringify(this.options));
+        if ('container' in this.options) {
+            // JSON 不能序列化dom节点, 不要使用 this.options.container, 请使用 this.container
+            delete this.options.container;
+        }
+        try {
+            this.logger.log('[options] \n', JSON.stringify(this.options));
+        } catch (error) {
+            this.logger.log('[options] \n', this.options);
+        }
         const language = this.options.language || 'zh';
         const locales = deepmerge({
             zh,
@@ -8815,6 +8940,12 @@ const THEME_DEFAULT_OPTIONS = {
         this.i18n = new I18n(locales, {
             defaultLocale: language
         });
+        // 默认清晰度列表
+        if (((_this_options_definitionOptions = this.options.definitionOptions) == null ? void 0 : (_this_options_definitionOptions_list = _this_options_definitionOptions.list) == null ? void 0 : _this_options_definitionOptions_list.length) > 0 || ((_this_options_videoLevelList = this.options.videoLevelList) == null ? void 0 : _this_options_videoLevelList.length) > 0) {
+            var _this_options_definitionOptions1;
+            this.videoLevelList = ((_this_options_definitionOptions1 = this.options.definitionOptions) == null ? void 0 : _this_options_definitionOptions1.list) || this.options.videoLevelList;
+        }
+        this.setScaleMode(this.options.scaleMode);
     }
     /**
    * 初始化设置类名和设置宽高
@@ -9304,7 +9435,7 @@ const THEME_DEFAULT_OPTIONS = {
    */ this._footerMoreControl = null, /** 头部控件 @since 0.0.1 @private */ this._header = null, /** 低部控件 @since 0.0.1 @private */ this._footer = null, /** 回放底部时间轴 @since 0.0.1 @private */ this._recFooter = null, /**
    * 移动端扩展容器, 扩展的控件渲染在指定容器以外， 仅只用端适用， 为了可以放置大的控件和方便开发接入
    * @private
-   */ this._mobileExtend = null, /**  @since 0.0.1 @private */ this._interactiveResult = null, /**  @since 0.0.1 @private */ this._themeData = null, this._fullscreen = null, this.zoomUtil = null, /** 清除屏幕旋转 */ this._cleanupOrientation = null, /**  resizeObserver 监听销毁 */ this._cleanUpResizeObserver = null, /** 容器的宽 */ this._width = 0, /** 容器的高 */ this._height = 0, /** 当前容器的全屏状态  true: 全屏， false: 非全屏 */ this._isCurrentFullscreen = false, /** 屏幕旋转角度 0 ｜ 90 ｜ 180 ｜ 270 */ this._orientationAngle = 0, /** 是否播放中 @private */ this._playing = false, /** 加载中 */ this._loading = false, /** 音量 */ this._volume = 0, /** 静音 */ this._muted = false, /** 电子放大倍数 @private */ this._zoom = 1, /** 放大中  true: 可缩放状态，false: 禁止缩放状态(不能缩放) @private */ this._zooming = false, /** 录制中 @private */ this._recording = false, /** 对讲中 @private */ this._talking = false, /** 倍速 @private */ this._speed = 1, /** 自定清晰度 @private */ this._videoLevelAuto = false, /** 清晰度列表 */ this.videoLevelList = [], /** 回放片段列表 */ this.recordList = [], /** 窗口尺寸变化时，设置窗口超出隐藏，防止出现滚动条 */ this._resizeOverflowTimer = null, /** 清理 header/footer 动画 定时器 @private */ this._onPauseTimingFunc = null, /** 销毁标识  @readonly */ this.destroyed = false, /** 播放地址信息 */ this.urlInfo = null;
+   */ this._mobileExtend = null, /**  @since 0.0.1 @private */ this._interactiveResult = null, /**  @since 0.0.1 @private */ this._themeData = null, this._fullscreen = null, this.zoomUtil = null, /** 清除屏幕旋转 */ this._cleanupOrientation = null, /**  resizeObserver 监听销毁 */ this._cleanUpResizeObserver = null, /** 容器的宽 */ this._width = 0, /** 容器的高 */ this._height = 0, /** 当前容器的全屏状态  true: 全屏， false: 非全屏 */ this._isCurrentFullscreen = false, /** 屏幕旋转角度 0 ｜ 90 ｜ 180 ｜ 270 */ this._orientationAngle = 0, /** 是否播放中 @private */ this._playing = false, /** 加载中 */ this._loading = false, /** 音量 */ this._volume = 0, /** 静音 */ this._muted = false, /** 电子放大倍数 @private */ this._zoom = 1, /** 放大中  true: 可缩放状态，false: 禁止缩放状态(不能缩放) @private */ this._zooming = false, /** 录制中 @private */ this._recording = false, /** 对讲中 @private */ this._talking = false, /** 倍速 @private */ this._speed = 1, /** 自定清晰度 @private */ this._videoLevelAuto = false, /** 清晰度列表 */ this.videoLevelList = [], /** 回放片段列表 */ this.recordList = [], /** 窗口尺寸变化时，设置窗口超出隐藏，防止出现滚动条 */ this._resizeOverflowTimer = null, /** 清理 header/footer 动画 定时器 @private */ this._onPauseTimingFunc = null, /** 销毁标识  @readonly */ this.destroyed = false, /** 播放地址信息 */ this.urlInfo = null, this.scaleMode = 0;
         this._initOptions(options);
         if (this.options.type === 'ezopen') {
             var _this_urlInfo_searchParams, _this_urlInfo;
@@ -9326,7 +9457,8 @@ const THEME_DEFAULT_OPTIONS = {
         this._initClassName();
         // 画布需要渲染在 this.contentControl.$container 内
         this.contentControl = new Content({
-            getContainer: ()=>this.$container
+            getContainer: ()=>this.$container,
+            scaleMode: this.scaleMode
         });
         //  zoom utils
         __zoom(this, this.contentControl.$content, _extends({}, this.options.zoomOptions || {}, {
@@ -9364,6 +9496,6 @@ const THEME_DEFAULT_OPTIONS = {
     zh,
     en
 };
-/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '1.0.0';
+/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '1.0.1-alpha.2';
 
-export { Control, Fullscreen, Loading, Message, Play, Poster, Rec, Theme, Utils, Volume, Theme as default };
+export { Control, Fullscreen, Loading, Message, Play, Poster, Rec, Theme, Utils, Volume };