${replyData.content.pictures ? `
` : ""}
${getImageItems(replyData.content.pictures)}
`,
state: ``,
indicator: `
`,
fullscreenWebOn: ``,
fullscreenWebOff: ``
};
const ArtPlayerCommonOption = () => {
return {
/** 容器 */
container: "",
/** 视频地址 */
url: "",
/** 视频封面 */
// poster: 'https://artplayer.org/assets/sample/poster.jpg',
/** 默认音量 */
volume: 1,
/** 是否是直播 */
isLive: false,
/** 是否静音 */
muted: false,
/** 是否自动播放 */
autoplay: false,
/** 是否显示视频画中画按钮 */
pip: false,
/** 播放器是否自动运行迷你模式 */
autoMini: false,
/** 是否显示截图按钮 */
screenshot: false,
/** 是否显示视频设置按钮 */
setting: true,
/** 是否循环播放 */
loop: false,
/** 是否显示视频翻转按钮 */
flip: true,
/** 是否显示视频播放速率按钮 */
playbackRate: true,
/** 播放器是否自动调整大小(可能有bug) */
autoSize: false,
/** 是否显示视频宽高比按钮 */
aspectRatio: false,
/** 是否显示视频窗口全屏按钮 */
fullscreen: true,
/** 是否显示视频网页全屏按钮 */
fullscreenWeb: true,
/** 是否启用播放器字幕偏移 */
subtitleOffset: true,
/** 是否启用播放器迷你进度条 */
miniProgressBar: true,
/** 保证页面只存在一个实例 */
mutex: false,
/** UI中是否使用背景 */
backdrop: true,
/** 移动端是否使用playsInline */
playsInline: false,
/** 是否使用自动播放 */
autoPlayback: true,
/** 是否使用airplay */
airplay: true,
/** 是否在移动端显示一个 锁定按钮 ，用于隐藏底部 控制栏 */
lock: true,
/** 是否在移动端添加长按视频快进功能 */
fastForward: true,
/** 播放器颜色主题 */
theme: BilibiliData.theme,
/** 播放器语言 */
lang: navigator.language.toLowerCase(),
/** 覆盖video属性 */
moreVideoAttr: {
crossOrigin: "anonymous"
},
/** 自定义图标 */
icons: ArtPlayerBiliBiliIcon
};
};
const TAG$1 = "[artplayer-plugin-quality]：";
const ArtPlayer_PLUGIN_QUALITY_KEY = "artplayer-plugin-quality";
const VideoCodingCodeMap = {
AVC: 7,
HEVC: 12,
AV1: 13
};
class VideoEncoding {
constructor(art, from) {
__publicField(this, "art");
__publicField(this, "from");
this.art = art;
this.from = from;
}
/**
* 添加设置界面
*/
addSetting() {
const that = this;
let userChooseVideoCodingCode = this.getUserChooseVideoCodingCode();
let selectorList = [
{
html: "AV1",
value: VideoCodingCodeMap["AV1"]
},
{
html: "HEVC",
value: VideoCodingCodeMap["HEVC"]
},
{
html: "AVC",
value: VideoCodingCodeMap["AVC"]
}
].map(
(it) => Object.assign(it, {
default: it.value === userChooseVideoCodingCode
})
);
let findValue = selectorList.find((it) => it.default);
if (!findValue) {
selectorList = selectorList.map((it) => {
it.default = it.value === VideoCodingCodeMap.AV1;
return it;
});
}
let tooltip = selectorList.find((it) => it.default);
this.art.setting.add({
name: "video-playback-codeid",
html: "播放策略",
tooltip: tooltip.html,
icon: ``,
selector: selectorList,
onSelect: function(item) {
let videoCodingCode = item.value;
that.setCurrentVideoCodingCode(videoCodingCode);
that.onSettingSelect(videoCodingCode);
return item.html;
}
});
}
/**
* 菜单选项选中后的回调
*/
onSettingSelect(selectValue) {
}
get storageVideoCodingKey() {
return `bili-${this.from}-artplayer-videoCodingCode`;
}
/**
* 设置当前视频编码
*/
setCurrentVideoCodingCode(videoCodingCode) {
this.art.storage.set(this.storageVideoCodingKey, videoCodingCode);
}
/**
* 获取用户选择的视频编码
*/
getUserChooseVideoCodingCode() {
let codingCode = this.art.storage.get(this.storageVideoCodingKey) || VideoCodingCodeMap.AV1;
if (!Object.values(VideoCodingCodeMap).includes(codingCode)) {
console.error(
TAG$1 + "意外情况，选择的编码格式不是允许的编码，将强制使用默认(av1)，防止过滤掉的视频链接为空：" + codingCode
);
codingCode = VideoCodingCodeMap.AV1;
}
return codingCode;
}
}
class VideoQuality extends VideoEncoding {
constructor(art, from) {
super(art, from);
__publicField(this, "$data", {
qualityOption: null,
/** 处理后的画质列表 */
qualityOptionList: [],
/** 当前选中的画质信息 */
currentSelectQualityInfo: null,
/** 当前选中的画质配置 */
currentQualityOption: null
});
super.addSetting();
}
/**
* 设置当前画质配置数据
*/
setCurrentQualityOption(qualityOption = null) {
this.$data.currentQualityOption = null;
this.$data.currentQualityOption = qualityOption;
}
/**
* 获取存储键
*/
getStorageKey(from) {
return `artplayer-quality-${from}`;
}
/**
* 更新画质信息
*/
update(option) {
this.$data.qualityOption = null;
this.$data.qualityOption = option;
this.$data.currentSelectQualityInfo = null;
this.$data.qualityOptionList = [];
this.setCurrentQualityOption();
if (option.qualityList.length) {
let currentSelectQualityInfo = this.updateQualityInfo();
this.addControls();
this.art.url = currentSelectQualityInfo.url;
} else {
this.removeControls();
}
}
/**
* 获取面板配置
*/
getControlsOption() {
const that = this;
let selectorList = this.$data.qualityOptionList.map((itemInfo, index) => {
var _a2;
return {
default: index === ((_a2 = this.$data.currentSelectQualityInfo) == null ? void 0 : _a2.index),
html: itemInfo.html,
url: itemInfo.url,
quality: itemInfo.quality,
frameRate: itemInfo.frameRate,
mimeType: itemInfo.mimeType,
codecid: itemInfo.codecid,
codecs: itemInfo.codecs,
bandwidth: itemInfo.bandwidth
};
});
const controlsOption = {
name: ArtPlayer_PLUGIN_QUALITY_KEY,
index: 10,
position: "right",
html: this.$data.currentSelectQualityInfo.html,
selector: selectorList,
onSelect: function(selector) {
let itemInfo = selector;
console.log(TAG$1 + "切换画质", itemInfo);
that.art.switchQuality(itemInfo.url);
that.art.storage.set(
that.getStorageKey(that.$data.qualityOption.from),
{
quality: itemInfo.quality
}
);
that.setCurrentQualityOption({
html: itemInfo.html,
url: itemInfo.url,
quality: itemInfo.quality,
frameRate: itemInfo.frameRate,
mimeType: itemInfo.mimeType,
codecid: itemInfo.codecid,
codecs: itemInfo.codecs,
bandwidth: itemInfo.bandwidth
});
return selector.html;
}
};
return controlsOption;
}
/**
* 添加面板
*/
addControls() {
if (this.isAddControls()) {
this.updateQualityControls();
} else {
let controlOption = this.getControlsOption();
this.art.controls.add(controlOption);
}
}
/**
* 更新画质信息
*/
updateQualityInfo() {
let userChooseVideoCodingCode = this.getUserChooseVideoCodingCode();
let qualityList = this.$data.qualityOption.qualityList.filter(
(item) => item.codecid === userChooseVideoCodingCode
);
if (qualityList.length === 0) {
qualityList = this.$data.qualityOption.qualityList;
}
qualityList.sort((leftItem, rightItem) => {
return rightItem.quality - leftItem.quality;
});
this.$data.qualityOptionList = [];
this.$data.qualityOptionList = qualityList;
let firstQualityInfo = qualityList[0];
const storageKey = this.getStorageKey(this.$data.qualityOption.from);
const storageQualityInfo = this.art.storage.get(
storageKey
);
let currentSelectQualityInfo = {
index: 0,
html: firstQualityInfo.html,
/** 播放的地址 */
url: firstQualityInfo.url
};
this.setCurrentQualityOption(qualityList[0]);
if (storageQualityInfo) {
const findQualityIndex = qualityList.findIndex(
(item) => item.quality === storageQualityInfo.quality
);
if (findQualityIndex !== -1) {
const findQuality = qualityList[findQualityIndex];
currentSelectQualityInfo.index = findQualityIndex;
currentSelectQualityInfo.url = findQuality.url;
currentSelectQualityInfo.html = findQuality.html;
this.setCurrentQualityOption(findQuality);
} else {
console.warn(TAG$1 + "没有找到上次选的画质，使用当前默认第一个画质");
}
}
this.$data.currentSelectQualityInfo = null;
this.$data.currentSelectQualityInfo = currentSelectQualityInfo;
return currentSelectQualityInfo;
}
/**
* 更新画质切换面板
*/
updateQualityControls() {
let controlOption = this.getControlsOption();
console.log(
TAG$1 + "更新画质切换面板信息",
this.$data.qualityOptionList,
this.$data.currentQualityOption
);
this.art.controls.update(controlOption);
}
/**
* 移除画质切换面板
*/
removeControls() {
if (this.isAddControls()) {
this.art.controls.remove(ArtPlayer_PLUGIN_QUALITY_KEY);
}
}
/**
* 是否已经添加了面板
*/
isAddControls() {
return Reflect.has(this.art.controls, ArtPlayer_PLUGIN_QUALITY_KEY);
}
onSettingSelect(selectValue) {
this.updateQualityInfo();
this.updateQualityControls();
if (this.$data.currentSelectQualityInfo) {
this.art.url = this.$data.currentSelectQualityInfo.url;
}
}
}
const artplayPluginQuality = (option) => {
return (art) => {
let videoQuality = new VideoQuality(art, option.from);
videoQuality.update(option);
return {
name: ArtPlayer_PLUGIN_QUALITY_KEY,
update(option2) {
videoQuality.update(option2);
},
getCurrentQualityOption() {
return videoQuality.$data.currentQualityOption;
}
};
};
};
const Toast = {
$data: {
art: null
},
$key: {
plugin_KEY: "artplayer-plugin-toast"
},
$flag: {
isInitCSS: false
},
$config: {
/** 默认的toast的className */
originToast: "art-layer-auto-playback",
/** 让Toast隐藏的className */
hideClassName: "art-toast-hide-opacity",
/** 自定义的toast的class，避免和页面原有的toast冲突 */
prefix: "mplayer-toast-gm"
},
$el: {
get $originPlayer() {
return document.querySelector(
".art-video-player .art-layers"
);
}
},
/**
* 弹出吐司
* @param config
*/
toast(config) {
if (typeof config === "string") {
config = {
text: config
};
}
this.initCSS();
let $parent = config.parent ?? this.$el.$originPlayer;
if (!$parent) {
throw new TypeError("toast parent is null");
}
this.mutationMPlayerOriginToast($parent);
let $toast = domutils.createElement("div", {
"data-from": "gm"
});
domutils.addClass($toast, this.$config.prefix);
if (config.showCloseBtn) {
let $closeBtn = domutils.createElement("div", {
className: this.$config.prefix + "-close",
innerHTML: (
/*html*/
`
`
)
});
$toast.appendChild($closeBtn);
domutils.on(
$closeBtn,
"click",
(event) => {
utils.preventEvent(event);
this.closeToast($toast);
},
{
capture: true
}
);
}
let $text = domutils.createElement("span", {
className: this.$config.prefix + "-text",
innerText: config.text
});
$toast.appendChild($text);
if (typeof config.timeText === "string" && config.timeText.trim() != "") {
let $time = domutils.createElement("span", {
className: this.$config.prefix + "-time",
innerText: config.timeText
});
$toast.appendChild($time);
}
if (typeof config.jumpText === "string" && config.jumpText.trim() != "") {
let $jump = domutils.createElement("span", {
className: this.$config.prefix + "-jump",
innerText: config.jumpText
});
$toast.appendChild($jump);
domutils.on(
$jump,
"click",
(event) => {
if (typeof config.jumpClickCallback === "function") {
utils.preventEvent(event);
config.jumpClickCallback(event);
}
},
{
capture: true
}
);
}
this.setTransitionendEvent($toast, config);
let timeout = typeof config.timeout === "number" && !isNaN(config.timeout) ? config.timeout : 3500;
$parent.appendChild($toast);
let timeoutId = setTimeout(() => {
this.closeToast($toast);
}, timeout);
return {
$toast,
timeoutId,
close: () => {
clearTimeout(timeoutId);
this.closeToast($toast);
}
};
},
/**
* 初始化css
*/
initCSS() {
if (this.$flag.isInitCSS) {
return;
}
this.$flag.isInitCSS = true;
addStyle(
/*css*/
`
.${this.$config.prefix}.mplayer-show {
opacity: 1;
visibility: visible;
z-index: 40;
}
.mplayer-toast, .${this.$config.prefix} {
-webkit-transition-property: opacity, bottom;
transition-property: opacity, bottom;
}
.${this.$config.prefix} {
backdrop-filter: saturate(180%) blur(20px);
background-color: #000000bf !important;
border-radius: var(--art-border-radius);
/* bottom: 48px; */
bottom: calc( calc( var(--art-control-height) + var(--art-bottom-gap) ) * 1 + 10px);
opacity: 1;
overflow: hidden;
padding: 10px;
gap: 10px;
line-height: 1;
position: absolute;
text-align: center;
-webkit-transition: opacity .3s;
transition: opacity .3s;
left: var(--art-padding);
display: flex;
align-items: center;
pointer-events: auto;
}
.art-video-player.art-backdrop .${this.$config.prefix}{
backdrop-filter: saturate(180%) blur(20px);
background-color: #000000bf !important;
}
.${this.$config.prefix}-close {
cursor: pointer;
justify-content: center;
align-items: center;
display: flex;
}
.${this.$config.prefix}-close svg{
fill: var(--art-theme);
width: 15px;
height: 15px;
}
.${this.$config.prefix}-jump {
color: var(--art-theme);
cursor: pointer;
}
`
);
addStyle(
/*css*/
`
.${this.$config.hideClassName}{
opacity: 0;
visibility: hidden;
}
`
);
},
/**
* 观察mplayer
* 用于关闭页面自己的toast
* 动态更新自己的toast位置
*/
mutationMPlayerOriginToast($parent) {
let $mplayer = this.$el.$originPlayer;
if (!$mplayer) {
return;
}
if ($mplayer.hasAttribute("data-mutation")) {
return;
}
log.success(`添加观察器，动态更新toast的位置`);
$mplayer.setAttribute("data-mutation", "gm");
utils.mutationObserver($mplayer, {
config: {
subtree: true,
childList: true
},
immediate: true,
callback: () => {
this.updatePageToastBottom();
}
});
},
/**
* 更新页面上的bottom的位置
*/
updatePageToastBottom() {
let pageToastList = Array.from(
document.querySelectorAll(`.${this.$config.prefix}`)
).concat(
Array.from(
document.querySelectorAll(
".".concat(this.$config.originToast)
)
)
);
if (pageToastList.length) {
pageToastList.length - 1;
pageToastList.forEach(($pageToast, index) => {
$pageToast.setAttribute("data-transition", "move");
$pageToast.style.bottom = `calc( calc( var(--art-control-height) + var(--art-bottom-gap) ) * ${index + 1} + 10px)`;
});
}
},
/**
* 关闭吐司
*/
closeToast($ele) {
$ele.classList.add(this.$config.hideClassName);
},
/**
* 获取事件名称列表
* @private
*/
getTransitionendEventNameList() {
return [
"webkitTransitionEnd",
"mozTransitionEnd",
"MSTransitionEnd",
"otransitionend",
"transitionend"
];
},
/**
* 监听过渡结束
* @private
*/
setTransitionendEvent($toast, config) {
let that = this;
let animationEndNameList = this.getTransitionendEventNameList();
domutils.on(
$toast,
animationEndNameList,
function(event) {
let dataTransition = $toast.getAttribute("data-transition");
if ($toast.classList.contains(that.$config.hideClassName)) {
if (typeof config === "object" && typeof (config == null ? void 0 : config.closeCallback) === "function") {
config.closeCallback();
}
$toast.remove();
return;
}
if (dataTransition === "move") {
$toast.removeAttribute("data-transition");
return;
}
},
{
capture: true
}
);
}
};
const artplayerPluginToast = (option) => {
return (art) => {
Toast.$data.art = art;
return {
name: Toast.$key.plugin_KEY,
toast(...args) {
return Toast.toast(...args);
}
};
};
};
const ArtPlayer_PLUGIN_TOAST_KEY = Toast.$key.plugin_KEY;
class VideoStatistics {
constructor(art, option) {
__publicField(this, "art");
__publicField(this, "option");
__publicField(this, "$key", {
plugin_KEY: "artplayer-plugin-videoStatistics",
setting_name: "video-statistics"
});
__publicField(this, "$data", {
intervalId: void 0
});
this.art = art;
this.option = option;
this.addSetting();
}
/**
* 添加设置面板菜单
*/
addSetting() {
this.art.setting.add({
name: this.$key.setting_name,
icon: "",
html: "视频统计信息",
mounted: ($setting) => {
let $leftIcon = $setting.querySelector(
".art-setting-item-left-icon"
);
$leftIcon.innerHTML = /*html*/
`
`.trim();
this.art.proxy(
$setting,
"click",
(event) => {
event.stopPropagation();
event.stopImmediatePropagation();
event.preventDefault();
this.art.setting.show = false;
if (this.isRegisterLayer()) {
this.updateLayer();
} else {
this.showLayer(true);
}
},
{ capture: true }
);
}
});
}
/**
* 获取layer配置
*/
getLayerOption() {
var _a2;
let mimeType, audioHost, audioTime, resolution = {
key: "Resolution:",
value: `${this.art.video.videoWidth} x ${this.art.video.videoHeight}`
}, videoDataRate, audioDataRate, audioDuration;
let qualityPlugin = this.art.plugins[ArtPlayer_PLUGIN_QUALITY_KEY];
if (qualityPlugin) {
let currentQualityOption = qualityPlugin.getCurrentQualityOption();
if (currentQualityOption) {
mimeType = {
key: "Mime Type:",
value: `${currentQualityOption.mimeType}`
};
if (currentQualityOption.codecs.trim() !== "") {
mimeType.value += `;codecs="${currentQualityOption.codecs}"`;
}
if (currentQualityOption.frameRate.trim() !== "") {
resolution.value += "@" + currentQualityOption.frameRate;
}
if (currentQualityOption.bandwidth) {
videoDataRate = {
key: "Video DataRate:",
value: (currentQualityOption.bandwidth / 1024).toFixed(0) + "Kbps"
};
}
}
}
let m4sAudioPlugin = this.art.plugins[ArtPlayer_PLUGIN_M4S_AUDIO_SUPPORT_KEY];
if (m4sAudioPlugin) {
let currentAudioOption = m4sAudioPlugin.getCurrentPlayConfig();
if (currentAudioOption) {
audioHost = {
key: "Audio Host:",
value: new URL(currentAudioOption.url).host
};
audioTime = {
key: "Audio Time:",
value: m4sAudioPlugin.getAudio().currentTime.toString()
};
if (mimeType) {
if (mimeType.value.trim() !== "") {
mimeType.value += ", ";
}
mimeType.value += `${currentAudioOption.mimeType}`;
if (currentAudioOption.codecs.trim() !== "") {
mimeType.value += `;codecs="${currentAudioOption.codecs}"`;
}
}
audioDataRate = {
key: "Audio DataRate:",
value: (currentAudioOption.bandwidth / 1024).toFixed(0) + "Kbps"
};
audioDuration = {
key: "Audio Duration:",
value: m4sAudioPlugin.getAudio().duration.toString()
};
}
}
let data2 = [
mimeType,
{
key: "Player Type",
value: "ArtPlayer@" + Artplayer.version
},
resolution,
videoDataRate,
audioDataRate,
{
key: "Video Host:",
value: new URL(this.art.url).host
},
audioHost,
{
key: "Video Time:",
value: this.art.currentTime.toString()
},
audioTime,
{
key: "Video Duration:",
value: this.art.duration.toString()
},
audioDuration
];
data2.push(...((_a2 = this == null ? void 0 : this.option) == null ? void 0 : _a2.data) || []);
return {
name: this.$key.setting_name,
html: (
/*html*/
`
${info}
`; return; } const totalReplyElement = commentModuleWrapper.querySelector( ".comment-container .reply-header .total-reply" ); const totalReplyCount = parseInt((_c = firstPaginationData == null ? void 0 : firstPaginationData.cursor) == null ? void 0 : _c.all_count) || 0; totalReplyElement.textContent = totalReplyCount; if ((_e = (_d = firstPaginationData == null ? void 0 : firstPaginationData.cursor) == null ? void 0 : _d.name) == null ? void 0 : _e.includes("精选")) { const navSortElement = commentModuleWrapper.querySelector( ".comment-container .reply-header .nav-sort" ); navSortElement.innerHTML = `