From bfd0648895f5962bba52cc8d317934f2a6ed38bf Mon Sep 17 00:00:00 2001 From: wuch Date: Wed, 10 Apr 2024 23:04:35 +0800 Subject: [PATCH 1/2] HEAD is now at 1c3962bd3 Add compatibility functionality to website for playing video lists. --- .../video/player/legacy-auto-play/index.ts | 63 ++++++++++++++++--- 1 file changed, 54 insertions(+), 9 deletions(-) diff --git a/registry/lib/components/video/player/legacy-auto-play/index.ts b/registry/lib/components/video/player/legacy-auto-play/index.ts index 608bb699e2..b5021fb531 100644 --- a/registry/lib/components/video/player/legacy-auto-play/index.ts +++ b/registry/lib/components/video/player/legacy-auto-play/index.ts @@ -1,4 +1,5 @@ import { defineComponentMetadata } from '@/components/define' +import { getVueData } from '@/components/feeds/api' import { playerAgent } from '@/components/video/player-agent' import { childListSubtree, videoChange } from '@/core/observer' import { select } from '@/core/spin-query' @@ -44,9 +45,50 @@ export const component = defineComponentMetadata({ ), ), ] + + await playerReady() + + // 初始化状态 + const rightPanel = await Promise.any([ + select('.right-container-inner'), + select('.playlist-container--right'), + ]) + // 如果未找到元素，提前退出不执行后续动作 + if (!rightPanel) { + console.warn('未找到 rightPanelContainer 或 playListContainer') + return + } + + const checkPlayListPlayMode = async () => { + // 检查是不是播放列表中的最后一个分 P 的最后一个视频 + const videoSequentialNumber = dq('.list-count') + const sequentialNumbers = videoSequentialNumber.innerHTML.split('/') + // 检查最后一个元素是单个视频还是多 P 视频 + const lastVedioElement = dq( + '.action-list .action-list-inner .action-list-item-wrap:last-child .action-list-item .actionlist-item-inner', + ) + + let isLastVideo = false + if (lastVedioElement.classList.contains('singlep-list-item-inner')) { + isLastVideo = lastVedioElement.classList.contains('siglep-active') + } else { + isLastVideo = + lastVedioElement.children[1].lastElementChild.classList.contains( + 'multip-list-item-active', + ) + } + + const shouldContinue = !(sequentialNumbers[0] >= sequentialNumbers[1] && isLastVideo) + + const app = document.getElementById('app') + // 不用判断当前状态是什么，直接将将是否需要继续播放赋值 vue 实例中的 continuousPlay + const vueInstance = getVueData(app) + vueInstance.setContinuousPlay(shouldContinue) + } + const isChecked = (container: HTMLElement) => Boolean(container.querySelector('.switch-button.on') || container.matches(':checked')) - await playerReady() + const checkPlayMode = async () => { const element = (await select( [...autoPlayControls.disable, ...autoPlayControls.enable].join(','), @@ -62,16 +104,19 @@ export const component = defineComponentMetadata({ element.click() } } + + const checkRightPanelPlyMode = async () => { + rightPanel.classList.contains('right-container-inner') + ? checkPlayMode() + : checkPlayListPlayMode() + } + videoChange(async () => { - checkPlayMode() + checkRightPanelPlyMode() const video = (await playerAgent.query.video.element()) as HTMLVideoElement - video?.addEventListener('play', checkPlayMode, { once: true }) + video?.addEventListener('play', checkRightPanelPlyMode, { once: true }) }) - const rightPanelContainer = await select('.right-container-inner') - if (!rightPanelContainer) { - console.warn('未找到 rightPanelContainer') - return - } - childListSubtree(rightPanelContainer, () => checkPlayMode()) + + childListSubtree(rightPanel, () => checkRightPanelPlyMode()) }, }) From e8026f1a4ca4c4a02a52902c3177693a2bd9d912 Mon Sep 17 00:00:00 2001 From: wuch Date: Sun, 14 Apr 2024 16:53:32 +0800 Subject: [PATCH 2/2] Fix typo. --- .../video/player/legacy-auto-play/index.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/registry/lib/components/video/player/legacy-auto-play/index.ts b/registry/lib/components/video/player/legacy-auto-play/index.ts index b5021fb531..f11ce50ff1 100644 --- a/registry/lib/components/video/player/legacy-auto-play/index.ts +++ b/registry/lib/components/video/player/legacy-auto-play/index.ts @@ -60,7 +60,7 @@ export const component = defineComponentMetadata({ } const checkPlayListPlayMode = async () => { - // 检查是不是播放列表中的最后一个分 P 的最后一个视频 + // 检查是不是播放列表中的最后一个视频或者最后一个分 P 视频的最后一个视频 const videoSequentialNumber = dq('.list-count') const sequentialNumbers = videoSequentialNumber.innerHTML.split('/') // 检查最后一个元素是单个视频还是多 P 视频 @@ -81,8 +81,8 @@ export const component = defineComponentMetadata({ const shouldContinue = !(sequentialNumbers[0] >= sequentialNumbers[1] && isLastVideo) const app = document.getElementById('app') - // 不用判断当前状态是什么，直接将将是否需要继续播放赋值 vue 实例中的 continuousPlay const vueInstance = getVueData(app) + // 不用判断当前状态是什么，直接将将是否需要继续播放赋值 vue 实例中的 continuousPlay vueInstance.setContinuousPlay(shouldContinue) } @@ -105,18 +105,18 @@ export const component = defineComponentMetadata({ } } - const checkRightPanelPlyMode = async () => { + const checkRightPanelPlayMode = async () => { rightPanel.classList.contains('right-container-inner') ? checkPlayMode() : checkPlayListPlayMode() } videoChange(async () => { - checkRightPanelPlyMode() + checkRightPanelPlayMode() const video = (await playerAgent.query.video.element()) as HTMLVideoElement - video?.addEventListener('play', checkRightPanelPlyMode, { once: true }) + video?.addEventListener('play', checkRightPanelPlayMode, { once: true }) }) - childListSubtree(rightPanel, () => checkRightPanelPlyMode()) + childListSubtree(rightPanel, () => checkRightPanelPlayMode()) }, })