Merge pull request #3805 from LonelySteve/speed-fixes

fix(extend-speed): 修复3.x播放器1.5x倍速可能无法点击的问题
This commit is contained in:
Grant Howard 2022-11-11 08:41:57 +08:00 committed by GitHub
commit 79d619467d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 5 deletions

View File

@ -45,7 +45,10 @@ export class EntrySpeedComponent<O = Record<string, unknown>> implements EntryCo
decreaseVideoSpeed: 'decrease', decreaseVideoSpeed: 'decrease',
} }
constructor(protected readonly entryContext: EntryContext) { constructor(
protected readonly entryContext: EntryContext,
protected readonly enabled$: Subject<boolean>,
) {
lodash.assign(this, entryContext, { lodash.assign(this, entryContext, {
options: entryContext.settings.options, options: entryContext.settings.options,
}) })
@ -169,7 +172,9 @@ EntrySpeedComponent.create = function create(metadata) {
return { return {
...metadata, ...metadata,
entry: (entryContext: EntryContext) => { entry: (entryContext: EntryContext) => {
const component: EntrySpeedComponent | Error = lodash.attempt(() => new this(entryContext)) const component: EntrySpeedComponent | Error = lodash.attempt(
() => new this(entryContext, enabled$),
)
if (component instanceof Error) { if (component instanceof Error) {
logError(component) logError(component)
@ -182,7 +187,7 @@ EntrySpeedComponent.create = function create(metadata) {
shareBuildArgument$.next(component) shareBuildArgument$.next(component)
}) })
shareBuildArgument$.next(component) enabled$.next(true)
getHook(`speed.component.${metadata.name}`).after(component) getHook(`speed.component.${metadata.name}`).after(component)

View File

@ -4,12 +4,13 @@ import { Toast } from '@/core/toast'
import { dea, des } from '@/core/utils' import { dea, des } from '@/core/utils'
import { logError } from '@/core/utils/log' import { logError } from '@/core/utils/log'
import { ascendingSort } from '@/core/utils/sort' import { ascendingSort } from '@/core/utils/sort'
import { fromEvent, PublishContext, TeardownLogic } from '../common/mini-rxjs' import { fromEvent, PublishContext, Subject, TeardownLogic } from '../common/mini-rxjs'
import { debounceTime } from '../common/mini-rxjs/operators/debounceTime' import { debounceTime } from '../common/mini-rxjs/operators/debounceTime'
import { filter } from '../common/mini-rxjs/operators/filter' import { filter } from '../common/mini-rxjs/operators/filter'
import { asapScheduler, observeOn } from '../common/mini-rxjs/operators/observeOn' import { asapScheduler, observeOn } from '../common/mini-rxjs/operators/observeOn'
import { loadStyle } from '../common/mini-rxjs/utils/loadStyle' import { loadStyle } from '../common/mini-rxjs/utils/loadStyle'
import { import {
EntryContext,
EntrySpeedComponent, EntrySpeedComponent,
MAX_BROWSER_SPEED_VALUE, MAX_BROWSER_SPEED_VALUE,
MIN_BROWSER_SPEED_VALUE, MIN_BROWSER_SPEED_VALUE,
@ -123,6 +124,17 @@ export class ExtendSpeedComponent extends EntrySpeedComponent<Options> {
return trimLeadingDot(PLAYER_AGENT.custom.speedMenuItem.selector) return trimLeadingDot(PLAYER_AGENT.custom.speedMenuItem.selector)
} }
constructor(entryContext: EntryContext, enabled$: Subject<boolean>) {
super(entryContext, enabled$)
this.enabled$.subscribe(
loadStyle({
name: 'fix-after-element',
style: enabled => enabled && '.bpx-player-ctrl-playbackrate-menu:after { display: none; }',
}),
)
}
addSpeedValue(value: number) { addSpeedValue(value: number) {
this.options.extendSpeedList = lodash.sortedUniq( this.options.extendSpeedList = lodash.sortedUniq(
this.options.extendSpeedList.concat(value).sort(ascendingSort()), this.options.extendSpeedList.concat(value).sort(ascendingSort()),
@ -337,7 +349,6 @@ export class ExtendSpeedComponent extends EntrySpeedComponent<Options> {
${PLAYER_AGENT.custom.speedMenuList.selector} { ${PLAYER_AGENT.custom.speedMenuList.selector} {
display: flex !important; /* 防止3.X样式覆盖 */ display: flex !important; /* 防止3.X样式覆盖 */
flex-direction: column; flex-direction: column;
justify-content: center; /* 添加倍速那一项,当鼠标在上半部分会有莫名其妙的'mouseleave', 用这个修复 */
overflow-y: auto; overflow-y: auto;
max-height: ${maxMenuHeight}px; max-height: ${maxMenuHeight}px;
visibility: hidden; visibility: hidden;