Add support for new page list container (fix #4955, #4958, fix #4952)

This commit is contained in:
the1812 2024-11-10 15:19:09 +08:00
parent f26495c63b
commit 94a7f6fc28
6 changed files with 81 additions and 25 deletions

View File

@ -4,7 +4,8 @@
.r-con .rcmd-list,
.playlist-container .recommend-list-container,
.bpx-player-ending-related,
.plp-r [class*="recommend_wrap"] {
.plp-r [class*="recommend_wrap"],
.video-container-v1 .recommend-list-v1 {
display: none !important;
}
.bilibili-player-ending-panel-box-functions .bilibili-player-upinfo-spans {

View File

@ -21,7 +21,7 @@ const entry: ComponentEntry = async ({ settings: { options } }) => {
return
}
const danmakuBox = await select('.bui-collapse-wrap')
if (dq('.multi-page-v1, .base-video-sections-v1') && options.ignoreWithEpisodes) {
if (dq('.multi-page-v1, .base-video-sections-v1, .video-pod') && options.ignoreWithEpisodes) {
console.log('检测到选集, 跳过展开')
return
}

View File

@ -41,6 +41,38 @@ body {
}
}
}
.video-pod {
&__list.multip {
.simple-base-item {
counter-increment: page;
.title {
.title-txt {
&::before {
content: 'P' counter(page);
margin-right: 6px;
}
}
}
}
}
&__list {
.simple-base-item {
.title {
height: auto !important;
padding: 2px 0 !important;
.title-txt {
padding: 4px 0 !important;
width: auto !important;
max-height: unset !important;
height: auto !important;
white-space: normal !important;
line-height: 1.5 !important;
display: block !important;
}
}
}
}
}
}
&.full-episode-list:not(.disable-full-episode-list) {
.video-sections-content-list {
@ -62,5 +94,10 @@ body {
}
}
}
.video-pod {
&__body {
max-height: unset !important;
}
}
}
}

View File

@ -1,5 +1,5 @@
提供一些视频选集区域的优化, 对番剧无效.
- `展开选集标题`: 总是完全展开视频选集列表项的标题
- `展开选集标题`: 总是完全展开视频选集列表项的标题, 若为传统分 P 列表, 还会恢复显示分 P 数的前缀.
- `展开选集列表`: 总是完全展开视频选集列表
打开 `展开选集列表` 时, 在选集区域的标题上按住 <kbd>Alt</kbd> 键点击可以临时切换展开/收起选集列表.
打开 `展开选集列表` 时, 在选集区域的标题上按住 <kbd>Alt</kbd> 键点击可以临时切换此组件的效果.

View File

@ -39,6 +39,7 @@ export const component = defineComponentMetadata({
select('.multi-page-v1 .head-left h3'),
select('.video-sections-v1 .first-line-title'),
select('.base-video-sections-v1 .first-line-title'),
select('.video-pod .video-pod__header .title'),
]).then(titleElement => {
if (!titleElement) {
return

View File

@ -21,14 +21,23 @@ export const component = defineComponentMetadata({
':is(.base-video-sections, .base-video-sections-v1) .next-button',
':is(.multi-page, .multi-page-v1) .next-button',
'.player-auxiliary-autoplay-switch input',
'.video-pod .auto-play .switch-btn',
],
// 命中时应该关闭连播: 关联视频推荐
disable: [':is(.recommend-list, .recommend-list-v1) .next-button'],
disable: [
':is(.recommend-list, .recommend-list-v1) .next-button',
'.recommend-list-v1 .switch-btn',
],
}
// 最后 1P 时不能开启连播
const disableConditions = [
// 传统分 P
() => Boolean(dq(':is(.multi-page, .multi-page-v1) .list-box li.on:last-child')),
() =>
Boolean(
dq(
':is(.multi-page, .multi-page-v1) .list-box li.on:last-child, .video-pod__list .simple-base-item.active:last-child',
),
),
// 替代分 P 的合集
// & 可分子合集的分 P 合集, 布局长得比下面那个丑一点
() =>
@ -52,6 +61,7 @@ export const component = defineComponentMetadata({
const rightPanel = await Promise.any([
select('.right-container-inner'),
select('.playlist-container--right'),
select('.video-pod'),
])
// 如果未找到元素,提前退出不执行后续动作
if (!rightPanel) {
@ -60,26 +70,33 @@ export const component = defineComponentMetadata({
}
const checkPlayListPlayMode = async () => {
// 检查是不是播放列表中的最后一个视频或者最后一个分 P 视频的最后一个视频
const videoSequentialNumber = dq('.list-count')
const sequentialNumbers = videoSequentialNumber.innerHTML.split('/')
// 检查最后一个元素是单个视频还是多 P 视频
const videoSequentialNumber = dq(rightPanel, '.list-count, .video-pod__header .amt')
const sequentialNumbers = videoSequentialNumber.innerHTML
.replace(/[]/g, '')
.split('/')
.map(it => parseInt(it))
const lastVideoElement = dq(
'.action-list .action-list-inner .action-list-item-wrap:last-child .action-list-item .actionlist-item-inner',
'.action-list .action-list-item-wrap:last-child .action-list-item .actionlist-item-inner, .video-pod__list .pod-item:last-child',
)
let isLastVideo = false
if (lastVideoElement.classList.contains('singlep-list-item-inner')) {
isLastVideo = lastVideoElement.classList.contains('siglep-active')
} else {
isLastVideo =
lastVideoElement.children[1].lastElementChild.classList.contains(
'multip-list-item-active',
const isSingleList =
lastVideoElement.classList.contains('singlep-list-item-inner') ||
lastVideoElement.querySelector('.single-p') !== null
const isLastVideo = (() => {
if (isSingleList) {
return (
lastVideoElement.classList.contains('siglep-active') ||
lastVideoElement.querySelector('.simple-base-item.active') !== null
)
}
}
return lastVideoElement.children[1].lastElementChild.classList.contains(
'multip-list-item-active',
)
})()
const shouldContinue = !(sequentialNumbers[0] >= sequentialNumbers[1] && isLastVideo)
console.log('checkPlayListPlayMode', { isLastVideo, sequentialNumbers, shouldContinue })
const app = document.getElementById('app')
const vueInstance = getVueData(app)
// 不用判断当前状态是什么,直接将将是否需要继续播放赋值 vue 实例中的 continuousPlay
@ -87,7 +104,8 @@ export const component = defineComponentMetadata({
}
const isChecked = (container: HTMLElement) =>
Boolean(container.querySelector('.switch-button.on') || container.matches(':checked'))
Boolean(container.querySelector('.switch-button.on') || container.matches(':checked')) ||
container.classList.contains('on')
const checkPlayMode = async () => {
const element = (await select(
@ -100,21 +118,20 @@ export const component = defineComponentMetadata({
autoPlayControls.enable.some(selector => element.matches(selector)) &&
disableConditions.every(condition => !condition())
const checked = isChecked(element)
console.log('checkPlayMode', { shouldChecked, checked })
if (shouldChecked !== checked) {
element.click()
}
}
const checkRightPanelPlayMode = async () => {
rightPanel.classList.contains('right-container-inner')
? checkPlayMode()
: checkPlayListPlayMode()
const isPlayList = rightPanel.querySelector('.video-pod__list.section')
return isPlayList ? checkPlayListPlayMode() : checkPlayMode()
}
videoChange(async () => {
checkRightPanelPlayMode()
const video = (await playerAgent.query.video.element()) as HTMLVideoElement
video?.addEventListener('play', checkRightPanelPlayMode, { once: true })
video?.addEventListener('play', () => checkRightPanelPlayMode(), { once: true })
})
childListSubtree(rightPanel, () => checkRightPanelPlayMode())