mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
feat(video speed): 倍数菜单项过多的时候将显示滚动条
可通过 `extendVideoSpeedMenuVisibleItemMaxCount` 设置项控制最大可见菜单项数量 re #1580
This commit is contained in:
parent
4e7a3facc1
commit
d98c46b5c1
@ -249,6 +249,7 @@ export const settings = {
|
|||||||
rememberVideoSpeed: false,
|
rememberVideoSpeed: false,
|
||||||
extendVideoSpeed: true,
|
extendVideoSpeed: true,
|
||||||
extendVideoSpeedList: [2.5, 3],
|
extendVideoSpeedList: [2.5, 3],
|
||||||
|
extendVideoSpeedMenuVisibleItemMaxCount: 9,
|
||||||
customKeyBindings: {},
|
customKeyBindings: {},
|
||||||
alwaysShowDuration: false,
|
alwaysShowDuration: false,
|
||||||
menuRepeatVideo: false,
|
menuRepeatVideo: false,
|
||||||
|
|||||||
2
src/global.d.ts
vendored
2
src/global.d.ts
vendored
@ -509,6 +509,7 @@ declare global {
|
|||||||
rememberVideoSpeed: boolean,
|
rememberVideoSpeed: boolean,
|
||||||
extendVideoSpeed: boolean,
|
extendVideoSpeed: boolean,
|
||||||
extendVideoSpeedList: number[],
|
extendVideoSpeedList: number[],
|
||||||
|
extendVideoSpeedMenuVisibleItemMaxCount: number,
|
||||||
customKeyBindings: { [actionName: string]: string },
|
customKeyBindings: { [actionName: string]: string },
|
||||||
alwaysShowDuration: boolean,
|
alwaysShowDuration: boolean,
|
||||||
menuRepeatVideo: boolean,
|
menuRepeatVideo: boolean,
|
||||||
@ -578,3 +579,4 @@ declare global {
|
|||||||
const getAid: (aid?: string) => string
|
const getAid: (aid?: string) => string
|
||||||
}
|
}
|
||||||
export { }
|
export { }
|
||||||
|
|
||||||
|
|||||||
@ -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 { 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 getRecommendedValue = () => {
|
||||||
const val = VideoSpeedController.supportedRates.slice(-1)[0] + stepValue
|
const val = VideoSpeedController.supportedRates.slice(-1)[0] + stepValue
|
||||||
@ -19,6 +21,7 @@ export const getExtraSpeedMenuItemElements = async () => {
|
|||||||
i.addEventListener("click", () => {
|
i.addEventListener("click", () => {
|
||||||
settings.extendVideoSpeedList = _.pull(settings.extendVideoSpeedList, rate)
|
settings.extendVideoSpeedList = _.pull(settings.extendVideoSpeedList, rate)
|
||||||
li.remove()
|
li.remove()
|
||||||
|
controller.menuListElement.style.height = calcMenuHeight(VideoSpeedController)
|
||||||
})
|
})
|
||||||
|
|
||||||
li.append(i)
|
li.append(i)
|
||||||
@ -77,6 +80,8 @@ export const getExtraSpeedMenuItemElements = async () => {
|
|||||||
afterElement = afterElement.nextElementSibling as HTMLLIElement;
|
afterElement = afterElement.nextElementSibling as HTMLLIElement;
|
||||||
}
|
}
|
||||||
afterElement.before(createExtendedSpeedMenuItemElement(value))
|
afterElement.before(createExtendedSpeedMenuItemElement(value))
|
||||||
|
updateInput(input)
|
||||||
|
controller.menuListElement.style.height = calcMenuHeight(VideoSpeedController)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@ -140,6 +145,7 @@ export const getExtraSpeedMenuItemElements = async () => {
|
|||||||
.${VideoSpeedController.classNameMap.speedMenuList} {
|
.${VideoSpeedController.classNameMap.speedMenuList} {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
`, "extend-video-speed-style")
|
`, "extend-video-speed-style")
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
import { VideoSpeedController } from "./video-speed-controller"
|
||||||
|
|
||||||
export const minValue = 0.0625
|
export const minValue = 0.0625
|
||||||
export const maxValue = 16
|
export const maxValue = 16
|
||||||
export const stepValue = 0.5
|
export const stepValue = 0.5
|
||||||
@ -6,3 +8,6 @@ export const errorMessageDuration = 2000
|
|||||||
export const calcOrder = (value: number) => {
|
export const calcOrder = (value: number) => {
|
||||||
return ((maxValue - value) * 10000).toString()
|
return ((maxValue - value) * 10000).toString()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const calcMenuHeight = (staticVideoSpeedController: typeof VideoSpeedController) =>
|
||||||
|
`${36 * (Math.min(settings.extendVideoSpeedMenuVisibleItemMaxCount, staticVideoSpeedController.supportedRates.length) + 1)}px`
|
||||||
|
|||||||
@ -116,7 +116,7 @@ export class VideoSpeedController {
|
|||||||
|
|
||||||
Observer.videoChange(async () => {
|
Observer.videoChange(async () => {
|
||||||
const { getExtraSpeedMenuItemElements } = await import("./extend-video-speed")
|
const { getExtraSpeedMenuItemElements } = await import("./extend-video-speed")
|
||||||
const { calcOrder } = await import("./video-speed-common")
|
const { calcOrder, calcMenuHeight } = await import("./video-speed-common")
|
||||||
// 有必要传递之前的 nativeSpeedVal,跨分 P 时原生倍数将保持一样
|
// 有必要传递之前的 nativeSpeedVal,跨分 P 时原生倍数将保持一样
|
||||||
const controller = await VideoSpeedController.getInstance(sharedSpeed)
|
const controller = await VideoSpeedController.getInstance(sharedSpeed)
|
||||||
containerElement = controller.containerElement
|
containerElement = controller.containerElement
|
||||||
@ -124,11 +124,13 @@ export class VideoSpeedController {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (settings.extendVideoSpeed) {
|
if (settings.extendVideoSpeed) {
|
||||||
controller._menuListElement.prepend(...await getExtraSpeedMenuItemElements())
|
controller._menuListElement.prepend(...await getExtraSpeedMenuItemElements(controller))
|
||||||
// 为所有原生倍速菜单项设置 Order
|
// 为所有原生倍速菜单项设置 Order
|
||||||
controller._menuListElement.querySelectorAll(`.${VideoSpeedController.classNameMap.speedMenuItem}[data-value]:not(.extended)`).forEach(
|
controller._menuListElement.querySelectorAll(`.${VideoSpeedController.classNameMap.speedMenuItem}[data-value]:not(.extended)`).forEach(
|
||||||
(it: HTMLLIElement) => { it.style.order = calcOrder(parseFloat(it.getAttribute("data-value")!)) }
|
(it: HTMLLIElement) => { it.style.order = calcOrder(parseFloat(it.getAttribute("data-value")!)) }
|
||||||
);
|
)
|
||||||
|
// 为菜单设置初始高度
|
||||||
|
controller._menuListElement.style.height = calcMenuHeight(VideoSpeedController)
|
||||||
// 如果开启了扩展倍数,存在一种场景使倍数设置会失效:
|
// 如果开启了扩展倍数,存在一种场景使倍数设置会失效:
|
||||||
// 1. 用户从原生支持的倍数切换到扩展倍数
|
// 1. 用户从原生支持的倍数切换到扩展倍数
|
||||||
// 2. 用户从扩展倍数切换到之前选中的原生倍数
|
// 2. 用户从扩展倍数切换到之前选中的原生倍数
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user