@ezuikit/player-theme 1.0.0-beta.1 → 1.0.1-alpha.0

package/dist/index.mjs

@@ -1,6 +1,6 @@
 /*
-* @ezuikit/player-theme v1.0.0-beta.1
-* Copyright (c) 2025-10-27 Ezviz-OpenBiz
+* @ezuikit/player-theme v1.0.1-alpha.0
+* Copyright (c) 2025-11-11 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 = [
@@ -184,6 +189,7 @@ const EVENTS = {
         /** 日期改变 */ dateChange: 'Control.dateChange',
         /** 日期销毁 */ dateDestroy: 'Control.datePanelDestroy',
         /**  时间轴拖动结束 */ timeLineChange: 'Control.timeLineChange',
+        /** 时间轴图片列表面板 */ timeLinePanelOpenChange: 'Control.timeLinePanelOpenChange',
         /** 时间轴控件销毁 */ timeLineDestroy: 'Control.timeLineDestroy',
         /** 主题控件挂载前 切换新的主题也会触发，如果想首次获取需要在 onInitializing 回调中进行监听 */ beforeMountControls: 'Control.beforeMountControls',
         /** 主题控件挂载完成, 切换新的主题也会触发，如果想首次获取需要在 onInitializing 回调中进行监听 */ mountedControls: 'Control.mountedControls',
@@ -3205,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
@@ -3219,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();
+        });
     }
 }
 
@@ -3385,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)=>{
     });
@@ -3699,6 +3786,14 @@ function debounce(func, wait) {
         theme.controls.timeLineControl.on(EVENTS.control.timeLineChange, (date)=>{
             theme.emit(EVENTS.control.timeLineChange, date);
         });
+        theme.controls.timeLineControl.on(EVENTS.control.timeLinePanelOpenChange, (open)=>{
+            var _theme_controls_dateControl;
+            if ((_theme_controls_dateControl = theme.controls.dateControl) == null ? void 0 : _theme_controls_dateControl.dataPickerUtil) {
+                var _theme_controls_dateControl_dataPickerUtil, _theme_controls_dateControl1;
+                (_theme_controls_dateControl1 = theme.controls.dateControl) == null ? void 0 : (_theme_controls_dateControl_dataPickerUtil = _theme_controls_dateControl1.dataPickerUtil) == null ? void 0 : _theme_controls_dateControl_dataPickerUtil.hide();
+            }
+            theme.emit(EVENTS.control.timeLinePanelOpenChange, open);
+        });
         theme.controls.timeLineControl.on(EVENTS.control.timeLineDestroy, ()=>{
             theme.emit(EVENTS.control.timeLineDestroy);
         });
@@ -3766,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};`;
@@ -3917,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.
 */
 /**
@@ -5297,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.
 */
 
@@ -5466,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`);
@@ -5514,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){
@@ -6793,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;
@@ -6825,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 + '';
@@ -6910,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) {
@@ -7005,7 +7099,7 @@ const DEFAULT_OPTIONS = {
 };
 /**
  * 日期选择器
- */ let DatePicker$1 = class DatePicker {
+ */ class DatePicker {
     _init() {
         // 因为挂载在行内，需要父标签设置 position: relative;
         this.$container.style.cssText += `;position: relative;`;
@@ -7133,7 +7227,7 @@ const DEFAULT_OPTIONS = {
             }
         });
     }
-};
+}
 
 /**
  * @description 时间操作
@@ -7296,7 +7390,7 @@ function _extends$5() {
 /**
  * 日历选择器控件
  * @category Control
- */ class DatePicker extends Control {
+ */ class DatePickerControl extends Control {
     _render() {
         if (isMobile()) {
             var _this_locale;
@@ -7311,7 +7405,7 @@ function _extends$5() {
                 title: (_this_locale1 = this.locale) == null ? void 0 : _this_locale1.BTN_CALENDAR
             });
         }
-        this.dataPickerUtil = new DatePicker$1(this.$container, {
+        this.dataPickerUtil = new DatePicker(this.$container, {
             staticPath: this.options.staticPath,
             language: this.options.language === 'zh' ? 'zh-CN' : 'en-US',
             current: new Date(this._value + ' 00:00:00'),
@@ -7403,10 +7497,16 @@ function _extends$4() {
     _render() {
         var _this_timeLineUtil_updateTimeSections, _this_timeLineUtil;
         const _timeLineOptions = {
-            // locale: this._options.locale,
+            language: this._options.language || 'zh',
+            coverQuery: this._options.coverQuery || '',
             onChange: (date)=>{
-                this._options.onChange == null ? void 0 : this._options.onChange.call(this._options, date);
-                this.emit(EVENTS.control.timeLineChange, date);
+                if (this._currentTime !== (date == null ? void 0 : date.getTime())) {
+                    this._options.onChange == null ? void 0 : this._options.onChange.call(this._options, date);
+                    this.emit(EVENTS.control.timeLineChange, date);
+                }
+            },
+            onPickerOpenChange: (open)=>{
+                this.emit(EVENTS.control.timeLinePanelOpenChange, open);
             },
             // 2025-10-27 仅移动端支持
             onPickerSelect: (item)=>{
@@ -7482,7 +7582,8 @@ function _extends$4() {
             tagName: 'div',
             controlType: 'block',
             classNameSuffix: 'time-line'
-        })), this._$add = null, this._$reduce = null, this.records = [];
+        })), this._$add = null, this._$reduce = null, this._currentTime = 0, this.records = [];
+        this._currentTime = 0;
         this._options = options;
         this.records = ((_this__options = this._options) == null ? void 0 : (_this__options_props = _this__options.props) == null ? void 0 : _this__options_props.recordList) || [];
         this._render();
@@ -7493,9 +7594,13 @@ function _extends$4() {
             (_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (_this_timeLineUtil_updateTimeSections = _this_timeLineUtil.updateTimeSections) == null ? void 0 : _this_timeLineUtil_updateTimeSections.call(_this_timeLineUtil, records);
         });
         this.on(EVENTS.getOSDTime, (time)=>{
-            var // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-            _this_timeLineUtil_update, _this_timeLineUtil;
-            (_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (_this_timeLineUtil_update = _this_timeLineUtil.update) == null ? void 0 : _this_timeLineUtil_update.call(_this_timeLineUtil, new Date(time * 1000));
+            if (time) {
+                var // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+                _this_timeLineUtil_update, _this_timeLineUtil;
+                const date = new Date(time * 1000);
+                this._currentTime = date.getTime();
+                (_this_timeLineUtil = this.timeLineUtil) == null ? void 0 : (_this_timeLineUtil_update = _this_timeLineUtil.update) == null ? void 0 : _this_timeLineUtil_update.call(_this_timeLineUtil, date);
+            }
         });
     }
 }
@@ -7561,7 +7666,7 @@ const Controls = {
     globalFullscreen: GlobalFullscreen,
     rec: Rec,
     speed: Speed,
-    date: DatePicker,
+    date: DatePickerControl,
     timeLine: TimeLineControl
 };
 
@@ -7990,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
@@ -8131,12 +8236,13 @@ function _renderTheme(theme, data) {
 }
 const _renderTimeLine = (theme, container, props = {})=>{
     if (!theme.controls.timeLineControl && theme.options.timeLineOptions !== null) {
-        var _theme_options;
+        var _theme_urlInfo, _theme_options;
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         theme.controls.timeLineControl = new Controls['timeLine'](_extends$1({
             getPopupContainer: ()=>container,
             language: theme.options.language,
-            locales: theme.i18n.translations
+            locales: theme.i18n.translations,
+            coverQuery: ((_theme_urlInfo = theme.urlInfo) == null ? void 0 : _theme_urlInfo.validateCode) ? `decodekey=${theme.urlInfo.validateCode}` : ''
         }, ((_theme_options = theme.options) == null ? void 0 : _theme_options[`timeLineOptions`]) || {}, {
             props
         }));
@@ -8220,6 +8326,7 @@ const THEME_DEFAULT_OPTIONS = {
     dblClickFullscreen: true,
     language: 'zh',
     autoPlay: true,
+    scaleMode: THEME_SCALE_MODE_TYPE.full,
     loggerOptions: {
         level: 'INFO',
         showTime: true
@@ -8709,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...)
@@ -8757,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
         });
@@ -8771,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!');
@@ -8782,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,
@@ -8794,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);
     }
     /**
    * 初始化设置类名和设置宽高
@@ -9283,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;
@@ -9305,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 || {}, {
@@ -9343,6 +9496,6 @@ const THEME_DEFAULT_OPTIONS = {
     zh,
     en
 };
-/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '1.0.0-beta.1';
+/** 版本号 @since 0.0.1 */ Theme.THEME_VERSION = '1.0.1-alpha.0';
 
 export { Control, Fullscreen, Loading, Message, Play, Poster, Rec, Theme, Utils, Volume, Theme as default };