feat(video speed): 倍数菜单项过多的时候将显示滚动条

可通过 `extendVideoSpeedMenuVisibleItemMaxCount` 设置项控制最大可见菜单项数量

re #1580
This commit is contained in:
JLoeve 2021-02-19 12:21:39 +08:00
parent 4e7a3facc1
commit d98c46b5c1
5 changed files with 21 additions and 5 deletions

View File

@ -249,6 +249,7 @@ export const settings = {
rememberVideoSpeed: false,
extendVideoSpeed: true,
extendVideoSpeedList: [2.5, 3],
extendVideoSpeedMenuVisibleItemMaxCount: 9,
customKeyBindings: {},
alwaysShowDuration: false,
menuRepeatVideo: false,

2
src/global.d.ts vendored
View File

@ -509,6 +509,7 @@ declare global {
rememberVideoSpeed: boolean,
extendVideoSpeed: boolean,
extendVideoSpeedList: number[],
extendVideoSpeedMenuVisibleItemMaxCount: number,
customKeyBindings: { [actionName: string]: string },
alwaysShowDuration: boolean,
menuRepeatVideo: boolean,
@ -578,3 +579,4 @@ declare global {
const getAid: (aid?: string) => string
}
export { }

View File

@ -1,6 +1,8 @@
export const getExtraSpeedMenuItemElements = async () => {
import { VideoSpeedController } from "./video-speed-controller"
export const getExtraSpeedMenuItemElements = async (controller: VideoSpeedController) => {
const { VideoSpeedController } = await import("./video-speed-controller")
const { calcOrder, minValue, maxValue, stepValue, errorMessageDuration } = await import("./video-speed-common")
const { calcOrder, calcMenuHeight, minValue, maxValue, stepValue, errorMessageDuration } = await import("./video-speed-common")
const getRecommendedValue = () => {
const val = VideoSpeedController.supportedRates.slice(-1)[0] + stepValue
@ -19,6 +21,7 @@ export const getExtraSpeedMenuItemElements = async () => {
i.addEventListener("click", () => {
settings.extendVideoSpeedList = _.pull(settings.extendVideoSpeedList, rate)
li.remove()
controller.menuListElement.style.height = calcMenuHeight(VideoSpeedController)
})
li.append(i)
@ -77,6 +80,8 @@ export const getExtraSpeedMenuItemElements = async () => {
afterElement = afterElement.nextElementSibling as HTMLLIElement;
}
afterElement.before(createExtendedSpeedMenuItemElement(value))
updateInput(input)
controller.menuListElement.style.height = calcMenuHeight(VideoSpeedController)
}
})
@ -140,6 +145,7 @@ export const getExtraSpeedMenuItemElements = async () => {
.${VideoSpeedController.classNameMap.speedMenuList} {
display: flex;
flex-direction: column;
overflow-y: auto;
}
`, "extend-video-speed-style")

View File

@ -1,3 +1,5 @@
import { VideoSpeedController } from "./video-speed-controller"
export const minValue = 0.0625
export const maxValue = 16
export const stepValue = 0.5
@ -6,3 +8,6 @@ export const errorMessageDuration = 2000
export const calcOrder = (value: number) => {
return ((maxValue - value) * 10000).toString()
}
export const calcMenuHeight = (staticVideoSpeedController: typeof VideoSpeedController) =>
`${36 * (Math.min(settings.extendVideoSpeedMenuVisibleItemMaxCount, staticVideoSpeedController.supportedRates.length) + 1)}px`

View File

@ -116,7 +116,7 @@ export class VideoSpeedController {
Observer.videoChange(async () => {
const { getExtraSpeedMenuItemElements } = await import("./extend-video-speed")
const { calcOrder } = await import("./video-speed-common")
const { calcOrder, calcMenuHeight } = await import("./video-speed-common")
// 有必要传递之前的 nativeSpeedVal跨分 P 时原生倍数将保持一样
const controller = await VideoSpeedController.getInstance(sharedSpeed)
containerElement = controller.containerElement
@ -124,11 +124,13 @@ export class VideoSpeedController {
return
}
if (settings.extendVideoSpeed) {
controller._menuListElement.prepend(...await getExtraSpeedMenuItemElements())
controller._menuListElement.prepend(...await getExtraSpeedMenuItemElements(controller))
// 为所有原生倍速菜单项设置 Order
controller._menuListElement.querySelectorAll(`.${VideoSpeedController.classNameMap.speedMenuItem}[data-value]:not(.extended)`).forEach(
(it: HTMLLIElement) => { it.style.order = calcOrder(parseFloat(it.getAttribute("data-value")!)) }
);
)
// 为菜单设置初始高度
controller._menuListElement.style.height = calcMenuHeight(VideoSpeedController)
// 如果开启了扩展倍数,存在一种场景使倍数设置会失效:
// 1. 用户从原生支持的倍数切换到扩展倍数
// 2. 用户从扩展倍数切换到之前选中的原生倍数