refactor(core): CORE-14 split typed settings and scope tree lifetimes

packages/artplayer/src/setting/layout.ts

@@ -0,0 +1,71 @@
+import { isMobile } from '../utils/compatibility'
+
+interface LayoutItem {
+  readonly $parent?: { width?: number }
+}
+
+export interface SettingLayout {
+  active: LayoutItem[] | null
+  option: LayoutItem[]
+  show: boolean
+  art: {
+    isRotate: boolean
+    controls: { setting?: HTMLElement }
+    constructor: { SETTING_WIDTH: number, SETTING_ITEM_HEIGHT: number }
+    template: { $player: HTMLElement, $setting: HTMLElement, $bottom: HTMLElement }
+  }
+}
+
+export interface LayoutInput {
+  containerWidth: number
+  containerHeight: number
+  requestedWidth: number
+  rows: number
+  rowHeight: number
+  controlCenter: number
+  bottom: number
+  padding: number
+}
+
+export function calculateSettingLayout(input: LayoutInput): { width: number, height: number, left: number } {
+  const { containerWidth, containerHeight, requestedWidth, rows, rowHeight, controlCenter, bottom, padding } = input
+  const inset = Math.min(Math.max(0, padding), Math.max(0, containerWidth / 2))
+  const width = Math.min(Math.max(0, requestedWidth), Math.max(0, containerWidth - 2 * inset))
+  const height = Math.min(Math.max(0, rows * rowHeight), Math.max(0, containerHeight - bottom - inset))
+  const left = Math.max(inset, Math.min(controlCenter - width / 2, containerWidth - inset - width))
+  return { width, height, left }
+}
+
+export function resizeSetting(setting: SettingLayout): void {
+  const { art, active } = setting
+  const { controls, constructor: { SETTING_WIDTH, SETTING_ITEM_HEIGHT }, template: { $player, $setting, $bottom } } = art
+  if (!controls.setting || !setting.show || !active)
+    return
+  const player = $player.getBoundingClientRect()
+  const control = controls.setting.getBoundingClientRect()
+  const scale = player.width / $player.offsetWidth || 1
+  const controlCenter = (control.left - player.left + control.width / 2) / scale - $player.clientLeft
+  const layout = calculateSettingLayout({
+    containerWidth: $player.clientWidth,
+    containerHeight: $player.clientHeight,
+    requestedWidth: active[0]?.$parent?.width || SETTING_WIDTH,
+    rows: active.length + (active === setting.option ? 0 : 1),
+    rowHeight: SETTING_ITEM_HEIGHT,
+    controlCenter,
+    bottom: Number.parseFloat(getComputedStyle($setting).bottom) || 0,
+    padding: Number.parseFloat(getComputedStyle($bottom).paddingLeft) || 0,
+  })
+  $setting.style.height = `${layout.height}px`
+  $setting.style.width = `${layout.width}px`
+  if (art.isRotate || isMobile)
+    return
+  if (controlCenter + layout.width / 2 > $player.clientWidth) {
+    // Preserve the existing CSS right-edge anchor when centering would overflow.
+    $setting.style.left = ''
+    $setting.style.right = ''
+  }
+  else {
+    $setting.style.left = `${layout.left}px`
+    $setting.style.right = 'auto'
+  }
+}