refactor(core): [CORE-22] validate compatible core and defer initial layout

packages/artplayer/src/setting/keyboard-focus.ts

@@ -4,16 +4,29 @@ import { isClosing } from '../lifecycle/instance'
 import { settingScopeActive } from './activity'
 import { settingPanelScope } from './panels'
 
+const focusSelector = '[tabindex="0"],button,input,select,textarea,a[href],[contenteditable]'
+
 function available(element: HTMLElement): boolean {
+  if (!element.isConnected || element.matches(':disabled') || element.closest('[inert]') || element.getAttribute('aria-disabled') === 'true' || !element.getClientRects().length)
+    return false
   const visibility = element.ownerDocument.defaultView?.getComputedStyle(element).visibility
-  return element.isConnected && !element.matches(':disabled') && !element.closest('[inert]') && element.getAttribute('aria-disabled') !== 'true' && element.getClientRects().length > 0 && visibility !== 'hidden' && visibility !== 'collapse'
+  return visibility !== 'hidden' && visibility !== 'collapse'
 }
 
 export function settingFocusTargets(panel: HTMLElement): HTMLElement[] {
-  return Array.from(panel.querySelectorAll<HTMLElement>('[tabindex="0"],button,input,select,textarea,a[href],[contenteditable]'))
+  return Array.from(panel.querySelectorAll<HTMLElement>(focusSelector))
     .filter(element => element.getAttribute('tabindex') !== '-1' && available(element))
 }
 
+function selectSettingTarget(panel: HTMLElement, preferred?: HTMLElement, last = false): HTMLElement | undefined {
+  if (preferred && preferred !== panel && panel.contains(preferred) && preferred.matches(focusSelector) && preferred.getAttribute('tabindex') !== '-1' && available(preferred))
+    return preferred
+  const targets = settingFocusTargets(panel)
+  const selected = panel.querySelector('.art-setting-item.art-current')
+  return targets.find(element => preferred?.contains(element))
+    || (last ? targets[targets.length - 1] : targets.find(element => selected?.contains(element)) || targets.find(element => !element.classList.contains('art-setting-item-back')) || targets[0])
+}
+
 export function returnSettingFocus(setting: SettingManager): void {
   const { art, $parent } = setting
   const player = art.template.$player
@@ -33,10 +46,7 @@ export function focusSettingPanel(setting: SettingManager, preferred?: HTMLEleme
   const panel = setting.cache.get(setting.active)
   if (!panel || !settingScopeActive(settingPanelScope(panel)))
     return
-  const targets = settingFocusTargets(panel)
-  const selected = panel.querySelector('.art-setting-item.art-current')
-  const target = targets.find(element => preferred === element || preferred?.contains(element))
-    || (last ? targets[targets.length - 1] : targets.find(element => selected?.contains(element)) || targets.find(element => !element.classList.contains('art-setting-item-back')) || targets[0])
+  const target = selectSettingTarget(panel, preferred, last)
   target?.focus({ preventScroll: true })
   if (!isClosing(setting.art))
     target?.scrollIntoView({ block: 'nearest', inline: 'nearest' })

packages/artplayer/src/setting/keyboard.ts

@@ -68,6 +68,8 @@ export function installSettingKeyboard(setting: SettingManager): void {
       close()
       return
     }
+    if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
+      return
     const row = target.closest<HTMLElement>('.art-setting-item')
     if (!row || (target !== row && !target.matches('button,a[href],[role="button"]')))
       return
@@ -76,8 +78,7 @@ export function installSettingKeyboard(setting: SettingManager): void {
       return
     const currentItem = setting.active?.find(item => item.$item === row)
     if (!settingScopeActive(settingPanelScope(panel)) || (currentItem && !settingScopeActive(settingScope(currentItem)))) {
-      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key))
-        claimKey(event)
+      claimKey(event)
       return
     }
     const targets = settingFocusTargets(panel)