refactor(core): [CORE-20] type entry and converge initialization

packages/artplayer/src/control/index.ts

@@ -18,6 +18,8 @@ import { checkSelector, renderSelector } from './selector'
 export default class Control extends Component<ControlHost> {
   declare isHover: boolean
   declare timer: number
+  declare setting?: HTMLDivElement
+  declare thumbnails?: HTMLDivElement
 
   constructor(art: ControlHost) {
     super(art)

packages/artplayer/src/control/progress/position.ts

@@ -7,7 +7,8 @@ export interface ProgressPositionHost {
   isRotate: boolean
   top: number
   height: number
-  seek: number | string
+  get seek(): undefined
+  set seek(value: number | string)
   emit: (name: 'setBar', kind: 'played', percentage: number, event: ProgressEvent) => unknown
 }
 

packages/artplayer/src/control/selector.ts

@@ -37,7 +37,7 @@ export function checkSelector(target?: SelectorItem): void {
     const item = target.$control_option![index]!
     item.default = item === target
     if (item.default)
-      inverseClass(item.$control_item, 'art-current')
+      inverseClass(item.$control_item!, 'art-current')
   }
 }
 
@@ -69,7 +69,7 @@ export function renderSelector(art: ControlHost, check: (target?: SelectorItem)
     if (scope.closed)
       return
     const path = getComposedPath(event)
-    const item = option.selector!.find(item => path.includes(item.$control_item))
+    const item = option.selector!.find(item => path.includes(item.$control_item!))
     if (!item)
       return
     const current = ++generation

packages/artplayer/src/control/types.ts

@@ -1,5 +1,6 @@
 import type { SubscriptionHost } from '../component/resources'
 import type { ComponentHost, EntryInput, EntryOption } from '../component/types'
+import type { PipProperty } from '../display/types'
 
 export interface UIEvents {
   'mousemove': [MouseEvent]
@@ -27,11 +28,11 @@ export interface UIEvents {
   'resize': []
 }
 
-export interface QualityItem { html: string, url: string, default?: boolean }
+export interface QualityItem { html: string | HTMLElement, url: string, default?: boolean }
 
 type IconName = 'play' | 'pause' | 'volume' | 'volumeClose' | 'fullscreenOn' | 'fullscreenOff' | 'fullscreenWebOn' | 'fullscreenWebOff' | 'pip' | 'setting' | 'screenshot' | 'airplay'
 
-export interface ControlHost extends ComponentHost, SubscriptionHost<UIEvents> {
+export interface ControlHost extends ComponentHost, SubscriptionHost<UIEvents>, PipProperty {
   template: {
     $player: HTMLDivElement
     $bottom: HTMLDivElement
@@ -67,10 +68,11 @@ export interface ControlHost extends ComponentHost, SubscriptionHost<UIEvents> {
   loaded: number
   top: number
   height: number
-  fullscreen: boolean
+  fullscreen?: boolean
   fullscreenWeb: boolean
-  pip: boolean
+  get seek(): undefined
   set seek(second: number)
+  get quality(): undefined
   set quality(value: QualityItem[])
   play: () => unknown
   pause: () => unknown