@ezuikit/player-theme
Version:
player theme
639 lines (632 loc) • 461 kB
JavaScript
/*
* @ezuikit/player-theme v1.0.1-alpha.2
* Copyright (c) 2025-11-14 Ezviz-OpenBiz
* Released under the MIT License.
*/
'use strict';
var EventEmitter = require('eventemitter3');
var Picker = require('@skax/picker');
var delegate = require('@skax/delegate');
var deepmerge = require('deepmerge');
var utilsTools = require('@ezuikit/utils-tools');
var screenfull = require('screenfull');
var I18n = require('@ezuikit/utils-i18n');
var Logger = require('@ezuikit/utils-logger');
var controlTimeLine = require('@ezuikit/control-time-line');
/**
* 播放器的类名前缀
*/ const PREFIX_CLASS = 'ezplayer';
/** */ const DATE_PICKER_ICON_WIDTH = 36;
/** 填充模式 */ const THEME_SCALE_MODE_TYPE = {
/** 画面完全填充canvas区域,画面会被拉伸 */ full: 0,
/** 画面做等比缩放后,高或宽对齐canvas区域,画面不被拉伸,但有黑边 */ auto: 1,
/** 视频画面做等比缩放后,完全填充canvas区域,画面不被拉伸,没有黑边,但画面显示不全 */ fullAuto: 2
};
// 切换主题时把当前的状态传给控件， 而不是传 theme 对象， 为了解耦
// 不要添加方法，只添加状态
const THEME_PROPS = [
'width',
'height',
'playing',
'volume',
'muted',
'loading',
'recType',
'isCurrentFullscreen',
'orientationAngle',
'zooming',
'zoom',
'recording',
'recordList',
'speed',
'urlInfo',
'videoLevelList',
'videoLevel'
];
/**
* 当移动端 picker 控件打开时需要关闭动画（定时器）
*/ const CLEAR_TIMER_HEADER_FOOTER_ANIMATION = 'CLEAR_TIMER_HEADER_FOOTER_ANIMATION';
/**
* 'rec', 'cloudRec', 'cloudRecord' 是一个组，并且要在头部（移动端特殊处理)
*
* | rec | cloudRec | cloudRecord |
* |:---------------------:|:------------:|:---------------:|
* | 本地回放（SDK存储回放） | 云存储回放 | 云录制回放 |
*/ const REC_GROUP = [
'rec',
'cloudRec',
'cloudRecord'
];
/**
* 设备信息
*
* | deviceID | deviceName |
* |:-------------------:|:-------------:|
* | 设备ID（唯一标识） | 设备名称 |
*/ const DEVICE_INFO_GROUP = [
'deviceID',
'deviceName'
];
/**
* 暂停时能禁用的控件按钮
*/ const PAUSE_DISABLED_BTN = [
'capturePicture',
'volume',
'ptz',
'record',
'talk',
'definition',
'speed',
'globalFullscreen'
];
/**
* 移动端可以扩展的控件
* ['ptz', 'talk', 'record', 'capturePicture', 'timeLine', 'rec', 'date'];
*/ const MOBILE_EXTENDS = [
'ptz',
'timeLine',
'rec',
'date'
];
/**
*
* 事件名
*
* --------------- ------------------
* - - theme.emit(EVENTS.xxxxx) - -
* - - -------------------------------------> - -
* - - - -
* - Theme - - Controls -
* - - control.emit(EVENTS.control.xxx) - -
* - - <-------------------------------------- - -
* --------------- ------------------
*
* @example
* ```ts
* theme.on(EVENTS.loading)
* theme.on(EVENTS.loading)
* ```
*
*/ // 事件命名不要超过两层
const EVENTS = {
loading: 'loading',
/** 播放 */ play: 'play',
/** 截图 */ capturePicture: 'capturePicture',
/** 音量变化 */ volumechange: 'volumechange',
/** 缩放变化 */ zoomChange: 'zoomChange',
/** 缩放状态变化， true: 可缩放状态，false: 禁止缩放状态(不能缩放) */ zoomingChange: 'zoomingChange',
/** 缩放平移改变 */ zoomTranslateChange: 'zoomTranslateChange',
/** 音频信息 */ audioInfo: 'audioInfo',
/** 视频信息 */ videoInfo: 'videoInfo',
/** 首帧 */ firstFrameDisplay: 'firstFrameDisplay',
/** 全屏 */ fullscreen: 'fullscreen',
/** 退出全屏 */ exitFullscreen: 'exitFullscreen',
/**
* 全屏变化(移动端也支持触发, 不过移动端是模拟的web全屏 即旋转 180度)
* 当 isCurrentFullscreen 为 true 时，表示当前容器全局全屏状态
*
* 注意：同一个页面中只要有全屏的操作或取消全屏的操作，都会触发该事件 （移动端除外）
*/ fullscreenChange: 'fullscreenChange',
/** 重置容器尺寸 */ resize: 'resize',
/** 屏幕旋转方向变化 */ orientationChange: 'orientationChange',
/** 音频编码不支持 （暂时仅支持标准流 flv） */ audioCodecUnsupported: 'audioCodecUnsupported',
/** 切换主题 themeDate 变化时 */ changeTheme: 'changeTheme',
/** 回放类型切换 */ recTypeChange: 'recTypeChange',
/** 切换清晰度 */ definitionChange: 'definitionChange',
/** 播放速度切换 */ speedChange: 'speedChange',
/** 控件开始录制 */ recordingChange: 'recordingChange',
/** 对讲状态变化 */ talkingChange: 'talkingChange',
/** 麦克风音量变化 */ talkVolumeChange: 'talkVolumeChange',
/** 动态切换日志配置 */ setLoggerOptions: 'setLoggerOptions',
records: 'records',
ptzSpeedChange: 'ptzSpeedChange',
setVideoLevelList: 'setVideoLevelList',
currentVideoLevel: 'currentVideoLevel',
currentVideoLevelAuto: 'currentVideoLevelAuto',
setAllDayRecTimes: 'setAllDayRecTimes',
getOSDTime: 'getOSDTime',
/**
* 控件相关
*/ control: {
/** 点击播放播放／暂停按钮 */ play: 'Control.play',
/** 播放控件销毁 */ playDestroy: 'Control.playDestroy',
/** 截图 */ capturePicture: 'Control.capturePicture',
/** 截图结果 */ capturePictureResult: 'Control.capturePictureResult',
/** 截图控件销毁 */ capturePictureDestroy: 'Control.capturePictureDestroy',
/** 音量变化 */ volumechange: 'Control.volumechange',
/** 音量调节面板 展示隐藏变换 */ volumePanelOpenChange: 'Control.volumePanelOpenChange',
/** 音量控件销毁 */ volumeDestroy: 'Control.volumeDestroy',
/** 控件组件栏(Header/Footer)展示隐藏 */ controlsBarOpenChange: 'Control.controlsBarOpenChange',
/** 当顶部控件栏(header)控件放置不下时， 显示的更多按钮的控件列表变化 */ headerMoreShowControlsChange: 'Control.headerMoreShowControlsChange',
/** 当顶部控件栏(header)控件放置不下时， 更多按钮 展示隐藏变换 */ headerMorePanelOpenChange: 'Control.headerMorePanelOpenChange',
/** 当底部控件栏(footer)控件放置不下时， 显示的更多按钮的控件列表变化 */ footerMoreShowControlsChange: 'Control.footerMoreShowControlsChange',
/** 当底部控件栏(footer)控件放置不下时， 更多按钮 展示隐藏变换 */ footerMorePanelOpenChange: 'Control.footerMorePanelOpenChange',
/** 设备信息控件销毁 */ deviceDestroy: 'Control.deviceDestroy',
/** 回放类型切换控件 */ recTypeChange: 'Control.recTypeChange',
/** 回放类型控件销毁 */ recDestroy: 'Control.recDestroy',
/** 切换清晰度控件 */ definitionChange: 'Control.definitionChange',
definitionList: 'Control.definitionList',
/** 切换清晰度面板 展示隐藏变换, (open, definition, item) */ definitionPanelOpenChange: 'Control.definitionPanelOpenChange',
/** 切换清晰度控件 */ definitionDestroy: 'Control.definitionDestroy',
/** 播放速度切换 */ speedChange: 'Control.speedChange',
/** 播放速度面板 显示隐藏变换 */ speedPanelOpenChange: 'Control.speedPanelOpenChange',
/** 播放速度控件销毁 */ speedDestroy: 'Control.speedDestroy',
/** 云台面板 显示隐藏变换 */ ptzPanelOpenChange: 'Control.ptzPanelOpenChange',
/** 云台速度切换 */ ptzSpeedChange: 'Control.ptzSpeedChange',
ptzError: 'Control.ptzError',
/** 云台控件销毁 */ ptzDestroy: 'Control.ptzDestroy',
/** 录制控件是否在录制中 */ recordingChange: 'Control.recordingChange',
recordDestroy: 'Control.recordDestroy',
/** 开始对讲 */ talkingChange: 'Control.talkingChange',
/** 对讲错误, 一般是麦克风权限被拒绝 */ talkError: 'Control.talkError',
/** 对讲控件销毁 */ talkDestroy: 'Control.talkDestroy',
/** 缩放比例改变 */ zoomChange: 'Control.zoomChange',
/** 音量调节面板 展示隐藏变换 */ zoomPanelOpenChange: 'Control.zoomPanelOpenChange',
/** 缩放控件销毁 */ zoomDestroy: 'Control.zoomDestroy',
/** 全屏控件销毁 */ fullscreenDestroy: 'Control.fullscreenDestroy',
/** 全局全屏控件销毁 */ globalFullscreenDestroy: 'Control.globalFullscreenDestroy',
/** 日期面板展示隐藏变换 */ datePanelOpenChange: 'Control.datePanelOpenChange',
/** 日期改变 */ dateChange: 'Control.dateChange',
/** 日期销毁 */ dateDestroy: 'Control.datePanelDestroy',
/** 时间轴拖动结束 */ timeLineChange: 'Control.timeLineChange',
/** 时间轴图片列表面板 */ timeLinePanelOpenChange: 'Control.timeLinePanelOpenChange',
/** 时间轴控件销毁 */ timeLineDestroy: 'Control.timeLineDestroy',
/** 主题控件挂载前 切换新的主题也会触发，如果想首次获取需要在 onInitializing 回调中进行监听 */ beforeMountControls: 'Control.beforeMountControls',
/** 主题控件挂载完成, 切换新的主题也会触发，如果想首次获取需要在 onInitializing 回调中进行监听 */ mountedControls: 'Control.mountedControls',
/** 主题控件卸载前, 已有控件卸载时才可触发 */ beforeUnmountControls: 'Control.beforeUnmountControls',
/** 主题控件卸载完成, 已有控件卸载时才可触发 */ unmountedControls: 'Control.unmountedControls',
/** 封面控件销毁 */ posterDestroy: 'Control.posterDestroy',
/** 加载控件销毁 */ loadingDestroy: 'Control.loadingDestroy',
/** 消息控件销毁 */ messageDestroy: 'Control.messageDestroy',
/** 播放器内容区域销毁 */ contentDestroy: 'Control.contentDestroy'
},
/**
* 主题控件相关
*/ theme: {
/** 销毁前 */ beforeDestroy: 'Theme.beforeDestroy',
/** 销毁后 */ destroyed: 'Theme.destroyed',
/** 移动端扩展销毁 */ mobileExtendDestroy: 'Theme.mobileExtendDestroy',
/** 回放页底部销毁 */ recFooterDestroy: 'Theme.recFooterDestroy'
},
message: 'message'
};
function getLocale(locales, language = 'zh') {
return (locales == null ? void 0 : locales[language]) || (locales == null ? void 0 : locales['zh']) || {};
}
/**
* 控件基类
* @category Control
* @example
* ```ts
* // 创建控件
* class MyControl extends Control {}
*
* // 使用控件
* const myControl = new MyControl({})
* ```
*/ class Control extends EventEmitter {
/**
* 是否激活
*/ get active() {
return this._active;
}
set active(active) {
if (this._disabled && !this._active) {
// 不允许禁用情况下激活
return;
}
this._active = active;
this._updateActiveState(active);
}
/**
* 是否禁用
*/ get disabled() {
return this._disabled;
}
set disabled(disabled) {
this._disabled = disabled;
this._updateDisabledState(disabled);
}
/**
* 重置整个控件
*/ reset(hide) {
if (this._camelCaseName) {
this.emit(`Control.${this._camelCaseName}Reset`, hide);
}
}
/**
* 重置控件挂载节点
* @param popupContainer 重新挂载的节点
* @param append 添加的方式， 默认 append
* @param element 当 append = before 时 需要 element, 插入 element 前
*
* | prepend | append |
* |:-------------:|:---------------:|
* | 插入第一个位置 | 追加在末尾 |
*/ resetPopupContainer(popupContainer, append, element) {
if (popupContainer !== this.$popupContainer) {
if (this.$popupContainer.contains(this.$container)) {
this.$popupContainer.removeChild(this.$container);
}
this.$popupContainer = popupContainer;
if (append === 'prepend') {
// https://caniuse.com/?search=prepend
this.$popupContainer.prepend(this.$container);
} else if (append === 'before') {
if (element) {
this.$popupContainer.insertBefore(this.$container, element);
}
} else {
this.$popupContainer.appendChild(this.$container);
}
if (this._camelCaseName) {
this.emit(`Control.${this._camelCaseName}ResetContainer`, this.__options.classNameSuffix, popupContainer);
}
}
}
/**
* 隐藏整个控件
*/ hide() {
if (this.$container) {
this.$container.style.display = 'none';
this.$container.classList.add(`${PREFIX_CLASS}-hide`);
}
}
/**
* 销毁控件
*/ destroy() {
var _this___options, _this_$container_remove, _this_$container;
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);
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);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
this.$container = null;
}
get _camelCaseName() {
if (this.__options.classNameSuffix) {
return this.__options.classNameSuffix.replace(/[-_\s]+(.)?/g, (_, c)=>c ? c.toUpperCase() : '').replace(/^(.)/, (first)=>first.toLowerCase());
}
return null;
}
_updateDisabledState(disabled) {
if (disabled) {
var _this_$container;
(_this_$container = this.$container) == null ? void 0 : _this_$container.classList.add(`${PREFIX_CLASS}-disabled`);
} else {
var _this_$container1;
(_this_$container1 = this.$container) == null ? void 0 : _this_$container1.classList.remove(`${PREFIX_CLASS}-disabled`);
}
}
_updateActiveState(active) {
if (active) {
var _this_$container;
(_this_$container = this.$container) == null ? void 0 : _this_$container.classList.add(`${PREFIX_CLASS}-active`);
} else {
var _this_$container1;
(_this_$container1 = this.$container) == null ? void 0 : _this_$container1.classList.remove(`${PREFIX_CLASS}-active`);
}
}
/**
* 当点击 Control 时 触发子类的 _onControlClick
*/ _onClick() {
this.$container.addEventListener('click', (e)=>{
var _this_$container;
// prettier-ignore
if (!((_this_$container = this.$container) == null ? void 0 : _this_$container.classList.contains(`${PREFIX_CLASS}-disabled`))) {
// _onControlClick 来源自子类中
this._onControlClick == null ? void 0 : this._onControlClick.call(this, e);
}
});
}
_onDBlClick(e) {
e.stopPropagation();
e.preventDefault();
}
/**
* 点击 Control 控件触发
* @param {Event} e
* @returns {void}
*/ _onControlClick(e) {
// 这是一个空函数， 子类可以实现重新改方法
this.__options.onClick == null ? void 0 : this.__options.onClick.call(this.__options, e);
}
constructor(options){
var _this___options;
super(), /** 具体语言对应的值 */ this.locale = null, this.__options = {}, this._disabled = false, this._active = false;
this.__options = options;
this.locale = getLocale(this.__options.locales, this.__options.language);
this.$container = document.createElement(options.tagName || 'span');
this.$container.classList.add(`${PREFIX_CLASS}-control`); // 默认隐藏
if ((options == null ? void 0 : options.controlType) === 'text') {
this.$container.classList.add(`${PREFIX_CLASS}-control-text`);
} else if ((options == null ? void 0 : options.controlType) === 'block') {
this.$container.classList.add(`${PREFIX_CLASS}-control-block`); // 块
} else {
this.$container.classList.add(`${PREFIX_CLASS}-control-btn`); // 默认隐藏
}
if (options == null ? void 0 : options.classNameSuffix) {
// prettier-ignore
this.$container.classList.add(`${PREFIX_CLASS}-control-${options == null ? void 0 : options.classNameSuffix}`);
}
if (options == null ? void 0 : options.className) {
this.$container.classList.add(options.className);
}
if (options.getPopupContainer) {
this.$popupContainer = options.getPopupContainer == null ? void 0 : options.getPopupContainer.call(options);
} else {
this.$popupContainer = document.body;
}
this.$popupContainer.appendChild(this.$container);
this._onDBlClick = this._onDBlClick.bind(this);
this._onClick();
if (((_this___options = this.__options) == null ? void 0 : _this___options.controlType) !== 'block') this.$container.addEventListener('dblclick', this._onDBlClick);
}
}
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){
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$q.apply(this, arguments);
}
const LOADING_DEFAULT_OPTIONS = {};
/**
* 加载动画控件
* @category Control
*/ class Loading extends Control {
_html() {
if (typeof this._options.render === 'function') {
this.$container.innerHTML = this._options.render();
} else {
var _this_locale;
this.$container.innerHTML = `
<span class="${PREFIX_CLASS}-loading-dot ${PREFIX_CLASS}-loading-dot-load">
<i class="${PREFIX_CLASS}-loading-dot-item"></i>
<i class="${PREFIX_CLASS}-loading-dot-item"></i>
<i class="${PREFIX_CLASS}-loading-dot-item"></i>
<i class="${PREFIX_CLASS}-loading-dot-item"></i>
</span>
<div class="${PREFIX_CLASS}-loading-text">${((_this_locale = this.locale) == null ? void 0 : _this_locale.LOADING) || 'loading...'}</div>
`;
}
}
/**
* 动画展示
* @param html 自定义动画内容, 如果不存在则使用默认动画
*/ show(html) {
if (html) this.$container.innerHTML = html;
// 初始化， 出流再等待中（回放出流结束不包括）
this.$container.style.display = 'flex';
this.$container.classList.remove(`${PREFIX_CLASS}-hide`);
this.$popupContainer.classList.add(`${PREFIX_CLASS}-has-loading`);
}
/**
* 隐藏动画
*/ hide() {
super.hide();
this.$popupContainer.classList.remove(`${PREFIX_CLASS}-has-loading`);
}
constructor(options = {}){
super(Object.assign({}, LOADING_DEFAULT_OPTIONS, _extends$q({}, options, {
tagName: 'div',
controlType: 'block',
classNameSuffix: 'loading'
})));
this._options = Object.assign({}, options);
this.$container.classList.add(`${PREFIX_CLASS}-loading`, `${PREFIX_CLASS}-hide`); // 默认隐藏
this._html();
}
}
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){
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends$p.apply(this, arguments);
}
// 不放在服务器上 是因为有可能http加载失败
// prettier-ignore
const DEFAULT_POSTER = `data:image/jpeg;base64,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AAAAAAAAAAAAAACiiioooUKKAApzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFFFFIooUUKAArmAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFFFFRQooUKABXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKKKFRRQooUABeYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKKKKihRQoUABzgAAAAAAAAAAAAAAAAAAAAAAAAAAAABRQoqKKFFCgAOcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFFFFRQooUKABzgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoUUVFFCihQAOcAAAAAAAAAAAAAAAAAAAAAAAAAAAAACiiiooUUKFABzgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUKKKiihRQoAOcAAAAAAAAAAAAAAAAAAAAAAAAAAAAABRRRSUKKFCgBzgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFFFFRRQooUAOcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAooopFFFChQBzgAAAAAAAAAAAAAAAAAAAAAAAAAAAAACiiioooUKKAOcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUUUUiihRQoBzgAAAAAAAAAAAAAAAAAAAAAAAAAAAAABRRRUUKKFCgOcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKKKFRRQooUBzgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoooqKFFChQOcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFFCioooUUKBzgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUUUVFCihQoOcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAChRRUUUKKFBzgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKKKKihRQoUOcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAoooqKKFFChzgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFFFFJQooUKOcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUUUBQBQKH/xAAXAQEBAQEAAAAAAAAAAAAAAAAAAQID/9oACAECEAAAAOoCAASAAAAAAAAAAAAAAANgQAAyAAAAAAAAAAAAAAA2EAACQAAAAAAAAAAAAAADZAAAJAAAAAAAAAAAAAAANwAAAZAAAAAAAAAAAAAAA0AAAJAAAAAAAAAAAAAAANAAAIQAAAAAAAAAAAAAADQAAIEAAAAAAAAAAAAAAA0AAIBAAAAAAAAAAAAAAANAAIAQAAAAAAAAAAAAAADQAIAEAAAAAAAAAAAAAAA0AIAAIAAAAAAAAAAAAAANAIABSBAAAAAAAAAAAAAANAQAFEsBAAAAAAAAAAAAAA0EABNBAIAAAAAAAAAAAAADRAARoJYEAAAAAAAAAAAAAAoAELqBAQAAAAAAAAAAAAACgAgtCAgAAAAAAAAAAAAACgCLDQICAAAAAAAAAAAAAAKAiwNBAQAAAAAAAAAAAAAAoIsA0ECAAAAAAAAAAAAAACiLADQgIAAAAAAAAAAAAAAKiwANEBAAAAAAAAAAAAAAAAAC1AgAAAAAAAAAAAAAAAAAtgIAAAAAAAAAAAAAAAAAFBAAAAAAAAAAAAAAAAAAKEAAAAAAAAAAAAAAAAAAUgAAAAAAAAAAAAAAAAAAsAAAAAAAAAAAAAAtKMAAAAAAAAAAAAAAAAAaoFOYAAAAAAAAAAAAAAAAtoBTmAAAAAAAAAAAAAAAAaFAK5gAAAAAAAAAAAAAAAWgoBeYAAAAAAAAAAAAAAALQKAXmAAAAAAAAAAAAAAAFoBQDAAAAAAAAAAAAAAAAtAFAMAAAAAAAAAAAAAAAFUAKAwAAAAAAAAAAAAAAAUoAoDAAAAAAAAAAAAAAACigBQMAAAAAAAAAAAAAAAUFAFAwAAAAAAAAAAAAAABQUAKDAAAAAAAAAAAAAAACgoAoMAAAAAAAAAAAAAAAKCgBQwAAAAAAAAAAAAAAAUFAFDAAAAAAAAAAAAAAABQUAKMAAAAAAAAAAAAAAACgoAUwAAAAAAAAAAAAAAAFBQBTAAAAAAAAAAAAAAAAUFACsAAAAAAAAAAAAAAAAoKAKwAAAAAAAAAAAAAAACgoAXAAAAAAAAAAAAAAAAWUFAFwAAAAAAAAAAAAAAABQUAMgAAAAAAAAAAAAAAAsoKAMgAAAAAAAAAAAAAAAKCgDIAAAAAAAAAAAAAAABQUAyAAAAAAAAAAAAAAAAUFAMgAAAAAAAAAAAAAAACgoDIAAAAAAAAAAAAAAAAoKAyAAAAAAAAAAAAAAAAFBQMgAAAAAAAAAAAAAAAAoKDIAAAAAAAAAAAAAAAAKCgyAAAAAAAAAAAAAAAABQUMgAAAAAAAAAAAAAAAAUFDIAAAAAAAAAAAAAAAAAoD//EABYBAQEBAAAAAAAAAAAAAAAAAAABAv/aAAgBAxAAAADAAoigoAAAAAAAAAAAAAADIBSKAoAAAAAAAAAAAAAADIFIoAoAAAAAAAAAAAAAADIUigAUAAAAAAAAAAAAAADJSKAAUAAAAAAAAAAAAAADNIoAAoAAAAAAAAAAAAAACIUAAoAAAAAAAAAAAAAAAyUAApKAAAAAAAAAAAAAAAzQABUUAAAAAAAAAAAAAAAgABUUAAAAAAAAAAAAAAAIABUUAAAAAAAAAAAAAAACABUUAAAAAAAAAAAAAAAAgBUUBAoAAAAAAAAAAAAAAgFJQEBQAAAAAAAAAAAAAAgUlAJKFAAAAAAAAAAAAAACCooBIooAAAAAAAAAAAAAAIqKAGVCgAAAAAAAAAAAAAAIoAIBQAAAAAAAAAAAAAAIoACAoAAAAAAAAAAAAAAAAAM0KAAAAAAAAAAAAAAAAACBQAAAAAAAAAAAAAAAAAIKAAAAAAAAAAAAAAAAAAgoAAAAAAAAAAAAAAAAACFAAAAAAAAAAAAAAAAAAEUAAAAAAAAAAAAAAAAAASgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAloAAAAAAAAAAAAAAAAEQA0AAAAAAAAAAAAAAAAEgANAAAAAAAAAAAAAAAAElgANAAAAAAAAAAAAAAAAIlQANAAAAAAAAAAAAAAAAgSwANAAAAAAAAAAAAAAABASoANAAAAAAAAAAAAAAACAJYANAAAAAAAAAAAAAAABAIsANAAAAAAAAAAAAAAAEsASoA0AAAAAAAAAAAAAAAJYAlgDQAAAAAAAAAAAAAAAIAlQDQAAAAAAAAAAAAAAASwBLANAAAAAAAAAAAAAAAAQBKgNAAAAAAAAAAAAAAAAlgCWA0AAAAAAAAAAAAAAAAQCVA0AAAAAAAAAAAAAAABLAEsDQAAAAAAAAAAAAAAAAgEqDQAAAAAAAAAAAAAAACWAJYNAAAAAAAAAAAAAAAAEsAlQ0AAAAAAAAAAAAAAAASwBLDQAAAAAAAAAAAAAAAAlgEWNAAAAAAAAAAAAAAAACWAJU0AAAAAAAAAAAAAAAAEsASzQAAAAAAAAAAAAAAAAEASqAAAAAAAAAAAAAAAACWAJaAAAAAAAAAAAAAAAAAgCWgAAAAAAAAAAAAAAAASwBNAAAAAAAAAAAAAAAAACATQAAAAAAAAAAAAAAAACWAKAAAAAAAAAAAAAAAAAEAoAAAAAAAAAAAAAAAABLAKAAAAAAAAAAAAAAAAAJYCgAAAAAAAAAAAAAAAACWAoAAAAAAAAAAAAAAAAASwKAAAAAAAAAAAAAAAAAAg//EACgQAAEEAQIFBAMBAAAAAAAAAAEAAhFwMTBREhNAQYADECBQIWBh0P/aAAgBAQABPwD5QPeAoC/HURoOEi5SINyPFyOEi5Tcjs3I+5HYPmScm5HZuR1yOuR2Lkdi5Di5Di5Di5Di5Di5DchuR3vBUFQbdgrhRAnQgKFBtYNUAe51ItINJQAHRxZ4b8j0JFlgSgI+Z6IiyQJQEaB6MiyAI60ixgI0TbTRpHpjYY+iNhNGkbkPUmwG3IMaR8vRnSNtNzcjc3I3NyNzcjc3IM+ZIxcjbkFyi5AYuVpuWZuQGLlBuUG5QVNYQdlwO2XLcuU5co7rlHdcr+rlHdco7rlO3C5blwO2XC7Y/UzVQBPZD0yh6Q3QY3ZQB2+4BqUMcUPTHcoNA7ffypp8NJQYO6AA/RZUqVKlTSwYSg0C4Qw90ABcIYSgALhAJQaBcQZvcQEoNi4g2UBFxNbvcYbvcbWxcbRFxgXG0XGBcYE3IBFxgXGB5jgXGLkFxi5B5jjzHFyDzHFyD/AKp0pUqVKlSpUqVKlSpUqVK//EAB0RAAMAAgIDAAAAAAAAAAAAAAABEWBwEpCAoLD/2gAIAQIBAT8A30/QDhCeJ8zFLca7Hl0RQhCIiIjijjk8Jl8JuCfXf//EABoRAAICAwAAAAAAAAAAAAAAAAARAaAQYLD/2gAIAQMBAT8AtfzYjYxjyx7Q+5f/AP/Z`;
const POSTER_OPTIONS = {
poster: DEFAULT_POSTER
};
/**
* 封面控件
* @category Control
*/ class Poster extends Control {
/**
* 封面图片加载失败
* @param error
*/ _imgLoadErrorEvent(error) {
var _error_target;
// 封面加载失败， 一般只有自定义封面会出现这种情况
// 这里不做img src重置处理 防止无限循环
this._options.onLoadImgError == null ? void 0 : this._options.onLoadImgError.call(this._options, ((_error_target = error.target) == null ? void 0 : _error_target.getAttribute('src')) || '');
}
/**
* 设置封面 这里不对 poster 进行缓存，如果有值优先使用，如果没有值优先使用 初始化传入的值
* @param {string} poster 封面地址或 base64 数据
*/ setPoster(poster) {
var // eslint-disable-next-line @typescript-eslint/unbound-method
// prettier-ignore
_this_$container_querySelector;
poster = poster != null ? poster : this._options.poster;
if (poster === '') {
this.$container.innerHTML = '';
return;
}
this.$container.innerHTML = `<img class="${PREFIX_CLASS}-poster-img" src="${poster}" />`;
(_this_$container_querySelector = this.$container.querySelector(`.${PREFIX_CLASS}-poster-img`)) == null ? void 0 : _this_$container_querySelector.addEventListener("error", this._imgLoadErrorEvent);
}
/**
* 展示封面 这里不对 poster 进行缓存， 如果有值优先使用， 如果没有值优先使用 初始化传入的值
*/ show() {
if (this.$container) {
this.$container.style.display = 'flex';
this.$container.classList.remove(`${PREFIX_CLASS}-hide`);
}
}
/**
* 隐藏封面
*/ hide() {
var // eslint-disable-next-line @typescript-eslint/unbound-method
_this_$container_querySelector, _this_$container;
super.hide();
(_this_$container = this.$container) == null ? void 0 : (_this_$container_querySelector = _this_$container.querySelector(`.${PREFIX_CLASS}-poster-img`)) == null ? void 0 : _this_$container_querySelector.removeEventListener('error', this._imgLoadErrorEvent);
}
/**
* 销毁
*/ destroy() {
this.hide();
super.destroy();
}
constructor(options = {}){
super(Object.assign({}, POSTER_OPTIONS, _extends$p({}, options, {
tagName: 'div',
controlType: 'block',
classNameSuffix: 'poster'
})));
this._options = Object.assign({}, POSTER_OPTIONS, options);
this.$container.classList.add(`${PREFIX_CLASS}-poster`, `${PREFIX_CLASS}-hide`);
this._imgLoadErrorEvent = this._imgLoadErrorEvent.bind(this);
if (this._options.poster) {
this.setPoster(this._options.poster);
}
}
}
const Icons = {
/** 播放 */ play: `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" focusable="false" aria-hidden="true" data-icon="play">
<rect x="6.5" y="5.5" rx="1.25" width="2.5" height="13"/>
<rect x="15" y="5.5" rx="1.25" width="2.5" height="13"/>
</svg>`,
/** 暂停 */ pause: `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" focusable="false" aria-hidden="true" data-icon="pause"> <path d="M17.5 13.66L9.1 19.26C7.78 20.14 6 19.19 6 17.59L6 6.4C6 4.8 7.78 3.85 9.1 4.73L17.5 10.33C18.69 11.12 18.69 12.87 17.5 13.66Z" /></svg>`,
/** 音量 */ volume: (prefix)=>`<svg width="1em" height="1em" viewBox="0 0 24 24" stroke="currentColor" fill="none" focusable="false" aria-hidden="true" data-icon="volume">
<path class="${prefix}-icon-volume-muted" d="M20.57 9.69L16.07 14.19" stroke-width="1.500000" stroke-linejoin="round" stroke-linecap="round"/>
<path class="${prefix}-icon-volume-muted" d="M20.57 14.19L16.07 9.69" stroke-width="1.500000" stroke-linejoin="round" stroke-linecap="round"/>
<!-- 音低 -->
<path class="${prefix}-icon-volume-low" d="M15.53 15.97C16.69 15.25 17.49 13.75 17.49 12C17.49 10.25 16.69 8.75 15.53 8.02" stroke-width="1.500000" stroke-linejoin="round" stroke-linecap="round"/>
<!-- 音高 -->
<path class="${prefix}-icon-volume-high" d="M18.5 19.06C20.31 17.5 21.49 14.93 21.49 12C21.49 9.07 20.31 6.48 18.49 4.93" stroke-width="1.500000" stroke-linejoin="round" stroke-linecap="round"/>
<path d="M5.87 8.62L9.85 5.25C10.5 4.7 11.49 5.16 11.49 6.01L11.49 17.98C11.49 18.83 10.5 19.29 9.85 18.74L5.87 15.37" stroke-width="1.500000" stroke-linejoin="round" stroke-linecap="round"/>
<path d="M5.87 15.37L3.49 15.37C2.94 15.37 2.49 14.92 2.49 14.37L2.49 9.62C2.49 9.07 2.94 8.62 3.49 8.62L5.87 8.62" stroke-width="1.500000" stroke-linejoin="round" stroke-linecap="round"/>
</svg>`,
/** 全屏 */ mobileFullscreen: `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" focusable="false" aria-hidden="true" data-icon="mobile-fullscreen">
<path d="M4 2.9082L11 2.9082C12.5188 2.9082 13.75 4.1394 13.75 5.6582L13.75 17.6582C13.75 19.177 12.5188 20.4082 11 20.4082L4 20.4082C2.4812 20.4082 1.25 19.177 1.25 17.6582L1.25 5.6582C1.25 4.1394 2.4812 2.9082 4 2.9082ZM4 4.4082L11 4.4082C11.6903 4.4082 12.25 4.9679 12.25 5.6582L12.25 17.6582C12.25 18.3485 11.6903 18.9082 11 18.9082L4 18.9082C3.30969 18.9082 2.75 18.3485 2.75 17.6582L2.75 5.6582C2.75 4.9679 3.30969 4.4082 4 4.4082ZM22.1511 18.3113C22.1511 19.3595 21.2467 20.1652 20.1509 20.2362L19.993 20.2413L15.2939 20.2413C14.8798 20.2413 14.5439 19.9055 14.5439 19.4913C14.5439 19.1116 14.8262 18.7979 15.1921 18.7482L15.2939 18.7413L19.993 18.7413C20.344 18.7413 20.5962 18.5592 20.6432 18.3732L20.6511 18.3113L20.6511 12.4895C20.6511 12.3048 20.4338 12.1042 20.1062 12.066L19.993 12.0594L15.2939 12.0594C14.8798 12.0594 14.5439 11.7238 14.5439 11.3094C14.5439 10.9298 14.8262 10.616 15.1921 10.5663L15.2939 10.5594L19.993 10.5594C21.1055 10.5594 22.0605 11.3175 22.145 12.3416L22.1511 12.4895L22.1511 18.3113ZM10.3225 16.1035C10.3225 15.6893 9.98669 15.3535 9.57251 15.3535L5.84644 15.3535L5.74463 15.3604C5.37854 15.41 5.09644 15.7239 5.09644 16.1035C5.09644 16.5177 5.43225 16.8535 5.84644 16.8535L9.57251 16.8535L9.67432 16.8467C10.0404 16.797 10.3225 16.4832 10.3225 16.1035Z" clip-rule="evenodd" fill-rule="evenodd"/>
</svg>`,
fullscreen: `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" focusable="false" aria-hidden="true" data-icon="webFullscreen">
<path d="M18.4009 2.40125L5.59972 2.40125C4.74849 2.39276 3.9297 2.72729 3.32788 3.32935C2.72607 3.9314 2.39188 4.75031 2.40062 5.6015L2.40062 18.4015C2.3922 19.2527 2.7267 20.0715 3.32874 20.6733C3.93079 21.2751 4.74969 21.6093 5.60091 21.6006L18.4009 21.6006C19.2519 21.609 20.0705 21.2747 20.6723 20.6729C21.2741 20.0711 21.6084 19.2525 21.6 18.4015L21.6 5.60034C21.6084 4.74933 21.2741 3.93073 20.6723 3.32892C20.0705 2.72711 19.2519 2.39282 18.4009 2.40125ZM18.401 20.3213C19.4246 20.3213 20.321 19.4249 20.321 18.4014L20.321 5.60022C20.321 4.5766 19.4246 3.68024 18.401 3.68024L5.59987 3.68024C4.57631 3.68024 3.67993 4.5766 3.67993 5.60022L3.67993 18.4014C3.67993 19.4249 4.57631 20.3213 5.59987 20.3213L18.401 20.3213ZM14.5599 5.27087L18.3997 5.27087L18.3997 5.27209C18.7849 5.27087 19.0405 5.52527 19.0405 5.91168L19.0405 9.75153C19.0405 10.1331 18.7849 10.3887 18.401 10.3911C18.0158 10.3887 17.7602 10.1331 17.7602 9.75153L17.7602 7.44763L14.0487 11.1591C13.9313 11.2808 13.7695 11.3494 13.6005 11.3494C13.4315 11.3494 13.2697 11.2808 13.1523 11.1591C13.0292 11.0428 12.9594 10.8809 12.9594 10.7115C12.9594 10.5421 13.0292 10.3802 13.1523 10.2639L16.8638 6.55005L14.5599 6.55005C14.1735 6.54883 13.9179 6.29443 13.9203 5.91046C13.9179 5.52411 14.1735 5.26971 14.5599 5.27087ZM10.594 12.6625L6.88254 16.3751L6.88254 14.0712C6.88254 13.686 6.62695 13.4304 6.24297 13.4304C5.85898 13.4304 5.60338 13.686 5.60219 14.0712L5.60219 17.9111C5.60219 18.2939 5.85898 18.5483 6.24297 18.5507L10.0828 18.5507C10.4668 18.5483 10.7224 18.2939 10.7224 17.9099C10.7224 17.5247 10.4668 17.2691 10.0816 17.2703L7.77771 17.2703L11.4904 13.5588C11.6133 13.4421 11.6829 13.2801 11.6829 13.1107C11.6829 12.9412 11.6133 12.7791 11.4904 12.6625C11.3737 12.5396 11.2117 12.47 11.0422 12.47C10.8727 12.47 10.7107 12.5396 10.594 12.6625Z" clip-rule="evenodd" fill-rule="evenodd"/>
</svg>`,
exitFullscreen: `
<svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" focusable="false" aria-hidden="true" data-icon="exitWebFullscreen">
<path d="M18.4009 2.40125L5.59978 2.40125C4.74855 2.39276 3.92976 2.72729 3.32794 3.32935C2.72614 3.9314 2.39194 4.75031 2.40068 5.6015L2.40068 18.4015C2.39226 19.2527 2.72676 20.0715 3.3288 20.6733C3.93085 21.2751 4.74976 21.6093 5.60097 21.6006L18.4009 21.6006C19.252 21.609 20.0706 21.2747 20.6723 20.6729C21.2741 20.0711 21.6085 19.2525 21.6 18.4015L21.6 5.60034C21.6085 4.74933 21.2741 3.93073 20.6723 3.32892C20.0706 2.72711 19.252 2.39282 18.4009 2.40125ZM18.4012 20.3212C19.4247 20.3212 20.3211 19.4248 20.3211 18.4012L20.3211 5.6001C20.3211 4.57648 19.4247 3.68011 18.4012 3.68011L5.59999 3.68011C4.57643 3.68011 3.68005 4.57648 3.68005 5.6001L3.68005 18.4012C3.68005 19.4248 4.57643 20.3212 5.59999 20.3212L18.4012 20.3212ZM17.4401 11.3494L13.6002 11.3494L13.6002 11.3483C13.215 11.3494 12.9594 11.095 12.9594 10.7087L12.9594 6.86877C12.9594 6.48718 13.215 6.23163 13.599 6.22925C13.9842 6.23163 14.2398 6.48718 14.2398 6.86877L14.2398 9.17273L17.9512 5.46124C18.0686 5.3396 18.2304 5.27087 18.3994 5.27087C18.5685 5.27087 18.7303 5.3396 18.8476 5.46124C18.9708 5.57751 19.0406 5.73944 19.0406 5.90881C19.0406 6.07825 18.9708 6.24011 18.8476 6.35645L15.1362 10.0703L17.4401 10.0703C17.8265 10.0715 18.082 10.3259 18.0797 10.7099C18.082 11.0963 17.8265 11.3506 17.4401 11.3494ZM6.69115 18.358L10.4026 14.6454L10.4026 16.9493C10.4026 17.3345 10.6582 17.5901 11.0422 17.5901C11.4262 17.5901 11.6818 17.3345 11.683 16.9493L11.683 13.1094C11.683 12.7266 11.4262 12.4722 11.0422 12.4698L7.20233 12.4698C6.81834 12.4722 6.56276 12.7266 6.56276 13.1106C6.56276 13.4958 6.81834 13.7514 7.20354 13.7502L9.50746 13.7502L5.79478 17.4617C5.67188 17.5784 5.60228 17.7404 5.60228 17.9099C5.60228 18.0793 5.67188 18.2413 5.79478 18.358C5.91145 18.481 6.07349 18.5505 6.24297 18.5505C6.41243 18.5505 6.57446 18.481 6.69115 18.358Z" clip-rule="evenodd" fill-rule="evenodd"/>
</svg>`,
/** 全屏 */ globalFullscreen: `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" focusable="false" aria-hidden="true" data-icon="fullscreen">
<path d="M8 4L6 4C4.89 4 4 4.89 4 6L4 8" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
<path d="M4 16L4 18C4 19.1 4.89 20 6 20L8 20" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
<path d="M16 20L18 20C19.1 20 20 19.1 20 18L20 16" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
<path d="M20 8L20 6C20 4.89 19.1 4 18 4L16 4" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
</svg>`,
/** 退出全屏 */ exitGlobalFullscreen: `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" focusable="false" aria-hidden="true" data-icon="exitFullscreen">
<path d="M4 8L6 8C7.1 8 8 7.1 8 6L8 4" stroke-width="1.488819" stroke-linejoin="round" stroke-linecap="round"/>
<path d="M8 20L8 18C8 16.89 7.1 16 6 16L4 16" stroke-width="1.488819" stroke-linejoin="round" stroke-linecap="round"/>
<path d="M20 16L18 16C16.89 16 16 16.89 16 18L16 20" stroke-width="1.488819" stroke-linejoin="round" stroke-linecap="round"/>
<path d="M16 4L16 6C16 7.1 16.89 8 18 8L20 8" stroke-width="1.488819" stroke-linejoin="round" stroke-linecap="round"/>
</svg>`,
/** 关闭 */ close: `<svg width="1em" height="1em" viewBox="0 0 24 24" stroke="currentColor" focusable="false" aria-hidden="true" data-icon="close"><path d="M6.34 6.34L17.65 17.65" stroke-width="1.5" stroke-linecap="round"/><path d="M6.34 17.65L17.65 6.34" stroke-width="1.5" stroke-linecap="round"/></svg>`,
closeCircleOutLined: `<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" focusable="false" aria-hidden="true" data-icon="close-circle">
<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 2ZM10.5844 5.40312C10.6531 5.40312 10.7094 5.45937 10.7094 5.52812C10.7094 5.55781 10.7 5.5875 10.6812 5.60938L8.64844 8.03125L10.6781 10.4516C10.6969 10.475 10.7078 10.5031 10.7078 10.5328C10.7078 10.6031 10.6516 10.6578 10.5828 10.6578L9.55156 10.6531L8 8.80312L6.44844 10.6547L5.41563 10.6594C5.34688 10.6594 5.29063 10.6031 5.29063 10.5344C5.29063 10.5047 5.30156 10.4766 5.32031 10.4531L7.35313 8.03281L5.32031 5.61094C5.30156 5.5875 5.29063 5.55937 5.29063 5.52969C5.29063 5.45937 5.34688 5.40469 5.41563 5.40469L6.44844 5.40937L8 7.25937L9.55313 5.40781L10.5844 5.40312Z" fill-rule="evenodd" />
</svg>`,
/** 云台 */ ptz: `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" focusable="false" aria-hidden="true" data-icon="ptz">
<circle cx="12" cy="12" r="2.771739" stroke-width="1.5"/>
<path d="M9.06 5.14L10.76 3.8C11.48 3.23 12.51 3.23 13.23 3.8L14.93 5.14" stroke-width="1.5" stroke-linecap="round"/>
<path d="M4.87 14.93L3.54 13.23C2.97 12.51 2.97 11.48 3.54 10.76L4.87 9.06" stroke-width="1.5" stroke-linecap="round"/>
<path d="M18.91 14.93L20.24 13.23C20.81 12.51 20.81 11.48 20.24 10.76L18.91 9.06" stroke-width="1.5" stroke-linecap="round"/>
<path d="M9.06 18.69L10.76 20.02C11.48 20.59 12.51 20.59 13.23 20.02L14.93 18.69" stroke-width="1.5" stroke-linecap="round"/>
</svg>`,
/** 下载 */ download: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" focusable="false" aria-hidden="true" data-icon="download">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m20,14.83l0,3.67c0,0.55 -0.45,1 -1,1l-14,0c-0.56,0 -1,-0.45 -1,-1l0,-3.67"/>
<path fill="currentColor" d="m11.125,9.66357l-2.59094,0c-0.44544,0 -0.66846,0.53853 -0.35352,0.85353l3.45956,3.4595c0.1952,0.1953 0.5119,0.1953 0.7071,0l3.4596,-3.4595c0.3149,-0.315 0.0919,-0.85353 -0.3536,-0.85353l-2.5782,0l0,-5.95654c0,-0.48315 -0.3917,-0.875 -0.875,-0.875c-0.4833,0 -0.875,0.39185 -0.875,0.875l0,5.95654z"/>
</svg>`,
/** sdk 卡 */ sdk: `<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" focusable="false" aria-hidden="true" data-icon="sdk">
<path d="M6.20253 2.50012L11.6496 2.50012C12.2335 2.50012 12.7939 2.72827 13.2069 3.13391L15.3547 5.24329C15.7677 5.64893 16 6.19934 16 6.77271L16 15.1062C16 16.3011 15.0142 17.2694 13.7975 17.2694L6.20253 17.2694C4.98578 17.2694 4 16.3011 4 15.1062L4 4.66333C4 3.46826 4.98578 2.50012 6.20253 2.50012ZM8.07051 6.09814C8.02467 5.76025 7.73502 5.49976 7.38452 5.49976C7.00217 5.49976 6.69221 5.80969 6.69221 6.19202L6.69221 8.49976L6.69853 8.59375C6.74437 8.93164 7.03403 9.19202 7.38452 9.19202C7.76688 9.19202 8.07683 8.88208 8.07683 8.49976L8.07683 6.19202L8.07051 6.09814ZM9.69238 5.49976C10.0429 5.49976 10.3325 5.76025 10.3784 6.09814L10.3847 6.19202L10.3847 8.49976C10.3847 8.88208 10.0747 9.19202 9.69238 9.19202C9.34189 9.19202 9.05223 8.93164 9.00639 8.59375L9.00008 8.49976L9.00008 6.19202C9.00008 5.80969 9.31003 5.49976 9.69238 5.49976ZM12.686 6.09814C12.6402 5.76025 12.3505 5.49976 12 5.49976C11.6176 5.49976 11.3077 5.80969 11.3077 6.19202L11.3077 8.49976L11.314 8.59375C11.3598 8.93164 11.6495 9.19202 12 9.19202C12.3824 9.19202 12.6923 8.88208 12.6923 8.49976L12.6923 6.19202L12.686 6.09814Z" clip-rule="evenodd" fill-rule="evenodd"/>
</svg>`,
/** 云存储 */ cloudRec: `<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" focusable="false" aria-hidden="true" data-icon="cloud">
<path d="M9.76489 4.00439C7.65723 4.08447 5.79883 5.23486 4.89697 6.94995L4.78638 7.17236C2.60205 7.62524 1 9.40649 1 11.5239C1 14.0032 3.17749 16 5.84619 16L9.32983 16L9.32983 13.3784L7.66479 13.3784C7.21924 13.3784 6.99634 12.8398 7.31128 12.5249L9.63892 10.197C9.83423 10.002 10.1509 10.002 10.3462 10.197L12.6738 12.5249C12.9888 12.8398 12.7659 13.3784 12.3203 13.3784L10.6553 13.3784L10.6553 16L14.9846 16C17.1948 16 19 14.3445 19 12.2856L18.9954 12.1052C18.9058 10.3704 17.533 8.95557 15.7456 8.63818L15.6372 8.62036L15.6152 8.4624C15.2087 5.93188 12.8438 4 10 4L9.76489 4.00439Z" clip-rule="evenodd" fill-rule="evenodd"/>
</svg>`,
/** 云录制 */ cloudRecord: `<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" focusable="false" aria-hidden="true" data-icon="cloud-record">
<path d="M9.76489 4.00439C7.65723 4.08447 5.79883 5.23486 4.89697 6.94995L4.78638 7.17236C2.60205 7.62524 1 9.40649 1 11.5239C1 14.0032 3.17749 16 5.84619 16L14.9846 16C17.1948 16 19 14.3445 19 12.2856L18.9954 12.1052C18.9058 10.3704 17.533 8.95557 15.7456 8.63818L15.6372 8.62036L15.6152 8.4624C15.2087 5.93188 12.8438 4 10 4L9.76489 4.00439ZM10.8674 13.9116L6.89038 13.9116C6.26294 13.9116 5.75391 13.3889 5.75391 12.7449L5.75391 9.24487C5.75391 8.60034 6.26294 8.07812 6.89038 8.07812L10.8674 8.07812C11.4954 8.07812 12.0039 8.60034 12.0039 9.24487L12.0039 10.2937C12.2932 10.0627 12.9229 9.63184 13.4836 9.271C13.8145 9.05811 14.2461 9.24219 14.2461 9.63599L14.2461 12.3655C14.2461 12.759 13.8142 12.9434 13.4836 12.7307C12.9321 12.3755 12.303 11.9438 12.0039 11.707L12.0039 12.7449C12.0039 13.3889 11.4954 13.9116 10.8674 13.9116Z" clip-rule="evenodd" fill-rule="evenodd"/>
</svg>`,
/** 回退 */ playBack: `<svg width="1em" height="1em" viewBox="0 0 26.8701 26.8701" fill="none" stroke="currentColor" focusable="false" aria-hidden="true" data-icon="play-back">
<path d="M8.48 4.24C8.48 4.24 7.39 8.16 7.77 7.77C11.29 4.26 16.99 4.26 20.5 7.77C24.02 11.29 24.02 16.99 20.5 20.5C16.99 24.02 11.29 24.02 7.77 20.5C6.03 18.76 5.16 16.49 5.14 14.21" stroke-width="1.5" stroke-linecap="round"/>
</svg>`,
/** 前进 */ playForward: `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" focusable="false" aria-hidden="true" data-icon="play-forward">
<path d="M19.58 7.28C18.01 4.71 15.18 2.99 11.95 2.99C7 2.99 3 7 3 11.95C3 16.89 7 20.9 11.95 20.9C16.51 20.9 20.27 17.48 20.82 13.07" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
<path d="M19.56 4.22L19.56 7.29" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
<path d="M16.5 7.29L19.56 7.29" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
</svg>`,
/** 过滤 */ filter: `<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" focusable="false" aria-hidden="true" data-icon="filter">
<path d="M12.57 9.92L16.31 5.76C16.55 5.49 16.69 5.15 16.69 4.79C16.69 3.98 16.03 3.33 15.23 3.33L4.79 3.33C4.43 3.33 4.09 3.46 3.82 3.7L3.72 3.79C3.21 4.33 3.19 5.18 3.7 5.75L7.38 9.91L7.38 15.66C7.38 16.11 7.7 16.51 8.14 16.63L11.32 17.43C11.95 17.59 12.57 17.11 12.57 16.46L12.57 9.92ZM4.88 4.83L8.88 9.35L8.88 15.27L11.07 15.82L11.07 9.34L15.13 4.83L4.88 4.83Z" fill-rule="evenodd"/>
</svg>`,
/** 箭头 */ arrow: `<svg width="1em" height="1em" viewBox="0 0 30 30" fill="none" stroke="currentColor" focusable="false" aria-hidden="true" data-icon="arrow">
<path d="M23 19L15 12L7 19" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
</svg>`,
/** 更多 */ more: `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" focusable="false" aria-hidden="true" data-icon="more">
<path d="M4 6.8L20.8 6.8" stroke-width="1.5" stroke-linecap="round"/>
<path d="M4 12.39L12.4 12.39" stroke-width="1.5" stroke-linecap="round"/>
<path d="M4 18L8.19 18" stroke-width="1.5" stroke-linecap="round"/>
</svg>`,
moreDot: `<svg width="1em" height="1em" viewBox="0 0 20 20" fill="currentColor" focusable="false" aria-hidden="true" data-icon="more-dot">
<path d="M8.75 3.75C8.75 3.05964 9.30964 2.5 10 2.5C10.6904 2.5 11.25 3.05964 11.25 3.75C11.25 4.44036 10.6904 5 10 5C9.30964 5 8.75 4.44036 8.75 3.75ZM8.75 10C8.75 9.30964 9.30964 8.75 10 8.75C10.6904 8.75 11.25 9.30964 11.25 10C11.25 10.6904 10.6904 11.25 10 11.25C9.30964 11.25 8.75 10.6904 8.75 10ZM10 15C9.30964 15 8.75 15.5596 8.75 16.25C8.75 16.9404 9.30964 17.5 10 17.5C10.6904 17.5 11.25 16.9404 11.25 16.25C11.25 15.5596 10.6904 15 10 15Z" fill-rule="evenodd" />
</svg>`,
minusCircle: `<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" aria-hidden="true" data-icon="minus-circle">
<path fill="currentColor" d="M10 3.75C13.4518 3.75 16.25 6.54822 16.25 10C16.25 13.4518 13.4518 16.25 10 16.25C6.54822 16.25 3.75 13.4518 3.75 10C3.75 6.54822 6.54822 3.75 10 3.75ZM10 5C7.23857 5 5 7.23858 5 10C5 12.7614 7.23857 15 10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5Z" fill-rule="evenodd" />
<path stroke="currentColor" d="M7.46729 10.0588L12.4673 10.0588" stroke-linecap="round" stroke-width="1.25" />
</svg>`,
plusCircle: `<svg width="1em" height="1em" viewBox="0 0 20 20" focusable="false" aria-hidden="true" data-icon="plus-circle">
<path fill="currentColor" d="M10 3.75C13.4518 3.75 16.25 6.54822 16.25 10C16.25 13.4518 13.4518 16.25 10 16.25C6.54822 16.25 3.75 13.4518 3.75 10C3.75 6.54822 6.54822 3.75 10 3.75ZM10 5C7.23857 5 5 7.23858 5 10C5 12.7614 7.23857 15 10 15C12.7614 15 15 12.7614 15 10C15 7.23858 12.7614 5 10 5Z" fill-rule="evenodd" />
<path stroke="currentColor" d="M7.46729 10.0588L12.4673 10.0588" stroke-linecap="round" stroke-width="1.25" />
<path stroke="currentColor" d="M0 0L5 0" stroke-linecap="round" stroke-width="1.25" transform="matrix(0,1,-1,0,9.96729,7.55884)" />
</svg>`,
/** 录制/摄像机 */ record: `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" focusable="false" aria-hidden="true" data-icon="record">
<path d="M4.53 19C3.03 19 1.8 17.74 1.8 16.2L1.8 7.8C1.8 6.25 3.03 5 4.53 5L14.08 5C15.58 5 16.8 6.25 16.8 7.8L16.8 16.2C16.8 17.74 15.58 19 14.08 19L4.53 19Z" stroke-width="1.5" stroke-linejoin="round"/>
<path d="M17.25 13.64C17.94 14.2 18.97 15.03 20.36 16.15C21.09 16.74 22.19 16.21 22.19 15.27L22.19 8.72C22.19 7.78 21.09 7.25 20.36 7.84C18.99 8.94 17.96 9.77 17.28 10.32" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
</svg>`,
recordCircle: `<svg width="1em" height="1em" viewBox="0 0 14 14" fill="curr