From d98c46b5c12053ac33740915175816f2d346d6a2 Mon Sep 17 00:00:00 2001 From: JLoeve Date: Fri, 19 Feb 2021 12:21:39 +0800 Subject: [PATCH 1/5] =?UTF-8?q?feat(video=20speed):=20=E5=80=8D=E6=95=B0?= =?UTF-8?q?=E8=8F=9C=E5=8D=95=E9=A1=B9=E8=BF=87=E5=A4=9A=E7=9A=84=E6=97=B6?= =?UTF-8?q?=E5=80=99=E5=B0=86=E6=98=BE=E7=A4=BA=E6=BB=9A=E5=8A=A8=E6=9D=A1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 可通过 `extendVideoSpeedMenuVisibleItemMaxCount` 设置项控制最大可见菜单项数量 re #1580 --- src/client/settings.js | 1 + src/global.d.ts | 2 ++ src/video/video-speed/extend-video-speed.ts | 10 ++++++++-- src/video/video-speed/video-speed-common.ts | 5 +++++ src/video/video-speed/video-speed-controller.ts | 8 +++++--- 5 files changed, 21 insertions(+), 5 deletions(-) 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. 用户从扩展倍数切换到之前选中的原生倍数 From 40820c71ddcc2698b2a378928e81b15fb9fa85a8 Mon Sep 17 00:00:00 2001 From: JLoeve Date: Fri, 19 Feb 2021 12:56:55 +0800 Subject: [PATCH 2/5] fix(video speed): fix #1504 again --- src/video/video-speed/video-speed-controller.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/video/video-speed/video-speed-controller.ts b/src/video/video-speed/video-speed-controller.ts index 4f7d1c2dc..ed4340265 100644 --- a/src/video/video-speed/video-speed-controller.ts +++ b/src/video/video-speed/video-speed-controller.ts @@ -118,7 +118,7 @@ export class VideoSpeedController { const { getExtraSpeedMenuItemElements } = await import("./extend-video-speed") const { calcOrder, calcMenuHeight } = await import("./video-speed-common") // 有必要传递之前的 nativeSpeedVal,跨分 P 时原生倍数将保持一样 - const controller = await VideoSpeedController.getInstance(sharedSpeed) + const controller = await VideoSpeedController.getInstance(sharedSpeed, sharedNativeSpeed) containerElement = controller.containerElement if (containerElement.classList.contains("extended")) { return From 904c87343a2fecdc5c8917adf541ba5a95d6d319 Mon Sep 17 00:00:00 2001 From: JLoeve Date: Mon, 1 Mar 2021 19:14:53 +0800 Subject: [PATCH 3/5] perf(video speed): using local variable --- src/video/video-speed/video-speed-controller.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/video/video-speed/video-speed-controller.ts b/src/video/video-speed/video-speed-controller.ts index ed4340265..7c08a5f63 100644 --- a/src/video/video-speed/video-speed-controller.ts +++ b/src/video/video-speed/video-speed-controller.ts @@ -298,7 +298,7 @@ export class VideoSpeedController { return } VideoSpeedController.forgetSpeed() - this.setVideoSpeed(VideoSpeedController.fallbackVideoSpeed) + this.setVideoSpeed(fallbackVideoSpeed) } else { this.setVideoSpeed(1) } From 5c65cc337e768db157341da7a6abdcc9a33d8e54 Mon Sep 17 00:00:00 2001 From: JLoeve Date: Mon, 1 Mar 2021 20:34:11 +0800 Subject: [PATCH 4/5] perf(video speed): max-height is fixed at 360px --- src/client/settings.js | 1 - src/global.d.ts | 1 - src/video/video-speed/extend-video-speed.ts | 9 +++------ src/video/video-speed/video-speed-common.ts | 5 ----- src/video/video-speed/video-speed-controller.ts | 6 ++---- 5 files changed, 5 insertions(+), 17 deletions(-) diff --git a/src/client/settings.js b/src/client/settings.js index 07823c9e9..03f8ca043 100644 --- a/src/client/settings.js +++ b/src/client/settings.js @@ -249,7 +249,6 @@ 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 ed6590b6f..3dcf66381 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -509,7 +509,6 @@ declare global { rememberVideoSpeed: boolean, extendVideoSpeed: boolean, extendVideoSpeedList: number[], - extendVideoSpeedMenuVisibleItemMaxCount: number, customKeyBindings: { [actionName: string]: string }, alwaysShowDuration: boolean, menuRepeatVideo: boolean, diff --git a/src/video/video-speed/extend-video-speed.ts b/src/video/video-speed/extend-video-speed.ts index 1144757e3..3556f6e0a 100644 --- a/src/video/video-speed/extend-video-speed.ts +++ b/src/video/video-speed/extend-video-speed.ts @@ -1,8 +1,6 @@ -import { VideoSpeedController } from "./video-speed-controller" - -export const getExtraSpeedMenuItemElements = async (controller: VideoSpeedController) => { +export const getExtraSpeedMenuItemElements = async () => { const { VideoSpeedController } = await import("./video-speed-controller") - const { calcOrder, calcMenuHeight, minValue, maxValue, stepValue, errorMessageDuration } = await import("./video-speed-common") + const { calcOrder, minValue, maxValue, stepValue, errorMessageDuration } = await import("./video-speed-common") const getRecommendedValue = () => { const val = VideoSpeedController.supportedRates.slice(-1)[0] + stepValue @@ -21,7 +19,6 @@ export const getExtraSpeedMenuItemElements = async (controller: VideoSpeedContro i.addEventListener("click", () => { settings.extendVideoSpeedList = _.pull(settings.extendVideoSpeedList, rate) li.remove() - controller.menuListElement.style.height = calcMenuHeight(VideoSpeedController) }) li.append(i) @@ -81,7 +78,6 @@ export const getExtraSpeedMenuItemElements = async (controller: VideoSpeedContro } afterElement.before(createExtendedSpeedMenuItemElement(value)) updateInput(input) - controller.menuListElement.style.height = calcMenuHeight(VideoSpeedController) } }) @@ -146,6 +142,7 @@ export const getExtraSpeedMenuItemElements = async (controller: VideoSpeedContro display: flex; flex-direction: column; overflow-y: auto; + max-height: 360px; } `, "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 17f7d685b..a7ea92681 100644 --- a/src/video/video-speed/video-speed-common.ts +++ b/src/video/video-speed/video-speed-common.ts @@ -1,5 +1,3 @@ -import { VideoSpeedController } from "./video-speed-controller" - export const minValue = 0.0625 export const maxValue = 16 export const stepValue = 0.5 @@ -8,6 +6,3 @@ 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 7c08a5f63..ee29fa351 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, calcMenuHeight } = await import("./video-speed-common") + const { calcOrder } = await import("./video-speed-common") // 有必要传递之前的 nativeSpeedVal,跨分 P 时原生倍数将保持一样 const controller = await VideoSpeedController.getInstance(sharedSpeed, sharedNativeSpeed) containerElement = controller.containerElement @@ -124,13 +124,11 @@ export class VideoSpeedController { return } if (settings.extendVideoSpeed) { - controller._menuListElement.prepend(...await getExtraSpeedMenuItemElements(controller)) + controller._menuListElement.prepend(...await getExtraSpeedMenuItemElements()) // 为所有原生倍速菜单项设置 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. 用户从扩展倍数切换到之前选中的原生倍数 From f39bcaf2392afe6eaf989077314f7c4c0dff4f48 Mon Sep 17 00:00:00 2001 From: JLoeve Date: Mon, 1 Mar 2021 20:39:00 +0800 Subject: [PATCH 5/5] style(video speed): remove extra blank lines --- src/global.d.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/global.d.ts b/src/global.d.ts index 3dcf66381..99c8f163b 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -578,4 +578,3 @@ declare global { const getAid: (aid?: string) => string } export { } -