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

packages/artplayer/src/player/optionInit.ts

@@ -0,0 +1,117 @@
+import type { ResolvedOption } from '../option/types'
+import type { AttributeMethods } from './attrMix'
+import type { CssVariableMethods } from './cssVarMix'
+import { isClosing } from '../lifecycle/instance'
+import { clamp, setStyle } from '../utils'
+
+export interface InitialOptionHost extends AttributeMethods, CssVariableMethods {
+  option: Pick<ResolvedOption, 'moreVideoAttr' | 'muted' | 'volume' | 'poster' | 'autoplay' | 'playsInline' | 'theme' | 'cssVar' | 'url'>
+  storage: { get: (key: string) => unknown }
+  template: {
+    $video: Pick<HTMLMediaElement, 'volume'> & { 'autoplay'?: boolean, 'playsInline'?: boolean, 'webkit-playsinline'?: boolean }
+    $poster: HTMLElement
+  }
+  muted: boolean
+  get url(): string | null
+  set url(value: string)
+}
+
+export default function optionInit(art: InitialOptionHost): void {
+  if (isClosing(art))
+    return
+  const {
+    option,
+    storage,
+    template: { $video, $poster },
+  } = art
+
+  for (const key in option.moreVideoAttr) {
+    if (isClosing(art))
+      return
+    const value = (option.moreVideoAttr as Record<string, unknown>)[key]
+    if (isClosing(art))
+      return
+    art.attr(key, value)
+  }
+
+  if (isClosing(art))
+    return
+  if (option.muted) {
+    const value = option.muted
+    if (isClosing(art))
+      return
+    art.muted = value
+  }
+
+  if (isClosing(art))
+    return
+  if (option.volume) {
+    const value = clamp(option.volume, 0, 1)
+    if (isClosing(art))
+      return
+    $video.volume = value
+  }
+
+  if (isClosing(art))
+    return
+  const volumeStorage = storage.get('volume')
+  if (isClosing(art))
+    return
+  if (typeof volumeStorage === 'number') {
+    $video.volume = clamp(volumeStorage, 0, 1)
+  }
+
+  if (isClosing(art))
+    return
+  if (option.poster) {
+    const value = `url(${option.poster})`
+    if (isClosing(art))
+      return
+    setStyle($poster, 'backgroundImage', value)
+  }
+
+  if (isClosing(art))
+    return
+  if (option.autoplay) {
+    const value = option.autoplay
+    if (isClosing(art))
+      return
+    $video.autoplay = value
+  }
+
+  if (isClosing(art))
+    return
+  if (option.playsInline) {
+    if (isClosing(art))
+      return
+    $video.playsInline = true
+    if (isClosing(art))
+      return
+    $video['webkit-playsinline'] = true
+  }
+
+  if (isClosing(art))
+    return
+  if (option.theme) {
+    const styles = option.cssVar
+    const theme = option.theme
+    if (isClosing(art))
+      return
+    styles['--art-theme'] = theme
+  }
+
+  for (const key in option.cssVar) {
+    if (isClosing(art))
+      return
+    const value = (option.cssVar as Record<string, unknown>)[key]
+    if (isClosing(art))
+      return
+    art.cssVar(key, value)
+  }
+
+  if (isClosing(art))
+    return
+  const url = option.url
+  if (!isClosing(art))
+    art.url = url
+}