feat: improve play-page fav-picker & HotkeyDisplay

Author: magicdawn

src/components/ModalSettings/tab-panes/pane-other-pages.tsx

@@ -1,5 +1,5 @@
 import { APP_NAME } from '$common'
-import { CustomKbd } from '$components/fragments'
+import { HotkeyDisplay } from '$components/fragments'
 import { CheckboxSettingItem } from '../setting-item'
 import { ResetPartialSettingsButton, SettingsGroup, sharedClassNames } from './shared'
 
@@ -24,10 +24,16 @@ export function TabPaneOtherPages() {
                 <li>
                   <span className='flex-v-center'>
                     支持从收藏夹图标 或 快捷键
-                    <CustomKbd className='mx-1 h-14px py-0 line-height-13px'>e</CustomKbd>
+                    <HotkeyDisplay k='E' className='mx-1 h-14px py-0 line-height-13px' />
                     触发
                   </span>
                 </li>
+                <li>
+                  <span className='flex-v-center'>
+                    <HotkeyDisplay k='Shift+E' className='mx-1 h-14px flex py-0 line-height-13px' />
+                    无视此开关, 总是生效
+                  </span>
+                </li>
               </ul>
             </>
           }

src/components/ModalSettings/tab-panes/pane-video-card.tsx

@@ -3,6 +3,7 @@ import { Divider, Select, Slider, Tag } from 'antd'
 import { isEqual, pick } from 'es-toolkit'
 import { useMemo } from 'react'
 import { HelpInfo } from '$components/_base/HelpInfo'
+import { HotkeyDisplay } from '$components/fragments'
 import { EVideoLinkOpenMode, VideoLinkOpenModeConfig } from '$components/VideoCard/index.shared'
 import { antMessage } from '$modules/antd'
 import { settings, updateSettings, useSettingsSnapshot, type Settings } from '$modules/settings'
@@ -114,7 +115,7 @@ export function TabPaneVideoCard() {
                 勾选后, 视频卡片会有边框包裹, 更像是一个卡片~ <br />
                 整个卡片区域可点击 / 可触发预览 / 可使用右键菜单 <br />
                 否则只是封面区域可以 <br />
-                使用快捷键 <Tag color='green'>shift+b</Tag> 切换状态 <br />
+                使用快捷键 <HotkeyDisplay k='Shift+B' /> 切换状态 <br />
                 {borderCycleListLabels.map((label) => (
                   <Tag color='success' key={label} className='mx-1'>
                     {label}
@@ -165,7 +166,7 @@ export function TabPaneVideoCard() {
             tooltip={
               <>
                 {explainForFlag('鼠标悬浮后自动开始预览, 不跟随鼠标位置', '预览进度跟随鼠标位置(百分比)')}
-                切换设置快捷键: <Tag color='green'>shift+m</Tag>
+                切换设置快捷键: <HotkeyDisplay k='Shift+M' />
               </>
             }
           />
@@ -187,8 +188,8 @@ export function TabPaneVideoCard() {
             label='键盘选中后自动开始'
             tooltip={
               <>
-                手动预览快捷键: <Tag color='green'>.</Tag> or <Tag color='green'>p</Tag> <br />
-                切换设置快捷键: <Tag color='green'>shift+p</Tag>
+                手动预览快捷键: <HotkeyDisplay k='.' /> or <HotkeyDisplay k='P' /> <br />
+                切换设置快捷键: <HotkeyDisplay k='Shift+P' />
               </>
             }
           />

src/components/RecGrid/display-mode/index.tsx

@@ -3,11 +3,10 @@ import { InputNumber, Radio, Space, type CheckboxOptionType, type RadioChangeEve
 import { useMemo } from 'react'
 import { useUnoMerge } from 'unocss-merge/react'
 import { useSnapshot } from 'valtio'
-import { CustomKbd } from '$components/fragments'
+import { HotkeyDisplay } from '$components/fragments'
 import { EGridDisplayMode } from '$enums'
 import { AntdTooltip } from '$modules/antd/custom'
 import { settings } from '$modules/settings'
-import { isMac } from '$ua'
 import { TwoColumnModeAlignSwitcher } from './two-column-mode'
 
 export function gridDisplayModeChecker(x: EGridDisplayMode) {
@@ -118,8 +117,9 @@ export function GridTemplateColumnsConfig({ className }: { className?: string })
                   自适应: 指按照「卡片最小宽度」自适应 <br />
                   如果期望显示更多的列, 可以调小「卡片最小宽度」; <br />
                   如果期望显示更少的列, 可以调大「卡片最小宽度」; <br />
-                  Tip: 先点击输入框, 再移动鼠标到透视按钮, 然后使用键盘{' '}
-                  <CustomKbd>{isMac ? 'Option' : 'Alt'}</CustomKbd> + <CustomKbd>上下键</CustomKbd>调整
+                  Tip: 先点击输入框, 再移动鼠标到透视按钮, 然后使用键盘
+                  <HotkeyDisplay k='Alt+ArrowUp' className='mx-1' />
+                  <HotkeyDisplay k='Alt+ArrowDown' className='mx-1' /> 调整
                 </>
               }
             >

src/components/fragments.tsx

@@ -1,11 +1,16 @@
+import { formatForDisplay, type Hotkey } from '@tanstack/react-hotkeys'
 import { useUnoMerge } from 'unocss-merge/react'
 import type { ComponentProps } from 'react'
 
 export const kbdClassName =
-  'inline-block cursor-pointer rounded bg-gate-primary-lv-3 px-6px text-white line-height-tight font-mono'
+  'inline-block cursor-pointer rounded bg-gate-primary-lv-3 px-6px text-white line-height-tight tracking-1 font-mono'
 
 export function CustomKbd({ className, ...restProps }: ComponentProps<'kbd'>) {
-  return <kbd {...restProps} className={useUnoMerge(kbdClassName, className)}></kbd>
+  return <kbd {...restProps} className={useUnoMerge(kbdClassName, className)} />
+}
+
+export function HotkeyDisplay({ k, ...restProps }: Omit<ComponentProps<'kbd'>, 'children'> & { k: Hotkey }) {
+  return <CustomKbd {...restProps}>{formatForDisplay(k)}</CustomKbd>
 }
 
 export const antSpinIndicator = (

src/main/video-play-page.tsx

@@ -1,4 +1,5 @@
 import { bv2av } from '@mgdn/bvid'
+import { matchesKeyboardEvent } from '@tanstack/react-hotkeys'
 import { delay } from 'es-toolkit'
 import ms from 'ms'
 import { baseDebug } from '$common'
@@ -129,35 +130,44 @@ function registerAddToFavCommand() {
   GM.registerMenuCommand?.('⭐️ 加入收藏', () => addToFav())
 }
 async function setupCustomFavPicker() {
-  if (!settings.fav.useCustomFavPicker.onPlayPage) return
   if (!getCurrentPageBvid()) return
+  const willUseCustomFavPicker = () => settings.fav.useCustomFavPicker.onPlayPage
+
+  // setup keyboard shortcut
+  //  Shift+E: always on
+  //  E: only when willUseCustomFavPicker
   document.addEventListener(
     'keydown',
     (e) => {
-      if (e.key !== 'e') return
-      if (shouldDisableShortcut()) return
-      const target = e.target as HTMLElement
-      if (target.closest('bili-comments')) return // emit from a <bili-comments> element
-      e.stopImmediatePropagation()
-      e.preventDefault()
-      addToFav()
+      if (matchesKeyboardEvent(e, 'Shift+E') || (willUseCustomFavPicker() && matchesKeyboardEvent(e, 'E'))) {
+        if (!getCurrentPageBvid()) return
+        if (shouldDisableShortcut()) return
+        const target = e.target as HTMLElement
+        if (target.closest('bili-comments')) return // emit from a <bili-comments> element
+        e.stopImmediatePropagation()
+        e.preventDefault()
+        addToFav()
+      }
     },
     { capture: true },
   )
 
-  const el = await poll(() => document.querySelector<HTMLDivElement>('.video-fav.video-toolbar-left-item'), {
-    interval: 100,
-    timeout: 5_000,
-  })
-  el?.addEventListener(
-    'click',
-    (e) => {
-      e.stopImmediatePropagation()
-      e.preventDefault()
-      addToFav()
-    },
-    { capture: true },
-  )
+  if (willUseCustomFavPicker()) {
+    const el = await poll(() => document.querySelector<HTMLDivElement>('.video-fav.video-toolbar-left-item'), {
+      interval: 100,
+      timeout: 5_000,
+    })
+    el?.addEventListener(
+      'click',
+      (e) => {
+        if (!willUseCustomFavPicker() || !getCurrentPageBvid()) return
+        e.stopImmediatePropagation()
+        e.preventDefault()
+        addToFav()
+      },
+      { capture: true },
+    )
+  }
 }
 
 async function addToFav(sourceFavFolderIds?: number[] | undefined) {

src/utility/dom.ts

@@ -100,28 +100,46 @@ export async function tryToRemove(
 }
 
 /**
- * input 输入中, 用于拦截快捷键处理
+ * from https://github.com/TanStack/hotkeys/blob/%40tanstack/react-hotkeys%400.4.1/packages/hotkeys/src/manager.utils.ts#L48
+ * it's not exported
  */
+export function isInputElement(element: EventTarget | null): boolean {
+  if (!element) {
+    return false
+  }
 
-export function shouldDisableShortcut() {
-  // if activeElement is input, disable shortcut
-  const activeTagName = document.activeElement?.tagName?.toLowerCase() ?? ''
-  if (['input', 'textarea'].includes(activeTagName)) {
+  if (element instanceof HTMLInputElement) {
+    const type = element.type.toLowerCase()
+    if (type === 'button' || type === 'submit' || type === 'reset') {
+      return false
+    }
     return true
   }
 
-  // if search panel is open, disable shortcut
-  if (document.querySelector('.center-search__bar.is-focus')) {
+  if (element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
+    return true
+  }
+
+  // Check for contenteditable elements (includes "true", "", "plaintext-only",
+  // and inherited contenteditable from ancestor elements)
+  if (element instanceof HTMLElement && element.isContentEditable) {
     return true
   }
 
   return false
 }
 
 /**
- * https://youmightnotneedjquery.com/#offset
+ * input 输入中, 用于拦截快捷键处理
  */
+export function shouldDisableShortcut() {
+  if (isInputElement(document.activeElement)) return true
+  return false
+}
 
+/**
+ * https://youmightnotneedjquery.com/#offset
+ */
 export function getElementOffset(el: HTMLElement, rect?: DOMRect) {
   rect ??= el.getBoundingClientRect()
   const docElem = document.documentElement