${replyData.content.pictures ? `
` : ""}
${getImageItems(replyData.content.pictures)}
`,
state: ``,
indicator: `
`,
fullscreenWebOn: ``,
fullscreenWebOff: ``
};
const ArtPlayerCommonOption = () => {
return {
container: "",
url: "",
volume: 1,
isLive: false,
muted: false,
autoplay: false,
pip: false,
autoMini: false,
screenshot: false,
setting: true,
loop: false,
flip: true,
playbackRate: true,
autoSize: false,
aspectRatio: false,
fullscreen: true,
fullscreenWeb: true,
subtitleOffset: true,
miniProgressBar: true,
mutex: false,
backdrop: true,
playsInline: false,
autoPlayback: true,
airplay: true,
lock: true,
fastForward: true,
theme: BilibiliData.theme,
lang: navigator.language.toLowerCase(),
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 {
art;
from;
$key = {
SETTING_KEY: "video-playback-codeid"
};
constructor(art, from) {
this.art = art;
this.from = from;
this.updateSetting();
}
updateSetting(codeIdConfig) {
let setting = this.getSetting();
if (Array.isArray(codeIdConfig?.acceptCodeIdList)) {
for (let index = 0; index < setting.selector.length; index++) {
const selectorItem = setting.selector[index];
let findIndex = codeIdConfig.acceptCodeIdList.findIndex(
(item) => item.toString() === selectorItem.value.toString()
);
if (findIndex === -1) {
setting.selector.splice(index, 1);
index--;
}
}
let hasDefault = setting.selector.find((it) => it.default);
if (!hasDefault && setting.selector.length) {
if (typeof codeIdConfig?.defaultCodeId === "number") {
let findDefaultIndex = setting.selector.findIndex((it) => it.value === codeIdConfig.defaultCodeId);
if (findDefaultIndex !== -1) {
setting.selector[findDefaultIndex].default = true;
setting.tooltip = setting.selector[findDefaultIndex].html;
} else {
setting.selector[0].default = true;
setting.tooltip = setting.selector[0].html;
}
} else {
setting.selector[0].default = true;
setting.tooltip = setting.selector[0].html;
}
}
}
if (this.art.setting.find(this.$key.SETTING_KEY)) {
this.art.setting.update(setting);
} else {
this.art.setting.add(setting);
}
}
getSetting() {
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, index) => {
it.default = index === 0;
return it;
});
console.warn(TAG$1 + "没有找到用户选择对应的画质编码，将使用排序第一个的画质：" + selectorList[0].html);
}
let tooltip = selectorList.find((it) => it.default);
return {
name: this.$key.SETTING_KEY,
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 {
$data = {
qualityOption: null,
qualityOptionList: [],
qualityCodeIdList: [],
currentQualityCodecId: VideoCodingCodeMap["AV1"],
currentSelectQualityInfo: null,
currentQualityOption: null
};
constructor(art, from) {
super(art, from);
}
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.qualityOptionList = [];
this.$data.qualityCodeIdList = [];
this.$data.currentSelectQualityInfo = null;
this.$data.currentQualityCodecId = void 0;
this.setCurrentQualityOption();
if (option.qualityList.length) {
let currentSelectQualityInfo = this.getQualityInfo();
this.addControls();
super.updateSetting({
acceptCodeIdList: this.$data.qualityCodeIdList,
defaultCodeId: this.$data.currentQualityCodecId
});
this.art.url = currentSelectQualityInfo.url;
} else {
this.removeControls();
}
}
getControlsOption() {
const that = this;
let selectorList = this.$data.qualityOptionList.map((itemInfo, index) => {
return {
default: index === this.$data.currentSelectQualityInfo?.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);
}
}
getQualityInfo() {
let userChooseVideoCodingCode = this.getUserChooseVideoCodingCode();
let qualityList = this.$data.qualityOption.qualityList.filter((item) => item.codecid === userChooseVideoCodingCode);
qualityList.sort((leftItem, rightItem) => {
return rightItem.quality - leftItem.quality;
});
const qualityListMap = {};
for (let index = 0; index < this.$data.qualityOption.qualityList.length; index++) {
const qualityItem = this.$data.qualityOption.qualityList[index];
const qualityMapValue = qualityListMap[qualityItem.codecid] || [];
qualityMapValue.push(qualityItem);
qualityListMap[qualityItem.codecid] = qualityMapValue;
}
if (qualityList.length === 0) {
qualityList = Object.values(qualityListMap)[0];
this.$data.currentQualityCodecId = qualityList[0].codecid;
console.warn(TAG$1 + "该画质：" + userChooseVideoCodingCode + "不存在，将使用第一个画质", qualityList);
}
this.$data.qualityOptionList = [];
this.$data.qualityOptionList = qualityList;
this.$data.qualityCodeIdList = Object.keys(qualityListMap);
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.getQualityInfo();
this.updateQualityControls();
this.updateSetting({
acceptCodeIdList: this.$data.qualityCodeIdList,
defaultCodeId: this.$data.currentQualityCodecId
});
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: {
originToast: "art-layer-auto-playback",
hideClassName: "art-toast-hide-opacity",
prefix: "mplayer-toast-gm"
},
$el: {
get $originPlayer() {
return document.querySelector(".art-video-player .art-layers");
}
},
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: (
`
`
)
});
$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);
}
};
},
initCSS() {
if (this.$flag.isInitCSS) {
return;
}
this.$flag.isInitCSS = true;
addStyle(
`
.${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(
`
.${this.$config.hideClassName}{
opacity: 0;
visibility: hidden;
}
`
);
},
mutationMPlayerOriginToast($parent) {
let $mplayer = this.$el.$originPlayer;
if (!$mplayer) {
return;
}
if ($mplayer.hasAttribute("data-mutation")) {
return;
}
log$1.success(`添加观察器，动态更新toast的位置`);
$mplayer.setAttribute("data-mutation", "gm");
utils.mutationObserver($mplayer, {
config: {
subtree: true,
childList: true
},
immediate: true,
callback: () => {
this.updatePageToastBottom();
}
});
},
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);
},
getTransitionendEventNameList() {
return ["webkitTransitionEnd", "mozTransitionEnd", "MSTransitionEnd", "otransitionend", "transitionend"];
},
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?.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 {
art;
option;
$key = {
plugin_KEY: "artplayer-plugin-videoStatistics",
setting_name: "video-statistics"
};
$data = {
intervalId: void 0
};
constructor(art, option) {
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 =
`
`.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 }
);
}
});
}
getLayerOption() {
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(...this?.option?.data || []);
return {
name: this.$key.setting_name,
html: (
`
${info}
`; return; } const totalReplyElement = commentModuleWrapper.querySelector(".comment-container .reply-header .total-reply"); const totalReplyCount = parseInt(firstPaginationData?.cursor?.all_count) || 0; totalReplyElement.textContent = totalReplyCount; if (firstPaginationData?.cursor?.name?.includes("精选")) { const navSortElement = commentModuleWrapper.querySelector(".comment-container .reply-header .nav-sort"); navSortElement.innerHTML = `${title}
图文
${upName}${title}
