feat: Update danmuku plugin with responsive behavior

This commit is contained in:
Harvey Zack committed 2024-06-12 21:40:17 +08:00
1 parent 744913b0bf
commit 665348ad55
10 files changed
+103 -24

No files matched your search

+2 -11
View File
@@ -25,6 +25,7 @@ var art = new Artplayer({
synchronousPlayback: false, // 是否同步播放速度
mount: undefined, // 弹幕发射器挂载点, 默认为播放器控制栏中部
heatmap: true, // 是否开启热力图
width: 512, // 当播放器宽度小于此值时,弹幕发射器置于播放器底部
points: [], // 热力图数据
filter: (danmu) => danmu.text.length <= 100, // 弹幕载入前的过滤器
beforeVisible: () => true, // 弹幕显示前的过滤器,返回 true 则可以发送
@@ -50,14 +51,4 @@ var art = new Artplayer({
},
}),
],
});
// 在移动端或者播放器尺寸太小的时候,可以把弹幕发射器挂载到其他位置
// if (Artplayer.utils.isMobile) {
// art.plugins.artplayerPluginDanmuku.mount('.danmuku-emitter')
// }
// 弹幕已经出现在播放器里,你可以访问到弹幕的dom元素里
// art.on('artplayerPluginDanmuku:visible', danmu => {
// danmu.$ref.innerHTML = 'ଘ(੭ˊᵕˋ)੭: ' + danmu.$ref.innerHTML;
// })
});
@@ -254,6 +254,7 @@ class Danmuku {
synchronousPlayback: false,
mount: undefined,
heatmap: false,
width: 512,
points: [],
filter: ()=>true,
beforeEmit: ()=>true,
@@ -285,6 +286,7 @@ class Danmuku {
synchronousPlayback: "boolean",
mount: "?htmldivelement|string",
heatmap: "object|boolean",
width: "number",
points: "array",
filter: "function",
beforeEmit: "function",
@@ -971,6 +973,7 @@ class Setting {
this.createSliders();
this.createEvents();
this.mount(this.option.mount);
art.on("resize", ()=>this.onResize());
art.on("fullscreen", (state)=>this.onFullscreen(state));
art.on("fullscreenWeb", (state)=>this.onFullscreen(state));
art.proxy(this.template.$config, "mouseenter", ()=>{
@@ -1211,6 +1214,14 @@ class Setting {
const { $danmuku } = this.template;
return query(selector, $danmuku);
}
append(el, target) {
const { append } = this.utils;
const children = [
...el.children
];
if (children.some((item)=>item === target)) return;
append(el, target);
}
setData(key, value) {
const { $player } = this.art.template;
const { $mount } = this.template;
@@ -1424,11 +1435,11 @@ class Setting {
};
}
onFullscreen(state) {
const { $danmuku, $controlsCenter, $mount } = this.template;
if (this.outside) {
const { $danmuku, $controlsCenter, $mount } = this.template;
if (state) $controlsCenter.appendChild($danmuku);
else $mount.appendChild($danmuku);
}
if (state) this.append($controlsCenter, $danmuku);
else this.append($mount, $danmuku);
} else this.append($controlsCenter, $danmuku);
}
onMouseEnter({ $control, $panel }) {
const { $player } = this.art.template;
@@ -1492,6 +1503,15 @@ class Setting {
$send.innerText = "\u53D1\u9001";
removeClass($send, "apd-lock");
}
onResize() {
if (this.outside) return;
if (this.art.fullscreen) return;
if (this.art.fullscreenWeb) return;
const { $player, $controlsCenter } = this.art.template;
const { $danmuku } = this.template;
if (this.art.width < this.option.width) this.append($player, $danmuku);
else this.append($controlsCenter, $danmuku);
}
reset() {
const { inverseClass, tooltip } = this.utils;
const { $toggle, $colors } = this.template;
@@ -1516,7 +1536,7 @@ class Setting {
}
mount(target) {
const $el = typeof target === "string" ? document.querySelector(target) : target;
$el.appendChild(this.template.$danmuku);
this.append($el, this.template.$danmuku);
this.template.$mount = $el;
this.reset();
}
@@ -1535,7 +1555,7 @@ if (typeof document !== "undefined") {
}
},{"bundle-text:./style.less":"uaCsY","bundle-text:./img/on.svg":"a9r0e","bundle-text:./img/off.svg":"luia6","bundle-text:./img/config.svg":"lo6sV","bundle-text:./img/style.svg":"1Aemm","@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6","bundle-text:./img/mode_0_off.svg":"jKvDJ","bundle-text:./img/mode_0_on.svg":"7eesQ","bundle-text:./img/mode_1_off.svg":"DalV6","bundle-text:./img/mode_1_on.svg":"i0F2W","bundle-text:./img/mode_2_off.svg":"1phDW","bundle-text:./img/mode_2_on.svg":"iHUBM","bundle-text:./img/check_on.svg":"fQ6fo","bundle-text:./img/check_off.svg":"dz3tU"}],"uaCsY":[function(require,module,exports) {
module.exports = ".artplayer-plugin-danmuku {\n z-index: 99;\n color: #fff;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 32px;\n font-size: 12px;\n font-weight: 300;\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-icon {\n cursor: pointer;\n opacity: .75;\n fill: #fff;\n transition: all .2s;\n}\n\n.artplayer-plugin-danmuku .apd-icon:hover {\n opacity: 1;\n}\n\n.artplayer-plugin-danmuku .apd-config {\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-config .apd-config-panel {\n opacity: 0;\n pointer-events: none;\n width: 320px;\n padding: 10px;\n position: absolute;\n bottom: 24px;\n left: 0;\n}\n\n.artplayer-plugin-danmuku .apd-config .apd-config-panel .apd-config-panel-inner {\n background-color: #000000d9;\n border-radius: 3px;\n width: 100%;\n padding: 10px;\n}\n\n.artplayer-plugin-danmuku .apd-config:hover .apd-config-panel {\n opacity: 100;\n pointer-events: all;\n}\n\n.artplayer-plugin-danmuku .apd-config-mode, .artplayer-plugin-danmuku .apd-config-slider, .artplayer-plugin-danmuku .apd-config-other, .artplayer-plugin-danmuku .apd-style-mode {\n margin-bottom: 15px;\n}\n\n.artplayer-plugin-danmuku .apd-modes {\n align-items: center;\n gap: 20px;\n margin-top: 5px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-modes .apd-mode {\n cursor: pointer;\n text-align: center;\n}\n\n.artplayer-plugin-danmuku .apd-modes .apd-mode:hover {\n color: #00a1d6;\n}\n\n.artplayer-plugin-danmuku .apd-config-slider {\n align-items: center;\n gap: 12px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-config-slider .apd-value {\n text-align: right;\n width: 32px;\n}\n\n.artplayer-plugin-danmuku .apd-slider {\n cursor: pointer;\n flex: 1;\n justify-content: center;\n align-items: center;\n height: 20px;\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-line {\n background-color: #ffffff40;\n border-radius: 3px;\n width: 100%;\n height: 2px;\n position: relative;\n overflow: hidden;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-points {\n justify-content: space-between;\n align-items: center;\n display: flex;\n position: absolute;\n inset: 0;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-points .apd-slider-point {\n background-color: #ffffff80;\n border-radius: 50%;\n width: 2px;\n height: 2px;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-progress {\n background-color: #00a1d6;\n width: 0%;\n height: 100%;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-dot {\n background-color: #00a1d6;\n border-radius: 50%;\n width: 12px;\n height: 12px;\n position: absolute;\n left: 0%;\n transform: translateX(-6px);\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-steps {\n color: #777;\n justify-content: space-between;\n align-items: center;\n width: calc(100% + 32px);\n display: flex;\n position: absolute;\n bottom: -12px;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-steps .apd-slider-step {\n text-align: center;\n flex-shrink: 0;\n width: 36px;\n scale: .95;\n}\n\n.artplayer-plugin-danmuku .apd-config-other {\n align-items: center;\n gap: 20px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-config-other .apd-check-off, .artplayer-plugin-danmuku .apd-config-other .apd-check-on {\n width: 16px;\n height: 16px;\n}\n\n.artplayer-plugin-danmuku .apd-config-other .apd-other {\n cursor: pointer;\n align-items: center;\n gap: 2px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-config-other .apd-other:hover {\n color: #00a1d6;\n}\n\n.artplayer-plugin-danmuku .apd-emitter {\n background-color: #ffffff40;\n border-radius: 5px;\n flex: 1;\n align-items: center;\n height: 100%;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-style {\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-style .apd-style-panel {\n opacity: 0;\n pointer-events: none;\n width: 200px;\n padding: 10px;\n position: absolute;\n bottom: 24px;\n left: 0;\n}\n\n.artplayer-plugin-danmuku .apd-style .apd-style-panel .apd-style-panel-inner {\n background-color: #000000d9;\n border-radius: 3px;\n width: 100%;\n padding: 10px;\n}\n\n.artplayer-plugin-danmuku .apd-style:hover .apd-style-panel {\n opacity: 100;\n pointer-events: all;\n}\n\n.artplayer-plugin-danmuku .apd-colors {\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 5px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-colors .apd-color {\n cursor: pointer;\n border-radius: 2px;\n width: 16px;\n height: 16px;\n}\n\n.artplayer-plugin-danmuku .apd-colors .apd-color.apd-active {\n border: 1px solid #000;\n box-shadow: 0 0 0 1px #fff;\n}\n\n.artplayer-plugin-danmuku .apd-input {\n color: #fff;\n background-color: #0000;\n border: none;\n outline: none;\n flex: 1;\n width:Line truncated
module.exports = ".artplayer-plugin-danmuku {\n z-index: 99;\n color: #fff;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 32px;\n font-size: 12px;\n font-weight: 300;\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-icon {\n cursor: pointer;\n opacity: .75;\n fill: #fff;\n transition: all .2s;\n}\n\n.artplayer-plugin-danmuku .apd-icon:hover {\n opacity: 1;\n}\n\n.artplayer-plugin-danmuku .apd-config {\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-config .apd-config-panel {\n opacity: 0;\n pointer-events: none;\n width: 320px;\n padding: 10px;\n position: absolute;\n bottom: 24px;\n left: 0;\n}\n\n.artplayer-plugin-danmuku .apd-config .apd-config-panel .apd-config-panel-inner {\n background-color: #000000d9;\n border-radius: 3px;\n width: 100%;\n padding: 10px;\n}\n\n.artplayer-plugin-danmuku .apd-config:hover .apd-config-panel {\n opacity: 100;\n pointer-events: all;\n}\n\n.artplayer-plugin-danmuku .apd-config-mode, .artplayer-plugin-danmuku .apd-config-slider, .artplayer-plugin-danmuku .apd-config-other, .artplayer-plugin-danmuku .apd-style-mode {\n margin-bottom: 15px;\n}\n\n.artplayer-plugin-danmuku .apd-modes {\n align-items: center;\n gap: 20px;\n margin-top: 5px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-modes .apd-mode {\n cursor: pointer;\n text-align: center;\n}\n\n.artplayer-plugin-danmuku .apd-modes .apd-mode:hover {\n color: #00a1d6;\n}\n\n.artplayer-plugin-danmuku .apd-config-slider {\n align-items: center;\n gap: 12px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-config-slider .apd-value {\n text-align: right;\n width: 32px;\n}\n\n.artplayer-plugin-danmuku .apd-slider {\n cursor: pointer;\n flex: 1;\n justify-content: center;\n align-items: center;\n height: 20px;\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-line {\n background-color: #ffffff40;\n border-radius: 3px;\n width: 100%;\n height: 2px;\n position: relative;\n overflow: hidden;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-points {\n justify-content: space-between;\n align-items: center;\n display: flex;\n position: absolute;\n inset: 0;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-points .apd-slider-point {\n background-color: #ffffff80;\n border-radius: 50%;\n width: 2px;\n height: 2px;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-progress {\n background-color: #00a1d6;\n width: 0%;\n height: 100%;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-dot {\n background-color: #00a1d6;\n border-radius: 50%;\n width: 12px;\n height: 12px;\n position: absolute;\n left: 0%;\n transform: translateX(-6px);\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-steps {\n color: #777;\n justify-content: space-between;\n align-items: center;\n width: calc(100% + 32px);\n display: flex;\n position: absolute;\n bottom: -12px;\n}\n\n.artplayer-plugin-danmuku .apd-slider .apd-slider-steps .apd-slider-step {\n text-align: center;\n flex-shrink: 0;\n width: 36px;\n scale: .95;\n}\n\n.artplayer-plugin-danmuku .apd-config-other {\n align-items: center;\n gap: 20px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-config-other .apd-check-off, .artplayer-plugin-danmuku .apd-config-other .apd-check-on {\n width: 16px;\n height: 16px;\n}\n\n.artplayer-plugin-danmuku .apd-config-other .apd-other {\n cursor: pointer;\n align-items: center;\n gap: 2px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-config-other .apd-other:hover {\n color: #00a1d6;\n}\n\n.artplayer-plugin-danmuku .apd-emitter {\n background-color: #ffffff40;\n border-radius: 5px;\n flex: 1;\n align-items: center;\n height: 100%;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-style {\n justify-content: center;\n align-items: center;\n display: flex;\n position: relative;\n}\n\n.artplayer-plugin-danmuku .apd-style .apd-style-panel {\n opacity: 0;\n pointer-events: none;\n width: 200px;\n padding: 10px;\n position: absolute;\n bottom: 24px;\n left: 0;\n}\n\n.artplayer-plugin-danmuku .apd-style .apd-style-panel .apd-style-panel-inner {\n background-color: #000000d9;\n border-radius: 3px;\n width: 100%;\n padding: 10px;\n}\n\n.artplayer-plugin-danmuku .apd-style:hover .apd-style-panel {\n opacity: 100;\n pointer-events: all;\n}\n\n.artplayer-plugin-danmuku .apd-colors {\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 5px;\n display: flex;\n}\n\n.artplayer-plugin-danmuku .apd-colors .apd-color {\n cursor: pointer;\n border-radius: 2px;\n width: 16px;\n height: 16px;\n}\n\n.artplayer-plugin-danmuku .apd-colors .apd-color.apd-active {\n border: 1px solid #000;\n box-shadow: 0 0 0 1px #fff;\n}\n\n.artplayer-plugin-danmuku .apd-input {\n color: #fff;\n background-color: #0000;\n border: none;\n outline: none;\n flex: 1;\n width:Line truncated
},{}],"a9r0e":[function(require,module,exports) {
module.exports = "<svg class=\"apd-icon apd-toggle-on\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns=\"http://www.w3.org/2000/svg\" data-pointer=\"none\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill-rule=\"evenodd\" d=\"M11.989 4.828c-.47 0-.975.004-1.515.012l-1.71-2.566a1.008 1.008 0 0 0-1.678 1.118l.999 1.5c-.681.018-1.403.04-2.164.068a4.013 4.013 0 0 0-3.83 3.44c-.165 1.15-.245 2.545-.245 4.185 0 1.965.115 3.67.35 5.116a4.012 4.012 0 0 0 3.763 3.363l.906.046c1.205.063 1.808.095 3.607.095a.988.988 0 0 0 0-1.975c-1.758 0-2.339-.03-3.501-.092l-.915-.047a2.037 2.037 0 0 1-1.91-1.708c-.216-1.324-.325-2.924-.325-4.798 0-1.563.076-2.864.225-3.904.14-.977.96-1.713 1.945-1.747 2.444-.087 4.465-.13 6.063-.131 1.598 0 3.62.044 6.064.13.96.034 1.71.81 1.855 1.814.075.524.113 1.962.141 3.065v.002c.01.342.017.65.025.88a.987.987 0 1 0 1.974-.068c-.008-.226-.016-.523-.025-.856v-.027c-.03-1.118-.073-2.663-.16-3.276-.273-1.906-1.783-3.438-3.74-3.507-.9-.032-1.743-.058-2.531-.078l1.05-1.46a1.008 1.008 0 0 0-1.638-1.177l-1.862 2.59c-.38-.004-.744-.007-1.088-.007h-.13Zm.521 4.775h-1.32v4.631h2.222v.847h-2.618v1.078h2.618l.003.678c.36.026.714.163 1.01.407h.11v-1.085h2.694v-1.078h-2.695v-.847H16.8v-4.63h-1.276a8.59 8.59 0 0 0 .748-1.42L15.183 7.8a14.232 14.232 0 0 1-.814 1.804h-1.518l.693-.308a8.862 8.862 0 0 0-.814-1.408l-1.045.352c.297.396.572.847.825 1.364Zm-4.18 3.564.154-1.485h1.98V8.294h-3.2v.98H9.33v1.43H7.472l-.308 3.453h2.277c0 1.166-.044 1.925-.12 2.277-.078.352-.386.528-.936.528-.308 0-.616-.022-.902-.055l.297 1.067.062.005c.285.02.551.04.818.04 1.001-.067 1.562-.419 1.694-1.057.11-.638.176-1.903.176-3.795h-2.2Zm7.458.11v-.858h-1.254v.858h1.254Zm-2.376-.858v.858h-1.199v-.858h1.2Zm-1.199-.946h1.2v-.902h-1.2v.902Zm2.321 0v-.902h1.254v.902h-1.254Z\" clip-rule=\"evenodd\"></path><path fill=\"#00AEEC\" fill-rule=\"evenodd\" d=\"M22.846 14.627a1 1 0 0 0-1.412.075l-5.091 5.703-2.216-2.275-.097-.086-.008-.005a1 1 0 0 0-1.322 1.493l2.963 3.041.093.083.007.005c.407.315 1 .27 1.354-.124l5.81-6.505.08-.102.005-.008a1 1 0 0 0-.166-1.295Z\" clip-rule=\"evenodd\"></path></svg>";
@@ -1 +1 @@
{"mappings":"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 truncated
{"mappings":"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 truncated
@@ -1,6 +1,6 @@
{
"license": "MIT",
"version": "5.1.2",
"version": "5.1.3",
"name": "artplayer-plugin-danmuku",
"types": "types/artplayer-plugin-danmuku.d.ts",
"description": "Danmuku plugin for ArtPlayer",
@@ -21,4 +21,4 @@
"video",
"player"
]
}
}
@@ -64,6 +64,7 @@ export default class Danmuku {
synchronousPlayback: false, // 是否同步播放速度
mount: undefined, // 弹幕发射器挂载点, 默认为播放器控制栏中部
heatmap: false, // 是否开启热力图
width: 512, // 当播放器宽度小于此值时,弹幕发射器置于播放器底部
points: [], // 热力图数据
filter: () => true, // 弹幕载入前的过滤器,只支持返回布尔值
beforeEmit: () => true, // 弹幕发送前的过滤器,支持返回 Promise
@@ -96,6 +97,7 @@ export default class Danmuku {
synchronousPlayback: 'boolean',
mount: '?htmldivelement|string',
heatmap: 'object|boolean',
width: 'number',
points: 'array',
filter: 'function',
beforeEmit: 'function',
@@ -63,6 +63,7 @@ export default class Setting {
this.mount(this.option.mount);
art.on('resize', () => this.onResize());
art.on('fullscreen', (state) => this.onFullscreen(state));
art.on('fullscreenWeb', (state) => this.onFullscreen(state));
@@ -306,6 +307,13 @@ export default class Setting {
return query(selector, $danmuku);
}
append(el, target) {
const { append } = this.utils;
const children = [...el.children];
if (children.some((item) => item === target)) return;
append(el, target);
}
setData(key, value) {
const { $player } = this.art.template;
const { $mount } = this.template;
@@ -556,13 +564,15 @@ export default class Setting {
}
onFullscreen(state) {
const { $danmuku, $controlsCenter, $mount } = this.template;
if (this.outside) {
const { $danmuku, $controlsCenter, $mount } = this.template;
if (state) {
$controlsCenter.appendChild($danmuku);
this.append($controlsCenter, $danmuku);
} else {
$mount.appendChild($danmuku);
this.append($mount, $danmuku);
}
} else {
this.append($controlsCenter, $danmuku);
}
}
@@ -642,6 +652,19 @@ export default class Setting {
removeClass($send, 'apd-lock');
}
onResize() {
if (this.outside) return;
if (this.art.fullscreen) return;
if (this.art.fullscreenWeb) return;
const { $player, $controlsCenter } = this.art.template;
const { $danmuku } = this.template;
if (this.art.width < this.option.width) {
this.append($player, $danmuku);
} else {
this.append($controlsCenter, $danmuku);
}
}
reset() {
const { inverseClass, tooltip } = this.utils;
const { $toggle, $colors } = this.template;
@@ -671,7 +694,7 @@ export default class Setting {
mount(target) {
const $el = typeof target === 'string' ? document.querySelector(target) : target;
$el.appendChild(this.template.$danmuku);
this.append($el, this.template.$danmuku);
this.template.$mount = $el;
this.reset();
}
@@ -301,6 +301,20 @@
}
}
.art-video-player {
& > .artplayer-plugin-danmuku {
position: absolute;
left: 0;
right: 0;
bottom: -40px;
padding: 0 10px;
}
&:has(> .artplayer-plugin-danmuku) {
margin-bottom: 40px;
}
}
[data-danmuku-emitter='false'] {
.apd-emitter {
display: none !important;
@@ -122,6 +122,11 @@ type Option = {
flattening?: number;
};
/**
* 当播放器宽度小于此值时,弹幕发射器置于播放器底部
*/
width?: number;
/**
* 热力图数据
*/
@@ -73,6 +73,7 @@ https://unpkg.com/artplayer-plugin-danmuku/dist/artplayer-plugin-danmuku.js
synchronousPlayback: false, // 是否同步播放速度
mount: undefined, // 弹幕发射器挂载点, 默认为播放器控制栏中部
heatmap: false, // 是否开启热力图
width: 512, // 当播放器宽度小于此值时,弹幕发射器置于播放器底部
points: [], // 热力图数据
filter: () => true, // 弹幕载入前的过滤器,只支持返回布尔值
beforeEmit: () => true, // 弹幕发送前的过滤器,支持返回 Promise
@@ -34,6 +34,29 @@ export default function autoOrientation(art) {
}
});
art.on('fullscreen', async (state) => {
if (!screen?.orientation?.lock) return;
const lastOrientation = screen.orientation.type;
if (state) {
const { videoWidth, videoHeight } = $video;
const { clientWidth: viewWidth, clientHeight: viewHeight } = document.documentElement;
if (
(videoWidth > videoHeight && viewWidth < viewHeight) ||
(videoWidth < videoHeight && viewWidth > viewHeight)
) {
const oppositeOrientation = lastOrientation.startsWith('portrait') ? 'landscape' : 'portrait';
await screen.orientation.lock(oppositeOrientation);
addClass($player, 'art-auto-orientation-fullscreen');
}
} else {
if (hasClass($player, 'art-auto-orientation-fullscreen')) {
await screen.orientation.lock(lastOrientation);
removeClass($player, 'art-auto-orientation-fullscreen');
}
}
});
return {
name: 'autoOrientation',
get state() {