feat(command): config speed step

close #293

apps/app/src/media-note/command/media.ts

@@ -1,12 +1,11 @@
 import type { MediaPlayerInstance } from "@vidstack/react";
-import type { Plugin } from "obsidian";
 import { Notice, debounce } from "obsidian";
 import { PlaybackSpeedPrompt } from "@/media-view/menu/prompt";
 import { speedOptions } from "@/media-view/menu/speed";
 import type MxPlugin from "@/mx-main";
 import { addMediaViewCommand, handleRepeatHotkey } from "./utils";
 
-const createMediaCommands = (plugin: Plugin): Controls[] => [
+const createMediaCommands = (plugin: MxPlugin): Controls[] => [
   {
     id: "toggle-play",
     label: "Play/pause",
@@ -58,7 +57,7 @@ const createMediaCommands = (plugin: Plugin): Controls[] => [
   },
   ...speed(plugin),
 ];
-function speed(plugin: Plugin): Controls[] {
+function speed(plugin: MxPlugin): Controls[] {
   // reuse notice if user is spamming speed change
   let notice: Notice | null = null;
   const hide = debounce(() => notice?.hide(), 2000, true);
@@ -177,15 +176,16 @@ function speed(plugin: Plugin): Controls[] {
     },
     {
       id: "increase-speed-granular",
-      label: "Increase playback speed by 0.1x",
+      label: "Increase playback speed slightly",
       icon: "arrow-up",
       action: (media) => {
         const curr = media.playbackRate;
         if (curr >= speedOptions.last()!) {
           notifyAllowDup("Cannot increase speed further");
           return;
         }
-        const next = Math.round((curr + 0.1) * 10) / 10;
+        const step = plugin.settings.getState().speedStep;
+        const next = Math.round((curr + step) * 100) / 100;
         media.playbackRate = next;
         notify(`Speed increased to ${next}x`);
       },
@@ -200,7 +200,8 @@ function speed(plugin: Plugin): Controls[] {
           notifyAllowDup("Cannot decrease speed further");
           return;
         }
-        const prev = Math.round((curr - 0.1) * 10) / 10;
+        const step = plugin.settings.getState().speedStep;
+        const prev = Math.round((curr - step) * 100) / 100;
         media.playbackRate = prev;
         notify(`Speed decreased to ${prev}x`);
       },

apps/app/src/settings/def.ts

@@ -21,6 +21,7 @@ type MxSettingValues = {
     click: OpenLinkBehavior;
     alt: OpenLinkBehavior;
   };
+  speedStep: number;
   defaultLanguage?: string;
   loadStrategy: "play" | "eager";
   linkHandler: Record<RemoteMediaViewType, URLMatchPattern[]>;
@@ -41,6 +42,7 @@ const settingKeys = enumerate<keyof MxSettingValues>()(
   "devices",
   "defaultMxLinkClick",
   "linkHandler",
+  "speedStep",
   "loadStrategy",
   "timestampTemplate",
   "screenshotTemplate",
@@ -76,6 +78,7 @@ const mxSettingsDefault = {
   timestampOffset: 0,
   biliDefaultQuality: BilibiliQuality.FHD,
   screenshotFormat: "image/webp",
+  speedStep: 0.1,
 } satisfies MxSettingValues;
 
 function getDefaultDeviceName() {
@@ -113,6 +116,7 @@ export type MxSettings = {
   getDeviceName: (id?: string) => string | undefined;
   getDeviceNameWithDefault: (id?: string) => string;
   setDeviceName: (label: string, id?: string) => void;
+  setSpeedStep: (step: number) => void;
   urlMapping: Map<string, string>;
   setTemplate: (
     key: "timestamp" | "screenshot" | "screenshotEmbed",
@@ -159,6 +163,12 @@ export function createSettingsStore(plugin: MxPlugin) {
   }, 1e3);
   return createStore<MxSettings>((set, get) => ({
     ...omit(mxSettingsDefault, ["urlMappingData"]),
+    setSpeedStep(step) {
+      step = Math.abs(step);
+      if (step === 0) return;
+      set({ speedStep: step });
+      save(get());
+    },
     setScreenshotFormat(format) {
       set({ screenshotFormat: format });
       save(get());

apps/app/src/settings/tab.ts

@@ -351,6 +351,38 @@ export class MxSettingTabs extends PluginSettingTab {
             this.state.setDefaultLanguage(val === fallback ? null : val),
           ),
       );
+    new Setting(container)
+      .setName("Speed step")
+      .setDesc(
+        "Configure the step for command to slightly increasing or decreasing playback speed",
+      )
+      .addSlider((slide) =>
+        slide
+          .setLimits(0.01, 2, 0.01)
+          .setValue(this.state.speedStep)
+          .onChange(this.state.setSpeedStep)
+          .then((slide) => {
+            this.sub((s, prev) => {
+              if (s.speedStep === prev.speedStep) return;
+              slide.setValue(s.speedStep);
+            });
+          }),
+      )
+      .addText((text) =>
+        text
+          .setValue(toStr(this.state.speedStep))
+          .onChange(handleFloat(this.state.setSpeedStep))
+          .then((input) => {
+            setLimits.call(input, 0.01, 2, 0.01);
+            input.inputEl.type = "number";
+            input.inputEl.style.textAlign = "center";
+            this.sub((s, prev) => {
+              if (s.speedStep === prev.speedStep) return;
+              input.setValue(toStr(s.speedStep));
+            });
+          }),
+      )
+      .then((s) => s.controlEl.appendText("x"));
   }
 
   timestamp() {

apps/docs/pages/reference/commands.en.mdx

@@ -32,8 +32,8 @@ All commands can be assigned to hotkeys in the settings. For more information on
 - **Decrease playback speed**: Same as the previous command, but decrease the playback speed.
 - **Set playback speed to custom value**: Prompt for a custom playback speed value to set.
 - **Reset playback speed**: Reset the playback speed to the default rate.
-- **Increase playback speed by 0.1x**: Slightly increase the playback speed.
-- **Decrease playback speed by 0.1x**: Same as the previous command, but slightly decrease the playback speed.
+- **Increase playback speed slightly**: Slightly increase the playback speed, step is 0.1x by default, which could be configured.
+- **Decrease playback speed slightly**: Same as the previous command, but slightly decrease the playback speed.
 
 ## Other Commands [#others]
 

apps/docs/pages/reference/commands.zh-CN.mdx

@@ -32,8 +32,8 @@
 - **Decrease playback speed**: 同上，但是减慢播放速度。
 - **Set playback speed to custom value**: 弹窗输入自定义的播放速度。
 - **Reset playback speed**: 重置播放速度为正常速度。
-- **Increase playback speed by 0.1x**: 略微提高播放速度（+0.1x）。
-- **Decrease playback speed by 0.1x**: 略微减慢播放速度（-0.1x）。
+- **Increase playback speed slightly**: 略微提高播放速度，默认为 `0.1x`，可以在设置中修改。
+- **Decrease playback speed slightly**: 同上，但略微减慢播放速度
 
 ## 其他 [#others]