Merge remote-tracking branch 'upstream/preview-fixes' into speed-fixes

This commit is contained in:
JLoeve 2022-05-28 22:07:30 +08:00
commit 3f5650c0c0
10 changed files with 113 additions and 39 deletions

View File

@ -61,7 +61,7 @@
.bili-dyn-home--member {
--center-width: 632px;
--gap: 8px;
--fixed-offset: calc(var(--center-width) + (100vw - var(--center-width)) / 2 + var(--gap));
--fixed-offset: calc(var(--center-width) + (100% - var(--center-width)) / 2 + var(--gap));
section.sticky {
position: static !important;
}

View File

@ -283,7 +283,8 @@
&-module {
@include color('e');
&.at,
&.vote {
&.vote,
&.lottery {
@include theme-color();
}
}

View File

@ -233,7 +233,7 @@ export class ExtendSpeedComponent extends EntrySpeedComponent<Options> {
createCustomSpeedMenuItemElement(
value: number,
): VNode<HTMLLIElement, number> {
//3.X的倍速需要通过data-value读取值并设置
// 3.X的倍速需要通过data-value读取值并设置
const { closeBtn, root } = $<{ closeBtn: HTMLElement }, HTMLLIElement>(`
<li class="${splitToSpace(trimLeadingDot(PLAYER_AGENT.custom.speedMenuItem.selector))} ${EXTEND_SPEED_ITEM_CLASS_NAME}" data-value="${(value)}">
${formatSpeedText(value)}
@ -296,7 +296,7 @@ export class ExtendSpeedComponent extends EntrySpeedComponent<Options> {
// 删掉 11.0x 倍速后,再选择 1.0x 倍速就没出现该问题,这是因为之前的实现使用 contains 函数判断,由于 11.0x 倍速文本包含 1.0x,所以被误判了
// 原先使用 contains 而不直接比较的原因是,自定义的倍速菜单项,可能在创建时引入了多余的空白符,现在使用 normalize-space 代替之前的做法
// `./*[contains(@class, "${ExtendSpeedComponent.speedMenuItemClassName}")`
`./*[(${ExtendSpeedComponent.speedMenuItemClassName.split(',').map(cls=>'contains(@class, "'+cls+'")').join(' or ')})`
`./*[(${ExtendSpeedComponent.speedMenuItemClassName.split(',').map(cls => `contains(@class, "${cls}")`).join(' or ')})`
+ ` and not(contains(@class, "${EXTEND_SPEED_INPUT_CLASS_NAME}"))`
// see: https://developer.mozilla.org/en-US/docs/Web/XPath/Functions/normalize-space
// 自定义的倍速菜单项,在创建时引入了多余的空白符,需要通过 normalize-space 函数排除掉
@ -333,9 +333,9 @@ export class ExtendSpeedComponent extends EntrySpeedComponent<Options> {
name: 'extend-video-speed-style',
style: maxMenuHeight => `
${PLAYER_AGENT.custom.speedMenuList.selector} {
display: flex!important;/* 防止3.X样式覆盖 */
display: flex !important; /* 防止3.X样式覆盖 */
flex-direction: column;
justify-content: center;/* 添加倍速那一项,当鼠标在上半部分会有莫名其妙的'mouseleave',用这个修复 */
justify-content: center; /* 添加倍速那一项,当鼠标在上半部分会有莫名其妙的'mouseleave', 用这个修复 */
overflow-y: auto;
max-height: ${maxMenuHeight}px;
visibility: hidden;
@ -477,10 +477,10 @@ export class ExtendSpeedComponent extends EntrySpeedComponent<Options> {
} = this.speedContext
// 移除所有激活态的菜单项
for (const element of dea(
`./*[(${trimLeadingDot(ExtendSpeedComponent.speedMenuItemClassName).split(',').map(cls=>'contains(@class, "'+cls+'")').join(' or ')})`
+' and '
+`(${trimLeadingDot(ExtendSpeedComponent.activeClassName).split(',').map(cls=>'contains(@class, "'+cls+'")').join(' or ')})]`
,menuListElement,
`./*[(${trimLeadingDot(ExtendSpeedComponent.speedMenuItemClassName).split(',').map(cls => `contains(@class, "${cls}")`).join(' or ')})`
+ ' and '
+ `(${trimLeadingDot(ExtendSpeedComponent.activeClassName).split(',').map(cls => `contains(@class, "${cls}")`).join(' or ')})]`,
menuListElement,
) as Iterable<HTMLElement>) {
element.classList.remove(...ExtendSpeedComponent.activeClassName.split(','))
}

View File

@ -27,6 +27,7 @@ export default Vue.extend({
svg {
height: 18px;
width: 18px;
fill: currentColor;
}
}
</style>

View File

@ -0,0 +1,7 @@
import { bpxPlayerPolyfill } from './bpx'
import { v2PlayerPolyfill } from './v2'
import { v3PlayerPolyfill } from './v3'
export const playerPolyfill = lodash.once(
() => Promise.allSettled([bpxPlayerPolyfill(), v2PlayerPolyfill(), v3PlayerPolyfill()]),
)

View File

@ -0,0 +1,37 @@
import { childListSubtree } from '@/core/observer'
import { select } from '@/core/spin-query'
const idPolyfill = async () => {
const player = await select(() => unsafeWindow.player)
if (!(player?.getVideoMessage)) {
return
}
const { useScopedConsole } = await import('@/core/utils/log')
const console = useScopedConsole('v2 player polyfill')
childListSubtree(document.body, () => {
const input = player.getVideoMessage()
if (!input) {
console.warn('invalid getUserParams data')
return
}
const idData = {
aid: input.aid.toString(),
cid: input.cid.toString(),
bvid: input.bvid,
}
if (Object.values(idData).some(it => it === '' || parseInt(it) <= 0)) {
console.warn('invalid input data')
}
Object.assign(unsafeWindow, idData)
})
}
export const v2PlayerPolyfill = lodash.once(() => {
if (document.URL.startsWith('https://www.bilibili.com/bangumi/play/')) {
return
}
if (unsafeWindow.aid || unsafeWindow.cid) {
return
}
idPolyfill()
})

View File

@ -0,0 +1,37 @@
import { childListSubtree } from '@/core/observer'
import { select } from '@/core/spin-query'
const idPolyfill = async () => {
const player = await select(() => unsafeWindow.player)
if (!(player?.getUserParams)) {
return
}
const { useScopedConsole } = await import('@/core/utils/log')
const console = useScopedConsole('v3 player polyfill')
childListSubtree(document.body, () => {
const { input } = player.getUserParams()
if (!input) {
console.warn('invalid getUserParams data')
return
}
const idData = {
aid: input.aid.toString(),
cid: input.cid.toString(),
bvid: input.bvid,
}
if (Object.values(idData).some(it => it === '' || parseInt(it) <= 0)) {
console.warn('invalid input data')
}
Object.assign(unsafeWindow, idData)
})
}
export const v3PlayerPolyfill = lodash.once(() => {
if (document.URL.startsWith('https://www.bilibili.com/bangumi/play/')) {
return
}
if (unsafeWindow.aid || unsafeWindow.cid) {
return
}
idPolyfill()
})

View File

@ -1,7 +1,8 @@
import { select } from '@/core/spin-query'
import { isBwpVideo, raiseEvent } from '@/core/utils'
import { bangumiUrls, matchCurrentPage } from '@/core/utils/urls'
import { bpxPlayerPolyfill } from './bpx-player-adaptor'
import { bpxPlayerPolyfill } from './player-adaptor/bpx'
import { v3PlayerPolyfill } from './player-adaptor/v3'
/** 元素查询函数, 调用时执行 `SpinQuery.select` 查询, 可访问 `selector` 获取选择器 */
type ElementQuery<Target = HTMLElement> = {
@ -153,7 +154,7 @@ export abstract class PlayerAgent {
/** 更改时间 */
abstract changeTime(change: number): number
}
export class VideoPlayer2XAgent extends PlayerAgent {
export class VideoPlayerV2Agent extends PlayerAgent {
// eslint-disable-next-line class-methods-use-this
get nativeApi() {
return unsafeWindow.player
@ -381,7 +382,7 @@ export class BangumiPlayerAgent extends PlayerAgent {
}
}
}
export class VideoPlayerCompatAgent extends VideoPlayer2XAgent {
export class VideoPlayerMixedAgent extends VideoPlayerV2Agent {
query = selectorWrap({
playerWrap: '.player-wrap',
bilibiliPlayer: '.bilibili-player,#bilibili-player',
@ -433,6 +434,12 @@ export class VideoPlayerCompatAgent extends VideoPlayer2XAgent {
danmakuTipLayer: '.bilibili-player-dm-tip-wrap,.bpx-player-dm-tip',
danmakuSwitch: '.bilibili-player-video-danmaku-switch input,.bpx-player-dm-switch input',
}) as PlayerQuery<ElementQuery>
constructor() {
super()
v3PlayerPolyfill()
}
seek(time: number) {
if (!this.nativeApi) {
return null
@ -449,10 +456,9 @@ export class VideoPlayerCompatAgent extends VideoPlayer2XAgent {
}
}
export const playerAgent = (() => {
if (matchCurrentPage(bangumiUrls)) {
return new BangumiPlayerAgent()
}
return new VideoPlayerCompatAgent()
if (matchCurrentPage(bangumiUrls)) {
return new BangumiPlayerAgent()
}
return new VideoPlayerMixedAgent()
})()

View File

@ -222,25 +222,10 @@ export const urlChange = (callback: (url: string) => void, config?: AddEventList
/** 等待 cid */
const selectCid = lodash.once(() => select(() => {
import('@/components/video/player-adaptor').then(({ playerPolyfill }) => playerPolyfill())
if (unsafeWindow.cid) {
return unsafeWindow.cid
}
if (unsafeWindow.player && (unsafeWindow.player.getVideoMessage||unsafeWindow.player.getUserParams)) {
const info = unsafeWindow.player.getVideoMessage?unsafeWindow.player.getVideoMessage():unsafeWindow.player.getUserParams().input
if (Number.isNaN(info.cid)) {
return null
}
if (!unsafeWindow.aid && info.aid) {
unsafeWindow.aid = info.aid.toString()
}
if (!unsafeWindow.bvid && info.bvid) {
unsafeWindow.bvid = info.bvid
}
if (!unsafeWindow.cid && info.cid) {
unsafeWindow.cid = info.cid.toString()
}
return info.cid.toString()
}
return null
}))
@ -259,15 +244,15 @@ export const videoChange = async (
if (!matchCurrentPage(playerUrls)) {
return false
}
const { bpxPlayerPolyfill } = await import('@/components/video/bpx-player-adaptor')
bpxPlayerPolyfill()
const { playerPolyfill } = await import('@/components/video/player-adaptor')
playerPolyfill()
const cid = await selectCid()
if (cid === null) {
return false
}
const getId = () => ({
aid: unsafeWindow?.aid?unsafeWindow.aid:unsafeWindow.player.getUserParams().input.aid,
cid: unsafeWindow?.cid?unsafeWindow.cid:unsafeWindow.player.getUserParams().input.cid,
aid: unsafeWindow.aid,
cid: unsafeWindow.cid,
})
const fireEvent = () => {
const detail = getId()
@ -276,7 +261,7 @@ export const videoChange = async (
}
if (!cidHooked) {
let lastCid = cid
allMutations(() => {
childListSubtree(document.body, () => {
const { cid: newCid } = getId()
// b 站代码的神秘行为, 在更换 cid 时会临时改成一个数组, 做监听要忽略这种值
if (Array.isArray(newCid)) {