diff --git a/src/client/settings.js b/src/client/settings.js index 03f8ca043..07823c9e9 100644 --- a/src/client/settings.js +++ b/src/client/settings.js @@ -249,6 +249,7 @@ export const settings = { rememberVideoSpeed: false, extendVideoSpeed: true, extendVideoSpeedList: [2.5, 3], + extendVideoSpeedMenuVisibleItemMaxCount: 9, customKeyBindings: {}, alwaysShowDuration: false, menuRepeatVideo: false, diff --git a/src/global.d.ts b/src/global.d.ts index 99c8f163b..ed6590b6f 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -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 { } + diff --git a/src/video/video-speed/extend-video-speed.ts b/src/video/video-speed/extend-video-speed.ts index cd5316d83..1144757e3 100644 --- a/src/video/video-speed/extend-video-speed.ts +++ b/src/video/video-speed/extend-video-speed.ts @@ -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") diff --git a/src/video/video-speed/video-speed-common.ts b/src/video/video-speed/video-speed-common.ts index a7ea92681..17f7d685b 100644 --- a/src/video/video-speed/video-speed-common.ts +++ b/src/video/video-speed/video-speed-common.ts @@ -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` diff --git a/src/video/video-speed/video-speed-controller.ts b/src/video/video-speed/video-speed-controller.ts index 18cecbf67..4f7d1c2dc 100644 --- a/src/video/video-speed/video-speed-controller.ts +++ b/src/video/video-speed/video-speed-controller.ts @@ -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. 用户从扩展倍数切换到之前选中的原生倍数